@enadhq/enad-react-sdk 1.0.2 → 1.2.0

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

@@ -0,0 +1,57 @@
+import * as React$1 from "react";
+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;
+declare function DialogTrigger({
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Trigger>): react_jsx_runtime0.JSX.Element;
+declare function DialogPortal({
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Portal>): react_jsx_runtime0.JSX.Element;
+declare function DialogClose({
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Close>): react_jsx_runtime0.JSX.Element;
+declare function DialogOverlay({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Overlay>): react_jsx_runtime0.JSX.Element;
+declare function DialogContent({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Content>): react_jsx_runtime0.JSX.Element;
+declare function DialogHeader({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function DialogFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function DialogTitle({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Dialog$1.Title>): react_jsx_runtime0.JSX.Element;
+declare function DialogDescription({
+  className,
+  ...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, dialogRecipe };
+//# sourceMappingURL=dialog.d.ts.map

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

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

package/dist/client/ui/dialog.mjs

@@ -0,0 +1,97 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { defineSlotRecipe } from "../ui-resolver/recipe.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog as Dialog$1 } from "radix-ui";
+//#region src/client/ui/dialog.tsx
+const dialogRecipe = defineSlotRecipe({
+	slots: [
+		"overlay",
+		"content",
+		"header",
+		"footer",
+		"title",
+		"description"
+	],
+	base: {
+		overlay: "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+		content: "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[var(--enad-card-radius)] border bg-background p-6 shadow-[var(--enad-shadow-lg)] duration-200 sm:max-w-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+		header: "flex flex-col gap-2 text-center sm:text-left",
+		footer: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+		title: "text-lg font-semibold leading-none",
+		description: "text-sm text-muted-foreground"
+	}
+});
+const defaultClasses = dialogRecipe();
+function Dialog({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+function DialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Overlay, {
+		"data-slot": "dialog-overlay",
+		className: cn(defaultClasses.overlay, className),
+		...props
+	});
+}
+function DialogContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(Dialog$1.Content, {
+		"data-slot": "dialog-content",
+		className: cn(defaultClasses.content, className),
+		...props,
+		children
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn(defaultClasses.header, className),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: cn(defaultClasses.footer, className),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		"data-slot": "dialog-title",
+		className: cn(defaultClasses.title, className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		"data-slot": "dialog-description",
+		className: cn(defaultClasses.description, className),
+		...props
+	});
+}
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogRecipe };
+
+//# sourceMappingURL=dialog.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.mjs","names":["DialogPrimitive"],"sources":["../../../src/client/ui/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\n\nimport { defineSlotRecipe } from \"../ui-resolver/recipe\";\nimport { cn } from \"./utils\";\n\nconst dialogRecipe = defineSlotRecipe({\n  slots: [\"overlay\", \"content\", \"header\", \"footer\", \"title\", \"description\"] as const,\n  base: {\n    overlay:\n      \"fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n    content:\n      \"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[var(--enad-card-radius)] border bg-background p-6 shadow-[var(--enad-shadow-lg)] duration-200 sm:max-w-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]\",\n    header: \"flex flex-col gap-2 text-center sm:text-left\",\n    footer: \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n    title: \"text-lg font-semibold leading-none\",\n    description: \"text-sm text-muted-foreground\",\n  },\n});\n\nconst defaultClasses = dialogRecipe();\n\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(defaultClasses.overlay, className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content>) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(defaultClasses.content, className)}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"dialog-header\" className={cn(defaultClasses.header, className)} {...props} />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"dialog-footer\" className={cn(defaultClasses.footer, className)} {...props} />\n  );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(defaultClasses.title, className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(defaultClasses.description, className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogPortal,\n  DialogClose,\n  DialogOverlay,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  dialogRecipe,\n};\n"],"mappings":";;;;;;;AAQA,MAAM,eAAe,iBAAiB;CACpC,OAAO;EAAC;EAAW;EAAW;EAAU;EAAU;EAAS;EAAc;CACzE,MAAM;EACJ,SACE;EACF,SACE;EACF,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,aAAa;EACd;CACF,CAAC;AAEF,MAAM,iBAAiB,cAAc;AAErC,SAAS,OAAO,EAAE,GAAG,SAA4D;AAC/E,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;EAAS,CAAA;;AAG/D,SAAS,cAAc,EAAE,GAAG,SAA+D;AACzF,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA8D;AACvF,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA6D;AACrF,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,oBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GAAG,eAAe,SAAS,UAAU;EAChD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,GAAG,SACoD;AACvD,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,oBAACA,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GAAG,eAAe,SAAS,UAAU;EAChD,GAAI;EAEH;EACuB,CAAA,CACb,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,eAAe,QAAQ,UAAU;EAAE,GAAI;EAAS,CAAA;;AAIjG,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,eAAe,QAAQ,UAAU;EAAE,GAAI;EAAS,CAAA;;AAIjG,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;AAChG,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,eAAe,OAAO,UAAU;EAC9C,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;AAC3D,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,eAAe,aAAa,UAAU;EACpD,GAAI;EACJ,CAAA"}

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

@@ -0,0 +1,25 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { HoverCard as HoverCard$1 } from "radix-ui";
+
+//#region src/client/ui/hover-card.d.ts
+declare const hoverCardContentRecipe: (props?: ({
+  [x: string]: string | undefined;
+} & {
+  className?: string;
+}) | undefined) => string;
+declare function HoverCard({
+  ...props
+}: React$1.ComponentProps<typeof HoverCard$1.Root>): react_jsx_runtime0.JSX.Element;
+declare function HoverCardTrigger({
+  ...props
+}: React$1.ComponentProps<typeof HoverCard$1.Trigger>): react_jsx_runtime0.JSX.Element;
+declare function HoverCardContent({
+  className,
+  align,
+  sideOffset,
+  ...props
+}: React$1.ComponentProps<typeof HoverCard$1.Content>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger, hoverCardContentRecipe };
+//# sourceMappingURL=hover-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.d.ts","names":[],"sources":["../../../src/client/ui/hover-card.tsx"],"mappings":";;;;;cAQM,sBAAA,GAAsB,KAAA;EAAA;;;;iBAInB,SAAA,CAAA;EAAA,GAAe;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,WAAA,CAAmB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5E,gBAAA,CAAA;EAAA,GAAsB;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,WAAA,CAAmB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAItF,gBAAA,CAAA;EACP,SAAA;EACA,KAAA;EACA,UAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,WAAA,CAAmB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/ui/hover-card.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { defineRecipe } from "../ui-resolver/recipe.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { HoverCard as HoverCard$1 } from "radix-ui";
+//#region src/client/ui/hover-card.tsx
+const hoverCardContentRecipe = defineRecipe({ base: "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-[var(--enad-card-radius)] border bg-popover p-4 text-popover-foreground shadow-[var(--enad-shadow-md)] outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95" });
+function HoverCard({ ...props }) {
+	return /* @__PURE__ */ jsx(HoverCard$1.Root, {
+		"data-slot": "hover-card",
+		...props
+	});
+}
+function HoverCardTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(HoverCard$1.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+}
+function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(HoverCard$1.Portal, { children: /* @__PURE__ */ jsx(HoverCard$1.Content, {
+		"data-slot": "hover-card-content",
+		align,
+		sideOffset,
+		className: cn(hoverCardContentRecipe({ className })),
+		...props
+	}) });
+}
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger, hoverCardContentRecipe };
+
+//# sourceMappingURL=hover-card.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.mjs","names":["HoverCardPrimitive"],"sources":["../../../src/client/ui/hover-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\";\n\nimport { defineRecipe } from \"../ui-resolver/recipe\";\nimport { cn } from \"./utils\";\n\nconst hoverCardContentRecipe = defineRecipe({\n  base: \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-[var(--enad-card-radius)] border bg-popover p-4 text-popover-foreground shadow-[var(--enad-shadow-md)] outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n});\n\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal>\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(hoverCardContentRecipe({ className }))}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent, hoverCardContentRecipe };\n"],"mappings":";;;;;;;AAQA,MAAM,yBAAyB,aAAa,EAC1C,MAAM,ihBACP,CAAC;AAEF,SAAS,UAAU,EAAE,GAAG,SAA+D;AACrF,QAAO,oBAACA,YAAmB,MAApB;EAAyB,aAAU;EAAa,GAAI;EAAS,CAAA;;AAGtE,SAAS,iBAAiB,EAAE,GAAG,SAAkE;AAC/F,QAAO,oBAACA,YAAmB,SAApB;EAA4B,aAAU;EAAqB,GAAI;EAAS,CAAA;;AAGjF,SAAS,iBAAiB,EACxB,WACA,QAAQ,UACR,aAAa,GACb,GAAG,SACuD;AAC1D,QACE,oBAACA,YAAmB,QAApB,EAAA,UACE,oBAACA,YAAmB,SAApB;EACE,aAAU;EACH;EACK;EACZ,WAAW,GAAG,uBAAuB,EAAE,WAAW,CAAC,CAAC;EACpD,GAAI;EACJ,CAAA,EACwB,CAAA"}

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

@@ -1,4 +1,31 @@
-import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
-export { Input };
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/ui/input.d.ts
+declare const inputRecipe: (props?: ({
+  variant?: "outlined" | "plain" | undefined;
+} & {
+  className?: string;
+}) | undefined) => string;
+type InputVariant = "outlined" | "plain";
+interface InputProps extends React$1.ComponentProps<"input"> {
+  variant?: InputVariant;
+  startSlot?: React$1.ReactNode;
+  endSlot?: React$1.ReactNode;
+}
+declare function Input({
+  className,
+  type,
+  variant,
+  startSlot,
+  endSlot,
+  ...props
+}: InputProps): react_jsx_runtime0.JSX.Element;
+declare const inputVariants: (props?: ({
+  variant?: "outlined" | "plain" | undefined;
+} & {
+  className?: string;
+}) | undefined) => string;
+//#endregion
+export { Input, type InputProps, type InputVariant, inputRecipe, inputVariants };
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/client/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAc1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"input.d.ts","names":[],"sources":["../../../src/client/ui/input.tsx"],"mappings":";;;;cAKM,WAAA,GAAW,KAAA;;;;;KAsBZ,YAAA;AAAA,UAEK,UAAA,SAAmB,OAAA,CAAM,cAAA;EACjC,OAAA,GAAU,YAAA;EACV,SAAA,GAAY,OAAA,CAAM,SAAA;EAClB,OAAA,GAAU,OAAA,CAAM,SAAA;AAAA;AAAA,iBAGT,KAAA,CAAA;EACP,SAAA;EACA,IAAA;EACA,OAAA;EACA,SAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,UAAA,GAAU,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAuCP,aAAA,GAAa,KAAA"}

package/dist/client/ui/input.mjs

@@ -1,22 +1,52 @@
-import { jsx } from "react/jsx-runtime";
-import { cn } from "./utils";
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type,
-      "data-slot": "input",
-      className: cn(
-        "h-9 w-full min-w-0 rounded-[var(--enad-input-radius)] border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
-        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
-        className
-      ),
-      ...props
-    }
-  );
+import { cn } from "./utils.mjs";
+import { defineRecipe } from "../ui-resolver/recipe.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/ui/input.tsx
+const inputRecipe = defineRecipe({
+	base: "w-full min-w-0 bg-transparent text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+	variants: { variant: {
+		outlined: cn("h-[var(--enad-input-height)] rounded-[var(--enad-input-radius)] border border-input px-[var(--enad-input-px)] py-1 shadow-xs dark:bg-input/30", "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"),
+		plain: cn("border-b border-input pb-2 pr-8", "focus-visible:border-foreground", "aria-invalid:border-destructive")
+	} },
+	defaultVariants: { variant: "outlined" }
+});
+function Input({ className, type, variant = "outlined", startSlot, endSlot, ...props }) {
+	if (startSlot || endSlot) return /* @__PURE__ */ jsxs("div", {
+		className: cn(inputRecipe({ variant }), "flex items-center gap-2", className),
+		children: [
+			startSlot && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "shrink-0 text-muted-foreground [&_svg]:size-4",
+				children: startSlot
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type,
+				"data-slot": "input",
+				"data-variant": variant,
+				className: "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+				...props
+			}),
+			endSlot && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "shrink-0 text-muted-foreground [&_svg]:size-4",
+				children: endSlot
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		"data-variant": variant,
+		className: cn(inputRecipe({
+			variant,
+			className
+		})),
+		...props
+	});
 }
-export {
-  Input
-};
+const inputVariants = inputRecipe;
+//#endregion
+export { Input, inputRecipe, inputVariants };
+
 //# sourceMappingURL=input.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/client/ui/input.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"./utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-[var(--enad-input-radius)] border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30\",\n        \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"],"mappings":"AAMI;AAJJ,SAAS,UAAU;AAEnB,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,MAAM,GAAkC;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"file":"input.mjs","names":[],"sources":["../../../src/client/ui/input.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { defineRecipe } from \"../ui-resolver/recipe\";\nimport { cn } from \"./utils\";\n\nconst inputRecipe = defineRecipe({\n  base: \"w-full min-w-0 bg-transparent text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n  variants: {\n    variant: {\n      outlined: cn(\n        \"h-[var(--enad-input-height)] rounded-[var(--enad-input-radius)] border border-input px-[var(--enad-input-px)] py-1 shadow-xs dark:bg-input/30\",\n        \"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\n        \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n      ),\n      plain: cn(\n        \"border-b border-input pb-2 pr-8\",\n        \"focus-visible:border-foreground\",\n        \"aria-invalid:border-destructive\",\n      ),\n    },\n  },\n  defaultVariants: {\n    variant: \"outlined\",\n  },\n});\n\ntype InputVariant = \"outlined\" | \"plain\";\n\ninterface InputProps extends React.ComponentProps<\"input\"> {\n  variant?: InputVariant;\n  startSlot?: React.ReactNode;\n  endSlot?: React.ReactNode;\n}\n\nfunction Input({\n  className,\n  type,\n  variant = \"outlined\",\n  startSlot,\n  endSlot,\n  ...props\n}: InputProps) {\n  if (startSlot || endSlot) {\n    return (\n      <div className={cn(inputRecipe({ variant }), \"flex items-center gap-2\", className)}>\n        {startSlot && (\n          <span aria-hidden=\"true\" className=\"shrink-0 text-muted-foreground [&_svg]:size-4\">\n            {startSlot}\n          </span>\n        )}\n        <input\n          type={type}\n          data-slot=\"input\"\n          data-variant={variant}\n          className=\"min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground\"\n          {...props}\n        />\n        {endSlot && (\n          <span aria-hidden=\"true\" className=\"shrink-0 text-muted-foreground [&_svg]:size-4\">\n            {endSlot}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      data-variant={variant}\n      className={cn(inputRecipe({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputRecipe, type InputProps, type InputVariant };\n\n// Backward compat\nconst inputVariants = inputRecipe;\nexport { inputVariants };\n"],"mappings":";;;;;AAKA,MAAM,cAAc,aAAa;CAC/B,MAAM;CACN,UAAU,EACR,SAAS;EACP,UAAU,GACR,iJACA,kHACA,iFACA,yGACD;EACD,OAAO,GACL,mCACA,mCACA,kCACD;EACF,EACF;CACD,iBAAiB,EACf,SAAS,YACV;CACF,CAAC;AAUF,SAAS,MAAM,EACb,WACA,MACA,UAAU,YACV,WACA,SACA,GAAG,SACU;AACb,KAAI,aAAa,QACf,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,EAAE,SAAS,CAAC,EAAE,2BAA2B,UAAU;YAAlF;GACG,aACC,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;cAChC;IACI,CAAA;GAET,oBAAC,SAAD;IACQ;IACN,aAAU;IACV,gBAAc;IACd,WAAU;IACV,GAAI;IACJ,CAAA;GACD,WACC,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;cAChC;IACI,CAAA;GAEL;;AAIV,QACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,YAAY;GAAE;GAAS;GAAW,CAAC,CAAC;EAClD,GAAI;EACJ,CAAA;;AAON,MAAM,gBAAgB"}

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

@@ -1,5 +1,17 @@
-import * as React from "react";
-import { Label as LabelPrimitive } from "radix-ui";
-declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-export { Label };
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Label as Label$1 } from "radix-ui";
+
+//#region src/client/ui/label.d.ts
+declare const labelRecipe: (props?: ({
+  [x: string]: string | undefined;
+} & {
+  className?: string;
+}) | undefined) => string;
+declare function Label({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Label$1.Root>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Label, labelRecipe };
 //# sourceMappingURL=label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/client/ui/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,UAAU,CAAA;AAIlD,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAWlD;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"label.d.ts","names":[],"sources":["../../../src/client/ui/label.tsx"],"mappings":";;;;;cAMM,WAAA,GAAW,KAAA;EAAA;;;;iBAIR,KAAA,CAAA;EAAQ,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,QAAsB,OAAA,CAAe,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/ui/label.mjs

@@ -1,23 +1,18 @@
+import { cn } from "./utils.mjs";
+import { defineRecipe } from "../ui-resolver/recipe.mjs";
+import "react";
 import { jsx } from "react/jsx-runtime";
-import { Label as LabelPrimitive } from "radix-ui";
-import { cn } from "./utils";
-function Label({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    LabelPrimitive.Root,
-    {
-      "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
+import { Label as Label$1 } from "radix-ui";
+//#region src/client/ui/label.tsx
+const labelRecipe = defineRecipe({ base: "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50" });
+function Label({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label$1.Root, {
+		"data-slot": "label",
+		className: cn(labelRecipe({ className })),
+		...props
+	});
 }
-export {
-  Label
-};
+//#endregion
+export { Label, labelRecipe };
+
 //# sourceMappingURL=label.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/client/ui/label.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n"],"mappings":"AAUI;AATJ,SAAS,SAAS,sBAAsB;AAExC,SAAS,UAAU;AAEnB,SAAS,MAAM;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAqD;AACnD,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"file":"label.mjs","names":["LabelPrimitive"],"sources":["../../../src/client/ui/label.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\n\nimport { defineRecipe } from \"../ui-resolver/recipe\";\nimport { cn } from \"./utils\";\n\nconst labelRecipe = defineRecipe({\n  base: \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n});\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root data-slot=\"label\" className={cn(labelRecipe({ className }))} {...props} />\n  );\n}\n\nexport { Label, labelRecipe };\n"],"mappings":";;;;;;AAMA,MAAM,cAAc,aAAa,EAC/B,MAAM,uNACP,CAAC;AAEF,SAAS,MAAM,EAAE,WAAW,GAAG,SAA2D;AACxF,QACE,oBAACA,QAAe,MAAhB;EAAqB,aAAU;EAAQ,WAAW,GAAG,YAAY,EAAE,WAAW,CAAC,CAAC;EAAE,GAAI;EAAS,CAAA"}

package/dist/client/ui/mid-truncate.d.ts

@@ -1,12 +1,15 @@
-import * as React from "react";
-export interface MidTruncateProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** The text to truncate. Must be a string so the end portion can be preserved. */
-    children: string;
-    /**
-     * Number of characters to always keep visible at the end of the string.
-     * Default: 12. Increase this if the tail (e.g. a variant slug) is longer.
-     */
-    endLength?: number;
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/ui/mid-truncate.d.ts
+interface MidTruncateProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  /** The text to truncate. Must be a string so the end portion can be preserved. */
+  children: string;
+  /**
+   * Number of characters to always keep visible at the end of the string.
+   * Default: 12. Increase this if the tail (e.g. a variant slug) is longer.
+   */
+  endLength?: number;
 }
 /**
  * Displays text as "start of text…end of text" when it overflows one line,
@@ -23,5 +26,13 @@ export interface MidTruncateProps extends React.HTMLAttributes<HTMLDivElement> {
  * Set `--enad-mid-truncate-bg` on a parent to match the surrounding background
  * color (defaults to `var(--enad-surface, white)`).
  */
-export declare function MidTruncate({ children, endLength, className, style, ...props }: MidTruncateProps): import("react/jsx-runtime").JSX.Element;
+declare function MidTruncate({
+  children,
+  endLength,
+  className,
+  style,
+  ...props
+}: MidTruncateProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MidTruncate, MidTruncateProps };
 //# sourceMappingURL=mid-truncate.d.ts.map

package/dist/client/ui/mid-truncate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mid-truncate.d.ts","sourceRoot":"","sources":["../../../src/client/ui/mid-truncate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,kFAAkF;IAClF,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAc,EACd,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAyClB"}
+{"version":3,"file":"mid-truncate.d.ts","names":[],"sources":["../../../src/client/ui/mid-truncate.tsx"],"mappings":";;;;UAIiB,gBAAA,SAAyB,OAAA,CAAM,cAAA,CAAe,cAAA;;EAE7D,QAAA;EAFe;;;;EAOf,SAAA;AAAA;;;;;;AAkBF;;;;;;;;;;iBAAgB,WAAA,CAAA;EACd,QAAA;EACA,SAAA;EACA,SAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/ui/mid-truncate.mjs

@@ -1,25 +1,52 @@
+import { cn } from "./utils.mjs";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "./utils";
-function MidTruncate({
-  children,
-  endLength = 12,
-  className,
-  style,
-  ...props
-}) {
-  const end = children.length > endLength ? children.slice(-endLength) : children;
-  return /* @__PURE__ */ jsx("div", { className: cn("enad-mid-truncate", className), style, ...props, children: /* @__PURE__ */ jsxs("div", { className: "enad-mid-truncate__inner", children: [
-    /* @__PURE__ */ jsxs("div", { className: "enad-mid-truncate__text", children: [
-      /* @__PURE__ */ jsx("span", { className: "enad-mid-truncate__wrap", children }),
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "enad-mid-truncate__clip", children })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "enad-mid-truncate__detect", children: /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "enad-mid-truncate__end", children: /* @__PURE__ */ jsxs("span", { children: [
-      "\u2026",
-      end
-    ] }) }) })
-  ] }) });
+//#region src/client/ui/mid-truncate.tsx
+/**
+* Displays text as "start of text…end of text" when it overflows one line,
+* keeping both the beginning and the end of the string readable.
+*
+* Uses CSS container queries — no JavaScript measurement required. A sibling
+* detector cell with `container-type: size` fires `@container (min-height: 2lh)`
+* when the invisible wrap layer causes the grid row to grow, which reveals the
+* end overlay.
+*
+* The `endLength` prop controls how many trailing characters are always shown.
+* Pick a value that captures the meaningful suffix (variant, extension, ID tail, …).
+*
+* Set `--enad-mid-truncate-bg` on a parent to match the surrounding background
+* color (defaults to `var(--enad-surface, white)`).
+*/
+function MidTruncate({ children, endLength = 12, className, style, ...props }) {
+	const end = children.length > endLength ? children.slice(-endLength) : children;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("enad-mid-truncate", className),
+		style,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "enad-mid-truncate__inner",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "enad-mid-truncate__text",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "enad-mid-truncate__wrap",
+					children
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "enad-mid-truncate__clip",
+					children
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "enad-mid-truncate__detect",
+				children: /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "enad-mid-truncate__end",
+					children: /* @__PURE__ */ jsxs("span", { children: ["…", end] })
+				})
+			})]
+		})
+	});
 }
-export {
-  MidTruncate
-};
+//#endregion
+export { MidTruncate };
+
 //# sourceMappingURL=mid-truncate.mjs.map

package/dist/client/ui/mid-truncate.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/client/ui/mid-truncate.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport interface MidTruncateProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The text to truncate. Must be a string so the end portion can be preserved. */\n  children: string;\n  /**\n   * Number of characters to always keep visible at the end of the string.\n   * Default: 12. Increase this if the tail (e.g. a variant slug) is longer.\n   */\n  endLength?: number;\n}\n\n/**\n * Displays text as \"start of text…end of text\" when it overflows one line,\n * keeping both the beginning and the end of the string readable.\n *\n * Uses CSS container queries — no JavaScript measurement required. A sibling\n * detector cell with `container-type: size` fires `@container (min-height: 2lh)`\n * when the invisible wrap layer causes the grid row to grow, which reveals the\n * end overlay.\n *\n * The `endLength` prop controls how many trailing characters are always shown.\n * Pick a value that captures the meaningful suffix (variant, extension, ID tail, …).\n *\n * Set `--enad-mid-truncate-bg` on a parent to match the surrounding background\n * color (defaults to `var(--enad-surface, white)`).\n */\nexport function MidTruncate({\n  children,\n  endLength = 12,\n  className,\n  style,\n  ...props\n}: MidTruncateProps) {\n  const end = children.length > endLength ? children.slice(-endLength) : children;\n\n  return (\n    <div className={cn(\"enad-mid-truncate\", className)} style={style} {...props}>\n      {/* Inner grid — no height constraint so the detect cell can grow to 2lh */}\n      <div className=\"enad-mid-truncate__inner\">\n        {/* Cell 1: text layers */}\n        <div className=\"enad-mid-truncate__text\">\n          {/*\n           * Wrap layer — in normal flow so it drives the grid row height.\n           * color: transparent hides it without removing it from the a11y tree.\n           */}\n          <span className=\"enad-mid-truncate__wrap\">{children}</span>\n          {/*\n           * Clip layer — absolute, left-aligned, single nowrap line.\n           * Shows the START of the text; clips at the container edge.\n           */}\n          <span aria-hidden=\"true\" className=\"enad-mid-truncate__clip\">\n            {children}\n          </span>\n        </div>\n\n        {/*\n         * Cell 2: detector.\n         * container-type: size — its height equals the grid row height.\n         * When text wraps (row grows to 2lh), @container fires.\n         */}\n        <div className=\"enad-mid-truncate__detect\">\n          {/*\n           * End overlay — positioned absolute to .enad-mid-truncate (right edge).\n           * Solid background covers the overflowing start text underneath.\n           * Hidden until @container (min-height: 2lh) fires.\n           */}\n          <div aria-hidden=\"true\" className=\"enad-mid-truncate__end\">\n            <span>…{end}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AA2CQ,SAKE,KALF;AAzCR,SAAS,UAAU;AA2BZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,MAAM,SAAS,SAAS,YAAY,SAAS,MAAM,CAAC,SAAS,IAAI;AAEvE,SACE,oBAAC,SAAI,WAAW,GAAG,qBAAqB,SAAS,GAAG,OAAe,GAAG,OAEpE,+BAAC,SAAI,WAAU,4BAEb;AAAA,yBAAC,SAAI,WAAU,2BAKb;AAAA,0BAAC,UAAK,WAAU,2BAA2B,UAAS;AAAA,MAKpD,oBAAC,UAAK,eAAY,QAAO,WAAU,2BAChC,UACH;AAAA,OACF;AAAA,IAOA,oBAAC,SAAI,WAAU,6BAMb,8BAAC,SAAI,eAAY,QAAO,WAAU,0BAChC,+BAAC,UAAK;AAAA;AAAA,MAAE;AAAA,OAAI,GACd,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"file":"mid-truncate.mjs","names":[],"sources":["../../../src/client/ui/mid-truncate.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport interface MidTruncateProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The text to truncate. Must be a string so the end portion can be preserved. */\n  children: string;\n  /**\n   * Number of characters to always keep visible at the end of the string.\n   * Default: 12. Increase this if the tail (e.g. a variant slug) is longer.\n   */\n  endLength?: number;\n}\n\n/**\n * Displays text as \"start of text…end of text\" when it overflows one line,\n * keeping both the beginning and the end of the string readable.\n *\n * Uses CSS container queries — no JavaScript measurement required. A sibling\n * detector cell with `container-type: size` fires `@container (min-height: 2lh)`\n * when the invisible wrap layer causes the grid row to grow, which reveals the\n * end overlay.\n *\n * The `endLength` prop controls how many trailing characters are always shown.\n * Pick a value that captures the meaningful suffix (variant, extension, ID tail, …).\n *\n * Set `--enad-mid-truncate-bg` on a parent to match the surrounding background\n * color (defaults to `var(--enad-surface, white)`).\n */\nexport function MidTruncate({\n  children,\n  endLength = 12,\n  className,\n  style,\n  ...props\n}: MidTruncateProps) {\n  const end = children.length > endLength ? children.slice(-endLength) : children;\n\n  return (\n    <div className={cn(\"enad-mid-truncate\", className)} style={style} {...props}>\n      {/* Inner grid — no height constraint so the detect cell can grow to 2lh */}\n      <div className=\"enad-mid-truncate__inner\">\n        {/* Cell 1: text layers */}\n        <div className=\"enad-mid-truncate__text\">\n          {/*\n           * Wrap layer — in normal flow so it drives the grid row height.\n           * color: transparent hides it without removing it from the a11y tree.\n           */}\n          <span className=\"enad-mid-truncate__wrap\">{children}</span>\n          {/*\n           * Clip layer — absolute, left-aligned, single nowrap line.\n           * Shows the START of the text; clips at the container edge.\n           */}\n          <span aria-hidden=\"true\" className=\"enad-mid-truncate__clip\">\n            {children}\n          </span>\n        </div>\n\n        {/*\n         * Cell 2: detector.\n         * container-type: size — its height equals the grid row height.\n         * When text wraps (row grows to 2lh), @container fires.\n         */}\n        <div className=\"enad-mid-truncate__detect\">\n          {/*\n           * End overlay — positioned absolute to .enad-mid-truncate (right edge).\n           * Solid background covers the overflowing start text underneath.\n           * Hidden until @container (min-height: 2lh) fires.\n           */}\n          <div aria-hidden=\"true\" className=\"enad-mid-truncate__end\">\n            <span>…{end}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,YAAY,EAC1B,UACA,YAAY,IACZ,WACA,OACA,GAAG,SACgB;CACnB,MAAM,MAAM,SAAS,SAAS,YAAY,SAAS,MAAM,CAAC,UAAU,GAAG;AAEvE,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,qBAAqB,UAAU;EAAS;EAAO,GAAI;YAEpE,qBAAC,OAAD;GAAK,WAAU;aAAf,CAEE,qBAAC,OAAD;IAAK,WAAU;cAAf,CAKE,oBAAC,QAAD;KAAM,WAAU;KAA2B;KAAgB,CAAA,EAK3D,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;KAChC;KACI,CAAA,CACH;OAON,oBAAC,OAAD;IAAK,WAAU;cAMb,oBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;eAChC,qBAAC,QAAD,EAAA,UAAA,CAAM,KAAE,IAAW,EAAA,CAAA;KACf,CAAA;IACF,CAAA,CACF;;EACF,CAAA"}