@enadhq/enad-react-sdk 1.1.0 → 1.3.0

package/dist/client/ui/breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","names":[],"sources":["../../../src/client/ui/breadcrumb.tsx"],"mappings":";;;;iBAMS,UAAA,CAAA;EAAA,GAAgB;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIpD,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,SAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAalE,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,SAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUlE,cAAA,CAAA;EACP,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA;EACP,OAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAYQ,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,WAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAWpE,mBAAA,CAAA;EAAsB,QAAA;EAAU,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,SAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAcjF,kBAAA,CAAA;EAAqB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,WAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"breadcrumb.d.ts","names":[],"sources":["../../../src/client/ui/breadcrumb.tsx"],"mappings":";;;;cAOM,gBAAA,GAAgB,KAAA;EAAA;;cAUpB,OAAA,CAAA,MAAA;AAAA;;;;;;;;iBAIO,UAAA,CAAA;EAAA,GAAgB;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIpD,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,SAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAMlE,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,SAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAMlE,cAAA,CAAA;EACP,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA;EAAwB,OAAA;AAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAQ3C,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,WAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAWpE,mBAAA,CAAA;EAAsB,QAAA;EAAU,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,SAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAcjF,kBAAA,CAAA;EAAqB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,WAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/ui/breadcrumb.mjs

@@ -1,9 +1,29 @@
 import { useIcon } from "../icons/icon-context.mjs";
 import { cn } from "./utils.mjs";
+import { defineSlotRecipe } from "../ui-resolver/recipe.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "radix-ui";
 //#region src/client/ui/breadcrumb.tsx
+const breadcrumbRecipe = defineSlotRecipe({
+	slots: [
+		"list",
+		"item",
+		"link",
+		"page",
+		"separator",
+		"ellipsis"
+	],
+	base: {
+		list: "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
+		item: "inline-flex items-center gap-1.5",
+		link: "transition-colors hover:text-foreground",
+		page: "font-normal text-foreground",
+		separator: "[&>svg]:size-3.5",
+		ellipsis: "flex size-9 items-center justify-center"
+	}
+});
+const defaultClasses = breadcrumbRecipe();
 function Breadcrumb({ ...props }) {
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "breadcrumb",
@@ -14,21 +34,21 @@ function Breadcrumb({ ...props }) {
 function BreadcrumbList({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ol", {
 		"data-slot": "breadcrumb-list",
-		className: cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5", className),
+		className: cn(defaultClasses.list, className),
 		...props
 	});
 }
 function BreadcrumbItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx("li", {
 		"data-slot": "breadcrumb-item",
-		className: cn("inline-flex items-center gap-1.5", className),
+		className: cn(defaultClasses.item, className),
 		...props
 	});
 }
 function BreadcrumbLink({ asChild, className, ...props }) {
 	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "a", {
 		"data-slot": "breadcrumb-link",
-		className: cn("transition-colors hover:text-foreground", className),
+		className: cn(defaultClasses.link, className),
 		...props
 	});
 }
@@ -36,7 +56,7 @@ function BreadcrumbPage({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "breadcrumb-page",
 		"aria-current": "page",
-		className: cn("font-normal text-foreground", className),
+		className: cn(defaultClasses.page, className),
 		...props
 	});
 }
@@ -45,7 +65,7 @@ function BreadcrumbSeparator({ children, className, ...props }) {
 		"data-slot": "breadcrumb-separator",
 		role: "presentation",
 		"aria-hidden": "true",
-		className: cn("[&>svg]:size-3.5", className),
+		className: cn(defaultClasses.separator, className),
 		...props,
 		children: children ?? "/"
 	});
@@ -56,7 +76,7 @@ function BreadcrumbEllipsis({ className, ...props }) {
 		"data-slot": "breadcrumb-ellipsis",
 		role: "presentation",
 		"aria-hidden": "true",
-		className: cn("flex size-9 items-center justify-center", className),
+		className: cn(defaultClasses.ellipsis, className),
 		...props,
 		children: [/* @__PURE__ */ jsx(MoreIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
@@ -65,6 +85,6 @@ function BreadcrumbEllipsis({ className, ...props }) {
 	});
 }
 //#endregion
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbRecipe };
 
 //# sourceMappingURL=breadcrumb.mjs.map

package/dist/client/ui/breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.mjs","names":[],"sources":["../../../src/client/ui/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useIcon } from \"../icons/icon-context\";\nimport { Slot } from \"radix-ui\";\n\nimport { cn } from \"./utils\";\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? \"/\"}\n    </li>\n  );\n}\n\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  const MoreIcon = useIcon(\"more\");\n\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreIcon className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n"],"mappings":";;;;;;AAMA,SAAS,WAAW,EAAE,GAAG,SAAsC;AAC7D,QAAO,oBAAC,OAAD;EAAK,cAAW;EAAa,aAAU;EAAa,GAAI;EAAS,CAAA;;AAG1E,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;AAC3E,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,4FACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;AAC3E,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,UAAU;EAC5D,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EACtB,SACA,WACA,GAAG,SAGF;AAGD,QACE,oBAHW,UAAU,KAAK,OAAO,KAGjC;EACE,aAAU;EACV,WAAW,GAAG,2CAA2C,UAAU;EACnE,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;AAC7E,QACE,oBAAC,QAAD;EACE,aAAU;EACV,gBAAa;EACb,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAIN,SAAS,oBAAoB,EAAE,UAAU,WAAW,GAAG,SAAqC;AAC1F,QACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,oBAAoB,UAAU;EAC5C,GAAI;YAEH,YAAY;EACV,CAAA;;AAIT,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,MAAM,WAAW,QAAQ,OAAO;AAEhC,QACE,qBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,2CAA2C,UAAU;EACnE,GAAI;YALN,CAOE,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA,EAC/B,oBAAC,QAAD;GAAM,WAAU;aAAU;GAAW,CAAA,CAChC"}
+{"version":3,"file":"breadcrumb.mjs","names":[],"sources":["../../../src/client/ui/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useIcon } from \"../icons/icon-context\";\nimport { Slot } from \"radix-ui\";\n\nimport { defineSlotRecipe } from \"../ui-resolver/recipe\";\nimport { cn } from \"./utils\";\n\nconst breadcrumbRecipe = defineSlotRecipe({\n  slots: [\"list\", \"item\", \"link\", \"page\", \"separator\", \"ellipsis\"] as const,\n  base: {\n    list: \"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5\",\n    item: \"inline-flex items-center gap-1.5\",\n    link: \"transition-colors hover:text-foreground\",\n    page: \"font-normal text-foreground\",\n    separator: \"[&>svg]:size-3.5\",\n    ellipsis: \"flex size-9 items-center justify-center\",\n  },\n});\n\nconst defaultClasses = breadcrumbRecipe();\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol data-slot=\"breadcrumb-list\" className={cn(defaultClasses.list, className)} {...props} />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li data-slot=\"breadcrumb-item\" className={cn(defaultClasses.item, className)} {...props} />\n  );\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Comp data-slot=\"breadcrumb-link\" className={cn(defaultClasses.link, className)} {...props} />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      aria-current=\"page\"\n      className={cn(defaultClasses.page, className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(defaultClasses.separator, className)}\n      {...props}\n    >\n      {children ?? \"/\"}\n    </li>\n  );\n}\n\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  const MoreIcon = useIcon(\"more\");\n\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(defaultClasses.ellipsis, className)}\n      {...props}\n    >\n      <MoreIcon className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n  breadcrumbRecipe,\n};\n"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB,iBAAiB;CACxC,OAAO;EAAC;EAAQ;EAAQ;EAAQ;EAAQ;EAAa;EAAW;CAChE,MAAM;EACJ,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,WAAW;EACX,UAAU;EACX;CACF,CAAC;AAEF,MAAM,iBAAiB,kBAAkB;AAEzC,SAAS,WAAW,EAAE,GAAG,SAAsC;AAC7D,QAAO,oBAAC,OAAD;EAAK,cAAW;EAAa,aAAU;EAAa,GAAI;EAAS,CAAA;;AAG1E,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;AAC3E,QACE,oBAAC,MAAD;EAAI,aAAU;EAAkB,WAAW,GAAG,eAAe,MAAM,UAAU;EAAE,GAAI;EAAS,CAAA;;AAIhG,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;AAC3E,QACE,oBAAC,MAAD;EAAI,aAAU;EAAkB,WAAW,GAAG,eAAe,MAAM,UAAU;EAAE,GAAI;EAAS,CAAA;;AAIhG,SAAS,eAAe,EACtB,SACA,WACA,GAAG,SACiD;AAGpD,QACE,oBAHW,UAAU,KAAK,OAAO,KAGjC;EAAM,aAAU;EAAkB,WAAW,GAAG,eAAe,MAAM,UAAU;EAAE,GAAI;EAAS,CAAA;;AAIlG,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;AAC7E,QACE,oBAAC,QAAD;EACE,aAAU;EACV,gBAAa;EACb,WAAW,GAAG,eAAe,MAAM,UAAU;EAC7C,GAAI;EACJ,CAAA;;AAIN,SAAS,oBAAoB,EAAE,UAAU,WAAW,GAAG,SAAqC;AAC1F,QACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,eAAe,WAAW,UAAU;EAClD,GAAI;YAEH,YAAY;EACV,CAAA;;AAIT,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,MAAM,WAAW,QAAQ,OAAO;AAEhC,QACE,qBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,eAAe,UAAU,UAAU;EACjD,GAAI;YALN,CAOE,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA,EAC/B,oBAAC,QAAD;GAAM,WAAU;aAAU;GAAW,CAAA,CAChC"}

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

@@ -1,22 +1,40 @@
+import { SemanticColor, Variant } from "../ui-resolver/types.js";
 import * as React$1 from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/client/ui/button.d.ts
-declare const buttonVariants: (props?: ({
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "soft" | "inverse" | "link" | null | undefined;
-  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
+declare const buttonRecipe: (props?: ({
+  variant?: "destructive" | "link" | "solid" | "soft" | "outlined" | "plain" | "secondary" | "inverse" | undefined;
+  size?: "xs" | "sm" | "md" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | undefined;
+} & {
+  className?: string;
+}) | undefined) => string;
+type ButtonVariant = Variant | "destructive" | "secondary" | "inverse" | "link";
+type ButtonSize = "xs" | "sm" | "md" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+interface ButtonProps extends Omit<React$1.ComponentProps<"button">, "color"> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  color?: SemanticColor;
+  asChild?: boolean;
+  startSlot?: React$1.ReactNode;
+  endSlot?: React$1.ReactNode;
+}
 declare function Button({
   className,
   variant,
   size,
   asChild,
+  startSlot,
+  endSlot,
+  children,
   ...props
-}: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
-  asChild?: boolean;
-}): react_jsx_runtime0.JSX.Element;
+}: ButtonProps): react_jsx_runtime0.JSX.Element;
+declare const buttonVariants: (props?: ({
+  variant?: "destructive" | "link" | "solid" | "soft" | "outlined" | "plain" | "secondary" | "inverse" | undefined;
+  size?: "xs" | "sm" | "md" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | undefined;
+} & {
+  className?: string;
+}) | undefined) => string;
 //#endregion
-export { Button, buttonVariants };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, buttonRecipe, buttonVariants };
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/client/ui/button.tsx"],"mappings":";;;;;;cAMM,cAAA,GAAc,KAAA;;;IAmCnB,+BAAA,CAAA,SAAA;AAAA,iBAEQ,MAAA,CAAA;EACP,SAAA;EACA,OAAA;EACA,IAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,aACP,YAAA,QAAoB,cAAA;EAClB,OAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/client/ui/button.tsx"],"mappings":";;;;;cAOM,YAAA,GAAY,KAAA;;;;;;KAkCb,aAAA,GAAgB,OAAA;AAAA,KAChB,UAAA;AAAA,UAEK,WAAA,SAAoB,IAAA,CAAK,OAAA,CAAM,cAAA;EACvC,OAAA,GAAU,aAAA;EACV,IAAA,GAAO,UAAA;EACP,KAAA,GAAQ,aAAA;EACR,OAAA;EACA,SAAA,GAAY,OAAA,CAAM,SAAA;EAClB,OAAA,GAAU,OAAA,CAAM,SAAA;AAAA;AAAA,iBAGT,MAAA,CAAA;EACP,SAAA;EACA,OAAA;EACA,IAAA;EACA,OAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAsCR,cAAA,GAAc,KAAA"}

package/dist/client/ui/button.mjs

@@ -1,51 +1,76 @@
 import { cn } from "./utils.mjs";
+import { defineRecipe } from "../ui-resolver/recipe.mjs";
 import "react";
-import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "radix-ui";
 //#region src/client/ui/button.tsx
-const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-[var(--enad-button-radius)] text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonRecipe = defineRecipe({
+	base: "inline-flex shrink-0 items-center justify-center gap-[var(--enad-button-gap)] rounded-[var(--enad-button-radius)] text-[length:var(--enad-button-font-size)] font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/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-hover",
+			solid: "bg-primary text-primary-foreground hover:bg-primary-hover",
+			soft: "bg-muted text-foreground hover:bg-primary-hover hover:text-primary-foreground",
+			outlined: "border bg-background text-foreground shadow-xs hover:bg-accent-muted hover:text-accent-muted-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			plain: "hover:bg-accent-muted hover:text-accent-muted-foreground dark:hover:bg-accent-muted/50",
 			destructive: "bg-destructive text-white hover:bg-destructive-hover focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-			outline: "border bg-background text-foreground shadow-xs hover:bg-accent-muted hover:text-accent-muted-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
 			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover",
-			ghost: "hover:bg-accent-muted hover:text-accent-muted-foreground dark:hover:bg-accent-muted/50",
-			soft: "bg-muted text-foreground hover:bg-primary-hover hover:text-primary-foreground",
 			inverse: "bg-foreground text-background hover:bg-primary-hover hover:text-primary-foreground",
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
-			default: "h-[var(--enad-control-height)] px-4 py-2 has-[>svg]:px-3",
 			xs: "h-[var(--enad-control-height-xs)] gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
 			sm: "h-[var(--enad-control-height-sm)] gap-1.5 px-3 has-[>svg]:px-2.5",
+			md: "h-[var(--enad-button-height)] px-[var(--enad-button-px)] py-2 has-[>svg]:px-3",
 			lg: "h-[var(--enad-control-height-lg)] px-6 has-[>svg]:px-4",
-			icon: "size-[var(--enad-control-height)]",
+			icon: "size-[var(--enad-button-height)]",
 			"icon-xs": "relative size-[var(--enad-control-height-xs)] hit-area-3 [&_svg:not([class*='size-'])]:size-3",
 			"icon-sm": "size-[var(--enad-control-height-sm)]",
 			"icon-lg": "size-[var(--enad-control-height-lg)]"
 		}
 	},
 	defaultVariants: {
-		variant: "default",
-		size: "default"
+		variant: "solid",
+		size: "md"
 	}
 });
-function Button({ className, variant = "default", size = "default", asChild = false, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
+function Button({ className, variant = "solid", size = "md", asChild = false, startSlot, endSlot, children, ...props }) {
+	const Comp = asChild ? Slot.Root : "button";
+	const classes = cn(buttonRecipe({
+		variant,
+		size,
+		className
+	}));
+	if (asChild) return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-size": size,
+		className: classes,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Comp, {
 		"data-slot": "button",
 		"data-variant": variant,
 		"data-size": size,
-		className: cn(buttonVariants({
-			variant,
-			size,
-			className
-		})),
-		...props
+		className: classes,
+		...props,
+		children: [
+			startSlot && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "shrink-0 [&_svg]:size-[var(--slot-icon-size,1em)]",
+				children: startSlot
+			}),
+			children,
+			endSlot && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "shrink-0 [&_svg]:size-[var(--slot-icon-size,1em)]",
+				children: endSlot
+			})
+		]
 	});
 }
+const buttonVariants = buttonRecipe;
 //#endregion
-export { Button, buttonVariants };
+export { Button, buttonRecipe, buttonVariants };
 
 //# sourceMappingURL=button.mjs.map

package/dist/client/ui/button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.mjs","names":[],"sources":["../../../src/client/ui/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\n\nimport { cn } from \"./utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-2 rounded-[var(--enad-button-radius)] text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary-hover\",\n        destructive:\n          \"bg-destructive text-white hover:bg-destructive-hover focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40\",\n        outline:\n          \"border bg-background text-foreground shadow-xs hover:bg-accent-muted hover:text-accent-muted-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary-hover\",\n        ghost:\n          \"hover:bg-accent-muted hover:text-accent-muted-foreground dark:hover:bg-accent-muted/50\",\n        soft: \"bg-muted text-foreground hover:bg-primary-hover hover:text-primary-foreground\",\n        inverse:\n          \"bg-foreground text-background hover:bg-primary-hover hover:text-primary-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-[var(--enad-control-height)] px-4 py-2 has-[>svg]:px-3\",\n        xs: \"h-[var(--enad-control-height-xs)] gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-[var(--enad-control-height-sm)] gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-[var(--enad-control-height-lg)] px-6 has-[>svg]:px-4\",\n        icon: \"size-[var(--enad-control-height)]\",\n        \"icon-xs\":\n          \"relative size-[var(--enad-control-height-xs)] hit-area-3 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-[var(--enad-control-height-sm)]\",\n        \"icon-lg\": \"size-[var(--enad-control-height-lg)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;AAMA,MAAM,iBAAiB,IACrB,ueACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,aACE;GACF,SACE;GACF,WAAW;GACX,OACE;GACF,MAAM;GACN,SACE;GACF,MAAM;GACP;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WACE;GACF,WAAW;GACX,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,SAAS,OAAO,EACd,WACA,UAAU,WACV,OAAO,WACP,UAAU,OACV,GAAG,SAIA;AAGH,QACE,oBAHW,UAAU,KAAK,OAAO,UAGjC;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC3D,GAAI;EACJ,CAAA"}
+{"version":3,"file":"button.mjs","names":[],"sources":["../../../src/client/ui/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"radix-ui\";\n\nimport { defineRecipe } from \"../ui-resolver/recipe\";\nimport type { SemanticColor, Variant } from \"../ui-resolver/types\";\nimport { cn } from \"./utils\";\n\nconst buttonRecipe = defineRecipe({\n  base: \"inline-flex shrink-0 items-center justify-center gap-[var(--enad-button-gap)] rounded-[var(--enad-button-radius)] text-[length:var(--enad-button-font-size)] font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  variants: {\n    variant: {\n      solid: \"bg-primary text-primary-foreground hover:bg-primary-hover\",\n      soft: \"bg-muted text-foreground hover:bg-primary-hover hover:text-primary-foreground\",\n      outlined:\n        \"border bg-background text-foreground shadow-xs hover:bg-accent-muted hover:text-accent-muted-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n      plain:\n        \"hover:bg-accent-muted hover:text-accent-muted-foreground dark:hover:bg-accent-muted/50\",\n      destructive:\n        \"bg-destructive text-white hover:bg-destructive-hover focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary-hover\",\n      inverse: \"bg-foreground text-background hover:bg-primary-hover hover:text-primary-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      xs: \"h-[var(--enad-control-height-xs)] gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n      sm: \"h-[var(--enad-control-height-sm)] gap-1.5 px-3 has-[>svg]:px-2.5\",\n      md: \"h-[var(--enad-button-height)] px-[var(--enad-button-px)] py-2 has-[>svg]:px-3\",\n      lg: \"h-[var(--enad-control-height-lg)] px-6 has-[>svg]:px-4\",\n      icon: \"size-[var(--enad-button-height)]\",\n      \"icon-xs\":\n        \"relative size-[var(--enad-control-height-xs)] hit-area-3 [&_svg:not([class*='size-'])]:size-3\",\n      \"icon-sm\": \"size-[var(--enad-control-height-sm)]\",\n      \"icon-lg\": \"size-[var(--enad-control-height-lg)]\",\n    },\n  },\n  defaultVariants: {\n    variant: \"solid\",\n    size: \"md\",\n  },\n});\n\ntype ButtonVariant = Variant | \"destructive\" | \"secondary\" | \"inverse\" | \"link\";\ntype ButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\";\n\ninterface ButtonProps extends Omit<React.ComponentProps<\"button\">, \"color\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  color?: SemanticColor;\n  asChild?: boolean;\n  startSlot?: React.ReactNode;\n  endSlot?: React.ReactNode;\n}\n\nfunction Button({\n  className,\n  variant = \"solid\",\n  size = \"md\",\n  asChild = false,\n  startSlot,\n  endSlot,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  const classes = cn(buttonRecipe({ variant, size, className }));\n\n  if (asChild) {\n    return (\n      <Comp\n        data-slot=\"button\"\n        data-variant={variant}\n        data-size={size}\n        className={classes}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n\n  return (\n    <Comp data-slot=\"button\" data-variant={variant} data-size={size} className={classes} {...props}>\n      {startSlot && (\n        <span aria-hidden=\"true\" className=\"shrink-0 [&_svg]:size-[var(--slot-icon-size,1em)]\">\n          {startSlot}\n        </span>\n      )}\n      {children}\n      {endSlot && (\n        <span aria-hidden=\"true\" className=\"shrink-0 [&_svg]:size-[var(--slot-icon-size,1em)]\">\n          {endSlot}\n        </span>\n      )}\n    </Comp>\n  );\n}\n\nexport { Button, buttonRecipe, type ButtonProps, type ButtonVariant, type ButtonSize };\n\n// Backward compat: export buttonVariants as an alias for buttonRecipe\nconst buttonVariants = buttonRecipe;\nexport { buttonVariants };\n"],"mappings":";;;;;;AAOA,MAAM,eAAe,aAAa;CAChC,MAAM;CACN,UAAU;EACR,SAAS;GACP,OAAO;GACP,MAAM;GACN,UACE;GACF,OACE;GACF,aACE;GACF,WAAW;GACX,SAAS;GACT,MAAM;GACP;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WACE;GACF,WAAW;GACX,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;AAcF,SAAS,OAAO,EACd,WACA,UAAU,SACV,OAAO,MACP,UAAU,OACV,WACA,SACA,UACA,GAAG,SACW;CACd,MAAM,OAAO,UAAU,KAAK,OAAO;CACnC,MAAM,UAAU,GAAG,aAAa;EAAE;EAAS;EAAM;EAAW,CAAC,CAAC;AAE9D,KAAI,QACF,QACE,oBAAC,MAAD;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,WAAW;EACX,GAAI;EAEH;EACI,CAAA;AAIX,QACE,qBAAC,MAAD;EAAM,aAAU;EAAS,gBAAc;EAAS,aAAW;EAAM,WAAW;EAAS,GAAI;YAAzF;GACG,aACC,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;cAChC;IACI,CAAA;GAER;GACA,WACC,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;cAChC;IACI,CAAA;GAEJ;;;AAOX,MAAM,iBAAiB"}

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

@@ -2,6 +2,25 @@ import * as React$1 from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client/ui/card.d.ts
+/**
+ * Card recipe with 7 slots. Base classes produce the same output as the
+ * previous inline implementation. CSS variable references use the new
+ * component-level tokens (--enad-card-px, --enad-card-py) which fall
+ * back to --enad-card-padding for backward compatibility.
+ */
+declare const cardRecipe: (props?: ({
+  [x: string]: string | undefined;
+} & {
+  className?: Partial<Record<"root" | "content" | "title" | "description" | "header" | "action" | "footer", string>> | undefined;
+}) | undefined) => {
+  root: string;
+  content: string;
+  title: string;
+  description: string;
+  header: string;
+  action: string;
+  footer: string;
+};
 declare function Card({
   className,
   ...props
@@ -31,5 +50,5 @@ declare function CardFooter({
   ...props
 }: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardRecipe };
 //# sourceMappingURL=card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","names":[],"sources":["../../../src/client/ui/card.tsx"],"mappings":";;;;iBAIS,IAAA,CAAA;EAAO,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAazD,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAa/D,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU9D,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUpE,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/D,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUhE,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"card.d.ts","names":[],"sources":["../../../src/client/ui/card.tsx"],"mappings":";;;;;;;AAA+B;;;cAWzB,UAAA,GAAU,KAAA;EAAA;;cAYd,OAAA,CAAA,MAAA;AAAA;;;;;;;;;iBAIO,IAAA,CAAA;EAAO,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIzD,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAM/D,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9D,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUpE,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAM/D,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAMhE,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/ui/card.mjs

@@ -1,57 +1,85 @@
 import { cn } from "./utils.mjs";
+import { defineSlotRecipe } from "../ui-resolver/recipe.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/client/ui/card.tsx
+/**
+* Card recipe with 7 slots. Base classes produce the same output as the
+* previous inline implementation. CSS variable references use the new
+* component-level tokens (--enad-card-px, --enad-card-py) which fall
+* back to --enad-card-padding for backward compatibility.
+*/
+const cardRecipe = defineSlotRecipe({
+	slots: [
+		"root",
+		"header",
+		"title",
+		"description",
+		"action",
+		"content",
+		"footer"
+	],
+	base: {
+		root: "flex flex-col gap-[var(--enad-card-gap)] rounded-[var(--enad-card-radius)] border bg-card py-[var(--enad-card-py)] text-card-foreground shadow-[var(--enad-shadow-sm)]",
+		header: "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-[var(--enad-card-header-gap)] px-[var(--enad-card-px)] has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-[var(--enad-card-py)]",
+		title: "leading-none font-semibold",
+		description: "text-sm text-muted-foreground",
+		action: "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+		content: "px-[var(--enad-card-px)]",
+		footer: "flex items-center px-[var(--enad-card-px)] [.border-t]:pt-[var(--enad-card-py)]"
+	}
+});
+const defaultClasses = cardRecipe();
 function Card({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card",
-		className: cn("flex flex-col gap-[var(--enad-card-gap)] rounded-[var(--enad-card-radius)] border bg-card py-[var(--enad-card-padding)] text-card-foreground shadow-[var(--enad-shadow-sm)]", className),
+		className: cn(defaultClasses.root, className),
 		...props
 	});
 }
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-header",
-		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-[var(--enad-card-header-gap)] px-[var(--enad-card-padding)] has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-[var(--enad-card-padding)]", className),
+		className: cn(defaultClasses.header, className),
 		...props
 	});
 }
 function CardTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-title",
-		className: cn("leading-none font-semibold", className),
+		className: cn(defaultClasses.title, className),
 		...props
 	});
 }
 function CardDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-description",
-		className: cn("text-sm text-muted-foreground", className),
+		className: cn(defaultClasses.description, className),
 		...props
 	});
 }
 function CardAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-action",
-		className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+		className: cn(defaultClasses.action, className),
 		...props
 	});
 }
 function CardContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-content",
-		className: cn("px-[var(--enad-card-padding)]", className),
+		className: cn(defaultClasses.content, className),
 		...props
 	});
 }
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-footer",
-		className: cn("flex items-center px-[var(--enad-card-padding)] [.border-t]:pt-[var(--enad-card-padding)]", className),
+		className: cn(defaultClasses.footer, className),
 		...props
 	});
 }
 //#endregion
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardRecipe };
 
 //# sourceMappingURL=card.mjs.map

package/dist/client/ui/card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"card.mjs","names":[],"sources":["../../../src/client/ui/card.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-[var(--enad-card-gap)] rounded-[var(--enad-card-radius)] border bg-card py-[var(--enad-card-padding)] text-card-foreground shadow-[var(--enad-shadow-sm)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-[var(--enad-card-header-gap)] px-[var(--enad-card-padding)] has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-[var(--enad-card-padding)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-[var(--enad-card-padding)]\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center px-[var(--enad-card-padding)] [.border-t]:pt-[var(--enad-card-padding)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n"],"mappings":";;;;AAIA,SAAS,KAAK,EAAE,WAAW,GAAG,SAAsC;AAClE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,+KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;AACxE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0OACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;AACvE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,UAAU;EACtD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;AAC7E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;AACxE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kEAAkE,UAAU;EAC1F,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;AACzE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;AACxE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6FACA,UACD;EACD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"card.mjs","names":[],"sources":["../../../src/client/ui/card.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { defineSlotRecipe } from \"../ui-resolver/recipe\";\nimport { cn } from \"./utils\";\n\n/**\n * Card recipe with 7 slots. Base classes produce the same output as the\n * previous inline implementation. CSS variable references use the new\n * component-level tokens (--enad-card-px, --enad-card-py) which fall\n * back to --enad-card-padding for backward compatibility.\n */\nconst cardRecipe = defineSlotRecipe({\n  slots: [\"root\", \"header\", \"title\", \"description\", \"action\", \"content\", \"footer\"] as const,\n  base: {\n    root: \"flex flex-col gap-[var(--enad-card-gap)] rounded-[var(--enad-card-radius)] border bg-card py-[var(--enad-card-py)] text-card-foreground shadow-[var(--enad-shadow-sm)]\",\n    header:\n      \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-[var(--enad-card-header-gap)] px-[var(--enad-card-px)] has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-[var(--enad-card-py)]\",\n    title: \"leading-none font-semibold\",\n    description: \"text-sm text-muted-foreground\",\n    action: \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n    content: \"px-[var(--enad-card-px)]\",\n    footer: \"flex items-center px-[var(--enad-card-px)] [.border-t]:pt-[var(--enad-card-py)]\",\n  },\n});\n\nconst defaultClasses = cardRecipe();\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card\" className={cn(defaultClasses.root, className)} {...props} />;\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"card-header\" className={cn(defaultClasses.header, className)} {...props} />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-title\" className={cn(defaultClasses.title, className)} {...props} />;\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(defaultClasses.description, className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"card-action\" className={cn(defaultClasses.action, className)} {...props} />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"card-content\" className={cn(defaultClasses.content, className)} {...props} />\n  );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"card-footer\" className={cn(defaultClasses.footer, className)} {...props} />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n  cardRecipe,\n};\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,aAAa,iBAAiB;CAClC,OAAO;EAAC;EAAQ;EAAU;EAAS;EAAe;EAAU;EAAW;EAAS;CAChF,MAAM;EACJ,MAAM;EACN,QACE;EACF,OAAO;EACP,aAAa;EACb,QAAQ;EACR,SAAS;EACT,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,iBAAiB,YAAY;AAEnC,SAAS,KAAK,EAAE,WAAW,GAAG,SAAsC;AAClE,QAAO,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,GAAG,eAAe,MAAM,UAAU;EAAE,GAAI;EAAS,CAAA;;AAG3F,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;AACxE,QACE,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,eAAe,QAAQ,UAAU;EAAE,GAAI;EAAS,CAAA;;AAI/F,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;AACvE,QAAO,oBAAC,OAAD;EAAK,aAAU;EAAa,WAAW,GAAG,eAAe,OAAO,UAAU;EAAE,GAAI;EAAS,CAAA;;AAGlG,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;AAC7E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,eAAe,aAAa,UAAU;EACpD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;AACxE,QACE,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,eAAe,QAAQ,UAAU;EAAE,GAAI;EAAS,CAAA;;AAI/F,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;AACzE,QACE,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,eAAe,SAAS,UAAU;EAAE,GAAI;EAAS,CAAA;;AAIjG,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;AACxE,QACE,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,eAAe,QAAQ,UAAU;EAAE,GAAI;EAAS,CAAA"}

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

@@ -8,10 +8,17 @@ type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
 type CarouselPlugin = UseCarouselParameters[1];
+type CarouselWheelAxis = "vertical" | "horizontal" | "both" | false;
 type CarouselProps = {
   opts?: CarouselOptions;
   plugins?: CarouselPlugin;
   orientation?: "horizontal" | "vertical";
+  /** Controls which wheel/trackpad axes scroll the carousel.
+   * - `"vertical"` — vertical scroll hijacks carousel (default, mouse-wheel-friendly)
+   * - `"horizontal"` — horizontal trackpad swipes scroll carousel, vertical passes through
+   * - `"both"` — both axes scroll the carousel
+   * - `false` — no wheel gestures (touch drag still works) */
+  wheelAxis?: CarouselWheelAxis;
   setApi?: (api: CarouselApi) => void;
 };
 declare function Carousel({
@@ -19,6 +26,7 @@ declare function Carousel({
   opts,
   setApi,
   plugins,
+  wheelAxis,
   className,
   children,
   ...props
@@ -44,5 +52,5 @@ declare function CarouselNext({
   ...props
 }: React$1.ComponentProps<typeof Button>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
+export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselWheelAxis };
 //# sourceMappingURL=carousel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","names":[],"sources":["../../../src/client/ui/carousel.tsx"],"mappings":";;;;;;KAWK,WAAA,GAAc,oBAAA;AAAA,KACd,qBAAA,GAAwB,UAAA,QAAkB,gBAAA;AAAA,KAC1C,eAAA,GAAkB,qBAAA;AAAA,KAClB,cAAA,GAAiB,qBAAA;AAAA,KAEjB,aAAA;EACH,IAAA,GAAO,eAAA;EACP,OAAA,GAAU,cAAA;EACV,WAAA;EACA,MAAA,IAAU,GAAA,EAAK,WAAA;AAAA;AAAA,iBAwBR,QAAA,CAAA;EACP,WAAA;EACA,IAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,UAAwB,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkFrC,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqBpE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBjE,gBAAA,CAAA;EACP,SAAA;EACA,OAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0B7B,YAAA,CAAA;EACP,SAAA;EACA,OAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"carousel.d.ts","names":[],"sources":["../../../src/client/ui/carousel.tsx"],"mappings":";;;;;;KAUK,WAAA,GAAc,oBAAA;AAAA,KACd,qBAAA,GAAwB,UAAA,QAAkB,gBAAA;AAAA,KAC1C,eAAA,GAAkB,qBAAA;AAAA,KAClB,cAAA,GAAiB,qBAAA;AAAA,KAEjB,iBAAA;AAAA,KAEA,aAAA;EACH,IAAA,GAAO,eAAA;EACP,OAAA,GAAU,cAAA;EACV,WAAA;EATwB;;;;AAAqC;EAe7D,SAAA,GAAY,iBAAA;EACZ,MAAA,IAAU,GAAA,EAAK,WAAA;AAAA;AAAA,iBAwBR,QAAA,CAAA;EACP,WAAA;EACA,IAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,UAAwB,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAwGrC,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAapE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBjE,gBAAA,CAAA;EACP,SAAA;EACA,OAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0B7B,YAAA,CAAA;EACP,SAAA;EACA,OAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/ui/carousel.mjs

@@ -5,6 +5,7 @@ import { Button } from "./button.mjs";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import useEmblaCarousel from "embla-carousel-react";
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
 //#region src/client/ui/carousel.tsx
 const CarouselContext = React$1.createContext(null);
 function useCarousel() {
@@ -12,11 +13,26 @@ function useCarousel() {
 	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
 	return context;
 }
-function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, wheelAxis = "vertical", className, children, ...props }) {
+	const allPlugins = React$1.useMemo(() => {
+		if (orientation !== "horizontal" || wheelAxis === false) return [...plugins ?? []];
+		const wheel = [];
+		if (wheelAxis === "vertical" || wheelAxis === "both") wheel.push(WheelGesturesPlugin({ forceWheelAxis: "y" }));
+		if (wheelAxis === "horizontal" || wheelAxis === "both") {
+			const horizontal = WheelGesturesPlugin();
+			if (wheelAxis === "both") horizontal.name = "wheelGesturesHorizontal";
+			wheel.push(horizontal);
+		}
+		return [...wheel, ...plugins ?? []];
+	}, [
+		orientation,
+		plugins,
+		wheelAxis
+	]);
 	const [carouselRef, api] = useEmblaCarousel({
 		...opts,
 		axis: orientation === "horizontal" ? "x" : "y"
-	}, plugins);
+	}, allPlugins);
 	const [canScrollPrev, setCanScrollPrev] = React$1.useState(false);
 	const [canScrollNext, setCanScrollNext] = React$1.useState(false);
 	const onSelect = React$1.useCallback((api) => {
@@ -96,7 +112,7 @@ function CarouselItem({ className, ...props }) {
 		...props
 	});
 }
-function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }) {
+function CarouselPrevious({ className, variant = "outlined", size = "icon", ...props }) {
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 	const ArrowLeftIcon = useIcon("arrowLeft");
 	return /* @__PURE__ */ jsxs(Button, {
@@ -113,7 +129,7 @@ function CarouselPrevious({ className, variant = "outline", size = "icon", ...pr
 		})]
 	});
 }
-function CarouselNext({ className, variant = "outline", size = "icon", ...props }) {
+function CarouselNext({ className, variant = "outlined", size = "icon", ...props }) {
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
 	const ArrowRightIcon = useIcon("arrowRight");
 	return /* @__PURE__ */ jsxs(Button, {

package/dist/client/ui/carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.mjs","names":["React"],"sources":["../../../src/client/ui/carousel.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { useIcon } from \"../icons/icon-context\"\n\nimport { cn } from \"./utils\"\nimport { Button } from \"./button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype 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 = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.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] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\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\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n  const ArrowLeftIcon = useIcon(\"arrowLeft\")\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 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      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeftIcon />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n  const ArrowRightIcon = useIcon(\"arrowRight\")\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 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      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRightIcon />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n"],"mappings":"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"}
+{"version":3,"file":"carousel.mjs","names":["React"],"sources":["../../../src/client/ui/carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport useEmblaCarousel, { type UseEmblaCarouselType } from \"embla-carousel-react\";\nimport { WheelGesturesPlugin } from \"embla-carousel-wheel-gestures\";\nimport { useIcon } from \"../icons/icon-context\";\n\nimport { cn } from \"./utils\";\nimport { Button } from \"./button\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselWheelAxis = \"vertical\" | \"horizontal\" | \"both\" | false;\n\ntype CarouselProps = {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Controls which wheel/trackpad axes scroll the carousel.\n   * - `\"vertical\"` — vertical scroll hijacks carousel (default, mouse-wheel-friendly)\n   * - `\"horizontal\"` — horizontal trackpad swipes scroll carousel, vertical passes through\n   * - `\"both\"` — both axes scroll the carousel\n   * - `false` — no wheel gestures (touch drag still works) */\n  wheelAxis?: CarouselWheelAxis;\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 = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  wheelAxis = \"vertical\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const allPlugins = React.useMemo(() => {\n    if (orientation !== \"horizontal\" || wheelAxis === false) {\n      return [...(plugins ?? [])];\n    }\n\n    const wheel: ReturnType<typeof WheelGesturesPlugin>[] = [];\n\n    if (wheelAxis === \"vertical\" || wheelAxis === \"both\") {\n      wheel.push(WheelGesturesPlugin({ forceWheelAxis: \"y\" }));\n    }\n\n    if (wheelAxis === \"horizontal\" || wheelAxis === \"both\") {\n      const horizontal = WheelGesturesPlugin();\n      // Rename so Embla doesn't deduplicate when using both axes\n      if (wheelAxis === \"both\") {\n        (horizontal as Record<string, unknown>).name = \"wheelGesturesHorizontal\";\n      }\n      wheel.push(horizontal);\n    }\n\n    return [...wheel, ...(plugins ?? [])];\n  }, [orientation, plugins, wheelAxis]);\n\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    allPlugins,\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext],\n  );\n\n  React.useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on(\"reInit\", onSelect);\n    api.on(\"select\", onSelect);\n\n    return () => {\n      api?.off(\"select\", onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n      <div\n        className={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outlined\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n  const ArrowLeftIcon = useIcon(\"arrowLeft\");\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 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      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeftIcon />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outlined\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n  const ArrowRightIcon = useIcon(\"arrowRight\");\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 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      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRightIcon />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport {\n  type CarouselApi,\n  type CarouselWheelAxis,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"mappings":"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"}