@exxatdesignux/ui 0.2.19 → 0.4.0

package/dist/components/ui/input-group.js

@@ -0,0 +1,219 @@
+"use client";
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 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/80",
+        outline: "border-input bg-background hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:bg-input/15 dark:hover:bg-input/25",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:hover:bg-interactive-hover-subtle",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
+        xs: "h-6 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3.5 has-data-[icon=inline-start]:ps-3.5",
+        icon: "size-9",
+        "icon-xs": "size-6 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+});
+Button.displayName = "Button";
+var Input = React.forwardRef(
+  function Input2({ className, type, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(
+          "h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem]",
+        "inline-end": "order-last pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem]",
+        "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+//# sourceMappingURL=input-group.js.map
+//# sourceMappingURL=input-group.js.map

package/dist/components/ui/input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/ui/input.tsx","../../../src/components/ui/textarea.tsx","../../../src/components/ui/input-group.tsx"],"names":["React2","Input","jsx","cva"],"mappings":"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","file":"input-group.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 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/80\",\n        outline:\n          \"border-input bg-background hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:bg-input/15 dark:hover:bg-input/25\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:hover:bg-interactive-hover-subtle\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5\",\n        xs: \"h-6 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3.5 has-data-[icon=inline-start]:ps-3.5\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Button = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> &\n    VariantProps<typeof buttonVariants> & {\n      asChild?: boolean\n    }\n>(({ className, variant = \"default\", size = \"default\", asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n})\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n","import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  function Input({ className, type, ...props }, ref) {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-slot=\"input\"\n        className={cn(\n          \"h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n          className\n        )}\n        {...props}\n      />\n    )\n  },\n)\n\nexport { Input }\n","import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"]}

package/dist/components/ui/input-mask.d.ts

@@ -0,0 +1,39 @@
+import * as use_mask_input from 'use-mask-input';
+import { Mask, Options } from 'use-mask-input';
+export { Mask, Options, useHookFormMask, useMaskInput, useTanStackFormMask, withHookFormMask, withMask, withTanStackFormMask } from 'use-mask-input';
+import * as React from 'react';
+export { composeRefs } from '../../lib/compose-refs.js';
+import { Input } from './input.js';
+
+/** Default mask UX per Shadcn Studio demos (underscore placeholder, no hover mask). */
+declare const exxatInputMaskDefaults: Options;
+/** Common patterns (Inputmask `9` = digit, `a` = letter, `*` = alnum). */
+declare const exxatMaskPatterns: {
+    /** US NANP 10-digit display */
+    readonly phoneUS: "(999) 999-9999";
+    /** US ZIP or ZIP+4 */
+    readonly zipUS: "99999[-9999]";
+    /** Calendar-style date (validate separately). */
+    readonly dateMDY: "99/99/9999";
+    /** Studio input-mask-01 style — UK-style plate-ish token; adjust per product. */
+    readonly customReference: "AA99 AAA";
+};
+declare function exxatTimeMaskOptions(): Options & {
+    inputFormat: string;
+    outputFormat: string;
+};
+declare function useExxatPhoneMask(options?: Options): (input: use_mask_input.Input | null) => void;
+declare function useExxatZipMask(options?: Options): (input: use_mask_input.Input | null) => void;
+declare function useExxatDateMDYMask(options?: Options): (input: use_mask_input.Input | null) => void;
+declare function useExxatTimeMask(options?: Options): (input: use_mask_input.Input | null) => void;
+declare function useExxatCustomMask(mask: Mask, options?: Options): (input: use_mask_input.Input | null) => void;
+/** Merge React Hook Form Controller `field.ref` with a mask ref. */
+declare function useExxatMaskedFieldRef(fieldRef: React.Ref<HTMLInputElement>, mask: Mask, options?: Options): React.RefCallback<HTMLInputElement>;
+type MaskedInputProps = React.ComponentProps<typeof Input> & {
+    mask: Mask;
+    maskOptions?: Options;
+};
+/** Standalone masked `Input` (forwardRef + merged mask ref). */
+declare const MaskedInput: React.ForwardRefExoticComponent<Omit<MaskedInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { MaskedInput, type MaskedInputProps, exxatInputMaskDefaults, exxatMaskPatterns, exxatTimeMaskOptions, useExxatCustomMask, useExxatDateMDYMask, useExxatMaskedFieldRef, useExxatPhoneMask, useExxatTimeMask, useExxatZipMask };

package/dist/components/ui/input-mask.js

@@ -0,0 +1,118 @@
+"use client";
+import * as React2 from 'react';
+import { useMaskInput } from 'use-mask-input';
+export { useHookFormMask, useMaskInput, useTanStackFormMask, withHookFormMask, withMask, withTanStackFormMask } from 'use-mask-input';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/compose-refs.ts
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (ref == null) continue;
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Input = React2.forwardRef(
+  function Input2({ className, type, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(
+          "h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+var exxatInputMaskDefaults = {
+  placeholder: "_",
+  showMaskOnHover: false
+};
+var exxatMaskPatterns = {
+  /** US NANP 10-digit display */
+  phoneUS: "(999) 999-9999",
+  /** US ZIP or ZIP+4 */
+  zipUS: "99999[-9999]",
+  /** Calendar-style date (validate separately). */
+  dateMDY: "99/99/9999",
+  /** Studio input-mask-01 style — UK-style plate-ish token; adjust per product. */
+  customReference: "AA99 AAA"
+};
+function exxatTimeMaskOptions() {
+  return {
+    ...exxatInputMaskDefaults,
+    inputFormat: "HH:MM:ss",
+    outputFormat: "HH:MM:ss"
+  };
+}
+function useExxatPhoneMask(options) {
+  return useMaskInput({
+    mask: exxatMaskPatterns.phoneUS,
+    options: { ...exxatInputMaskDefaults, ...options }
+  });
+}
+function useExxatZipMask(options) {
+  return useMaskInput({
+    mask: exxatMaskPatterns.zipUS,
+    options: { ...exxatInputMaskDefaults, ...options }
+  });
+}
+function useExxatDateMDYMask(options) {
+  return useMaskInput({
+    mask: exxatMaskPatterns.dateMDY,
+    options: { ...exxatInputMaskDefaults, ...options }
+  });
+}
+function useExxatTimeMask(options) {
+  return useMaskInput({
+    mask: "datetime",
+    options: { ...exxatTimeMaskOptions(), ...options }
+  });
+}
+function useExxatCustomMask(mask, options) {
+  return useMaskInput({
+    mask,
+    options: { ...exxatInputMaskDefaults, ...options }
+  });
+}
+function useExxatMaskedFieldRef(fieldRef, mask, options) {
+  const maskRef = useMaskInput({
+    mask,
+    options: { ...exxatInputMaskDefaults, ...options }
+  });
+  return React2.useMemo(() => composeRefs(fieldRef, maskRef), [fieldRef, maskRef]);
+}
+var MaskedInput = React2.forwardRef(function MaskedInput2({ mask, maskOptions, className, type = "text", ...props }, ref) {
+  const maskRef = useMaskInput({
+    mask,
+    options: { ...exxatInputMaskDefaults, ...maskOptions }
+  });
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref: composeRefs(ref, maskRef),
+      type,
+      className: cn(className),
+      ...props
+    }
+  );
+});
+
+export { MaskedInput, composeRefs, exxatInputMaskDefaults, exxatMaskPatterns, exxatTimeMaskOptions, useExxatCustomMask, useExxatDateMDYMask, useExxatMaskedFieldRef, useExxatPhoneMask, useExxatTimeMask, useExxatZipMask };
+//# sourceMappingURL=input-mask.js.map
+//# sourceMappingURL=input-mask.js.map

package/dist/components/ui/input-mask.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/compose-refs.ts","../../../src/lib/utils.ts","../../../src/components/ui/input.tsx","../../../src/components/ui/input-mask.tsx"],"names":["React","Input","MaskedInput","jsx"],"mappings":"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","file":"input-mask.js","sourcesContent":["import * as React from \"react\"\n\n/** Merges multiple refs (callback or object) for the same DOM node — e.g. RHF `field.ref` + mask ref. */\nexport function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {\n  return node => {\n    for (const ref of refs) {\n      if (ref == null) continue\n      if (typeof ref === \"function\") {\n        ref(node)\n      } else {\n        ;(ref as React.MutableRefObject<T | null>).current = node\n      }\n    }\n  }\n}\n","import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  function Input({ className, type, ...props }, ref) {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-slot=\"input\"\n        className={cn(\n          \"h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n          className\n        )}\n        {...props}\n      />\n    )\n  },\n)\n\nexport { Input }\n","\"use client\"\n\n/**\n * Input masking — aligned with [Shadcn Studio input-mask](https://shadcnstudio.com/docs/components/input-mask):\n * `use-mask-input` for phone / date / time / custom / zip; use `PaymentCardFields` for card flows.\n */\n\nimport * as React from \"react\"\nimport {\n  useMaskInput,\n  withMask,\n  useHookFormMask,\n  withHookFormMask,\n  useTanStackFormMask,\n  withTanStackFormMask,\n} from \"use-mask-input\"\nimport type { Mask, Options } from \"use-mask-input\"\n\nimport { composeRefs } from \"../../lib/compose-refs\"\n\nexport { composeRefs } from \"../../lib/compose-refs\"\nimport { cn } from \"../../lib/utils\"\nimport { Input } from \"./input\"\n\n/** Default mask UX per Shadcn Studio demos (underscore placeholder, no hover mask). */\nexport const exxatInputMaskDefaults: Options = {\n  placeholder: \"_\",\n  showMaskOnHover: false,\n}\n\n/** Common patterns (Inputmask `9` = digit, `a` = letter, `*` = alnum). */\nexport const exxatMaskPatterns = {\n  /** US NANP 10-digit display */\n  phoneUS: \"(999) 999-9999\",\n  /** US ZIP or ZIP+4 */\n  zipUS: \"99999[-9999]\",\n  /** Calendar-style date (validate separately). */\n  dateMDY: \"99/99/9999\",\n  /** Studio input-mask-01 style — UK-style plate-ish token; adjust per product. */\n  customReference: \"AA99 AAA\",\n} as const satisfies Record<string, Mask>\n\nexport function exxatTimeMaskOptions(): Options & {\n  inputFormat: string\n  outputFormat: string\n} {\n  return {\n    ...exxatInputMaskDefaults,\n    inputFormat: \"HH:MM:ss\",\n    outputFormat: \"HH:MM:ss\",\n  }\n}\n\nexport function useExxatPhoneMask(options?: Options) {\n  return useMaskInput({\n    mask: exxatMaskPatterns.phoneUS,\n    options: { ...exxatInputMaskDefaults, ...options },\n  })\n}\n\nexport function useExxatZipMask(options?: Options) {\n  return useMaskInput({\n    mask: exxatMaskPatterns.zipUS,\n    options: { ...exxatInputMaskDefaults, ...options },\n  })\n}\n\nexport function useExxatDateMDYMask(options?: Options) {\n  return useMaskInput({\n    mask: exxatMaskPatterns.dateMDY,\n    options: { ...exxatInputMaskDefaults, ...options },\n  })\n}\n\nexport function useExxatTimeMask(options?: Options) {\n  return useMaskInput({\n    mask: \"datetime\",\n    options: { ...exxatTimeMaskOptions(), ...options },\n  })\n}\n\nexport function useExxatCustomMask(mask: Mask, options?: Options) {\n  return useMaskInput({\n    mask,\n    options: { ...exxatInputMaskDefaults, ...options },\n  })\n}\n\n/** Merge React Hook Form Controller `field.ref` with a mask ref. */\nexport function useExxatMaskedFieldRef(\n  fieldRef: React.Ref<HTMLInputElement>,\n  mask: Mask,\n  options?: Options\n): React.RefCallback<HTMLInputElement> {\n  const maskRef = useMaskInput({\n    mask,\n    options: { ...exxatInputMaskDefaults, ...options },\n  })\n  return React.useMemo(() => composeRefs(fieldRef, maskRef), [fieldRef, maskRef])\n}\n\nexport type MaskedInputProps = React.ComponentProps<typeof Input> & {\n  mask: Mask\n  maskOptions?: Options\n}\n\n/** Standalone masked `Input` (forwardRef + merged mask ref). */\nconst MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(function MaskedInput(\n  { mask, maskOptions, className, type = \"text\", ...props },\n  ref\n) {\n  const maskRef = useMaskInput({\n    mask,\n    options: { ...exxatInputMaskDefaults, ...maskOptions },\n  })\n  return (\n    <Input\n      ref={composeRefs(ref, maskRef)}\n      type={type}\n      className={cn(className)}\n      {...props}\n    />\n  )\n})\n\nexport {\n  MaskedInput,\n  useMaskInput,\n  withMask,\n  useHookFormMask,\n  withHookFormMask,\n  useTanStackFormMask,\n  withTanStackFormMask,\n}\nexport type { Mask, Options }\n"]}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { Input };

package/dist/components/ui/input.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ui/input.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Input = React.forwardRef(
+  function Input2({ className, type, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(
+          "h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+
+export { Input };
+//# sourceMappingURL=input.js.map
+//# sourceMappingURL=input.js.map

package/dist/components/ui/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/input.tsx"],"names":["Input"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EAClB,SAASA,OAAM,EAAE,SAAA,EAAW,MAAM,GAAG,KAAA,IAAS,GAAA,EAAK;AACjD,IAAA,uBACE,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA;AAAA,QACA,WAAA,EAAU,OAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,4nBAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF","file":"input.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  function Input({ className, type, ...props }, ref) {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-slot=\"input\"\n        className={cn(\n          \"h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n          className\n        )}\n        {...props}\n      />\n    )\n  },\n)\n\nexport { Input }\n"]}

package/dist/components/ui/kbd.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * Kbd — display keyboard keys and shortcuts (shadcn/ui).
+ * @see https://ui.shadcn.com/docs/components/radix/kbd
+ *
+ * Variants:
+ *  - "tile" (default) — filled tile with border; use in tooltips, menus, docs,
+ *    or any surface where the Kbd sits on neutral background.
+ *  - "bare" — no background, no border; inherits `currentColor` at 70% opacity.
+ *    Use **inside buttons** (primary/secondary workflow actions) so the hint
+ *    does not look like a pasted-on patch against the button fill.
+ */
+declare function Kbd({ className, variant, "aria-hidden": ariaHidden, ...props }: React.ComponentProps<"kbd"> & {
+    variant?: "tile" | "bare";
+}): react_jsx_runtime.JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+export { Kbd, KbdGroup };

package/dist/components/ui/kbd.js

@@ -0,0 +1,45 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Kbd({
+  className,
+  variant = "tile",
+  "aria-hidden": ariaHidden,
+  ...props
+}) {
+  const hidden = ariaHidden ?? (variant === "bare" ? true : void 0);
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      "data-slot": "kbd",
+      "data-variant": variant,
+      "aria-hidden": hidden,
+      className: cn(
+        "pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 px-1 font-sans text-xs font-medium",
+        variant === "tile" && "bg-muted text-muted-foreground rounded-sm border",
+        variant === "bare" && "text-current/70 px-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function KbdGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "kbd-group",
+      className: cn("inline-flex items-center gap-1", className),
+      ...props
+    }
+  );
+}
+
+export { Kbd, KbdGroup };
+//# sourceMappingURL=kbd.js.map
+//# sourceMappingURL=kbd.js.map

package/dist/components/ui/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/kbd.tsx"],"names":[],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACYA,SAAS,GAAA,CAAI;AAAA,EACX,SAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,aAAA,EAAe,UAAA;AAAA,EACf,GAAG;AACL,CAAA,EAAgE;AAI9D,EAAA,MAAM,MAAA,GAAS,UAAA,KAAe,OAAA,KAAY,MAAA,GAAS,IAAA,GAAO,MAAA,CAAA;AAC1D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,KAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,aAAA,EAAa,MAAA;AAAA,MACb,SAAA,EAAW,EAAA;AAAA,QACT,8HAAA;AAAA,QACA,YAAY,MAAA,IACV,kDAAA;AAAA,QACF,YAAY,MAAA,IAAU,sBAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,QAAA,CAAS,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,gCAAA,EAAkC,SAAS,CAAA;AAAA,MACxD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"kbd.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\n/**\n * Kbd — display keyboard keys and shortcuts (shadcn/ui).\n * @see https://ui.shadcn.com/docs/components/radix/kbd\n *\n * Variants:\n *  - \"tile\" (default) — filled tile with border; use in tooltips, menus, docs,\n *    or any surface where the Kbd sits on neutral background.\n *  - \"bare\" — no background, no border; inherits `currentColor` at 70% opacity.\n *    Use **inside buttons** (primary/secondary workflow actions) so the hint\n *    does not look like a pasted-on patch against the button fill.\n */\nfunction Kbd({\n  className,\n  variant = \"tile\",\n  \"aria-hidden\": ariaHidden,\n  ...props\n}: React.ComponentProps<\"kbd\"> & { variant?: \"tile\" | \"bare\" }) {\n  // Bare variant lives inside buttons — the button already carries the\n  // accessible name, so the inline kbd is redundant noise for screen readers.\n  // Default to aria-hidden unless a consumer explicitly opts in.\n  const hidden = ariaHidden ?? (variant === \"bare\" ? true : undefined)\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      data-variant={variant}\n      aria-hidden={hidden}\n      className={cn(\n        \"pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 px-1 font-sans text-xs font-medium\",\n        variant === \"tile\" &&\n          \"bg-muted text-muted-foreground rounded-sm border\",\n        variant === \"bare\" && \"text-current/70 px-0\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n"]}

package/dist/components/ui/key-metrics-context.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface KeyMetricsContextValue {
+    /** Click handler for the default "Ask Leo about these metrics" CTA. */
+    defaultInsightAction?: () => void;
+    /** Inline kbd chord (or any node) rendered next to the action label inside the tooltip. */
+    shortcutHint?: React.ReactNode;
+    /** Label + aria-label for the default insight action button. Defaults to "Ask Leo". */
+    defaultActionLabel?: string;
+}
+/** Read the active `KeyMetricsProvider` value. Returns an empty object if no provider is mounted. */
+declare function useKeyMetricsContext(): KeyMetricsContextValue;
+declare function KeyMetricsProvider({ value, children, }: {
+    value: KeyMetricsContextValue;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { type KeyMetricsContextValue, KeyMetricsProvider, useKeyMetricsContext };

package/dist/components/ui/key-metrics-context.js

@@ -0,0 +1,26 @@
+"use client";
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var KeyMetricsContext = React.createContext({});
+function useKeyMetricsContext() {
+  return React.useContext(KeyMetricsContext);
+}
+function KeyMetricsProvider({
+  value,
+  children
+}) {
+  const memo = React.useMemo(
+    () => ({
+      defaultInsightAction: value.defaultInsightAction,
+      shortcutHint: value.shortcutHint,
+      defaultActionLabel: value.defaultActionLabel
+    }),
+    [value.defaultInsightAction, value.shortcutHint, value.defaultActionLabel]
+  );
+  return /* @__PURE__ */ jsx(KeyMetricsContext.Provider, { value: memo, children });
+}
+
+export { KeyMetricsProvider, useKeyMetricsContext };
+//# sourceMappingURL=key-metrics-context.js.map
+//# sourceMappingURL=key-metrics-context.js.map

package/dist/components/ui/key-metrics-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/key-metrics-context.tsx"],"names":[],"mappings":";;;AA+CA,IAAM,iBAAA,GAA0B,KAAA,CAAA,aAAA,CAAsC,EAAE,CAAA;AAGjE,SAAS,oBAAA,GAA+C;AAC7D,EAAA,OAAa,iBAAW,iBAAiB,CAAA;AAC3C;AAEO,SAAS,kBAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA;AACF,CAAA,EAGG;AAID,EAAA,MAAM,IAAA,GAAa,KAAA,CAAA,OAAA;AAAA,IACjB,OAAO;AAAA,MACL,sBAAsB,KAAA,CAAM,oBAAA;AAAA,MAC5B,cAAc,KAAA,CAAM,YAAA;AAAA,MACpB,oBAAoB,KAAA,CAAM;AAAA,KAC5B,CAAA;AAAA,IACA,CAAC,KAAA,CAAM,oBAAA,EAAsB,KAAA,CAAM,YAAA,EAAc,MAAM,kBAAkB;AAAA,GAC3E;AACA,EAAA,2BACG,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,KAAA,EAAO,MAChC,QAAA,EACH,CAAA;AAEJ","file":"key-metrics-context.js","sourcesContent":["\"use client\"\n\n/**\n * KeyMetricsProvider — host-app injection point for the design-system\n * `KeyMetrics` component.\n *\n * `KeyMetrics` itself ships as a pure primitive: it knows how to render\n * a KPI strip, an insight rail, and a default insight CTA, but it does\n * NOT know anything about the host app's AI assistant, command palette,\n * or keyboard-shortcut registry.\n *\n * Consumers (e.g. `apps/web`) mount a `KeyMetricsProvider` near the root\n * of the app and supply two optional injection points:\n *\n *  - `defaultInsightAction` — fired when the user clicks the default\n *    \"Ask Leo about these metrics\" button in the card-variant header,\n *    and the default insight CTA when an individual `MetricInsight` did\n *    not supply its own `onAction`. When omitted, the default button is\n *    hidden entirely so the primitive stays useful in apps without an\n *    AI assistant.\n *\n *  - `shortcutHint` — inline React node rendered inside the tooltip\n *    alongside the action label (typically a keyboard chord such as\n *    `<Kbd>⌘⌥K</Kbd>`). When omitted, the tooltip simply shows the\n *    label.\n *\n *  - `defaultActionLabel` — visible label + accessible name for the\n *    default action button. Defaults to \"Ask Leo\" so the existing\n *    Exxat-DS layout reads identically without any consumer changes.\n *\n * This is the SAME injection shape used by Adobe Spectrum\n * (`Provider`-based service injection) and Material UI (`Theme`\n * context). It lets the design-system package ship product patterns\n * without taking on a hard dependency on the host app's AI surface.\n */\n\nimport * as React from \"react\"\n\nexport interface KeyMetricsContextValue {\n  /** Click handler for the default \"Ask Leo about these metrics\" CTA. */\n  defaultInsightAction?: () => void\n  /** Inline kbd chord (or any node) rendered next to the action label inside the tooltip. */\n  shortcutHint?: React.ReactNode\n  /** Label + aria-label for the default insight action button. Defaults to \"Ask Leo\". */\n  defaultActionLabel?: string\n}\n\nconst KeyMetricsContext = React.createContext<KeyMetricsContextValue>({})\n\n/** Read the active `KeyMetricsProvider` value. Returns an empty object if no provider is mounted. */\nexport function useKeyMetricsContext(): KeyMetricsContextValue {\n  return React.useContext(KeyMetricsContext)\n}\n\nexport function KeyMetricsProvider({\n  value,\n  children,\n}: {\n  value: KeyMetricsContextValue\n  children: React.ReactNode\n}) {\n  // Memoize the wrapper so consumers passing fresh object identities\n  // (common in client components) do not invalidate every descendant\n  // that reads the context.\n  const memo = React.useMemo<KeyMetricsContextValue>(\n    () => ({\n      defaultInsightAction: value.defaultInsightAction,\n      shortcutHint: value.shortcutHint,\n      defaultActionLabel: value.defaultActionLabel,\n    }),\n    [value.defaultInsightAction, value.shortcutHint, value.defaultActionLabel],\n  )\n  return (\n    <KeyMetricsContext.Provider value={memo}>\n      {children}\n    </KeyMetricsContext.Provider>\n  )\n}\n"]}