luan-ui 0.5.0 → 0.5.2

package/dist/components/alert/alert.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "../slot/slot";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { getVariants } from "../../utilities/responsive/responsive";
 import { createContext, forwardRef, useContext, } from "react";
 const AlertContext = createContext(undefined);
 const useAlertContext = () => {
@@ -11,19 +11,38 @@ const useAlertContext = () => {
     return context;
 };
 const alertStyles = getVariants({
-    base: "grid w-fit grid-cols-[0_1fr] items-start gap-1 rounded-md border border-transparent has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] [&>svg]:translate-y-1",
+    slots: {
+        root: "grid w-fit grid-cols-[0_1fr] items-start gap-1 rounded-md border border-transparent has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] [&>svg]:translate-y-1",
+        title: "col-start-2 font-bold",
+        description: "col-start-2",
+    },
     variants: {
         variant: {
-            primary: "bg-gray-700 text-white",
-            secondary: "border-gray-700 text-gray-700",
-            error: "bg-red-500 text-white",
+            primary: {
+                root: "bg-gray-700 text-white",
+            },
+            secondary: {
+                root: "border-gray-700 text-gray-700",
+            },
+            error: {
+                root: "bg-red-500 text-white",
+            },
         },
         size: {
-            small: "px-2 py-1 has-[>svg]:gap-x-2",
-            medium: "px-3 py-2 has-[>svg]:gap-x-3",
+            small: {
+                root: "px-2 py-1 has-[>svg]:gap-x-2",
+                title: "text-sm",
+                description: "text-xs",
+            },
+            medium: {
+                root: "px-3 py-2 has-[>svg]:gap-x-3",
+                title: "text-base",
+                description: "text-sm",
+            },
         },
     },
 });
+const { root, title, description } = alertStyles;
 export const SIZES = {
     sm: {
         small: "sm:px-2 sm:py-1 sm:has-[>svg]:gap-x-2",
@@ -44,18 +63,9 @@ export const SIZES = {
 };
 const Alert = forwardRef(({ variant = "primary", size = "medium", className, asChild, ...props }, ref) => {
     const Component = asChild ? Slot : "div";
-    return (_jsx(AlertContext.Provider, { value: { variant, size }, children: _jsx(Component, { className: alertStyles({ variant, size, className }), ...props, ref: ref }) }));
+    return (_jsx(AlertContext.Provider, { value: { variant, size }, children: _jsx(Component, { className: root({ variant, size, className }), ...props, ref: ref }) }));
 });
 Alert.displayName = "Alert";
-const alertTitleStyles = getVariants({
-    base: "col-start-2 font-bold",
-    variants: {
-        size: {
-            small: "text-sm",
-            medium: "text-base",
-        },
-    },
-});
 export const TITLE_SIZES = {
     sm: {
         small: "sm:text-sm",
@@ -77,18 +87,9 @@ export const TITLE_SIZES = {
 const AlertTitle = forwardRef(({ className, asChild, ...props }, ref) => {
     const { size } = useAlertContext();
     const Component = asChild ? Slot : "div";
-    return (_jsx(Component, { ref: ref, ...props, className: alertTitleStyles({ size, className }) }));
+    return (_jsx(Component, { ref: ref, ...props, className: title({ size, className }) }));
 });
 AlertTitle.displayName = "AlertTitle";
-const alertDescriptionStyles = getVariants({
-    base: "col-start-2",
-    variants: {
-        size: {
-            small: "text-xs",
-            medium: "text-sm",
-        },
-    },
-});
 export const DESCRIPTION_SIZES = {
     sm: {
         small: "sm:text-xs",
@@ -110,7 +111,7 @@ export const DESCRIPTION_SIZES = {
 const AlertDescription = forwardRef(({ className, asChild, ...props }, ref) => {
     const { size } = useAlertContext();
     const Component = asChild ? Slot : "div";
-    return (_jsx(Component, { ref: ref, ...props, className: alertDescriptionStyles({ size, className }) }));
+    return (_jsx(Component, { ref: ref, ...props, className: description({ size, className }) }));
 });
 AlertDescription.displayName = "AlertDescription";
 export { Alert, AlertDescription, AlertTitle, };

package/dist/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"/","sources":["components/alert/alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n} from \"react\";\n\ntype AlertContextType = {\n\tvariant: \"primary\" | \"secondary\" | \"error\";\n\tsize: ResponsiveValue<\"small\" | \"medium\">;\n};\n\nconst AlertContext = createContext<AlertContextType | undefined>(undefined);\n\nconst useAlertContext = () => {\n\tconst context = useContext(AlertContext);\n\tif (!context) {\n\t\tthrow new Error(\"useAlertContext must be used within an Alert component\");\n\t}\n\treturn context;\n};\n\ntype AlertProps = ComponentPropsWithoutRef<\"div\"> & {\n\tvariant?: \"primary\" | \"secondary\" | \"error\";\n\tasChild?: boolean;\n\tsize?: ResponsiveValue<\"small\" | \"medium\">;\n};\n\nconst alertStyles = getVariants({\n\tbase: \"grid w-fit grid-cols-[0_1fr] items-start gap-1 rounded-md border border-transparent has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] [&>svg]:translate-y-1\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary: \"bg-gray-700 text-white\",\n\t\t\tsecondary: \"border-gray-700 text-gray-700\",\n\t\t\terror: \"bg-red-500 text-white\",\n\t\t},\n\t\tsize: {\n\t\t\tsmall: \"px-2 py-1 has-[>svg]:gap-x-2\",\n\t\t\tmedium: \"px-3 py-2 has-[>svg]:gap-x-3\",\n\t\t},\n\t},\n});\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:px-2 sm:py-1 sm:has-[>svg]:gap-x-2\",\n\t\tmedium: \"sm:px-3 sm:py-2 sm:has-[>svg]:gap-x-3\",\n\t},\n\tmd: {\n\t\tsmall: \"md:px-2 md:py-1 md:has-[>svg]:gap-x-2\",\n\t\tmedium: \"md:px-3 md:py-2 md:has-[>svg]:gap-x-3\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:px-2 lg:py-1 lg:has-[>svg]:gap-x-2\",\n\t\tmedium: \"lg:px-3 lg:py-2 lg:has-[>svg]:gap-x-3\",\n\t},\n\txl: {\n\t\tsmall: \"xl:px-2 xl:py-1 xl:has-[>svg]:gap-x-2\",\n\t\tmedium: \"xl:px-3 xl:py-2 xl:has-[>svg]:gap-x-3\",\n\t},\n};\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n\t(\n\t\t{ variant = \"primary\", size = \"medium\", className, asChild, ...props },\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={{ variant, size }}>\n\t\t\t\t<Component\n\t\t\t\t\tclassName={alertStyles({ variant, size, className })}\n\t\t\t\t\t{...props}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\n\nAlert.displayName = \"Alert\";\n\ntype AlertTitleProps = ComponentPropsWithoutRef<\"div\"> & {\n\tasChild?: boolean;\n};\n\nconst alertTitleStyles = getVariants({\n\tbase: \"col-start-2 font-bold\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"text-sm\",\n\t\t\tmedium: \"text-base\",\n\t\t},\n\t},\n});\n\nexport const TITLE_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-sm\",\n\t\tmedium: \"sm:text-base\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-sm\",\n\t\tmedium: \"md:text-base\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-sm\",\n\t\tmedium: \"lg:text-base\",\n\t},\n\txl: {\n\t\tsmall: \"xl:text-sm\",\n\t\tmedium: \"xl:text-base\",\n\t},\n};\n\nconst AlertTitle = forwardRef<HTMLDivElement, AlertTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst { size } = useAlertContext();\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={alertTitleStyles({ size, className })}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nAlertTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentPropsWithoutRef<\"div\"> & {\n\tasChild?: boolean;\n};\n\nconst alertDescriptionStyles = getVariants({\n\tbase: \"col-start-2\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"text-xs\",\n\t\t\tmedium: \"text-sm\",\n\t\t},\n\t},\n});\n\nexport const DESCRIPTION_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-xs\",\n\t\tmedium: \"sm:text-sm\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-xs\",\n\t\tmedium: \"md:text-sm\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-xs\",\n\t\tmedium: \"lg:text-sm\",\n\t},\n\txl: {\n\t\tsmall: \"xl:text-xs\",\n\t\tmedium: \"xl:text-sm\",\n\t},\n};\n\nconst AlertDescription = forwardRef<HTMLDivElement, AlertDescriptionProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst { size } = useAlertContext();\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={alertDescriptionStyles({ size, className })}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nAlertDescription.displayName = \"AlertDescription\";\n\nexport {\n\tAlert,\n\tAlertDescription,\n\tAlertTitle,\n\ttype AlertDescriptionProps,\n\ttype AlertProps,\n\ttype AlertTitleProps,\n};\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"/","sources":["components/alert/alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n} from \"react\";\n\ntype AlertContextType = {\n\tvariant: \"primary\" | \"secondary\" | \"error\";\n\tsize: ResponsiveValue<\"small\" | \"medium\">;\n};\n\nconst AlertContext = createContext<AlertContextType | undefined>(undefined);\n\nconst useAlertContext = () => {\n\tconst context = useContext(AlertContext);\n\tif (!context) {\n\t\tthrow new Error(\"useAlertContext must be used within an Alert component\");\n\t}\n\treturn context;\n};\n\ntype AlertProps = ComponentPropsWithoutRef<\"div\"> & {\n\tvariant?: \"primary\" | \"secondary\" | \"error\";\n\tasChild?: boolean;\n\tsize?: ResponsiveValue<\"small\" | \"medium\">;\n};\n\nconst alertStyles = getVariants({\n\tslots: {\n\t\troot: \"grid w-fit grid-cols-[0_1fr] items-start gap-1 rounded-md border border-transparent has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] [&>svg]:translate-y-1\",\n\t\ttitle: \"col-start-2 font-bold\",\n\t\tdescription: \"col-start-2\",\n\t},\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary: {\n\t\t\t\troot: \"bg-gray-700 text-white\",\n\t\t\t},\n\t\t\tsecondary: {\n\t\t\t\troot: \"border-gray-700 text-gray-700\",\n\t\t\t},\n\t\t\terror: {\n\t\t\t\troot: \"bg-red-500 text-white\",\n\t\t\t},\n\t\t},\n\t\tsize: {\n\t\t\tsmall: {\n\t\t\t\troot: \"px-2 py-1 has-[>svg]:gap-x-2\",\n\t\t\t\ttitle: \"text-sm\",\n\t\t\t\tdescription: \"text-xs\",\n\t\t\t},\n\t\t\tmedium: {\n\t\t\t\troot: \"px-3 py-2 has-[>svg]:gap-x-3\",\n\t\t\t\ttitle: \"text-base\",\n\t\t\t\tdescription: \"text-sm\",\n\t\t\t},\n\t\t},\n\t},\n});\n\nconst { root, title, description } = alertStyles;\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:px-2 sm:py-1 sm:has-[>svg]:gap-x-2\",\n\t\tmedium: \"sm:px-3 sm:py-2 sm:has-[>svg]:gap-x-3\",\n\t},\n\tmd: {\n\t\tsmall: \"md:px-2 md:py-1 md:has-[>svg]:gap-x-2\",\n\t\tmedium: \"md:px-3 md:py-2 md:has-[>svg]:gap-x-3\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:px-2 lg:py-1 lg:has-[>svg]:gap-x-2\",\n\t\tmedium: \"lg:px-3 lg:py-2 lg:has-[>svg]:gap-x-3\",\n\t},\n\txl: {\n\t\tsmall: \"xl:px-2 xl:py-1 xl:has-[>svg]:gap-x-2\",\n\t\tmedium: \"xl:px-3 xl:py-2 xl:has-[>svg]:gap-x-3\",\n\t},\n};\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n\t(\n\t\t{ variant = \"primary\", size = \"medium\", className, asChild, ...props },\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={{ variant, size }}>\n\t\t\t\t<Component\n\t\t\t\t\tclassName={root({ variant, size, className })}\n\t\t\t\t\t{...props}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\n\nAlert.displayName = \"Alert\";\n\ntype AlertTitleProps = ComponentPropsWithoutRef<\"div\"> & {\n\tasChild?: boolean;\n};\n\nexport const TITLE_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-sm\",\n\t\tmedium: \"sm:text-base\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-sm\",\n\t\tmedium: \"md:text-base\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-sm\",\n\t\tmedium: \"lg:text-base\",\n\t},\n\txl: {\n\t\tsmall: \"xl:text-sm\",\n\t\tmedium: \"xl:text-base\",\n\t},\n};\n\nconst AlertTitle = forwardRef<HTMLDivElement, AlertTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst { size } = useAlertContext();\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component ref={ref} {...props} className={title({ size, className })} />\n\t\t);\n\t},\n);\n\nAlertTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentPropsWithoutRef<\"div\"> & {\n\tasChild?: boolean;\n};\n\nexport const DESCRIPTION_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-xs\",\n\t\tmedium: \"sm:text-sm\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-xs\",\n\t\tmedium: \"md:text-sm\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-xs\",\n\t\tmedium: \"lg:text-sm\",\n\t},\n\txl: {\n\t\tsmall: \"xl:text-xs\",\n\t\tmedium: \"xl:text-sm\",\n\t},\n};\n\nconst AlertDescription = forwardRef<HTMLDivElement, AlertDescriptionProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst { size } = useAlertContext();\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={description({ size, className })}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nAlertDescription.displayName = \"AlertDescription\";\n\nexport {\n\tAlert,\n\tAlertDescription,\n\tAlertTitle,\n\ttype AlertDescriptionProps,\n\ttype AlertProps,\n\ttype AlertTitleProps,\n};\n"]}

package/dist/components/badge/badge.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "../slot/slot";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { getVariants } from "../../utilities/responsive/responsive";
 import { forwardRef } from "react";
 const badgeStyles = getVariants({
     base: "flex w-fit items-center justify-center rounded-full font-medium",

package/dist/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"/","sources":["components/badge/badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAGnE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAgBnC,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,iEAAiE;IACvE,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE,wBAAwB;YACjC,SAAS,EAAE,2BAA2B;YACtC,WAAW,EAAE,uBAAuB;YACpC,OAAO,EAAE,+CAA+C;SACxD;QACD,IAAI,EAAE;YACL,KAAK,EAAE,yBAAyB;YAChC,MAAM,EAAE,yBAAyB;YACjC,KAAK,EAAE,yBAAyB;SAChC;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,MAAM,KAAK,GAAG,UAAU,CACvB,CACC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,KAAK,EAAE,EACtE,GAAG,EACF,EAAE;IACH,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACzC,OAAO,CACN,KAAC,SAAS,IACT,SAAS,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EACpD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC;AACH,CAAC,CACD,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\n\n/**\n * Props for the Badge component\n * @interface BadgeProps\n * @extends {ComponentProps<\"div\">}\n */\nexport type BadgeProps = ComponentProps<\"div\"> & {\n\t/** Whether to render the badge as a child component */\n\tasChild?: boolean;\n\t/** The visual style variant of the badge */\n\tvariant?: \"primary\" | \"secondary\" | \"destructive\" | \"outline\";\n\t/** The size of the badge, can be responsive */\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n};\n\nconst badgeStyles = getVariants({\n\tbase: \"flex w-fit items-center justify-center rounded-full font-medium\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary: \"bg-gray-700 text-white\",\n\t\t\tsecondary: \"bg-gray-200 text-gray-700\",\n\t\t\tdestructive: \"bg-red-500 text-white\",\n\t\t\toutline: \"border border-gray-700 bg-white text-gray-700\",\n\t\t},\n\t\tsize: {\n\t\t\tsmall: \"gap-1 px-2 py-1 text-xs\",\n\t\t\tmedium: \"gap-1 px-3 py-1 text-sm\",\n\t\t\tlarge: \"gap-2 px-4 py-2 text-lg\",\n\t\t},\n\t},\n});\n\n/**\n * Badge component for displaying status, labels, or counts\n * @component\n * @example\n * ```tsx\n * <Badge variant=\"primary\" size=\"medium\">New</Badge>\n * ```\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n\t(\n\t\t{ className, asChild, variant = \"primary\", size = \"medium\", ...props },\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={badgeStyles({ className, variant, size })}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport { Badge };\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"/","sources":["components/badge/badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAE/D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAgBnC,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,iEAAiE;IACvE,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE,wBAAwB;YACjC,SAAS,EAAE,2BAA2B;YACtC,WAAW,EAAE,uBAAuB;YACpC,OAAO,EAAE,+CAA+C;SACxD;QACD,IAAI,EAAE;YACL,KAAK,EAAE,yBAAyB;YAChC,MAAM,EAAE,yBAAyB;YACjC,KAAK,EAAE,yBAAyB;SAChC;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,MAAM,KAAK,GAAG,UAAU,CACvB,CACC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,KAAK,EAAE,EACtE,GAAG,EACF,EAAE;IACH,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACzC,OAAO,CACN,KAAC,SAAS,IACT,SAAS,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EACpD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC;AACH,CAAC,CACD,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\n\n/**\n * Props for the Badge component\n * @interface BadgeProps\n * @extends {ComponentProps<\"div\">}\n */\nexport type BadgeProps = ComponentProps<\"div\"> & {\n\t/** Whether to render the badge as a child component */\n\tasChild?: boolean;\n\t/** The visual style variant of the badge */\n\tvariant?: \"primary\" | \"secondary\" | \"destructive\" | \"outline\";\n\t/** The size of the badge, can be responsive */\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n};\n\nconst badgeStyles = getVariants({\n\tbase: \"flex w-fit items-center justify-center rounded-full font-medium\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary: \"bg-gray-700 text-white\",\n\t\t\tsecondary: \"bg-gray-200 text-gray-700\",\n\t\t\tdestructive: \"bg-red-500 text-white\",\n\t\t\toutline: \"border border-gray-700 bg-white text-gray-700\",\n\t\t},\n\t\tsize: {\n\t\t\tsmall: \"gap-1 px-2 py-1 text-xs\",\n\t\t\tmedium: \"gap-1 px-3 py-1 text-sm\",\n\t\t\tlarge: \"gap-2 px-4 py-2 text-lg\",\n\t\t},\n\t},\n});\n\n/**\n * Badge component for displaying status, labels, or counts\n * @component\n * @example\n * ```tsx\n * <Badge variant=\"primary\" size=\"medium\">New</Badge>\n * ```\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n\t(\n\t\t{ className, asChild, variant = \"primary\", size = \"medium\", ...props },\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={badgeStyles({ className, variant, size })}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport { Badge };\n"]}

package/dist/components/button/button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from "../icon/icon";
 import { Slot, Slottable } from "../slot/slot";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { getVariants } from "../../utilities/responsive/responsive";
 import { forwardRef } from "react";
 export const SIZES = {
     sm: {

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"/","sources":["components/button/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAUnC,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;CACD,CAAC;AAEF,MAAM,YAAY,GAAG,WAAW,CAAC;IAChC,IAAI,EAAE,0FAA0F;IAChG,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EACN,gFAAgF;YACjF,SAAS,EACR,4EAA4E;YAC7E,WAAW,EACV,6EAA6E;SAC9E;QACD,IAAI,EAAE;YACL,KAAK,EAAE,yBAAyB;YAChC,MAAM,EAAE,2BAA2B;YACnC,KAAK,EAAE,yBAAyB;SAChC;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,+BAA+B;SACrC;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,OAAO,EAAE,WAAW;YACpB,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,uBAAuB;SAClC;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC/B,CACC,EACC,OAAO,EACP,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC5C,OAAO,CACN,KAAC,SAAS,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,KAC3D,KAAK,YAET,KAAC,SAAS,IAAC,KAAK,EAAE,QAAQ,YACxB,CAAC,KAAK,EAAE,EAAE,CAAC,CACX,8BACE,SAAS,IAAI,CACb,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,kBACvB,SAAS,GACJ,CACP,EACA,KAAK,EACL,OAAO,IAAI,CACX,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,kBACvB,OAAO,GACF,CACP,IACC,CACH,GACU,GACD,CACZ,CAAC;AACH,CAAC,CACD,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import { Icon } from \"@components/icon/icon\";\nimport { Slot, Slottable } from \"@components/slot/slot\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { forwardRef } from \"react\";\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\tvariant?: \"primary\" | \"secondary\" | \"destructive\";\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tasChild?: boolean;\n\ticonStart?: React.ReactNode;\n\ticonEnd?: React.ReactNode;\n};\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-sm sm:px-2 sm:py-1 sm:gap-2\",\n\t\tmedium: \"sm:text-base sm:px-4 sm:py-2 sm:gap-4\",\n\t\tlarge: \"sm:text-lg sm:px-6 sm:py-3 sm:gap-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-sm md:px-2 md:py-1 md:gap-2\",\n\t\tmedium: \"md:text-base md:px-4 md:py-2 md:gap-4\",\n\t\tlarge: \"md:text-lg md:px-6 md:py-3 md:gap-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-sm lg:px-2 lg:py-1 lg:gap-2\",\n\t\tmedium: \"lg:text-base lg:px-4 lg:py-2 lg:gap-4\",\n\t\tlarge: \"lg:text-lg lg:px-6 lg:py-3 lg:gap-6\",\n\t},\n};\n\nconst buttonStyles = getVariants({\n\tbase: \"flex w-fit cursor-pointer items-center justify-center gap-2 rounded border font-semibold\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary:\n\t\t\t\t\"border-transparent bg-gray-700 text-white hover:bg-gray-800 active:bg-gray-900\",\n\t\t\tsecondary:\n\t\t\t\t\"border-gray-700 bg-white text-gray-700 hover:bg-gray-50 active:bg-gray-100\",\n\t\t\tdestructive:\n\t\t\t\t\"border-transparent bg-red-500 text-white hover:bg-red-600 active:bg-red-700\",\n\t\t},\n\t\tsize: {\n\t\t\tsmall: \"gap-2 px-2 py-1 text-sm\",\n\t\t\tmedium: \"gap-3 px-4 py-2 text-base\",\n\t\t\tlarge: \"gap-4 px-6 py-3 text-lg\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"cursor-not-allowed opacity-50\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tvariant: \"secondary\",\n\t\t\tsize: \"medium\",\n\t\t\tclassName: \"test-compound-variant\",\n\t\t},\n\t],\n});\n\n/**\n * A flexible button component that supports variants, sizes, and icons\n * @param {Object} props - The props for the Button component\n * @param {'primary' | 'secondary'} [props.variant='primary'] - The visual style variant of the button\n * @param {'small' | 'medium' | 'large'} [props.size='medium'] - The size of the button\n * @param {boolean} [props.asChild] - Whether to render the button as a child component using Radix Slot\n * @param {React.ReactNode} [props.iconStart] - Icon element to display before the button content\n * @param {React.ReactNode} [props.iconEnd] - Icon element to display after the button content\n * @param {string} [props.className] - Additional CSS classes to apply\n * @param {boolean} [props.disabled] - Whether the button is disabled\n * @returns {React.ReactElement} The Button component\n * @example\n * // Basic usage\n * <Button>Click me</Button>\n *\n * // With variants and size\n * <Button variant=\"secondary\" size=\"large\">\n *   Large Secondary Button\n * </Button>\n *\n * // With icons\n * <Button iconStart={<SearchIcon />} iconEnd={<ArrowRightIcon />}>\n *   Search\n * </Button>\n *\n * // Disabled state\n * <Button disabled>Disabled Button</Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tasChild,\n\t\t\tchildren,\n\t\t\tvariant = \"primary\",\n\t\t\tsize = \"medium\",\n\t\t\tclassName,\n\t\t\tdisabled,\n\t\t\ticonStart,\n\t\t\ticonEnd,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"button\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={buttonStyles({ variant, size, disabled, className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<Slottable child={children}>\n\t\t\t\t\t{(child) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{iconStart && (\n\t\t\t\t\t\t\t\t<Icon size={size} asChild>\n\t\t\t\t\t\t\t\t\t{iconStart}\n\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{child}\n\t\t\t\t\t\t\t{iconEnd && (\n\t\t\t\t\t\t\t\t<Icon size={size} asChild>\n\t\t\t\t\t\t\t\t\t{iconEnd}\n\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Slottable>\n\t\t\t</Component>\n\t\t);\n\t},\n);\n\nButton.displayName = \"Button\";\n"]}
+{"version":3,"file":"button.js","sourceRoot":"/","sources":["components/button/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAUnC,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;CACD,CAAC;AAEF,MAAM,YAAY,GAAG,WAAW,CAAC;IAChC,IAAI,EAAE,0FAA0F;IAChG,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EACN,gFAAgF;YACjF,SAAS,EACR,4EAA4E;YAC7E,WAAW,EACV,6EAA6E;SAC9E;QACD,IAAI,EAAE;YACL,KAAK,EAAE,yBAAyB;YAChC,MAAM,EAAE,2BAA2B;YACnC,KAAK,EAAE,yBAAyB;SAChC;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,+BAA+B;SACrC;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,OAAO,EAAE,WAAW;YACpB,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,uBAAuB;SAClC;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC/B,CACC,EACC,OAAO,EACP,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC5C,OAAO,CACN,KAAC,SAAS,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,KAC3D,KAAK,YAET,KAAC,SAAS,IAAC,KAAK,EAAE,QAAQ,YACxB,CAAC,KAAK,EAAE,EAAE,CAAC,CACX,8BACE,SAAS,IAAI,CACb,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,kBACvB,SAAS,GACJ,CACP,EACA,KAAK,EACL,OAAO,IAAI,CACX,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,kBACvB,OAAO,GACF,CACP,IACC,CACH,GACU,GACD,CACZ,CAAC;AACH,CAAC,CACD,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import { Icon } from \"@components/icon/icon\";\nimport { Slot, Slottable } from \"@components/slot/slot\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { forwardRef } from \"react\";\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\tvariant?: \"primary\" | \"secondary\" | \"destructive\";\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tasChild?: boolean;\n\ticonStart?: React.ReactNode;\n\ticonEnd?: React.ReactNode;\n};\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-sm sm:px-2 sm:py-1 sm:gap-2\",\n\t\tmedium: \"sm:text-base sm:px-4 sm:py-2 sm:gap-4\",\n\t\tlarge: \"sm:text-lg sm:px-6 sm:py-3 sm:gap-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-sm md:px-2 md:py-1 md:gap-2\",\n\t\tmedium: \"md:text-base md:px-4 md:py-2 md:gap-4\",\n\t\tlarge: \"md:text-lg md:px-6 md:py-3 md:gap-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-sm lg:px-2 lg:py-1 lg:gap-2\",\n\t\tmedium: \"lg:text-base lg:px-4 lg:py-2 lg:gap-4\",\n\t\tlarge: \"lg:text-lg lg:px-6 lg:py-3 lg:gap-6\",\n\t},\n};\n\nconst buttonStyles = getVariants({\n\tbase: \"flex w-fit cursor-pointer items-center justify-center gap-2 rounded border font-semibold\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary:\n\t\t\t\t\"border-transparent bg-gray-700 text-white hover:bg-gray-800 active:bg-gray-900\",\n\t\t\tsecondary:\n\t\t\t\t\"border-gray-700 bg-white text-gray-700 hover:bg-gray-50 active:bg-gray-100\",\n\t\t\tdestructive:\n\t\t\t\t\"border-transparent bg-red-500 text-white hover:bg-red-600 active:bg-red-700\",\n\t\t},\n\t\tsize: {\n\t\t\tsmall: \"gap-2 px-2 py-1 text-sm\",\n\t\t\tmedium: \"gap-3 px-4 py-2 text-base\",\n\t\t\tlarge: \"gap-4 px-6 py-3 text-lg\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"cursor-not-allowed opacity-50\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tvariant: \"secondary\",\n\t\t\tsize: \"medium\",\n\t\t\tclassName: \"test-compound-variant\",\n\t\t},\n\t],\n});\n\n/**\n * A flexible button component that supports variants, sizes, and icons\n * @param {Object} props - The props for the Button component\n * @param {'primary' | 'secondary'} [props.variant='primary'] - The visual style variant of the button\n * @param {'small' | 'medium' | 'large'} [props.size='medium'] - The size of the button\n * @param {boolean} [props.asChild] - Whether to render the button as a child component using Radix Slot\n * @param {React.ReactNode} [props.iconStart] - Icon element to display before the button content\n * @param {React.ReactNode} [props.iconEnd] - Icon element to display after the button content\n * @param {string} [props.className] - Additional CSS classes to apply\n * @param {boolean} [props.disabled] - Whether the button is disabled\n * @returns {React.ReactElement} The Button component\n * @example\n * // Basic usage\n * <Button>Click me</Button>\n *\n * // With variants and size\n * <Button variant=\"secondary\" size=\"large\">\n *   Large Secondary Button\n * </Button>\n *\n * // With icons\n * <Button iconStart={<SearchIcon />} iconEnd={<ArrowRightIcon />}>\n *   Search\n * </Button>\n *\n * // Disabled state\n * <Button disabled>Disabled Button</Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tasChild,\n\t\t\tchildren,\n\t\t\tvariant = \"primary\",\n\t\t\tsize = \"medium\",\n\t\t\tclassName,\n\t\t\tdisabled,\n\t\t\ticonStart,\n\t\t\ticonEnd,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"button\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={buttonStyles({ variant, size, disabled, className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<Slottable child={children}>\n\t\t\t\t\t{(child) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{iconStart && (\n\t\t\t\t\t\t\t\t<Icon size={size} asChild>\n\t\t\t\t\t\t\t\t\t{iconStart}\n\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{child}\n\t\t\t\t\t\t\t{iconEnd && (\n\t\t\t\t\t\t\t\t<Icon size={size} asChild>\n\t\t\t\t\t\t\t\t\t{iconEnd}\n\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Slottable>\n\t\t\t</Component>\n\t\t);\n\t},\n);\n\nButton.displayName = \"Button\";\n"]}

package/dist/components/card/card.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "../slot/slot";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { getVariants } from "../../utilities/responsive/responsive";
 import { createContext, forwardRef, useContext } from "react";
 const CardContext = createContext(undefined);
 const useCardContext = () => {
@@ -33,15 +33,36 @@ export const CARD_SIZES = {
     },
 };
 const cardStyles = getVariants({
-    base: "flex flex-col rounded-lg border border-gray-200 bg-white shadow-md",
+    slots: {
+        root: "flex flex-col rounded-lg border border-gray-200 bg-white shadow-md",
+        header: "flex items-center justify-between border-gray-200 border-b",
+        content: "flex flex-col",
+        footer: "flex items-center justify-between border-gray-200 border-t",
+    },
     variants: {
         size: {
-            small: "gap-2 py-2",
-            medium: "gap-4 py-4",
-            large: "gap-6 py-6",
+            small: {
+                root: "gap-2 py-2",
+                header: "px-2 pb-2",
+                content: "gap-2 px-2",
+                footer: "px-2 pt-2",
+            },
+            medium: {
+                root: "gap-4 py-4",
+                header: "px-4 pb-4",
+                content: "gap-4 px-4",
+                footer: "px-4 pt-4",
+            },
+            large: {
+                root: "gap-6 py-6",
+                header: "px-6 pb-6",
+                content: "gap-6 px-6",
+                footer: "px-6 pt-6",
+            },
         },
     },
 });
+const { root, header, content, footer } = cardStyles;
 /**
  * Card component that provides a container with consistent styling and spacing.
  * Supports different sizes and can be used with asChild prop for composition.
@@ -57,7 +78,7 @@ const cardStyles = getVariants({
  */
 export const Card = forwardRef(({ className, size = "medium", asChild, ...props }, ref) => {
     const Component = asChild ? Slot : "div";
-    return (_jsx(CardContext.Provider, { value: { size }, children: _jsx(Component, { ref: ref, className: cardStyles({ className, size }), ...props }) }));
+    return (_jsx(CardContext.Provider, { value: { size }, children: _jsx(Component, { ref: ref, className: root({ className, size }), ...props }) }));
 });
 Card.displayName = "Card";
 export const CARD_HEADER_SIZES = {
@@ -82,16 +103,6 @@ export const CARD_HEADER_SIZES = {
         large: "xl:px-6 xl:pb-6",
     },
 };
-const cardHeaderStyles = getVariants({
-    base: "flex items-center justify-between border-gray-200 border-b",
-    variants: {
-        size: {
-            small: "px-2 pb-2",
-            medium: "px-4 pb-4",
-            large: "px-6 pb-6",
-        },
-    },
-});
 /**
  * Card Header component that provides a consistent header section for the Card.
  * Inherits size from parent Card component.
@@ -107,7 +118,7 @@ const cardHeaderStyles = getVariants({
 export const CardHeader = forwardRef(({ className, asChild, ...props }, ref) => {
     const { size } = useCardContext();
     const Component = asChild ? Slot : "div";
-    return (_jsx(Component, { ref: ref, className: cardHeaderStyles({ className, size }), ...props }));
+    return (_jsx(Component, { ref: ref, className: header({ className, size }), ...props }));
 });
 CardHeader.displayName = "CardHeader";
 export const CARD_CONTENT_SIZES = {
@@ -132,16 +143,6 @@ export const CARD_CONTENT_SIZES = {
         large: "xl:gap-6 xl:px-6",
     },
 };
-const cardContentStyles = getVariants({
-    base: "flex flex-col",
-    variants: {
-        size: {
-            small: "gap-2 px-2",
-            medium: "gap-4 px-4",
-            large: "gap-6 px-6",
-        },
-    },
-});
 /**
  * Card Content component that provides the main content area for the Card.
  * Inherits size from parent Card component.
@@ -156,7 +157,7 @@ const cardContentStyles = getVariants({
 export const CardContent = forwardRef(({ className, asChild, ...props }, ref) => {
     const { size } = useCardContext();
     const Component = asChild ? Slot : "div";
-    return (_jsx(Component, { ref: ref, className: cardContentStyles({ className, size }), ...props }));
+    return (_jsx(Component, { ref: ref, className: content({ className, size }), ...props }));
 });
 CardContent.displayName = "CardContent";
 export const CARD_FOOTER_SIZES = {
@@ -181,16 +182,6 @@ export const CARD_FOOTER_SIZES = {
         large: "xl:px-6 xl:pt-6",
     },
 };
-const cardFooterStyles = getVariants({
-    base: "flex items-center justify-between border-gray-200 border-t",
-    variants: {
-        size: {
-            small: "px-2 pt-2",
-            medium: "px-4 pt-4",
-            large: "px-6 pt-6",
-        },
-    },
-});
 /**
  * Card Footer component that provides a consistent footer section for the Card.
  * Inherits size from parent Card component.
@@ -206,7 +197,7 @@ const cardFooterStyles = getVariants({
 export const CardFooter = forwardRef(({ className, asChild, ...props }, ref) => {
     const { size } = useCardContext();
     const Component = asChild ? Slot : "div";
-    return (_jsx(Component, { ref: ref, className: cardFooterStyles({ className, size }), ...props }));
+    return (_jsx(Component, { ref: ref, className: footer({ className, size }), ...props }));
 });
 CardFooter.displayName = "CardFooter";
 //# sourceMappingURL=card.js.map

package/dist/components/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"/","sources":["components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { createContext, forwardRef, useContext } from \"react\";\n\n/**\n * Card Context\n */\n\ntype CardContextValue = Required<Pick<CardProps, \"size\">>;\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined);\n\nconst useCardContext = () => {\n\tconst context = useContext(CardContext);\n\tif (!context) {\n\t\tthrow new Error(\"Card components must be used within a Card\");\n\t}\n\treturn context;\n};\n\n/**\n * Card\n */\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tasChild?: boolean;\n};\n\nexport const CARD_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:gap-2 sm:py-2\",\n\t\tmedium: \"sm:gap-4 sm:py-4\",\n\t\tlarge: \"sm:gap-6 sm:py-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:gap-2 md:py-2\",\n\t\tmedium: \"md:gap-4 md:py-4\",\n\t\tlarge: \"md:gap-6 md:py-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:gap-2 lg:py-2\",\n\t\tmedium: \"lg:gap-4 lg:py-4\",\n\t\tlarge: \"lg:gap-6 lg:py-6\",\n\t},\n\txl: {\n\t\tsmall: \"xl:gap-2 xl:py-2\",\n\t\tmedium: \"xl:gap-4 xl:py-4\",\n\t\tlarge: \"xl:gap-6 xl:py-6\",\n\t},\n};\n\nconst cardStyles = getVariants({\n\tbase: \"flex flex-col rounded-lg border border-gray-200 bg-white shadow-md\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"gap-2 py-2\",\n\t\t\tmedium: \"gap-4 py-4\",\n\t\t\tlarge: \"gap-6 py-6\",\n\t\t},\n\t},\n});\n\n/**\n * Card component that provides a container with consistent styling and spacing.\n * Supports different sizes and can be used with asChild prop for composition.\n *\n * @example\n * ```tsx\n * <Card size=\"medium\">\n *   <CardHeader>Header</CardHeader>\n *   <CardContent>Content</CardContent>\n *   <CardFooter>Footer</CardFooter>\n * </Card>\n * ```\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n\t({ className, size = \"medium\", asChild, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<CardContext.Provider value={{ size }}>\n\t\t\t\t<Component\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cardStyles({ className, size })}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</CardContext.Provider>\n\t\t);\n\t},\n);\n\nCard.displayName = \"Card\";\n\n/**\n * Card Header\n */\n\nexport type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tasChild?: boolean;\n};\n\nexport const CARD_HEADER_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:px-2 sm:pb-2\",\n\t\tmedium: \"sm:px-4 sm:pb-4\",\n\t\tlarge: \"sm:px-6 sm:pb-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:px-2 md:pb-2\",\n\t\tmedium: \"md:px-4 md:pb-4\",\n\t\tlarge: \"md:px-6 md:pb-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:px-2 lg:pb-2\",\n\t\tmedium: \"lg:px-4 lg:pb-4\",\n\t\tlarge: \"lg:px-6 lg:pb-6\",\n\t},\n\txl: {\n\t\tsmall: \"xl:px-2 xl:pb-2\",\n\t\tmedium: \"xl:px-4 xl:pb-4\",\n\t\tlarge: \"xl:px-6 xl:pb-6\",\n\t},\n};\n\nconst cardHeaderStyles = getVariants({\n\tbase: \"flex items-center justify-between border-gray-200 border-b\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"px-2 pb-2\",\n\t\t\tmedium: \"px-4 pb-4\",\n\t\t\tlarge: \"px-6 pb-6\",\n\t\t},\n\t},\n});\n\n/**\n * Card Header component that provides a consistent header section for the Card.\n * Inherits size from parent Card component.\n *\n * @example\n * ```tsx\n * <CardHeader>\n *   <h2>Title</h2>\n *   <button>Action</button>\n * </CardHeader>\n * ```\n */\nexport const CardHeader = forwardRef<\n\tHTMLDivElement,\n\tOmit<CardHeaderProps, \"size\">\n>(({ className, asChild, ...props }, ref) => {\n\tconst { size } = useCardContext();\n\tconst Component = asChild ? Slot : \"div\";\n\treturn (\n\t\t<Component\n\t\t\tref={ref}\n\t\t\tclassName={cardHeaderStyles({ className, size })}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nCardHeader.displayName = \"CardHeader\";\n\n/**\n * Card Content\n */\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tasChild?: boolean;\n};\n\nexport const CARD_CONTENT_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:gap-2 sm:px-2\",\n\t\tmedium: \"sm:gap-4 sm:px-4\",\n\t\tlarge: \"sm:gap-6 sm:px-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:gap-2 md:px-2\",\n\t\tmedium: \"md:gap-4 md:px-4\",\n\t\tlarge: \"md:gap-6 md:px-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:gap-2 lg:px-2\",\n\t\tmedium: \"lg:gap-4 lg:px-4\",\n\t\tlarge: \"lg:gap-6 lg:px-6\",\n\t},\n\txl: {\n\t\tsmall: \"xl:gap-2 xl:px-2\",\n\t\tmedium: \"xl:gap-4 xl:px-4\",\n\t\tlarge: \"xl:gap-6 xl:px-6\",\n\t},\n};\n\nconst cardContentStyles = getVariants({\n\tbase: \"flex flex-col\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"gap-2 px-2\",\n\t\t\tmedium: \"gap-4 px-4\",\n\t\t\tlarge: \"gap-6 px-6\",\n\t\t},\n\t},\n});\n\n/**\n * Card Content component that provides the main content area for the Card.\n * Inherits size from parent Card component.\n *\n * @example\n * ```tsx\n * <CardContent>\n *   <p>Main content goes here</p>\n * </CardContent>\n * ```\n */\nexport const CardContent = forwardRef<\n\tHTMLDivElement,\n\tOmit<CardContentProps, \"size\">\n>(({ className, asChild, ...props }, ref) => {\n\tconst { size } = useCardContext();\n\tconst Component = asChild ? Slot : \"div\";\n\treturn (\n\t\t<Component\n\t\t\tref={ref}\n\t\t\tclassName={cardContentStyles({ className, size })}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nCardContent.displayName = \"CardContent\";\n\n/**\n * Card Footer\n */\n\nexport type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tasChild?: boolean;\n};\n\nexport const CARD_FOOTER_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:px-2 sm:pt-2\",\n\t\tmedium: \"sm:px-4 sm:pt-4\",\n\t\tlarge: \"sm:px-6 sm:pt-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:px-2 md:pt-2\",\n\t\tmedium: \"md:px-4 md:pt-4\",\n\t\tlarge: \"lg:px-6 lg:pt-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:px-2 lg:pt-2\",\n\t\tmedium: \"lg:px-4 lg:pt-4\",\n\t\tlarge: \"lg:px-6 lg:pt-6\",\n\t},\n\txl: {\n\t\tsmall: \"xl:px-2 xl:pt-2\",\n\t\tmedium: \"xl:px-4 xl:pt-4\",\n\t\tlarge: \"xl:px-6 xl:pt-6\",\n\t},\n};\n\nconst cardFooterStyles = getVariants({\n\tbase: \"flex items-center justify-between border-gray-200 border-t\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"px-2 pt-2\",\n\t\t\tmedium: \"px-4 pt-4\",\n\t\t\tlarge: \"px-6 pt-6\",\n\t\t},\n\t},\n});\n\n/**\n * Card Footer component that provides a consistent footer section for the Card.\n * Inherits size from parent Card component.\n *\n * @example\n * ```tsx\n * <CardFooter>\n *   <button>Cancel</button>\n *   <button>Submit</button>\n * </CardFooter>\n * ```\n */\nexport const CardFooter = forwardRef<\n\tHTMLDivElement,\n\tOmit<CardFooterProps, \"size\">\n>(({ className, asChild, ...props }, ref) => {\n\tconst { size } = useCardContext();\n\tconst Component = asChild ? Slot : \"div\";\n\treturn (\n\t\t<Component\n\t\t\tref={ref}\n\t\t\tclassName={cardFooterStyles({ className, size })}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nCardFooter.displayName = \"CardFooter\";\n"]}
+{"version":3,"file":"card.js","sourceRoot":"/","sources":["components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { createContext, forwardRef, useContext } from \"react\";\n\n/**\n * Card Context\n */\n\ntype CardContextValue = Required<Pick<CardProps, \"size\">>;\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined);\n\nconst useCardContext = () => {\n\tconst context = useContext(CardContext);\n\tif (!context) {\n\t\tthrow new Error(\"Card components must be used within a Card\");\n\t}\n\treturn context;\n};\n\n/**\n * Card\n */\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tasChild?: boolean;\n};\n\nexport const CARD_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:gap-2 sm:py-2\",\n\t\tmedium: \"sm:gap-4 sm:py-4\",\n\t\tlarge: \"sm:gap-6 sm:py-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:gap-2 md:py-2\",\n\t\tmedium: \"md:gap-4 md:py-4\",\n\t\tlarge: \"md:gap-6 md:py-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:gap-2 lg:py-2\",\n\t\tmedium: \"lg:gap-4 lg:py-4\",\n\t\tlarge: \"lg:gap-6 lg:py-6\",\n\t},\n\txl: {\n\t\tsmall: \"xl:gap-2 xl:py-2\",\n\t\tmedium: \"xl:gap-4 xl:py-4\",\n\t\tlarge: \"xl:gap-6 xl:py-6\",\n\t},\n};\n\nconst cardStyles = getVariants({\n\tslots: {\n\t\troot: \"flex flex-col rounded-lg border border-gray-200 bg-white shadow-md\",\n\t\theader: \"flex items-center justify-between border-gray-200 border-b\",\n\t\tcontent: \"flex flex-col\",\n\t\tfooter: \"flex items-center justify-between border-gray-200 border-t\",\n\t},\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: {\n\t\t\t\troot: \"gap-2 py-2\",\n\t\t\t\theader: \"px-2 pb-2\",\n\t\t\t\tcontent: \"gap-2 px-2\",\n\t\t\t\tfooter: \"px-2 pt-2\",\n\t\t\t},\n\t\t\tmedium: {\n\t\t\t\troot: \"gap-4 py-4\",\n\t\t\t\theader: \"px-4 pb-4\",\n\t\t\t\tcontent: \"gap-4 px-4\",\n\t\t\t\tfooter: \"px-4 pt-4\",\n\t\t\t},\n\t\t\tlarge: {\n\t\t\t\troot: \"gap-6 py-6\",\n\t\t\t\theader: \"px-6 pb-6\",\n\t\t\t\tcontent: \"gap-6 px-6\",\n\t\t\t\tfooter: \"px-6 pt-6\",\n\t\t\t},\n\t\t},\n\t},\n});\n\nconst { root, header, content, footer } = cardStyles;\n\n/**\n * Card component that provides a container with consistent styling and spacing.\n * Supports different sizes and can be used with asChild prop for composition.\n *\n * @example\n * ```tsx\n * <Card size=\"medium\">\n *   <CardHeader>Header</CardHeader>\n *   <CardContent>Content</CardContent>\n *   <CardFooter>Footer</CardFooter>\n * </Card>\n * ```\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n\t({ className, size = \"medium\", asChild, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<CardContext.Provider value={{ size }}>\n\t\t\t\t<Component ref={ref} className={root({ className, size })} {...props} />\n\t\t\t</CardContext.Provider>\n\t\t);\n\t},\n);\n\nCard.displayName = \"Card\";\n\n/**\n * Card Header\n */\n\nexport type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tasChild?: boolean;\n};\n\nexport const CARD_HEADER_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:px-2 sm:pb-2\",\n\t\tmedium: \"sm:px-4 sm:pb-4\",\n\t\tlarge: \"sm:px-6 sm:pb-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:px-2 md:pb-2\",\n\t\tmedium: \"md:px-4 md:pb-4\",\n\t\tlarge: \"md:px-6 md:pb-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:px-2 lg:pb-2\",\n\t\tmedium: \"lg:px-4 lg:pb-4\",\n\t\tlarge: \"lg:px-6 lg:pb-6\",\n\t},\n\txl: {\n\t\tsmall: \"xl:px-2 xl:pb-2\",\n\t\tmedium: \"xl:px-4 xl:pb-4\",\n\t\tlarge: \"xl:px-6 xl:pb-6\",\n\t},\n};\n\n/**\n * Card Header component that provides a consistent header section for the Card.\n * Inherits size from parent Card component.\n *\n * @example\n * ```tsx\n * <CardHeader>\n *   <h2>Title</h2>\n *   <button>Action</button>\n * </CardHeader>\n * ```\n */\nexport const CardHeader = forwardRef<\n\tHTMLDivElement,\n\tOmit<CardHeaderProps, \"size\">\n>(({ className, asChild, ...props }, ref) => {\n\tconst { size } = useCardContext();\n\tconst Component = asChild ? Slot : \"div\";\n\treturn (\n\t\t<Component ref={ref} className={header({ className, size })} {...props} />\n\t);\n});\n\nCardHeader.displayName = \"CardHeader\";\n\n/**\n * Card Content\n */\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tasChild?: boolean;\n};\n\nexport const CARD_CONTENT_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:gap-2 sm:px-2\",\n\t\tmedium: \"sm:gap-4 sm:px-4\",\n\t\tlarge: \"sm:gap-6 sm:px-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:gap-2 md:px-2\",\n\t\tmedium: \"md:gap-4 md:px-4\",\n\t\tlarge: \"md:gap-6 md:px-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:gap-2 lg:px-2\",\n\t\tmedium: \"lg:gap-4 lg:px-4\",\n\t\tlarge: \"lg:gap-6 lg:px-6\",\n\t},\n\txl: {\n\t\tsmall: \"xl:gap-2 xl:px-2\",\n\t\tmedium: \"xl:gap-4 xl:px-4\",\n\t\tlarge: \"xl:gap-6 xl:px-6\",\n\t},\n};\n\n/**\n * Card Content component that provides the main content area for the Card.\n * Inherits size from parent Card component.\n *\n * @example\n * ```tsx\n * <CardContent>\n *   <p>Main content goes here</p>\n * </CardContent>\n * ```\n */\nexport const CardContent = forwardRef<\n\tHTMLDivElement,\n\tOmit<CardContentProps, \"size\">\n>(({ className, asChild, ...props }, ref) => {\n\tconst { size } = useCardContext();\n\tconst Component = asChild ? Slot : \"div\";\n\treturn (\n\t\t<Component ref={ref} className={content({ className, size })} {...props} />\n\t);\n});\n\nCardContent.displayName = \"CardContent\";\n\n/**\n * Card Footer\n */\n\nexport type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tasChild?: boolean;\n};\n\nexport const CARD_FOOTER_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:px-2 sm:pt-2\",\n\t\tmedium: \"sm:px-4 sm:pt-4\",\n\t\tlarge: \"sm:px-6 sm:pt-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:px-2 md:pt-2\",\n\t\tmedium: \"md:px-4 md:pt-4\",\n\t\tlarge: \"lg:px-6 lg:pt-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:px-2 lg:pt-2\",\n\t\tmedium: \"lg:px-4 lg:pt-4\",\n\t\tlarge: \"lg:px-6 lg:pt-6\",\n\t},\n\txl: {\n\t\tsmall: \"xl:px-2 xl:pt-2\",\n\t\tmedium: \"xl:px-4 xl:pt-4\",\n\t\tlarge: \"xl:px-6 xl:pt-6\",\n\t},\n};\n\n/**\n * Card Footer component that provides a consistent footer section for the Card.\n * Inherits size from parent Card component.\n *\n * @example\n * ```tsx\n * <CardFooter>\n *   <button>Cancel</button>\n *   <button>Submit</button>\n * </CardFooter>\n * ```\n */\nexport const CardFooter = forwardRef<\n\tHTMLDivElement,\n\tOmit<CardFooterProps, \"size\">\n>(({ className, asChild, ...props }, ref) => {\n\tconst { size } = useCardContext();\n\tconst Component = asChild ? Slot : \"div\";\n\treturn (\n\t\t<Component ref={ref} className={footer({ className, size })} {...props} />\n\t);\n});\n\nCardFooter.displayName = \"CardFooter\";\n"]}

package/dist/components/checkbox/checkbox.js

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext } from "../form-field/form-field-context";
 import { Icon } from "../icon/icon";
 import { CheckIcon } from "@radix-ui/react-icons";
-import { getVariants } from "../../utilities/get-variants/get-variants";
-import { mapResponsiveValue, } from "../../utilities/responsive/responsive";
+import { getVariants, mapResponsiveValue, } from "../../utilities/responsive/responsive";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { forwardRef, } from "react";
 export const SIZES = {

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,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EACN,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 { getVariants } from \"@utilities/get-variants/get-variants\";\nimport {\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,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"]}

package/dist/components/drawer/drawer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Cross1Icon } from "@radix-ui/react-icons";
 import { cn } from "../../utilities/cn/cn";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { getVariants } from "../../utilities/responsive/responsive";
 import { Dialog as RadixDialog } from "radix-ui";
 import { createContext, forwardRef, useContext, useMemo, } from "react";
 const DrawerContext = createContext(undefined);

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/get-variants/get-variants\";\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 { 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"]}

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

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { FormHelper } from "../form-helper/form-helper";
 import { Label } from "../label/label";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { getVariants } from "../../utilities/responsive/responsive";
 import { Children, forwardRef, isValidElement, } from "react";
 import { FormFieldProvider } from "./form-field-context";
 const formFieldStyles = getVariants({

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

@@ -1 +1 @@
-{"version":3,"file":"form-field.js","sourceRoot":"/","sources":["components/form-field/form-field.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EACN,QAAQ,EAER,UAAU,EACV,cAAc,GACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASzD,MAAM,eAAe,GAAG,WAAW,CAAC;IACnC,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE;QACT,WAAW,EAAE;YACZ,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,UAAU;SACpB;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAClC,CACC,EACC,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,UAAU,EACxB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAC/B,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CACxD,CAAC;IACF,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CACpC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,CAC7D,CAAC;IACF,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAC/B,CAAC,KAAK,EAAE,EAAE,CACT,cAAc,CAAC,KAAK,CAAC;QACrB,KAAK,CAAC,IAAI,KAAK,KAAK;QACpB,KAAK,CAAC,IAAI,KAAK,UAAU,CAC1B,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QACtB,OAAO,CAAC,IAAI,CACX,gEAAgE,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,KAAC,iBAAiB,IACjB,KAAK,EAAE;YACN,QAAQ;YACR,QAAQ;YACR,KAAK;SACL,YAED,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,KAClD,KAAK,YAER,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,CAC/B,8BACE,KAAK,EACN,eAAK,SAAS,EAAC,eAAe,aAC5B,KAAK,EACL,UAAU,IACN,IACJ,CACH,CAAC,CAAC,CAAC,CACH,8BACE,KAAK,EACL,KAAK,EACL,UAAU,IACT,CACH,GACI,GACa,CACpB,CAAC;AACH,CAAC,CACD,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import { FormHelper } from \"@components/form-helper/form-helper\";\nimport { Label } from \"@components/label/label\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport {\n\tChildren,\n\ttype ComponentPropsWithoutRef,\n\tforwardRef,\n\tisValidElement,\n} from \"react\";\nimport { FormFieldProvider } from \"./form-field-context\";\n\nexport type FormFieldProps = ComponentPropsWithoutRef<\"div\"> & {\n\torientation?: \"horizontal\" | \"vertical\";\n\tdisabled?: boolean;\n\trequired?: boolean;\n\terror?: boolean;\n};\n\nconst formFieldStyles = getVariants({\n\tbase: \"flex gap-2\",\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"flex-row items-start\",\n\t\t\tvertical: \"flex-col\",\n\t\t},\n\t},\n});\n\n/**\n * A component that displays a form field. Should be used as a parent of a Label, an input element and a FormHelper component.\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 const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\torientation = \"vertical\",\n\t\t\tdisabled,\n\t\t\trequired,\n\t\t\terror,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst childElements = Children.toArray(children);\n\t\tconst label = childElements.find(\n\t\t\t(child) => isValidElement(child) && child.type === Label,\n\t\t);\n\t\tconst helperText = childElements.find(\n\t\t\t(child) => isValidElement(child) && child.type === FormHelper,\n\t\t);\n\t\tconst input = childElements.find(\n\t\t\t(child) =>\n\t\t\t\tisValidElement(child) &&\n\t\t\t\tchild.type !== Label &&\n\t\t\t\tchild.type !== FormHelper,\n\t\t);\n\n\t\tif (!label || !input) {\n\t\t\tconsole.warn(\n\t\t\t\t\"FormField requires both Label and Input components as children\",\n\t\t\t);\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<FormFieldProvider\n\t\t\t\tvalue={{\n\t\t\t\t\tdisabled,\n\t\t\t\t\trequired,\n\t\t\t\t\terror,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={formFieldStyles({ orientation, className })}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{orientation === \"horizontal\" ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{input}\n\t\t\t\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t{helperText}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t{input}\n\t\t\t\t\t\t\t{helperText}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</FormFieldProvider>\n\t\t);\n\t},\n);\n\nFormField.displayName = \"FormField\";\n"]}
+{"version":3,"file":"form-field.js","sourceRoot":"/","sources":["components/form-field/form-field.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EACN,QAAQ,EAER,UAAU,EACV,cAAc,GACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASzD,MAAM,eAAe,GAAG,WAAW,CAAC;IACnC,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE;QACT,WAAW,EAAE;YACZ,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,UAAU;SACpB;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAClC,CACC,EACC,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,UAAU,EACxB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAC/B,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CACxD,CAAC;IACF,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CACpC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,CAC7D,CAAC;IACF,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAC/B,CAAC,KAAK,EAAE,EAAE,CACT,cAAc,CAAC,KAAK,CAAC;QACrB,KAAK,CAAC,IAAI,KAAK,KAAK;QACpB,KAAK,CAAC,IAAI,KAAK,UAAU,CAC1B,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QACtB,OAAO,CAAC,IAAI,CACX,gEAAgE,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,KAAC,iBAAiB,IACjB,KAAK,EAAE;YACN,QAAQ;YACR,QAAQ;YACR,KAAK;SACL,YAED,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,KAClD,KAAK,YAER,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,CAC/B,8BACE,KAAK,EACN,eAAK,SAAS,EAAC,eAAe,aAC5B,KAAK,EACL,UAAU,IACN,IACJ,CACH,CAAC,CAAC,CAAC,CACH,8BACE,KAAK,EACL,KAAK,EACL,UAAU,IACT,CACH,GACI,GACa,CACpB,CAAC;AACH,CAAC,CACD,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import { FormHelper } from \"@components/form-helper/form-helper\";\nimport { Label } from \"@components/label/label\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport {\n\tChildren,\n\ttype ComponentPropsWithoutRef,\n\tforwardRef,\n\tisValidElement,\n} from \"react\";\nimport { FormFieldProvider } from \"./form-field-context\";\n\nexport type FormFieldProps = ComponentPropsWithoutRef<\"div\"> & {\n\torientation?: \"horizontal\" | \"vertical\";\n\tdisabled?: boolean;\n\trequired?: boolean;\n\terror?: boolean;\n};\n\nconst formFieldStyles = getVariants({\n\tbase: \"flex gap-2\",\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"flex-row items-start\",\n\t\t\tvertical: \"flex-col\",\n\t\t},\n\t},\n});\n\n/**\n * A component that displays a form field. Should be used as a parent of a Label, an input element and a FormHelper component.\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 const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\torientation = \"vertical\",\n\t\t\tdisabled,\n\t\t\trequired,\n\t\t\terror,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst childElements = Children.toArray(children);\n\t\tconst label = childElements.find(\n\t\t\t(child) => isValidElement(child) && child.type === Label,\n\t\t);\n\t\tconst helperText = childElements.find(\n\t\t\t(child) => isValidElement(child) && child.type === FormHelper,\n\t\t);\n\t\tconst input = childElements.find(\n\t\t\t(child) =>\n\t\t\t\tisValidElement(child) &&\n\t\t\t\tchild.type !== Label &&\n\t\t\t\tchild.type !== FormHelper,\n\t\t);\n\n\t\tif (!label || !input) {\n\t\t\tconsole.warn(\n\t\t\t\t\"FormField requires both Label and Input components as children\",\n\t\t\t);\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<FormFieldProvider\n\t\t\t\tvalue={{\n\t\t\t\t\tdisabled,\n\t\t\t\t\trequired,\n\t\t\t\t\terror,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={formFieldStyles({ orientation, className })}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{orientation === \"horizontal\" ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{input}\n\t\t\t\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t{helperText}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t{input}\n\t\t\t\t\t\t\t{helperText}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</FormFieldProvider>\n\t\t);\n\t},\n);\n\nFormField.displayName = \"FormField\";\n"]}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext } from "../form-field/form-field-context";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { getVariants } from "../../utilities/responsive/responsive";
 import { forwardRef } from "react";
 const formHelperStyles = getVariants({
     base: "text-gray-500 text-sm",

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,sCAAsC,CAAC;AACnE,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAOlE,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,CAAC,MAAM,UAAU,GAAG,UAAU,CACnC,CACC,EACC,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,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,CACD,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nexport type FormHelperProps = ComponentPropsWithoutRef<\"div\"> & {\n\terror?: boolean;\n\tdisabled?: boolean;\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 const FormHelper = forwardRef<HTMLDivElement, FormHelperProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\terror: initialError,\n\t\t\tdisabled: initialDisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { error, disabled } = useFormContext({\n\t\t\terror: initialError,\n\t\t\tdisabled: initialDisabled,\n\t\t});\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={formHelperStyles({ error, disabled, className })}\n\t\t\t\trole={error ? \"alert\" : \"status\"}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\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;AAC/D,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAOlE,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,CAAC,MAAM,UAAU,GAAG,UAAU,CACnC,CACC,EACC,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,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,CACD,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nexport type FormHelperProps = ComponentPropsWithoutRef<\"div\"> & {\n\terror?: boolean;\n\tdisabled?: boolean;\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 const FormHelper = forwardRef<HTMLDivElement, FormHelperProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\terror: initialError,\n\t\t\tdisabled: initialDisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { error, disabled } = useFormContext({\n\t\t\terror: initialError,\n\t\t\tdisabled: initialDisabled,\n\t\t});\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={formHelperStyles({ error, disabled, className })}\n\t\t\t\trole={error ? \"alert\" : \"status\"}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\n"]}

package/dist/components/icon/icon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "../slot/slot";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { getVariants } from "../../utilities/responsive/responsive";
 import { forwardRef } from "react";
 export const SIZES = {
     sm: {

package/dist/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"/","sources":["components/icon/icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOnC,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,UAAU,GAAG,WAAW,CAAC;IAC9B,IAAI,EAAE,2BAA2B;IACjC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SAChB;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACpC,OAAO,CACN,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,GAAI,CACzE,CAAC;AACH,CAAC,CACD,CAAC","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { forwardRef } from \"react\";\n\nexport type IconProps = React.SVGProps<SVGSVGElement> & {\n\tasChild?: boolean;\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-6 sm:w-6\",\n\t\tlarge: \"sm:h-8 sm:w-8\",\n\t},\n\tmd: {\n\t\tsmall: \"md:h-4 md:w-4\",\n\t\tmedium: \"md:h-6 md:w-6\",\n\t\tlarge: \"md:h-8 md:w-8\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:h-4 lg:w-4\",\n\t\tmedium: \"lg:h-6 lg:w-6\",\n\t\tlarge: \"lg:h-8 lg:w-8\",\n\t},\n\txl: {\n\t\tsmall: \"xl:h-4 xl:w-4\",\n\t\tmedium: \"xl:h-6 xl:w-6\",\n\t\tlarge: \"xl:h-8 xl:w-8\",\n\t},\n};\n\nconst iconStyles = getVariants({\n\tbase: \"fill-current text-current\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"h-4 w-4\",\n\t\t\tmedium: \"h-6 w-6\",\n\t\t\tlarge: \"h-8 w-8\",\n\t\t},\n\t},\n});\n\n/**\n * A flexible icon component that serves as a wrapper for SVG icons.\n * Must be used with asChild={true} to render the actual icon component.\n *\n * @example\n * // Correct usage\n * <Icon asChild size=\"medium\">\n *   <HomeIcon />\n * </Icon>\n *\n * @example\n * // With different sizes\n * <Icon asChild size=\"small\">\n *   <UserIcon />\n * </Icon>\n *\n * @example\n * // With custom className\n * <Icon asChild className=\"text-blue-500\">\n *   <SettingsIcon />\n * </Icon>\n *\n * @param {boolean} [props.asChild] - Should always be true when using this component\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the icon\n * @param {string} [props.className] - Additional CSS classes to apply\n */\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(\n\t({ className, size = \"medium\", asChild, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"svg\";\n\t\treturn (\n\t\t\t<Comp ref={ref} className={iconStyles({ size, className })} {...props} />\n\t\t);\n\t},\n);\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"/","sources":["components/icon/icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOnC,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,UAAU,GAAG,WAAW,CAAC;IAC9B,IAAI,EAAE,2BAA2B;IACjC,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SAChB;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACpC,OAAO,CACN,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,GAAI,CACzE,CAAC;AACH,CAAC,CACD,CAAC","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { forwardRef } from \"react\";\n\nexport type IconProps = React.SVGProps<SVGSVGElement> & {\n\tasChild?: boolean;\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-6 sm:w-6\",\n\t\tlarge: \"sm:h-8 sm:w-8\",\n\t},\n\tmd: {\n\t\tsmall: \"md:h-4 md:w-4\",\n\t\tmedium: \"md:h-6 md:w-6\",\n\t\tlarge: \"md:h-8 md:w-8\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:h-4 lg:w-4\",\n\t\tmedium: \"lg:h-6 lg:w-6\",\n\t\tlarge: \"lg:h-8 lg:w-8\",\n\t},\n\txl: {\n\t\tsmall: \"xl:h-4 xl:w-4\",\n\t\tmedium: \"xl:h-6 xl:w-6\",\n\t\tlarge: \"xl:h-8 xl:w-8\",\n\t},\n};\n\nconst iconStyles = getVariants({\n\tbase: \"fill-current text-current\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"h-4 w-4\",\n\t\t\tmedium: \"h-6 w-6\",\n\t\t\tlarge: \"h-8 w-8\",\n\t\t},\n\t},\n});\n\n/**\n * A flexible icon component that serves as a wrapper for SVG icons.\n * Must be used with asChild={true} to render the actual icon component.\n *\n * @example\n * // Correct usage\n * <Icon asChild size=\"medium\">\n *   <HomeIcon />\n * </Icon>\n *\n * @example\n * // With different sizes\n * <Icon asChild size=\"small\">\n *   <UserIcon />\n * </Icon>\n *\n * @example\n * // With custom className\n * <Icon asChild className=\"text-blue-500\">\n *   <SettingsIcon />\n * </Icon>\n *\n * @param {boolean} [props.asChild] - Should always be true when using this component\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the icon\n * @param {string} [props.className] - Additional CSS classes to apply\n */\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(\n\t({ className, size = \"medium\", asChild, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"svg\";\n\t\treturn (\n\t\t\t<Comp ref={ref} className={iconStyles({ size, className })} {...props} />\n\t\t);\n\t},\n);\n"]}

package/dist/components/input/input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext } from "../form-field/form-field-context";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { getVariants } from "../../utilities/responsive/responsive";
 import { forwardRef } from "react";
 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",

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,sCAAsC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,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,MAAM,KAAK,GAAG,UAAU,CACvB,CACC,EACC,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE,YAAY,EACnB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,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,CACD,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport { forwardRef } from \"react\";\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n\terror?: boolean;\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 */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t\terror: initialError,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { disabled, required, error } = useFormContext({\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t\terror: initialError,\n\t\t});\n\t\treturn (\n\t\t\t<input\n\t\t\t\tclassName={inputStyles({ disabled, error, className })}\n\t\t\t\tdisabled={disabled}\n\t\t\t\trequired={required}\n\t\t\t\taria-invalid={error}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"Input\";\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;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,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,MAAM,KAAK,GAAG,UAAU,CACvB,CACC,EACC,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE,YAAY,EACnB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,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,CACD,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { forwardRef } from \"react\";\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n\terror?: boolean;\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 */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t\terror: initialError,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { disabled, required, error } = useFormContext({\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t\terror: initialError,\n\t\t});\n\t\treturn (\n\t\t\t<input\n\t\t\t\tclassName={inputStyles({ disabled, error, className })}\n\t\t\t\tdisabled={disabled}\n\t\t\t\trequired={required}\n\t\t\t\taria-invalid={error}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n"]}

package/dist/components/popover/popover.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from "../icon/icon";
 import { Cross1Icon } from "@radix-ui/react-icons";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { cn } from "../../utilities/cn/cn";
 import { Popover as RadixPopover } from "radix-ui";
 import { createContext, forwardRef, useContext, useMemo, } from "react";
 /**
@@ -43,10 +43,6 @@ const Popover = ({ children, showArrow = true, closeButtonAriaLabel = "Close", s
     return (_jsx(PopoverContext.Provider, { value: contextValue, children: _jsx(RadixPopover.Root, { ...props, children: children }) }));
 };
 const PopoverTrigger = RadixPopover.Trigger;
-const popoverContentStyles = getVariants({
-    base: "relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md",
-    variants: {},
-});
 /**
  * Popover Content
  */
@@ -63,7 +59,7 @@ const popoverContentStyles = getVariants({
  */
 const PopoverContent = forwardRef(({ children, className, sideOffset = 4, ...props }, ref) => {
     const { showArrow, closeButtonAriaLabel, side, showCloseButton } = usePopoverContext();
-    return (_jsxs(RadixPopover.Content, { className: popoverContentStyles({ className }), sideOffset: sideOffset, side: side, ...props, ref: ref, children: [showCloseButton && (_jsx(PopoverClose, { className: "absolute top-4 right-4", "aria-label": closeButtonAriaLabel, children: _jsx(Icon, { asChild: true, size: "small", children: _jsx(Cross1Icon, {}) }) })), children, showArrow && _jsx(RadixPopover.Arrow, { className: "fill-gray-700" })] }));
+    return (_jsxs(RadixPopover.Content, { className: cn("relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md", className), sideOffset: sideOffset, side: side, ...props, ref: ref, children: [showCloseButton && (_jsx(PopoverClose, { className: "absolute top-4 right-4", "aria-label": closeButtonAriaLabel, children: _jsx(Icon, { asChild: true, size: "small", children: _jsx(Cross1Icon, {}) }) })), children, showArrow && _jsx(RadixPopover.Arrow, { className: "fill-gray-700" })] }));
 });
 /**
  * Popover Close

package/dist/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"/","sources":["components/popover/popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAEN,aAAa,EACb,UAAU,EACV,UAAU,EACV,OAAO,GACP,MAAM,OAAO,CAAC;AAEf;;GAEG;AAEH,MAAM,cAAc,GAAG,aAAa,CAA2B,SAAS,CAAC,CAAC;AAE1E,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,OAAO,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACrE,CAAC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAaF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,OAAO,GAAG,CAAC,EAChB,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,oBAAoB,GAAG,OAAO,EAC9B,eAAe,GAAG,IAAI,EACtB,IAAI,EACJ,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,YAAY,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACN,SAAS;QACT,oBAAoB;QACpB,IAAI;QACJ,eAAe;KACf,CAAC,EACF,CAAC,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,eAAe,CAAC,CACxD,CAAC;IACF,OAAO,CACN,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC3C,KAAC,YAAY,CAAC,IAAI,OAAK,KAAK,YAAG,QAAQ,GAAqB,GACnC,CAC1B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC;AAO5C,MAAM,oBAAoB,GAAG,WAAW,CAAC;IACxC,IAAI,EAAE,sFAAsF;IAC5F,QAAQ,EAAE,EAAE;CACZ,CAAC,CAAC;AAEH;;GAEG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,cAAc,GAAG,UAAU,CAG/B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5D,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,eAAe,EAAE,GAC/D,iBAAiB,EAAE,CAAC;IACrB,OAAO,CACN,MAAC,YAAY,CAAC,OAAO,IACpB,SAAS,EAAE,oBAAoB,CAAC,EAAE,SAAS,EAAE,CAAC,EAC9C,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,KACN,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,eAAe,IAAI,CACnB,KAAC,YAAY,IACZ,SAAS,EAAC,wBAAwB,gBACtB,oBAAoB,YAEhC,KAAC,IAAI,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,YACzB,KAAC,UAAU,KAAG,GACR,GACO,CACf,EACA,QAAQ,EACR,SAAS,IAAI,KAAC,YAAY,CAAC,KAAK,IAAC,SAAS,EAAC,eAAe,GAAG,IACxC,CACvB,CAAC;AACH,CAAC,CAAC,CAAC;AAEH;;GAEG;AAEH,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,CAAC;AAExC;;GAEG;AAEH,MAAM,aAAa,GAAG,YAAY,CAAC,MAAM,CAAC;AAE1C;;GAEG;AAEH,MAAM,aAAa,GAAG,YAAY,CAAC,MAAM,CAAC;AAE1C,OAAO,EACN,OAAO,EACP,cAAc,EACd,cAAc,EACd,YAAY,EACZ,aAAa,EACb,aAAa,GACb,CAAC","sourcesContent":["import { Icon } from \"@components/icon/icon\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport {\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\n\n/**\n * Popover Context\n */\n\nconst PopoverContext = createContext<PopoverProps | undefined>(undefined);\n\nconst usePopoverContext = () => {\n\tconst context = useContext(PopoverContext);\n\tif (!context) {\n\t\tthrow new Error(\"Popover components must be used within a Popover\");\n\t}\n\treturn context;\n};\n\n/**\n * Popover\n */\n\nexport type PopoverProps = {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n\tshowCloseButton?: boolean;\n} & RadixPopover.PopoverProps &\n\tPick<RadixPopover.PopoverContentProps, \"side\">;\n\n/**\n * Popover component that provides a popover container with a trigger and content.\n *\n * @param {boolean} [props.showArrow=true] - Whether to show the arrow pointing to the trigger\n * @param {string} [props.closeButtonAriaLabel=\"Close\"] - Aria label for the close button\n * @param {boolean} [props.showCloseButton=true] - Whether to show the close button\n * @param {RadixPopover.PopoverContentProps[\"side\"]} [props.side] - The preferred side to show the popover\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger>Open Popover</PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content goes here</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nconst Popover = ({\n\tchildren,\n\tshowArrow = true,\n\tcloseButtonAriaLabel = \"Close\",\n\tshowCloseButton = true,\n\tside,\n\t...props\n}: PopoverProps) => {\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\tshowArrow,\n\t\t\tcloseButtonAriaLabel,\n\t\t\tside,\n\t\t\tshowCloseButton,\n\t\t}),\n\t\t[showArrow, closeButtonAriaLabel, side, showCloseButton],\n\t);\n\treturn (\n\t\t<PopoverContext.Provider value={contextValue}>\n\t\t\t<RadixPopover.Root {...props}>{children}</RadixPopover.Root>\n\t\t</PopoverContext.Provider>\n\t);\n};\n\nconst PopoverTrigger = RadixPopover.Trigger;\n\nexport type PopoverContentProps = RadixPopover.PopoverContentProps & {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n};\n\nconst popoverContentStyles = getVariants({\n\tbase: \"relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md\",\n\tvariants: {},\n});\n\n/**\n * Popover Content\n */\n\n/**\n * Popover Content component that provides the content area for the Popover.\n * Inherits size from parent Popover component.\n *\n * @example\n * ```tsx\n * <PopoverContent>\n *   <p>Popover content goes here</p>\n * </PopoverContent>\n * ```\n */\nconst PopoverContent = forwardRef<\n\tComponentRef<typeof RadixPopover.Content>,\n\tPopoverContentProps\n>(({ children, className, sideOffset = 4, ...props }, ref) => {\n\tconst { showArrow, closeButtonAriaLabel, side, showCloseButton } =\n\t\tusePopoverContext();\n\treturn (\n\t\t<RadixPopover.Content\n\t\t\tclassName={popoverContentStyles({ className })}\n\t\t\tsideOffset={sideOffset}\n\t\t\tside={side}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{showCloseButton && (\n\t\t\t\t<PopoverClose\n\t\t\t\t\tclassName=\"absolute top-4 right-4\"\n\t\t\t\t\taria-label={closeButtonAriaLabel}\n\t\t\t\t>\n\t\t\t\t\t<Icon asChild size=\"small\">\n\t\t\t\t\t\t<Cross1Icon />\n\t\t\t\t\t</Icon>\n\t\t\t\t</PopoverClose>\n\t\t\t)}\n\t\t\t{children}\n\t\t\t{showArrow && <RadixPopover.Arrow className=\"fill-gray-700\" />}\n\t\t</RadixPopover.Content>\n\t);\n});\n\n/**\n * Popover Close\n */\n\nconst PopoverClose = RadixPopover.Close;\n\n/**\n * Popover Portal\n */\n\nconst PopoverPortal = RadixPopover.Portal;\n\n/**\n * Popover Anchor\n */\n\nconst PopoverAnchor = RadixPopover.Anchor;\n\nexport {\n\tPopover,\n\tPopoverTrigger,\n\tPopoverContent,\n\tPopoverClose,\n\tPopoverPortal,\n\tPopoverAnchor,\n};\n"]}
+{"version":3,"file":"popover.js","sourceRoot":"/","sources":["components/popover/popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAEN,aAAa,EACb,UAAU,EACV,UAAU,EACV,OAAO,GACP,MAAM,OAAO,CAAC;AAEf;;GAEG;AAEH,MAAM,cAAc,GAAG,aAAa,CAA2B,SAAS,CAAC,CAAC;AAE1E,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,OAAO,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACrE,CAAC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAaF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,OAAO,GAAG,CAAC,EAChB,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,oBAAoB,GAAG,OAAO,EAC9B,eAAe,GAAG,IAAI,EACtB,IAAI,EACJ,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,YAAY,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACN,SAAS;QACT,oBAAoB;QACpB,IAAI;QACJ,eAAe;KACf,CAAC,EACF,CAAC,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,eAAe,CAAC,CACxD,CAAC;IACF,OAAO,CACN,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC3C,KAAC,YAAY,CAAC,IAAI,OAAK,KAAK,YAAG,QAAQ,GAAqB,GACnC,CAC1B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC;AAO5C;;GAEG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,cAAc,GAAG,UAAU,CAG/B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5D,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,eAAe,EAAE,GAC/D,iBAAiB,EAAE,CAAC;IACrB,OAAO,CACN,MAAC,YAAY,CAAC,OAAO,IACpB,SAAS,EAAE,EAAE,CACZ,sFAAsF,EACtF,SAAS,CACT,EACD,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,KACN,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,eAAe,IAAI,CACnB,KAAC,YAAY,IACZ,SAAS,EAAC,wBAAwB,gBACtB,oBAAoB,YAEhC,KAAC,IAAI,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,YACzB,KAAC,UAAU,KAAG,GACR,GACO,CACf,EACA,QAAQ,EACR,SAAS,IAAI,KAAC,YAAY,CAAC,KAAK,IAAC,SAAS,EAAC,eAAe,GAAG,IACxC,CACvB,CAAC;AACH,CAAC,CAAC,CAAC;AAEH;;GAEG;AAEH,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,CAAC;AAExC;;GAEG;AAEH,MAAM,aAAa,GAAG,YAAY,CAAC,MAAM,CAAC;AAE1C;;GAEG;AAEH,MAAM,aAAa,GAAG,YAAY,CAAC,MAAM,CAAC;AAE1C,OAAO,EACN,OAAO,EACP,cAAc,EACd,cAAc,EACd,YAAY,EACZ,aAAa,EACb,aAAa,GACb,CAAC","sourcesContent":["import { Icon } from \"@components/icon/icon\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport {\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\n\n/**\n * Popover Context\n */\n\nconst PopoverContext = createContext<PopoverProps | undefined>(undefined);\n\nconst usePopoverContext = () => {\n\tconst context = useContext(PopoverContext);\n\tif (!context) {\n\t\tthrow new Error(\"Popover components must be used within a Popover\");\n\t}\n\treturn context;\n};\n\n/**\n * Popover\n */\n\nexport type PopoverProps = {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n\tshowCloseButton?: boolean;\n} & RadixPopover.PopoverProps &\n\tPick<RadixPopover.PopoverContentProps, \"side\">;\n\n/**\n * Popover component that provides a popover container with a trigger and content.\n *\n * @param {boolean} [props.showArrow=true] - Whether to show the arrow pointing to the trigger\n * @param {string} [props.closeButtonAriaLabel=\"Close\"] - Aria label for the close button\n * @param {boolean} [props.showCloseButton=true] - Whether to show the close button\n * @param {RadixPopover.PopoverContentProps[\"side\"]} [props.side] - The preferred side to show the popover\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger>Open Popover</PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content goes here</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nconst Popover = ({\n\tchildren,\n\tshowArrow = true,\n\tcloseButtonAriaLabel = \"Close\",\n\tshowCloseButton = true,\n\tside,\n\t...props\n}: PopoverProps) => {\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\tshowArrow,\n\t\t\tcloseButtonAriaLabel,\n\t\t\tside,\n\t\t\tshowCloseButton,\n\t\t}),\n\t\t[showArrow, closeButtonAriaLabel, side, showCloseButton],\n\t);\n\treturn (\n\t\t<PopoverContext.Provider value={contextValue}>\n\t\t\t<RadixPopover.Root {...props}>{children}</RadixPopover.Root>\n\t\t</PopoverContext.Provider>\n\t);\n};\n\nconst PopoverTrigger = RadixPopover.Trigger;\n\nexport type PopoverContentProps = RadixPopover.PopoverContentProps & {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n};\n\n/**\n * Popover Content\n */\n\n/**\n * Popover Content component that provides the content area for the Popover.\n * Inherits size from parent Popover component.\n *\n * @example\n * ```tsx\n * <PopoverContent>\n *   <p>Popover content goes here</p>\n * </PopoverContent>\n * ```\n */\nconst PopoverContent = forwardRef<\n\tComponentRef<typeof RadixPopover.Content>,\n\tPopoverContentProps\n>(({ children, className, sideOffset = 4, ...props }, ref) => {\n\tconst { showArrow, closeButtonAriaLabel, side, showCloseButton } =\n\t\tusePopoverContext();\n\treturn (\n\t\t<RadixPopover.Content\n\t\t\tclassName={cn(\n\t\t\t\t\"relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tsideOffset={sideOffset}\n\t\t\tside={side}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{showCloseButton && (\n\t\t\t\t<PopoverClose\n\t\t\t\t\tclassName=\"absolute top-4 right-4\"\n\t\t\t\t\taria-label={closeButtonAriaLabel}\n\t\t\t\t>\n\t\t\t\t\t<Icon asChild size=\"small\">\n\t\t\t\t\t\t<Cross1Icon />\n\t\t\t\t\t</Icon>\n\t\t\t\t</PopoverClose>\n\t\t\t)}\n\t\t\t{children}\n\t\t\t{showArrow && <RadixPopover.Arrow className=\"fill-gray-700\" />}\n\t\t</RadixPopover.Content>\n\t);\n});\n\n/**\n * Popover Close\n */\n\nconst PopoverClose = RadixPopover.Close;\n\n/**\n * Popover Portal\n */\n\nconst PopoverPortal = RadixPopover.Portal;\n\n/**\n * Popover Anchor\n */\n\nconst PopoverAnchor = RadixPopover.Anchor;\n\nexport {\n\tPopover,\n\tPopoverTrigger,\n\tPopoverContent,\n\tPopoverClose,\n\tPopoverPortal,\n\tPopoverAnchor,\n};\n"]}

package/dist/components/switch/switch.js

@@ -1,38 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext } from "../form-field/form-field-context";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { getVariants } from "../../utilities/responsive/responsive";
 import { Switch as RadixSwitch } from "radix-ui";
 import { forwardRef } from "react";
-const rootStyles = getVariants({
-    base: "relative flex cursor-pointer appearance-none items-center rounded-full bg-gray-500 transition-colors duration-500 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-light-blue-300 data-[state=checked]:bg-green-500",
+const thumbStyles = getVariants({
+    slots: {
+        root: "relative flex cursor-pointer appearance-none items-center rounded-full bg-gray-500 transition-colors duration-500 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-light-blue-300 data-[state=checked]:bg-green-500",
+        thumb: "absolute left-1 h-5 w-5 rounded-full transition-transform duration-500 ease-out data-[state=checked]:translate-x-[1.125rem]",
+    },
     variants: {
         disabled: {
-            true: "cursor-not-allowed opacity-50",
+            true: {
+                root: "cursor-not-allowed opacity-50",
+                thumb: "bg-gray-300",
+            },
+            false: {
+                root: "cursor-pointer opacity-100",
+                thumb: "bg-white",
+            },
         },
         error: {
-            true: "bg-red-600 data-[state=checked]:bg-red-600",
-        },
-        size: {
-            small: "h-5 w-10",
-            medium: "h-7 w-12",
-            large: "h-9 w-14",
-        },
-    },
-});
-const thumbStyles = getVariants({
-    base: "absolute left-1 h-5 w-5 rounded-full transition-transform duration-500 ease-out data-[state=checked]:translate-x-[1.125rem]",
-    variants: {
-        disabled: {
-            true: "bg-gray-300",
-            false: "bg-white",
+            true: {
+                root: "bg-red-600 data-[state=checked]:bg-red-600",
+                thumb: "bg-red-600",
+            },
         },
         size: {
-            small: "h-3 w-3",
-            medium: "h-5 w-5",
-            large: "h-7 w-7",
+            small: {
+                root: "h-5 w-10",
+                thumb: "h-3 w-3",
+            },
+            medium: {
+                root: "h-7 w-12",
+                thumb: "h-5 w-5",
+            },
+            large: {
+                root: "h-9 w-14",
+                thumb: "h-7 w-7",
+            },
         },
     },
 });
+const { root, thumb } = thumbStyles;
 /**
  * A switch component that toggles between on and off states.
  * Built on top of Radix UI's Switch primitive.
@@ -69,6 +78,7 @@ export const Switch = forwardRef(({ className, disabled: initialDisabled, size =
         disabled: initialDisabled,
         error: initialError,
     });
-    return (_jsx(RadixSwitch.Root, { className: rootStyles({ disabled, size, error, className }), disabled: disabled, ...props, ref: ref, children: _jsx(RadixSwitch.Thumb, { className: thumbStyles({ disabled, size }) }) }));
+    return (_jsx(RadixSwitch.Root, { className: root({ disabled, size, error, className }), disabled: disabled, ...props, ref: ref, children: _jsx(RadixSwitch.Thumb, { className: thumb({ disabled, size }) }) }));
 });
+Switch.displayName = "Switch";
 //# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"/","sources":["components/switch/switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAOtD,MAAM,UAAU,GAAG,WAAW,CAAC;IAC9B,IAAI,EAAE,wOAAwO;IAC9O,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE,+BAA+B;SACrC;QACD,KAAK,EAAE;YACN,IAAI,EAAE,4CAA4C;SAClD;QACD,IAAI,EAAE;YACL,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,UAAU;YAClB,KAAK,EAAE,UAAU;SACjB;KACD;CACD,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,6HAA6H;IACnI,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,UAAU;SACjB;QACD,IAAI,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SAChB;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAI/B,CACC,EACC,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,IAAI,GAAG,QAAQ,EACf,KAAK,EAAE,YAAY,EACnB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC;QAC1C,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,YAAY;KACnB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,WAAW,CAAC,IAAI,IAChB,SAAS,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAC3D,QAAQ,EAAE,QAAQ,KACd,KAAK,EACT,GAAG,EAAE,GAAG,YAER,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,GAAI,GAC/C,CACnB,CAAC;AACH,CAAC,CACD,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { Switch as RadixSwitch } from \"radix-ui\";\nimport { type ComponentRef, forwardRef } from \"react\";\n\nexport type SwitchProps = RadixSwitch.SwitchProps & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\terror?: boolean;\n};\n\nconst rootStyles = getVariants({\n\tbase: \"relative flex cursor-pointer appearance-none items-center rounded-full bg-gray-500 transition-colors duration-500 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-light-blue-300 data-[state=checked]:bg-green-500\",\n\tvariants: {\n\t\tdisabled: {\n\t\t\ttrue: \"cursor-not-allowed opacity-50\",\n\t\t},\n\t\terror: {\n\t\t\ttrue: \"bg-red-600 data-[state=checked]:bg-red-600\",\n\t\t},\n\t\tsize: {\n\t\t\tsmall: \"h-5 w-10\",\n\t\t\tmedium: \"h-7 w-12\",\n\t\t\tlarge: \"h-9 w-14\",\n\t\t},\n\t},\n});\n\nconst thumbStyles = getVariants({\n\tbase: \"absolute left-1 h-5 w-5 rounded-full transition-transform duration-500 ease-out data-[state=checked]:translate-x-[1.125rem]\",\n\tvariants: {\n\t\tdisabled: {\n\t\t\ttrue: \"bg-gray-300\",\n\t\t\tfalse: \"bg-white\",\n\t\t},\n\t\tsize: {\n\t\t\tsmall: \"h-3 w-3\",\n\t\t\tmedium: \"h-5 w-5\",\n\t\t\tlarge: \"h-7 w-7\",\n\t\t},\n\t},\n});\n\n/**\n * A switch component that toggles between on and off states.\n * Built on top of Radix UI's Switch primitive.\n *\n * @param {SwitchProps} props - The props for the Switch component\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the switch\n * @param {boolean} [props.disabled] - Whether the switch is disabled\n * @param {string} [props.className] - Additional CSS classes to apply\n *\n * @example\n * // Basic usage\n * <Switch />\n *\n * @example\n * // With different sizes\n * <Switch size=\"small\" />\n * <Switch size=\"medium\" />\n * <Switch size=\"large\" />\n *\n * @example\n * // Disabled state\n * <Switch disabled />\n *\n * @example\n * // With onChange handler\n * <Switch onCheckedChange={(checked) => console.log(checked)} />\n *\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the switch\n * @param {boolean} [props.disabled] - Whether the switch is disabled\n * @param {string} [props.className] - Additional CSS classes to apply\n */\nexport const Switch = forwardRef<\n\tComponentRef<typeof RadixSwitch.Root>,\n\tSwitchProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdisabled: initialDisabled,\n\t\t\tsize = \"medium\",\n\t\t\terror: initialError,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { disabled, error } = useFormContext({\n\t\t\tdisabled: initialDisabled,\n\t\t\terror: initialError,\n\t\t});\n\t\treturn (\n\t\t\t<RadixSwitch.Root\n\t\t\t\tclassName={rootStyles({ disabled, size, error, className })}\n\t\t\t\tdisabled={disabled}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<RadixSwitch.Thumb className={thumbStyles({ disabled, size })} />\n\t\t\t</RadixSwitch.Root>\n\t\t);\n\t},\n);\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"/","sources":["components/switch/switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAE3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAOtD,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,KAAK,EAAE;QACN,IAAI,EAAE,wOAAwO;QAC9O,KAAK,EACJ,6HAA6H;KAC9H;IACD,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,IAAI,EAAE,+BAA+B;gBACrC,KAAK,EAAE,aAAa;aACpB;YACD,KAAK,EAAE;gBACN,IAAI,EAAE,4BAA4B;gBAClC,KAAK,EAAE,UAAU;aACjB;SACD;QACD,KAAK,EAAE;YACN,IAAI,EAAE;gBACL,IAAI,EAAE,4CAA4C;gBAClD,KAAK,EAAE,YAAY;aACnB;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;aAChB;YACD,MAAM,EAAE;gBACP,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;aAChB;YACD,KAAK,EAAE;gBACN,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;aAChB;SACD;KACD;CACD,CAAC,CAAC;AAEH,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAI/B,CACC,EACC,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,IAAI,GAAG,QAAQ,EACf,KAAK,EAAE,YAAY,EACnB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC;QAC1C,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,YAAY;KACnB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,WAAW,CAAC,IAAI,IAChB,SAAS,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACrD,QAAQ,EAAE,QAAQ,KACd,KAAK,EACT,GAAG,EAAE,GAAG,YAER,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAE,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,GAAI,GACzC,CACnB,CAAC;AACH,CAAC,CACD,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { Switch as RadixSwitch } from \"radix-ui\";\nimport { type ComponentRef, forwardRef } from \"react\";\n\nexport type SwitchProps = RadixSwitch.SwitchProps & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\terror?: boolean;\n};\n\nconst thumbStyles = getVariants({\n\tslots: {\n\t\troot: \"relative flex cursor-pointer appearance-none items-center rounded-full bg-gray-500 transition-colors duration-500 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-light-blue-300 data-[state=checked]:bg-green-500\",\n\t\tthumb:\n\t\t\t\"absolute left-1 h-5 w-5 rounded-full transition-transform duration-500 ease-out data-[state=checked]:translate-x-[1.125rem]\",\n\t},\n\tvariants: {\n\t\tdisabled: {\n\t\t\ttrue: {\n\t\t\t\troot: \"cursor-not-allowed opacity-50\",\n\t\t\t\tthumb: \"bg-gray-300\",\n\t\t\t},\n\t\t\tfalse: {\n\t\t\t\troot: \"cursor-pointer opacity-100\",\n\t\t\t\tthumb: \"bg-white\",\n\t\t\t},\n\t\t},\n\t\terror: {\n\t\t\ttrue: {\n\t\t\t\troot: \"bg-red-600 data-[state=checked]:bg-red-600\",\n\t\t\t\tthumb: \"bg-red-600\",\n\t\t\t},\n\t\t},\n\t\tsize: {\n\t\t\tsmall: {\n\t\t\t\troot: \"h-5 w-10\",\n\t\t\t\tthumb: \"h-3 w-3\",\n\t\t\t},\n\t\t\tmedium: {\n\t\t\t\troot: \"h-7 w-12\",\n\t\t\t\tthumb: \"h-5 w-5\",\n\t\t\t},\n\t\t\tlarge: {\n\t\t\t\troot: \"h-9 w-14\",\n\t\t\t\tthumb: \"h-7 w-7\",\n\t\t\t},\n\t\t},\n\t},\n});\n\nconst { root, thumb } = thumbStyles;\n\n/**\n * A switch component that toggles between on and off states.\n * Built on top of Radix UI's Switch primitive.\n *\n * @param {SwitchProps} props - The props for the Switch component\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the switch\n * @param {boolean} [props.disabled] - Whether the switch is disabled\n * @param {string} [props.className] - Additional CSS classes to apply\n *\n * @example\n * // Basic usage\n * <Switch />\n *\n * @example\n * // With different sizes\n * <Switch size=\"small\" />\n * <Switch size=\"medium\" />\n * <Switch size=\"large\" />\n *\n * @example\n * // Disabled state\n * <Switch disabled />\n *\n * @example\n * // With onChange handler\n * <Switch onCheckedChange={(checked) => console.log(checked)} />\n *\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the switch\n * @param {boolean} [props.disabled] - Whether the switch is disabled\n * @param {string} [props.className] - Additional CSS classes to apply\n */\nexport const Switch = forwardRef<\n\tComponentRef<typeof RadixSwitch.Root>,\n\tSwitchProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdisabled: initialDisabled,\n\t\t\tsize = \"medium\",\n\t\t\terror: initialError,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { disabled, error } = useFormContext({\n\t\t\tdisabled: initialDisabled,\n\t\t\terror: initialError,\n\t\t});\n\t\treturn (\n\t\t\t<RadixSwitch.Root\n\t\t\t\tclassName={root({ disabled, size, error, className })}\n\t\t\t\tdisabled={disabled}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<RadixSwitch.Thumb className={thumb({ disabled, size })} />\n\t\t\t</RadixSwitch.Root>\n\t\t);\n\t},\n);\n\nSwitch.displayName = \"Switch\";\n"]}

package/dist/components/text-area/text-area.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getVariants } from "../../utilities/get-variants/get-variants";
+import { getVariants } from "../../utilities/responsive/responsive";
 import { forwardRef } from "react";
 const textAreaStyles = getVariants({
     base: "w-full rounded-md border border-gray-300 p-2 focus-visible:outline focus-visible:outline-gray-800",

package/dist/components/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sourceRoot":"/","sources":["components/text-area/text-area.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAMlE,MAAM,cAAc,GAAG,WAAW,CAAC;IAClC,IAAI,EAAE,mGAAmG;IACzG,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,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CACjC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjD,OAAO,CACN,mBACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,CAAC;YACzB,SAAS;YACT,KAAK;YACL,QAAQ;SACR,CAAC,EACF,QAAQ,EAAE,QAAQ,KACd,KAAK,GACR,CACF,CAAC;AACH,CAAC,CACD,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { getVariants } from \"@utilities/get-variants/get-variants\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nexport type TextareaProps = ComponentPropsWithoutRef<\"textarea\"> & {\n\terror?: boolean;\n};\n\nconst textAreaStyles = getVariants({\n\tbase: \"w-full rounded-md border border-gray-300 p-2 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\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n\t({ className, error, disabled, ...props }, ref) => {\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\tref={ref}\n\t\t\t\tclassName={textAreaStyles({\n\t\t\t\t\tclassName,\n\t\t\t\t\terror,\n\t\t\t\t\tdisabled,\n\t\t\t\t})}\n\t\t\t\tdisabled={disabled}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nTextarea.displayName = \"Textarea\";\n"]}
+{"version":3,"file":"text-area.js","sourceRoot":"/","sources":["components/text-area/text-area.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;AAMlE,MAAM,cAAc,GAAG,WAAW,CAAC;IAClC,IAAI,EAAE,mGAAmG;IACzG,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,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CACjC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjD,OAAO,CACN,mBACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,CAAC;YACzB,SAAS;YACT,KAAK;YACL,QAAQ;SACR,CAAC,EACF,QAAQ,EAAE,QAAQ,KACd,KAAK,GACR,CACF,CAAC;AACH,CAAC,CACD,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { getVariants } from \"@utilities/responsive/responsive\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nexport type TextareaProps = ComponentPropsWithoutRef<\"textarea\"> & {\n\terror?: boolean;\n};\n\nconst textAreaStyles = getVariants({\n\tbase: \"w-full rounded-md border border-gray-300 p-2 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\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n\t({ className, error, disabled, ...props }, ref) => {\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\tref={ref}\n\t\t\t\tclassName={textAreaStyles({\n\t\t\t\t\tclassName,\n\t\t\t\t\terror,\n\t\t\t\t\tdisabled,\n\t\t\t\t})}\n\t\t\t\tdisabled={disabled}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nTextarea.displayName = \"Textarea\";\n"]}

package/dist/components/toast/toast.d.ts

@@ -7,7 +7,7 @@ export type ToastProps = {
         label: string;
         onClick: () => void;
     };
-} & ToasterProps;
+} & Omit<ToasterProps, "id">;
 /**
  * Creates a custom toast notification using the sonner toast library
  * @param toast - The toast configuration object without an ID
@@ -29,5 +29,5 @@ declare const Toast: import("react").ForwardRefExoticComponent<{
         label: string;
         onClick: () => void;
     };
-} & ToasterProps & import("react").RefAttributes<HTMLDivElement>>;
+} & Omit<ToasterProps, "id"> & import("react").RefAttributes<HTMLDivElement>>;
 export { toast, Toast, Toaster };

package/dist/components/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sourceRoot":"/","sources":["components/toast/toast.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EACN,OAAO,IAAI,aAAa,EACxB,KAAK,IAAI,WAAW,GAEpB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAY1C;;;;;;;;;GASG;AACH,MAAM,KAAK,GAAG,CAAC,KAA6B,EAAE,EAAE;IAC/C,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAC;IAC9D,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CACjC,KAAC,KAAK,IACL,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE;YACP,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,OAAO,EAAE,MAAM,CAAC,OAAO;SACvB,KACG,YAAY,GACf,CACF,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,aAAa,CAAC;AAE9B,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,mDAAmD;AACnD,MAAM,KAAK,GAAG,UAAU,CACvB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3C,OAAO,CACN,eACC,SAAS,EAAC,kGAAkG,EAC5G,GAAG,EAAE,GAAG,aAER,cAAK,SAAS,EAAC,0BAA0B,YACxC,eAAK,SAAS,EAAC,cAAc,aAC5B,YAAG,SAAS,EAAC,mCAAmC,YAAE,KAAK,GAAK,EAC5D,YAAG,SAAS,EAAC,uBAAuB,YAAE,WAAW,GAAK,IACjD,GACD,EACN,cAAK,SAAS,EAAC,yCAAyC,YACvD,KAAC,MAAM,IACN,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE;wBACb,MAAM,CAAC,OAAO,EAAE,CAAC;wBACjB,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBACzB,CAAC,YAEA,MAAM,CAAC,KAAK,GACL,GACJ,IACD,CACN,CAAC;AACH,CAAC,CACD,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC","sourcesContent":["import { forwardRef } from \"react\";\nimport {\n\tToaster as SonnerToaster,\n\ttoast as sonnerToast,\n\ttype ToasterProps,\n} from \"sonner\";\nimport { Button } from \"../button/button\";\n\nexport type ToastProps = {\n\tid: string | number;\n\ttitle: string;\n\tdescription: string;\n\tbutton: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n} & ToasterProps;\n\n/**\n * Creates a custom toast notification using the sonner toast library\n * @param toast - The toast configuration object without an ID\n * @param toast.title - The title text to display in the toast\n * @param toast.description - The description text to display in the toast\n * @param toast.button - Configuration for the toast's action button\n * @param toast.button.label - The text label for the action button\n * @param toast.button.onClick - Click handler function for the action button\n * @returns A unique identifier for the created toast\n */\nconst toast = (toast: Omit<ToastProps, \"id\">) => {\n\tconst { title, description, button, ...toastOptions } = toast;\n\treturn sonnerToast.custom((id) => (\n\t\t<Toast\n\t\t\tid={id}\n\t\t\ttitle={title}\n\t\t\tdescription={description}\n\t\t\tbutton={{\n\t\t\t\tlabel: button.label,\n\t\t\t\tonClick: button.onClick,\n\t\t\t}}\n\t\t\t{...toastOptions}\n\t\t/>\n\t));\n};\n\nconst Toaster = SonnerToaster;\n\nToaster.displayName = \"Toaster\";\n\n/** A fully custom toast built on top of sonner. */\nconst Toast = forwardRef<HTMLDivElement, ToastProps>(\n\t({ title, description, button, id }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName=\"flex w-full items-center gap-4 rounded-lg bg-white p-4 shadow-lg ring-1 ring-black/5 md:max-w-96\"\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<div className=\"flex flex-1 items-center\">\n\t\t\t\t\t<div className=\"w-full gap-1\">\n\t\t\t\t\t\t<p className=\"font-medium text-gray-900 text-sm\">{title}</p>\n\t\t\t\t\t\t<p className=\"text-gray-500 text-sm\">{description}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"shrink-0 rounded-md font-medium text-sm\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tbutton.onClick();\n\t\t\t\t\t\t\tsonnerToast.dismiss(id);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{button.label}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nToast.displayName = \"Toast\";\n\nexport { toast, Toast, Toaster };\n"]}
+{"version":3,"file":"toast.js","sourceRoot":"/","sources":["components/toast/toast.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EACN,OAAO,IAAI,aAAa,EACxB,KAAK,IAAI,WAAW,GAEpB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAY1C;;;;;;;;;GASG;AACH,MAAM,KAAK,GAAG,CAAC,KAA6B,EAAE,EAAE;IAC/C,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAC;IAC9D,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CACjC,KAAC,KAAK,IACL,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE;YACP,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,OAAO,EAAE,MAAM,CAAC,OAAO;SACvB,KACG,YAAY,GACf,CACF,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,aAAa,CAAC;AAE9B,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,mDAAmD;AACnD,MAAM,KAAK,GAAG,UAAU,CACvB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3C,OAAO,CACN,eACC,SAAS,EAAC,kGAAkG,EAC5G,GAAG,EAAE,GAAG,aAER,cAAK,SAAS,EAAC,0BAA0B,YACxC,eAAK,SAAS,EAAC,cAAc,aAC5B,YAAG,SAAS,EAAC,mCAAmC,YAAE,KAAK,GAAK,EAC5D,YAAG,SAAS,EAAC,uBAAuB,YAAE,WAAW,GAAK,IACjD,GACD,EACN,cAAK,SAAS,EAAC,yCAAyC,YACvD,KAAC,MAAM,IACN,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE;wBACb,MAAM,CAAC,OAAO,EAAE,CAAC;wBACjB,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBACzB,CAAC,YAEA,MAAM,CAAC,KAAK,GACL,GACJ,IACD,CACN,CAAC;AACH,CAAC,CACD,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC","sourcesContent":["import { forwardRef } from \"react\";\nimport {\n\tToaster as SonnerToaster,\n\ttoast as sonnerToast,\n\ttype ToasterProps,\n} from \"sonner\";\nimport { Button } from \"../button/button\";\n\nexport type ToastProps = {\n\tid: string | number;\n\ttitle: string;\n\tdescription: string;\n\tbutton: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n} & Omit<ToasterProps, \"id\">;\n\n/**\n * Creates a custom toast notification using the sonner toast library\n * @param toast - The toast configuration object without an ID\n * @param toast.title - The title text to display in the toast\n * @param toast.description - The description text to display in the toast\n * @param toast.button - Configuration for the toast's action button\n * @param toast.button.label - The text label for the action button\n * @param toast.button.onClick - Click handler function for the action button\n * @returns A unique identifier for the created toast\n */\nconst toast = (toast: Omit<ToastProps, \"id\">) => {\n\tconst { title, description, button, ...toastOptions } = toast;\n\treturn sonnerToast.custom((id) => (\n\t\t<Toast\n\t\t\tid={id}\n\t\t\ttitle={title}\n\t\t\tdescription={description}\n\t\t\tbutton={{\n\t\t\t\tlabel: button.label,\n\t\t\t\tonClick: button.onClick,\n\t\t\t}}\n\t\t\t{...toastOptions}\n\t\t/>\n\t));\n};\n\nconst Toaster = SonnerToaster;\n\nToaster.displayName = \"Toaster\";\n\n/** A fully custom toast built on top of sonner. */\nconst Toast = forwardRef<HTMLDivElement, ToastProps>(\n\t({ title, description, button, id }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName=\"flex w-full items-center gap-4 rounded-lg bg-white p-4 shadow-lg ring-1 ring-black/5 md:max-w-96\"\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<div className=\"flex flex-1 items-center\">\n\t\t\t\t\t<div className=\"w-full gap-1\">\n\t\t\t\t\t\t<p className=\"font-medium text-gray-900 text-sm\">{title}</p>\n\t\t\t\t\t\t<p className=\"text-gray-500 text-sm\">{description}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"shrink-0 rounded-md font-medium text-sm\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tbutton.onClick();\n\t\t\t\t\t\t\tsonnerToast.dismiss(id);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{button.label}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nToast.displayName = \"Toast\";\n\nexport { toast, Toast, Toaster };\n"]}

package/dist/index.d.ts

@@ -42,5 +42,3 @@ export type { ToastProps } from "./components/toast/toast";
 export { Toast, Toaster, toast, } from "./components/toast/toast";
 export type { TooltipProps } from "./components/tooltip/tooltip";
 export { Tooltip, TooltipContent, TooltipTrigger, } from "./components/tooltip/tooltip";
-export { getVariants } from "./utilities/get-variants/get-variants";
-export type { ResponsiveValue } from "./utilities/responsive/responsive";

package/dist/index.js

@@ -25,5 +25,4 @@ export { Tabs, TabsContent, TabsList, TabsTrigger, } from "./components/tabs/tab
 export { Textarea } from "./components/text-area/text-area";
 export { Toast, Toaster, toast, } from "./components/toast/toast";
 export { Tooltip, TooltipContent, TooltipTrigger, } from "./components/tooltip/tooltip";
-export { getVariants } from "./utilities/get-variants/get-variants";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"/","sources":["index.ts"],"names":[],"mappings":"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","sourcesContent":["export type {\n\tAccordionContentProps,\n\tAccordionItemProps,\n\tAccordionProps,\n\tAccordionTriggerProps,\n} from \"@components/accordion/accordion\";\nexport {\n\tAccordion,\n\tAccordionContent,\n\tAccordionItem,\n\tAccordionTrigger,\n} from \"@components/accordion/accordion\";\nexport type {\n\tAlertDescriptionProps,\n\tAlertProps,\n\tAlertTitleProps,\n} from \"@components/alert/alert\";\nexport { Alert, AlertDescription, AlertTitle } from \"@components/alert/alert\";\nexport {\n\tAlertDialog,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogOverlay,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n} from \"@components/alert-dialog/alert-dialog\";\nexport { Avatar, AvatarFallback, AvatarImage } from \"@components/avatar/avatar\";\nexport type { AvatarGroupProps } from \"@components/avatar/avatar-group\";\nexport { AvatarGroup } from \"@components/avatar/avatar-group\";\nexport type { BadgeProps } from \"@components/badge/badge\";\nexport { Badge } from \"@components/badge/badge\";\nexport type { ButtonProps } from \"@components/button/button\";\nexport { Button } from \"@components/button/button\";\nexport type {\n\tCardContentProps,\n\tCardFooterProps,\n\tCardHeaderProps,\n\tCardProps,\n} from \"@components/card/card\";\nexport {\n\tCard,\n\tCardContent,\n\tCardFooter,\n\tCardHeader,\n} from \"@components/card/card\";\nexport type { CheckboxProps } from \"@components/checkbox/checkbox\";\nexport { Checkbox } from \"@components/checkbox/checkbox\";\nexport {\n\tDialog,\n\tDialogClose,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogTitle,\n\tDialogTrigger,\n} from \"@components/dialog/dialog\";\nexport {\n\tDrawer,\n\tDrawerClose,\n\tDrawerContent,\n\tDrawerDescription,\n\tDrawerFooter,\n\tDrawerHeader,\n\tDrawerTitle,\n\tDrawerTrigger,\n} from \"@components/drawer/drawer\";\nexport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuLabel,\n\tDropdownMenuPortal,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuTrigger,\n} from \"@components/dropdown-menu/dropdown-menu\";\nexport type { InputProps } from \"@components/input/input\";\nexport { Input } from \"@components/input/input\";\nexport type { LabelProps } from \"@components/label/label\";\nexport { Label } from \"@components/label/label\";\nexport type {\n\tPaginationItemProps,\n\tPaginationProps,\n} from \"@components/pagination/pagination\";\nexport {\n\tPagination,\n\tPaginationItem,\n\tPaginationNext,\n\tPaginationPrev,\n} from \"@components/pagination/pagination\";\nexport type {\n\tPopoverContentProps,\n\tPopoverProps,\n} from \"@components/popover/popover\";\nexport {\n\tPopover,\n\tPopoverAnchor,\n\tPopoverClose,\n\tPopoverContent,\n\tPopoverPortal,\n\tPopoverTrigger,\n} from \"@components/popover/popover\";\nexport type { ProgressProps } from \"@components/progress/progress\";\nexport { Progress } from \"@components/progress/progress\";\nexport {\n\tRadioGroup,\n\tRadioGroupItem,\n} from \"@components/radio-group/radio-group\";\nexport {\n\tSelect,\n\tSelectContent,\n\tSelectGroup,\n\tSelectItem,\n\tSelectLabel,\n\tSelectScrollDownButton,\n\tSelectScrollUpButton,\n\tSelectSeparator,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@components/select/select\";\nexport { Skeleton } from \"@components/skeleton/skeleton\";\nexport type { SliderProps } from \"@components/slider/slider\";\nexport { Slider } from \"@components/slider/slider\";\nexport type { SwitchProps } from \"@components/switch/switch\";\nexport { Switch } from \"@components/switch/switch\";\nexport {\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableFooter,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@components/table/table\";\nexport {\n\tTabs,\n\tTabsContent,\n\tTabsList,\n\tTabsTrigger,\n} from \"@components/tabs/tabs\";\nexport type { TextareaProps } from \"@components/text-area/text-area\";\nexport { Textarea } from \"@components/text-area/text-area\";\nexport type { ToastProps } from \"@components/toast/toast\";\nexport {\n\tToast,\n\tToaster,\n\ttoast,\n} from \"@components/toast/toast\";\nexport type { TooltipProps } from \"@components/tooltip/tooltip\";\nexport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@components/tooltip/tooltip\";\nexport { getVariants } from \"@utilities/get-variants/get-variants\";\nexport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"/","sources":["index.ts"],"names":[],"mappings":"AAMA,OAAO,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,gBAAgB,GAChB,MAAM,iCAAiC,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EACN,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,GAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAEhF,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAOnD,OAAO,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,UAAU,GACV,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,GACnB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAKhD,OAAO,EACN,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,GACd,MAAM,mCAAmC,CAAC;AAK3C,OAAO,EACN,OAAO,EACP,aAAa,EACb,YAAY,EACZ,cAAc,EACd,aAAa,EACb,cAAc,GACd,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EACN,UAAU,EACV,cAAc,GACd,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACN,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACX,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EACN,KAAK,EACL,SAAS,EACT,YAAY,EACZ,SAAS,EACT,WAAW,EACX,SAAS,EACT,WAAW,EACX,QAAQ,GACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACN,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,GACX,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,OAAO,EACN,KAAK,EACL,OAAO,EACP,KAAK,GACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACN,OAAO,EACP,cAAc,EACd,cAAc,GACd,MAAM,6BAA6B,CAAC","sourcesContent":["export type {\n\tAccordionContentProps,\n\tAccordionItemProps,\n\tAccordionProps,\n\tAccordionTriggerProps,\n} from \"@components/accordion/accordion\";\nexport {\n\tAccordion,\n\tAccordionContent,\n\tAccordionItem,\n\tAccordionTrigger,\n} from \"@components/accordion/accordion\";\nexport type {\n\tAlertDescriptionProps,\n\tAlertProps,\n\tAlertTitleProps,\n} from \"@components/alert/alert\";\nexport { Alert, AlertDescription, AlertTitle } from \"@components/alert/alert\";\nexport {\n\tAlertDialog,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogOverlay,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n} from \"@components/alert-dialog/alert-dialog\";\nexport { Avatar, AvatarFallback, AvatarImage } from \"@components/avatar/avatar\";\nexport type { AvatarGroupProps } from \"@components/avatar/avatar-group\";\nexport { AvatarGroup } from \"@components/avatar/avatar-group\";\nexport type { BadgeProps } from \"@components/badge/badge\";\nexport { Badge } from \"@components/badge/badge\";\nexport type { ButtonProps } from \"@components/button/button\";\nexport { Button } from \"@components/button/button\";\nexport type {\n\tCardContentProps,\n\tCardFooterProps,\n\tCardHeaderProps,\n\tCardProps,\n} from \"@components/card/card\";\nexport {\n\tCard,\n\tCardContent,\n\tCardFooter,\n\tCardHeader,\n} from \"@components/card/card\";\nexport type { CheckboxProps } from \"@components/checkbox/checkbox\";\nexport { Checkbox } from \"@components/checkbox/checkbox\";\nexport {\n\tDialog,\n\tDialogClose,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogTitle,\n\tDialogTrigger,\n} from \"@components/dialog/dialog\";\nexport {\n\tDrawer,\n\tDrawerClose,\n\tDrawerContent,\n\tDrawerDescription,\n\tDrawerFooter,\n\tDrawerHeader,\n\tDrawerTitle,\n\tDrawerTrigger,\n} from \"@components/drawer/drawer\";\nexport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuLabel,\n\tDropdownMenuPortal,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuTrigger,\n} from \"@components/dropdown-menu/dropdown-menu\";\nexport type { InputProps } from \"@components/input/input\";\nexport { Input } from \"@components/input/input\";\nexport type { LabelProps } from \"@components/label/label\";\nexport { Label } from \"@components/label/label\";\nexport type {\n\tPaginationItemProps,\n\tPaginationProps,\n} from \"@components/pagination/pagination\";\nexport {\n\tPagination,\n\tPaginationItem,\n\tPaginationNext,\n\tPaginationPrev,\n} from \"@components/pagination/pagination\";\nexport type {\n\tPopoverContentProps,\n\tPopoverProps,\n} from \"@components/popover/popover\";\nexport {\n\tPopover,\n\tPopoverAnchor,\n\tPopoverClose,\n\tPopoverContent,\n\tPopoverPortal,\n\tPopoverTrigger,\n} from \"@components/popover/popover\";\nexport type { ProgressProps } from \"@components/progress/progress\";\nexport { Progress } from \"@components/progress/progress\";\nexport {\n\tRadioGroup,\n\tRadioGroupItem,\n} from \"@components/radio-group/radio-group\";\nexport {\n\tSelect,\n\tSelectContent,\n\tSelectGroup,\n\tSelectItem,\n\tSelectLabel,\n\tSelectScrollDownButton,\n\tSelectScrollUpButton,\n\tSelectSeparator,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@components/select/select\";\nexport { Skeleton } from \"@components/skeleton/skeleton\";\nexport type { SliderProps } from \"@components/slider/slider\";\nexport { Slider } from \"@components/slider/slider\";\nexport type { SwitchProps } from \"@components/switch/switch\";\nexport { Switch } from \"@components/switch/switch\";\nexport {\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableFooter,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@components/table/table\";\nexport {\n\tTabs,\n\tTabsContent,\n\tTabsList,\n\tTabsTrigger,\n} from \"@components/tabs/tabs\";\nexport type { TextareaProps } from \"@components/text-area/text-area\";\nexport { Textarea } from \"@components/text-area/text-area\";\nexport type { ToastProps } from \"@components/toast/toast\";\nexport {\n\tToast,\n\tToaster,\n\ttoast,\n} from \"@components/toast/toast\";\nexport type { TooltipProps } from \"@components/tooltip/tooltip\";\nexport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@components/tooltip/tooltip\";\n"]}

package/dist/styles/index.css

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/suspicious/noUnknownAtRules: <tailwind specific syntax included> */
 @import "tailwindcss";
 
 @source "../components";

package/dist/utilities/responsive/responsive.d.ts

@@ -1,5 +1,39 @@
-import type { BreakpointsMap as RcvBreakpointsMap, ResponsiveValue as RcvResponsiveValue } from "responsive-class-variants";
-export type Breakpoints = "sm" | "md" | "lg" | "xl";
+import { type BreakpointsMap as RcvBreakpointsMap, type ResponsiveValue as RcvResponsiveValue } from "responsive-class-variants";
+export declare const breakpoints: readonly ["sm", "md", "lg", "xl"];
+export declare const getVariants: {
+    <T extends {
+        [x: string]: {
+            [x: string]: string | Record<string, string>;
+        };
+    }, S extends Record<string, string>>(config: {
+        slots: S;
+        variants?: T | undefined;
+        compoundVariants?: (Partial<{ [K in keyof T]?: (T[K] extends infer T_1 ? T_1 extends T[K] ? T_1 extends Partial<Record<"true" | "false", string | Record<string, string>>> ? RcvResponsiveValue<boolean, "sm" | "md" | "lg" | "xl"> | undefined : T_1 extends Record<string, unknown> ? RcvResponsiveValue<keyof T_1, "sm" | "md" | "lg" | "xl"> : never : never : never) | undefined; } & {
+            className?: string;
+        }> & {
+            class?: Partial<Record<keyof S & string, string>> | undefined;
+            className?: string;
+        })[] | undefined;
+        onComplete?: (classes: string) => string;
+    }): { [K_1 in keyof S]: (props?: ({ [K in keyof T]?: (T[K] extends infer T_1 ? T_1 extends T[K] ? T_1 extends Partial<Record<"true" | "false", string | Record<string, string>>> ? RcvResponsiveValue<boolean, "sm" | "md" | "lg" | "xl"> | undefined : T_1 extends Record<string, unknown> ? RcvResponsiveValue<keyof T_1, "sm" | "md" | "lg" | "xl"> : never : never : never) | undefined; } & {
+        className?: string;
+    }) | undefined) => string; };
+    <T extends {
+        [x: string]: {
+            [x: string]: string | Record<string, string>;
+        };
+    }>(config: {
+        base: string;
+        variants?: T | undefined;
+        compoundVariants?: Partial<{ [K in keyof T]?: (T[K] extends infer T_1 ? T_1 extends T[K] ? T_1 extends Partial<Record<"true" | "false", string | Record<string, string>>> ? RcvResponsiveValue<boolean, "sm" | "md" | "lg" | "xl"> | undefined : T_1 extends Record<string, unknown> ? RcvResponsiveValue<keyof T_1, "sm" | "md" | "lg" | "xl"> : never : never : never) | undefined; } & {
+            className?: string;
+        }>[] | undefined;
+        onComplete?: (classes: string) => string;
+    }): (props: { [K in keyof T]?: (T[K] extends infer T_1 ? T_1 extends T[K] ? T_1 extends Partial<Record<"true" | "false", string | Record<string, string>>> ? RcvResponsiveValue<boolean, "sm" | "md" | "lg" | "xl"> | undefined : T_1 extends Record<string, unknown> ? RcvResponsiveValue<keyof T_1, "sm" | "md" | "lg" | "xl"> : never : never : never) | undefined; } & {
+        className?: string;
+    }) => string;
+};
+export type Breakpoints = (typeof breakpoints)[number];
 export type ResponsiveValue<T> = RcvResponsiveValue<T, Breakpoints>;
 export type BreakpointsMap<V> = RcvBreakpointsMap<V, Breakpoints>;
 /**

package/dist/utilities/responsive/responsive.js

@@ -1,3 +1,7 @@
+import { cn } from "../cn/cn";
+import { createRcv, } from "responsive-class-variants";
+export const breakpoints = ["sm", "md", "lg", "xl"];
+export const getVariants = createRcv(breakpoints, (classes) => cn(classes));
 const isSingularValue = (value) => !isBreakpointsMap(value);
 const isBreakpointsMap = (value) => typeof value === "object" && value != null && !Array.isArray(value);
 /**

package/dist/utilities/responsive/responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive.js","sourceRoot":"/","sources":["utilities/responsive/responsive.ts"],"names":[],"mappings":"AAWA,MAAM,eAAe,GAAG,CAAI,KAAyB,EAAc,EAAE,CACpE,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAE1B,MAAM,gBAAgB,GAAG,CACxB,KAAyB,EACI,EAAE,CAC/B,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CACjC,KAAyB,EACzB,MAAuB,EACF,EAAE,CACvB,eAAe,CAAC,KAAK,CAAC;IACrB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IACf,CAAC,CAAE,MAAM,CAAC,WAAW,CACnB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;QAClD,UAAU;QACV,MAAM,CAAC,KAAK,CAAC;KACb,CAAC,CACoB,CAAC","sourcesContent":["import type {\n\tBreakpointsMap as RcvBreakpointsMap,\n\tResponsiveValue as RcvResponsiveValue,\n} from \"responsive-class-variants\";\n\nexport type Breakpoints = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport type ResponsiveValue<T> = RcvResponsiveValue<T, Breakpoints>;\n\nexport type BreakpointsMap<V> = RcvBreakpointsMap<V, Breakpoints>;\n\nconst isSingularValue = <A>(value: ResponsiveValue<A>): value is A =>\n\t!isBreakpointsMap(value);\n\nconst isBreakpointsMap = <A>(\n\tvalue: ResponsiveValue<A>,\n): value is BreakpointsMap<A> =>\n\ttypeof value === \"object\" && value != null && !Array.isArray(value);\n\n/**\n * Maps a ResponsiveValue to a new ResponsiveValue using the provided mapper function. Singular values are passed through as is.\n *\n * @template V The type of the original value\n * @template T The type of the mapped value\n * @param {ResponsiveValue<V>} value - The original ResponsiveValue to be mapped\n * @param {function(V): T} mapper - A function that maps a ResponsiveValue to a new ResponsiveValue\n * @returns {ResponsiveValue<T>} A new ResponsiveValue with the mapped values\n *\n *\n * @example\n * const sizes = {\n *  initial: 'md',\n *  sm: 'lg',\n * }\n *\n * const output = mapResponsiveValue(sizes, size => {\n *\tswitch (size) {\n *\t\tcase 'initial':\n *\t\treturn 'sm';\n *\t\tcase 'sm':\n *\t\t\treturn 'md';\n *\t\t}\n *\t});\n *\n * // console.log(output)\n * {\n *\tinitial: 'sm',\n *\tsm: 'md',\n * }\n */\nexport const mapResponsiveValue = <V, T>(\n\tvalue: ResponsiveValue<V>,\n\tmapper: (value: V) => T,\n): ResponsiveValue<T> =>\n\tisSingularValue(value)\n\t\t? mapper(value)\n\t\t: (Object.fromEntries(\n\t\t\t\tObject.entries(value).map(([breakpoint, value]) => [\n\t\t\t\t\tbreakpoint,\n\t\t\t\t\tmapper(value),\n\t\t\t\t]),\n\t\t\t) as BreakpointsMap<T>);\n"]}
+{"version":3,"file":"responsive.js","sourceRoot":"/","sources":["utilities/responsive/responsive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EACN,SAAS,GAGT,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAE7D,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AAQ5E,MAAM,eAAe,GAAG,CAAI,KAAyB,EAAc,EAAE,CACpE,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAE1B,MAAM,gBAAgB,GAAG,CACxB,KAAyB,EACI,EAAE,CAC/B,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CACjC,KAAyB,EACzB,MAAuB,EACF,EAAE,CACvB,eAAe,CAAC,KAAK,CAAC;IACrB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IACf,CAAC,CAAE,MAAM,CAAC,WAAW,CACnB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;QAClD,UAAU;QACV,MAAM,CAAC,KAAK,CAAC;KACb,CAAC,CACoB,CAAC","sourcesContent":["import { cn } from \"@utilities/cn/cn\";\nimport {\n\tcreateRcv,\n\ttype BreakpointsMap as RcvBreakpointsMap,\n\ttype ResponsiveValue as RcvResponsiveValue,\n} from \"responsive-class-variants\";\n\nexport const breakpoints = [\"sm\", \"md\", \"lg\", \"xl\"] as const;\n\nexport const getVariants = createRcv(breakpoints, (classes) => cn(classes));\n\nexport type Breakpoints = (typeof breakpoints)[number];\n\nexport type ResponsiveValue<T> = RcvResponsiveValue<T, Breakpoints>;\n\nexport type BreakpointsMap<V> = RcvBreakpointsMap<V, Breakpoints>;\n\nconst isSingularValue = <A>(value: ResponsiveValue<A>): value is A =>\n\t!isBreakpointsMap(value);\n\nconst isBreakpointsMap = <A>(\n\tvalue: ResponsiveValue<A>,\n): value is BreakpointsMap<A> =>\n\ttypeof value === \"object\" && value != null && !Array.isArray(value);\n\n/**\n * Maps a ResponsiveValue to a new ResponsiveValue using the provided mapper function. Singular values are passed through as is.\n *\n * @template V The type of the original value\n * @template T The type of the mapped value\n * @param {ResponsiveValue<V>} value - The original ResponsiveValue to be mapped\n * @param {function(V): T} mapper - A function that maps a ResponsiveValue to a new ResponsiveValue\n * @returns {ResponsiveValue<T>} A new ResponsiveValue with the mapped values\n *\n *\n * @example\n * const sizes = {\n *  initial: 'md',\n *  sm: 'lg',\n * }\n *\n * const output = mapResponsiveValue(sizes, size => {\n *\tswitch (size) {\n *\t\tcase 'initial':\n *\t\treturn 'sm';\n *\t\tcase 'sm':\n *\t\t\treturn 'md';\n *\t\t}\n *\t});\n *\n * // console.log(output)\n * {\n *\tinitial: 'sm',\n *\tsm: 'md',\n * }\n */\nexport const mapResponsiveValue = <V, T>(\n\tvalue: ResponsiveValue<V>,\n\tmapper: (value: V) => T,\n): ResponsiveValue<T> =>\n\tisSingularValue(value)\n\t\t? mapper(value)\n\t\t: (Object.fromEntries(\n\t\t\t\tObject.entries(value).map(([breakpoint, value]) => [\n\t\t\t\t\tbreakpoint,\n\t\t\t\t\tmapper(value),\n\t\t\t\t]),\n\t\t\t) as BreakpointsMap<T>);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "luan-ui",
-	"version": "0.5.0",
+	"version": "0.5.2",
 	"description": "A UI library for React",
 	"author": "benebene84 <benedikt.sperl@gmail.com> (https://github.com/benebene84)",
 	"main": "/dist/index.js",
@@ -33,29 +33,29 @@
 	},
 	"homepage": "https://github.com/benebene84/luan-ui#readme",
 	"devDependencies": {
-		"@biomejs/biome": "2.0.0",
-		"@chromatic-com/storybook": "^4.0.0",
-		"@storybook/addon-docs": "^9.0.12",
-		"@storybook/addon-onboarding": "^9.0.10",
-		"@storybook/react-vite": "^9.0.12",
-		"@tailwindcss/postcss": "^4.1.10",
-		"@tailwindcss/vite": "^4.1.10",
-		"@testing-library/dom": "^10.4.0",
-		"@testing-library/jest-dom": "^6.6.3",
+		"@biomejs/biome": "2.2.4",
+		"@chromatic-com/storybook": "^4.1.1",
+		"@storybook/addon-docs": "^9.1.6",
+		"@storybook/addon-onboarding": "^9.1.6",
+		"@storybook/react-vite": "^9.1.6",
+		"@tailwindcss/postcss": "^4.1.13",
+		"@tailwindcss/vite": "^4.1.13",
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/jest-dom": "^6.8.0",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.6.1",
-		"@types/node": "^24.0.3",
-		"@types/react": "^19.1.8",
-		"@types/react-dom": "^19.1.6",
-		"@vitejs/plugin-react": "^4.5.2",
-		"jsdom": "^26.1.0",
-		"lefthook": "^1.11.14",
-		"responsive-class-variants": "^1.0.1",
-		"storybook": "^9.0.12",
-		"tailwindcss": "^4.1.10",
+		"@types/node": "^24.5.0",
+		"@types/react": "^19.1.13",
+		"@types/react-dom": "^19.1.9",
+		"@vitejs/plugin-react": "^5.0.2",
+		"jsdom": "^27.0.0",
+		"lefthook": "^1.13.0",
+		"responsive-class-variants": "^1.1.1",
+		"storybook": "^9.1.6",
+		"tailwindcss": "^4.1.13",
 		"tsc-alias": "^1.8.16",
-		"typescript": "^5.8.3",
-		"vite": "^6.3.5",
+		"typescript": "^5.9.2",
+		"vite": "^7.1.5",
 		"vitest": "^3.2.4"
 	},
 	"peerDependencies": {
@@ -66,8 +66,8 @@
 		"@radix-ui/react-compose-refs": "^1.1.2",
 		"@radix-ui/react-icons": "^1.3.2",
 		"clsx": "^2.1.1",
-		"radix-ui": "^1.4.2",
-		"sonner": "^2.0.5",
+		"radix-ui": "^1.4.3",
+		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.3.1"
 	},
 	"packageManager": "pnpm@9.14.2"

package/dist/utilities/get-variants/get-variants.d.ts

@@ -1,14 +0,0 @@
-export declare const getVariants: <T extends {
-    [x: string]: {
-        [x: string]: string;
-    };
-}>(config: {
-    base: string;
-    variants?: T | undefined;
-    compoundVariants?: Partial<{ [K in keyof T]: T[K] extends infer T_1 ? T_1 extends T[K] ? T_1 extends Partial<Record<"true" | "false", string>> ? import("responsive-class-variants").ResponsiveValue<boolean, "sm" | "md" | "lg" | "xl"> | undefined : T_1 extends Record<string, unknown> ? import("responsive-class-variants").ResponsiveValue<keyof T_1, "sm" | "md" | "lg" | "xl"> : never : never : never; } & {
-        className?: string;
-    }>[] | undefined;
-    onComplete?: (classes: string) => string;
-}) => ({ className, ...props }: { [K in keyof T]: T[K] extends infer T_2 ? T_2 extends T[K] ? T_2 extends Partial<Record<"true" | "false", string>> ? import("responsive-class-variants").ResponsiveValue<boolean, "sm" | "md" | "lg" | "xl"> | undefined : T_2 extends Record<string, unknown> ? import("responsive-class-variants").ResponsiveValue<keyof T_2, "sm" | "md" | "lg" | "xl"> : never : never : never; } & {
-    className?: string;
-}) => string;

package/dist/utilities/get-variants/get-variants.js

@@ -1,4 +0,0 @@
-import { cn } from "../cn/cn";
-import { createRcv } from "responsive-class-variants";
-export const getVariants = createRcv(["sm", "md", "lg", "xl"], (classes) => cn(classes));
-//# sourceMappingURL=get-variants.js.map

package/dist/utilities/get-variants/get-variants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-variants.js","sourceRoot":"/","sources":["utilities/get-variants/get-variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAC1E,EAAE,CAAC,OAAO,CAAC,CACX,CAAC","sourcesContent":["import { cn } from \"@utilities/cn/cn\";\nimport { createRcv } from \"responsive-class-variants\";\n\nexport const getVariants = createRcv([\"sm\", \"md\", \"lg\", \"xl\"], (classes) =>\n\tcn(classes),\n);\n"]}