diff --git a/lib/catalyst/alert.jsx b/lib/catalyst/alert.jsx deleted file mode 100644 index 1e72a71..0000000 --- a/lib/catalyst/alert.jsx +++ /dev/null @@ -1,117 +0,0 @@ -import { - Description as HeadlessDescription, - Dialog as HeadlessDialog, - DialogPanel as HeadlessDialogPanel, - DialogTitle as HeadlessDialogTitle, - Transition as HeadlessTransition, - TransitionChild as HeadlessTransitionChild, -} from "@headlessui/react"; -import clsx from "clsx"; -import { Fragment } from "react"; -import { Text } from "./text"; - -const sizes = { - xs: "sm:max-w-xs", - sm: "sm:max-w-sm", - md: "sm:max-w-md", - lg: "sm:max-w-lg", - xl: "sm:max-w-xl", - "2xl": "sm:max-w-2xl", - "3xl": "sm:max-w-3xl", - "4xl": "sm:max-w-4xl", - "5xl": "sm:max-w-5xl", -}; - -export function Alert({ - open, - onClose, - size = "md", - className, - children, - ...props -}) { - return ( - - - -
- - - -
- - {children} - -
- - - - ); -} - -export function AlertTitle({ className, ...props }) { - return ( - - ); -} - -export function AlertDescription({ className, ...props }) { - return ( - - ); -} - -export function AlertBody({ className, ...props }) { - return
; -} - -export function AlertActions({ className, ...props }) { - return ( -
- ); -} diff --git a/lib/catalyst/avatar.jsx b/lib/catalyst/avatar.jsx deleted file mode 100644 index 1204c98..0000000 --- a/lib/catalyst/avatar.jsx +++ /dev/null @@ -1,83 +0,0 @@ -import { Button as HeadlessButton } from "@headlessui/react"; -import clsx from "clsx"; -import React from "react"; -import { TouchTarget } from "./button"; -import { Link } from "./link"; - -export function Avatar({ - src = null, - square = false, - initials, - alt = "", - className, - ...props -}) { - return ( - - {initials && ( - - {alt && {alt}} - - {initials} - - - )} - {src && {alt}} - {/* Add an inset border that sits on top of the image */} - - - ); -} - -export const AvatarButton = React.forwardRef(function AvatarButton( - { src, square = false, initials, alt, className, ...props }, - ref, -) { - let classes = clsx( - className, - square ? "rounded-lg" : "rounded-full", - "relative focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500", - ); - - return "href" in props ? ( - - - - - - ) : ( - - - - - - ); -}); diff --git a/lib/catalyst/checkbox.jsx b/lib/catalyst/checkbox.jsx deleted file mode 100644 index 51c1b1b..0000000 --- a/lib/catalyst/checkbox.jsx +++ /dev/null @@ -1,163 +0,0 @@ -import { - Checkbox as HeadlessCheckbox, - Field as HeadlessField, -} from "@headlessui/react"; -import { clsx } from "clsx"; - -export function CheckboxGroup({ className, ...props }) { - return ( -
- ); -} - -export function CheckboxField({ className, ...props }) { - return ( - [data-slot=control]]:col-start-1 [&>[data-slot=control]]:row-start-1 [&>[data-slot=control]]:justify-self-center", - - // Label layout - "[&>[data-slot=label]]:col-start-2 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start", - - // Description layout - "[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2", - - // With description - "[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium", - )} - /> - ); -} - -const base = [ - // Basic layout - "relative isolate flex size-[1.125rem] items-center justify-center rounded-[0.3125rem] sm:size-4", - - // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode - "before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow", - - // Background color when checked - "before:group-data-[checked]:bg-[--checkbox-checked-bg]", - - // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo - "dark:before:hidden", - - // Background color applied to control in dark mode - "dark:bg-white/5 dark:group-data-[checked]:bg-[--checkbox-checked-bg]", - - // Border - "border border-zinc-950/15 group-data-[checked]:border-transparent group-data-[checked]:group-data-[hover]:border-transparent group-data-[hover]:border-zinc-950/30 group-data-[checked]:bg-[--checkbox-checked-border]", - "dark:border-white/15 dark:group-data-[checked]:border-white/5 dark:group-data-[checked]:group-data-[hover]:border-white/5 dark:group-data-[hover]:border-white/30", - - // Inner highlight shadow - "after:absolute after:inset-0 after:rounded-[calc(0.3125rem-1px)] after:shadow-[inset_0_1px_theme(colors.white/15%)]", - "dark:after:-inset-px dark:after:hidden dark:after:rounded-[0.3125rem] dark:group-data-[checked]:after:block", - - // Focus ring - "group-data-[focus]:outline group-data-[focus]:outline-2 group-data-[focus]:outline-offset-2 group-data-[focus]:outline-blue-500", - - // Disabled state - "group-data-[disabled]:opacity-50", - "group-data-[disabled]:border-zinc-950/25 group-data-[disabled]:bg-zinc-950/5 group-data-[disabled]:[--checkbox-check:theme(colors.zinc.950/50%)] group-data-[disabled]:before:bg-transparent", - "dark:group-data-[disabled]:border-white/20 dark:group-data-[disabled]:bg-white/[2.5%] dark:group-data-[disabled]:[--checkbox-check:theme(colors.white/50%)] dark:group-data-[disabled]:group-data-[checked]:after:hidden", - - // Forced colors mode - "forced-colors:[--checkbox-check:HighlightText] forced-colors:[--checkbox-checked-bg:Highlight] forced-colors:group-data-[disabled]:[--checkbox-check:Highlight]", - "dark:forced-colors:[--checkbox-check:HighlightText] dark:forced-colors:[--checkbox-checked-bg:Highlight] dark:forced-colors:group-data-[disabled]:[--checkbox-check:Highlight]", -]; - -const colors = { - "dark/zinc": [ - "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]", - "dark:[--checkbox-checked-bg:theme(colors.zinc.600)]", - ], - "dark/white": [ - "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]", - "dark:[--checkbox-check:theme(colors.zinc.900)] dark:[--checkbox-checked-bg:theme(colors.white)] dark:[--checkbox-checked-border:theme(colors.zinc.950/15%)]", - ], - white: - "[--checkbox-check:theme(colors.zinc.900)] [--checkbox-checked-bg:theme(colors.white)] [--checkbox-checked-border:theme(colors.zinc.950/15%)]", - dark: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]", - zinc: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.600)] [--checkbox-checked-border:theme(colors.zinc.700/90%)]", - red: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.red.600)] [--checkbox-checked-border:theme(colors.red.700/90%)]", - orange: - "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.orange.500)] [--checkbox-checked-border:theme(colors.orange.600/90%)]", - amber: - "[--checkbox-check:theme(colors.amber.950)] [--checkbox-checked-bg:theme(colors.amber.400)] [--checkbox-checked-border:theme(colors.amber.500/80%)]", - yellow: - "[--checkbox-check:theme(colors.yellow.950)] [--checkbox-checked-bg:theme(colors.yellow.300)] [--checkbox-checked-border:theme(colors.yellow.400/80%)]", - lime: "[--checkbox-check:theme(colors.lime.950)] [--checkbox-checked-bg:theme(colors.lime.300)] [--checkbox-checked-border:theme(colors.lime.400/80%)]", - green: - "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.green.600)] [--checkbox-checked-border:theme(colors.green.700/90%)]", - emerald: - "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.emerald.600)] [--checkbox-checked-border:theme(colors.emerald.700/90%)]", - teal: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.teal.600)] [--checkbox-checked-border:theme(colors.teal.700/90%)]", - cyan: "[--checkbox-check:theme(colors.cyan.950)] [--checkbox-checked-bg:theme(colors.cyan.300)] [--checkbox-checked-border:theme(colors.cyan.400/80%)]", - sky: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.sky.500)] [--checkbox-checked-border:theme(colors.sky.600/80%)]", - blue: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.blue.600)] [--checkbox-checked-border:theme(colors.blue.700/90%)]", - indigo: - "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.indigo.500)] [--checkbox-checked-border:theme(colors.indigo.600/90%)]", - violet: - "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.violet.500)] [--checkbox-checked-border:theme(colors.violet.600/90%)]", - purple: - "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.purple.500)] [--checkbox-checked-border:theme(colors.purple.600/90%)]", - fuchsia: - "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.fuchsia.500)] [--checkbox-checked-border:theme(colors.fuchsia.600/90%)]", - pink: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.pink.500)] [--checkbox-checked-border:theme(colors.pink.600/90%)]", - rose: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.rose.500)] [--checkbox-checked-border:theme(colors.rose.600/90%)]", -}; - -export function Checkbox({ color = "dark/zinc", className, ...props }) { - return ( - - - - {/* Checkmark icon */} - - {/* Indeterminate icon */} - - - - - ); -} diff --git a/lib/catalyst/dialog.jsx b/lib/catalyst/dialog.jsx deleted file mode 100644 index ea83ac6..0000000 --- a/lib/catalyst/dialog.jsx +++ /dev/null @@ -1,117 +0,0 @@ -import { - Description as HeadlessDescription, - Dialog as HeadlessDialog, - DialogPanel as HeadlessDialogPanel, - DialogTitle as HeadlessDialogTitle, - Transition as HeadlessTransition, - TransitionChild as HeadlessTransitionChild, -} from "@headlessui/react"; -import clsx from "clsx"; -import { Fragment } from "react"; -import { Text } from "./text"; - -const sizes = { - xs: "sm:max-w-xs", - sm: "sm:max-w-sm", - md: "sm:max-w-md", - lg: "sm:max-w-lg", - xl: "sm:max-w-xl", - "2xl": "sm:max-w-2xl", - "3xl": "sm:max-w-3xl", - "4xl": "sm:max-w-4xl", - "5xl": "sm:max-w-5xl", -}; - -export function Dialog({ - open, - onClose, - size = "lg", - className, - children, - ...props -}) { - return ( - - - -
- - - -
- - {children} - -
- - - - ); -} - -export function DialogTitle({ className, ...props }) { - return ( - - ); -} - -export function DialogDescription({ className, ...props }) { - return ( - - ); -} - -export function DialogBody({ className, ...props }) { - return
; -} - -export function DialogActions({ className, ...props }) { - return ( -
- ); -} diff --git a/lib/catalyst/dropdown.jsx b/lib/catalyst/dropdown.jsx deleted file mode 100644 index 9e97ed9..0000000 --- a/lib/catalyst/dropdown.jsx +++ /dev/null @@ -1,202 +0,0 @@ -"use client"; - -import { - Description as HeadlessDescription, - Label as HeadlessLabel, - Menu as HeadlessMenu, - MenuButton as HeadlessMenuButton, - MenuHeading as HeadlessMenuHeading, - MenuItem as HeadlessMenuItem, - MenuItems as HeadlessMenuItems, - MenuSection as HeadlessMenuSection, - MenuSeparator as HeadlessMenuSeparator, - Transition as HeadlessTransition, -} from "@headlessui/react"; -import clsx from "clsx"; -import { Fragment } from "react"; -import { Button } from "../components/button"; -import { Link } from "./link"; - -export function Dropdown(props) { - return ; -} - -export function DropdownButton(props) { - return ; -} - -export function DropdownMenu({ anchor = "bottom", ...props }) { - return ( - - - - ); -} - -export function DropdownItem(props) { - return ( - [data-slot=icon]]:data-[focus]:text-[HighlightText]", - - // Use subgrid when available but fallback to an explicit grid layout if not - "col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid", - - // Icon - "[&>[data-slot=icon]]:col-start-1 [&>[data-slot=icon]]:row-start-1 [&>[data-slot=icon]]:mr-2.5 [&>[data-slot=icon]]:size-5 sm:[&>[data-slot=icon]]:mr-2 [&>[data-slot=icon]]:sm:size-4", - "[&>[data-slot=icon]]:text-zinc-500 [&>[data-slot=icon]]:data-[focus]:text-white [&>[data-slot=icon]]:dark:text-zinc-500 [&>[data-slot=icon]]:data-[focus]:dark:text-white", - )} - /> - ); -} - -export function DropdownHeader({ className, ...props }) { - return ( -
- ); -} - -export function DropdownSection({ className, ...props }) { - return ( - - ); -} - -export function DropdownHeading({ className, ...props }) { - return ( - - ); -} - -export function DropdownSeparator({ className, ...props }) { - return ( - - ); -} - -export function DropdownLabel({ className, ...props }) { - return ( - - ); -} - -export function DropdownDescription({ className, ...props }) { - return ( - - ); -} - -export function DropdownShortcut({ className, keys, ...props }) { - return ( - - {(Array.isArray(keys) ? keys : keys.split("")).map((char, index) => ( - 0 && char.length > 1 && "pl-1", - ])} - > - {char} - - ))} - - ); -} diff --git a/lib/catalyst/fieldset.jsx b/lib/catalyst/fieldset.jsx deleted file mode 100644 index 0111b6a..0000000 --- a/lib/catalyst/fieldset.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import { - Description as HeadlessDescription, - Field as HeadlessField, - Fieldset as HeadlessFieldset, - Label as HeadlessLabel, - Legend as HeadlessLegend, -} from "@headlessui/react"; -import clsx from "clsx"; - -export function Fieldset({ className, ...props }) { - return ( - *+[data-slot=control]]:mt-6 [&>[data-slot=text]]:mt-1", - )} - /> - ); -} - -export function Legend({ ...props }) { - return ( - - ); -} - -export function FieldGroup({ className, ...props }) { - return ( -
- ); -} - -export function Field({ className, ...props }) { - return ( - [data-slot=label]+[data-slot=control]]:mt-3", - "[&>[data-slot=label]+[data-slot=description]]:mt-1", - "[&>[data-slot=description]+[data-slot=control]]:mt-3", - "[&>[data-slot=control]+[data-slot=description]]:mt-3", - "[&>[data-slot=control]+[data-slot=error]]:mt-3", - "[&>[data-slot=label]]:font-medium", - )} - {...props} - /> - ); -} - -export function Label({ className, ...props }) { - return ( - - ); -} - -export function Description({ className, disabled, ...props }) { - return ( - - ); -} - -export function ErrorMessage({ className, disabled, ...props }) { - return ( - - ); -} diff --git a/lib/catalyst/input.jsx b/lib/catalyst/input.jsx deleted file mode 100644 index f20dd72..0000000 --- a/lib/catalyst/input.jsx +++ /dev/null @@ -1,78 +0,0 @@ -import { Input as HeadlessInput } from "@headlessui/react"; -import { clsx } from "clsx"; -import { forwardRef } from "react"; - -const dateTypes = ["date", "datetime-local", "month", "time", "week"]; - -export const Input = forwardRef(function Input({ className, ...props }, ref) { - return ( - - - - ); -}); diff --git a/lib/catalyst/link.jsx b/lib/catalyst/link.jsx deleted file mode 100644 index c1f1ecc..0000000 --- a/lib/catalyst/link.jsx +++ /dev/null @@ -1,18 +0,0 @@ -/* -TODO: Update this component to use your client-side framework's link -component. We've provided examples of how to do this for Next.js, -Remix, and Inertia.js in the Catalyst documentation: - -https://catalyst.tailwindui.com/docs#client-side-router-integration -*/ - -import { DataInteractive as HeadlessDataInteractive } from "@headlessui/react"; -import React from "react"; - -export const Link = React.forwardRef(function Link(props, ref) { - return ( - - - - ); -}); diff --git a/lib/catalyst/listbox.jsx b/lib/catalyst/listbox.jsx deleted file mode 100644 index 2f74b15..0000000 --- a/lib/catalyst/listbox.jsx +++ /dev/null @@ -1,235 +0,0 @@ -"use client"; - -import { - Listbox as HeadlessListbox, - ListboxButton as HeadlessListboxButton, - ListboxOption as HeadlessListboxOption, - ListboxOptions as HeadlessListboxOptions, - ListboxSelectedOption as HeadlessListboxSelectedOption, - Transition as HeadlessTransition, -} from "@headlessui/react"; -import clsx from "clsx"; -import { Fragment } from "react"; - -export function Listbox({ - className, - placeholder, - autoFocus, - "aria-label": ariaLabel, - children: options, - ...props -}) { - return ( - - - - {placeholder} - - ) - } - className={clsx([ - // Basic layout - "relative block w-full appearance-none rounded-lg py-[calc(theme(spacing[2.5])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]", - - // Set minimum height for when no value is selected - "min-h-11 sm:min-h-9", - - // Horizontal padding - "pl-[calc(theme(spacing[3.5])-1px)] pr-[calc(theme(spacing.7)-1px)] sm:pl-[calc(theme(spacing.3)-1px)]", - - // Typography - "text-left text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]", - - // Border - "border border-zinc-950/10 group-data-[active]:border-zinc-950/20 group-data-[hover]:border-zinc-950/20 dark:border-white/10 dark:group-data-[active]:border-white/20 dark:group-data-[hover]:border-white/20", - - // Background color - "bg-transparent dark:bg-white/5", - - // Invalid state - "group-data-[invalid]:border-red-500 group-data-[invalid]:group-data-[hover]:border-red-500 group-data-[invalid]:dark:border-red-600 group-data-[invalid]:data-[hover]:dark:border-red-600", - - // Disabled state - "group-data-[disabled]:border-zinc-950/20 group-data-[disabled]:opacity-100 group-data-[disabled]:dark:border-white/15 group-data-[disabled]:dark:bg-white/[2.5%] dark:data-[hover]:group-data-[disabled]:border-white/15", - ])} - /> - - - - - - - {options} - - - - ); -} - -export function ListboxOption({ children, className, ...props }) { - const sharedClasses = clsx( - // Base - "flex min-w-0 items-center", - - // Icons - "[&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-zinc-500 [&>[data-slot=icon]]:group-data-[focus]/option:text-white sm:[&>[data-slot=icon]]:size-4 forced-colors:[&>[data-slot=icon]]:text-[CanvasText] forced-colors:[&>[data-slot=icon]]:group-data-[focus]/option:text-[Canvas]", - - // Avatars - "[&>[data-slot=avatar]]:size-6 sm:[&>[data-slot=avatar]]:size-5", - ); - - return ( - - {({ selectedOption }) => { - if (selectedOption) { - return ( -
{children}
- ); - } - - return ( -
- - - {children} - -
- ); - }} - - ); -} - -export function ListboxLabel({ className, ...props }) { - return ( - - ); -} - -export function ListboxDescription({ className, children, ...props }) { - return ( - - {children} - - ); -} diff --git a/lib/catalyst/pagination.jsx b/lib/catalyst/pagination.jsx deleted file mode 100644 index e2a8933..0000000 --- a/lib/catalyst/pagination.jsx +++ /dev/null @@ -1,109 +0,0 @@ -import clsx from "clsx"; - -import { Button } from "./button"; - -export function Pagination({ - "aria-label": ariaLabel = "Page navigation", - className, - ...props -}) { - return ( -