luan-ui 0.7.0 → 0.8.0

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,68 @@
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import type { ComponentProps, JSX } from "react";
+/**
+ * Combobox
+ *
+ * An input combined with a list of predefined items to select.
+ * Use when the input is restricted to a set of predefined selectable items,
+ * similar to Select but whose items are filterable using an input.
+ */
+export type ComboboxProps<Value = unknown, Multiple extends boolean | undefined = false> = ComboboxPrimitive.Root.Props<Value, Multiple>;
+declare function Combobox<Value, Multiple extends boolean | undefined = false>({ disabled: initialDisabled, required: initialRequired, ...props }: ComboboxProps<Value, Multiple>): JSX.Element;
+/**
+ * ComboboxInputGroup
+ */
+export type ComboboxInputGroupProps = ComponentProps<typeof ComboboxPrimitive.InputGroup>;
+declare function ComboboxInputGroup({ className, ref, ...props }: ComboboxInputGroupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ComboboxInput
+ */
+export type ComboboxInputProps = ComponentProps<typeof ComboboxPrimitive.Input>;
+declare function ComboboxInput({ className, ref, ...props }: ComboboxInputProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ComboboxTrigger
+ */
+export type ComboboxTriggerProps = ComponentProps<typeof ComboboxPrimitive.Trigger>;
+declare function ComboboxTrigger({ className, ref, ...props }: ComboboxTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ComboboxClear
+ */
+export type ComboboxClearProps = ComponentProps<typeof ComboboxPrimitive.Clear>;
+declare function ComboboxClear({ className, ref, ...props }: ComboboxClearProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ComboboxContent
+ */
+export type ComboboxContentProps = ComponentProps<typeof ComboboxPrimitive.Popup> & {
+    sideOffset?: number;
+};
+declare function ComboboxContent({ className, children, sideOffset, ref, ...props }: ComboboxContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ComboboxList
+ */
+export type ComboboxListProps = ComponentProps<typeof ComboboxPrimitive.List>;
+declare function ComboboxList({ className, ref, ...props }: ComboboxListProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ComboboxEmpty
+ */
+export type ComboboxEmptyProps = ComponentProps<typeof ComboboxPrimitive.Empty>;
+declare function ComboboxEmpty({ className, ref, ...props }: ComboboxEmptyProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ComboboxItem
+ */
+export type ComboboxItemProps = ComponentProps<typeof ComboboxPrimitive.Item>;
+declare function ComboboxItem({ className, children, ref, ...props }: ComboboxItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ComboboxGroup
+ */
+declare const ComboboxGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * ComboboxGroupLabel
+ */
+export type ComboboxGroupLabelProps = ComponentProps<typeof ComboboxPrimitive.GroupLabel>;
+declare function ComboboxGroupLabel({ className, ref, ...props }: ComboboxGroupLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ComboboxSeparator
+ */
+export type ComboboxSeparatorProps = ComponentProps<typeof ComboboxPrimitive.Separator>;
+declare function ComboboxSeparator({ className, ref, ...props }: ComboboxSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export { Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, };

package/dist/components/combobox/combobox.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import { useFormContext } from "../form-field/form-field-context";
+import { Icon } from "../icon/icon";
+import { CheckIcon, ChevronDownIcon, Cross2Icon } from "@radix-ui/react-icons";
+import { cn } from "../../utilities/cn/cn";
+function Combobox({ disabled: initialDisabled, required: initialRequired, ...props }) {
+    const { disabled, required } = useFormContext({
+        disabled: initialDisabled,
+        required: initialRequired,
+    });
+    return (_jsx(ComboboxPrimitive.Root, { disabled: disabled, required: required, ...props }));
+}
+function ComboboxInputGroup({ className, ref, ...props }) {
+    return (_jsx(ComboboxPrimitive.InputGroup, { ref: ref, className: cn("flex h-9 w-full items-center rounded-md border border-border-input bg-transparent text-sm shadow-sm ring-offset-background focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50", className), ...props }));
+}
+function ComboboxInput({ className, ref, ...props }) {
+    return (_jsx(ComboboxPrimitive.Input, { ref: ref, className: cn("h-full w-full flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-text-placeholder disabled:cursor-not-allowed", className), ...props }));
+}
+function ComboboxTrigger({ className, ref, ...props }) {
+    return (_jsx(ComboboxPrimitive.Trigger, { ref: ref, className: cn("flex shrink-0 cursor-pointer items-center justify-center px-2 opacity-50 hover:opacity-100 disabled:cursor-not-allowed", className), ...props, children: _jsx(Icon, { size: "small", children: _jsx(ChevronDownIcon, {}) }) }));
+}
+function ComboboxClear({ className, ref, ...props }) {
+    return (_jsx(ComboboxPrimitive.Clear, { ref: ref, "aria-label": "Clear selection", className: cn("flex shrink-0 cursor-pointer items-center justify-center px-1 opacity-50 hover:opacity-100 disabled:cursor-not-allowed", className), ...props, children: _jsx(Icon, { size: "small", children: _jsx(Cross2Icon, {}) }) }));
+}
+function ComboboxContent({ className, children, sideOffset = 4, ref, ...props }) {
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { sideOffset: sideOffset, children: _jsx(ComboboxPrimitive.Popup, { ref: ref, className: cn("data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:fade-out data-closed:zoom-out-95 data-open:fade-in data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md border border-border-input bg-surface text-text-secondary shadow-md transition-all data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-closed:animate-out data-open:animate-in", className), ...props, children: children }) }) }));
+}
+function ComboboxList({ className, ref, ...props }) {
+    return (_jsx(ComboboxPrimitive.List, { ref: ref, className: cn("w-full p-1 empty:hidden", className), ...props }));
+}
+function ComboboxEmpty({ className, ref, ...props }) {
+    return (_jsx(ComboboxPrimitive.Empty, { ref: ref, className: cn("px-2 py-4 text-center text-sm text-text-muted empty:hidden", className), ...props }));
+}
+function ComboboxItem({ className, children, ref, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(ComboboxPrimitive.ItemIndicator, { children: _jsx(Icon, { size: "small", children: _jsx(CheckIcon, {}) }) }) }), children] }));
+}
+/**
+ * ComboboxGroup
+ */
+const ComboboxGroup = ComboboxPrimitive.Group;
+function ComboboxGroupLabel({ className, ref, ...props }) {
+    return (_jsx(ComboboxPrimitive.GroupLabel, { ref: ref, className: cn("px-2 py-1.5 font-semibold text-sm", className), ...props }));
+}
+function ComboboxSeparator({ className, ref, ...props }) {
+    return (_jsx(ComboboxPrimitive.Separator, { ref: ref, className: cn("my-2 h-px bg-separator", className), ...props }));
+}
+export { Combobox, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, };
+//# sourceMappingURL=combobox.js.map

package/dist/components/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","sourceRoot":"/","sources":["components/combobox/combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport { Icon } from \"@components/icon/icon\";\nimport { CheckIcon, ChevronDownIcon, Cross2Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps, JSX } from \"react\";\n\n/**\n * Combobox\n *\n * An input combined with a list of predefined items to select.\n * Use when the input is restricted to a set of predefined selectable items,\n * similar to Select but whose items are filterable using an input.\n */\n\nexport type ComboboxProps<\n\tValue = unknown,\n\tMultiple extends boolean | undefined = false,\n> = ComboboxPrimitive.Root.Props<Value, Multiple>;\n\nfunction Combobox<Value, Multiple extends boolean | undefined = false>({\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\t...props\n}: ComboboxProps<Value, Multiple>): JSX.Element {\n\tconst { disabled, required } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t<ComboboxPrimitive.Root<Value, Multiple>\n\t\t\tdisabled={disabled}\n\t\t\trequired={required}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxInputGroup\n */\n\nexport type ComboboxInputGroupProps = ComponentProps<\n\ttypeof ComboboxPrimitive.InputGroup\n>;\n\nfunction ComboboxInputGroup({\n\tclassName,\n\tref,\n\t...props\n}: ComboboxInputGroupProps) {\n\treturn (\n\t\t<ComboboxPrimitive.InputGroup\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-9 w-full items-center rounded-md border border-border-input bg-transparent text-sm shadow-sm ring-offset-background focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxInput\n */\n\nexport type ComboboxInputProps = ComponentProps<typeof ComboboxPrimitive.Input>;\n\nfunction ComboboxInput({ className, ref, ...props }: ComboboxInputProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"h-full w-full flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-text-placeholder disabled:cursor-not-allowed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxTrigger\n */\n\nexport type ComboboxTriggerProps = ComponentProps<\n\ttypeof ComboboxPrimitive.Trigger\n>;\n\nfunction ComboboxTrigger({ className, ref, ...props }: ComboboxTriggerProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Trigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex shrink-0 cursor-pointer items-center justify-center px-2 opacity-50 hover:opacity-100 disabled:cursor-not-allowed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Icon size=\"small\">\n\t\t\t\t<ChevronDownIcon />\n\t\t\t</Icon>\n\t\t</ComboboxPrimitive.Trigger>\n\t);\n}\n\n/**\n * ComboboxClear\n */\n\nexport type ComboboxClearProps = ComponentProps<typeof ComboboxPrimitive.Clear>;\n\nfunction ComboboxClear({ className, ref, ...props }: ComboboxClearProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Clear\n\t\t\tref={ref}\n\t\t\taria-label=\"Clear selection\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex shrink-0 cursor-pointer items-center justify-center px-1 opacity-50 hover:opacity-100 disabled:cursor-not-allowed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Icon size=\"small\">\n\t\t\t\t<Cross2Icon />\n\t\t\t</Icon>\n\t\t</ComboboxPrimitive.Clear>\n\t);\n}\n\n/**\n * ComboboxContent\n */\n\nexport type ComboboxContentProps = ComponentProps<\n\ttypeof ComboboxPrimitive.Popup\n> & {\n\tsideOffset?: number;\n};\n\nfunction ComboboxContent({\n\tclassName,\n\tchildren,\n\tsideOffset = 4,\n\tref,\n\t...props\n}: ComboboxContentProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Portal>\n\t\t\t<ComboboxPrimitive.Positioner sideOffset={sideOffset}>\n\t\t\t\t<ComboboxPrimitive.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:fade-out data-closed:zoom-out-95 data-open:fade-in data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md border border-border-input bg-surface text-text-secondary shadow-md transition-all data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-closed:animate-out data-open:animate-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</ComboboxPrimitive.Popup>\n\t\t\t</ComboboxPrimitive.Positioner>\n\t\t</ComboboxPrimitive.Portal>\n\t);\n}\n\n/**\n * ComboboxList\n */\n\nexport type ComboboxListProps = ComponentProps<typeof ComboboxPrimitive.List>;\n\nfunction ComboboxList({ className, ref, ...props }: ComboboxListProps) {\n\treturn (\n\t\t<ComboboxPrimitive.List\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"w-full p-1 empty:hidden\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxEmpty\n */\n\nexport type ComboboxEmptyProps = ComponentProps<typeof ComboboxPrimitive.Empty>;\n\nfunction ComboboxEmpty({ className, ref, ...props }: ComboboxEmptyProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Empty\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"px-2 py-4 text-center text-sm text-text-muted empty:hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxItem\n */\n\nexport type ComboboxItemProps = ComponentProps<typeof ComboboxPrimitive.Item>;\n\nfunction ComboboxItem({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: ComboboxItemProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<ComboboxPrimitive.ItemIndicator>\n\t\t\t\t\t<Icon size=\"small\">\n\t\t\t\t\t\t<CheckIcon />\n\t\t\t\t\t</Icon>\n\t\t\t\t</ComboboxPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</ComboboxPrimitive.Item>\n\t);\n}\n\n/**\n * ComboboxGroup\n */\n\nconst ComboboxGroup = ComboboxPrimitive.Group;\n\n/**\n * ComboboxGroupLabel\n */\n\nexport type ComboboxGroupLabelProps = ComponentProps<\n\ttypeof ComboboxPrimitive.GroupLabel\n>;\n\nfunction ComboboxGroupLabel({\n\tclassName,\n\tref,\n\t...props\n}: ComboboxGroupLabelProps) {\n\treturn (\n\t\t<ComboboxPrimitive.GroupLabel\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"px-2 py-1.5 font-semibold text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxSeparator\n */\n\nexport type ComboboxSeparatorProps = ComponentProps<\n\ttypeof ComboboxPrimitive.Separator\n>;\n\nfunction ComboboxSeparator({\n\tclassName,\n\tref,\n\t...props\n}: ComboboxSeparatorProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Separator\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"my-2 h-px bg-separator\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tCombobox,\n\tComboboxClear,\n\tComboboxContent,\n\tComboboxEmpty,\n\tComboboxGroup,\n\tComboboxGroupLabel,\n\tComboboxInput,\n\tComboboxInputGroup,\n\tComboboxItem,\n\tComboboxList,\n\tComboboxSeparator,\n\tComboboxTrigger,\n};\n"]}

package/dist/components/dialog/dialog.js

@@ -7,10 +7,10 @@ const DialogTrigger = BaseDialog.Trigger;
 const DialogClose = BaseDialog.Close;
 const DialogPortal = BaseDialog.Portal;
 function DialogOverlay({ className, ref, ...props }) {
-    return (_jsx(BaseDialog.Backdrop, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props }));
+    return (_jsx(BaseDialog.Backdrop, { ref: ref, className: cn("fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props }));
 }
 function DialogContent({ children, className, ref, ...props }) {
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(BaseDialog.Popup, { className: cn("fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-white p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props, ref: ref, children: [_jsx(DialogClose, { className: "absolute top-4 right-4", children: _jsx(Cross1Icon, { className: "h-4 w-4" }) }), children] })] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(BaseDialog.Popup, { className: cn("fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-surface p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props, ref: ref, children: [_jsx(DialogClose, { className: "absolute top-4 right-4", children: _jsx(Cross1Icon, { className: "h-4 w-4" }) }), children] })] }));
 }
 function DialogHeader({ className, ref, ...props }) {
     return (_jsx("div", { ref: ref, className: cn("flex flex-col gap-1", className), ...props }));
@@ -19,7 +19,7 @@ function DialogTitle({ className, ref, ...props }) {
     return (_jsx(BaseDialog.Title, { ref: ref, className: cn("font-semibold text-lg", className), ...props }));
 }
 function DialogDescription({ className, ref, ...props }) {
-    return (_jsx(BaseDialog.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props }));
+    return (_jsx(BaseDialog.Description, { ref: ref, className: cn("text-sm text-text-muted", className), ...props }));
 }
 function DialogFooter({ className, ref, ...props }) {
     return (_jsx("div", { ref: ref, className: cn("flex justify-end gap-2", className), ...props }));

package/dist/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"/","sources":["components/dialog/dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAGtC,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC;AAE/B,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC;AAErC,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC;AAIvC,SAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAsB;IACtE,OAAO,CACN,KAAC,UAAU,CAAC,QAAQ,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,0HAA0H,EAC1H,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,aAAa,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACY;IACpB,OAAO,CACN,MAAC,YAAY,eACZ,KAAC,aAAa,KAAG,EACjB,MAAC,UAAU,CAAC,KAAK,IAChB,SAAS,EAAE,EAAE,CACZ,wQAAwQ,EACxQ,SAAS,CACT,KACG,KAAK,EACT,GAAG,EAAE,GAAG,aAER,KAAC,WAAW,IAAC,SAAS,EAAC,wBAAwB,YAC9C,KAAC,UAAU,IAAC,SAAS,EAAC,SAAS,GAAG,GACrB,EACb,QAAQ,IACS,IACL,CACf,CAAC;AACH,CAAC;AAID,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAqB;IACpE,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAoB;IAClE,OAAO,CACN,KAAC,UAAU,CAAC,KAAK,IAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,iBAAiB,CAAC,EAC1B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACgB;IACxB,OAAO,CACN,KAAC,UAAU,CAAC,WAAW,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAqB;IACpE,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAC9C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,OAAO,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACb,CAAC","sourcesContent":["import { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst Dialog = BaseDialog.Root;\n\nconst DialogTrigger = BaseDialog.Trigger;\n\nconst DialogClose = BaseDialog.Close;\n\nconst DialogPortal = BaseDialog.Portal;\n\nexport type DialogOverlayProps = ComponentProps<typeof BaseDialog.Backdrop>;\n\nfunction DialogOverlay({ className, ref, ...props }: DialogOverlayProps) {\n\treturn (\n\t\t<BaseDialog.Backdrop\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogContentProps = ComponentProps<typeof BaseDialog.Popup>;\n\nfunction DialogContent({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: DialogContentProps) {\n\treturn (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<BaseDialog.Popup\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-white p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<DialogClose className=\"absolute top-4 right-4\">\n\t\t\t\t\t<Cross1Icon className=\"h-4 w-4\" />\n\t\t\t\t</DialogClose>\n\t\t\t\t{children}\n\t\t\t</BaseDialog.Popup>\n\t\t</DialogPortal>\n\t);\n}\n\nexport type DialogHeaderProps = ComponentProps<\"div\">;\n\nfunction DialogHeader({ className, ref, ...props }: DialogHeaderProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogTitleProps = ComponentProps<typeof BaseDialog.Title>;\n\nfunction DialogTitle({ className, ref, ...props }: DialogTitleProps) {\n\treturn (\n\t\t<BaseDialog.Title\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"font-semibold text-lg\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogDescriptionProps = ComponentProps<\n\ttypeof BaseDialog.Description\n>;\n\nfunction DialogDescription({\n\tclassName,\n\tref,\n\t...props\n}: DialogDescriptionProps) {\n\treturn (\n\t\t<BaseDialog.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-gray-500 text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogFooterProps = ComponentProps<\"div\">;\n\nfunction DialogFooter({ className, ref, ...props }: DialogFooterProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex justify-end gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDialog,\n\tDialogClose,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogTitle,\n\tDialogTrigger,\n};\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"/","sources":["components/dialog/dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAGtC,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC;AAE/B,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC;AAErC,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC;AAIvC,SAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAsB;IACtE,OAAO,CACN,KAAC,UAAU,CAAC,QAAQ,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,yHAAyH,EACzH,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,aAAa,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACY;IACpB,OAAO,CACN,MAAC,YAAY,eACZ,KAAC,aAAa,KAAG,EACjB,MAAC,UAAU,CAAC,KAAK,IAChB,SAAS,EAAE,EAAE,CACZ,0QAA0Q,EAC1Q,SAAS,CACT,KACG,KAAK,EACT,GAAG,EAAE,GAAG,aAER,KAAC,WAAW,IAAC,SAAS,EAAC,wBAAwB,YAC9C,KAAC,UAAU,IAAC,SAAS,EAAC,SAAS,GAAG,GACrB,EACb,QAAQ,IACS,IACL,CACf,CAAC;AACH,CAAC;AAID,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAqB;IACpE,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAoB;IAClE,OAAO,CACN,KAAC,UAAU,CAAC,KAAK,IAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,iBAAiB,CAAC,EAC1B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACgB;IACxB,OAAO,CACN,KAAC,UAAU,CAAC,WAAW,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,KAC/C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAqB;IACpE,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAC9C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,OAAO,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACb,CAAC","sourcesContent":["import { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst Dialog = BaseDialog.Root;\n\nconst DialogTrigger = BaseDialog.Trigger;\n\nconst DialogClose = BaseDialog.Close;\n\nconst DialogPortal = BaseDialog.Portal;\n\nexport type DialogOverlayProps = ComponentProps<typeof BaseDialog.Backdrop>;\n\nfunction DialogOverlay({ className, ref, ...props }: DialogOverlayProps) {\n\treturn (\n\t\t<BaseDialog.Backdrop\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogContentProps = ComponentProps<typeof BaseDialog.Popup>;\n\nfunction DialogContent({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: DialogContentProps) {\n\treturn (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<BaseDialog.Popup\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-surface p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<DialogClose className=\"absolute top-4 right-4\">\n\t\t\t\t\t<Cross1Icon className=\"h-4 w-4\" />\n\t\t\t\t</DialogClose>\n\t\t\t\t{children}\n\t\t\t</BaseDialog.Popup>\n\t\t</DialogPortal>\n\t);\n}\n\nexport type DialogHeaderProps = ComponentProps<\"div\">;\n\nfunction DialogHeader({ className, ref, ...props }: DialogHeaderProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogTitleProps = ComponentProps<typeof BaseDialog.Title>;\n\nfunction DialogTitle({ className, ref, ...props }: DialogTitleProps) {\n\treturn (\n\t\t<BaseDialog.Title\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"font-semibold text-lg\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogDescriptionProps = ComponentProps<\n\ttypeof BaseDialog.Description\n>;\n\nfunction DialogDescription({\n\tclassName,\n\tref,\n\t...props\n}: DialogDescriptionProps) {\n\treturn (\n\t\t<BaseDialog.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-sm text-text-muted\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogFooterProps = ComponentProps<\"div\">;\n\nfunction DialogFooter({ className, ref, ...props }: DialogFooterProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex justify-end gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDialog,\n\tDialogClose,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogTitle,\n\tDialogTrigger,\n};\n"]}

package/dist/components/drawer/drawer.js

@@ -15,10 +15,10 @@ function Drawer({ children, side = "right", ...props }) {
 const DrawerTrigger = BaseDrawer.Trigger;
 const DrawerClose = BaseDrawer.Close;
 function DrawerOverlay({ className, ref, ...props }) {
-    return (_jsx(BaseDrawer.Backdrop, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props }));
+    return (_jsx(BaseDrawer.Backdrop, { ref: ref, className: cn("fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props }));
 }
 function DrawerContent({ children, className, ref, ...props }) {
-    return (_jsxs(BaseDrawer.Portal, { children: [_jsx(DrawerOverlay, {}), _jsx(BaseDrawer.Viewport, { children: _jsxs(BaseDrawer.Popup, { className: cn("fixed z-50 flex flex-col gap-4 bg-white p-4 transition-transform duration-300 data-swiping:duration-0", "data-[swipe-direction=right]:data-ending-style:translate-x-full data-[swipe-direction=right]:data-starting-style:translate-x-full data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-screen data-[swipe-direction=right]:w-fit data-[swipe-direction=right]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=right]:rounded-l-lg", "data-[swipe-direction=left]:data-ending-style:-translate-x-full data-[swipe-direction=left]:data-starting-style:-translate-x-full data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-screen data-[swipe-direction=left]:w-fit data-[swipe-direction=left]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=left]:rounded-r-lg", "data-[swipe-direction=up]:data-ending-style:-translate-y-full data-[swipe-direction=up]:data-starting-style:-translate-y-full data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:right-0 data-[swipe-direction=up]:left-0 data-[swipe-direction=up]:h-fit data-[swipe-direction=up]:w-screen data-[swipe-direction=up]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=up]:rounded-b-lg", "data-[swipe-direction=down]:data-ending-style:translate-y-full data-[swipe-direction=down]:data-starting-style:translate-y-full data-[swipe-direction=down]:right-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:left-0 data-[swipe-direction=down]:h-fit data-[swipe-direction=down]:w-screen data-[swipe-direction=down]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=down]:rounded-t-lg", className), ref: ref, ...props, children: [_jsx(DrawerClose, { className: "absolute top-4 right-4", children: _jsx(Cross1Icon, { className: "h-4 w-4" }) }), children] }) })] }));
+    return (_jsxs(BaseDrawer.Portal, { children: [_jsx(DrawerOverlay, {}), _jsx(BaseDrawer.Viewport, { children: _jsxs(BaseDrawer.Popup, { className: cn("fixed z-50 flex flex-col gap-4 bg-surface p-4 transition-transform duration-300 data-swiping:duration-0", "data-[swipe-direction=right]:data-ending-style:translate-x-full data-[swipe-direction=right]:data-starting-style:translate-x-full data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-screen data-[swipe-direction=right]:w-fit data-[swipe-direction=right]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=right]:rounded-l-lg", "data-[swipe-direction=left]:data-ending-style:-translate-x-full data-[swipe-direction=left]:data-starting-style:-translate-x-full data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-screen data-[swipe-direction=left]:w-fit data-[swipe-direction=left]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=left]:rounded-r-lg", "data-[swipe-direction=up]:data-ending-style:-translate-y-full data-[swipe-direction=up]:data-starting-style:-translate-y-full data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:right-0 data-[swipe-direction=up]:left-0 data-[swipe-direction=up]:h-fit data-[swipe-direction=up]:w-screen data-[swipe-direction=up]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=up]:rounded-b-lg", "data-[swipe-direction=down]:data-ending-style:translate-y-full data-[swipe-direction=down]:data-starting-style:translate-y-full data-[swipe-direction=down]:right-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:left-0 data-[swipe-direction=down]:h-fit data-[swipe-direction=down]:w-screen data-[swipe-direction=down]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=down]:rounded-t-lg", className), ref: ref, ...props, children: [_jsx(DrawerClose, { className: "absolute top-4 right-4", children: _jsx(Cross1Icon, { className: "h-4 w-4" }) }), children] }) })] }));
 }
 function DrawerHeader({ className, ref, ...props }) {
     return (_jsx("div", { ref: ref, className: cn("flex flex-col gap-1", className), ...props }));
@@ -27,7 +27,7 @@ function DrawerTitle({ className, ref, ...props }) {
     return (_jsx(BaseDrawer.Title, { ref: ref, className: cn("font-semibold text-lg", className), ...props }));
 }
 function DrawerDescription({ className, ref, ...props }) {
-    return (_jsx(BaseDrawer.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props }));
+    return (_jsx(BaseDrawer.Description, { ref: ref, className: cn("text-sm text-text-muted", className), ...props }));
 }
 function DrawerFooter({ className, ref, ...props }) {
     return (_jsx("div", { ref: ref, className: cn("flex justify-end gap-2", className), ...props }));

package/dist/components/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"/","sources":["components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Drawer as BaseDrawer } from \"@base-ui/react/drawer\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst SIDE_TO_SWIPE_DIRECTION = {\n\tleft: \"left\",\n\tright: \"right\",\n\ttop: \"up\",\n\tbottom: \"down\",\n} as const;\n\ntype DrawerSide = keyof typeof SIDE_TO_SWIPE_DIRECTION;\n\nexport type DrawerProps = ComponentProps<typeof BaseDrawer.Root> & {\n\tside?: DrawerSide;\n};\n\nfunction Drawer({ children, side = \"right\", ...props }: DrawerProps) {\n\tconst swipeDirection = SIDE_TO_SWIPE_DIRECTION[side];\n\treturn (\n\t\t<BaseDrawer.Root swipeDirection={swipeDirection} {...props}>\n\t\t\t{children}\n\t\t</BaseDrawer.Root>\n\t);\n}\n\nconst DrawerTrigger = BaseDrawer.Trigger;\n\nconst DrawerClose = BaseDrawer.Close;\n\nexport type DrawerOverlayProps = ComponentProps<typeof BaseDrawer.Backdrop>;\n\nfunction DrawerOverlay({ className, ref, ...props }: DrawerOverlayProps) {\n\treturn (\n\t\t<BaseDrawer.Backdrop\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerContentProps = Omit<\n\tComponentProps<typeof BaseDrawer.Popup>,\n\t\"className\"\n> & {\n\tclassName?: string;\n};\n\nfunction DrawerContent({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: DrawerContentProps) {\n\treturn (\n\t\t<BaseDrawer.Portal>\n\t\t\t<DrawerOverlay />\n\t\t\t<BaseDrawer.Viewport>\n\t\t\t\t<BaseDrawer.Popup\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"fixed z-50 flex flex-col gap-4 bg-white p-4 transition-transform duration-300 data-swiping:duration-0\",\n\t\t\t\t\t\t\"data-[swipe-direction=right]:data-ending-style:translate-x-full data-[swipe-direction=right]:data-starting-style:translate-x-full data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-screen data-[swipe-direction=right]:w-fit data-[swipe-direction=right]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=right]:rounded-l-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=left]:data-ending-style:-translate-x-full data-[swipe-direction=left]:data-starting-style:-translate-x-full data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-screen data-[swipe-direction=left]:w-fit data-[swipe-direction=left]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=left]:rounded-r-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=up]:data-ending-style:-translate-y-full data-[swipe-direction=up]:data-starting-style:-translate-y-full data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:right-0 data-[swipe-direction=up]:left-0 data-[swipe-direction=up]:h-fit data-[swipe-direction=up]:w-screen data-[swipe-direction=up]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=up]:rounded-b-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=down]:data-ending-style:translate-y-full data-[swipe-direction=down]:data-starting-style:translate-y-full data-[swipe-direction=down]:right-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:left-0 data-[swipe-direction=down]:h-fit data-[swipe-direction=down]:w-screen data-[swipe-direction=down]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=down]:rounded-t-lg\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<DrawerClose className=\"absolute top-4 right-4\">\n\t\t\t\t\t\t<Cross1Icon className=\"h-4 w-4\" />\n\t\t\t\t\t</DrawerClose>\n\t\t\t\t\t{children}\n\t\t\t\t</BaseDrawer.Popup>\n\t\t\t</BaseDrawer.Viewport>\n\t\t</BaseDrawer.Portal>\n\t);\n}\n\nexport type DrawerHeaderProps = ComponentProps<\"div\">;\n\nfunction DrawerHeader({ className, ref, ...props }: DrawerHeaderProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerTitleProps = ComponentProps<typeof BaseDrawer.Title>;\n\nfunction DrawerTitle({ className, ref, ...props }: DrawerTitleProps) {\n\treturn (\n\t\t<BaseDrawer.Title\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"font-semibold text-lg\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerDescriptionProps = ComponentProps<\n\ttypeof BaseDrawer.Description\n>;\n\nfunction DrawerDescription({\n\tclassName,\n\tref,\n\t...props\n}: DrawerDescriptionProps) {\n\treturn (\n\t\t<BaseDrawer.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-gray-500 text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerFooterProps = ComponentProps<\"div\">;\n\nfunction DrawerFooter({ className, ref, ...props }: DrawerFooterProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex justify-end gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDrawer,\n\tDrawerClose,\n\tDrawerContent,\n\tDrawerDescription,\n\tDrawerFooter,\n\tDrawerHeader,\n\tDrawerTitle,\n\tDrawerTrigger,\n};\n"]}
+{"version":3,"file":"drawer.js","sourceRoot":"/","sources":["components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Drawer as BaseDrawer } from \"@base-ui/react/drawer\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst SIDE_TO_SWIPE_DIRECTION = {\n\tleft: \"left\",\n\tright: \"right\",\n\ttop: \"up\",\n\tbottom: \"down\",\n} as const;\n\ntype DrawerSide = keyof typeof SIDE_TO_SWIPE_DIRECTION;\n\nexport type DrawerProps = ComponentProps<typeof BaseDrawer.Root> & {\n\tside?: DrawerSide;\n};\n\nfunction Drawer({ children, side = \"right\", ...props }: DrawerProps) {\n\tconst swipeDirection = SIDE_TO_SWIPE_DIRECTION[side];\n\treturn (\n\t\t<BaseDrawer.Root swipeDirection={swipeDirection} {...props}>\n\t\t\t{children}\n\t\t</BaseDrawer.Root>\n\t);\n}\n\nconst DrawerTrigger = BaseDrawer.Trigger;\n\nconst DrawerClose = BaseDrawer.Close;\n\nexport type DrawerOverlayProps = ComponentProps<typeof BaseDrawer.Backdrop>;\n\nfunction DrawerOverlay({ className, ref, ...props }: DrawerOverlayProps) {\n\treturn (\n\t\t<BaseDrawer.Backdrop\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerContentProps = Omit<\n\tComponentProps<typeof BaseDrawer.Popup>,\n\t\"className\"\n> & {\n\tclassName?: string;\n};\n\nfunction DrawerContent({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: DrawerContentProps) {\n\treturn (\n\t\t<BaseDrawer.Portal>\n\t\t\t<DrawerOverlay />\n\t\t\t<BaseDrawer.Viewport>\n\t\t\t\t<BaseDrawer.Popup\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"fixed z-50 flex flex-col gap-4 bg-surface p-4 transition-transform duration-300 data-swiping:duration-0\",\n\t\t\t\t\t\t\"data-[swipe-direction=right]:data-ending-style:translate-x-full data-[swipe-direction=right]:data-starting-style:translate-x-full data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-screen data-[swipe-direction=right]:w-fit data-[swipe-direction=right]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=right]:rounded-l-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=left]:data-ending-style:-translate-x-full data-[swipe-direction=left]:data-starting-style:-translate-x-full data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-screen data-[swipe-direction=left]:w-fit data-[swipe-direction=left]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=left]:rounded-r-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=up]:data-ending-style:-translate-y-full data-[swipe-direction=up]:data-starting-style:-translate-y-full data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:right-0 data-[swipe-direction=up]:left-0 data-[swipe-direction=up]:h-fit data-[swipe-direction=up]:w-screen data-[swipe-direction=up]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=up]:rounded-b-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=down]:data-ending-style:translate-y-full data-[swipe-direction=down]:data-starting-style:translate-y-full data-[swipe-direction=down]:right-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:left-0 data-[swipe-direction=down]:h-fit data-[swipe-direction=down]:w-screen data-[swipe-direction=down]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=down]:rounded-t-lg\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<DrawerClose className=\"absolute top-4 right-4\">\n\t\t\t\t\t\t<Cross1Icon className=\"h-4 w-4\" />\n\t\t\t\t\t</DrawerClose>\n\t\t\t\t\t{children}\n\t\t\t\t</BaseDrawer.Popup>\n\t\t\t</BaseDrawer.Viewport>\n\t\t</BaseDrawer.Portal>\n\t);\n}\n\nexport type DrawerHeaderProps = ComponentProps<\"div\">;\n\nfunction DrawerHeader({ className, ref, ...props }: DrawerHeaderProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerTitleProps = ComponentProps<typeof BaseDrawer.Title>;\n\nfunction DrawerTitle({ className, ref, ...props }: DrawerTitleProps) {\n\treturn (\n\t\t<BaseDrawer.Title\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"font-semibold text-lg\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerDescriptionProps = ComponentProps<\n\ttypeof BaseDrawer.Description\n>;\n\nfunction DrawerDescription({\n\tclassName,\n\tref,\n\t...props\n}: DrawerDescriptionProps) {\n\treturn (\n\t\t<BaseDrawer.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-sm text-text-muted\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerFooterProps = ComponentProps<\"div\">;\n\nfunction DrawerFooter({ className, ref, ...props }: DrawerFooterProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex justify-end gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDrawer,\n\tDrawerClose,\n\tDrawerContent,\n\tDrawerDescription,\n\tDrawerFooter,\n\tDrawerHeader,\n\tDrawerTitle,\n\tDrawerTrigger,\n};\n"]}

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -11,28 +11,28 @@ const DropdownMenuPortal = Menu.Portal;
 const DropdownMenuSub = Menu.SubmenuRoot;
 const DropdownMenuRadioGroup = Menu.RadioGroup;
 function DropdownMenuSubTrigger({ className, inset, children, ref, ...props }) {
-    return (_jsxs(Menu.SubmenuTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-highlighted:bg-gray-200 data-popup-open:bg-gray-200 data-highlighted:text-gray-700 data-popup-open:text-gray-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+    return (_jsxs(Menu.SubmenuTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-highlighted:bg-highlight data-popup-open:bg-highlight data-highlighted:text-on-highlight data-popup-open:text-on-highlight [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
 }
 function DropdownMenuSubContent({ className, ref, ...props }) {
-    return (_jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { children: _jsx(Menu.Popup, { ref: ref, className: cn("data-[starting-style]:zoom-out-95 data-[ending-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-[--transform-origin] overflow-hidden rounded-md border border-gray-200 bg-gray-50 p-1 text-gray-700 shadow-lg data-ending-style:animate-fade-out data-starting-style:animate-fade-in", className), ...props }) }) }));
+    return (_jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { children: _jsx(Menu.Popup, { ref: ref, className: cn("data-[starting-style]:zoom-out-95 data-[ending-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-[--transform-origin] overflow-hidden rounded-md border border-border bg-surface-subtle p-1 text-text-secondary shadow-lg data-ending-style:animate-fade-out data-starting-style:animate-fade-in", className), ...props }) }) }));
 }
 function DropdownMenuContent({ className, sideOffset = 4, ref, ...props }) {
-    return (_jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { sideOffset: sideOffset, children: _jsx(Menu.Popup, { ref: ref, className: cn("z-50 max-h-(--available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-gray-200 bg-gray-50 p-1 text-gray-700 shadow-md", "data-[ending-style]:zoom-out-95 data-[starting-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--transform-origin] data-ending-style:animate-fade-out data-starting-style:animate-fade-in", className), ...props }) }) }));
+    return (_jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { sideOffset: sideOffset, children: _jsx(Menu.Popup, { ref: ref, className: cn("z-50 max-h-(--available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-border bg-surface-subtle p-1 text-text-secondary shadow-md", "data-[ending-style]:zoom-out-95 data-[starting-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--transform-origin] data-ending-style:animate-fade-out data-starting-style:animate-fade-in", className), ...props }) }) }));
 }
 function DropdownMenuItem({ className, inset, ref, ...props }) {
-    return (_jsx(Menu.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-700 data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className), ...props }));
+    return (_jsx(Menu.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className), ...props }));
 }
 function DropdownMenuCheckboxItem({ className, children, checked, onCheckedChange, ref, ...props }) {
-    return (_jsxs(Menu.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-700 data-disabled:opacity-50", className), checked: checked, onCheckedChange: onCheckedChange, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Menu.CheckboxItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), children] }));
+    return (_jsxs(Menu.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50", className), checked: checked, onCheckedChange: onCheckedChange, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Menu.CheckboxItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), children] }));
 }
 function DropdownMenuRadioItem({ className, children, ref, ...props }) {
-    return (_jsxs(Menu.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-900 data-disabled:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Menu.RadioItemIndicator, { children: _jsx(CircleIcon, { className: "h-2 w-2 fill-current" }) }) }), children] }));
+    return (_jsxs(Menu.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Menu.RadioItemIndicator, { children: _jsx(CircleIcon, { className: "h-2 w-2 fill-current" }) }) }), children] }));
 }
 function DropdownMenuLabel({ className, inset, ref, ...props }) {
     return (_jsx(Menu.Group, { children: _jsx(Menu.GroupLabel, { ref: ref, className: cn("px-2 py-1.5 font-semibold text-sm", inset && "pl-8", className), ...props }) }));
 }
 function DropdownMenuSeparator({ className, ref, ...props }) {
-    return (_jsx(Menu.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-gray-200", className), ...props }));
+    return (_jsx(Menu.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-separator", className), ...props }));
 }
 function DropdownMenuShortcut({ className, ...props }) {
     return (_jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props }));

package/dist/components/dropdown-menu/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sourceRoot":"/","sources":["components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Menu } from \"@base-ui/react/menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst DropdownMenu = Menu.Root;\n\nexport type DropdownMenuTriggerProps = ComponentProps<typeof Menu.Trigger>;\n\nfunction DropdownMenuTrigger({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuTriggerProps) {\n\treturn <Menu.Trigger ref={ref} className={className} {...props} />;\n}\n\nconst DropdownMenuGroup = Menu.Group;\n\nconst DropdownMenuPortal = Menu.Portal;\n\nconst DropdownMenuSub = Menu.SubmenuRoot;\n\nconst DropdownMenuRadioGroup = Menu.RadioGroup;\n\nexport type DropdownMenuSubTriggerProps = ComponentProps<\n\ttypeof Menu.SubmenuTrigger\n> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuSubTrigger({\n\tclassName,\n\tinset,\n\tchildren,\n\tref,\n\t...props\n}: DropdownMenuSubTriggerProps) {\n\treturn (\n\t\t<Menu.SubmenuTrigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-highlighted:bg-gray-200 data-popup-open:bg-gray-200 data-highlighted:text-gray-700 data-popup-open:text-gray-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ChevronRightIcon className=\"ml-auto\" />\n\t\t</Menu.SubmenuTrigger>\n\t);\n}\n\nexport type DropdownMenuSubContentProps = ComponentProps<typeof Menu.Popup>;\n\nfunction DropdownMenuSubContent({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuSubContentProps) {\n\treturn (\n\t\t<Menu.Portal>\n\t\t\t<Menu.Positioner>\n\t\t\t\t<Menu.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"data-[starting-style]:zoom-out-95 data-[ending-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-[--transform-origin] overflow-hidden rounded-md border border-gray-200 bg-gray-50 p-1 text-gray-700 shadow-lg data-ending-style:animate-fade-out data-starting-style:animate-fade-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</Menu.Positioner>\n\t\t</Menu.Portal>\n\t);\n}\n\nexport type DropdownMenuContentProps = ComponentProps<typeof Menu.Popup> & {\n\tsideOffset?: number;\n};\n\nfunction DropdownMenuContent({\n\tclassName,\n\tsideOffset = 4,\n\tref,\n\t...props\n}: DropdownMenuContentProps) {\n\treturn (\n\t\t<Menu.Portal>\n\t\t\t<Menu.Positioner sideOffset={sideOffset}>\n\t\t\t\t<Menu.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"z-50 max-h-(--available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-gray-200 bg-gray-50 p-1 text-gray-700 shadow-md\",\n\t\t\t\t\t\t\"data-[ending-style]:zoom-out-95 data-[starting-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--transform-origin] data-ending-style:animate-fade-out data-starting-style:animate-fade-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</Menu.Positioner>\n\t\t</Menu.Portal>\n\t);\n}\n\nexport type DropdownMenuItemProps = ComponentProps<typeof Menu.Item> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuItem({\n\tclassName,\n\tinset,\n\tref,\n\t...props\n}: DropdownMenuItemProps) {\n\treturn (\n\t\t<Menu.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-700 data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DropdownMenuCheckboxItemProps = ComponentProps<\n\ttypeof Menu.CheckboxItem\n>;\n\nfunction DropdownMenuCheckboxItem({\n\tclassName,\n\tchildren,\n\tchecked,\n\tonCheckedChange,\n\tref,\n\t...props\n}: DropdownMenuCheckboxItemProps) {\n\treturn (\n\t\t<Menu.CheckboxItem\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-700 data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tchecked={checked}\n\t\t\tonCheckedChange={onCheckedChange}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Menu.CheckboxItemIndicator>\n\t\t\t\t\t<CheckIcon className=\"h-4 w-4\" />\n\t\t\t\t</Menu.CheckboxItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</Menu.CheckboxItem>\n\t);\n}\n\nexport type DropdownMenuRadioItemProps = ComponentProps<typeof Menu.RadioItem>;\n\nfunction DropdownMenuRadioItem({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: DropdownMenuRadioItemProps) {\n\treturn (\n\t\t<Menu.RadioItem\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-900 data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Menu.RadioItemIndicator>\n\t\t\t\t\t<CircleIcon className=\"h-2 w-2 fill-current\" />\n\t\t\t\t</Menu.RadioItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</Menu.RadioItem>\n\t);\n}\n\nexport type DropdownMenuLabelProps = ComponentProps<typeof Menu.GroupLabel> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuLabel({\n\tclassName,\n\tinset,\n\tref,\n\t...props\n}: DropdownMenuLabelProps) {\n\treturn (\n\t\t<Menu.Group>\n\t\t\t<Menu.GroupLabel\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"px-2 py-1.5 font-semibold text-sm\",\n\t\t\t\t\tinset && \"pl-8\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</Menu.Group>\n\t);\n}\n\nexport type DropdownMenuSeparatorProps = ComponentProps<typeof Menu.Separator>;\n\nfunction DropdownMenuSeparator({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuSeparatorProps) {\n\treturn (\n\t\t<Menu.Separator\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"-mx-1 my-1 h-px bg-gray-200\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuShortcut({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuPortal,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuTrigger,\n};\n"]}
+{"version":3,"file":"dropdown-menu.js","sourceRoot":"/","sources":["components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Menu } from \"@base-ui/react/menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst DropdownMenu = Menu.Root;\n\nexport type DropdownMenuTriggerProps = ComponentProps<typeof Menu.Trigger>;\n\nfunction DropdownMenuTrigger({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuTriggerProps) {\n\treturn <Menu.Trigger ref={ref} className={className} {...props} />;\n}\n\nconst DropdownMenuGroup = Menu.Group;\n\nconst DropdownMenuPortal = Menu.Portal;\n\nconst DropdownMenuSub = Menu.SubmenuRoot;\n\nconst DropdownMenuRadioGroup = Menu.RadioGroup;\n\nexport type DropdownMenuSubTriggerProps = ComponentProps<\n\ttypeof Menu.SubmenuTrigger\n> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuSubTrigger({\n\tclassName,\n\tinset,\n\tchildren,\n\tref,\n\t...props\n}: DropdownMenuSubTriggerProps) {\n\treturn (\n\t\t<Menu.SubmenuTrigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-highlighted:bg-highlight data-popup-open:bg-highlight data-highlighted:text-on-highlight data-popup-open:text-on-highlight [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ChevronRightIcon className=\"ml-auto\" />\n\t\t</Menu.SubmenuTrigger>\n\t);\n}\n\nexport type DropdownMenuSubContentProps = ComponentProps<typeof Menu.Popup>;\n\nfunction DropdownMenuSubContent({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuSubContentProps) {\n\treturn (\n\t\t<Menu.Portal>\n\t\t\t<Menu.Positioner>\n\t\t\t\t<Menu.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"data-[starting-style]:zoom-out-95 data-[ending-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-[--transform-origin] overflow-hidden rounded-md border border-border bg-surface-subtle p-1 text-text-secondary shadow-lg data-ending-style:animate-fade-out data-starting-style:animate-fade-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</Menu.Positioner>\n\t\t</Menu.Portal>\n\t);\n}\n\nexport type DropdownMenuContentProps = ComponentProps<typeof Menu.Popup> & {\n\tsideOffset?: number;\n};\n\nfunction DropdownMenuContent({\n\tclassName,\n\tsideOffset = 4,\n\tref,\n\t...props\n}: DropdownMenuContentProps) {\n\treturn (\n\t\t<Menu.Portal>\n\t\t\t<Menu.Positioner sideOffset={sideOffset}>\n\t\t\t\t<Menu.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"z-50 max-h-(--available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-border bg-surface-subtle p-1 text-text-secondary shadow-md\",\n\t\t\t\t\t\t\"data-[ending-style]:zoom-out-95 data-[starting-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--transform-origin] data-ending-style:animate-fade-out data-starting-style:animate-fade-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</Menu.Positioner>\n\t\t</Menu.Portal>\n\t);\n}\n\nexport type DropdownMenuItemProps = ComponentProps<typeof Menu.Item> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuItem({\n\tclassName,\n\tinset,\n\tref,\n\t...props\n}: DropdownMenuItemProps) {\n\treturn (\n\t\t<Menu.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DropdownMenuCheckboxItemProps = ComponentProps<\n\ttypeof Menu.CheckboxItem\n>;\n\nfunction DropdownMenuCheckboxItem({\n\tclassName,\n\tchildren,\n\tchecked,\n\tonCheckedChange,\n\tref,\n\t...props\n}: DropdownMenuCheckboxItemProps) {\n\treturn (\n\t\t<Menu.CheckboxItem\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tchecked={checked}\n\t\t\tonCheckedChange={onCheckedChange}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Menu.CheckboxItemIndicator>\n\t\t\t\t\t<CheckIcon className=\"h-4 w-4\" />\n\t\t\t\t</Menu.CheckboxItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</Menu.CheckboxItem>\n\t);\n}\n\nexport type DropdownMenuRadioItemProps = ComponentProps<typeof Menu.RadioItem>;\n\nfunction DropdownMenuRadioItem({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: DropdownMenuRadioItemProps) {\n\treturn (\n\t\t<Menu.RadioItem\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Menu.RadioItemIndicator>\n\t\t\t\t\t<CircleIcon className=\"h-2 w-2 fill-current\" />\n\t\t\t\t</Menu.RadioItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</Menu.RadioItem>\n\t);\n}\n\nexport type DropdownMenuLabelProps = ComponentProps<typeof Menu.GroupLabel> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuLabel({\n\tclassName,\n\tinset,\n\tref,\n\t...props\n}: DropdownMenuLabelProps) {\n\treturn (\n\t\t<Menu.Group>\n\t\t\t<Menu.GroupLabel\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"px-2 py-1.5 font-semibold text-sm\",\n\t\t\t\t\tinset && \"pl-8\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</Menu.Group>\n\t);\n}\n\nexport type DropdownMenuSeparatorProps = ComponentProps<typeof Menu.Separator>;\n\nfunction DropdownMenuSeparator({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuSeparatorProps) {\n\treturn (\n\t\t<Menu.Separator\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"-mx-1 my-1 h-px bg-separator\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuShortcut({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuPortal,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuTrigger,\n};\n"]}

package/dist/components/form-helper/form-helper.js

@@ -2,20 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext } from "../form-field/form-field-context";
 import { getVariants } from "../../utilities/responsive/responsive";
 const formHelperStyles = getVariants({
-    base: "text-gray-500 text-sm",
+    base: "text-sm text-text-muted",
     variants: {
         error: {
-            true: "text-red-600",
+            true: "text-error",
         },
         disabled: {
-            true: "text-gray-300",
+            true: "text-text-disabled",
         },
     },
     compoundVariants: [
         {
             error: true,
             disabled: true,
-            className: "text-gray-300",
+            className: "text-text-disabled",
         },
     ],
 });

package/dist/components/form-helper/form-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-helper.js","sourceRoot":"/","sources":["components/form-helper/form-helper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAS/D,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACpC,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,cAAc;SACpB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,eAAe;SACrB;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,eAAe;SAC1B;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,GAAG,EACH,GAAG,KAAK,EACS;IACjB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC1C,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC3D,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,KAC5B,KAAK,YAER,QAAQ,GACJ,CACN,CAAC;AACH,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps, Ref } from \"react\";\n\nexport type FormHelperProps = ComponentProps<\"div\"> & {\n\terror?: boolean;\n\tdisabled?: boolean;\n\tref?: Ref<HTMLDivElement>;\n};\n\nconst formHelperStyles = getVariants({\n\tbase: \"text-gray-500 text-sm\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"text-red-600\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"text-gray-300\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName: \"text-gray-300\",\n\t\t},\n\t],\n});\n\n/**\n * A component that displays a helper text for a form field. Should be used as a child of a FormField component and will inherit the form field's error and disabled state.\n *\n * @example\n * ```tsx\n * <FormField>\n *  <Label>Email</Label>\n *  <Input />\n *  <FormHelper>This is a helper text</FormHelper>\n * </FormField>\n * ```\n */\nexport function FormHelper({\n\tclassName,\n\tchildren,\n\terror: initialError,\n\tdisabled: initialDisabled,\n\tref,\n\t...props\n}: FormHelperProps) {\n\tconst { error, disabled } = useFormContext({\n\t\terror: initialError,\n\t\tdisabled: initialDisabled,\n\t});\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={formHelperStyles({ error, disabled, className })}\n\t\t\trole={error ? \"alert\" : \"status\"}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"file":"form-helper.js","sourceRoot":"/","sources":["components/form-helper/form-helper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAS/D,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACpC,IAAI,EAAE,yBAAyB;IAC/B,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,YAAY;SAClB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,oBAAoB;SAC1B;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,oBAAoB;SAC/B;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,GAAG,EACH,GAAG,KAAK,EACS;IACjB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC1C,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC3D,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,KAC5B,KAAK,YAER,QAAQ,GACJ,CACN,CAAC;AACH,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps, Ref } from \"react\";\n\nexport type FormHelperProps = ComponentProps<\"div\"> & {\n\terror?: boolean;\n\tdisabled?: boolean;\n\tref?: Ref<HTMLDivElement>;\n};\n\nconst formHelperStyles = getVariants({\n\tbase: \"text-sm text-text-muted\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"text-error\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"text-text-disabled\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName: \"text-text-disabled\",\n\t\t},\n\t],\n});\n\n/**\n * A component that displays a helper text for a form field. Should be used as a child of a FormField component and will inherit the form field's error and disabled state.\n *\n * @example\n * ```tsx\n * <FormField>\n *  <Label>Email</Label>\n *  <Input />\n *  <FormHelper>This is a helper text</FormHelper>\n * </FormField>\n * ```\n */\nexport function FormHelper({\n\tclassName,\n\tchildren,\n\terror: initialError,\n\tdisabled: initialDisabled,\n\tref,\n\t...props\n}: FormHelperProps) {\n\tconst { error, disabled } = useFormContext({\n\t\terror: initialError,\n\t\tdisabled: initialDisabled,\n\t});\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={formHelperStyles({ error, disabled, className })}\n\t\t\trole={error ? \"alert\" : \"status\"}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/input/input.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext } from "../form-field/form-field-context";
 import { getVariants } from "../../utilities/responsive/responsive";
 const inputStyles = getVariants({
-    base: "rounded-sm border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus-visible:outline focus-visible:outline-gray-800",
+    base: "rounded-sm border border-border-input px-3 py-2 text-sm placeholder:text-text-placeholder focus-visible:outline focus-visible:outline-primary-hover",
     variants: {
         error: {
-            true: "border-red-600",
+            true: "border-error",
         },
         disabled: {
             true: "disabled:cursor-not-allowed disabled:opacity-50",
@@ -15,7 +15,7 @@ const inputStyles = getVariants({
         {
             error: true,
             disabled: true,
-            className: "border-gray-400 disabled:cursor-not-allowed disabled:opacity-50",
+            className: "border-border-input disabled:cursor-not-allowed disabled:opacity-50",
         },
     ],
 });

package/dist/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"/","sources":["components/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAQ/D,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,oIAAoI;IAC1I,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,gBAAgB;SACtB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,iDAAiD;SACvD;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EACR,iEAAiE;SAClE;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE,YAAY,EACnB,GAAG,EACH,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC;QACpD,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,YAAY;KACnB,CAAC,CAAC;IACH,OAAO,CACN,gBACC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,KAAK,KACf,KAAK,EACT,GAAG,EAAE,GAAG,GACP,CACF,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps, Ref } from \"react\";\n\nexport type InputProps = ComponentProps<\"input\"> & {\n\terror?: boolean;\n\tref?: Ref<HTMLInputElement>;\n};\n\nconst inputStyles = getVariants({\n\tbase: \"rounded-sm border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus-visible:outline focus-visible:outline-gray-800\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"border-red-600\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName:\n\t\t\t\t\"border-gray-400 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t],\n});\n\n/**\n * A basic input component with styling.\n *\n * @example\n * ```tsx\n * <Input placeholder=\"Enter your email\" id=\"email\" />\n * ```\n */\nfunction Input({\n\tclassName,\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\terror: initialError,\n\tref,\n\t...props\n}: InputProps) {\n\tconst { disabled, required, error } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t\terror: initialError,\n\t});\n\treturn (\n\t\t<input\n\t\t\tclassName={inputStyles({ disabled, error, className })}\n\t\t\tdisabled={disabled}\n\t\t\trequired={required}\n\t\t\taria-invalid={error}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t/>\n\t);\n}\n\nexport { Input };\n"]}
+{"version":3,"file":"input.js","sourceRoot":"/","sources":["components/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAQ/D,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,qJAAqJ;IAC3J,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,cAAc;SACpB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,iDAAiD;SACvD;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EACR,qEAAqE;SACtE;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE,YAAY,EACnB,GAAG,EACH,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC;QACpD,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,YAAY;KACnB,CAAC,CAAC;IACH,OAAO,CACN,gBACC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,KAAK,KACf,KAAK,EACT,GAAG,EAAE,GAAG,GACP,CACF,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps, Ref } from \"react\";\n\nexport type InputProps = ComponentProps<\"input\"> & {\n\terror?: boolean;\n\tref?: Ref<HTMLInputElement>;\n};\n\nconst inputStyles = getVariants({\n\tbase: \"rounded-sm border border-border-input px-3 py-2 text-sm placeholder:text-text-placeholder focus-visible:outline focus-visible:outline-primary-hover\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"border-error\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName:\n\t\t\t\t\"border-border-input disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t],\n});\n\n/**\n * A basic input component with styling.\n *\n * @example\n * ```tsx\n * <Input placeholder=\"Enter your email\" id=\"email\" />\n * ```\n */\nfunction Input({\n\tclassName,\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\terror: initialError,\n\tref,\n\t...props\n}: InputProps) {\n\tconst { disabled, required, error } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t\terror: initialError,\n\t});\n\treturn (\n\t\t<input\n\t\t\tclassName={inputStyles({ disabled, error, className })}\n\t\t\tdisabled={disabled}\n\t\t\trequired={required}\n\t\t\taria-invalid={error}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t/>\n\t);\n}\n\nexport { Input };\n"]}

package/dist/components/label/label.js

@@ -16,7 +16,7 @@ function Label({ className, required: initialRequired, children, ref, ...props }
     });
     return (
     // biome-ignore lint/a11y/noLabelWithoutControl: htmlFor is passed via props at runtime
-    _jsxs("label", { className: cn("font-medium text-gray-900 text-md peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props, ref: ref, children: [children, required && _jsx("span", { children: "*" })] }));
+    _jsxs("label", { className: cn("font-medium text-md text-text peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props, ref: ref, children: [children, required && _jsx("span", { children: "*" })] }));
 }
 export { Label };
 //# sourceMappingURL=label.js.map

package/dist/components/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"/","sources":["components/label/label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAOtC;;;;;;;;GAQG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QACnC,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO;IACN,uFAAuF;IACvF,iBACC,SAAS,EAAE,EAAE,CACZ,6FAA6F,EAC7F,SAAS,CACT,KACG,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,QAAQ,EACR,QAAQ,IAAI,+BAAc,IACpB,CACR,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nexport type LabelProps = ComponentProps<\"label\"> & {\n\trequired?: boolean;\n};\n\n/**\n * A label component that can be used to label form fields.\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"email\">Email</Label>\n * <Input id=\"email\" />\n * ```\n */\nfunction Label({\n\tclassName,\n\trequired: initialRequired,\n\tchildren,\n\tref,\n\t...props\n}: LabelProps) {\n\tconst { required } = useFormContext({\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: htmlFor is passed via props at runtime\n\t\t<label\n\t\t\tclassName={cn(\n\t\t\t\t\"font-medium text-gray-900 text-md peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{children}\n\t\t\t{required && <span>*</span>}\n\t\t</label>\n\t);\n}\n\nexport { Label };\n"]}
+{"version":3,"file":"label.js","sourceRoot":"/","sources":["components/label/label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAOtC;;;;;;;;GAQG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QACnC,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO;IACN,uFAAuF;IACvF,iBACC,SAAS,EAAE,EAAE,CACZ,yFAAyF,EACzF,SAAS,CACT,KACG,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,QAAQ,EACR,QAAQ,IAAI,+BAAc,IACpB,CACR,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nexport type LabelProps = ComponentProps<\"label\"> & {\n\trequired?: boolean;\n};\n\n/**\n * A label component that can be used to label form fields.\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"email\">Email</Label>\n * <Input id=\"email\" />\n * ```\n */\nfunction Label({\n\tclassName,\n\trequired: initialRequired,\n\tchildren,\n\tref,\n\t...props\n}: LabelProps) {\n\tconst { required } = useFormContext({\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: htmlFor is passed via props at runtime\n\t\t<label\n\t\t\tclassName={cn(\n\t\t\t\t\"font-medium text-md text-text peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{children}\n\t\t\t{required && <span>*</span>}\n\t\t</label>\n\t);\n}\n\nexport { Label };\n"]}

package/dist/components/pagination/pagination.js

@@ -111,8 +111,8 @@ function PaginationItem({ index, children, className, ref, ...props }) {
             setPage(index);
         }
     };
-    return (_jsx("button", { type: "button", onClick: handleClick, ref: mergeRefs(ref, (el) => registerRef(index ?? 0, el)), className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200", {
-            "bg-gray-700 text-white hover:bg-gray-800": isActive,
+    return (_jsx("button", { type: "button", onClick: handleClick, ref: mergeRefs(ref, (el) => registerRef(index ?? 0, el)), className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-border", {
+            "bg-primary text-on-primary hover:bg-primary-hover": isActive,
         }, className), "aria-current": isActive ? "page" : undefined, ...props, children: children ?? index }));
 }
 /**
@@ -126,7 +126,7 @@ function PaginationItem({ index, children, className, ref, ...props }) {
  */
 function PaginationPrev({ children, className, ref, ...props }) {
     const { registerRef, page, setPage, hasPreviousPage } = usePaginationContext();
-    return (_jsx("button", { type: "button", onClick: () => setPage(page - 1), ref: mergeRefs(ref, (el) => registerRef(0, el)), disabled: !hasPreviousPage, className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25", className), ...props, children: children }));
+    return (_jsx("button", { type: "button", onClick: () => setPage(page - 1), ref: mergeRefs(ref, (el) => registerRef(0, el)), disabled: !hasPreviousPage, className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-border disabled:opacity-25", className), ...props, children: children }));
 }
 /**
  * Next page button component for the Pagination.
@@ -139,7 +139,7 @@ function PaginationPrev({ children, className, ref, ...props }) {
  */
 function PaginationNext({ children, className, ref, ...props }) {
     const { page, setPage, hasNextPage, registerRef, totalPages } = usePaginationContext();
-    return (_jsx("button", { type: "button", className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25", className), onClick: () => setPage(page + 1), disabled: !hasNextPage, ref: mergeRefs(ref, (el) => registerRef(totalPages + 1, el)), ...props, children: children }));
+    return (_jsx("button", { type: "button", className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-border disabled:opacity-25", className), onClick: () => setPage(page + 1), disabled: !hasNextPage, ref: mergeRefs(ref, (el) => registerRef(totalPages + 1, el)), ...props, children: children }));
 }
 export { Pagination, PaginationItem, PaginationNext, PaginationPrev };
 //# sourceMappingURL=pagination.js.map

package/dist/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sourceRoot":"/","sources":["components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { mergeRefs } from \"@utilities/merge-refs/merge-refs\";\nimport { getTruncatedElements } from \"@utilities/pagination/get-truncated-elements\";\nimport { handleKeyboardNavigation } from \"@utilities/pagination/keyboard-navigation\";\nimport clsx from \"clsx\";\nimport {\n\tcreateContext,\n\ttype PropsWithChildren,\n\ttype Ref,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\n/**\n * Pagination Context\n */\n\ntype PaginationContextValue = {\n\tpage: number;\n\ttotalPages: number;\n\thasNextPage: boolean;\n\thasPreviousPage: boolean;\n\tsetPage: (page: number) => void;\n\tregisterRef: (index: number, element: HTMLButtonElement | null) => void;\n};\n\nconst PaginationContext = createContext<PaginationContextValue | undefined>(\n\tundefined,\n);\n\nconst usePaginationContext = () => {\n\tconst context = useContext(PaginationContext);\n\tif (!context) {\n\t\tthrow new Error(\"Pagination components must be used within a Pagination\");\n\t}\n\treturn context;\n};\n\n/**\n * Pagination\n */\n\nexport type PaginationProps = useRender.ComponentProps<\"nav\"> & {\n\tchildren?: React.ReactNode;\n\tpage: number;\n\ttotalPages: number;\n\tonPageChange: (page: number) => void;\n\tclassName?: string;\n};\n\n/**\n * Pagination component that provides navigation controls for a set of pages.\n *\n * @param {number} props.page - The current active page number\n * @param {number} props.totalPages - The total number of pages\n * @param {(page: number) => void} props.onPageChange - Callback function called when page changes\n * @param {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - Custom element to render instead of nav\n * @param {React.ReactNode} [props.children] - The content to render within the pagination component\n * @param {string} [props.className] - Additional CSS classes to apply\n *\n * @example\n * ```tsx\n * <Pagination page={1} totalPages={10} onPageChange={(page) => console.log(page)}>\n *   <PaginationPrev>Previous</PaginationPrev>\n *   <PaginationItem index={1}>1</PaginationItem>\n *   <PaginationItem index={2}>2</PaginationItem>\n *   <PaginationNext>Next</PaginationNext>\n * </Pagination>\n * ```\n *\n * @example\n * // With render prop to change the element\n * ```tsx\n * <Pagination render={<div />} page={1} totalPages={10} onPageChange={handleChange}>\n *   ...\n * </Pagination>\n * ```\n */\nfunction Pagination({\n\tchildren,\n\tpage: initialPage,\n\ttotalPages: initialTotalPages,\n\tonPageChange,\n\tclassName,\n\trender,\n\t...props\n}: PaginationProps) {\n\tconst [page, setPage] = useState(initialPage);\n\tconst [totalPages, setTotalPages] = useState(initialTotalPages);\n\tconst [hasNextPage, setHasNextPage] = useState(page < totalPages);\n\tconst [hasPreviousPage, setHasPreviousPage] = useState(page > 1);\n\n\tconst refs = useRef(new Map<number, HTMLButtonElement>());\n\n\tconst handleKeyDown = useCallback(\n\t\t(e: KeyboardEvent) =>\n\t\t\thandleKeyboardNavigation(e, { current: refs.current }, totalPages),\n\t\t[totalPages],\n\t);\n\n\tconst registerRefWrapper = useCallback(\n\t\t(index: number, element: HTMLButtonElement | null) => {\n\t\t\tif (element) {\n\t\t\t\trefs.current.set(index, element);\n\t\t\t} else {\n\t\t\t\trefs.current.delete(index);\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, [handleKeyDown]);\n\n\tuseEffect(() => {\n\t\tsetHasNextPage(page < totalPages);\n\t\tsetHasPreviousPage(page > 1);\n\t}, [page, totalPages]);\n\n\tuseEffect(() => {\n\t\tsetPage(initialPage);\n\t\tsetTotalPages(initialTotalPages);\n\t}, [initialPage, initialTotalPages]);\n\n\tuseEffect(() => {\n\t\tif (onPageChange) {\n\t\t\tonPageChange(page);\n\t\t}\n\t}, [page, onPageChange]);\n\n\tconst memoContextValue = useMemo(\n\t\t() => ({\n\t\t\tpage,\n\t\t\tsetPage,\n\t\t\ttotalPages,\n\t\t\thasNextPage,\n\t\t\thasPreviousPage,\n\t\t\tregisterRef: registerRefWrapper,\n\t\t}),\n\t\t[page, totalPages, hasNextPage, hasPreviousPage, registerRefWrapper],\n\t);\n\n\tconst defaultProps: useRender.ElementProps<\"nav\"> = {\n\t\t\"aria-label\": \"Pagination\",\n\t\tclassName: clsx(\"flex items-center gap-1\", className),\n\t\tchildren: (\n\t\t\t<PaginationContext.Provider value={memoContextValue}>\n\t\t\t\t{getTruncatedElements({ page, children })}\n\t\t\t</PaginationContext.Provider>\n\t\t),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"nav\",\n\t\trender,\n\t\tprops: mergeProps<\"nav\">(defaultProps, props),\n\t});\n}\n\n/**\n * Pagination Item\n */\n\nexport type PaginationItemProps = {\n\tchildren?: React.ReactNode;\n\tindex?: number;\n\tref?: Ref<HTMLButtonElement>;\n} & React.HTMLAttributes<HTMLButtonElement>;\n\n/**\n * Individual page item within the Pagination component.\n *\n * @example\n * ```tsx\n * <PaginationItem index={1}>1</PaginationItem>\n */\nfunction PaginationItem({\n\tindex,\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: PaginationItemProps) {\n\tconst { registerRef, page, setPage } = usePaginationContext();\n\n\tconst isActive = page === index;\n\tconst handleClick = () => {\n\t\tif (index !== undefined) {\n\t\t\tsetPage(index);\n\t\t}\n\t};\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={handleClick}\n\t\t\tref={mergeRefs(ref, (el) => registerRef(index ?? 0, el))}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200\",\n\t\t\t\t{\n\t\t\t\t\t\"bg-gray-700 text-white hover:bg-gray-800\": isActive,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\taria-current={isActive ? \"page\" : undefined}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? index}\n\t\t</button>\n\t);\n}\n\n/**\n * Pagination Prev\n */\n\nexport type PaginationPrevProps = PropsWithChildren<\n\tReact.HTMLAttributes<HTMLButtonElement>\n> & {\n\tref?: Ref<HTMLButtonElement>;\n};\n\n/**\n * Previous page button component for the Pagination.\n * Automatically disabled when on the first page.\n *\n * @example\n * ```tsx\n * <PaginationPrev>Previous</PaginationPrev>\n * ```\n */\nfunction PaginationPrev({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: PaginationPrevProps) {\n\tconst { registerRef, page, setPage, hasPreviousPage } =\n\t\tusePaginationContext();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={() => setPage(page - 1)}\n\t\t\tref={mergeRefs(ref, (el) => registerRef(0, el))}\n\t\t\tdisabled={!hasPreviousPage}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\n/**\n * Pagination Next\n */\n\nexport type PaginationNextProps = PropsWithChildren<\n\tReact.HTMLAttributes<HTMLButtonElement>\n> & {\n\tref?: Ref<HTMLButtonElement>;\n};\n\n/**\n * Next page button component for the Pagination.\n * Automatically disabled when on the last page.\n *\n * @example\n * ```tsx\n * <PaginationNext>Next</PaginationNext>\n * ```\n */\nfunction PaginationNext({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: PaginationNextProps) {\n\tconst { page, setPage, hasNextPage, registerRef, totalPages } =\n\t\tusePaginationContext();\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={() => setPage(page + 1)}\n\t\t\tdisabled={!hasNextPage}\n\t\t\tref={mergeRefs(ref, (el) => registerRef(totalPages + 1, el))}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\nexport { Pagination, PaginationItem, PaginationNext, PaginationPrev };\n"]}
+{"version":3,"file":"pagination.js","sourceRoot":"/","sources":["components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { mergeRefs } from \"@utilities/merge-refs/merge-refs\";\nimport { getTruncatedElements } from \"@utilities/pagination/get-truncated-elements\";\nimport { handleKeyboardNavigation } from \"@utilities/pagination/keyboard-navigation\";\nimport clsx from \"clsx\";\nimport {\n\tcreateContext,\n\ttype PropsWithChildren,\n\ttype Ref,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\n/**\n * Pagination Context\n */\n\ntype PaginationContextValue = {\n\tpage: number;\n\ttotalPages: number;\n\thasNextPage: boolean;\n\thasPreviousPage: boolean;\n\tsetPage: (page: number) => void;\n\tregisterRef: (index: number, element: HTMLButtonElement | null) => void;\n};\n\nconst PaginationContext = createContext<PaginationContextValue | undefined>(\n\tundefined,\n);\n\nconst usePaginationContext = () => {\n\tconst context = useContext(PaginationContext);\n\tif (!context) {\n\t\tthrow new Error(\"Pagination components must be used within a Pagination\");\n\t}\n\treturn context;\n};\n\n/**\n * Pagination\n */\n\nexport type PaginationProps = useRender.ComponentProps<\"nav\"> & {\n\tchildren?: React.ReactNode;\n\tpage: number;\n\ttotalPages: number;\n\tonPageChange: (page: number) => void;\n\tclassName?: string;\n};\n\n/**\n * Pagination component that provides navigation controls for a set of pages.\n *\n * @param {number} props.page - The current active page number\n * @param {number} props.totalPages - The total number of pages\n * @param {(page: number) => void} props.onPageChange - Callback function called when page changes\n * @param {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - Custom element to render instead of nav\n * @param {React.ReactNode} [props.children] - The content to render within the pagination component\n * @param {string} [props.className] - Additional CSS classes to apply\n *\n * @example\n * ```tsx\n * <Pagination page={1} totalPages={10} onPageChange={(page) => console.log(page)}>\n *   <PaginationPrev>Previous</PaginationPrev>\n *   <PaginationItem index={1}>1</PaginationItem>\n *   <PaginationItem index={2}>2</PaginationItem>\n *   <PaginationNext>Next</PaginationNext>\n * </Pagination>\n * ```\n *\n * @example\n * // With render prop to change the element\n * ```tsx\n * <Pagination render={<div />} page={1} totalPages={10} onPageChange={handleChange}>\n *   ...\n * </Pagination>\n * ```\n */\nfunction Pagination({\n\tchildren,\n\tpage: initialPage,\n\ttotalPages: initialTotalPages,\n\tonPageChange,\n\tclassName,\n\trender,\n\t...props\n}: PaginationProps) {\n\tconst [page, setPage] = useState(initialPage);\n\tconst [totalPages, setTotalPages] = useState(initialTotalPages);\n\tconst [hasNextPage, setHasNextPage] = useState(page < totalPages);\n\tconst [hasPreviousPage, setHasPreviousPage] = useState(page > 1);\n\n\tconst refs = useRef(new Map<number, HTMLButtonElement>());\n\n\tconst handleKeyDown = useCallback(\n\t\t(e: KeyboardEvent) =>\n\t\t\thandleKeyboardNavigation(e, { current: refs.current }, totalPages),\n\t\t[totalPages],\n\t);\n\n\tconst registerRefWrapper = useCallback(\n\t\t(index: number, element: HTMLButtonElement | null) => {\n\t\t\tif (element) {\n\t\t\t\trefs.current.set(index, element);\n\t\t\t} else {\n\t\t\t\trefs.current.delete(index);\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, [handleKeyDown]);\n\n\tuseEffect(() => {\n\t\tsetHasNextPage(page < totalPages);\n\t\tsetHasPreviousPage(page > 1);\n\t}, [page, totalPages]);\n\n\tuseEffect(() => {\n\t\tsetPage(initialPage);\n\t\tsetTotalPages(initialTotalPages);\n\t}, [initialPage, initialTotalPages]);\n\n\tuseEffect(() => {\n\t\tif (onPageChange) {\n\t\t\tonPageChange(page);\n\t\t}\n\t}, [page, onPageChange]);\n\n\tconst memoContextValue = useMemo(\n\t\t() => ({\n\t\t\tpage,\n\t\t\tsetPage,\n\t\t\ttotalPages,\n\t\t\thasNextPage,\n\t\t\thasPreviousPage,\n\t\t\tregisterRef: registerRefWrapper,\n\t\t}),\n\t\t[page, totalPages, hasNextPage, hasPreviousPage, registerRefWrapper],\n\t);\n\n\tconst defaultProps: useRender.ElementProps<\"nav\"> = {\n\t\t\"aria-label\": \"Pagination\",\n\t\tclassName: clsx(\"flex items-center gap-1\", className),\n\t\tchildren: (\n\t\t\t<PaginationContext.Provider value={memoContextValue}>\n\t\t\t\t{getTruncatedElements({ page, children })}\n\t\t\t</PaginationContext.Provider>\n\t\t),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"nav\",\n\t\trender,\n\t\tprops: mergeProps<\"nav\">(defaultProps, props),\n\t});\n}\n\n/**\n * Pagination Item\n */\n\nexport type PaginationItemProps = {\n\tchildren?: React.ReactNode;\n\tindex?: number;\n\tref?: Ref<HTMLButtonElement>;\n} & React.HTMLAttributes<HTMLButtonElement>;\n\n/**\n * Individual page item within the Pagination component.\n *\n * @example\n * ```tsx\n * <PaginationItem index={1}>1</PaginationItem>\n */\nfunction PaginationItem({\n\tindex,\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: PaginationItemProps) {\n\tconst { registerRef, page, setPage } = usePaginationContext();\n\n\tconst isActive = page === index;\n\tconst handleClick = () => {\n\t\tif (index !== undefined) {\n\t\t\tsetPage(index);\n\t\t}\n\t};\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={handleClick}\n\t\t\tref={mergeRefs(ref, (el) => registerRef(index ?? 0, el))}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-border\",\n\t\t\t\t{\n\t\t\t\t\t\"bg-primary text-on-primary hover:bg-primary-hover\": isActive,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\taria-current={isActive ? \"page\" : undefined}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? index}\n\t\t</button>\n\t);\n}\n\n/**\n * Pagination Prev\n */\n\nexport type PaginationPrevProps = PropsWithChildren<\n\tReact.HTMLAttributes<HTMLButtonElement>\n> & {\n\tref?: Ref<HTMLButtonElement>;\n};\n\n/**\n * Previous page button component for the Pagination.\n * Automatically disabled when on the first page.\n *\n * @example\n * ```tsx\n * <PaginationPrev>Previous</PaginationPrev>\n * ```\n */\nfunction PaginationPrev({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: PaginationPrevProps) {\n\tconst { registerRef, page, setPage, hasPreviousPage } =\n\t\tusePaginationContext();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={() => setPage(page - 1)}\n\t\t\tref={mergeRefs(ref, (el) => registerRef(0, el))}\n\t\t\tdisabled={!hasPreviousPage}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-border disabled:opacity-25\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\n/**\n * Pagination Next\n */\n\nexport type PaginationNextProps = PropsWithChildren<\n\tReact.HTMLAttributes<HTMLButtonElement>\n> & {\n\tref?: Ref<HTMLButtonElement>;\n};\n\n/**\n * Next page button component for the Pagination.\n * Automatically disabled when on the last page.\n *\n * @example\n * ```tsx\n * <PaginationNext>Next</PaginationNext>\n * ```\n */\nfunction PaginationNext({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: PaginationNextProps) {\n\tconst { page, setPage, hasNextPage, registerRef, totalPages } =\n\t\tusePaginationContext();\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-border disabled:opacity-25\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={() => setPage(page + 1)}\n\t\t\tdisabled={!hasNextPage}\n\t\t\tref={mergeRefs(ref, (el) => registerRef(totalPages + 1, el))}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\nexport { Pagination, PaginationItem, PaginationNext, PaginationPrev };\n"]}

package/dist/components/popover/popover.js

@@ -61,7 +61,7 @@ function PopoverTrigger({ className, ref, ...props }) {
 function PopoverContent({ children, className, sideOffset: sideOffsetProp, ref, ...props }) {
     const { showArrow, closeButtonAriaLabel, side, showCloseButton, sideOffset: sideOffsetContext, } = usePopoverContext();
     const sideOffset = sideOffsetProp ?? sideOffsetContext ?? 10;
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { side: side, sideOffset: sideOffset, children: _jsxs(PopoverPrimitive.Popup, { className: cn("relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md", className), ...props, ref: ref, children: [showCloseButton && (_jsx(PopoverClose, { className: "absolute top-4 right-4", "aria-label": closeButtonAriaLabel, children: _jsx(Icon, { render: _jsx(Cross1Icon, {}), size: "small" }) })), children, showArrow && (_jsx(PopoverPrimitive.Arrow, { className: "data-[side=bottom]:-top-1.25 data-[side=left]:-right-1.25 data-[side=top]:-bottom-1.25 data-[side=right]:-left-1.25", children: _jsx("div", { className: "h-2.5 w-2.5 rotate-45 bg-gray-700" }) }))] }) }) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { side: side, sideOffset: sideOffset, children: _jsxs(PopoverPrimitive.Popup, { className: cn("relative z-50 w-fit max-w-72 rounded-md bg-primary p-4 text-on-primary text-sm shadow-md", className), ...props, ref: ref, children: [showCloseButton && (_jsx(PopoverClose, { className: "absolute top-4 right-4", "aria-label": closeButtonAriaLabel, children: _jsx(Icon, { render: _jsx(Cross1Icon, {}), size: "small" }) })), children, showArrow && (_jsx(PopoverPrimitive.Arrow, { className: "data-[side=bottom]:-top-1.25 data-[side=left]:-right-1.25 data-[side=top]:-bottom-1.25 data-[side=right]:-left-1.25", children: _jsx("div", { className: "h-2.5 w-2.5 rotate-45 bg-primary" }) }))] }) }) }));
 }
 function PopoverClose({ className, ref, ...props }) {
     return _jsx(PopoverPrimitive.Close, { ref: ref, className: className, ...props });