@kuzenbo/core 0.0.5 → 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 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,54 +13,32 @@ import { Button as Button$1 } from "@base-ui/react/button";
 
 //#region src/ui/button/button.tsx
 const buttonVariants = tv({
-	base: "group/button cursor-clickable focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40 inline-flex shrink-0 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 focus-visible:ring-[3px] active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-[3px] motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-	defaultVariants: {
-		size: "md",
-		variant: "default"
-	},
-	variants: {
-		size: {
-			icon: "size-9",
-			"icon-lg": "size-10",
-			"icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
-			"icon-xl": ["size-11", resolveDefaultNestedIconClassBySize("xl")],
-			"icon-xs": ["size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg", resolveDefaultNestedIconClassBySize("xs")],
-			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"
-			]
-		},
-		variant: {
-			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",
-			default: "bg-primary text-primary-foreground hover:bg-primary/90 [a]:hover:bg-primary/80",
-			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-			link: "text-primary underline-offset-4 hover:underline",
-			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"
-		}
-	}
+	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 = {
-	icon: "md",
-	"icon-lg": "lg",
-	"icon-sm": "sm",
-	"icon-xl": "xl",
-	"icon-xs": "xs",
 	lg: "lg",
 	md: "md",
 	sm: "sm",
@@ -84,8 +63,7 @@ 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({
 			size: resolvedSize,

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 { 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  filterUndefinedProps,\n  useGlobalUISize,\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\";\n\nconst buttonVariants = tv({\n  base: \"group/button cursor-clickable focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40 inline-flex shrink-0 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 focus-visible:ring-[3px] active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-[3px] motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  defaultVariants: {\n    size: \"md\",\n    variant: \"default\",\n  },\n  variants: {\n    size: {\n      icon: \"size-9\",\n      \"icon-lg\": \"size-10\",\n      \"icon-sm\":\n        \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg\",\n      \"icon-xl\": [\"size-11\", resolveDefaultNestedIconClassBySize(\"xl\")],\n      \"icon-xs\": [\n        \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg\",\n        resolveDefaultNestedIconClassBySize(\"xs\"),\n      ],\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    variant: {\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      default:\n        \"bg-primary text-primary-foreground hover:bg-primary/90 [a]:hover:bg-primary/80\",\n      ghost:\n        \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n      link: \"text-primary underline-offset-4 hover:underline\",\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    },\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  icon: \"md\",\n  \"icon-lg\": \"lg\",\n  \"icon-sm\": \"sm\",\n  \"icon-xl\": \"xl\",\n  \"icon-xs\": \"xs\",\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  } 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({ 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":";;;;;;;;;;;;;AAuBA,MAAM,iBAAiB,GAAG;CACxB,MAAM;CACN,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,MAAM;GACJ,MAAM;GACN,WAAW;GACX,WACE;GACF,WAAW,CAAC,WAAW,oCAAoC,KAAK,CAAC;GACjE,WAAW,CACT,sFACA,oCAAoC,KAAK,CAC1C;GACD,IAAI,CACF,8BAA8B,KAAK,EACnC,iFACD;GACD,IAAI,CACF,8BAA8B,KAAK,EACnC,mFACD;GACD,IAAI;IACF,8BAA8B,KAAK;IACnC,oCAAoC,KAAK;IACzC;IACD;GACD,IAAI;IACF,8BAA8B,KAAK;IACnC,4BAA4B,KAAK;IACjC,oCAAoC,KAAK;IACzC;IACD;GACD,IAAI;IACF,8BAA8B,KAAK;IACnC,4BAA4B,KAAK;IACjC,oCAAoC,KAAK;IACzC;IACD;GACF;EACD,SAAS;GACP,QACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;GACF,WACE;GACH;EACF;CACF,CAAC;AASF,MAAM,qCAAiE;CACrE,MAAM;CACN,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACX,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,aAAa,iBAAiB;CAEpC,MAAM,eAA2B,aAAa,KAAK,GAC/C,OACC,oBACA,aAAa,qBAAqB,GAC/B,uBACC,cAAc;AAEvB,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"}
+{"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/carousel.d.ts

@@ -1,4 +1,4 @@
-import { t as Button } from "../button-nAbTNrxA.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":";;;;;;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,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;;;cCfX,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,6 +1,6 @@
 "use client";
 
-import { Button } from "./button.js";
+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";
@@ -46,9 +46,9 @@ 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, {
+	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,
@@ -68,9 +68,9 @@ 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, {
+	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,

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\";\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 { 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        \"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    </Button>\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 { 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        \"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    </Button>\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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"}
+{"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.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";

package/dist/ui/combobox.d.ts

@@ -1,4 +1,4 @@
-import { r as InputSize } from "../input-WWoBCgxe.js";
+import { r as InputSize } from "../input-BeE717GK.js";
 import * as react from "react";
 import { ComponentProps, ComponentPropsWithRef } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";

package/dist/ui/combobox.js

@@ -2,8 +2,8 @@
 
 import { a as useComponentSize } from "../size-provider-18EvJgDT.js";
 import { t as mergeBaseUIClassName } from "../merge-base-ui-class-name-HKsgjcXj.js";
-import { Button } from "./button.js";
-import { a as InputGroupButton, i as InputGroupInput, o as InputGroupAddon, t as InputGroup } from "../input-group-CjcHP0L4.js";
+import { ActionIcon } from "./action-icon.js";
+import { a as InputGroupButton, i as InputGroupInput, o as InputGroupAddon, t as InputGroup } from "../input-group-7kPror1q.js";
 import { createContext, useContext, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
@@ -33,9 +33,9 @@ const ComboboxContext = createContext({ size: "md" });
 
 //#endregion
 //#region src/ui/combobox/combobox-chip-remove.tsx
-const mapComboboxSizeToButtonIconSize = (size) => {
-	if (size === "xl") return "icon-sm";
-	return "icon-xs";
+const mapComboboxSizeToActionIconSize = (size) => {
+	if (size === "xl") return "sm";
+	return "xs";
 };
 const ComboboxChipRemove = ({ className, size, ...props }) => {
 	const { size: contextSize } = useContext(ComboboxContext);
@@ -44,8 +44,8 @@ const ComboboxChipRemove = ({ className, size, ...props }) => {
 		className: mergeBaseUIClassName("-ml-1 cursor-clickable opacity-50 hover:opacity-100", className),
 		"data-size": resolvedSize,
 		"data-slot": "combobox-chip-remove",
-		render: /* @__PURE__ */ jsx(Button, {
-			size: mapComboboxSizeToButtonIconSize(resolvedSize),
+		render: /* @__PURE__ */ jsx(ActionIcon, {
+			size: mapComboboxSizeToActionIconSize(resolvedSize),
 			variant: "ghost"
 		}),
 		...props,