@kuzenbo/core 0.0.4 → 0.0.6

package/dist/ui/button.js

@@ -1,10 +1,11 @@
 "use client";
 
-import { o as useGlobalUISize, r as filterUndefinedProps, s as useKuzenboComponentDefaults } from "../size-provider-18EvJgDT.js";
-import { a as FIELD_TEXT_CLASS_BY_SIZE, i as FIELD_HEIGHT_CLASS_BY_SIZE, r as DEFAULT_NESTED_ICON_CLASS_BY_SIZE } from "../size-system-DTXmtQXw.js";
+import { a as useComponentSize, r as filterUndefinedProps, s as useKuzenboComponentDefaults } from "../size-provider-18EvJgDT.js";
+import { a as resolveFieldHeightClassBySize, i as resolveDefaultNestedIconClassBySize, o as resolveFieldTextClassBySize } from "../size-system-BTsMqZRQ.js";
 import { t as mergeBaseUIClassName } from "../merge-base-ui-class-name-HKsgjcXj.js";
 import { t as ButtonGroupSizeContext } from "../button-group-size-context-DW7Gn-3k.js";
 import { Spinner } from "./spinner.js";
+import { t as buttonSharedVariants } from "../button-shared-variants-J4RVI3K7.js";
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, tv } from "tailwind-variants";
@@ -12,59 +13,37 @@ import { Button as Button$1 } from "@base-ui/react/button";
 
 //#region src/ui/button/button.tsx
 const buttonVariants = tv({
-	base: "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[transform,color,background-color,border-color,box-shadow] duration-100 ease-out outline-none select-none active:scale-[0.98] motion-reduce:active:scale-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-[3px] aria-invalid:ring-danger/20 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-	variants: {
-		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90 [a]:hover:bg-primary/80",
-			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-card dark:hover:bg-muted",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-			danger: "bg-danger text-danger-foreground hover:bg-danger/90 focus-visible:border-danger-foreground/40 focus-visible:ring-danger-foreground/30 dark:bg-danger dark:text-danger-foreground dark:hover:bg-danger/80 dark:focus-visible:ring-danger-foreground/40",
-			link: "text-primary underline-offset-4 hover:underline"
-		},
-		size: {
-			md: `${FIELD_HEIGHT_CLASS_BY_SIZE.md} gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2`,
-			xs: [
-				FIELD_HEIGHT_CLASS_BY_SIZE.xs,
-				FIELD_TEXT_CLASS_BY_SIZE.xs,
-				DEFAULT_NESTED_ICON_CLASS_BY_SIZE.xs,
-				"gap-1 rounded-[min(var(--radius-md),8px)] px-2 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5"
-			],
-			sm: [
-				FIELD_HEIGHT_CLASS_BY_SIZE.sm,
-				DEFAULT_NESTED_ICON_CLASS_BY_SIZE.sm,
-				"gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5"
-			],
-			lg: `${FIELD_HEIGHT_CLASS_BY_SIZE.lg} gap-1.5 px-3 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,
-			xl: [
-				FIELD_HEIGHT_CLASS_BY_SIZE.xl,
-				FIELD_TEXT_CLASS_BY_SIZE.xl,
-				DEFAULT_NESTED_ICON_CLASS_BY_SIZE.xl,
-				"gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5"
-			],
-			icon: "size-9",
-			"icon-xs": `size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg ${DEFAULT_NESTED_ICON_CLASS_BY_SIZE.xs}`,
-			"icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
-			"icon-lg": "size-10",
-			"icon-xl": `size-11 ${DEFAULT_NESTED_ICON_CLASS_BY_SIZE.xl}`
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "md"
-	}
+	extend: buttonSharedVariants,
+	base: "group/button",
+	defaultVariants: { size: "md" },
+	variants: { size: {
+		lg: [resolveFieldHeightClassBySize("lg"), "gap-1.5 px-3 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3"],
+		md: [resolveFieldHeightClassBySize("md"), "gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"],
+		sm: [
+			resolveFieldHeightClassBySize("sm"),
+			resolveDefaultNestedIconClassBySize("sm"),
+			"gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5"
+		],
+		xl: [
+			resolveFieldHeightClassBySize("xl"),
+			resolveFieldTextClassBySize("xl"),
+			resolveDefaultNestedIconClassBySize("xl"),
+			"gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5"
+		],
+		xs: [
+			resolveFieldHeightClassBySize("xs"),
+			resolveFieldTextClassBySize("xs"),
+			resolveDefaultNestedIconClassBySize("xs"),
+			"gap-1 rounded-[min(var(--radius-md),8px)] px-2 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5"
+		]
+	} }
 });
 const BUTTON_SPINNER_SIZE_BY_BUTTON_SIZE = {
-	xs: "xs",
-	sm: "sm",
-	md: "md",
 	lg: "lg",
+	md: "md",
+	sm: "sm",
 	xl: "xl",
-	icon: "md",
-	"icon-xs": "xs",
-	"icon-sm": "sm",
-	"icon-lg": "lg",
-	"icon-xl": "xl"
+	xs: "xs"
 };
 const isButtonSize = (value) => typeof value === "string" && value in BUTTON_SPINNER_SIZE_BY_BUTTON_SIZE;
 const ButtonContent = ({ children, isLoading, size }) => /* @__PURE__ */ jsxs("span", {
@@ -84,12 +63,11 @@ const Button = (incomingProps) => {
 		...filterUndefinedProps(incomingProps)
 	};
 	const { size: buttonGroupSize } = useContext(ButtonGroupSizeContext);
-	const globalSize = useGlobalUISize();
-	const resolvedSize = isButtonSize(size) ? size : buttonGroupSize ?? (isButtonSize(componentDefaultSize) ? componentDefaultSize : globalSize ?? "md");
+	const resolvedSize = useComponentSize(isButtonSize(size) ? size : void 0, buttonGroupSize, isButtonSize(componentDefaultSize) ? componentDefaultSize : void 0);
 	return /* @__PURE__ */ jsx(Button$1, {
 		className: mergeBaseUIClassName(cn(buttonVariants({
-			variant,
-			size: resolvedSize
+			size: resolvedSize,
+			variant
 		})), className),
 		focusableWhenDisabled: Boolean(isLoading),
 		"data-loading": isLoading,

package/dist/ui/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../src/ui/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { UISize } from \"../shared/size/size-system\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nimport { ButtonGroupSizeContext } from \"../button-group/button-group-size-context\";\nimport {\n  filterUndefinedProps,\n  useGlobalUISize,\n  useKuzenboComponentDefaults,\n} from \"../shared/size/size-provider\";\nimport {\n  DEFAULT_NESTED_ICON_CLASS_BY_SIZE,\n  FIELD_HEIGHT_CLASS_BY_SIZE,\n  FIELD_TEXT_CLASS_BY_SIZE,\n} from \"../shared/size/size-system\";\nimport { Spinner } from \"../spinner/spinner\";\n\nconst buttonVariants = tv({\n  base: \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[transform,color,background-color,border-color,box-shadow] duration-100 ease-out outline-none select-none active:scale-[0.98] motion-reduce:active:scale-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-[3px] aria-invalid:ring-danger/20 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  variants: {\n    variant: {\n      default:\n        \"bg-primary text-primary-foreground hover:bg-primary/90 [a]:hover:bg-primary/80\",\n      outline:\n        \"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-card dark:hover:bg-muted\",\n      secondary:\n        \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n      ghost:\n        \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n      danger:\n        \"bg-danger text-danger-foreground hover:bg-danger/90 focus-visible:border-danger-foreground/40 focus-visible:ring-danger-foreground/30 dark:bg-danger dark:text-danger-foreground dark:hover:bg-danger/80 dark:focus-visible:ring-danger-foreground/40\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      md: `${FIELD_HEIGHT_CLASS_BY_SIZE.md} gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2`,\n      xs: [\n        FIELD_HEIGHT_CLASS_BY_SIZE.xs,\n        FIELD_TEXT_CLASS_BY_SIZE.xs,\n        DEFAULT_NESTED_ICON_CLASS_BY_SIZE.xs,\n        \"gap-1 rounded-[min(var(--radius-md),8px)] px-2 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n      ],\n      sm: [\n        FIELD_HEIGHT_CLASS_BY_SIZE.sm,\n        DEFAULT_NESTED_ICON_CLASS_BY_SIZE.sm,\n        \"gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n      ],\n      lg: `${FIELD_HEIGHT_CLASS_BY_SIZE.lg} gap-1.5 px-3 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,\n      xl: [\n        FIELD_HEIGHT_CLASS_BY_SIZE.xl,\n        FIELD_TEXT_CLASS_BY_SIZE.xl,\n        DEFAULT_NESTED_ICON_CLASS_BY_SIZE.xl,\n        \"gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5\",\n      ],\n      icon: \"size-9\",\n      \"icon-xs\": `size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg ${DEFAULT_NESTED_ICON_CLASS_BY_SIZE.xs}`,\n      \"icon-sm\":\n        \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg\",\n      \"icon-lg\": \"size-10\",\n      \"icon-xl\": `size-11 ${DEFAULT_NESTED_ICON_CLASS_BY_SIZE.xl}`,\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nexport type ButtonProps = ComponentProps<typeof ButtonPrimitive> &\n  VariantProps<typeof buttonVariants> & {\n    isLoading?: boolean;\n  };\n\ntype ButtonSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\n\nconst BUTTON_SPINNER_SIZE_BY_BUTTON_SIZE: Record<ButtonSize, UISize> = {\n  xs: \"xs\",\n  sm: \"sm\",\n  md: \"md\",\n  lg: \"lg\",\n  xl: \"xl\",\n  icon: \"md\",\n  \"icon-xs\": \"xs\",\n  \"icon-sm\": \"sm\",\n  \"icon-lg\": \"lg\",\n  \"icon-xl\": \"xl\",\n};\n\nconst isButtonSize = (value: unknown): value is ButtonSize =>\n  typeof value === \"string\" && value in BUTTON_SPINNER_SIZE_BY_BUTTON_SIZE;\n\nconst ButtonContent = ({\n  children,\n  isLoading,\n  size,\n}: {\n  children: ReactNode;\n  isLoading?: boolean;\n  size: ButtonSize;\n}) => (\n  <span className=\"relative inline-flex items-center justify-center\">\n    <span\n      className={cn(\n        \"inline-flex items-center justify-center gap-2 transition-all duration-200\",\n        isLoading\n          ? \"pointer-events-none -translate-y-full opacity-0\"\n          : \"translate-y-0 opacity-100\"\n      )}\n    >\n      {children}\n    </span>\n    <span\n      className={cn(\n        \"absolute inset-0 inline-flex items-center justify-center transition-all duration-200\",\n        isLoading\n          ? \"translate-y-0 opacity-100\"\n          : \"pointer-events-none -translate-y-full opacity-0\"\n      )}\n    >\n      <Spinner size={BUTTON_SPINNER_SIZE_BY_BUTTON_SIZE[size]} />\n    </span>\n  </span>\n);\n\nconst Button = (incomingProps: ButtonProps) => {\n  const componentDefaults = useKuzenboComponentDefaults<ButtonProps>(\"Button\");\n  const { size: componentDefaultSize, ...componentDefaultsWithoutSize } =\n    componentDefaults;\n  const {\n    className,\n    variant = \"default\",\n    size,\n    isLoading,\n    children,\n    disabled,\n    ...props\n  } = {\n    ...filterUndefinedProps(componentDefaultsWithoutSize),\n    ...filterUndefinedProps(incomingProps),\n  } as ButtonProps;\n\n  const { size: buttonGroupSize } = useContext(ButtonGroupSizeContext);\n  const globalSize = useGlobalUISize();\n\n  const resolvedSize: ButtonSize = isButtonSize(size)\n    ? size\n    : (buttonGroupSize ??\n      (isButtonSize(componentDefaultSize)\n        ? componentDefaultSize\n        : (globalSize ?? \"md\")));\n\n  return (\n    <ButtonPrimitive\n      className={mergeBaseUIClassName<ButtonPrimitive.State>(\n        cn(buttonVariants({ variant, size: resolvedSize })),\n        className\n      )}\n      focusableWhenDisabled={Boolean(isLoading)}\n      data-loading={isLoading}\n      data-size={resolvedSize}\n      data-slot=\"button\"\n      disabled={disabled || isLoading}\n      {...props}\n    >\n      <ButtonContent isLoading={isLoading} size={resolvedSize}>\n        {children}\n      </ButtonContent>\n    </ButtonPrimitive>\n  );\n};\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,iBAAiB,GAAG;CACxB,MAAM;CACN,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;GACF,WACE;GACF,OACE;GACF,QACE;GACF,MAAM;GACP;EACD,MAAM;GACJ,IAAI,GAAG,2BAA2B,GAAG;GACrC,IAAI;IACF,2BAA2B;IAC3B,yBAAyB;IACzB,kCAAkC;IAClC;IACD;GACD,IAAI;IACF,2BAA2B;IAC3B,kCAAkC;IAClC;IACD;GACD,IAAI,GAAG,2BAA2B,GAAG;GACrC,IAAI;IACF,2BAA2B;IAC3B,yBAAyB;IACzB,kCAAkC;IAClC;IACD;GACD,MAAM;GACN,WAAW,sFAAsF,kCAAkC;GACnI,WACE;GACF,WAAW;GACX,WAAW,WAAW,kCAAkC;GACzD;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;AASF,MAAM,qCAAiE;CACrE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACZ;AAED,MAAM,gBAAgB,UACpB,OAAO,UAAU,YAAY,SAAS;AAExC,MAAM,iBAAiB,EACrB,UACA,WACA,WAMA,qBAAC;CAAK,WAAU;YACd,oBAAC;EACC,WAAW,GACT,6EACA,YACI,oDACA,4BACL;EAEA;GACI,EACP,oBAAC;EACC,WAAW,GACT,wFACA,YACI,8BACA,kDACL;YAED,oBAAC,WAAQ,MAAM,mCAAmC,QAAS;GACtD;EACF;AAGT,MAAM,UAAU,kBAA+B;CAE7C,MAAM,EAAE,MAAM,sBAAsB,GAAG,iCADb,4BAAyC,SAAS;CAG5E,MAAM,EACJ,WACA,UAAU,WACV,MACA,WACA,UACA,UACA,GAAG,UACD;EACF,GAAG,qBAAqB,6BAA6B;EACrD,GAAG,qBAAqB,cAAc;EACvC;CAED,MAAM,EAAE,MAAM,oBAAoB,WAAW,uBAAuB;CACpE,MAAM,aAAa,iBAAiB;CAEpC,MAAM,eAA2B,aAAa,KAAK,GAC/C,OACC,oBACA,aAAa,qBAAqB,GAC/B,uBACC,cAAc;AAEvB,QACE,oBAACA;EACC,WAAW,qBACT,GAAG,eAAe;GAAE;GAAS,MAAM;GAAc,CAAC,CAAC,EACnD,UACD;EACD,uBAAuB,QAAQ,UAAU;EACzC,gBAAc;EACd,aAAW;EACX,aAAU;EACV,UAAU,YAAY;EACtB,GAAI;YAEJ,oBAAC;GAAyB;GAAW,MAAM;GACxC;IACa;GACA"}
+{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../src/ui/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useContext } from \"react\";\nimport { cn, tv } from \"tailwind-variants\";\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nimport { ButtonGroupSizeContext } from \"../button-group/button-group-size-context\";\nimport {\n  useComponentSize,\n  filterUndefinedProps,\n  useKuzenboComponentDefaults,\n} from \"../shared/size/size-provider\";\nimport type { UISize } from \"../shared/size/size-system\";\nimport {\n  resolveDefaultNestedIconClassBySize,\n  resolveFieldHeightClassBySize,\n  resolveFieldTextClassBySize,\n} from \"../shared/size/size-system\";\nimport { Spinner } from \"../spinner/spinner\";\nimport { buttonSharedVariants } from \"./button-shared-variants\";\n\nconst buttonVariants = tv({\n  extend: buttonSharedVariants,\n  base: \"group/button\",\n  defaultVariants: {\n    size: \"md\",\n  },\n  variants: {\n    size: {\n      lg: [\n        resolveFieldHeightClassBySize(\"lg\"),\n        \"gap-1.5 px-3 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n      ],\n      md: [\n        resolveFieldHeightClassBySize(\"md\"),\n        \"gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n      ],\n      sm: [\n        resolveFieldHeightClassBySize(\"sm\"),\n        resolveDefaultNestedIconClassBySize(\"sm\"),\n        \"gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n      ],\n      xl: [\n        resolveFieldHeightClassBySize(\"xl\"),\n        resolveFieldTextClassBySize(\"xl\"),\n        resolveDefaultNestedIconClassBySize(\"xl\"),\n        \"gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5\",\n      ],\n      xs: [\n        resolveFieldHeightClassBySize(\"xs\"),\n        resolveFieldTextClassBySize(\"xs\"),\n        resolveDefaultNestedIconClassBySize(\"xs\"),\n        \"gap-1 rounded-[min(var(--radius-md),8px)] px-2 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n      ],\n    },\n  },\n});\n\nexport type ButtonProps = ComponentProps<typeof ButtonPrimitive> &\n  VariantProps<typeof buttonVariants> & {\n    isLoading?: boolean;\n  };\n\ntype ButtonSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\n\nconst BUTTON_SPINNER_SIZE_BY_BUTTON_SIZE: Record<ButtonSize, UISize> = {\n  lg: \"lg\",\n  md: \"md\",\n  sm: \"sm\",\n  xl: \"xl\",\n  xs: \"xs\",\n};\n\nconst isButtonSize = (value: unknown): value is ButtonSize =>\n  typeof value === \"string\" && value in BUTTON_SPINNER_SIZE_BY_BUTTON_SIZE;\n\nconst ButtonContent = ({\n  children,\n  isLoading,\n  size,\n}: {\n  children: ReactNode;\n  isLoading?: boolean;\n  size: ButtonSize;\n}) => (\n  <span className=\"relative inline-flex items-center justify-center\">\n    <span\n      className={cn(\n        \"inline-flex items-center justify-center gap-2 transition-all duration-200\",\n        isLoading\n          ? \"pointer-events-none -translate-y-full opacity-0\"\n          : \"translate-y-0 opacity-100\"\n      )}\n    >\n      {children}\n    </span>\n    <span\n      className={cn(\n        \"absolute inset-0 inline-flex items-center justify-center transition-all duration-200\",\n        isLoading\n          ? \"translate-y-0 opacity-100\"\n          : \"pointer-events-none -translate-y-full opacity-0\"\n      )}\n    >\n      <Spinner size={BUTTON_SPINNER_SIZE_BY_BUTTON_SIZE[size]} />\n    </span>\n  </span>\n);\n\nconst Button = (incomingProps: ButtonProps) => {\n  const componentDefaults = useKuzenboComponentDefaults<ButtonProps>(\"Button\");\n  const { size: componentDefaultSize, ...componentDefaultsWithoutSize } =\n    componentDefaults;\n  const {\n    className,\n    variant = \"default\",\n    size,\n    isLoading,\n    children,\n    disabled,\n    ...props\n  } = {\n    ...filterUndefinedProps(componentDefaultsWithoutSize),\n    ...filterUndefinedProps(incomingProps),\n  };\n\n  const { size: buttonGroupSize } = useContext(ButtonGroupSizeContext);\n  const resolvedSize = useComponentSize(\n    isButtonSize(size) ? size : undefined,\n    buttonGroupSize,\n    isButtonSize(componentDefaultSize) ? componentDefaultSize : undefined\n  );\n\n  return (\n    <ButtonPrimitive\n      className={mergeBaseUIClassName<ButtonPrimitive.State>(\n        cn(buttonVariants({ size: resolvedSize, variant })),\n        className\n      )}\n      focusableWhenDisabled={Boolean(isLoading)}\n      data-loading={isLoading}\n      data-size={resolvedSize}\n      data-slot=\"button\"\n      disabled={disabled || isLoading}\n      {...props}\n    >\n      <ButtonContent isLoading={isLoading} size={resolvedSize}>\n        {children}\n      </ButtonContent>\n    </ButtonPrimitive>\n  );\n};\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAM,iBAAiB,GAAG;CACxB,QAAQ;CACR,MAAM;CACN,iBAAiB,EACf,MAAM,MACP;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CACF,8BAA8B,KAAK,EACnC,iFACD;EACD,IAAI,CACF,8BAA8B,KAAK,EACnC,mFACD;EACD,IAAI;GACF,8BAA8B,KAAK;GACnC,oCAAoC,KAAK;GACzC;GACD;EACD,IAAI;GACF,8BAA8B,KAAK;GACnC,4BAA4B,KAAK;GACjC,oCAAoC,KAAK;GACzC;GACD;EACD,IAAI;GACF,8BAA8B,KAAK;GACnC,4BAA4B,KAAK;GACjC,oCAAoC,KAAK;GACzC;GACD;EACF,EACF;CACF,CAAC;AASF,MAAM,qCAAiE;CACrE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,gBAAgB,UACpB,OAAO,UAAU,YAAY,SAAS;AAExC,MAAM,iBAAiB,EACrB,UACA,WACA,WAMA,qBAAC,QAAD;CAAM,WAAU;WAAhB,CACE,oBAAC,QAAD;EACE,WAAW,GACT,6EACA,YACI,oDACA,4BACL;EAEA;EACI,GACP,oBAAC,QAAD;EACE,WAAW,GACT,wFACA,YACI,8BACA,kDACL;YAED,oBAAC,SAAD,EAAS,MAAM,mCAAmC,OAAS;EACtD,EACF;;AAGT,MAAM,UAAU,kBAA+B;CAE7C,MAAM,EAAE,MAAM,sBAAsB,GAAG,iCADb,4BAAyC,SAAS;CAG5E,MAAM,EACJ,WACA,UAAU,WACV,MACA,WACA,UACA,UACA,GAAG,UACD;EACF,GAAG,qBAAqB,6BAA6B;EACrD,GAAG,qBAAqB,cAAc;EACvC;CAED,MAAM,EAAE,MAAM,oBAAoB,WAAW,uBAAuB;CACpE,MAAM,eAAe,iBACnB,aAAa,KAAK,GAAG,OAAO,QAC5B,iBACA,aAAa,qBAAqB,GAAG,uBAAuB,OAC7D;AAED,QACE,oBAACA,UAAD;EACE,WAAW,qBACT,GAAG,eAAe;GAAE,MAAM;GAAc;GAAS,CAAC,CAAC,EACnD,UACD;EACD,uBAAuB,QAAQ,UAAU;EACzC,gBAAc;EACd,aAAW;EACX,aAAU;EACV,UAAU,YAAY;EACtB,GAAI;YAEJ,oBAAC,eAAD;GAA0B;GAAW,MAAM;GACxC;GACa;EACA"}

package/dist/ui/card.d.ts

@@ -1,4 +1,4 @@
-import { t as UISize } from "../size-system-wzOLSuax.js";
+import { t as UISize } from "../size-system-BAI1CnwU.js";
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/ui/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","names":[],"sources":["../../src/ui/card/card-action.tsx","../../src/ui/card/card-content.tsx","../../src/ui/card/card-description.tsx","../../src/ui/card/card-footer.tsx","../../src/ui/card/card-header.tsx","../../src/ui/card/card-title.tsx","../../src/ui/card/card.tsx"],"mappings":";;;;;KAGY,eAAA,GAAkB,cAAA;AAAA,cAExB,UAAA;EAAc,SAAA;EAAA,GAAA;AAAA,GAAyB,eAAA,KAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFhD,gBAAA,GAAmB,cAAA;AAAA,cAEzB,WAAA;EAAe,SAAA;EAAA,GAAA;AAAA,GAAyB,gBAAA,KAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFlD,oBAAA,GAAuB,cAAA;AAAA,cAE7B,eAAA;EAAmB,SAAA;EAAA,GAAA;AAAA,GAAyB,oBAAA,KAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCF1D,eAAA,GAAkB,cAAA;AAAA,cAExB,UAAA;EAAc,SAAA;EAAA,GAAA;AAAA,GAAyB,eAAA,KAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFhD,eAAA,GAAkB,cAAA;AAAA,cAExB,UAAA;EAAc,SAAA;EAAA,GAAA;AAAA,GAAyB,eAAA,KAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFhD,cAAA,GAAiB,cAAA;AAAA,cAEvB,SAAA;EAAa,SAAA;EAAA,GAAA;AAAA,GAAyB,cAAA,KAAc,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCW9C,SAAA,GAAY,cAAA;EAA0B,IAAA,GAAO,MAAA;AAAA;AAAA,cAEnD,IAAA;EAAA,gBAAuB,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"card.d.ts","names":[],"sources":["../../src/ui/card/card-action.tsx","../../src/ui/card/card-content.tsx","../../src/ui/card/card-description.tsx","../../src/ui/card/card-footer.tsx","../../src/ui/card/card-header.tsx","../../src/ui/card/card-title.tsx","../../src/ui/card/card.tsx"],"mappings":";;;;;KAEY,eAAA,GAAkB,cAAA;AAAA,cAExB,UAAA;EAAc,SAAA;EAAA,GAAA;AAAA,GAAyB,eAAA,KAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFhD,gBAAA,GAAmB,cAAA;AAAA,cAEzB,WAAA;EAAe,SAAA;EAAA,GAAA;AAAA,GAAyB,gBAAA,KAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFlD,oBAAA,GAAuB,cAAA;AAAA,cAE7B,eAAA;EAAmB,SAAA;EAAA,GAAA;AAAA,GAAyB,oBAAA,KAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCF1D,eAAA,GAAkB,cAAA;AAAA,cAExB,UAAA;EAAc,SAAA;EAAA,GAAA;AAAA,GAAyB,eAAA,KAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFhD,eAAA,GAAkB,cAAA;AAAA,cAExB,UAAA;EAAc,SAAA;EAAA,GAAA;AAAA,GAAyB,eAAA,KAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFhD,cAAA,GAAiB,cAAA;AAAA,cAEvB,SAAA;EAAa,SAAA;EAAA,GAAA;AAAA,GAAyB,cAAA,KAAc,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCU9C,SAAA,GAAY,cAAA;EAA0B,IAAA,GAAO,MAAA;AAAA;AAAA,cAEnD,IAAA;EAAA,gBAAuB,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/card.js

@@ -14,7 +14,7 @@ const CardAction = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 //#endregion
 //#region src/ui/card/card-content.tsx
 const CardContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("group-data-[size=xs]/card:px-2.5 group-data-[size=sm]/card:px-3 group-data-[size=md]/card:px-5 group-data-[size=lg]/card:px-6 group-data-[size=xl]/card:px-7", className),
+	className: cn("group-data-[size=lg]/card:px-6 group-data-[size=md]/card:px-5 group-data-[size=sm]/card:px-3 group-data-[size=xl]/card:px-7 group-data-[size=xs]/card:px-2.5", className),
 	"data-slot": "card-content",
 	...props
 });
@@ -22,7 +22,7 @@ const CardContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 //#endregion
 //#region src/ui/card/card-description.tsx
 const CardDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("text-muted-foreground group-data-[size=xs]/card:text-xs group-data-[size=sm]/card:text-sm group-data-[size=md]/card:text-sm group-data-[size=lg]/card:text-sm group-data-[size=xl]/card:text-base", className),
+	className: cn("text-muted-foreground group-data-[size=lg]/card:text-sm group-data-[size=md]/card:text-sm group-data-[size=sm]/card:text-sm group-data-[size=xl]/card:text-base group-data-[size=xs]/card:text-xs", className),
 	"data-slot": "card-description",
 	...props
 });
@@ -30,7 +30,7 @@ const CardDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("div",
 //#endregion
 //#region src/ui/card/card-footer.tsx
 const CardFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex items-center rounded-b-xl group-data-[size=xs]/card:px-2.5 group-data-[size=sm]/card:px-3 group-data-[size=md]/card:px-5 group-data-[size=lg]/card:px-6 group-data-[size=xl]/card:px-7 group-data-[size=xs]/card:pb-2.5 group-data-[size=sm]/card:pb-3 group-data-[size=md]/card:pb-5 group-data-[size=lg]/card:pb-6 group-data-[size=xl]/card:pb-7 group-data-[size=xs]/card:[.border-t]:pt-2.5 group-data-[size=sm]/card:[.border-t]:pt-3 group-data-[size=md]/card:[.border-t]:pt-5 group-data-[size=lg]/card:[.border-t]:pt-6 group-data-[size=xl]/card:[.border-t]:pt-7", className),
+	className: cn("flex items-center rounded-b-xl group-data-[size=lg]/card:px-6 group-data-[size=lg]/card:pb-6 group-data-[size=md]/card:px-5 group-data-[size=md]/card:pb-5 group-data-[size=sm]/card:px-3 group-data-[size=sm]/card:pb-3 group-data-[size=xl]/card:px-7 group-data-[size=xl]/card:pb-7 group-data-[size=xs]/card:px-2.5 group-data-[size=xs]/card:pb-2.5 group-data-[size=lg]/card:[.border-t]:pt-6 group-data-[size=md]/card:[.border-t]:pt-5 group-data-[size=sm]/card:[.border-t]:pt-3 group-data-[size=xl]/card:[.border-t]:pt-7 group-data-[size=xs]/card:[.border-t]:pt-2.5", className),
 	"data-slot": "card-footer",
 	...props
 });
@@ -38,7 +38,7 @@ const CardFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 //#endregion
 //#region src/ui/card/card-header.tsx
 const CardHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl group-data-[size=xs]/card:px-2.5 group-data-[size=sm]/card:px-3 group-data-[size=md]/card:px-5 group-data-[size=lg]/card:px-6 group-data-[size=xl]/card:px-7 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] group-data-[size=xs]/card:[.border-b]:pb-2.5 group-data-[size=sm]/card:[.border-b]:pb-3 group-data-[size=md]/card:[.border-b]:pb-5 group-data-[size=lg]/card:[.border-b]:pb-6 group-data-[size=xl]/card:[.border-b]:pb-7", className),
+	className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl group-data-[size=lg]/card:px-6 group-data-[size=md]/card:px-5 group-data-[size=sm]/card:px-3 group-data-[size=xl]/card:px-7 group-data-[size=xs]/card:px-2.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] group-data-[size=lg]/card:[.border-b]:pb-6 group-data-[size=md]/card:[.border-b]:pb-5 group-data-[size=sm]/card:[.border-b]:pb-3 group-data-[size=xl]/card:[.border-b]:pb-7 group-data-[size=xs]/card:[.border-b]:pb-2.5", className),
 	"data-slot": "card-header",
 	...props
 });
@@ -46,7 +46,7 @@ const CardHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 //#endregion
 //#region src/ui/card/card-title.tsx
 const CardTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("leading-snug font-medium group-data-[size=xs]/card:text-sm group-data-[size=sm]/card:text-sm group-data-[size=md]/card:text-base group-data-[size=lg]/card:text-base group-data-[size=xl]/card:text-lg", className),
+	className: cn("leading-snug font-medium group-data-[size=lg]/card:text-base group-data-[size=md]/card:text-base group-data-[size=sm]/card:text-sm group-data-[size=xl]/card:text-lg group-data-[size=xs]/card:text-sm", className),
 	"data-slot": "card-title",
 	...props
 });
@@ -61,7 +61,7 @@ const Card = (incomingProps) => {
 	const { className, size: providedSize, ...props } = useCardDefaultProps(incomingProps);
 	const size = useComponentSize(providedSize);
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("group/card flex flex-col overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-xs has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=xs]:gap-2.5 data-[size=xs]:py-2.5 data-[size=xs]:text-xs data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:text-sm data-[size=md]:gap-5 data-[size=md]:py-5 data-[size=md]:text-sm data-[size=lg]:gap-6 data-[size=lg]:py-6 data-[size=lg]:text-sm data-[size=xl]:gap-7 data-[size=xl]:py-6 data-[size=xl]:text-base *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
+		className: cn("group/card border-border bg-card text-card-foreground flex flex-col overflow-hidden rounded-xl border shadow-xs has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=lg]:gap-6 data-[size=lg]:py-6 data-[size=lg]:text-sm data-[size=md]:gap-5 data-[size=md]:py-5 data-[size=md]:text-sm data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:text-sm data-[size=xl]:gap-7 data-[size=xl]:py-6 data-[size=xl]:text-base data-[size=xs]:gap-2.5 data-[size=xs]:py-2.5 data-[size=xs]:text-xs *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
 		"data-size": size,
 		"data-slot": "card",
 		...props

package/dist/ui/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../src/ui/card/card-action.tsx","../../src/ui/card/card-content.tsx","../../src/ui/card/card-description.tsx","../../src/ui/card/card-footer.tsx","../../src/ui/card/card-header.tsx","../../src/ui/card/card-title.tsx","../../src/ui/card/use-card-default-props.ts","../../src/ui/card/card.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type CardActionProps = ComponentProps<\"div\">;\n\nconst CardAction = ({ className, ...props }: CardActionProps) => (\n  <div\n    className={cn(\n      \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n      className\n    )}\n    data-slot=\"card-action\"\n    {...props}\n  />\n);\n\nexport { CardAction };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type CardContentProps = ComponentProps<\"div\">;\n\nconst CardContent = ({ className, ...props }: CardContentProps) => (\n  <div\n    className={cn(\n      \"group-data-[size=xs]/card:px-2.5 group-data-[size=sm]/card:px-3 group-data-[size=md]/card:px-5 group-data-[size=lg]/card:px-6 group-data-[size=xl]/card:px-7\",\n      className\n    )}\n    data-slot=\"card-content\"\n    {...props}\n  />\n);\n\nexport { CardContent };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type CardDescriptionProps = ComponentProps<\"div\">;\n\nconst CardDescription = ({ className, ...props }: CardDescriptionProps) => (\n  <div\n    className={cn(\n      \"text-muted-foreground group-data-[size=xs]/card:text-xs group-data-[size=sm]/card:text-sm group-data-[size=md]/card:text-sm group-data-[size=lg]/card:text-sm group-data-[size=xl]/card:text-base\",\n      className\n    )}\n    data-slot=\"card-description\"\n    {...props}\n  />\n);\n\nexport { CardDescription };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type CardFooterProps = ComponentProps<\"div\">;\n\nconst CardFooter = ({ className, ...props }: CardFooterProps) => (\n  <div\n    className={cn(\n      \"flex items-center rounded-b-xl group-data-[size=xs]/card:px-2.5 group-data-[size=sm]/card:px-3 group-data-[size=md]/card:px-5 group-data-[size=lg]/card:px-6 group-data-[size=xl]/card:px-7 group-data-[size=xs]/card:pb-2.5 group-data-[size=sm]/card:pb-3 group-data-[size=md]/card:pb-5 group-data-[size=lg]/card:pb-6 group-data-[size=xl]/card:pb-7 group-data-[size=xs]/card:[.border-t]:pt-2.5 group-data-[size=sm]/card:[.border-t]:pt-3 group-data-[size=md]/card:[.border-t]:pt-5 group-data-[size=lg]/card:[.border-t]:pt-6 group-data-[size=xl]/card:[.border-t]:pt-7\",\n      className\n    )}\n    data-slot=\"card-footer\"\n    {...props}\n  />\n);\n\nexport { CardFooter };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type CardHeaderProps = ComponentProps<\"div\">;\n\nconst CardHeader = ({ className, ...props }: CardHeaderProps) => (\n  <div\n    className={cn(\n      \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl group-data-[size=xs]/card:px-2.5 group-data-[size=sm]/card:px-3 group-data-[size=md]/card:px-5 group-data-[size=lg]/card:px-6 group-data-[size=xl]/card:px-7 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] group-data-[size=xs]/card:[.border-b]:pb-2.5 group-data-[size=sm]/card:[.border-b]:pb-3 group-data-[size=md]/card:[.border-b]:pb-5 group-data-[size=lg]/card:[.border-b]:pb-6 group-data-[size=xl]/card:[.border-b]:pb-7\",\n      className\n    )}\n    data-slot=\"card-header\"\n    {...props}\n  />\n);\n\nexport { CardHeader };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type CardTitleProps = ComponentProps<\"div\">;\n\nconst CardTitle = ({ className, ...props }: CardTitleProps) => (\n  <div\n    className={cn(\n      \"leading-snug font-medium group-data-[size=xs]/card:text-sm group-data-[size=sm]/card:text-sm group-data-[size=md]/card:text-base group-data-[size=lg]/card:text-base group-data-[size=xl]/card:text-lg\",\n      className\n    )}\n    data-slot=\"card-title\"\n    {...props}\n  />\n);\n\nexport { CardTitle };\n","import type { CardProps } from \"./card\";\n\nimport { useComponentDefaultProps } from \"../shared/size/size-provider\";\n\nexport const useCardDefaultProps = (incomingProps: CardProps): CardProps =>\n  useComponentDefaultProps<CardProps>(\"Card\", {}, incomingProps);\n","\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport type { UISize } from \"../shared/size/size-system\";\n\nimport { useComponentSize } from \"../shared/size/size-provider\";\nimport { CardAction } from \"./card-action\";\nimport { CardContent } from \"./card-content\";\nimport { CardDescription } from \"./card-description\";\nimport { CardFooter } from \"./card-footer\";\nimport { CardHeader } from \"./card-header\";\nimport { CardTitle } from \"./card-title\";\nimport { useCardDefaultProps } from \"./use-card-default-props\";\nexport type CardProps = ComponentProps<\"div\"> & { size?: UISize };\n\nconst Card = (incomingProps: CardProps) => {\n  const {\n    className,\n    size: providedSize,\n    ...props\n  } = useCardDefaultProps(incomingProps);\n  const size = useComponentSize(providedSize);\n\n  return (\n    <div\n      className={cn(\n        \"group/card flex flex-col overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-xs has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=xs]:gap-2.5 data-[size=xs]:py-2.5 data-[size=xs]:text-xs data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:text-sm data-[size=md]:gap-5 data-[size=md]:py-5 data-[size=md]:text-sm data-[size=lg]:gap-6 data-[size=lg]:py-6 data-[size=lg]:text-sm data-[size=xl]:gap-7 data-[size=xl]:py-6 data-[size=xl]:text-base *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      data-size={size}\n      data-slot=\"card\"\n      {...props}\n    />\n  );\n};\n\nCard.Action = CardAction;\nCard.Content = CardContent;\nCard.Description = CardDescription;\nCard.Footer = CardFooter;\nCard.Header = CardHeader;\nCard.Title = CardTitle;\n\nexport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n};\n\nexport type { CardActionProps } from \"./card-action\";\nexport type { CardContentProps } from \"./card-content\";\nexport type { CardDescriptionProps } from \"./card-description\";\nexport type { CardFooterProps } from \"./card-footer\";\nexport type { CardHeaderProps } from \"./card-header\";\nexport type { CardTitleProps } from \"./card-title\";\n"],"mappings":";;;;;;;AAKA,MAAM,cAAc,EAAE,WAAW,GAAG,YAClC,oBAAC;CACC,WAAW,GACT,kEACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACRJ,MAAM,eAAe,EAAE,WAAW,GAAG,YACnC,oBAAC;CACC,WAAW,GACT,gKACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACRJ,MAAM,mBAAmB,EAAE,WAAW,GAAG,YACvC,oBAAC;CACC,WAAW,GACT,qMACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACRJ,MAAM,cAAc,EAAE,WAAW,GAAG,YAClC,oBAAC;CACC,WAAW,GACT,qjBACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACRJ,MAAM,cAAc,EAAE,WAAW,GAAG,YAClC,oBAAC;CACC,WAAW,GACT,4jBACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACRJ,MAAM,aAAa,EAAE,WAAW,GAAG,YACjC,oBAAC;CACC,WAAW,GACT,0MACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACTJ,MAAa,uBAAuB,kBAClC,yBAAoC,QAAQ,EAAE,EAAE,cAAc;;;;ACahE,MAAM,QAAQ,kBAA6B;CACzC,MAAM,EACJ,WACA,MAAM,cACN,GAAG,UACD,oBAAoB,cAAc;CACtC,MAAM,OAAO,iBAAiB,aAAa;AAE3C,QACE,oBAAC;EACC,WAAW,GACT,ujBACA,UACD;EACD,aAAW;EACX,aAAU;EACV,GAAI;GACJ;;AAIN,KAAK,SAAS;AACd,KAAK,UAAU;AACf,KAAK,cAAc;AACnB,KAAK,SAAS;AACd,KAAK,SAAS;AACd,KAAK,QAAQ"}
+{"version":3,"file":"card.js","names":[],"sources":["../../src/ui/card/card-action.tsx","../../src/ui/card/card-content.tsx","../../src/ui/card/card-description.tsx","../../src/ui/card/card-footer.tsx","../../src/ui/card/card-header.tsx","../../src/ui/card/card-title.tsx","../../src/ui/card/use-card-default-props.ts","../../src/ui/card/card.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\nexport type CardActionProps = ComponentProps<\"div\">;\n\nconst CardAction = ({ className, ...props }: CardActionProps) => (\n  <div\n    className={cn(\n      \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n      className\n    )}\n    data-slot=\"card-action\"\n    {...props}\n  />\n);\n\nexport { CardAction };\n","import type { ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\nexport type CardContentProps = ComponentProps<\"div\">;\n\nconst CardContent = ({ className, ...props }: CardContentProps) => (\n  <div\n    className={cn(\n      \"group-data-[size=lg]/card:px-6 group-data-[size=md]/card:px-5 group-data-[size=sm]/card:px-3 group-data-[size=xl]/card:px-7 group-data-[size=xs]/card:px-2.5\",\n      className\n    )}\n    data-slot=\"card-content\"\n    {...props}\n  />\n);\n\nexport { CardContent };\n","import type { ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\nexport type CardDescriptionProps = ComponentProps<\"div\">;\n\nconst CardDescription = ({ className, ...props }: CardDescriptionProps) => (\n  <div\n    className={cn(\n      \"text-muted-foreground group-data-[size=lg]/card:text-sm group-data-[size=md]/card:text-sm group-data-[size=sm]/card:text-sm group-data-[size=xl]/card:text-base group-data-[size=xs]/card:text-xs\",\n      className\n    )}\n    data-slot=\"card-description\"\n    {...props}\n  />\n);\n\nexport { CardDescription };\n","import type { ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\nexport type CardFooterProps = ComponentProps<\"div\">;\n\nconst CardFooter = ({ className, ...props }: CardFooterProps) => (\n  <div\n    className={cn(\n      \"flex items-center rounded-b-xl group-data-[size=lg]/card:px-6 group-data-[size=lg]/card:pb-6 group-data-[size=md]/card:px-5 group-data-[size=md]/card:pb-5 group-data-[size=sm]/card:px-3 group-data-[size=sm]/card:pb-3 group-data-[size=xl]/card:px-7 group-data-[size=xl]/card:pb-7 group-data-[size=xs]/card:px-2.5 group-data-[size=xs]/card:pb-2.5 group-data-[size=lg]/card:[.border-t]:pt-6 group-data-[size=md]/card:[.border-t]:pt-5 group-data-[size=sm]/card:[.border-t]:pt-3 group-data-[size=xl]/card:[.border-t]:pt-7 group-data-[size=xs]/card:[.border-t]:pt-2.5\",\n      className\n    )}\n    data-slot=\"card-footer\"\n    {...props}\n  />\n);\n\nexport { CardFooter };\n","import type { ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\nexport type CardHeaderProps = ComponentProps<\"div\">;\n\nconst CardHeader = ({ className, ...props }: CardHeaderProps) => (\n  <div\n    className={cn(\n      \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl group-data-[size=lg]/card:px-6 group-data-[size=md]/card:px-5 group-data-[size=sm]/card:px-3 group-data-[size=xl]/card:px-7 group-data-[size=xs]/card:px-2.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] group-data-[size=lg]/card:[.border-b]:pb-6 group-data-[size=md]/card:[.border-b]:pb-5 group-data-[size=sm]/card:[.border-b]:pb-3 group-data-[size=xl]/card:[.border-b]:pb-7 group-data-[size=xs]/card:[.border-b]:pb-2.5\",\n      className\n    )}\n    data-slot=\"card-header\"\n    {...props}\n  />\n);\n\nexport { CardHeader };\n","import type { ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\nexport type CardTitleProps = ComponentProps<\"div\">;\n\nconst CardTitle = ({ className, ...props }: CardTitleProps) => (\n  <div\n    className={cn(\n      \"leading-snug font-medium group-data-[size=lg]/card:text-base group-data-[size=md]/card:text-base group-data-[size=sm]/card:text-sm group-data-[size=xl]/card:text-lg group-data-[size=xs]/card:text-sm\",\n      className\n    )}\n    data-slot=\"card-title\"\n    {...props}\n  />\n);\n\nexport { CardTitle };\n","import { useComponentDefaultProps } from \"../shared/size/size-provider\";\nimport type { CardProps } from \"./card\";\n\nexport const useCardDefaultProps = (incomingProps: CardProps): CardProps =>\n  useComponentDefaultProps<CardProps>(\"Card\", {}, incomingProps);\n","\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\n\nimport { useComponentSize } from \"../shared/size/size-provider\";\nimport type { UISize } from \"../shared/size/size-system\";\nimport { CardAction } from \"./card-action\";\nimport { CardContent } from \"./card-content\";\nimport { CardDescription } from \"./card-description\";\nimport { CardFooter } from \"./card-footer\";\nimport { CardHeader } from \"./card-header\";\nimport { CardTitle } from \"./card-title\";\nimport { useCardDefaultProps } from \"./use-card-default-props\";\nexport type CardProps = ComponentProps<\"div\"> & { size?: UISize };\n\nconst Card = (incomingProps: CardProps) => {\n  const {\n    className,\n    size: providedSize,\n    ...props\n  } = useCardDefaultProps(incomingProps);\n  const size = useComponentSize(providedSize);\n\n  return (\n    <div\n      className={cn(\n        \"group/card border-border bg-card text-card-foreground flex flex-col overflow-hidden rounded-xl border shadow-xs has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=lg]:gap-6 data-[size=lg]:py-6 data-[size=lg]:text-sm data-[size=md]:gap-5 data-[size=md]:py-5 data-[size=md]:text-sm data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:text-sm data-[size=xl]:gap-7 data-[size=xl]:py-6 data-[size=xl]:text-base data-[size=xs]:gap-2.5 data-[size=xs]:py-2.5 data-[size=xs]:text-xs *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      data-size={size}\n      data-slot=\"card\"\n      {...props}\n    />\n  );\n};\n\nCard.Action = CardAction;\nCard.Content = CardContent;\nCard.Description = CardDescription;\nCard.Footer = CardFooter;\nCard.Header = CardHeader;\nCard.Title = CardTitle;\n\nexport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n};\n\nexport type { CardActionProps } from \"./card-action\";\nexport type { CardContentProps } from \"./card-content\";\nexport type { CardDescriptionProps } from \"./card-description\";\nexport type { CardFooterProps } from \"./card-footer\";\nexport type { CardHeaderProps } from \"./card-header\";\nexport type { CardTitleProps } from \"./card-title\";\n"],"mappings":";;;;;;;AAIA,MAAM,cAAc,EAAE,WAAW,GAAG,YAClC,oBAAC,OAAD;CACE,WAAW,GACT,kEACA,UACD;CACD,aAAU;CACV,GAAI;CACJ;;;;ACRJ,MAAM,eAAe,EAAE,WAAW,GAAG,YACnC,oBAAC,OAAD;CACE,WAAW,GACT,gKACA,UACD;CACD,aAAU;CACV,GAAI;CACJ;;;;ACRJ,MAAM,mBAAmB,EAAE,WAAW,GAAG,YACvC,oBAAC,OAAD;CACE,WAAW,GACT,qMACA,UACD;CACD,aAAU;CACV,GAAI;CACJ;;;;ACRJ,MAAM,cAAc,EAAE,WAAW,GAAG,YAClC,oBAAC,OAAD;CACE,WAAW,GACT,qjBACA,UACD;CACD,aAAU;CACV,GAAI;CACJ;;;;ACRJ,MAAM,cAAc,EAAE,WAAW,GAAG,YAClC,oBAAC,OAAD;CACE,WAAW,GACT,4jBACA,UACD;CACD,aAAU;CACV,GAAI;CACJ;;;;ACRJ,MAAM,aAAa,EAAE,WAAW,GAAG,YACjC,oBAAC,OAAD;CACE,WAAW,GACT,0MACA,UACD;CACD,aAAU;CACV,GAAI;CACJ;;;;ACTJ,MAAa,uBAAuB,kBAClC,yBAAoC,QAAQ,EAAE,EAAE,cAAc;;;;ACYhE,MAAM,QAAQ,kBAA6B;CACzC,MAAM,EACJ,WACA,MAAM,cACN,GAAG,UACD,oBAAoB,cAAc;CACtC,MAAM,OAAO,iBAAiB,aAAa;AAE3C,QACE,oBAAC,OAAD;EACE,WAAW,GACT,ujBACA,UACD;EACD,aAAW;EACX,aAAU;EACV,GAAI;EACJ;;AAIN,KAAK,SAAS;AACd,KAAK,UAAU;AACf,KAAK,cAAc;AACnB,KAAK,SAAS;AACd,KAAK,SAAS;AACd,KAAK,QAAQ"}

package/dist/ui/carousel.d.ts

@@ -1,4 +1,4 @@
-import { Button } from "./button.js";
+import { t as ActionIcon } from "../action-icon-UjYZjXrB.js";
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
@@ -18,7 +18,7 @@ declare const CarouselItem: ({
 }: CarouselItemProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/ui/carousel/carousel-next.d.ts
-type CarouselNextProps = ComponentProps<typeof Button>;
+type CarouselNextProps = ComponentProps<typeof ActionIcon>;
 declare const CarouselNext: ({
   className,
   variant,
@@ -27,7 +27,7 @@ declare const CarouselNext: ({
 }: CarouselNextProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/ui/carousel/carousel-previous.d.ts
-type CarouselPreviousProps = ComponentProps<typeof Button>;
+type CarouselPreviousProps = ComponentProps<typeof ActionIcon>;
 declare const CarouselPrevious: ({
   className,
   variant,

package/dist/ui/carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","names":[],"sources":["../../src/ui/carousel/carousel-content.tsx","../../src/ui/carousel/carousel-item.tsx","../../src/ui/carousel/carousel-next.tsx","../../src/ui/carousel/carousel-previous.tsx","../../src/ui/carousel/use-carousel.tsx","../../src/ui/carousel/carousel.tsx"],"mappings":";;;;;;KAKY,oBAAA,GAAuB,cAAA;AAAA,cAE7B,eAAA;EAAmB,SAAA;EAAA,GAAA;AAAA,GAAyB,oBAAA,KAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCF1D,iBAAA,GAAoB,cAAA;AAAA,cAE1B,YAAA;EAAgB,SAAA;EAAA,GAAA;AAAA,GAAyB,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCCpD,iBAAA,GAAoB,cAAA,QAAsB,MAAA;AAAA,cAEhD,YAAA;EAAgB,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAKnB,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCPR,qBAAA,GAAwB,cAAA,QAAsB,MAAA;AAAA,cAEpD,gBAAA;EAAoB,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAKvB,qBAAA,KAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCRnB,WAAA,GAAc,oBAAA;AAAA,KACd,qBAAA,GAAwB,UAAA,QAAkB,gBAAA;AAAA,KAC1C,eAAA,GAAkB,qBAAA;AAAA,KAClB,cAAA,GAAiB,qBAAA;AAAA,UAEZ,aAAA;EACR,IAAA,GAAO,eAAA;EACP,OAAA,GAAU,cAAA;EACV,WAAA;EACA,MAAA,IAAU,GAAA,EAAK,WAAA;AAAA;AAAA,KAGZ,oBAAA;EACH,WAAA,EAAa,UAAA,QAAkB,gBAAA;EAC/B,GAAA,EAAK,UAAA,QAAkB,gBAAA;EACvB,UAAA;EACA,UAAA;EACA,aAAA;EACA,aAAA;AAAA,IACE,aAAA;AAAA,cAIE,WAAA,QAAW,oBAAA;;;cCPX,QAAA;EAAA;;;;;;;;KAQH,cAAA,UAAwB,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"carousel.d.ts","names":[],"sources":["../../src/ui/carousel/carousel-content.tsx","../../src/ui/carousel/carousel-item.tsx","../../src/ui/carousel/carousel-next.tsx","../../src/ui/carousel/carousel-previous.tsx","../../src/ui/carousel/use-carousel.tsx","../../src/ui/carousel/carousel.tsx"],"mappings":";;;;;;KAIY,oBAAA,GAAuB,cAAA;AAAA,cAE7B,eAAA;EAAmB,SAAA;EAAA,GAAA;AAAA,GAAyB,oBAAA,KAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCF1D,iBAAA,GAAoB,cAAA;AAAA,cAE1B,YAAA;EAAgB,SAAA;EAAA,GAAA;AAAA,GAAyB,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCCpD,iBAAA,GAAoB,cAAA,QAAsB,UAAA;AAAA,cAEhD,YAAA;EAAgB,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAKnB,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCPR,qBAAA,GAAwB,cAAA,QAAsB,UAAA;AAAA,cAEpD,gBAAA;EAAoB,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAKvB,qBAAA,KAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCRnB,WAAA,GAAc,oBAAA;AAAA,KACd,qBAAA,GAAwB,UAAA,QAAkB,gBAAA;AAAA,KAC1C,eAAA,GAAkB,qBAAA;AAAA,KAClB,cAAA,GAAiB,qBAAA;AAAA,UAEZ,aAAA;EACR,IAAA,GAAO,eAAA;EACP,OAAA,GAAU,cAAA;EACV,WAAA;EACA,MAAA,IAAU,GAAA,EAAK,WAAA;AAAA;AAAA,KAGZ,oBAAA;EACH,WAAA,EAAa,UAAA,QAAkB,gBAAA;EAC/B,GAAA,EAAK,UAAA,QAAkB,gBAAA;EACvB,UAAA;EACA,UAAA;EACA,aAAA;EACA,aAAA;AAAA,IACE,aAAA;AAAA,cAIE,WAAA,QAAW,oBAAA;;;cCfX,QAAA;EAAA;;;;;;;;KAQH,cAAA,UAAwB,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/carousel.js

@@ -1,7 +1,7 @@
 "use client";
 
-import { Button } from "./button.js";
-import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { ActionIcon } from "./action-icon.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "tailwind-variants";
 import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
@@ -46,10 +46,10 @@ const CarouselItem = ({ className, ...props }) => {
 
 //#endregion
 //#region src/ui/carousel/carousel-next.tsx
-const CarouselNext = ({ className, variant = "outline", size = "icon-sm", ...props }) => {
+const CarouselNext = ({ className, variant = "outline", size = "sm", ...props }) => {
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
-	return /* @__PURE__ */ jsxs(Button, {
-		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+	return /* @__PURE__ */ jsxs(ActionIcon, {
+		className: cn("cursor-clickable absolute touch-manipulation rounded-full", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
 		"data-slot": "carousel-next",
 		disabled: !canScrollNext,
 		onClick: scrollNext,
@@ -68,10 +68,10 @@ const CarouselNext = ({ className, variant = "outline", size = "icon-sm", ...pro
 
 //#endregion
 //#region src/ui/carousel/carousel-previous.tsx
-const CarouselPrevious = ({ className, variant = "outline", size = "icon-sm", ...props }) => {
+const CarouselPrevious = ({ className, variant = "outline", size = "sm", ...props }) => {
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-	return /* @__PURE__ */ jsxs(Button, {
-		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+	return /* @__PURE__ */ jsxs(ActionIcon, {
+		className: cn("cursor-clickable absolute touch-manipulation rounded-full", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
 		"data-slot": "carousel-previous",
 		disabled: !canScrollPrev,
 		onClick: scrollPrev,
@@ -109,14 +109,21 @@ const Carousel = ({ orientation = "horizontal", opts, setApi, plugins, className
 		api?.scrollNext();
 	}, [api]);
 	const handleKeyDown = useCallback((event) => {
-		if (event.key === "ArrowLeft") {
+		if (event.target !== event.currentTarget) return;
+		const previousKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+		const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+		if (event.key === previousKey) {
 			event.preventDefault();
 			scrollPrev();
-		} else if (event.key === "ArrowRight") {
+		} else if (event.key === nextKey) {
 			event.preventDefault();
 			scrollNext();
 		}
-	}, [scrollPrev, scrollNext]);
+	}, [
+		orientation,
+		scrollPrev,
+		scrollNext
+	]);
 	useEffect(() => {
 		if (!(api && setApi)) return;
 		setApi(api);
@@ -130,23 +137,35 @@ const Carousel = ({ orientation = "horizontal", opts, setApi, plugins, className
 			api?.off("select", onSelect);
 		};
 	}, [api, onSelect]);
+	const resolvedOrientation = orientation || (opts?.axis === "y" ? "vertical" : "horizontal");
+	const contextValue = useMemo(() => ({
+		api,
+		canScrollNext,
+		canScrollPrev,
+		carouselRef,
+		opts,
+		orientation: resolvedOrientation,
+		scrollNext,
+		scrollPrev
+	}), [
+		carouselRef,
+		api,
+		opts,
+		resolvedOrientation,
+		scrollPrev,
+		scrollNext,
+		canScrollPrev,
+		canScrollNext
+	]);
 	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
-		value: {
-			carouselRef,
-			api,
-			opts,
-			orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-			scrollPrev,
-			scrollNext,
-			canScrollPrev,
-			canScrollNext
-		},
+		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
 			"aria-roledescription": "carousel",
 			className: cn("relative", className),
 			"data-slot": "carousel",
-			onKeyDownCapture: handleKeyDown,
+			onKeyDown: handleKeyDown,
 			role: "region",
+			tabIndex: 0,
 			...props,
 			children
 		})

package/dist/ui/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","names":[],"sources":["../../src/ui/carousel/use-carousel.tsx","../../src/ui/carousel/carousel-content.tsx","../../src/ui/carousel/carousel-item.tsx","../../src/ui/carousel/carousel-next.tsx","../../src/ui/carousel/carousel-previous.tsx","../../src/ui/carousel/carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport type useEmblaCarousel from \"embla-carousel-react\";\nimport type { UseEmblaCarouselType } from \"embla-carousel-react\";\n\nimport { createContext, useContext } from \"react\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ninterface CarouselProps {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: \"horizontal\" | \"vertical\";\n  setApi?: (api: CarouselApi) => void;\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = createContext<CarouselContextProps | null>(null);\n\nconst useCarousel = () => {\n  const context = useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n};\n\nexport {\n  type CarouselApi,\n  type CarouselContextProps,\n  type CarouselProps,\n  CarouselContext,\n  useCarousel,\n};\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport { useCarousel } from \"./use-carousel\";\nexport type CarouselContentProps = ComponentProps<\"div\">;\n\nconst CarouselContent = ({ className, ...props }: CarouselContentProps) => {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n      ref={carouselRef}\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n};\n\nexport { CarouselContent };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport { useCarousel } from \"./use-carousel\";\nexport type CarouselItemProps = ComponentProps<\"div\">;\n\nconst CarouselItem = ({ className, ...props }: CarouselItemProps) => {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      aria-roledescription=\"slide\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      data-slot=\"carousel-item\"\n      role=\"group\"\n      {...props}\n    />\n  );\n};\n\nexport { CarouselItem };\n","import type { ComponentProps } from \"react\";\n\nimport { ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"tailwind-variants\";\n\nimport { Button } from \"../button/button\";\nimport { useCarousel } from \"./use-carousel\";\nexport type CarouselNextProps = ComponentProps<typeof Button>;\n\nconst CarouselNext = ({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: CarouselNextProps) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      className={cn(\n        \"absolute touch-manipulation rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      data-slot=\"carousel-next\"\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      size={size}\n      variant={variant}\n      {...props}\n    >\n      <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n};\n\nexport { CarouselNext };\n","import type { ComponentProps } from \"react\";\n\nimport { ArrowLeft01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"tailwind-variants\";\n\nimport { Button } from \"../button/button\";\nimport { useCarousel } from \"./use-carousel\";\nexport type CarouselPreviousProps = ComponentProps<typeof Button>;\n\nconst CarouselPrevious = ({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: CarouselPreviousProps) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      className={cn(\n        \"absolute touch-manipulation rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      data-slot=\"carousel-previous\"\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      size={size}\n      variant={variant}\n      {...props}\n    >\n      <HugeiconsIcon icon={ArrowLeft01Icon} strokeWidth={2} />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n};\n\nexport { CarouselPrevious };\n","\"use client\";\n\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport {\n  type ComponentProps,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport { cn } from \"tailwind-variants\";\n\nimport { CarouselContent } from \"./carousel-content\";\nimport { CarouselItem } from \"./carousel-item\";\nimport { CarouselNext } from \"./carousel-next\";\nimport { CarouselPrevious } from \"./carousel-previous\";\nimport {\n  type CarouselApi,\n  CarouselContext,\n  type CarouselProps,\n  useCarousel,\n} from \"./use-carousel\";\n\nconst Carousel = ({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"div\"> & CarouselProps) => {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  );\n  const [canScrollPrev, setCanScrollPrev] = useState(false);\n  const [canScrollNext, setCanScrollNext] = useState(false);\n\n  const onSelect = useCallback((emblaApi: CarouselApi) => {\n    if (!emblaApi) {\n      return;\n    }\n    setCanScrollPrev(emblaApi.canScrollPrev());\n    setCanScrollNext(emblaApi.canScrollNext());\n  }, []);\n\n  const scrollPrev = useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext]\n  );\n\n  useEffect(() => {\n    if (!(api && setApi)) {\n      return;\n    }\n    setApi(api);\n  }, [api, setApi]);\n\n  useEffect(() => {\n    if (!api) {\n      return;\n    }\n    onSelect(api);\n    api.on(\"reInit\", onSelect);\n    api.on(\"select\", onSelect);\n\n    return () => {\n      api?.off(\"select\", onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      {/** biome-ignore lint/a11y/useSemanticElements: region is not semantically appropriate for carousel */}\n      <div\n        aria-roledescription=\"carousel\"\n        className={cn(\"relative\", className)}\n        data-slot=\"carousel\"\n        onKeyDownCapture={handleKeyDown}\n        role=\"region\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n};\n\nCarousel.Content = CarouselContent;\nCarousel.Item = CarouselItem;\nCarousel.Next = CarouselNext;\nCarousel.Previous = CarouselPrevious;\n\nexport type { CarouselApi } from \"./use-carousel\";\n\nexport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  useCarousel,\n};\n\nexport type { CarouselProps } from \"./use-carousel\";\n\nexport type { CarouselContentProps } from \"./carousel-content\";\nexport type { CarouselItemProps } from \"./carousel-item\";\nexport type { CarouselNextProps } from \"./carousel-next\";\nexport type { CarouselPreviousProps } from \"./carousel-previous\";\n"],"mappings":"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"}
+{"version":3,"file":"carousel.js","names":[],"sources":["../../src/ui/carousel/use-carousel.tsx","../../src/ui/carousel/carousel-content.tsx","../../src/ui/carousel/carousel-item.tsx","../../src/ui/carousel/carousel-next.tsx","../../src/ui/carousel/carousel-previous.tsx","../../src/ui/carousel/carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport type useEmblaCarousel from \"embla-carousel-react\";\nimport type { UseEmblaCarouselType } from \"embla-carousel-react\";\nimport { createContext, useContext } from \"react\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ninterface CarouselProps {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: \"horizontal\" | \"vertical\";\n  setApi?: (api: CarouselApi) => void;\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = createContext<CarouselContextProps | null>(null);\n\nconst useCarousel = () => {\n  const context = useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n};\n\nexport {\n  type CarouselApi,\n  type CarouselContextProps,\n  type CarouselProps,\n  CarouselContext,\n  useCarousel,\n};\n","import type { ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\n\nimport { useCarousel } from \"./use-carousel\";\nexport type CarouselContentProps = ComponentProps<\"div\">;\n\nconst CarouselContent = ({ className, ...props }: CarouselContentProps) => {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n      ref={carouselRef}\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n};\n\nexport { CarouselContent };\n","import type { ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\n\nimport { useCarousel } from \"./use-carousel\";\nexport type CarouselItemProps = ComponentProps<\"div\">;\n\nconst CarouselItem = ({ className, ...props }: CarouselItemProps) => {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      aria-roledescription=\"slide\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      data-slot=\"carousel-item\"\n      role=\"group\"\n      {...props}\n    />\n  );\n};\n\nexport { CarouselItem };\n","import { ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\n\nimport { ActionIcon } from \"../action-icon/action-icon\";\nimport { useCarousel } from \"./use-carousel\";\nexport type CarouselNextProps = ComponentProps<typeof ActionIcon>;\n\nconst CarouselNext = ({\n  className,\n  variant = \"outline\",\n  size = \"sm\",\n  ...props\n}: CarouselNextProps) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <ActionIcon\n      className={cn(\n        \"cursor-clickable absolute touch-manipulation rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      data-slot=\"carousel-next\"\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      size={size}\n      variant={variant}\n      {...props}\n    >\n      <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />\n      <span className=\"sr-only\">Next slide</span>\n    </ActionIcon>\n  );\n};\n\nexport { CarouselNext };\n","import { ArrowLeft01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"tailwind-variants\";\n\nimport { ActionIcon } from \"../action-icon/action-icon\";\nimport { useCarousel } from \"./use-carousel\";\nexport type CarouselPreviousProps = ComponentProps<typeof ActionIcon>;\n\nconst CarouselPrevious = ({\n  className,\n  variant = \"outline\",\n  size = \"sm\",\n  ...props\n}: CarouselPreviousProps) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <ActionIcon\n      className={cn(\n        \"cursor-clickable absolute touch-manipulation rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      data-slot=\"carousel-previous\"\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      size={size}\n      variant={variant}\n      {...props}\n    >\n      <HugeiconsIcon icon={ArrowLeft01Icon} strokeWidth={2} />\n      <span className=\"sr-only\">Previous slide</span>\n    </ActionIcon>\n  );\n};\n\nexport { CarouselPrevious };\n","\"use client\";\n\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { ComponentProps, KeyboardEvent } from \"react\";\nimport { cn } from \"tailwind-variants\";\n\nimport { CarouselContent } from \"./carousel-content\";\nimport { CarouselItem } from \"./carousel-item\";\nimport { CarouselNext } from \"./carousel-next\";\nimport { CarouselPrevious } from \"./carousel-previous\";\nimport { CarouselContext, useCarousel } from \"./use-carousel\";\nimport type { CarouselApi, CarouselProps } from \"./use-carousel\";\n\nconst Carousel = ({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"div\"> & CarouselProps) => {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  );\n  const [canScrollPrev, setCanScrollPrev] = useState(false);\n  const [canScrollNext, setCanScrollNext] = useState(false);\n\n  const onSelect = useCallback((emblaApi: CarouselApi) => {\n    if (!emblaApi) {\n      return;\n    }\n    setCanScrollPrev(emblaApi.canScrollPrev());\n    setCanScrollNext(emblaApi.canScrollNext());\n  }, []);\n\n  const scrollPrev = useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.target !== event.currentTarget) {\n        return;\n      }\n\n      const previousKey =\n        orientation === \"horizontal\" ? \"ArrowLeft\" : \"ArrowUp\";\n      const nextKey = orientation === \"horizontal\" ? \"ArrowRight\" : \"ArrowDown\";\n\n      if (event.key === previousKey) {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === nextKey) {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [orientation, scrollPrev, scrollNext]\n  );\n\n  useEffect(() => {\n    if (!(api && setApi)) {\n      return;\n    }\n    setApi(api);\n  }, [api, setApi]);\n\n  useEffect(() => {\n    if (!api) {\n      return;\n    }\n    onSelect(api);\n    api.on(\"reInit\", onSelect);\n    api.on(\"select\", onSelect);\n\n    return () => {\n      api?.off(\"select\", onSelect);\n    };\n  }, [api, onSelect]);\n  const resolvedOrientation =\n    orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\");\n  const contextValue = useMemo(\n    () => ({\n      api,\n      canScrollNext,\n      canScrollPrev,\n      carouselRef,\n      opts,\n      orientation: resolvedOrientation,\n      scrollNext,\n      scrollPrev,\n    }),\n    [\n      carouselRef,\n      api,\n      opts,\n      resolvedOrientation,\n      scrollPrev,\n      scrollNext,\n      canScrollPrev,\n      canScrollNext,\n    ]\n  );\n\n  return (\n    <CarouselContext.Provider value={contextValue}>\n      {/** biome-ignore lint/a11y/useSemanticElements: region is not semantically appropriate for carousel */}\n      <div\n        aria-roledescription=\"carousel\"\n        className={cn(\"relative\", className)}\n        data-slot=\"carousel\"\n        onKeyDown={handleKeyDown}\n        role=\"region\"\n        tabIndex={0}\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n};\n\nCarousel.Content = CarouselContent;\nCarousel.Item = CarouselItem;\nCarousel.Next = CarouselNext;\nCarousel.Previous = CarouselPrevious;\n\nexport type { CarouselApi } from \"./use-carousel\";\n\nexport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  useCarousel,\n};\n\nexport type { CarouselProps } from \"./use-carousel\";\n\nexport type { CarouselContentProps } from \"./carousel-content\";\nexport type { CarouselItemProps } from \"./carousel-item\";\nexport type { CarouselNextProps } from \"./carousel-next\";\nexport type { CarouselPreviousProps } from \"./carousel-previous\";\n"],"mappings":"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"}

package/dist/ui/checkbox-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.d.ts","names":[],"sources":["../../src/ui/checkbox-group/checkbox-group.tsx"],"mappings":";;;;;KAQY,kBAAA,GAAqB,cAAA,QAAsB,eAAA;AAAA,cAE1C,aAAA;EAAiB,SAAA;EAAA,GAAA;AAAA,GAAyB,kBAAA,KAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"checkbox-group.d.ts","names":[],"sources":["../../src/ui/checkbox-group/checkbox-group.tsx"],"mappings":";;;;;KAOY,kBAAA,GAAqB,cAAA,QAAsB,eAAA;AAAA,cAE1C,aAAA;EAAiB,SAAA;EAAA,GAAA;AAAA,GAAyB,kBAAA,KAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","names":["BaseCheckboxGroup"],"sources":["../../src/ui/checkbox-group/checkbox-group.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\n\nexport type CheckboxGroupProps = ComponentProps<typeof BaseCheckboxGroup>;\n\nexport const CheckboxGroup = ({ className, ...props }: CheckboxGroupProps) => (\n  <BaseCheckboxGroup\n    className={mergeBaseUIClassName<BaseCheckboxGroup.State>(\n      \"flex flex-col items-start gap-1\",\n      className\n    )}\n    data-slot=\"checkbox-group\"\n    {...props}\n  />\n);\n"],"mappings":";;;;;;;AAUA,MAAa,iBAAiB,EAAE,WAAW,GAAG,YAC5C,oBAACA;CACC,WAAW,qBACT,mCACA,UACD;CACD,aAAU;CACV,GAAI;EACJ"}
+{"version":3,"file":"checkbox-group.js","names":["BaseCheckboxGroup"],"sources":["../../src/ui/checkbox-group/checkbox-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport type { ComponentProps } from \"react\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\n\nexport type CheckboxGroupProps = ComponentProps<typeof BaseCheckboxGroup>;\n\nexport const CheckboxGroup = ({ className, ...props }: CheckboxGroupProps) => (\n  <BaseCheckboxGroup\n    className={mergeBaseUIClassName<BaseCheckboxGroup.State>(\n      \"flex flex-col items-start gap-1\",\n      className\n    )}\n    data-slot=\"checkbox-group\"\n    {...props}\n  />\n);\n"],"mappings":";;;;;;;AASA,MAAa,iBAAiB,EAAE,WAAW,GAAG,YAC5C,oBAACA,iBAAD;CACE,WAAW,qBACT,mCACA,UACD;CACD,aAAU;CACV,GAAI;CACJ"}

package/dist/ui/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { t as UISize } from "../size-system-wzOLSuax.js";
+import { t as UISize } from "../size-system-BAI1CnwU.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as tailwind_variants0 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
@@ -7,27 +7,27 @@ import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 //#region src/ui/checkbox/checkbox-indicator.d.ts
 declare const checkboxIndicatorVariants: tailwind_variants0.TVReturnType<{
   size: {
-    xs: string;
-    sm: string;
-    md: string;
     lg: string;
+    md: string;
+    sm: string;
     xl: string;
+    xs: string;
   };
 }, undefined, "grid place-content-center text-current transition-none", {
   size: {
-    xs: string;
-    sm: string;
-    md: string;
     lg: string;
+    md: string;
+    sm: string;
     xl: string;
+    xs: string;
   };
 }, undefined, tailwind_variants0.TVReturnType<{
   size: {
-    xs: string;
-    sm: string;
-    md: string;
     lg: string;
+    md: string;
+    sm: string;
     xl: string;
+    xs: string;
   };
 }, undefined, "grid place-content-center text-current transition-none", unknown, unknown, undefined>>;
 type CheckboxIndicatorVariantProps = Omit<VariantProps<typeof checkboxIndicatorVariants>, "size"> & {
@@ -43,29 +43,29 @@ declare const CheckboxIndicator: ({
 //#region src/ui/checkbox/checkbox.d.ts
 declare const checkboxVariants: tailwind_variants0.TVReturnType<{
   size: {
-    xs: string;
-    sm: string;
-    md: string;
     lg: string;
+    md: string;
+    sm: string;
     xl: string;
+    xs: string;
   };
-}, undefined, "peer relative flex shrink-0 cursor-pointer items-center justify-center border border-input text-primary-foreground shadow-xs transition-colors outline-none group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-[3px] aria-invalid:ring-danger/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:bg-input/30 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40 dark:data-checked:bg-primary dark:data-indeterminate:bg-primary", {
+}, undefined, "peer cursor-clickable border-input text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-danger aria-invalid:ring-danger/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:bg-input/30 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40 dark:data-checked:bg-primary dark:data-indeterminate:bg-primary relative flex shrink-0 items-center justify-center border shadow-xs transition-colors outline-none group-has-disabled/field:opacity-50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]", {
   size: {
-    xs: string;
-    sm: string;
-    md: string;
     lg: string;
+    md: string;
+    sm: string;
     xl: string;
+    xs: string;
   };
 }, undefined, tailwind_variants0.TVReturnType<{
   size: {
-    xs: string;
-    sm: string;
-    md: string;
     lg: string;
+    md: string;
+    sm: string;
     xl: string;
+    xs: string;
   };
-}, undefined, "peer relative flex shrink-0 cursor-pointer items-center justify-center border border-input text-primary-foreground shadow-xs transition-colors outline-none group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-[3px] aria-invalid:ring-danger/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:bg-input/30 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40 dark:data-checked:bg-primary dark:data-indeterminate:bg-primary", unknown, unknown, undefined>>;
+}, undefined, "peer cursor-clickable border-input text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-danger aria-invalid:ring-danger/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:bg-input/30 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40 dark:data-checked:bg-primary dark:data-indeterminate:bg-primary relative flex shrink-0 items-center justify-center border shadow-xs transition-colors outline-none group-has-disabled/field:opacity-50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]", unknown, unknown, undefined>>;
 type CheckboxVariantProps = Omit<VariantProps<typeof checkboxVariants>, "size"> & {
   size?: UISize;
 };