luan-ui 0.5.3 → 0.6.1

package/dist/components/badge/badge.js

@@ -1,7 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Slot } from "../slot/slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { getVariants } from "../../utilities/responsive/responsive";
-import { forwardRef } from "react";
 const badgeStyles = getVariants({
     base: "flex w-fit items-center justify-center rounded-full font-medium",
     variants: {
@@ -25,10 +24,22 @@ const badgeStyles = getVariants({
  * ```tsx
  * <Badge variant="primary" size="medium">New</Badge>
  * ```
+ *
+ * @example
+ * // With render prop to change the element
+ * ```tsx
+ * <Badge render={<a href="/link" />}>Link Badge</Badge>
+ * ```
  */
-const Badge = forwardRef(({ className, asChild, variant = "primary", size = "medium", ...props }, ref) => {
-    const Component = asChild ? Slot : "div";
-    return (_jsx(Component, { className: badgeStyles({ className, variant, size }), ref: ref, ...props }));
-});
+function Badge({ className, variant = "primary", size = "medium", render, ...props }) {
+    const defaultProps = {
+        className: badgeStyles({ className, variant, size }),
+    };
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
 export { Badge };
 //# sourceMappingURL=badge.js.map

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

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

package/dist/components/button/button.d.ts

@@ -1,10 +1,9 @@
+import { useRender } from "@base-ui/react/use-render";
 import type { ResponsiveValue } from "../../utilities/responsive/responsive";
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export type ButtonProps = useRender.ComponentProps<"button"> & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
     variant?: "primary" | "secondary" | "destructive";
     size?: ResponsiveValue<"small" | "medium" | "large">;
-    asChild?: boolean;
-    iconStart?: React.ReactNode;
-    iconEnd?: React.ReactNode;
+    className?: string;
 };
 export declare const SIZES: {
     sm: {
@@ -24,37 +23,44 @@ export declare const SIZES: {
     };
 };
 /**
- * A flexible button component that supports variants, sizes, and icons
+ * A flexible button component that supports variants and sizes.
+ * Icons should be rendered by the consumer as part of children.
+ *
  * @param {Object} props - The props for the Button component
- * @param {'primary' | 'secondary'} [props.variant='primary'] - The visual style variant of the button
+ * @param {'primary' | 'secondary' | 'destructive'} [props.variant='primary'] - The visual style variant of the button
  * @param {'small' | 'medium' | 'large'} [props.size='medium'] - The size of the button
- * @param {boolean} [props.asChild] - Whether to render the button as a child component using Radix Slot
- * @param {React.ReactNode} [props.iconStart] - Icon element to display before the button content
- * @param {React.ReactNode} [props.iconEnd] - Icon element to display after the button content
+ * @param {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - Custom element to render instead of button
  * @param {string} [props.className] - Additional CSS classes to apply
  * @param {boolean} [props.disabled] - Whether the button is disabled
  * @returns {React.ReactElement} The Button component
+ *
  * @example
  * // Basic usage
  * <Button>Click me</Button>
  *
+ * @example
  * // With variants and size
  * <Button variant="secondary" size="large">
  *   Large Secondary Button
  * </Button>
  *
- * // With icons
- * <Button iconStart={<SearchIcon />} iconEnd={<ArrowRightIcon />}>
+ * @example
+ * // With icons (rendered by consumer)
+ * <Button>
+ *   <Icon render={<SearchIcon />} size="small" />
  *   Search
+ *   <Icon render={<ArrowRightIcon />} size="small" />
  * </Button>
  *
+ * @example
+ * // As a link using render prop
+ * <Button render={<a href="/contact" />}>Contact Us</Button>
+ *
+ * @example
  * // Disabled state
  * <Button disabled>Disabled Button</Button>
  */
-export declare const Button: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: "primary" | "secondary" | "destructive";
-    size?: ResponsiveValue<"small" | "medium" | "large">;
-    asChild?: boolean;
-    iconStart?: React.ReactNode;
-    iconEnd?: React.ReactNode;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function Button({ children, variant, size, className, disabled, render, ...props }: ButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace Button {
+    var displayName: string;
+}

package/dist/components/button/button.js

@@ -1,8 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from "../icon/icon";
-import { Slot, Slottable } from "../slot/slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { getVariants } from "../../utilities/responsive/responsive";
-import { forwardRef } from "react";
 export const SIZES = {
     sm: {
         small: "sm:text-sm sm:px-2 sm:py-1 sm:gap-2",
@@ -46,36 +44,53 @@ const buttonStyles = getVariants({
     ],
 });
 /**
- * A flexible button component that supports variants, sizes, and icons
+ * A flexible button component that supports variants and sizes.
+ * Icons should be rendered by the consumer as part of children.
+ *
  * @param {Object} props - The props for the Button component
- * @param {'primary' | 'secondary'} [props.variant='primary'] - The visual style variant of the button
+ * @param {'primary' | 'secondary' | 'destructive'} [props.variant='primary'] - The visual style variant of the button
  * @param {'small' | 'medium' | 'large'} [props.size='medium'] - The size of the button
- * @param {boolean} [props.asChild] - Whether to render the button as a child component using Radix Slot
- * @param {React.ReactNode} [props.iconStart] - Icon element to display before the button content
- * @param {React.ReactNode} [props.iconEnd] - Icon element to display after the button content
+ * @param {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - Custom element to render instead of button
  * @param {string} [props.className] - Additional CSS classes to apply
  * @param {boolean} [props.disabled] - Whether the button is disabled
  * @returns {React.ReactElement} The Button component
+ *
  * @example
  * // Basic usage
  * <Button>Click me</Button>
  *
+ * @example
  * // With variants and size
  * <Button variant="secondary" size="large">
  *   Large Secondary Button
  * </Button>
  *
- * // With icons
- * <Button iconStart={<SearchIcon />} iconEnd={<ArrowRightIcon />}>
+ * @example
+ * // With icons (rendered by consumer)
+ * <Button>
+ *   <Icon render={<SearchIcon />} size="small" />
  *   Search
+ *   <Icon render={<ArrowRightIcon />} size="small" />
  * </Button>
  *
+ * @example
+ * // As a link using render prop
+ * <Button render={<a href="/contact" />}>Contact Us</Button>
+ *
+ * @example
  * // Disabled state
  * <Button disabled>Disabled Button</Button>
  */
-export const Button = forwardRef(({ asChild, children, variant = "primary", size = "medium", className, disabled, iconStart, iconEnd, ...props }, ref) => {
-    const Component = asChild ? Slot : "button";
-    return (_jsx(Component, { ref: ref, className: buttonStyles({ variant, size, disabled, className }), ...props, children: _jsx(Slottable, { child: children, children: (child) => (_jsxs(_Fragment, { children: [iconStart && (_jsx(Icon, { size: size, asChild: true, children: iconStart })), child, iconEnd && (_jsx(Icon, { size: size, asChild: true, children: iconEnd }))] })) }) }));
-});
+export function Button({ children, variant = "primary", size = "medium", className, disabled, render, ...props }) {
+    const defaultProps = {
+        className: buttonStyles({ variant, size, disabled, className }),
+        children,
+    };
+    return useRender({
+        defaultTagName: "button",
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
 Button.displayName = "Button";
 //# sourceMappingURL=button.js.map

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

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

package/dist/components/card/card.d.ts

@@ -1,10 +1,11 @@
+import { useRender } from "@base-ui/react/use-render";
 import type { ResponsiveValue } from "../../utilities/responsive/responsive";
 /**
  * Card
  */
-export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+export type CardProps = useRender.ComponentProps<"div"> & {
     size?: ResponsiveValue<"small" | "medium" | "large">;
-    asChild?: boolean;
+    className?: string;
 };
 export declare const CARD_SIZES: {
     sm: {
@@ -30,7 +31,7 @@ export declare const CARD_SIZES: {
 };
 /**
  * Card component that provides a container with consistent styling and spacing.
- * Supports different sizes and can be used with asChild prop for composition.
+ * Supports different sizes and can be used with render prop for composition.
  *
  * @example
  * ```tsx
@@ -40,17 +41,22 @@ export declare const CARD_SIZES: {
  *   <CardFooter>Footer</CardFooter>
  * </Card>
  * ```
+ *
+ * @example
+ * // With render prop to change the element
+ * ```tsx
+ * <Card render={<article />}>Content</Card>
+ * ```
  */
-export declare const Card: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
-    size?: ResponsiveValue<"small" | "medium" | "large">;
-    asChild?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Card({ className, size, render, children, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace Card {
+    var displayName: string;
+}
 /**
  * Card Header
  */
-export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-    size?: ResponsiveValue<"small" | "medium" | "large">;
-    asChild?: boolean;
+export type CardHeaderProps = useRender.ComponentProps<"div"> & {
+    className?: string;
 };
 export declare const CARD_HEADER_SIZES: {
     sm: {
@@ -86,13 +92,15 @@ export declare const CARD_HEADER_SIZES: {
  * </CardHeader>
  * ```
  */
-export declare const CardHeader: import("react").ForwardRefExoticComponent<Omit<CardHeaderProps, "size"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function CardHeader({ className, render, ...props }: CardHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace CardHeader {
+    var displayName: string;
+}
 /**
  * Card Content
  */
-export type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
-    size?: ResponsiveValue<"small" | "medium" | "large">;
-    asChild?: boolean;
+export type CardContentProps = useRender.ComponentProps<"div"> & {
+    className?: string;
 };
 export declare const CARD_CONTENT_SIZES: {
     sm: {
@@ -127,13 +135,15 @@ export declare const CARD_CONTENT_SIZES: {
  * </CardContent>
  * ```
  */
-export declare const CardContent: import("react").ForwardRefExoticComponent<Omit<CardContentProps, "size"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function CardContent({ className, render, ...props }: CardContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace CardContent {
+    var displayName: string;
+}
 /**
  * Card Footer
  */
-export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
-    size?: ResponsiveValue<"small" | "medium" | "large">;
-    asChild?: boolean;
+export type CardFooterProps = useRender.ComponentProps<"div"> & {
+    className?: string;
 };
 export declare const CARD_FOOTER_SIZES: {
     sm: {
@@ -169,4 +179,7 @@ export declare const CARD_FOOTER_SIZES: {
  * </CardFooter>
  * ```
  */
-export declare const CardFooter: import("react").ForwardRefExoticComponent<Omit<CardFooterProps, "size"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function CardFooter({ className, render, ...props }: CardFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace CardFooter {
+    var displayName: string;
+}

package/dist/components/card/card.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Slot } from "../slot/slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { getVariants } from "../../utilities/responsive/responsive";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, useContext } from "react";
 const CardContext = createContext(undefined);
 const useCardContext = () => {
     const context = useContext(CardContext);
@@ -65,7 +66,7 @@ const cardStyles = getVariants({
 const { root, header, content, footer } = cardStyles();
 /**
  * Card component that provides a container with consistent styling and spacing.
- * Supports different sizes and can be used with asChild prop for composition.
+ * Supports different sizes and can be used with render prop for composition.
  *
  * @example
  * ```tsx
@@ -75,11 +76,24 @@ const { root, header, content, footer } = cardStyles();
  *   <CardFooter>Footer</CardFooter>
  * </Card>
  * ```
+ *
+ * @example
+ * // With render prop to change the element
+ * ```tsx
+ * <Card render={<article />}>Content</Card>
+ * ```
  */
-export const Card = forwardRef(({ className, size = "medium", asChild, ...props }, ref) => {
-    const Component = asChild ? Slot : "div";
-    return (_jsx(CardContext.Provider, { value: { size }, children: _jsx(Component, { ref: ref, className: root({ className, size }), ...props }) }));
-});
+export function Card({ className, size = "medium", render, children, ...props }) {
+    const defaultProps = {
+        className: root({ className, size }),
+        children: (_jsx(CardContext.Provider, { value: { size }, children: children })),
+    };
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
 Card.displayName = "Card";
 export const CARD_HEADER_SIZES = {
     sm: {
@@ -115,11 +129,17 @@ export const CARD_HEADER_SIZES = {
  * </CardHeader>
  * ```
  */
-export const CardHeader = forwardRef(({ className, asChild, ...props }, ref) => {
+export function CardHeader({ className, render, ...props }) {
     const { size } = useCardContext();
-    const Component = asChild ? Slot : "div";
-    return (_jsx(Component, { ref: ref, className: header({ className, size }), ...props }));
-});
+    const defaultProps = {
+        className: header({ className, size }),
+    };
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
 CardHeader.displayName = "CardHeader";
 export const CARD_CONTENT_SIZES = {
     sm: {
@@ -154,11 +174,17 @@ export const CARD_CONTENT_SIZES = {
  * </CardContent>
  * ```
  */
-export const CardContent = forwardRef(({ className, asChild, ...props }, ref) => {
+export function CardContent({ className, render, ...props }) {
     const { size } = useCardContext();
-    const Component = asChild ? Slot : "div";
-    return (_jsx(Component, { ref: ref, className: content({ className, size }), ...props }));
-});
+    const defaultProps = {
+        className: content({ className, size }),
+    };
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
 CardContent.displayName = "CardContent";
 export const CARD_FOOTER_SIZES = {
     sm: {
@@ -194,10 +220,16 @@ export const CARD_FOOTER_SIZES = {
  * </CardFooter>
  * ```
  */
-export const CardFooter = forwardRef(({ className, asChild, ...props }, ref) => {
+export function CardFooter({ className, render, ...props }) {
     const { size } = useCardContext();
-    const Component = asChild ? Slot : "div";
-    return (_jsx(Component, { ref: ref, className: footer({ className, size }), ...props }));
-});
+    const defaultProps = {
+        className: footer({ className, size }),
+    };
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
 CardFooter.displayName = "CardFooter";
 //# sourceMappingURL=card.js.map

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

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

package/dist/components/checkbox/checkbox.d.ts

@@ -1,8 +1,9 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { type ResponsiveValue } from "../../utilities/responsive/responsive";
-import { Checkbox as CheckboxPrimitive } from "radix-ui";
-import { type ComponentPropsWithoutRef } from "react";
-export type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+import type { ComponentProps } from "react";
+export type CheckboxProps = Omit<ComponentProps<typeof CheckboxPrimitive.Root>, "className"> & {
     size?: ResponsiveValue<"small" | "medium" | "large">;
+    className?: string;
 };
 export declare const SIZES: {
     sm: {
@@ -27,13 +28,11 @@ export declare const SIZES: {
     };
 };
 /**
- * A checkbox component built on top of Radix UI's checkbox primitive.
+ * A checkbox component built on top of Base UI's checkbox primitive.
  *
  * @example
  * ```tsx
  * <Checkbox id="checkbox" onCheckedChange={(checked) => console.log(checked)} />
  * ```
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
-    size?: ResponsiveValue<"small" | "medium" | "large">;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function Checkbox({ className, disabled: initialDisabled, required: initialRequired, size, ref, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkbox/checkbox.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { useFormContext } from "../form-field/form-field-context";
 import { Icon } from "../icon/icon";
 import { CheckIcon } from "@radix-ui/react-icons";
 import { getVariants, mapResponsiveValue, } from "../../utilities/responsive/responsive";
-import { Checkbox as CheckboxPrimitive } from "radix-ui";
-import { forwardRef, } from "react";
 export const SIZES = {
     sm: {
         small: "sm:h-4 sm:w-4",
@@ -28,7 +27,7 @@ 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-[state=checked]:bg-gray-700 data-[state=checked]:text-gray-100",
+    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",
     variants: {
         disabled: {
             true: "cursor-not-allowed bg-gray-400 opacity-50",
@@ -46,20 +45,19 @@ const iconSizeMap = {
     large: "medium",
 };
 /**
- * A checkbox component built on top of Radix UI's checkbox primitive.
+ * A checkbox component built on top of Base UI's checkbox primitive.
  *
  * @example
  * ```tsx
  * <Checkbox id="checkbox" onCheckedChange={(checked) => console.log(checked)} />
  * ```
  */
-export const Checkbox = forwardRef(({ className, disabled: initialDisabled, required: initialRequired, size = "medium", ...props }, ref) => {
+export function Checkbox({ className, disabled: initialDisabled, required: initialRequired, size = "medium", ref, ...props }) {
     const iconSize = mapResponsiveValue(size, (size) => iconSizeMap[size]);
     const { disabled, required } = useFormContext({
         disabled: initialDisabled,
         required: initialRequired,
     });
-    return (_jsx(CheckboxPrimitive.Root, { className: checkboxStyles({ disabled, size, className }), ref: ref, disabled: disabled, required: required, ...props, children: _jsx(CheckboxPrimitive.Indicator, { children: _jsx(Icon, { asChild: true, size: iconSize, children: _jsx(CheckIcon, {}) }) }) }));
-});
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+    return (_jsx(CheckboxPrimitive.Root, { className: checkboxStyles({ disabled, size, className }), ref: ref, disabled: disabled, required: required, ...props, children: _jsx(CheckboxPrimitive.Indicator, { children: _jsx(Icon, { render: _jsx(CheckIcon, {}), size: iconSize }) }) }));
+}
 //# sourceMappingURL=checkbox.js.map

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

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