@enadhq/enad-react-sdk 1.1.0 → 1.2.0

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.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":";;;;;;KASK,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,iBAiFrC,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

@@ -96,7 +96,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 +113,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 { 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: 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  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"mappings":"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"}

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

@@ -3,10 +3,18 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "radix-ui";
 
 //#region src/client/ui/checkbox.d.ts
+declare const checkboxRecipe: (props?: ({
+  [x: string]: string | undefined;
+} & {
+  className?: Partial<Record<"root" | "indicator", string>> | undefined;
+}) | undefined) => {
+  root: string;
+  indicator: string;
+};
 declare function Checkbox({
   className,
   ...props
 }: React$1.ComponentProps<typeof Checkbox$1.Root>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Checkbox };
+export { Checkbox, checkboxRecipe };
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../../src/client/ui/checkbox.tsx"],"mappings":";;;;;iBAQS,QAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../../src/client/ui/checkbox.tsx"],"mappings":";;;;;cASM,cAAA,GAAc,KAAA;EAAA;;cAMlB,OAAA,CAAA,MAAA;AAAA;;;;iBAIO,QAAA,CAAA;EAAW,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/ui/checkbox.mjs

@@ -1,24 +1,33 @@
 "use client";
 import { useIcon } from "../icons/icon-context.mjs";
 import { cn } from "./utils.mjs";
+import { defineSlotRecipe } from "../ui-resolver/recipe.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "radix-ui";
 //#region src/client/ui/checkbox.tsx
+const checkboxRecipe = defineSlotRecipe({
+	slots: ["root", "indicator"],
+	base: {
+		root: "peer relative size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none hit-area-4 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+		indicator: "grid place-content-center text-current transition-none"
+	}
+});
+const defaultClasses = checkboxRecipe();
 function Checkbox({ className, ...props }) {
 	const CheckIcon = useIcon("check");
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		"data-slot": "checkbox",
-		className: cn("peer relative size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none hit-area-4 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary", className),
+		className: cn(defaultClasses.root, className),
 		...props,
 		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
 			"data-slot": "checkbox-indicator",
-			className: "grid place-content-center text-current transition-none",
+			className: defaultClasses.indicator,
 			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
 		})
 	});
 }
 //#endregion
-export { Checkbox };
+export { Checkbox, checkboxRecipe };
 
 //# sourceMappingURL=checkbox.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.mjs","names":["CheckboxPrimitive"],"sources":["../../../src/client/ui/checkbox.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useIcon } from \"../icons/icon-context\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./utils\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  const CheckIcon = useIcon(\"check\")\n\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none hit-area-4 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none\"\n      >\n        <CheckIcon className=\"size-3.5\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n"],"mappings":";;;;;;;AAQA,SAAS,SAAS,EAChB,WACA,GAAG,SACmD;CACtD,MAAM,YAAY,QAAQ,QAAQ;AAElC,QACE,oBAACA,WAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,mgBACA,UACD;EACD,GAAI;YAEJ,oBAACA,WAAkB,WAAnB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,WAAD,EAAW,WAAU,YAAa,CAAA;GACN,CAAA;EACP,CAAA"}
+{"version":3,"file":"checkbox.mjs","names":["CheckboxPrimitive"],"sources":["../../../src/client/ui/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../icons/icon-context\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\n\nimport { defineSlotRecipe } from \"../ui-resolver/recipe\";\nimport { cn } from \"./utils\";\n\nconst checkboxRecipe = defineSlotRecipe({\n  slots: [\"root\", \"indicator\"] as const,\n  base: {\n    root: \"peer relative size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none hit-area-4 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary\",\n    indicator: \"grid place-content-center text-current transition-none\",\n  },\n});\n\nconst defaultClasses = checkboxRecipe();\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  const CheckIcon = useIcon(\"check\");\n\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(defaultClasses.root, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className={defaultClasses.indicator}\n      >\n        <CheckIcon className=\"size-3.5\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox, checkboxRecipe };\n"],"mappings":";;;;;;;;AASA,MAAM,iBAAiB,iBAAiB;CACtC,OAAO,CAAC,QAAQ,YAAY;CAC5B,MAAM;EACJ,MAAM;EACN,WAAW;EACZ;CACF,CAAC;AAEF,MAAM,iBAAiB,gBAAgB;AAEvC,SAAS,SAAS,EAAE,WAAW,GAAG,SAA8D;CAC9F,MAAM,YAAY,QAAQ,QAAQ;AAElC,QACE,oBAACA,WAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GAAG,eAAe,MAAM,UAAU;EAC7C,GAAI;YAEJ,oBAACA,WAAkB,WAAnB;GACE,aAAU;GACV,WAAW,eAAe;aAE1B,oBAAC,WAAD,EAAW,WAAU,YAAa,CAAA;GACN,CAAA;EACP,CAAA"}

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

@@ -3,6 +3,18 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "radix-ui";
 
 //#region src/client/ui/dialog.d.ts
+declare const dialogRecipe: (props?: ({
+  [x: string]: string | undefined;
+} & {
+  className?: Partial<Record<"overlay" | "content" | "title" | "description" | "header" | "footer", string>> | undefined;
+}) | undefined) => {
+  overlay: string;
+  content: string;
+  title: string;
+  description: string;
+  header: string;
+  footer: string;
+};
 declare function Dialog({
   ...props
 }: React$1.ComponentProps<typeof Dialog$1.Root>): react_jsx_runtime0.JSX.Element;
@@ -41,5 +53,5 @@ declare function DialogDescription({
   ...props
 }: React$1.ComponentProps<typeof Dialog$1.Description>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogRecipe };
 //# sourceMappingURL=dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../../src/client/ui/dialog.tsx"],"mappings":";;;;;iBAOS,MAAA,CAAA;EAAA,GAAY;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAItE,aAAA,CAAA;EAAA,GAAmB;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIhF,YAAA,CAAA;EAAA,GAAkB;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9E,WAAA,CAAA;EAAA,GAAiB;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5E,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAa9C,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkB9C,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUvF,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,WAAA,IAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../../src/client/ui/dialog.tsx"],"mappings":";;;;;cAQM,YAAA,GAAY,KAAA;EAAA;;cAYhB,OAAA,CAAA,MAAA;AAAA;;;;;;;;iBAIO,MAAA,CAAA;EAAA,GAAY;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAItE,aAAA,CAAA;EAAA,GAAmB;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIhF,YAAA,CAAA;EAAA,GAAkB;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9E,WAAA,CAAA;EAAA,GAAiB;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5E,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU9C,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAe9C,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAMjE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAMjE,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUvF,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,WAAA,IAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}