luan-ui 0.7.0 → 0.8.0

package/dist/components/accordion/accordion.js

@@ -5,10 +5,10 @@ import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { cn } from "../../utilities/cn/cn";
 const Accordion = BaseAccordion.Root;
 function AccordionItem({ className, ref, ...props }) {
-    return (_jsx(BaseAccordion.Item, { ref: ref, className: cn("border-gray-200 border-b", className), ...props }));
+    return (_jsx(BaseAccordion.Item, { ref: ref, className: cn("border-border border-b", className), ...props }));
 }
 function AccordionTrigger({ className, children, ref, ...props }) {
-    return (_jsx(BaseAccordion.Header, { className: "flex", children: _jsxs(BaseAccordion.Trigger, { ref: ref, className: cn("flex flex-1 cursor-pointer items-center justify-between py-4 text-left font-medium text-sm transition-all hover:underline [&[data-panel-open]>svg]:rotate-180", className), ...props, children: [children, _jsx(Icon, { render: _jsx(ChevronDownIcon, { className: "shrink-0 cursor-pointer text-gray-500 transition-transform duration-350" }), size: "small" })] }) }));
+    return (_jsx(BaseAccordion.Header, { className: "flex", children: _jsxs(BaseAccordion.Trigger, { ref: ref, className: cn("flex flex-1 cursor-pointer items-center justify-between py-4 text-left font-medium text-sm transition-all hover:underline [&[data-panel-open]>svg]:rotate-180", className), ...props, children: [children, _jsx(Icon, { render: _jsx(ChevronDownIcon, { className: "shrink-0 cursor-pointer text-text-muted transition-transform duration-350" }), size: "small" })] }) }));
 }
 function AccordionContent({ className, children, ref, ...props }) {
     return (_jsx(BaseAccordion.Panel, { ref: ref, className: cn("h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-350 ease-in-out data-ending-style:h-0 data-starting-style:h-0", className), ...props, children: _jsx("div", { className: "pt-0 pb-4", children: children }) }));

package/dist/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"/","sources":["components/accordion/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AA4BtC,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC;AAIrC,SAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAsB;IACtE,OAAO,CACN,KAAC,aAAa,CAAC,IAAI,IAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,KAChD,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACe;IACvB,OAAO,CACN,KAAC,aAAa,CAAC,MAAM,IAAC,SAAS,EAAC,MAAM,YACrC,MAAC,aAAa,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,+JAA+J,EAC/J,SAAS,CACT,KACG,KAAK,aAER,QAAQ,EACT,KAAC,IAAI,IACJ,MAAM,EACL,KAAC,eAAe,IAAC,SAAS,EAAC,yEAAyE,GAAG,EAExG,IAAI,EAAC,OAAO,GACX,IACqB,GACF,CACvB,CAAC;AACH,CAAC;AAID,SAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACe;IACvB,OAAO,CACN,KAAC,aAAa,CAAC,KAAK,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,iJAAiJ,EACjJ,SAAS,CACT,KACG,KAAK,YAET,cAAK,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAO,GACtB,CACtB,CAAC;AACH,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport { Icon } from \"@components/icon/icon\";\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * Accordion component that allows users to expand and collapse content sections.\n * Built on top of Base UI's Accordion primitive.\n *\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Section 1</AccordionTrigger>\n *     <AccordionContent>Content for section 1</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n *\n * @param {Object} props - The component props\n * @param {string} props.className - Optional class name for custom styling\n * @param {React.ReactNode} props.children - The accordion items to render\n * @param {boolean} [props.multiple=false] - Whether to allow multiple items expanded at once\n * @param {any[]} [props.value] - The controlled value(s) of the expanded accordion item(s)\n * @param {function} [props.onValueChange] - Callback when value changes\n * @returns {React.ReactNode} The rendered accordion component\n */\n\nexport type AccordionProps = ComponentProps<typeof BaseAccordion.Root>;\n\nconst Accordion = BaseAccordion.Root;\n\nexport type AccordionItemProps = ComponentProps<typeof BaseAccordion.Item>;\n\nfunction AccordionItem({ className, ref, ...props }: AccordionItemProps) {\n\treturn (\n\t\t<BaseAccordion.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"border-gray-200 border-b\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AccordionTriggerProps = ComponentProps<\n\ttypeof BaseAccordion.Trigger\n>;\n\nfunction AccordionTrigger({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: AccordionTriggerProps) {\n\treturn (\n\t\t<BaseAccordion.Header className=\"flex\">\n\t\t\t<BaseAccordion.Trigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex flex-1 cursor-pointer items-center justify-between py-4 text-left font-medium text-sm transition-all hover:underline [&[data-panel-open]>svg]:rotate-180\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<Icon\n\t\t\t\t\trender={\n\t\t\t\t\t\t<ChevronDownIcon className=\"shrink-0 cursor-pointer text-gray-500 transition-transform duration-350\" />\n\t\t\t\t\t}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t/>\n\t\t\t</BaseAccordion.Trigger>\n\t\t</BaseAccordion.Header>\n\t);\n}\n\nexport type AccordionContentProps = ComponentProps<typeof BaseAccordion.Panel>;\n\nfunction AccordionContent({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: AccordionContentProps) {\n\treturn (\n\t\t<BaseAccordion.Panel\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-350 ease-in-out data-ending-style:h-0 data-starting-style:h-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"pt-0 pb-4\">{children}</div>\n\t\t</BaseAccordion.Panel>\n\t);\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"/","sources":["components/accordion/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AA4BtC,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC;AAIrC,SAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAsB;IACtE,OAAO,CACN,KAAC,aAAa,CAAC,IAAI,IAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAC9C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACe;IACvB,OAAO,CACN,KAAC,aAAa,CAAC,MAAM,IAAC,SAAS,EAAC,MAAM,YACrC,MAAC,aAAa,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,+JAA+J,EAC/J,SAAS,CACT,KACG,KAAK,aAER,QAAQ,EACT,KAAC,IAAI,IACJ,MAAM,EACL,KAAC,eAAe,IAAC,SAAS,EAAC,2EAA2E,GAAG,EAE1G,IAAI,EAAC,OAAO,GACX,IACqB,GACF,CACvB,CAAC;AACH,CAAC;AAID,SAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACe;IACvB,OAAO,CACN,KAAC,aAAa,CAAC,KAAK,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,iJAAiJ,EACjJ,SAAS,CACT,KACG,KAAK,YAET,cAAK,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAO,GACtB,CACtB,CAAC;AACH,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport { Icon } from \"@components/icon/icon\";\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * Accordion component that allows users to expand and collapse content sections.\n * Built on top of Base UI's Accordion primitive.\n *\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Section 1</AccordionTrigger>\n *     <AccordionContent>Content for section 1</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n *\n * @param {Object} props - The component props\n * @param {string} props.className - Optional class name for custom styling\n * @param {React.ReactNode} props.children - The accordion items to render\n * @param {boolean} [props.multiple=false] - Whether to allow multiple items expanded at once\n * @param {any[]} [props.value] - The controlled value(s) of the expanded accordion item(s)\n * @param {function} [props.onValueChange] - Callback when value changes\n * @returns {React.ReactNode} The rendered accordion component\n */\n\nexport type AccordionProps = ComponentProps<typeof BaseAccordion.Root>;\n\nconst Accordion = BaseAccordion.Root;\n\nexport type AccordionItemProps = ComponentProps<typeof BaseAccordion.Item>;\n\nfunction AccordionItem({ className, ref, ...props }: AccordionItemProps) {\n\treturn (\n\t\t<BaseAccordion.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"border-border border-b\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AccordionTriggerProps = ComponentProps<\n\ttypeof BaseAccordion.Trigger\n>;\n\nfunction AccordionTrigger({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: AccordionTriggerProps) {\n\treturn (\n\t\t<BaseAccordion.Header className=\"flex\">\n\t\t\t<BaseAccordion.Trigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex flex-1 cursor-pointer items-center justify-between py-4 text-left font-medium text-sm transition-all hover:underline [&[data-panel-open]>svg]:rotate-180\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<Icon\n\t\t\t\t\trender={\n\t\t\t\t\t\t<ChevronDownIcon className=\"shrink-0 cursor-pointer text-text-muted transition-transform duration-350\" />\n\t\t\t\t\t}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t/>\n\t\t\t</BaseAccordion.Trigger>\n\t\t</BaseAccordion.Header>\n\t);\n}\n\nexport type AccordionContentProps = ComponentProps<typeof BaseAccordion.Panel>;\n\nfunction AccordionContent({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: AccordionContentProps) {\n\treturn (\n\t\t<BaseAccordion.Panel\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-350 ease-in-out data-ending-style:h-0 data-starting-style:h-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"pt-0 pb-4\">{children}</div>\n\t\t</BaseAccordion.Panel>\n\t);\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n"]}

package/dist/components/alert/alert.js

@@ -20,13 +20,13 @@ const alertStyles = getVariants({
     variants: {
         variant: {
             primary: {
-                root: "bg-gray-700 text-white",
+                root: "bg-primary text-on-primary",
             },
             secondary: {
-                root: "border-gray-700 text-gray-700",
+                root: "border-primary text-text-secondary",
             },
             error: {
-                root: "bg-red-500 text-white",
+                root: "bg-destructive text-on-primary",
             },
         },
         size: {

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

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"/","sources":["components/alert/alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOlD,MAAM,YAAY,GAAG,aAAa,CAA+B,SAAS,CAAC,CAAC;AAE5E,MAAM,eAAe,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,CAAC,OAAO,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAC3E,CAAC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAQF,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,KAAK,EAAE;QACN,IAAI,EAAE,6JAA6J;QACnK,KAAK,EAAE,uBAAuB;QAC9B,WAAW,EAAE,aAAa;KAC1B;IACD,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE;gBACR,IAAI,EAAE,wBAAwB;aAC9B;YACD,SAAS,EAAE;gBACV,IAAI,EAAE,+BAA+B;aACrC;YACD,KAAK,EAAE;gBACN,IAAI,EAAE,uBAAuB;aAC7B;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,IAAI,EAAE,8BAA8B;gBACpC,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,SAAS;aACtB;YACD,MAAM,EAAE;gBACP,IAAI,EAAE,8BAA8B;gBACpC,KAAK,EAAE,WAAW;gBAClB,WAAW,EAAE,SAAS;aACtB;SACD;KACD;CACD,CAAC,CAAC;AAEH,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC;AAEnD,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,uCAAuC;QAC9C,MAAM,EAAE,uCAAuC;KAC/C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,uCAAuC;QAC9C,MAAM,EAAE,uCAAuC;KAC/C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,uCAAuC;QAC9C,MAAM,EAAE,uCAAuC;KAC/C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,uCAAuC;QAC9C,MAAM,EAAE,uCAAuC;KAC/C;CACD,CAAC;AAEF,SAAS,KAAK,CAAC,EACd,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACI;IACZ,MAAM,YAAY,GAAkC;QACnD,SAAS,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;QAC7C,QAAQ,EAAE,CACT,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,YAC7C,QAAQ,GACc,CACxB;KACD,CAAC;IAEF,OAAO,SAAS,CAAC;QAChB,cAAc,EAAE,KAAK;QACrB,MAAM;QACN,KAAK,EAAE,UAAU,CAAQ,YAAY,EAAE,KAAK,CAAC;KAC7C,CAAC,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAM5B,MAAM,CAAC,MAAM,WAAW,GAAG;IAC1B,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,cAAc;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,cAAc;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,cAAc;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,cAAc;KACtB;CACD,CAAC;AAEF,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAmB;IACnE,MAAM,EAAE,IAAI,EAAE,GAAG,eAAe,EAAE,CAAC;IAEnC,MAAM,YAAY,GAAkC;QACnD,SAAS,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;KACrC,CAAC;IAEF,OAAO,SAAS,CAAC;QAChB,cAAc,EAAE,KAAK;QACrB,MAAM;QACN,KAAK,EAAE,UAAU,CAAQ,YAAY,EAAE,KAAK,CAAC;KAC7C,CAAC,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAMtC,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAChC,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,YAAY;KACpB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,YAAY;KACpB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,YAAY;KACpB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,YAAY;KACpB;CACD,CAAC;AAEF,SAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACe;IACvB,MAAM,EAAE,IAAI,EAAE,GAAG,eAAe,EAAE,CAAC;IAEnC,MAAM,YAAY,GAAkC;QACnD,SAAS,EAAE,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;KAC3C,CAAC;IAEF,OAAO,SAAS,CAAC;QAChB,cAAc,EAAE,KAAK;QACrB,MAAM;QACN,KAAK,EAAE,UAAU,CAAQ,YAAY,EAAE,KAAK,CAAC;KAC7C,CAAC,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,OAAO,EACN,KAAK,EACL,gBAAgB,EAGhB,UAAU,GAEV,CAAC","sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { createContext, useContext } 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 = useRender.ComponentProps<\"div\"> & {\n\tvariant?: \"primary\" | \"secondary\" | \"error\";\n\tsize?: ResponsiveValue<\"small\" | \"medium\">;\n\tclassName?: string;\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\nfunction Alert({\n\tvariant = \"primary\",\n\tsize = \"medium\",\n\tclassName,\n\trender,\n\tchildren,\n\t...props\n}: AlertProps) {\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: root({ variant, size, className }),\n\t\tchildren: (\n\t\t\t<AlertContext.Provider value={{ variant, size }}>\n\t\t\t\t{children}\n\t\t\t</AlertContext.Provider>\n\t\t),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nAlert.displayName = \"Alert\";\n\ntype AlertTitleProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\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\nfunction AlertTitle({ className, render, ...props }: AlertTitleProps) {\n\tconst { size } = useAlertContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: title({ size, className }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nAlertTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\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\nfunction AlertDescription({\n\tclassName,\n\trender,\n\t...props\n}: AlertDescriptionProps) {\n\tconst { size } = useAlertContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: description({ size, className }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nAlertDescription.displayName = \"AlertDescription\";\n\nexport {\n\tAlert,\n\tAlertDescription,\n\ttype AlertDescriptionProps,\n\ttype AlertProps,\n\tAlertTitle,\n\ttype AlertTitleProps,\n};\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"/","sources":["components/alert/alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { createContext, useContext } 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 = useRender.ComponentProps<\"div\"> & {\n\tvariant?: \"primary\" | \"secondary\" | \"error\";\n\tsize?: ResponsiveValue<\"small\" | \"medium\">;\n\tclassName?: string;\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-primary text-on-primary\",\n\t\t\t},\n\t\t\tsecondary: {\n\t\t\t\troot: \"border-primary text-text-secondary\",\n\t\t\t},\n\t\t\terror: {\n\t\t\t\troot: \"bg-destructive text-on-primary\",\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\nfunction Alert({\n\tvariant = \"primary\",\n\tsize = \"medium\",\n\tclassName,\n\trender,\n\tchildren,\n\t...props\n}: AlertProps) {\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: root({ variant, size, className }),\n\t\tchildren: (\n\t\t\t<AlertContext.Provider value={{ variant, size }}>\n\t\t\t\t{children}\n\t\t\t</AlertContext.Provider>\n\t\t),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nAlert.displayName = \"Alert\";\n\ntype AlertTitleProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\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\nfunction AlertTitle({ className, render, ...props }: AlertTitleProps) {\n\tconst { size } = useAlertContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: title({ size, className }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nAlertTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\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\nfunction AlertDescription({\n\tclassName,\n\trender,\n\t...props\n}: AlertDescriptionProps) {\n\tconst { size } = useAlertContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: description({ size, className }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nAlertDescription.displayName = \"AlertDescription\";\n\nexport {\n\tAlert,\n\tAlertDescription,\n\ttype AlertDescriptionProps,\n\ttype AlertProps,\n\tAlertTitle,\n\ttype AlertTitleProps,\n};\n"]}

package/dist/components/alert-dialog/alert-dialog.js

@@ -5,16 +5,16 @@ const AlertDialog = BaseAlertDialog.Root;
 const AlertDialogTrigger = BaseAlertDialog.Trigger;
 const AlertDialogPortal = BaseAlertDialog.Portal;
 function AlertDialogOverlay({ className, ref, ...props }) {
-    return (_jsx(BaseAlertDialog.Backdrop, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props }));
+    return (_jsx(BaseAlertDialog.Backdrop, { ref: ref, className: cn("fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props }));
 }
 function AlertDialogContent({ className, ref, ...props }) {
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(BaseAlertDialog.Popup, { ref: ref, className: cn("fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-white p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props })] }));
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(BaseAlertDialog.Popup, { ref: ref, className: cn("fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-surface p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props })] }));
 }
 function AlertDialogTitle({ className, ref, ...props }) {
     return (_jsx(BaseAlertDialog.Title, { ref: ref, className: cn("font-medium text-lg", className), ...props }));
 }
 function AlertDialogDescription({ className, ref, ...props }) {
-    return (_jsx(BaseAlertDialog.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props }));
+    return (_jsx(BaseAlertDialog.Description, { ref: ref, className: cn("text-sm text-text-muted", className), ...props }));
 }
 // Base UI doesn't have separate Action/Cancel components - both use Close
 // We export Close as both Action and Cancel for API compatibility

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","sourceRoot":"/","sources":["components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAGtC,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC;AAEzC,MAAM,kBAAkB,GAAG,eAAe,CAAC,OAAO,CAAC;AAEnD,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC;AAMjD,SAAS,kBAAkB,CAAC,EAC3B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACiB;IACzB,OAAO,CACN,KAAC,eAAe,CAAC,QAAQ,IACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,0HAA0H,EAC1H,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,kBAAkB,CAAC,EAC3B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACiB;IACzB,OAAO,CACN,MAAC,iBAAiB,eACjB,KAAC,kBAAkB,KAAG,EACtB,KAAC,eAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,wQAAwQ,EACxQ,SAAS,CACT,KACG,KAAK,GACR,IACiB,CACpB,CAAC;AACH,CAAC;AAMD,SAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAyB;IAC5E,OAAO,CACN,KAAC,eAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,sBAAsB,CAAC,EAC/B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACqB;IAC7B,OAAO,CACN,KAAC,eAAe,CAAC,WAAW,IAC3B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,0EAA0E;AAC1E,kEAAkE;AAClE,MAAM,iBAAiB,GAAG,eAAe,CAAC,KAAK,CAAC;AAEhD,MAAM,iBAAiB,GAAG,eAAe,CAAC,KAAK,CAAC;AAEhD,OAAO,EACN,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,GAClB,CAAC","sourcesContent":["import { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst AlertDialog = BaseAlertDialog.Root;\n\nconst AlertDialogTrigger = BaseAlertDialog.Trigger;\n\nconst AlertDialogPortal = BaseAlertDialog.Portal;\n\nexport type AlertDialogOverlayProps = ComponentProps<\n\ttypeof BaseAlertDialog.Backdrop\n>;\n\nfunction AlertDialogOverlay({\n\tclassName,\n\tref,\n\t...props\n}: AlertDialogOverlayProps) {\n\treturn (\n\t\t<BaseAlertDialog.Backdrop\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AlertDialogContentProps = ComponentProps<\n\ttypeof BaseAlertDialog.Popup\n>;\n\nfunction AlertDialogContent({\n\tclassName,\n\tref,\n\t...props\n}: AlertDialogContentProps) {\n\treturn (\n\t\t<AlertDialogPortal>\n\t\t\t<AlertDialogOverlay />\n\t\t\t<BaseAlertDialog.Popup\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-white p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</AlertDialogPortal>\n\t);\n}\n\nexport type AlertDialogTitleProps = ComponentProps<\n\ttypeof BaseAlertDialog.Title\n>;\n\nfunction AlertDialogTitle({ className, ref, ...props }: AlertDialogTitleProps) {\n\treturn (\n\t\t<BaseAlertDialog.Title\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"font-medium text-lg\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AlertDialogDescriptionProps = ComponentProps<\n\ttypeof BaseAlertDialog.Description\n>;\n\nfunction AlertDialogDescription({\n\tclassName,\n\tref,\n\t...props\n}: AlertDialogDescriptionProps) {\n\treturn (\n\t\t<BaseAlertDialog.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-gray-500 text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n// Base UI doesn't have separate Action/Cancel components - both use Close\n// We export Close as both Action and Cancel for API compatibility\nconst AlertDialogAction = BaseAlertDialog.Close;\n\nconst AlertDialogCancel = BaseAlertDialog.Close;\n\nexport {\n\tAlertDialog,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogOverlay,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n};\n"]}
+{"version":3,"file":"alert-dialog.js","sourceRoot":"/","sources":["components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAGtC,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC;AAEzC,MAAM,kBAAkB,GAAG,eAAe,CAAC,OAAO,CAAC;AAEnD,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC;AAMjD,SAAS,kBAAkB,CAAC,EAC3B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACiB;IACzB,OAAO,CACN,KAAC,eAAe,CAAC,QAAQ,IACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,yHAAyH,EACzH,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,kBAAkB,CAAC,EAC3B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACiB;IACzB,OAAO,CACN,MAAC,iBAAiB,eACjB,KAAC,kBAAkB,KAAG,EACtB,KAAC,eAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,0QAA0Q,EAC1Q,SAAS,CACT,KACG,KAAK,GACR,IACiB,CACpB,CAAC;AACH,CAAC;AAMD,SAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAyB;IAC5E,OAAO,CACN,KAAC,eAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,sBAAsB,CAAC,EAC/B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACqB;IAC7B,OAAO,CACN,KAAC,eAAe,CAAC,WAAW,IAC3B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,KAC/C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,0EAA0E;AAC1E,kEAAkE;AAClE,MAAM,iBAAiB,GAAG,eAAe,CAAC,KAAK,CAAC;AAEhD,MAAM,iBAAiB,GAAG,eAAe,CAAC,KAAK,CAAC;AAEhD,OAAO,EACN,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,GAClB,CAAC","sourcesContent":["import { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst AlertDialog = BaseAlertDialog.Root;\n\nconst AlertDialogTrigger = BaseAlertDialog.Trigger;\n\nconst AlertDialogPortal = BaseAlertDialog.Portal;\n\nexport type AlertDialogOverlayProps = ComponentProps<\n\ttypeof BaseAlertDialog.Backdrop\n>;\n\nfunction AlertDialogOverlay({\n\tclassName,\n\tref,\n\t...props\n}: AlertDialogOverlayProps) {\n\treturn (\n\t\t<BaseAlertDialog.Backdrop\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AlertDialogContentProps = ComponentProps<\n\ttypeof BaseAlertDialog.Popup\n>;\n\nfunction AlertDialogContent({\n\tclassName,\n\tref,\n\t...props\n}: AlertDialogContentProps) {\n\treturn (\n\t\t<AlertDialogPortal>\n\t\t\t<AlertDialogOverlay />\n\t\t\t<BaseAlertDialog.Popup\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-surface p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</AlertDialogPortal>\n\t);\n}\n\nexport type AlertDialogTitleProps = ComponentProps<\n\ttypeof BaseAlertDialog.Title\n>;\n\nfunction AlertDialogTitle({ className, ref, ...props }: AlertDialogTitleProps) {\n\treturn (\n\t\t<BaseAlertDialog.Title\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"font-medium text-lg\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AlertDialogDescriptionProps = ComponentProps<\n\ttypeof BaseAlertDialog.Description\n>;\n\nfunction AlertDialogDescription({\n\tclassName,\n\tref,\n\t...props\n}: AlertDialogDescriptionProps) {\n\treturn (\n\t\t<BaseAlertDialog.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-sm text-text-muted\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n// Base UI doesn't have separate Action/Cancel components - both use Close\n// We export Close as both Action and Cancel for API compatibility\nconst AlertDialogAction = BaseAlertDialog.Close;\n\nconst AlertDialogCancel = BaseAlertDialog.Close;\n\nexport {\n\tAlertDialog,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogOverlay,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n};\n"]}

package/dist/components/autocomplete/autocomplete.d.ts

@@ -0,0 +1,69 @@
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
+import type React from "react";
+import type { ComponentProps, JSX } from "react";
+/**
+ * Autocomplete
+ *
+ * An input that suggests options as you type.
+ * Unlike Combobox, the input value can contain free-form text,
+ * as suggestions only optionally autocomplete the text.
+ */
+export type AutocompleteProps<ItemValue = unknown> = AutocompletePrimitive.Root.Props<ItemValue>;
+declare function Autocomplete<ItemValue>(props: AutocompleteProps<ItemValue>): JSX.Element;
+/**
+ * AutocompleteInputGroup
+ */
+export type AutocompleteInputGroupProps = ComponentProps<typeof AutocompletePrimitive.InputGroup>;
+declare function AutocompleteInputGroup({ className, ref, ...props }: AutocompleteInputGroupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AutocompleteInput
+ */
+export type AutocompleteInputProps = ComponentProps<typeof AutocompletePrimitive.Input>;
+declare function AutocompleteInput({ className, ref, ...props }: AutocompleteInputProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AutocompleteTrigger
+ */
+export type AutocompleteTriggerProps = ComponentProps<typeof AutocompletePrimitive.Trigger>;
+declare function AutocompleteTrigger({ className, ref, ...props }: AutocompleteTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AutocompleteClear
+ */
+export type AutocompleteClearProps = ComponentProps<typeof AutocompletePrimitive.Clear>;
+declare function AutocompleteClear({ className, ref, ...props }: AutocompleteClearProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AutocompleteContent
+ */
+export type AutocompleteContentProps = ComponentProps<typeof AutocompletePrimitive.Popup> & {
+    sideOffset?: number;
+};
+declare function AutocompleteContent({ className, children, sideOffset, ref, ...props }: AutocompleteContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AutocompleteList
+ */
+export type AutocompleteListProps = ComponentProps<typeof AutocompletePrimitive.List>;
+declare function AutocompleteList({ className, ref, ...props }: AutocompleteListProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AutocompleteEmpty
+ */
+export type AutocompleteEmptyProps = ComponentProps<typeof AutocompletePrimitive.Empty>;
+declare function AutocompleteEmpty({ className, ref, ...props }: AutocompleteEmptyProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AutocompleteItem
+ */
+export type AutocompleteItemProps = ComponentProps<typeof AutocompletePrimitive.Item>;
+declare function AutocompleteItem({ className, children, ref, ...props }: AutocompleteItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AutocompleteGroup
+ */
+declare const AutocompleteGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * AutocompleteGroupLabel
+ */
+export type AutocompleteGroupLabelProps = ComponentProps<typeof AutocompletePrimitive.GroupLabel>;
+declare function AutocompleteGroupLabel({ className, ref, ...props }: AutocompleteGroupLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AutocompleteSeparator
+ */
+export type AutocompleteSeparatorProps = ComponentProps<typeof AutocompletePrimitive.Separator>;
+declare function AutocompleteSeparator({ className, ref, ...props }: AutocompleteSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export { Autocomplete, AutocompleteClear, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteInputGroup, AutocompleteItem, AutocompleteList, AutocompleteSeparator, AutocompleteTrigger, };

package/dist/components/autocomplete/autocomplete.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
+import { useFormContext } from "../form-field/form-field-context";
+import { Icon } from "../icon/icon";
+import { ChevronDownIcon, Cross2Icon } from "@radix-ui/react-icons";
+import { cn } from "../../utilities/cn/cn";
+function Autocomplete(props) {
+    const { disabled, required } = useFormContext({
+        disabled: props.disabled,
+        required: props.required,
+    });
+    const Root = AutocompletePrimitive.Root;
+    return _jsx(Root, { ...props, disabled: disabled, required: required });
+}
+function AutocompleteInputGroup({ className, ref, ...props }) {
+    return (_jsx(AutocompletePrimitive.InputGroup, { ref: ref, className: cn("flex h-9 w-full items-center rounded-md border border-border-input bg-transparent text-sm shadow-sm ring-offset-background focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50", className), ...props }));
+}
+function AutocompleteInput({ className, ref, ...props }) {
+    return (_jsx(AutocompletePrimitive.Input, { ref: ref, className: cn("h-full w-full flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-text-placeholder disabled:cursor-not-allowed", className), ...props }));
+}
+function AutocompleteTrigger({ className, ref, ...props }) {
+    return (_jsx(AutocompletePrimitive.Trigger, { ref: ref, className: cn("flex shrink-0 cursor-pointer items-center justify-center px-2 opacity-50 hover:opacity-100 disabled:cursor-not-allowed", className), ...props, children: _jsx(Icon, { size: "small", children: _jsx(ChevronDownIcon, {}) }) }));
+}
+function AutocompleteClear({ className, ref, ...props }) {
+    return (_jsx(AutocompletePrimitive.Clear, { ref: ref, "aria-label": "Clear value", className: cn("flex shrink-0 cursor-pointer items-center justify-center px-1 opacity-50 hover:opacity-100 disabled:cursor-not-allowed", className), ...props, children: _jsx(Icon, { size: "small", children: _jsx(Cross2Icon, {}) }) }));
+}
+function AutocompleteContent({ className, children, sideOffset = 4, ref, ...props }) {
+    return (_jsx(AutocompletePrimitive.Portal, { children: _jsx(AutocompletePrimitive.Positioner, { sideOffset: sideOffset, children: _jsx(AutocompletePrimitive.Popup, { ref: ref, className: cn("data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:fade-out data-closed:zoom-out-95 data-open:fade-in data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md border border-border-input bg-surface text-text-secondary shadow-md transition-all data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-closed:animate-out data-open:animate-in", className), ...props, children: children }) }) }));
+}
+function AutocompleteList({ className, ref, ...props }) {
+    return (_jsx(AutocompletePrimitive.List, { ref: ref, className: cn("w-full p-1 empty:hidden", className), ...props }));
+}
+function AutocompleteEmpty({ className, ref, ...props }) {
+    return (_jsx(AutocompletePrimitive.Empty, { ref: ref, className: cn("px-2 py-4 text-center text-sm text-text-muted empty:hidden", className), ...props }));
+}
+function AutocompleteItem({ className, children, ref, ...props }) {
+    return (_jsx(AutocompletePrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50", className), ...props, children: children }));
+}
+/**
+ * AutocompleteGroup
+ */
+const AutocompleteGroup = AutocompletePrimitive.Group;
+function AutocompleteGroupLabel({ className, ref, ...props }) {
+    return (_jsx(AutocompletePrimitive.GroupLabel, { ref: ref, className: cn("px-2 py-1.5 font-semibold text-sm", className), ...props }));
+}
+function AutocompleteSeparator({ className, ref, ...props }) {
+    return (_jsx(AutocompletePrimitive.Separator, { ref: ref, className: cn("my-2 h-px bg-separator", className), ...props }));
+}
+export { Autocomplete, AutocompleteClear, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteInputGroup, AutocompleteItem, AutocompleteList, AutocompleteSeparator, AutocompleteTrigger, };
+//# sourceMappingURL=autocomplete.js.map

package/dist/components/autocomplete/autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.js","sourceRoot":"/","sources":["components/autocomplete/autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport { Icon } from \"@components/icon/icon\";\nimport { ChevronDownIcon, Cross2Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type React from \"react\";\nimport type { ComponentProps, JSX } from \"react\";\n\n/**\n * Autocomplete\n *\n * An input that suggests options as you type.\n * Unlike Combobox, the input value can contain free-form text,\n * as suggestions only optionally autocomplete the text.\n */\n\nexport type AutocompleteProps<ItemValue = unknown> =\n\tAutocompletePrimitive.Root.Props<ItemValue>;\n\nfunction Autocomplete<ItemValue>(\n\tprops: AutocompleteProps<ItemValue>,\n): JSX.Element {\n\tconst { disabled, required } = useFormContext({\n\t\tdisabled: props.disabled,\n\t\trequired: props.required,\n\t});\n\tconst Root = AutocompletePrimitive.Root as React.FC<\n\t\tAutocompleteProps<ItemValue>\n\t>;\n\treturn <Root {...props} disabled={disabled} required={required} />;\n}\n\n/**\n * AutocompleteInputGroup\n */\n\nexport type AutocompleteInputGroupProps = ComponentProps<\n\ttypeof AutocompletePrimitive.InputGroup\n>;\n\nfunction AutocompleteInputGroup({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteInputGroupProps) {\n\treturn (\n\t\t<AutocompletePrimitive.InputGroup\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-9 w-full items-center rounded-md border border-border-input bg-transparent text-sm shadow-sm ring-offset-background focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * AutocompleteInput\n */\n\nexport type AutocompleteInputProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Input\n>;\n\nfunction AutocompleteInput({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteInputProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"h-full w-full flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-text-placeholder disabled:cursor-not-allowed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * AutocompleteTrigger\n */\n\nexport type AutocompleteTriggerProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Trigger\n>;\n\nfunction AutocompleteTrigger({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteTriggerProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Trigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex shrink-0 cursor-pointer items-center justify-center px-2 opacity-50 hover:opacity-100 disabled:cursor-not-allowed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Icon size=\"small\">\n\t\t\t\t<ChevronDownIcon />\n\t\t\t</Icon>\n\t\t</AutocompletePrimitive.Trigger>\n\t);\n}\n\n/**\n * AutocompleteClear\n */\n\nexport type AutocompleteClearProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Clear\n>;\n\nfunction AutocompleteClear({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteClearProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Clear\n\t\t\tref={ref}\n\t\t\taria-label=\"Clear value\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex shrink-0 cursor-pointer items-center justify-center px-1 opacity-50 hover:opacity-100 disabled:cursor-not-allowed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Icon size=\"small\">\n\t\t\t\t<Cross2Icon />\n\t\t\t</Icon>\n\t\t</AutocompletePrimitive.Clear>\n\t);\n}\n\n/**\n * AutocompleteContent\n */\n\nexport type AutocompleteContentProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Popup\n> & {\n\tsideOffset?: number;\n};\n\nfunction AutocompleteContent({\n\tclassName,\n\tchildren,\n\tsideOffset = 4,\n\tref,\n\t...props\n}: AutocompleteContentProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Portal>\n\t\t\t<AutocompletePrimitive.Positioner sideOffset={sideOffset}>\n\t\t\t\t<AutocompletePrimitive.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:fade-out data-closed:zoom-out-95 data-open:fade-in data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md border border-border-input bg-surface text-text-secondary shadow-md transition-all data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-closed:animate-out data-open:animate-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</AutocompletePrimitive.Popup>\n\t\t\t</AutocompletePrimitive.Positioner>\n\t\t</AutocompletePrimitive.Portal>\n\t);\n}\n\n/**\n * AutocompleteList\n */\n\nexport type AutocompleteListProps = ComponentProps<\n\ttypeof AutocompletePrimitive.List\n>;\n\nfunction AutocompleteList({ className, ref, ...props }: AutocompleteListProps) {\n\treturn (\n\t\t<AutocompletePrimitive.List\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"w-full p-1 empty:hidden\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * AutocompleteEmpty\n */\n\nexport type AutocompleteEmptyProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Empty\n>;\n\nfunction AutocompleteEmpty({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteEmptyProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Empty\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"px-2 py-4 text-center text-sm text-text-muted empty:hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * AutocompleteItem\n */\n\nexport type AutocompleteItemProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Item\n>;\n\nfunction AutocompleteItem({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: AutocompleteItemProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</AutocompletePrimitive.Item>\n\t);\n}\n\n/**\n * AutocompleteGroup\n */\n\nconst AutocompleteGroup = AutocompletePrimitive.Group;\n\n/**\n * AutocompleteGroupLabel\n */\n\nexport type AutocompleteGroupLabelProps = ComponentProps<\n\ttypeof AutocompletePrimitive.GroupLabel\n>;\n\nfunction AutocompleteGroupLabel({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteGroupLabelProps) {\n\treturn (\n\t\t<AutocompletePrimitive.GroupLabel\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"px-2 py-1.5 font-semibold text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * AutocompleteSeparator\n */\n\nexport type AutocompleteSeparatorProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Separator\n>;\n\nfunction AutocompleteSeparator({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteSeparatorProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Separator\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"my-2 h-px bg-separator\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tAutocomplete,\n\tAutocompleteClear,\n\tAutocompleteContent,\n\tAutocompleteEmpty,\n\tAutocompleteGroup,\n\tAutocompleteGroupLabel,\n\tAutocompleteInput,\n\tAutocompleteInputGroup,\n\tAutocompleteItem,\n\tAutocompleteList,\n\tAutocompleteSeparator,\n\tAutocompleteTrigger,\n};\n"]}

package/dist/components/avatar/avatar-group.js

@@ -3,7 +3,7 @@ import { Children } from "react";
 function AvatarGroup({ children, maxAvatars = 3, ref, ...props }) {
     const elements = Children.toArray(children);
     const avatars = elements.slice(0, maxAvatars).reverse();
-    return (_jsxs("div", { className: "group flex w-fit flex-row-reverse items-center [&>*]:-mr-4 [&>*]:transition-all [&>*]:duration-500 [&>*]:ease-in-out hover:[&>*]:-mr-1", ...props, ref: ref, children: [elements.length > maxAvatars && (_jsxs("span", { className: "mr-0 ml-2 hidden text-gray-500 text-sm group-hover:block", children: ["+", elements.length - maxAvatars] })), avatars] }));
+    return (_jsxs("div", { className: "group flex w-fit flex-row-reverse items-center [&>*]:-mr-4 [&>*]:transition-all [&>*]:duration-500 [&>*]:ease-in-out hover:[&>*]:-mr-1", ...props, ref: ref, children: [elements.length > maxAvatars && (_jsxs("span", { className: "mr-0 ml-2 hidden text-sm text-text-muted group-hover:block", children: ["+", elements.length - maxAvatars] })), avatars] }));
 }
 export { AvatarGroup };
 //# sourceMappingURL=avatar-group.js.map

package/dist/components/avatar/avatar-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.js","sourceRoot":"/","sources":["components/avatar/avatar-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiC,MAAM,OAAO,CAAC;AAOhE,SAAS,WAAW,CAAC,EACpB,QAAQ,EACR,UAAU,GAAG,CAAC,EACd,GAAG,EACH,GAAG,KAAK,EACU;IAClB,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,OAAO,EAAE,CAAC;IAExD,OAAO,CACN,eACC,SAAS,EAAC,wIAAwI,KAC9I,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,QAAQ,CAAC,MAAM,GAAG,UAAU,IAAI,CAChC,gBAAM,SAAS,EAAC,0DAA0D,kBACvE,QAAQ,CAAC,MAAM,GAAG,UAAU,IACxB,CACP,EACA,OAAO,IACH,CACN,CAAC;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { Children, type ComponentProps, type Ref } from \"react\";\n\nexport type AvatarGroupProps = ComponentProps<\"div\"> & {\n\tmaxAvatars?: number;\n\tref?: Ref<HTMLDivElement>;\n};\n\nfunction AvatarGroup({\n\tchildren,\n\tmaxAvatars = 3,\n\tref,\n\t...props\n}: AvatarGroupProps) {\n\tconst elements = Children.toArray(children);\n\n\tconst avatars = elements.slice(0, maxAvatars).reverse();\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"group flex w-fit flex-row-reverse items-center [&>*]:-mr-4 [&>*]:transition-all [&>*]:duration-500 [&>*]:ease-in-out hover:[&>*]:-mr-1\"\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{elements.length > maxAvatars && (\n\t\t\t\t<span className=\"mr-0 ml-2 hidden text-gray-500 text-sm group-hover:block\">\n\t\t\t\t\t+{elements.length - maxAvatars}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{avatars}\n\t\t</div>\n\t);\n}\n\nexport { AvatarGroup };\n"]}
+{"version":3,"file":"avatar-group.js","sourceRoot":"/","sources":["components/avatar/avatar-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiC,MAAM,OAAO,CAAC;AAOhE,SAAS,WAAW,CAAC,EACpB,QAAQ,EACR,UAAU,GAAG,CAAC,EACd,GAAG,EACH,GAAG,KAAK,EACU;IAClB,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,OAAO,EAAE,CAAC;IAExD,OAAO,CACN,eACC,SAAS,EAAC,wIAAwI,KAC9I,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,QAAQ,CAAC,MAAM,GAAG,UAAU,IAAI,CAChC,gBAAM,SAAS,EAAC,4DAA4D,kBACzE,QAAQ,CAAC,MAAM,GAAG,UAAU,IACxB,CACP,EACA,OAAO,IACH,CACN,CAAC;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { Children, type ComponentProps, type Ref } from \"react\";\n\nexport type AvatarGroupProps = ComponentProps<\"div\"> & {\n\tmaxAvatars?: number;\n\tref?: Ref<HTMLDivElement>;\n};\n\nfunction AvatarGroup({\n\tchildren,\n\tmaxAvatars = 3,\n\tref,\n\t...props\n}: AvatarGroupProps) {\n\tconst elements = Children.toArray(children);\n\n\tconst avatars = elements.slice(0, maxAvatars).reverse();\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"group flex w-fit flex-row-reverse items-center [&>*]:-mr-4 [&>*]:transition-all [&>*]:duration-500 [&>*]:ease-in-out hover:[&>*]:-mr-1\"\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{elements.length > maxAvatars && (\n\t\t\t\t<span className=\"mr-0 ml-2 hidden text-sm text-text-muted group-hover:block\">\n\t\t\t\t\t+{elements.length - maxAvatars}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{avatars}\n\t\t</div>\n\t);\n}\n\nexport { AvatarGroup };\n"]}

package/dist/components/avatar/avatar.js

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import { cn } from "../../utilities/cn/cn";
 function Avatar({ className, ref, ...props }) {
-    return (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border-2 border-white", className), ...props }));
+    return (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border-2 border-surface", className), ...props }));
 }
 function AvatarImage({ className, ref, ...props }) {
     return (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn("absolute h-full w-full object-cover", className), ...props }));
 }
 function AvatarFallback({ className, ref, ...props }) {
-    return (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full border border-white bg-gray-700 text-white", className), ...props }));
+    return (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full border border-surface bg-primary text-on-primary", className), ...props }));
 }
 export { Avatar, AvatarFallback, AvatarImage };
 //# sourceMappingURL=avatar.js.map

package/dist/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"/","sources":["components/avatar/avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAKtC,SAAS,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAe;IACxD,OAAO,CACN,KAAC,eAAe,CAAC,IAAI,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,qFAAqF,EACrF,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAoB;IAClE,OAAO,CACN,KAAC,eAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,SAAS,CAAC,KAC3D,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAuB;IACxE,OAAO,CACN,KAAC,eAAe,CAAC,QAAQ,IACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,wGAAwG,EACxG,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nexport type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root>;\n\nfunction Avatar({ className, ref, ...props }: AvatarProps) {\n\treturn (\n\t\t<AvatarPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border-2 border-white\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AvatarImageProps = ComponentProps<typeof AvatarPrimitive.Image>;\n\nfunction AvatarImage({ className, ref, ...props }: AvatarImageProps) {\n\treturn (\n\t\t<AvatarPrimitive.Image\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"absolute h-full w-full object-cover\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AvatarFallbackProps = ComponentProps<\n\ttypeof AvatarPrimitive.Fallback\n>;\n\nfunction AvatarFallback({ className, ref, ...props }: AvatarFallbackProps) {\n\treturn (\n\t\t<AvatarPrimitive.Fallback\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-full w-full items-center justify-center rounded-full border border-white bg-gray-700 text-white\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"/","sources":["components/avatar/avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAKtC,SAAS,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAe;IACxD,OAAO,CACN,KAAC,eAAe,CAAC,IAAI,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,uFAAuF,EACvF,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAoB;IAClE,OAAO,CACN,KAAC,eAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,SAAS,CAAC,KAC3D,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAuB;IACxE,OAAO,CACN,KAAC,eAAe,CAAC,QAAQ,IACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,8GAA8G,EAC9G,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nexport type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root>;\n\nfunction Avatar({ className, ref, ...props }: AvatarProps) {\n\treturn (\n\t\t<AvatarPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border-2 border-surface\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AvatarImageProps = ComponentProps<typeof AvatarPrimitive.Image>;\n\nfunction AvatarImage({ className, ref, ...props }: AvatarImageProps) {\n\treturn (\n\t\t<AvatarPrimitive.Image\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"absolute h-full w-full object-cover\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AvatarFallbackProps = ComponentProps<\n\ttypeof AvatarPrimitive.Fallback\n>;\n\nfunction AvatarFallback({ className, ref, ...props }: AvatarFallbackProps) {\n\treturn (\n\t\t<AvatarPrimitive.Fallback\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-full w-full items-center justify-center rounded-full border border-surface bg-primary text-on-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"]}

package/dist/components/badge/badge.js

@@ -5,10 +5,10 @@ const badgeStyles = getVariants({
     base: "flex w-fit items-center justify-center rounded-full font-medium",
     variants: {
         variant: {
-            primary: "bg-gray-700 text-white",
-            secondary: "bg-gray-200 text-gray-700",
-            destructive: "bg-red-500 text-white",
-            outline: "border border-gray-700 bg-white text-gray-700",
+            primary: "bg-primary text-on-primary",
+            secondary: "bg-border text-text-secondary",
+            destructive: "bg-destructive text-on-primary",
+            outline: "border border-primary bg-surface text-text-secondary",
         },
         size: {
             small: "gap-1 px-2 py-1 text-xs",

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,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAkB/D,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;;;;;;;;;;;;;GAaG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,MAAM,EACN,GAAG,KAAK,EACI;IACZ,MAAM,YAAY,GAAkC;QACnD,SAAS,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;KACpD,CAAC;IAEF,OAAO,SAAS,CAAC;QAChB,cAAc,EAAE,KAAK;QACrB,MAAM;QACN,KAAK,EAAE,UAAU,CAAQ,YAAY,EAAE,KAAK,CAAC;KAC7C,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * Props for the Badge component\n * @interface BadgeProps\n * @extends {useRender.ComponentProps<\"div\">}\n */\nexport type BadgeProps = Omit<ComponentProps<\"div\">, \"className\"> &\n\tuseRender.ComponentProps<\"div\"> & {\n\t\t/** The visual style variant of the badge */\n\t\tvariant?: \"primary\" | \"secondary\" | \"destructive\" | \"outline\";\n\t\t/** The size of the badge, can be responsive */\n\t\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\t\t/** Additional CSS classes to apply */\n\t\tclassName?: string;\n\t};\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 *\n * @example\n * // With render prop to change the element\n * ```tsx\n * <Badge render={<a href=\"/link\" />}>Link Badge</Badge>\n * ```\n */\nfunction Badge({\n\tclassName,\n\tvariant = \"primary\",\n\tsize = \"medium\",\n\trender,\n\t...props\n}: BadgeProps) {\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: badgeStyles({ className, variant, size }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nexport { Badge };\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"/","sources":["components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAkB/D,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,iEAAiE;IACvE,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE,4BAA4B;YACrC,SAAS,EAAE,+BAA+B;YAC1C,WAAW,EAAE,gCAAgC;YAC7C,OAAO,EAAE,sDAAsD;SAC/D;QACD,IAAI,EAAE;YACL,KAAK,EAAE,yBAAyB;YAChC,MAAM,EAAE,yBAAyB;YACjC,KAAK,EAAE,yBAAyB;SAChC;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;;;GAaG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,MAAM,EACN,GAAG,KAAK,EACI;IACZ,MAAM,YAAY,GAAkC;QACnD,SAAS,EAAE,WAAW,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;KACpD,CAAC;IAEF,OAAO,SAAS,CAAC;QAChB,cAAc,EAAE,KAAK;QACrB,MAAM;QACN,KAAK,EAAE,UAAU,CAAQ,YAAY,EAAE,KAAK,CAAC;KAC7C,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * Props for the Badge component\n * @interface BadgeProps\n * @extends {useRender.ComponentProps<\"div\">}\n */\nexport type BadgeProps = Omit<ComponentProps<\"div\">, \"className\"> &\n\tuseRender.ComponentProps<\"div\"> & {\n\t\t/** The visual style variant of the badge */\n\t\tvariant?: \"primary\" | \"secondary\" | \"destructive\" | \"outline\";\n\t\t/** The size of the badge, can be responsive */\n\t\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\t\t/** Additional CSS classes to apply */\n\t\tclassName?: string;\n\t};\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-primary text-on-primary\",\n\t\t\tsecondary: \"bg-border text-text-secondary\",\n\t\t\tdestructive: \"bg-destructive text-on-primary\",\n\t\t\toutline: \"border border-primary bg-surface text-text-secondary\",\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 *\n * @example\n * // With render prop to change the element\n * ```tsx\n * <Badge render={<a href=\"/link\" />}>Link Badge</Badge>\n * ```\n */\nfunction Badge({\n\tclassName,\n\tvariant = \"primary\",\n\tsize = \"medium\",\n\trender,\n\t...props\n}: BadgeProps) {\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: badgeStyles({ className, variant, size }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nexport { Badge };\n"]}

package/dist/components/button/button.js

@@ -22,9 +22,9 @@ const buttonStyles = getVariants({
     base: "flex w-fit cursor-pointer items-center justify-center gap-2 rounded border font-semibold",
     variants: {
         variant: {
-            primary: "border-transparent bg-gray-700 text-white hover:bg-gray-800 active:bg-gray-900",
-            secondary: "border-gray-700 bg-white text-gray-700 hover:bg-gray-50 active:bg-gray-100",
-            destructive: "border-transparent bg-red-500 text-white hover:bg-red-600 active:bg-red-700",
+            primary: "border-transparent bg-primary text-on-primary hover:bg-primary-hover active:bg-primary-active",
+            secondary: "border-primary bg-surface text-text-secondary hover:bg-surface-subtle active:bg-surface-muted",
+            destructive: "border-transparent bg-destructive text-on-primary hover:bg-destructive-hover active:bg-destructive-active",
         },
         size: {
             small: "gap-2 px-2 py-1 text-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,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAS/D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,UAAU,MAAM,CAAC,EACtB,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACK;IACb,MAAM,YAAY,GAAqC;QACtD,SAAS,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;QAC/D,QAAQ;KACR,CAAC;IAEF,OAAO,SAAS,CAAC;QAChB,cAAc,EAAE,QAAQ;QACxB,MAAM;QACN,KAAK,EAAE,UAAU,CAAW,YAAY,EAAE,KAAK,CAAC;KAChD,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\n\nexport type ButtonProps = useRender.ComponentProps<\"button\"> &\n\tOmit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"className\"> & {\n\t\tvariant?: \"primary\" | \"secondary\" | \"destructive\";\n\t\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\t\tclassName?: string;\n\t};\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 and sizes.\n * Icons should be rendered by the consumer as part of children.\n *\n * @param {Object} props - The props for the Button component\n * @param {'primary' | 'secondary' | 'destructive'} [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 {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - Custom element to render instead of button\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 *\n * @example\n * // Basic usage\n * <Button>Click me</Button>\n *\n * @example\n * // With variants and size\n * <Button variant=\"secondary\" size=\"large\">\n *   Large Secondary Button\n * </Button>\n *\n * @example\n * // With icons (rendered by consumer)\n * <Button>\n *   <Icon render={<SearchIcon />} size=\"small\" />\n *   Search\n *   <Icon render={<ArrowRightIcon />} size=\"small\" />\n * </Button>\n *\n * @example\n * // As a link using render prop\n * <Button render={<a href=\"/contact\" />}>Contact Us</Button>\n *\n * @example\n * // Disabled state\n * <Button disabled>Disabled Button</Button>\n */\nexport function Button({\n\tchildren,\n\tvariant = \"primary\",\n\tsize = \"medium\",\n\tclassName,\n\tdisabled,\n\trender,\n\t...props\n}: ButtonProps) {\n\tconst defaultProps: useRender.ElementProps<\"button\"> = {\n\t\tclassName: buttonStyles({ variant, size, disabled, className }),\n\t\tchildren,\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"button\",\n\t\trender,\n\t\tprops: mergeProps<\"button\">(defaultProps, props),\n\t});\n}\n\nButton.displayName = \"Button\";\n"]}
+{"version":3,"file":"button.js","sourceRoot":"/","sources":["components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAS/D,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,+FAA+F;YAChG,SAAS,EACR,+FAA+F;YAChG,WAAW,EACV,2GAA2G;SAC5G;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,UAAU,MAAM,CAAC,EACtB,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACK;IACb,MAAM,YAAY,GAAqC;QACtD,SAAS,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;QAC/D,QAAQ;KACR,CAAC;IAEF,OAAO,SAAS,CAAC;QAChB,cAAc,EAAE,QAAQ;QACxB,MAAM;QACN,KAAK,EAAE,UAAU,CAAW,YAAY,EAAE,KAAK,CAAC;KAChD,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\n\nexport type ButtonProps = useRender.ComponentProps<\"button\"> &\n\tOmit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"className\"> & {\n\t\tvariant?: \"primary\" | \"secondary\" | \"destructive\";\n\t\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\t\tclassName?: string;\n\t};\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-primary text-on-primary hover:bg-primary-hover active:bg-primary-active\",\n\t\t\tsecondary:\n\t\t\t\t\"border-primary bg-surface text-text-secondary hover:bg-surface-subtle active:bg-surface-muted\",\n\t\t\tdestructive:\n\t\t\t\t\"border-transparent bg-destructive text-on-primary hover:bg-destructive-hover active:bg-destructive-active\",\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 and sizes.\n * Icons should be rendered by the consumer as part of children.\n *\n * @param {Object} props - The props for the Button component\n * @param {'primary' | 'secondary' | 'destructive'} [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 {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - Custom element to render instead of button\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 *\n * @example\n * // Basic usage\n * <Button>Click me</Button>\n *\n * @example\n * // With variants and size\n * <Button variant=\"secondary\" size=\"large\">\n *   Large Secondary Button\n * </Button>\n *\n * @example\n * // With icons (rendered by consumer)\n * <Button>\n *   <Icon render={<SearchIcon />} size=\"small\" />\n *   Search\n *   <Icon render={<ArrowRightIcon />} size=\"small\" />\n * </Button>\n *\n * @example\n * // As a link using render prop\n * <Button render={<a href=\"/contact\" />}>Contact Us</Button>\n *\n * @example\n * // Disabled state\n * <Button disabled>Disabled Button</Button>\n */\nexport function Button({\n\tchildren,\n\tvariant = \"primary\",\n\tsize = \"medium\",\n\tclassName,\n\tdisabled,\n\trender,\n\t...props\n}: ButtonProps) {\n\tconst defaultProps: useRender.ElementProps<\"button\"> = {\n\t\tclassName: buttonStyles({ variant, size, disabled, className }),\n\t\tchildren,\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"button\",\n\t\trender,\n\t\tprops: mergeProps<\"button\">(defaultProps, props),\n\t});\n}\n\nButton.displayName = \"Button\";\n"]}

package/dist/components/card/card.js

@@ -35,10 +35,10 @@ export const CARD_SIZES = {
 };
 const cardStyles = getVariants({
     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",
+        root: "flex flex-col rounded-lg border border-border bg-surface shadow-md",
+        header: "flex items-center justify-between border-border border-b",
         content: "flex flex-col",
-        footer: "flex items-center justify-between border-gray-200 border-t",
+        footer: "flex items-center justify-between border-border border-t",
     },
     variants: {
         size: {

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 { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { createContext, 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 = useRender.ComponentProps<\"div\"> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tclassName?: string;\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 render 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 *\n * @example\n * // With render prop to change the element\n * ```tsx\n * <Card render={<article />}>Content</Card>\n * ```\n */\nexport function Card({\n\tclassName,\n\tsize = \"medium\",\n\trender,\n\tchildren,\n\t...props\n}: CardProps) {\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: root({ className, size }),\n\t\tchildren: (\n\t\t\t<CardContext.Provider value={{ size }}>{children}</CardContext.Provider>\n\t\t),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nCard.displayName = \"Card\";\n\n/**\n * Card Header\n */\n\nexport type CardHeaderProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\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 function CardHeader({ className, render, ...props }: CardHeaderProps) {\n\tconst { size } = useCardContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: header({ className, size }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nCardHeader.displayName = \"CardHeader\";\n\n/**\n * Card Content\n */\n\nexport type CardContentProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\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 function CardContent({ className, render, ...props }: CardContentProps) {\n\tconst { size } = useCardContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: content({ className, size }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nCardContent.displayName = \"CardContent\";\n\n/**\n * Card Footer\n */\n\nexport type CardFooterProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\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 function CardFooter({ className, render, ...props }: CardFooterProps) {\n\tconst { size } = useCardContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: footer({ className, size }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\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 { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { createContext, 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 = useRender.ComponentProps<\"div\"> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tclassName?: string;\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-border bg-surface shadow-md\",\n\t\theader: \"flex items-center justify-between border-border border-b\",\n\t\tcontent: \"flex flex-col\",\n\t\tfooter: \"flex items-center justify-between border-border 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 render 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 *\n * @example\n * // With render prop to change the element\n * ```tsx\n * <Card render={<article />}>Content</Card>\n * ```\n */\nexport function Card({\n\tclassName,\n\tsize = \"medium\",\n\trender,\n\tchildren,\n\t...props\n}: CardProps) {\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: root({ className, size }),\n\t\tchildren: (\n\t\t\t<CardContext.Provider value={{ size }}>{children}</CardContext.Provider>\n\t\t),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nCard.displayName = \"Card\";\n\n/**\n * Card Header\n */\n\nexport type CardHeaderProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\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 function CardHeader({ className, render, ...props }: CardHeaderProps) {\n\tconst { size } = useCardContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: header({ className, size }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nCardHeader.displayName = \"CardHeader\";\n\n/**\n * Card Content\n */\n\nexport type CardContentProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\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 function CardContent({ className, render, ...props }: CardContentProps) {\n\tconst { size } = useCardContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: content({ className, size }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nCardContent.displayName = \"CardContent\";\n\n/**\n * Card Footer\n */\n\nexport type CardFooterProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\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 function CardFooter({ className, render, ...props }: CardFooterProps) {\n\tconst { size } = useCardContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: footer({ className, size }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nCardFooter.displayName = \"CardFooter\";\n"]}

package/dist/components/checkbox/checkbox.js

@@ -27,10 +27,10 @@ export const SIZES = {
     },
 };
 const checkboxStyles = getVariants({
-    base: "peer flex h-4 w-4 items-center justify-center rounded-sm border border-gray-700 shadow-sm focus:outline-none focus:ring-1 focus:ring-gray-700 data-[checked]:bg-gray-700 data-[checked]:text-gray-100",
+    base: "peer flex h-4 w-4 items-center justify-center rounded-sm border border-primary shadow-sm focus:outline-none focus:ring-1 focus:ring-focus-ring data-[checked]:bg-primary data-[checked]:text-on-primary",
     variants: {
         disabled: {
-            true: "cursor-not-allowed bg-gray-400 opacity-50",
+            true: "cursor-not-allowed bg-disabled-bg opacity-50",
         },
         size: {
             small: "h-4 w-4",

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