@kuzenbo/core 0.0.1 → 0.0.3

package/dist/ui/button-group.js

@@ -0,0 +1,105 @@
+import { a as useComponentSize } from "../size-provider-18EvJgDT.js";
+import { t as ButtonGroupSizeContext } from "../button-group-size-context-DW7Gn-3k.js";
+import { Separator } from "./separator.js";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cn, tv } from "tailwind-variants";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/ui/button-group/button-group-separator.tsx
+const buttonGroupSeparatorVariants = tv({
+	base: "relative self-stretch bg-input data-[orientation=horizontal]:w-auto data-[orientation=vertical]:h-auto",
+	variants: { size: {
+		xs: "data-[orientation=horizontal]:mx-px data-[orientation=vertical]:my-px",
+		sm: "data-[orientation=horizontal]:mx-px data-[orientation=vertical]:my-px",
+		md: "data-[orientation=horizontal]:mx-px data-[orientation=vertical]:my-px",
+		lg: "data-[orientation=horizontal]:mx-0.5 data-[orientation=vertical]:my-0.5",
+		xl: "data-[orientation=horizontal]:mx-0.5 data-[orientation=vertical]:my-0.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const ButtonGroupSeparator = ({ className, orientation = "vertical", size, ...props }) => {
+	const { size: groupSize } = useContext(ButtonGroupSizeContext);
+	const resolvedSize = size ?? groupSize ?? "md";
+	return /* @__PURE__ */ jsx(Separator, {
+		className: cn(buttonGroupSeparatorVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize,
+		"data-slot": "button-group-separator",
+		orientation,
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/button-group/button-group-text.tsx
+const buttonGroupTextVariants = tv({
+	base: "flex items-center border border-border bg-muted font-medium [&_svg]:pointer-events-none",
+	variants: { size: {
+		xs: "gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+		sm: "gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 text-sm [&_svg:not([class*='size-'])]:size-3.5",
+		md: "gap-2 rounded-md px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+		lg: "gap-2 rounded-md px-3 text-sm [&_svg:not([class*='size-'])]:size-4",
+		xl: "gap-2.5 rounded-md px-4 text-base [&_svg:not([class*='size-'])]:size-5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const ButtonGroupText = ({ className, render, size, ...props }) => {
+	const { size: groupSize } = useContext(ButtonGroupSizeContext);
+	const resolvedSize = size ?? groupSize ?? "md";
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn(buttonGroupTextVariants({ size: resolvedSize }), className) }, props),
+		render,
+		state: {
+			slot: "button-group-text",
+			size: resolvedSize
+		}
+	});
+};
+
+//#endregion
+//#region src/ui/button-group/button-group.tsx
+const buttonGroupVariants = tv({
+	base: "group/button-group flex w-fit items-stretch overflow-hidden *:focus-visible:relative *:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-[inherit] [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+	variants: {
+		orientation: {
+			horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-[inherit]! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+			vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-[inherit]! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"
+		},
+		size: {
+			xs: "has-[>[data-slot=button-group]]:gap-1 rounded-[min(var(--radius-md),8px)]",
+			sm: "has-[>[data-slot=button-group]]:gap-1 rounded-[min(var(--radius-md),10px)]",
+			md: "has-[>[data-slot=button-group]]:gap-2 rounded-md",
+			lg: "has-[>[data-slot=button-group]]:gap-2 rounded-md",
+			xl: "has-[>[data-slot=button-group]]:gap-2.5 rounded-md"
+		}
+	},
+	defaultVariants: {
+		orientation: "horizontal",
+		size: "md"
+	}
+});
+const ButtonGroup = ({ className, orientation, size: providedSize, ...props }) => {
+	const resolvedOrientation = orientation ?? "horizontal";
+	const size = useComponentSize(providedSize);
+	return /* @__PURE__ */ jsx(ButtonGroupSizeContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(buttonGroupVariants({
+				orientation: resolvedOrientation,
+				size
+			}), className),
+			"data-orientation": resolvedOrientation,
+			"data-size": size,
+			"data-slot": "button-group",
+			...props
+		})
+	});
+};
+ButtonGroup.Separator = ButtonGroupSeparator;
+ButtonGroup.Text = ButtonGroupText;
+
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+//# sourceMappingURL=button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../../src/ui/button-group/button-group-separator.tsx","../../src/ui/button-group/button-group-text.tsx","../../src/ui/button-group/button-group.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { UISize } from \"../shared/size/size-system\";\n\nimport { Separator } from \"../separator/separator\";\nimport { ButtonGroupSizeContext } from \"./button-group-size-context\";\n\nconst buttonGroupSeparatorVariants = tv({\n  base: \"relative self-stretch bg-input data-[orientation=horizontal]:w-auto data-[orientation=vertical]:h-auto\",\n  variants: {\n    size: {\n      xs: \"data-[orientation=horizontal]:mx-px data-[orientation=vertical]:my-px\",\n      sm: \"data-[orientation=horizontal]:mx-px data-[orientation=vertical]:my-px\",\n      md: \"data-[orientation=horizontal]:mx-px data-[orientation=vertical]:my-px\",\n      lg: \"data-[orientation=horizontal]:mx-0.5 data-[orientation=vertical]:my-0.5\",\n      xl: \"data-[orientation=horizontal]:mx-0.5 data-[orientation=vertical]:my-0.5\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ntype ButtonGroupSeparatorVariantProps = Omit<\n  VariantProps<typeof buttonGroupSeparatorVariants>,\n  \"size\"\n> & {\n  size?: UISize;\n};\n\nexport type ButtonGroupSeparatorProps = ComponentProps<typeof Separator> &\n  ButtonGroupSeparatorVariantProps;\n\nconst ButtonGroupSeparator = ({\n  className,\n  orientation = \"vertical\",\n  size,\n  ...props\n}: ButtonGroupSeparatorProps) => {\n  const { size: groupSize } = useContext(ButtonGroupSizeContext);\n  const resolvedSize = size ?? groupSize ?? \"md\";\n\n  return (\n    <Separator\n      className={cn(\n        buttonGroupSeparatorVariants({ size: resolvedSize }),\n        className\n      )}\n      data-size={resolvedSize}\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      {...props}\n    />\n  );\n};\n\nexport { ButtonGroupSeparator };\n","import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { useContext } from \"react\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { UISize } from \"../shared/size/size-system\";\n\nimport { ButtonGroupSizeContext } from \"./button-group-size-context\";\n\nconst buttonGroupTextVariants = tv({\n  base: \"flex items-center border border-border bg-muted font-medium [&_svg]:pointer-events-none\",\n  variants: {\n    size: {\n      xs: \"gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs [&_svg:not([class*='size-'])]:size-3\",\n      sm: \"gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 text-sm [&_svg:not([class*='size-'])]:size-3.5\",\n      md: \"gap-2 rounded-md px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4\",\n      lg: \"gap-2 rounded-md px-3 text-sm [&_svg:not([class*='size-'])]:size-4\",\n      xl: \"gap-2.5 rounded-md px-4 text-base [&_svg:not([class*='size-'])]:size-5\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ntype ButtonGroupTextVariantProps = Omit<\n  VariantProps<typeof buttonGroupTextVariants>,\n  \"size\"\n> & {\n  size?: UISize;\n};\n\nexport type ButtonGroupTextProps = useRender.ComponentProps<\"div\"> &\n  ButtonGroupTextVariantProps;\n\nconst ButtonGroupText = ({\n  className,\n  render,\n  size,\n  ...props\n}: ButtonGroupTextProps) => {\n  const { size: groupSize } = useContext(ButtonGroupSizeContext);\n  const resolvedSize = size ?? groupSize ?? \"md\";\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          buttonGroupTextVariants({ size: resolvedSize }),\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n      size: resolvedSize,\n    },\n  });\n};\n\nexport { ButtonGroupText };\n","import type { ComponentProps } from \"react\";\n\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { UISize } from \"../shared/size/size-system\";\n\nimport { useComponentSize } from \"../shared/size/size-provider\";\nimport { ButtonGroupSeparator } from \"./button-group-separator\";\nimport { ButtonGroupSizeContext } from \"./button-group-size-context\";\nimport { ButtonGroupText } from \"./button-group-text\";\nexport type ButtonGroupProps = ComponentProps<\"div\"> &\n  VariantProps<typeof buttonGroupVariants> & {\n    size?: UISize;\n  };\n\nconst buttonGroupVariants = tv({\n  base: \"group/button-group flex w-fit items-stretch overflow-hidden *:focus-visible:relative *:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-[inherit] [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  variants: {\n    orientation: {\n      horizontal:\n        \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-[inherit]! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\n      vertical:\n        \"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-[inherit]! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\n    },\n    size: {\n      xs: \"has-[>[data-slot=button-group]]:gap-1 rounded-[min(var(--radius-md),8px)]\",\n      sm: \"has-[>[data-slot=button-group]]:gap-1 rounded-[min(var(--radius-md),10px)]\",\n      md: \"has-[>[data-slot=button-group]]:gap-2 rounded-md\",\n      lg: \"has-[>[data-slot=button-group]]:gap-2 rounded-md\",\n      xl: \"has-[>[data-slot=button-group]]:gap-2.5 rounded-md\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n    size: \"md\",\n  },\n});\n\nconst ButtonGroup = ({\n  className,\n  orientation,\n  size: providedSize,\n  ...props\n}: ButtonGroupProps) => {\n  const resolvedOrientation = orientation ?? \"horizontal\";\n  const size = useComponentSize(providedSize);\n\n  return (\n    <ButtonGroupSizeContext.Provider value={{ size }}>\n      <div\n        className={cn(\n          buttonGroupVariants({ orientation: resolvedOrientation, size }),\n          className\n        )}\n        data-orientation={resolvedOrientation}\n        data-size={size}\n        data-slot=\"button-group\"\n        {...props}\n      />\n    </ButtonGroupSizeContext.Provider>\n  );\n};\n\nButtonGroup.Separator = ButtonGroupSeparator;\nButtonGroup.Text = ButtonGroupText;\n\nexport {\n  ButtonGroup,\n  buttonGroupVariants,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n};\n\nexport type { ButtonGroupSeparatorProps } from \"./button-group-separator\";\nexport type { ButtonGroupTextProps } from \"./button-group-text\";\n"],"mappings":";;;;;;;;;;AAUA,MAAM,+BAA+B,GAAG;CACtC,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAYF,MAAM,wBAAwB,EAC5B,WACA,cAAc,YACd,MACA,GAAG,YAC4B;CAC/B,MAAM,EAAE,MAAM,cAAc,WAAW,uBAAuB;CAC9D,MAAM,eAAe,QAAQ,aAAa;AAE1C,QACE,oBAAC;EACC,WAAW,GACT,6BAA6B,EAAE,MAAM,cAAc,CAAC,EACpD,UACD;EACD,aAAW;EACX,aAAU;EACG;EACb,GAAI;GACJ;;;;;AC9CN,MAAM,0BAA0B,GAAG;CACjC,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAYF,MAAM,mBAAmB,EACvB,WACA,QACA,MACA,GAAG,YACuB;CAC1B,MAAM,EAAE,MAAM,cAAc,WAAW,uBAAuB;CAC9D,MAAM,eAAe,QAAQ,aAAa;AAE1C,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,wBAAwB,EAAE,MAAM,cAAc,CAAC,EAC/C,UACD,EACF,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN,MAAM;GACP;EACF,CAAC;;;;;AC7CJ,MAAM,sBAAsB,GAAG;CAC7B,MAAM;CACN,UAAU;EACR,aAAa;GACX,YACE;GACF,UACE;GACH;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB;EACf,aAAa;EACb,MAAM;EACP;CACF,CAAC;AAEF,MAAM,eAAe,EACnB,WACA,aACA,MAAM,cACN,GAAG,YACmB;CACtB,MAAM,sBAAsB,eAAe;CAC3C,MAAM,OAAO,iBAAiB,aAAa;AAE3C,QACE,oBAAC,uBAAuB;EAAS,OAAO,EAAE,MAAM;YAC9C,oBAAC;GACC,WAAW,GACT,oBAAoB;IAAE,aAAa;IAAqB;IAAM,CAAC,EAC/D,UACD;GACD,oBAAkB;GAClB,aAAW;GACX,aAAU;GACV,GAAI;IACJ;GAC8B;;AAItC,YAAY,YAAY;AACxB,YAAY,OAAO"}

package/dist/ui/button.d.ts

@@ -0,0 +1,78 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as tailwind_variants0 from "tailwind-variants";
+import { VariantProps } from "tailwind-variants";
+import { Button as Button$1 } from "@base-ui/react/button";
+
+//#region src/ui/button/button.d.ts
+declare const buttonVariants: tailwind_variants0.TVReturnType<{
+  variant: {
+    default: string;
+    outline: string;
+    secondary: string;
+    ghost: string;
+    danger: string;
+    link: string;
+  };
+  size: {
+    md: string;
+    xs: string[];
+    sm: string[];
+    lg: string;
+    xl: string[];
+    icon: string;
+    "icon-xs": string;
+    "icon-sm": string;
+    "icon-lg": string;
+    "icon-xl": string;
+  };
+}, undefined, "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", {
+  variant: {
+    default: string;
+    outline: string;
+    secondary: string;
+    ghost: string;
+    danger: string;
+    link: string;
+  };
+  size: {
+    md: string;
+    xs: string[];
+    sm: string[];
+    lg: string;
+    xl: string[];
+    icon: string;
+    "icon-xs": string;
+    "icon-sm": string;
+    "icon-lg": string;
+    "icon-xl": string;
+  };
+}, undefined, tailwind_variants0.TVReturnType<{
+  variant: {
+    default: string;
+    outline: string;
+    secondary: string;
+    ghost: string;
+    danger: string;
+    link: string;
+  };
+  size: {
+    md: string;
+    xs: string[];
+    sm: string[];
+    lg: string;
+    xl: string[];
+    icon: string;
+    "icon-xs": string;
+    "icon-sm": string;
+    "icon-lg": string;
+    "icon-xl": string;
+  };
+}, undefined, "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", unknown, unknown, undefined>>;
+type ButtonProps = ComponentProps<typeof Button$1> & VariantProps<typeof buttonVariants> & {
+  isLoading?: boolean;
+};
+declare const Button: (incomingProps: ButtonProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Button, ButtonProps, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/ui/button/button.tsx"],"mappings":";;;;;;;cAwBM,cAAA,EAgDJ,kBAAA,CAhDkB,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgDlB,kBAAA,CAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;KAEU,WAAA,GAAc,cAAA,QAAsB,QAAA,IAC9C,YAAA,QAAoB,cAAA;EAClB,SAAA;AAAA;AAAA,cAsDE,MAAA,GAAU,aAAA,EAAe,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/button.js

@@ -0,0 +1,110 @@
+"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 { 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 { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, tv } from "tailwind-variants";
+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"
+	}
+});
+const BUTTON_SPINNER_SIZE_BY_BUTTON_SIZE = {
+	xs: "xs",
+	sm: "sm",
+	md: "md",
+	lg: "lg",
+	xl: "xl",
+	icon: "md",
+	"icon-xs": "xs",
+	"icon-sm": "sm",
+	"icon-lg": "lg",
+	"icon-xl": "xl"
+};
+const isButtonSize = (value) => typeof value === "string" && value in BUTTON_SPINNER_SIZE_BY_BUTTON_SIZE;
+const ButtonContent = ({ children, isLoading, size }) => /* @__PURE__ */ jsxs("span", {
+	className: "relative inline-flex items-center justify-center",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center justify-center gap-2 transition-all duration-200", isLoading ? "pointer-events-none -translate-y-full opacity-0" : "translate-y-0 opacity-100"),
+		children
+	}), /* @__PURE__ */ jsx("span", {
+		className: cn("absolute inset-0 inline-flex items-center justify-center transition-all duration-200", isLoading ? "translate-y-0 opacity-100" : "pointer-events-none -translate-y-full opacity-0"),
+		children: /* @__PURE__ */ jsx(Spinner, { size: BUTTON_SPINNER_SIZE_BY_BUTTON_SIZE[size] })
+	})]
+});
+const Button = (incomingProps) => {
+	const { size: componentDefaultSize, ...componentDefaultsWithoutSize } = useKuzenboComponentDefaults("Button");
+	const { className, variant = "default", size, isLoading, children, disabled, ...props } = {
+		...filterUndefinedProps(componentDefaultsWithoutSize),
+		...filterUndefinedProps(incomingProps)
+	};
+	const { size: buttonGroupSize } = useContext(ButtonGroupSizeContext);
+	const globalSize = useGlobalUISize();
+	const resolvedSize = isButtonSize(size) ? size : buttonGroupSize ?? (isButtonSize(componentDefaultSize) ? componentDefaultSize : globalSize ?? "md");
+	return /* @__PURE__ */ jsx(Button$1, {
+		className: mergeBaseUIClassName(cn(buttonVariants({
+			variant,
+			size: resolvedSize
+		})), className),
+		focusableWhenDisabled: Boolean(isLoading),
+		"data-loading": isLoading,
+		"data-size": resolvedSize,
+		"data-slot": "button",
+		disabled: disabled || isLoading,
+		...props,
+		children: /* @__PURE__ */ jsx(ButtonContent, {
+			isLoading,
+			size: resolvedSize,
+			children
+		})
+	});
+};
+
+//#endregion
+export { Button, buttonVariants };
+//# sourceMappingURL=button.js.map

package/dist/ui/button.js.map

@@ -0,0 +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"}

package/dist/ui/card.d.ts

@@ -0,0 +1,80 @@
+import { t as UISize } from "../size-system-wzOLSuax.js";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/card/card-action.d.ts
+type CardActionProps = ComponentProps<"div">;
+declare const CardAction: ({
+  className,
+  ...props
+}: CardActionProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/card/card-content.d.ts
+type CardContentProps = ComponentProps<"div">;
+declare const CardContent: ({
+  className,
+  ...props
+}: CardContentProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/card/card-description.d.ts
+type CardDescriptionProps = ComponentProps<"div">;
+declare const CardDescription: ({
+  className,
+  ...props
+}: CardDescriptionProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/card/card-footer.d.ts
+type CardFooterProps = ComponentProps<"div">;
+declare const CardFooter: ({
+  className,
+  ...props
+}: CardFooterProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/card/card-header.d.ts
+type CardHeaderProps = ComponentProps<"div">;
+declare const CardHeader: ({
+  className,
+  ...props
+}: CardHeaderProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/card/card-title.d.ts
+type CardTitleProps = ComponentProps<"div">;
+declare const CardTitle: ({
+  className,
+  ...props
+}: CardTitleProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/card/card.d.ts
+type CardProps = ComponentProps<"div"> & {
+  size?: UISize;
+};
+declare const Card: {
+  (incomingProps: CardProps): react_jsx_runtime0.JSX.Element;
+  Action: ({
+    className,
+    ...props
+  }: CardActionProps) => react_jsx_runtime0.JSX.Element;
+  Content: ({
+    className,
+    ...props
+  }: CardContentProps) => react_jsx_runtime0.JSX.Element;
+  Description: ({
+    className,
+    ...props
+  }: CardDescriptionProps) => react_jsx_runtime0.JSX.Element;
+  Footer: ({
+    className,
+    ...props
+  }: CardFooterProps) => react_jsx_runtime0.JSX.Element;
+  Header: ({
+    className,
+    ...props
+  }: CardHeaderProps) => react_jsx_runtime0.JSX.Element;
+  Title: ({
+    className,
+    ...props
+  }: CardTitleProps) => react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardProps, CardTitle, type CardTitleProps };
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +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;;;KCS9C,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

@@ -0,0 +1,77 @@
+import { a as useComponentSize, i as useComponentDefaultProps } from "../size-provider-18EvJgDT.js";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "tailwind-variants";
+
+//#region src/ui/card/card-action.tsx
+const CardAction = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+	"data-slot": "card-action",
+	...props
+});
+
+//#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),
+	"data-slot": "card-content",
+	...props
+});
+
+//#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),
+	"data-slot": "card-description",
+	...props
+});
+
+//#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),
+	"data-slot": "card-footer",
+	...props
+});
+
+//#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),
+	"data-slot": "card-header",
+	...props
+});
+
+//#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),
+	"data-slot": "card-title",
+	...props
+});
+
+//#endregion
+//#region src/ui/card/use-card-default-props.ts
+const useCardDefaultProps = (incomingProps) => useComponentDefaultProps("Card", {}, incomingProps);
+
+//#endregion
+//#region src/ui/card/card.tsx
+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),
+		"data-size": size,
+		"data-slot": "card",
+		...props
+	});
+};
+Card.Action = CardAction;
+Card.Content = CardContent;
+Card.Description = CardDescription;
+Card.Footer = CardFooter;
+Card.Header = CardHeader;
+Card.Title = CardTitle;
+
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+//# sourceMappingURL=card.js.map

package/dist/ui/card.js.map

@@ -0,0 +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","import 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;;;;ACWhE,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"}

package/dist/ui/carousel.d.ts

@@ -0,0 +1,93 @@
+import { Button } from "./button.js";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+
+//#region src/ui/carousel/carousel-content.d.ts
+type CarouselContentProps = ComponentProps<"div">;
+declare const CarouselContent: ({
+  className,
+  ...props
+}: CarouselContentProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/carousel/carousel-item.d.ts
+type CarouselItemProps = ComponentProps<"div">;
+declare const CarouselItem: ({
+  className,
+  ...props
+}: CarouselItemProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/carousel/carousel-next.d.ts
+type CarouselNextProps = ComponentProps<typeof Button>;
+declare const CarouselNext: ({
+  className,
+  variant,
+  size,
+  ...props
+}: CarouselNextProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/carousel/carousel-previous.d.ts
+type CarouselPreviousProps = ComponentProps<typeof Button>;
+declare const CarouselPrevious: ({
+  className,
+  variant,
+  size,
+  ...props
+}: CarouselPreviousProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/carousel/use-carousel.d.ts
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+interface CarouselProps {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+}
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+declare const useCarousel: () => CarouselContextProps;
+//#endregion
+//#region src/ui/carousel/carousel.d.ts
+declare const Carousel: {
+  ({
+    orientation,
+    opts,
+    setApi,
+    plugins,
+    className,
+    children,
+    ...props
+  }: ComponentProps<"div"> & CarouselProps): react_jsx_runtime0.JSX.Element;
+  Content: ({
+    className,
+    ...props
+  }: CarouselContentProps) => react_jsx_runtime0.JSX.Element;
+  Item: ({
+    className,
+    ...props
+  }: CarouselItemProps) => react_jsx_runtime0.JSX.Element;
+  Next: ({
+    className,
+    variant,
+    size,
+    ...props
+  }: CarouselNextProps) => react_jsx_runtime0.JSX.Element;
+  Previous: ({
+    className,
+    variant,
+    size,
+    ...props
+  }: CarouselPreviousProps) => react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { Carousel, type CarouselApi, CarouselContent, type CarouselContentProps, CarouselItem, type CarouselItemProps, CarouselNext, type CarouselNextProps, CarouselPrevious, type CarouselPreviousProps, type CarouselProps, useCarousel };
+//# sourceMappingURL=carousel.d.ts.map

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

@@ -0,0 +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"}