luan-ui 0.5.2 → 0.6.0

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"/","sources":["components/checkbox/checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EACN,WAAW,EACX,kBAAkB,GAElB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAGN,UAAU,GACV,MAAM,OAAO,CAAC;AAQf,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;CACD,CAAC;AACF,MAAM,cAAc,GAAG,WAAW,CAAC;IAClC,IAAI,EAAE,mNAAmN;IACzN,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE,2CAA2C;SACjD;QACD,IAAI,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SAChB;KACD;CACD,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG;IACnB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,QAAQ;CACN,CAAC;AAEX;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAIjC,CACC,EACC,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;IACvE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC7C,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,iBAAiB,CAAC,IAAI,IACtB,SAAS,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EACxD,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,KAAK,YAET,KAAC,iBAAiB,CAAC,SAAS,cAC3B,KAAC,IAAI,IAAC,OAAO,QAAC,IAAI,EAAE,QAAQ,YAC3B,KAAC,SAAS,KAAG,GACP,GACsB,GACN,CACzB,CAAC;AACH,CAAC,CACD,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { Icon } from \"@components/icon/icon\";\nimport { CheckIcon } from \"@radix-ui/react-icons\";\nimport {\n\tgetVariants,\n\tmapResponsiveValue,\n\ttype ResponsiveValue,\n} from \"@utilities/responsive/responsive\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\nexport type CheckboxProps = ComponentPropsWithoutRef<\n\ttypeof CheckboxPrimitive.Root\n> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n};\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:h-4 sm:w-4\",\n\t\tmedium: \"sm:h-5 sm:w-5\",\n\t\tlarge: \"sm:h-6 sm:w-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:h-4 md:w-4\",\n\t\tmedium: \"md:h-5 md:w-5\",\n\t\tlarge: \"md:h-6 md:w-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:h-4 lg:w-4\",\n\t\tmedium: \"lg:h-5 lg:w-5\",\n\t\tlarge: \"lg:h-6 lg:w-6\",\n\t},\n\txl: {\n\t\tsmall: \"xl:h-4 xl:w-4\",\n\t\tmedium: \"xl:h-5 xl:w-5\",\n\t\tlarge: \"xl:h-6 xl:w-6\",\n\t},\n};\nconst checkboxStyles = getVariants({\n\tbase: \"peer flex h-4 w-4 items-center justify-center rounded-sm border border-gray-700 shadow-sm focus:outline-none focus:ring-1 focus:ring-gray-700 data-[state=checked]:bg-gray-700 data-[state=checked]:text-gray-100\",\n\tvariants: {\n\t\tdisabled: {\n\t\t\ttrue: \"cursor-not-allowed bg-gray-400 opacity-50\",\n\t\t},\n\t\tsize: {\n\t\t\tsmall: \"h-4 w-4\",\n\t\t\tmedium: \"h-5 w-5\",\n\t\t\tlarge: \"h-6 w-6\",\n\t\t},\n\t},\n});\n\nconst iconSizeMap = {\n\tsmall: \"small\",\n\tmedium: \"medium\",\n\tlarge: \"medium\",\n} as const;\n\n/**\n * A checkbox component built on top of Radix UI's checkbox primitive.\n *\n * @example\n * ```tsx\n * <Checkbox id=\"checkbox\" onCheckedChange={(checked) => console.log(checked)} />\n * ```\n */\nexport const Checkbox = forwardRef<\n\tComponentRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t\tsize = \"medium\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst iconSize = mapResponsiveValue(size, (size) => iconSizeMap[size]);\n\t\tconst { disabled, required } = useFormContext({\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t});\n\t\treturn (\n\t\t\t<CheckboxPrimitive.Root\n\t\t\t\tclassName={checkboxStyles({ disabled, size, className })}\n\t\t\t\tref={ref}\n\t\t\t\tdisabled={disabled}\n\t\t\t\trequired={required}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<CheckboxPrimitive.Indicator>\n\t\t\t\t\t<Icon asChild size={iconSize}>\n\t\t\t\t\t\t<CheckIcon />\n\t\t\t\t\t</Icon>\n\t\t\t\t</CheckboxPrimitive.Indicator>\n\t\t\t</CheckboxPrimitive.Root>\n\t\t);\n\t},\n);\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"/","sources":["components/checkbox/checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EACN,WAAW,EACX,kBAAkB,GAElB,MAAM,kCAAkC,CAAC;AAW1C,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;KACtB;CACD,CAAC;AAEF,MAAM,cAAc,GAAG,WAAW,CAAC;IAClC,IAAI,EAAE,uMAAuM;IAC7M,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE,2CAA2C;SACjD;QACD,IAAI,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SAChB;KACD;CACD,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG;IACnB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,QAAQ;CACN,CAAC;AAEX;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CAAC,EACxB,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,IAAI,GAAG,QAAQ,EACf,GAAG,EACH,GAAG,KAAK,EACO;IACf,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;IACvE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC7C,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,iBAAiB,CAAC,IAAI,IACtB,SAAS,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EACxD,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,KAAK,YAET,KAAC,iBAAiB,CAAC,SAAS,cAC3B,KAAC,IAAI,IAAC,MAAM,EAAE,KAAC,SAAS,KAAG,EAAE,IAAI,EAAE,QAAQ,GAAI,GAClB,GACN,CACzB,CAAC;AACH,CAAC","sourcesContent":["import { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport { Icon } from \"@components/icon/icon\";\nimport { CheckIcon } from \"@radix-ui/react-icons\";\nimport {\n\tgetVariants,\n\tmapResponsiveValue,\n\ttype ResponsiveValue,\n} from \"@utilities/responsive/responsive\";\nimport type { ComponentProps } from \"react\";\n\nexport type CheckboxProps = Omit<\n\tComponentProps<typeof CheckboxPrimitive.Root>,\n\t\"className\"\n> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tclassName?: string;\n};\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:h-4 sm:w-4\",\n\t\tmedium: \"sm:h-5 sm:w-5\",\n\t\tlarge: \"sm:h-6 sm:w-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:h-4 md:w-4\",\n\t\tmedium: \"md:h-5 md:w-5\",\n\t\tlarge: \"md:h-6 md:w-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:h-4 lg:w-4\",\n\t\tmedium: \"lg:h-5 lg:w-5\",\n\t\tlarge: \"lg:h-6 lg:w-6\",\n\t},\n\txl: {\n\t\tsmall: \"xl:h-4 xl:w-4\",\n\t\tmedium: \"xl:h-5 xl:w-5\",\n\t\tlarge: \"xl:h-6 xl:w-6\",\n\t},\n};\n\nconst checkboxStyles = getVariants({\n\tbase: \"peer flex h-4 w-4 items-center justify-center rounded-sm border border-gray-700 shadow-sm focus:outline-none focus:ring-1 focus:ring-gray-700 data-[checked]:bg-gray-700 data-[checked]:text-gray-100\",\n\tvariants: {\n\t\tdisabled: {\n\t\t\ttrue: \"cursor-not-allowed bg-gray-400 opacity-50\",\n\t\t},\n\t\tsize: {\n\t\t\tsmall: \"h-4 w-4\",\n\t\t\tmedium: \"h-5 w-5\",\n\t\t\tlarge: \"h-6 w-6\",\n\t\t},\n\t},\n});\n\nconst iconSizeMap = {\n\tsmall: \"small\",\n\tmedium: \"medium\",\n\tlarge: \"medium\",\n} as const;\n\n/**\n * A checkbox component built on top of Base UI's checkbox primitive.\n *\n * @example\n * ```tsx\n * <Checkbox id=\"checkbox\" onCheckedChange={(checked) => console.log(checked)} />\n * ```\n */\nexport function Checkbox({\n\tclassName,\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\tsize = \"medium\",\n\tref,\n\t...props\n}: CheckboxProps) {\n\tconst iconSize = mapResponsiveValue(size, (size) => iconSizeMap[size]);\n\tconst { disabled, required } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t<CheckboxPrimitive.Root\n\t\t\tclassName={checkboxStyles({ disabled, size, className })}\n\t\t\tref={ref}\n\t\t\tdisabled={disabled}\n\t\t\trequired={required}\n\t\t\t{...props}\n\t\t>\n\t\t\t<CheckboxPrimitive.Indicator>\n\t\t\t\t<Icon render={<CheckIcon />} size={iconSize} />\n\t\t\t</CheckboxPrimitive.Indicator>\n\t\t</CheckboxPrimitive.Root>\n\t);\n}\n"]}

package/dist/components/dialog/dialog.d.ts

@@ -1,10 +1,17 @@
-import { Dialog as RadixDialog } from "radix-ui";
-declare const Dialog: import("react").FC<RadixDialog.DialogProps>;
-declare const DialogTrigger: import("react").ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const DialogClose: import("react").ForwardRefExoticComponent<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const DialogHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-declare const DialogFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type { ComponentProps } from "react";
+declare const Dialog: typeof BaseDialog.Root;
+declare const DialogTrigger: BaseDialog.Trigger;
+declare const DialogClose: import("react").ForwardRefExoticComponent<import("@base-ui/react/dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DialogOverlayProps = ComponentProps<typeof BaseDialog.Backdrop>;
+export type DialogContentProps = ComponentProps<typeof BaseDialog.Popup>;
+declare function DialogContent({ children, className, ref, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+export type DialogHeaderProps = ComponentProps<"div">;
+declare function DialogHeader({ className, ref, ...props }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type DialogTitleProps = ComponentProps<typeof BaseDialog.Title>;
+declare function DialogTitle({ className, ref, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+export type DialogDescriptionProps = ComponentProps<typeof BaseDialog.Description>;
+declare function DialogDescription({ className, ref, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export type DialogFooterProps = ComponentProps<"div">;
+declare function DialogFooter({ className, ref, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, };

package/dist/components/dialog/dialog.js

@@ -1,23 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import { Cross1Icon } from "@radix-ui/react-icons";
 import { cn } from "../../utilities/cn/cn";
-import { Dialog as RadixDialog } from "radix-ui";
-import { forwardRef, } from "react";
-const Dialog = RadixDialog.Root;
-const DialogTrigger = RadixDialog.Trigger;
-const DialogClose = RadixDialog.Close;
-const DialogOverlay = forwardRef(({ className, ...props }, ref) => (_jsx(RadixDialog.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=closed]:animate-out data-[state=open]:animate-fade-in data-[state=open]:animate-in", className), ...props })));
-DialogOverlay.displayName = RadixDialog.Overlay.displayName;
-const DialogContent = forwardRef(({ children, className, ...props }, ref) => {
-    return (_jsxs(DialogOverlay, { children: [_jsx(DialogOverlay, {}), _jsxs(RadixDialog.Content, { className: cn("-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl flex-col gap-4 rounded-lg bg-white p-4", className), ...props, ref: ref, children: [_jsx(DialogClose, { asChild: true, children: _jsx("button", { type: "button", className: "absolute top-4 right-4", children: _jsx(Cross1Icon, { className: "h-4 w-4" }) }) }), children] })] }));
-});
-const DialogHeader = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col gap-1", className), ...props })));
-DialogHeader.displayName = "DialogHeader";
-const DialogTitle = forwardRef(({ className, ...props }, ref) => (_jsx(RadixDialog.Title, { ref: ref, className: cn("font-semibold text-lg", className), ...props })));
-DialogTitle.displayName = "DialogTitle";
-const DialogDescription = forwardRef(({ className, ...props }, ref) => (_jsx(RadixDialog.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props })));
-DialogDescription.displayName = "DialogDescription";
-const DialogFooter = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex justify-end gap-2", className), ...props })));
-DialogFooter.displayName = "DialogFooter";
+const Dialog = BaseDialog.Root;
+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 }));
+}
+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] })] }));
+}
+function DialogHeader({ className, ref, ...props }) {
+    return (_jsx("div", { ref: ref, className: cn("flex flex-col gap-1", className), ...props }));
+}
+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 }));
+}
+function DialogFooter({ className, ref, ...props }) {
+    return (_jsx("div", { ref: ref, className: cn("flex justify-end gap-2", className), ...props }));
+}
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, };
 //# sourceMappingURL=dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"/","sources":["components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { Dialog as RadixDialog } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\nconst Dialog = RadixDialog.Root;\n\nconst DialogTrigger = RadixDialog.Trigger;\n\nconst DialogClose = RadixDialog.Close;\n\nconst DialogOverlay = forwardRef<\n\tComponentRef<typeof RadixDialog.Overlay>,\n\tComponentPropsWithoutRef<typeof RadixDialog.Overlay>\n>(({ className, ...props }, ref) => (\n\t<RadixDialog.Overlay\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=closed]:animate-out data-[state=open]:animate-fade-in data-[state=open]:animate-in\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDialogOverlay.displayName = RadixDialog.Overlay.displayName;\n\nconst DialogContent = forwardRef<\n\tComponentRef<typeof RadixDialog.Content>,\n\tComponentPropsWithoutRef<typeof RadixDialog.Content>\n>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<DialogOverlay>\n\t\t\t<DialogOverlay />\n\t\t\t<RadixDialog.Content\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl flex-col gap-4 rounded-lg bg-white p-4\",\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 asChild>\n\t\t\t\t\t<button type=\"button\" 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</button>\n\t\t\t\t</DialogClose>\n\t\t\t\t{children}\n\t\t\t</RadixDialog.Content>\n\t\t</DialogOverlay>\n\t);\n});\n\nconst DialogHeader = forwardRef<\n\tHTMLDivElement,\n\tComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n\t<div ref={ref} className={cn(\"flex flex-col gap-1\", className)} {...props} />\n));\n\nDialogHeader.displayName = \"DialogHeader\";\n\nconst DialogTitle = forwardRef<\n\tComponentRef<typeof RadixDialog.Title>,\n\tComponentPropsWithoutRef<typeof RadixDialog.Title>\n>(({ className, ...props }, ref) => (\n\t<RadixDialog.Title\n\t\tref={ref}\n\t\tclassName={cn(\"font-semibold text-lg\", className)}\n\t\t{...props}\n\t/>\n));\n\nDialogTitle.displayName = \"DialogTitle\";\n\nconst DialogDescription = forwardRef<\n\tComponentRef<typeof RadixDialog.Description>,\n\tComponentPropsWithoutRef<typeof RadixDialog.Description>\n>(({ className, ...props }, ref) => (\n\t<RadixDialog.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-gray-500 text-sm\", className)}\n\t\t{...props}\n\t/>\n));\n\nDialogDescription.displayName = \"DialogDescription\";\n\nconst DialogFooter = forwardRef<\n\tHTMLDivElement,\n\tComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tclassName={cn(\"flex justify-end gap-2\", className)}\n\t\t{...props}\n\t/>\n));\n\nDialogFooter.displayName = \"DialogFooter\";\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,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"]}

package/dist/components/drawer/drawer.d.ts

@@ -1,16 +1,26 @@
-import { Dialog as RadixDialog } from "radix-ui";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type { ComponentProps } from "react";
 /**
  * Drawer Context
  */
 type DrawerContextValue = {
     side?: "left" | "right" | "top" | "bottom";
 };
-declare const Drawer: ({ children, side, ...props }: RadixDialog.DialogProps & DrawerContextValue) => import("react/jsx-runtime").JSX.Element;
-declare const DrawerTrigger: import("react").ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const DrawerClose: import("react").ForwardRefExoticComponent<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const DrawerContent: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const DrawerHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const DrawerTitle: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-declare const DrawerDescription: import("react").ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-declare const DrawerFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type DrawerProps = ComponentProps<typeof BaseDialog.Root> & DrawerContextValue;
+declare function Drawer({ children, side, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+declare const DrawerTrigger: BaseDialog.Trigger;
+declare const DrawerClose: import("react").ForwardRefExoticComponent<import("@base-ui/react/dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DrawerOverlayProps = ComponentProps<typeof BaseDialog.Backdrop>;
+export type DrawerContentProps = Omit<ComponentProps<typeof BaseDialog.Popup>, "className"> & {
+    className?: string;
+};
+declare function DrawerContent({ children, className, ref, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerHeaderProps = ComponentProps<"div">;
+declare function DrawerHeader({ className, ref, ...props }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerTitleProps = ComponentProps<typeof BaseDialog.Title>;
+declare function DrawerTitle({ className, ref, ...props }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerDescriptionProps = ComponentProps<typeof BaseDialog.Description>;
+declare function DrawerDescription({ className, ref, ...props }: DrawerDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerFooterProps = ComponentProps<"div">;
+declare function DrawerFooter({ className, ref, ...props }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, };

package/dist/components/drawer/drawer.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import { Cross1Icon } from "@radix-ui/react-icons";
 import { cn } from "../../utilities/cn/cn";
 import { getVariants } from "../../utilities/responsive/responsive";
-import { Dialog as RadixDialog } from "radix-ui";
-import { createContext, forwardRef, useContext, useMemo, } from "react";
+import { createContext, useContext, useMemo } from "react";
 const DrawerContext = createContext(undefined);
 const useDrawerContext = () => {
     const context = useContext(DrawerContext);
@@ -12,38 +12,44 @@ const useDrawerContext = () => {
     }
     return context;
 };
-const Drawer = ({ children, side, ...props }) => {
+function Drawer({ children, side, ...props }) {
     const contextValue = useMemo(() => ({
         side,
     }), [side]);
-    return (_jsx(DrawerContext.Provider, { value: contextValue, children: _jsx(RadixDialog.Root, { ...props, children: children }) }));
-};
-const DrawerTrigger = RadixDialog.Trigger;
-const DrawerClose = RadixDialog.Close;
-const DrawerOverlay = forwardRef(({ className, ...props }, ref) => (_jsx(RadixDialog.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=closed]:animate-out data-[state=open]:animate-fade-in data-[state=open]:animate-in", className), ...props })));
-DrawerOverlay.displayName = RadixDialog.Overlay.displayName;
+    return (_jsx(DrawerContext.Provider, { value: contextValue, children: _jsx(BaseDialog.Root, { ...props, children: children }) }));
+}
+const DrawerTrigger = BaseDialog.Trigger;
+const DrawerClose = BaseDialog.Close;
+const DrawerPortal = BaseDialog.Portal;
+function DrawerOverlay({ 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 }));
+}
 const drawerContentStyles = getVariants({
-    base: "fixed z-50 flex flex-col gap-4 bg-white p-4",
+    base: "fixed z-50 flex flex-col gap-4 bg-white p-4 transition-transform duration-300",
     variants: {
         side: {
-            left: "left-0 h-screen w-fit rounded-r-lg data-[state=closed]:animate-slide-out-left data-[state=open]:animate-slide-in-left",
-            right: "right-0 h-screen w-fit rounded-l-lg data-[state=closed]:animate-slide-out-right data-[state=open]:animate-slide-in-right",
-            top: "top-0 h-fit w-screen rounded-b-lg data-[state=closed]:animate-slide-out-top data-[state=open]:animate-slide-in-top",
-            bottom: "bottom-0 h-fit w-screen rounded-t-lg data-[state=closed]:animate-slide-out-bottom data-[state=open]:animate-slide-in-bottom",
+            left: "top-0 left-0 h-screen w-fit rounded-r-lg data-ending-style:-translate-x-full data-starting-style:-translate-x-full",
+            right: "top-0 right-0 h-screen w-fit rounded-l-lg data-ending-style:translate-x-full data-starting-style:translate-x-full",
+            top: "top-0 left-0 h-fit w-screen rounded-b-lg data-ending-style:-translate-y-full data-starting-style:-translate-y-full",
+            bottom: "bottom-0 left-0 h-fit w-screen rounded-t-lg data-ending-style:translate-y-full data-starting-style:translate-y-full",
         },
     },
 });
-const DrawerContent = forwardRef(({ children, className, ...props }, ref) => {
+function DrawerContent({ children, className, ref, ...props }) {
     const { side = "right" } = useDrawerContext();
-    return (_jsx(DrawerOverlay, { children: _jsxs(RadixDialog.Content, { className: drawerContentStyles({ side }), ...props, ref: ref, children: [_jsx(DrawerClose, { asChild: true, children: _jsx("button", { type: "button", className: "absolute top-4 right-4", children: _jsx(Cross1Icon, { className: "h-4 w-4" }) }) }), children] }) }));
-});
-const DrawerHeader = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col gap-1", className), ...props })));
-DrawerHeader.displayName = "DrawerHeader";
-const DrawerTitle = forwardRef(({ className, ...props }, ref) => (_jsx(RadixDialog.Title, { ref: ref, className: cn("font-semibold text-lg", className), ...props })));
-DrawerTitle.displayName = "DrawerTitle";
-const DrawerDescription = forwardRef(({ className, ...props }, ref) => (_jsx(RadixDialog.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props })));
-DrawerDescription.displayName = "DrawerDescription";
-const DrawerFooter = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex justify-end gap-2", className), ...props })));
-DrawerFooter.displayName = "DrawerFooter";
+    return (_jsxs(DrawerPortal, { children: [_jsx(DrawerOverlay, {}), _jsxs(BaseDialog.Popup, { className: drawerContentStyles({ side, className }), ...props, ref: ref, 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 }));
+}
+function DrawerTitle({ className, ref, ...props }) {
+    return (_jsx(BaseDialog.Title, { ref: ref, className: cn("font-semibold text-lg", className), ...props }));
+}
+function DrawerDescription({ className, ref, ...props }) {
+    return (_jsx(BaseDialog.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props }));
+}
+function DrawerFooter({ className, ref, ...props }) {
+    return (_jsx("div", { ref: ref, className: cn("flex justify-end gap-2", className), ...props }));
+}
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, };
 //# sourceMappingURL=drawer.js.map

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 { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { Dialog as RadixDialog } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\n\n/**\n * Drawer Context\n */\n\ntype DrawerContextValue = {\n\tside?: \"left\" | \"right\" | \"top\" | \"bottom\";\n};\n\nconst DrawerContext = createContext<DrawerContextValue | undefined>(undefined);\n\nconst useDrawerContext = () => {\n\tconst context = useContext(DrawerContext);\n\tif (!context) {\n\t\tthrow new Error(\"Drawer components must be used within a Drawer\");\n\t}\n\treturn context;\n};\n\nconst Drawer = ({\n\tchildren,\n\tside,\n\t...props\n}: RadixDialog.DialogProps & DrawerContextValue) => {\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\tside,\n\t\t}),\n\t\t[side],\n\t);\n\treturn (\n\t\t<DrawerContext.Provider value={contextValue}>\n\t\t\t<RadixDialog.Root {...props}>{children}</RadixDialog.Root>\n\t\t</DrawerContext.Provider>\n\t);\n};\n\nconst DrawerTrigger = RadixDialog.Trigger;\n\nconst DrawerClose = RadixDialog.Close;\n\nconst DrawerOverlay = forwardRef<\n\tComponentRef<typeof RadixDialog.Overlay>,\n\tComponentPropsWithoutRef<typeof RadixDialog.Overlay>\n>(({ className, ...props }, ref) => (\n\t<RadixDialog.Overlay\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=closed]:animate-out data-[state=open]:animate-fade-in data-[state=open]:animate-in\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDrawerOverlay.displayName = RadixDialog.Overlay.displayName;\n\nconst drawerContentStyles = getVariants({\n\tbase: \"fixed z-50 flex flex-col gap-4 bg-white p-4\",\n\tvariants: {\n\t\tside: {\n\t\t\tleft: \"left-0 h-screen w-fit rounded-r-lg data-[state=closed]:animate-slide-out-left data-[state=open]:animate-slide-in-left\",\n\t\t\tright:\n\t\t\t\t\"right-0 h-screen w-fit rounded-l-lg data-[state=closed]:animate-slide-out-right data-[state=open]:animate-slide-in-right\",\n\t\t\ttop: \"top-0 h-fit w-screen rounded-b-lg data-[state=closed]:animate-slide-out-top data-[state=open]:animate-slide-in-top\",\n\t\t\tbottom:\n\t\t\t\t\"bottom-0 h-fit w-screen rounded-t-lg data-[state=closed]:animate-slide-out-bottom data-[state=open]:animate-slide-in-bottom\",\n\t\t},\n\t},\n});\n\nconst DrawerContent = forwardRef<\n\tComponentRef<typeof RadixDialog.Content>,\n\tComponentPropsWithoutRef<typeof RadixDialog.Content>\n>(({ children, className, ...props }, ref) => {\n\tconst { side = \"right\" } = useDrawerContext();\n\treturn (\n\t\t<DrawerOverlay>\n\t\t\t<RadixDialog.Content\n\t\t\t\tclassName={drawerContentStyles({ side })}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<DrawerClose asChild>\n\t\t\t\t\t<button type=\"button\" 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</button>\n\t\t\t\t</DrawerClose>\n\t\t\t\t{children}\n\t\t\t</RadixDialog.Content>\n\t\t</DrawerOverlay>\n\t);\n});\n\nconst DrawerHeader = forwardRef<\n\tHTMLDivElement,\n\tComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n\t<div ref={ref} className={cn(\"flex flex-col gap-1\", className)} {...props} />\n));\n\nDrawerHeader.displayName = \"DrawerHeader\";\n\nconst DrawerTitle = forwardRef<\n\tComponentRef<typeof RadixDialog.Title>,\n\tComponentPropsWithoutRef<typeof RadixDialog.Title>\n>(({ className, ...props }, ref) => (\n\t<RadixDialog.Title\n\t\tref={ref}\n\t\tclassName={cn(\"font-semibold text-lg\", className)}\n\t\t{...props}\n\t/>\n));\n\nDrawerTitle.displayName = \"DrawerTitle\";\n\nconst DrawerDescription = forwardRef<\n\tComponentRef<typeof RadixDialog.Description>,\n\tComponentPropsWithoutRef<typeof RadixDialog.Description>\n>(({ className, ...props }, ref) => (\n\t<RadixDialog.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-gray-500 text-sm\", className)}\n\t\t{...props}\n\t/>\n));\n\nDrawerDescription.displayName = \"DrawerDescription\";\n\nconst DrawerFooter = forwardRef<\n\tHTMLDivElement,\n\tComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tclassName={cn(\"flex justify-end gap-2\", className)}\n\t\t{...props}\n\t/>\n));\n\nDrawerFooter.displayName = \"DrawerFooter\";\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 { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\n/**\n * Drawer Context\n */\n\ntype DrawerContextValue = {\n\tside?: \"left\" | \"right\" | \"top\" | \"bottom\";\n};\n\nconst DrawerContext = createContext<DrawerContextValue | undefined>(undefined);\n\nconst useDrawerContext = () => {\n\tconst context = useContext(DrawerContext);\n\tif (!context) {\n\t\tthrow new Error(\"Drawer components must be used within a Drawer\");\n\t}\n\treturn context;\n};\n\ntype DrawerProps = ComponentProps<typeof BaseDialog.Root> & DrawerContextValue;\n\nfunction Drawer({ children, side, ...props }: DrawerProps) {\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\tside,\n\t\t}),\n\t\t[side],\n\t);\n\treturn (\n\t\t<DrawerContext.Provider value={contextValue}>\n\t\t\t<BaseDialog.Root {...props}>{children}</BaseDialog.Root>\n\t\t</DrawerContext.Provider>\n\t);\n}\n\nconst DrawerTrigger = BaseDialog.Trigger;\n\nconst DrawerClose = BaseDialog.Close;\n\nconst DrawerPortal = BaseDialog.Portal;\n\nexport type DrawerOverlayProps = ComponentProps<typeof BaseDialog.Backdrop>;\n\nfunction DrawerOverlay({ className, ref, ...props }: DrawerOverlayProps) {\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\nconst drawerContentStyles = getVariants({\n\tbase: \"fixed z-50 flex flex-col gap-4 bg-white p-4 transition-transform duration-300\",\n\tvariants: {\n\t\tside: {\n\t\t\tleft: \"top-0 left-0 h-screen w-fit rounded-r-lg data-ending-style:-translate-x-full data-starting-style:-translate-x-full\",\n\t\t\tright:\n\t\t\t\t\"top-0 right-0 h-screen w-fit rounded-l-lg data-ending-style:translate-x-full data-starting-style:translate-x-full\",\n\t\t\ttop: \"top-0 left-0 h-fit w-screen rounded-b-lg data-ending-style:-translate-y-full data-starting-style:-translate-y-full\",\n\t\t\tbottom:\n\t\t\t\t\"bottom-0 left-0 h-fit w-screen rounded-t-lg data-ending-style:translate-y-full data-starting-style:translate-y-full\",\n\t\t},\n\t},\n});\n\nexport type DrawerContentProps = Omit<\n\tComponentProps<typeof BaseDialog.Popup>,\n\t\"className\"\n> & {\n\tclassName?: string;\n};\n\nfunction DrawerContent({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: DrawerContentProps) {\n\tconst { side = \"right\" } = useDrawerContext();\n\treturn (\n\t\t<DrawerPortal>\n\t\t\t<DrawerOverlay />\n\t\t\t<BaseDialog.Popup\n\t\t\t\tclassName={drawerContentStyles({ side, className })}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<DrawerClose className=\"absolute top-4 right-4\">\n\t\t\t\t\t<Cross1Icon className=\"h-4 w-4\" />\n\t\t\t\t</DrawerClose>\n\t\t\t\t{children}\n\t\t\t</BaseDialog.Popup>\n\t\t</DrawerPortal>\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 BaseDialog.Title>;\n\nfunction DrawerTitle({ className, ref, ...props }: DrawerTitleProps) {\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 DrawerDescriptionProps = ComponentProps<\n\ttypeof BaseDialog.Description\n>;\n\nfunction DrawerDescription({\n\tclassName,\n\tref,\n\t...props\n}: DrawerDescriptionProps) {\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 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.d.ts

@@ -1,26 +1,35 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-declare const DropdownMenu: import("react").FC<DropdownMenuPrimitive.DropdownMenuProps>;
-declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuPortal: import("react").FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
-declare const DropdownMenuSub: import("react").FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
-declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuSubTrigger: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+import { Menu } from "@base-ui/react/menu";
+import type { ComponentProps } from "react";
+declare const DropdownMenu: typeof Menu.Root;
+export type DropdownMenuTriggerProps = ComponentProps<typeof Menu.Trigger>;
+declare function DropdownMenuTrigger({ className, ref, ...props }: DropdownMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<import("@base-ui/react/menu").MenuGroupProps & import("react").RefAttributes<Element>>;
+declare const DropdownMenuPortal: import("react").ForwardRefExoticComponent<import("@base-ui/react/menu").MenuPortalProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSub: typeof Menu.SubmenuRoot;
+declare const DropdownMenuRadioGroup: import("react").NamedExoticComponent<import("@base-ui/react/menu").MenuRadioGroupProps & import("react").RefAttributes<Element>>;
+export type DropdownMenuSubTriggerProps = ComponentProps<typeof Menu.SubmenuTrigger> & {
     inset?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuSubContent: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuContent: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+};
+declare function DropdownMenuSubTrigger({ className, inset, children, ref, ...props }: DropdownMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
+export type DropdownMenuSubContentProps = ComponentProps<typeof Menu.Popup>;
+declare function DropdownMenuSubContent({ className, ref, ...props }: DropdownMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
+export type DropdownMenuContentProps = ComponentProps<typeof Menu.Popup> & {
+    sideOffset?: number;
+};
+declare function DropdownMenuContent({ className, sideOffset, ref, ...props }: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+export type DropdownMenuItemProps = ComponentProps<typeof Menu.Item> & {
     inset?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuCheckboxItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuRadioItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuLabel: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+};
+declare function DropdownMenuItem({ className, inset, ref, ...props }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export type DropdownMenuCheckboxItemProps = ComponentProps<typeof Menu.CheckboxItem>;
+declare function DropdownMenuCheckboxItem({ className, children, checked, onCheckedChange, ref, ...props }: DropdownMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+export type DropdownMenuRadioItemProps = ComponentProps<typeof Menu.RadioItem>;
+declare function DropdownMenuRadioItem({ className, children, ref, ...props }: DropdownMenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
+export type DropdownMenuLabelProps = ComponentProps<typeof Menu.GroupLabel> & {
     inset?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuShortcut: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
 };
+declare function DropdownMenuLabel({ className, inset, ref, ...props }: DropdownMenuLabelProps): import("react/jsx-runtime").JSX.Element;
+export type DropdownMenuSeparatorProps = ComponentProps<typeof Menu.Separator>;
+declare function DropdownMenuSeparator({ className, ref, ...props }: DropdownMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

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

@@ -1,36 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "@radix-ui/react-icons";
 import { cn } from "../../utilities/cn/cn";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { forwardRef, } from "react";
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuSubTrigger = forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus-visible:bg-gray-200 focus-visible:text-gray-700 data-[state=open]:bg-gray-200 data-[state=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" })] })));
-DropdownMenuSubTrigger.displayName =
-    DropdownMenuPrimitive.SubTrigger.displayName;
-const DropdownMenuSubContent = forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("data-[state=closed]:zoom-out-95 data-[state=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-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-gray-200 bg-gray-50 p-1 text-gray-700 shadow-lg data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in", className), ...props })));
-DropdownMenuSubContent.displayName =
-    DropdownMenuPrimitive.SubContent.displayName;
-const DropdownMenuContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-gray-200 bg-gray-50 p-1 text-gray-700 shadow-md", "data-[state=closed]:zoom-out-95 data-[state=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-[--radix-dropdown-menu-content-transform-origin] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in", className), ...props }) })));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.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 focus-visible:bg-gray-200 focus-visible:text-gray-700 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className), ...props })));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuCheckboxItem = forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.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 focus-visible:bg-gray-200 focus-visible:text-gray-700 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), children] })));
-DropdownMenuCheckboxItem.displayName =
-    DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.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 focus-visible:bg-gray-200 focus-visible:text-gray-900 data-[disabled]:pointer-events-none 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(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "h-2 w-2 fill-current" }) }) }), children] })));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-const DropdownMenuLabel = forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 font-semibold text-sm", inset && "pl-8", className), ...props })));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-gray-200", className), ...props })));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-const DropdownMenuShortcut = ({ className, ...props }) => {
+const DropdownMenu = Menu.Root;
+function DropdownMenuTrigger({ className, ref, ...props }) {
+    return _jsx(Menu.Trigger, { ref: ref, className: className, ...props });
+}
+const DropdownMenuGroup = Menu.Group;
+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" })] }));
+}
+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 }) }) }));
+}
+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 }) }) }));
+}
+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 }));
+}
+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] }));
+}
+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] }));
+}
+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 }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
     return (_jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props }));
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+}
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };
 //# sourceMappingURL=dropdown-menu.js.map

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 { CheckIcon, ChevronRightIcon, CircleIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst DropdownMenuSubTrigger = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.SubTrigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus-visible:bg-gray-200 focus-visible:text-gray-700 data-[state=open]:bg-gray-200 data-[state=open]:text-gray-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t\t<ChevronRightIcon className=\"ml-auto\" />\n\t</DropdownMenuPrimitive.SubTrigger>\n));\nDropdownMenuSubTrigger.displayName =\n\tDropdownMenuPrimitive.SubTrigger.displayName;\n\nconst DropdownMenuSubContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubContent>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n\t<DropdownMenuPrimitive.SubContent\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=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-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-gray-200 bg-gray-50 p-1 text-gray-700 shadow-lg data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuSubContent.displayName =\n\tDropdownMenuPrimitive.SubContent.displayName;\n\nconst DropdownMenuContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Portal>\n\t\t<DropdownMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] 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\"data-[state=closed]:zoom-out-95 data-[state=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-[--radix-dropdown-menu-content-transform-origin] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</DropdownMenuPrimitive.Portal>\n));\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\n\nconst DropdownMenuItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\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 focus-visible:bg-gray-200 focus-visible:text-gray-700 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n\t<DropdownMenuPrimitive.CheckboxItem\n\t\tref={ref}\n\t\tclassName={cn(\n\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 focus-visible:bg-gray-200 focus-visible:text-gray-700 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\tchecked={checked}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<CheckIcon className=\"h-4 w-4\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName =\n\tDropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuRadioItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.RadioItem>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.RadioItem\n\t\tref={ref}\n\t\tclassName={cn(\n\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 focus-visible:bg-gray-200 focus-visible:text-gray-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<CircleIcon className=\"h-2 w-2 fill-current\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;\n\nconst DropdownMenuLabel = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"px-2 py-1.5 font-semibold text-sm\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;\n\nconst DropdownMenuSeparator = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Separator>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Separator\n\t\tref={ref}\n\t\tclassName={cn(\"-mx-1 my-1 h-px bg-gray-200\", className)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst 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};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nexport {\n\tDropdownMenu,\n\tDropdownMenuTrigger,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuRadioItem,\n\tDropdownMenuLabel,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuGroup,\n\tDropdownMenuPortal,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuRadioGroup,\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-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\tDropdownMenuTrigger,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuRadioItem,\n\tDropdownMenuLabel,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuGroup,\n\tDropdownMenuPortal,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuRadioGroup,\n};\n"]}

package/dist/components/form-field/form-field.d.ts

@@ -1,9 +1,10 @@
-import { type ComponentPropsWithoutRef } from "react";
-export type FormFieldProps = ComponentPropsWithoutRef<"div"> & {
+import { type ComponentProps, type Ref } from "react";
+export type FormFieldProps = ComponentProps<"div"> & {
     orientation?: "horizontal" | "vertical";
     disabled?: boolean;
     required?: boolean;
     error?: boolean;
+    ref?: Ref<HTMLDivElement>;
 };
 /**
  * A component that displays a form field. Should be used as a parent of a Label, an input element and a FormHelper component.
@@ -17,9 +18,4 @@ export type FormFieldProps = ComponentPropsWithoutRef<"div"> & {
  * </FormField>
  * ```
  */
-export declare const FormField: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    orientation?: "horizontal" | "vertical";
-    disabled?: boolean;
-    required?: boolean;
-    error?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
+export declare function FormField({ className, children, orientation, disabled, required, error, ref, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element | null;