@psnext/design-system 1.0.0 → 1.2.0

package/dist/primitives/Input/index.cjs

@@ -0,0 +1,39 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/Input/Input.tsx
+const inputVariants = (0, require("class-variance-authority").cva)(require_cn.cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"), {
+	variants: {
+		size: {
+			xs: "h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs",
+			sm: "h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs",
+			default: "h-9 px-3 py-1 text-base md:text-sm file:h-7 file:text-sm",
+			lg: "h-10 px-4 py-2 text-base file:h-8 file:text-sm"
+		},
+		shape: {
+			default: "rounded-md",
+			round: "rounded-full"
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		shape: "default"
+	}
+});
+/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */
+function Input({ className, type, size, shape, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		type,
+		"data-slot": "input",
+		className: require_cn.cn(inputVariants({
+			size,
+			shape
+		}), className),
+		...props
+	});
+}
+//#endregion
+exports.Input = Input;
+exports.inputVariants = inputVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/Input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst inputVariants = cva(\n  cn(\n    \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  ),\n  {\n    variants: {\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs\",\n        sm: \"h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-1 text-base md:text-sm file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2 text-base file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (rounded-md) and Round (pill).\n      shape: {\n        default: \"rounded-md\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (rounded-md) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;AAKA,MAAM,iBAAA,qCAAA,EAAA,KACJA,WAAAA,GACE,0XACA,iFACA,wGACF,GACA;CACE,UAAU;EAER,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAWA,WAAAA,GAAG,cAAc;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACvD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Input/index.d.cts

@@ -0,0 +1,2 @@
+import { n as inputVariants, t as Input } from "../../index32.cjs";
+export { Input, inputVariants };

package/dist/primitives/Input/index.d.ts

@@ -0,0 +1,2 @@
+import { n as inputVariants, t as Input } from "../../index32.js";
+export { Input, inputVariants };

package/dist/primitives/Input/index.js

@@ -0,0 +1,38 @@
+import { t as cn } from "../../cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/primitives/Input/Input.tsx
+const inputVariants = cva(cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"), {
+	variants: {
+		size: {
+			xs: "h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs",
+			sm: "h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs",
+			default: "h-9 px-3 py-1 text-base md:text-sm file:h-7 file:text-sm",
+			lg: "h-10 px-4 py-2 text-base file:h-8 file:text-sm"
+		},
+		shape: {
+			default: "rounded-md",
+			round: "rounded-full"
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		shape: "default"
+	}
+});
+/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */
+function Input({ className, type, size, shape, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: cn(inputVariants({
+			size,
+			shape
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Input, inputVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst inputVariants = cva(\n  cn(\n    \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-input-background flex w-full min-w-0 border transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  ),\n  {\n    variants: {\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-2 py-0.5 text-xs file:h-5 file:text-xs\",\n        sm: \"h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-1 text-base md:text-sm file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2 text-base file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (rounded-md) and Round (pill).\n      shape: {\n        default: \"rounded-md\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (rounded-md) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;AAKA,MAAM,gBAAgB,IACpB,GACE,0XACA,iFACA,wGACF,GACA;CACE,UAAU;EAER,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GAAG,cAAc;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACvD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/InputGroup/index.cjs

@@ -0,0 +1,91 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+const require_primitives_Button_index = require("../Button/index.cjs");
+const require_primitives_Input_index = require("../Input/index.cjs");
+const require_primitives_Textarea_index = require("../Textarea/index.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+//#region src/primitives/InputGroup/InputGroup.tsx
+/** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: require_cn.cn("group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] 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-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className),
+		...props
+	});
+}
+const inputGroupAddonVariants = (0, class_variance_authority.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 pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+		"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+		"block-start": "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+		"block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+/** A leading/trailing or stacked slot for icons, text, or buttons; clicking it focuses the group's input. */
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: require_cn.cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+}
+const inputGroupButtonVariants = (0, class_variance_authority.cva)("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+/** A compact Button sized to sit inside an addon without overflowing the group's height. */
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Button_index.Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: require_cn.cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+}
+/** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_cn.cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+/** The Input control for the group: borderless and transparent so the group container provides the chrome. */
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Input_index.Input, {
+		"data-slot": "input-group-control",
+		className: require_cn.cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+/** The Textarea control for the group: borderless, transparent, and non-resizing so the group provides the chrome. */
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Textarea_index.Textarea, {
+		"data-slot": "input-group-control",
+		className: require_cn.cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+//#endregion
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupButton = InputGroupButton;
+exports.InputGroupInput = InputGroupInput;
+exports.InputGroupText = InputGroupText;
+exports.InputGroupTextarea = InputGroupTextarea;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/InputGroup/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","Button","Input","Textarea"],"sources":["../../../src/primitives/InputGroup/InputGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Input } from \"@/primitives/Input\";\nimport { Textarea } from \"@/primitives/Textarea\";\nimport { cn } from \"@/utils\";\n\n/** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */\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 w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n\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\": \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\": \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\n/** A leading/trailing or stacked slot for icons, text, or buttons; clicking it focuses the group's input. */\nfunction InputGroupAddon({\n  className,\n  /** Where the addon sits relative to the control: inline (left/right) or block (top/bottom). */\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(\"flex items-center gap-2 text-sm shadow-none\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n      \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] 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/** A compact Button sized to sit inside an addon without overflowing the group's height. */\nfunction InputGroupButton({\n  className,\n  /** The button's HTML type; defaults to `\"button\"` so it does not submit forms. */\n  type = \"button\",\n  /** Visual style forwarded to the underlying Button; defaults to `\"ghost\"`. */\n  variant = \"ghost\",\n  /** Compact sizing tuned for the group: text (`xs`/`sm`) or square icon (`icon-xs`/`icon-sm`). */\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\n/** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */\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\n/** The Input control for the group: borderless and transparent so the group container provides the chrome. */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof 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 focus-visible:ring-0 dark:bg-transparent\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Textarea control for the group: borderless, transparent, and non-resizing so the group provides the chrome. */\nfunction InputGroupTextarea({ className, ...props }: 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-3 shadow-none focus-visible:ring-0 dark: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"],"mappings":";;;;;;;;;AAWA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAWA,WAAAA,GACT,4JACA,sCAGA,mDACA,iDACA,kIACA,4HAGA,mMAGA,kLAEA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAAA,GAAA,yBAAA,KACJ,2PACA;CACE,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;;AAGA,SAAS,gBAAgB,EACvB,WAEA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAWA,WAAAA,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,MAAM;GACd,IAAK,EAAE,OAAuB,QAAQ,QAAQ,GAC5C;GAEF,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EAC/D;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAAA,GAAA,yBAAA,KAA+B,+CAA+C;CAClF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAGD,SAAS,iBAAiB,EACxB,WAEA,OAAO,UAEP,UAAU,SAEV,OAAO,MACP,GAAG,SAE4C;CAC/C,OACE,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAWD,WAAAA,GAAG,yBAAyB,EAAE,KAAK,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,WAAWA,WAAAA,GACT,0HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA6C;CACpF,OACE,iBAAA,GAAA,kBAAA,KAACE,+BAAAA,OAAD;EACE,aAAU;EACV,WAAWF,WAAAA,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAA2C;CACrF,OACE,iBAAA,GAAA,kBAAA,KAACG,kCAAAA,UAAD;EACE,aAAU;EACV,WAAWH,WAAAA,GACT,qHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/InputGroup/index.d.cts

@@ -0,0 +1,2 @@
+import { a as InputGroupText, i as InputGroupInput, n as InputGroupAddon, o as InputGroupTextarea, r as InputGroupButton, t as InputGroup } from "../../index33.cjs";
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/primitives/InputGroup/index.d.ts

@@ -0,0 +1,2 @@
+import { a as InputGroupText, i as InputGroupInput, n as InputGroupAddon, o as InputGroupTextarea, r as InputGroupButton, t as InputGroup } from "../../index33.js";
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/primitives/InputGroup/index.js

@@ -0,0 +1,85 @@
+import { t as cn } from "../../cn.js";
+import { Button } from "../Button/index.js";
+import { Input } from "../Input/index.js";
+import { Textarea } from "../Textarea/index.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/primitives/InputGroup/InputGroup.tsx
+/** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] 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-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className),
+		...props
+	});
+}
+const 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 pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+		"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+		"block-start": "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+		"block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+/** A leading/trailing or stacked slot for icons, text, or buttons; clicking it focuses the group's input. */
+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
+	});
+}
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+/** A compact Button sized to sit inside an addon without overflowing the group's height. */
+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
+	});
+}
+/** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */
+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
+	});
+}
+/** The Input control for the group: borderless and transparent so the group container provides the chrome. */
+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 focus-visible:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+/** The Textarea control for the group: borderless, transparent, and non-resizing so the group provides the chrome. */
+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-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/InputGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InputGroup/InputGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Input } from \"@/primitives/Input\";\nimport { Textarea } from \"@/primitives/Textarea\";\nimport { cn } from \"@/utils\";\n\n/** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */\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 w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n\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\": \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\": \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\n/** A leading/trailing or stacked slot for icons, text, or buttons; clicking it focuses the group's input. */\nfunction InputGroupAddon({\n  className,\n  /** Where the addon sits relative to the control: inline (left/right) or block (top/bottom). */\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(\"flex items-center gap-2 text-sm shadow-none\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n      \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] 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/** A compact Button sized to sit inside an addon without overflowing the group's height. */\nfunction InputGroupButton({\n  className,\n  /** The button's HTML type; defaults to `\"button\"` so it does not submit forms. */\n  type = \"button\",\n  /** Visual style forwarded to the underlying Button; defaults to `\"ghost\"`. */\n  variant = \"ghost\",\n  /** Compact sizing tuned for the group: text (`xs`/`sm`) or square icon (`icon-xs`/`icon-sm`). */\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\n/** Muted inline text for prefixes, suffixes, or counts placed inside an addon (e.g. `$`, `USD`, `12 results`). */\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\n/** The Input control for the group: borderless and transparent so the group container provides the chrome. */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof 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 focus-visible:ring-0 dark:bg-transparent\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The Textarea control for the group: borderless, transparent, and non-resizing so the group provides the chrome. */\nfunction InputGroupTextarea({ className, ...props }: 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-3 shadow-none focus-visible:ring-0 dark: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"],"mappings":";;;;;;;;AAWA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,4JACA,sCAGA,mDACA,iDACA,kIACA,4HAGA,mMAGA,kLAEA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,0BAA0B,IAC9B,2PACA;CACE,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;;AAGA,SAAS,gBAAgB,EACvB,WAEA,QAAQ,gBACR,GAAG,SAC0E;CAC7E,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,UAAU,MAAM;GACd,IAAK,EAAE,OAAuB,QAAQ,QAAQ,GAC5C;GAEF,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;EAC/D;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,2BAA2B,IAAI,+CAA+C;CAClF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAGD,SAAS,iBAAiB,EACxB,WAEA,OAAO,UAEP,UAAU,SAEV,OAAO,MACP,GAAG,SAE4C;CAC/C,OACE,oBAAC,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAW,GAAG,yBAAyB,EAAE,KAAK,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAuC;CAC7E,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA6C;CACpF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAA2C;CACrF,OACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,qHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/InputOtp/index.cjs

@@ -0,0 +1,80 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk.cjs");
+const require_cn = require("../../cn.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let lucide_react = require("lucide-react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let input_otp = require("input-otp");
+//#region src/primitives/InputOtp/InputOtp.tsx
+const InputOTPSettingsContext = react.createContext({ size: "default" });
+const inputOTPSlotSizes = {
+	xs: "size-6 text-xs",
+	sm: "size-8 text-sm",
+	default: "size-9 text-sm",
+	lg: "size-10 text-base"
+};
+/** One-time-passcode field: a row of single-character slots backed by a hidden input. */
+function InputOTP({ className, containerClassName, size = "default", placeholder, ...props }) {
+	const settings = react.useMemo(() => ({
+		size,
+		placeholder
+	}), [size, placeholder]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputOTPSettingsContext.Provider, {
+		value: settings,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(input_otp.OTPInput, {
+			"data-slot": "input-otp",
+			containerClassName: require_cn.cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
+			className: require_cn.cn("disabled:cursor-not-allowed", className),
+			...props
+		})
+	});
+}
+/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */
+function InputOTPGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "input-otp-group",
+		className: require_cn.cn("flex items-center gap-1", className),
+		...props
+	});
+}
+/** A single character cell rendering its char, active ring, fake caret, and placeholder. */
+function InputOTPSlot({ index, className, ...props }) {
+	const inputOTPContext = react.useContext(input_otp.OTPInputContext);
+	const { size, placeholder } = react.useContext(InputOTPSettingsContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+	const isEmpty = char == null || char === "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": isActive,
+		className: require_cn.cn("data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]", inputOTPSlotSizes[size], className),
+		...props,
+		children: [
+			char,
+			isEmpty && placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-muted-foreground pointer-events-none",
+				children: placeholder
+			}),
+			hasFakeCaret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" })
+			})
+		]
+	});
+}
+/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */
+function InputOTPSeparator({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "input-otp-separator",
+		role: "separator",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MinusIcon, {})
+	});
+}
+//#endregion
+exports.InputOTP = InputOTP;
+exports.InputOTPGroup = InputOTPGroup;
+exports.InputOTPSeparator = InputOTPSeparator;
+exports.InputOTPSlot = InputOTPSlot;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/InputOtp/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["React","OTPInput","cn","OTPInputContext","MinusIcon"],"sources":["../../../src/primitives/InputOtp/InputOtp.tsx"],"sourcesContent":["\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\ntype InputOTPSize = \"default\" | \"lg\" | \"sm\" | \"xs\";\n\ntype InputOTPContextValue = {\n  size: InputOTPSize;\n  placeholder?: string;\n};\n\nconst InputOTPSettingsContext = React.createContext<InputOTPContextValue>({\n  size: \"default\",\n});\n\n// Sizes mirror the Figma \"Input\" spec: Mini 24px / Small 32px / Default 36px / Large 40px.\nconst inputOTPSlotSizes: Record<InputOTPSize, string> = {\n  xs: \"size-6 text-xs\",\n  sm: \"size-8 text-sm\",\n  default: \"size-9 text-sm\",\n  lg: \"size-10 text-base\",\n};\n\n/** One-time-passcode field: a row of single-character slots backed by a hidden input. */\nfunction InputOTP({\n  className,\n  containerClassName,\n  size = \"default\",\n  placeholder,\n  ...props\n}: DistributiveOmit<React.ComponentProps<typeof OTPInput>, \"size\" | \"placeholder\"> & {\n  /** Class applied to the outer flex container that wraps the slot groups. */\n  containerClassName?: string;\n  /** Slot dimensions and type scale: Mini 24px / Small 32px / Default 36px / Large 40px. */\n  size?: InputOTPSize;\n  /** Single character shown in empty slots as a hint until the user types. */\n  placeholder?: string;\n}) {\n  const settings = React.useMemo<InputOTPContextValue>(\n    () => ({ size, placeholder }),\n    [size, placeholder],\n  );\n\n  return (\n    <InputOTPSettingsContext.Provider value={settings}>\n      <OTPInput\n        data-slot=\"input-otp\"\n        containerClassName={cn(\n          \"flex items-center gap-2 has-disabled:opacity-50\",\n          containerClassName,\n        )}\n        className={cn(\"disabled:cursor-not-allowed\", className)}\n        {...props}\n      />\n    </InputOTPSettingsContext.Provider>\n  );\n}\n\n/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single character cell rendering its char, active ring, fake caret, and placeholder. */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Zero-based position of this slot within the input's character buffer. */\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { size, placeholder } = React.useContext(InputOTPSettingsContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n  const isEmpty = char == null || char === \"\";\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        inputOTPSlotSizes[size],\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {isEmpty && placeholder && (\n        <span className=\"text-muted-foreground pointer-events-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;;;;AAiBA,MAAM,0BAA0BA,MAAM,cAAoC,EACxE,MAAM,UACR,CAAC;AAGD,MAAM,oBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,IAAI;AACN;;AAGA,SAAS,SAAS,EAChB,WACA,oBACA,OAAO,WACP,aACA,GAAG,SAQF;CACD,MAAM,WAAWA,MAAM,eACd;EAAE;EAAM;CAAY,IAC3B,CAAC,MAAM,WAAW,CACpB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,iBAAA,GAAA,kBAAA,KAACC,UAAAA,UAAD;GACE,aAAU;GACV,oBAAoBC,WAAAA,GAClB,mDACA,kBACF;GACA,WAAWA,WAAAA,GAAG,+BAA+B,SAAS;GACtD,GAAI;EACL,CAAA;CAC+B,CAAA;AAEtC;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,OACA,WACA,GAAG,SAIF;CACD,MAAM,kBAAkBF,MAAM,WAAWG,UAAAA,eAAe;CACxD,MAAM,EAAE,MAAM,gBAAgBH,MAAM,WAAW,uBAAuB;CACtE,MAAM,EAAE,MAAM,cAAc,aAAa,iBAAiB,MAAM,UAAU,CAAC;CAC3E,MAAM,UAAU,QAAQ,QAAQ,SAAS;CAEzC,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAWE,WAAAA,GACT,sfACA,kBAAkB,OAClB,SACF;EACA,GAAI;YARN;GAUG;GACA,WAAW,eACV,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAA6C;GAAkB,CAAA;GAEhF,gBACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2DAA4D,CAAA;GACxE,CAAA;EAEJ;;AAET;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAsC;CACpE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAsB,MAAK;EAAY,GAAI;YACxD,iBAAA,GAAA,kBAAA,KAACE,aAAAA,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}

package/dist/primitives/InputOtp/index.d.cts

@@ -0,0 +1,2 @@
+import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../../index34.cjs";
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/primitives/InputOtp/index.d.ts

@@ -0,0 +1,2 @@
+import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../../index34.js";
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/primitives/InputOtp/index.js

@@ -0,0 +1,74 @@
+import { t as cn } from "../../cn.js";
+import * as React from "react";
+import { MinusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput, OTPInputContext } from "input-otp";
+//#region src/primitives/InputOtp/InputOtp.tsx
+const InputOTPSettingsContext = React.createContext({ size: "default" });
+const inputOTPSlotSizes = {
+	xs: "size-6 text-xs",
+	sm: "size-8 text-sm",
+	default: "size-9 text-sm",
+	lg: "size-10 text-base"
+};
+/** One-time-passcode field: a row of single-character slots backed by a hidden input. */
+function InputOTP({ className, containerClassName, size = "default", placeholder, ...props }) {
+	const settings = React.useMemo(() => ({
+		size,
+		placeholder
+	}), [size, placeholder]);
+	return /* @__PURE__ */ jsx(InputOTPSettingsContext.Provider, {
+		value: settings,
+		children: /* @__PURE__ */ jsx(OTPInput, {
+			"data-slot": "input-otp",
+			containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
+			className: cn("disabled:cursor-not-allowed", className),
+			...props
+		})
+	});
+}
+/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */
+function InputOTPGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-group",
+		className: cn("flex items-center gap-1", className),
+		...props
+	});
+}
+/** A single character cell rendering its char, active ring, fake caret, and placeholder. */
+function InputOTPSlot({ index, className, ...props }) {
+	const inputOTPContext = React.useContext(OTPInputContext);
+	const { size, placeholder } = React.useContext(InputOTPSettingsContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+	const isEmpty = char == null || char === "";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": isActive,
+		className: cn("data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]", inputOTPSlotSizes[size], className),
+		...props,
+		children: [
+			char,
+			isEmpty && placeholder && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground pointer-events-none",
+				children: placeholder
+			}),
+			hasFakeCaret && /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" })
+			})
+		]
+	});
+}
+/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */
+function InputOTPSeparator({ ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-separator",
+		role: "separator",
+		...props,
+		children: /* @__PURE__ */ jsx(MinusIcon, {})
+	});
+}
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/InputOtp/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InputOtp/InputOtp.tsx"],"sourcesContent":["\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\ntype InputOTPSize = \"default\" | \"lg\" | \"sm\" | \"xs\";\n\ntype InputOTPContextValue = {\n  size: InputOTPSize;\n  placeholder?: string;\n};\n\nconst InputOTPSettingsContext = React.createContext<InputOTPContextValue>({\n  size: \"default\",\n});\n\n// Sizes mirror the Figma \"Input\" spec: Mini 24px / Small 32px / Default 36px / Large 40px.\nconst inputOTPSlotSizes: Record<InputOTPSize, string> = {\n  xs: \"size-6 text-xs\",\n  sm: \"size-8 text-sm\",\n  default: \"size-9 text-sm\",\n  lg: \"size-10 text-base\",\n};\n\n/** One-time-passcode field: a row of single-character slots backed by a hidden input. */\nfunction InputOTP({\n  className,\n  containerClassName,\n  size = \"default\",\n  placeholder,\n  ...props\n}: DistributiveOmit<React.ComponentProps<typeof OTPInput>, \"size\" | \"placeholder\"> & {\n  /** Class applied to the outer flex container that wraps the slot groups. */\n  containerClassName?: string;\n  /** Slot dimensions and type scale: Mini 24px / Small 32px / Default 36px / Large 40px. */\n  size?: InputOTPSize;\n  /** Single character shown in empty slots as a hint until the user types. */\n  placeholder?: string;\n}) {\n  const settings = React.useMemo<InputOTPContextValue>(\n    () => ({ size, placeholder }),\n    [size, placeholder],\n  );\n\n  return (\n    <InputOTPSettingsContext.Provider value={settings}>\n      <OTPInput\n        data-slot=\"input-otp\"\n        containerClassName={cn(\n          \"flex items-center gap-2 has-disabled:opacity-50\",\n          containerClassName,\n        )}\n        className={cn(\"disabled:cursor-not-allowed\", className)}\n        {...props}\n      />\n    </InputOTPSettingsContext.Provider>\n  );\n}\n\n/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single character cell rendering its char, active ring, fake caret, and placeholder. */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Zero-based position of this slot within the input's character buffer. */\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { size, placeholder } = React.useContext(InputOTPSettingsContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n  const isEmpty = char == null || char === \"\";\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex items-center justify-center border-y border-r bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        inputOTPSlotSizes[size],\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {isEmpty && placeholder && (\n        <span className=\"text-muted-foreground pointer-events-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;AAiBA,MAAM,0BAA0B,MAAM,cAAoC,EACxE,MAAM,UACR,CAAC;AAGD,MAAM,oBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,IAAI;AACN;;AAGA,SAAS,SAAS,EAChB,WACA,oBACA,OAAO,WACP,aACA,GAAG,SAQF;CACD,MAAM,WAAW,MAAM,eACd;EAAE;EAAM;CAAY,IAC3B,CAAC,MAAM,WAAW,CACpB;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,UAAD;GACE,aAAU;GACV,oBAAoB,GAClB,mDACA,kBACF;GACA,WAAW,GAAG,+BAA+B,SAAS;GACtD,GAAI;EACL,CAAA;CAC+B,CAAA;AAEtC;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,OACA,WACA,GAAG,SAIF;CACD,MAAM,kBAAkB,MAAM,WAAW,eAAe;CACxD,MAAM,EAAE,MAAM,gBAAgB,MAAM,WAAW,uBAAuB;CACtE,MAAM,EAAE,MAAM,cAAc,aAAa,iBAAiB,MAAM,UAAU,CAAC;CAC3E,MAAM,UAAU,QAAQ,QAAQ,SAAS;CAEzC,OACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,GACT,sfACA,kBAAkB,OAClB,SACF;EACA,GAAI;YARN;GAUG;GACA,WAAW,eACV,oBAAC,QAAD;IAAM,WAAU;cAA6C;GAAkB,CAAA;GAEhF,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD,EAAK,WAAU,2DAA4D,CAAA;GACxE,CAAA;EAEJ;;AAET;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAsC;CACpE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAsB,MAAK;EAAY,GAAI;YACxD,oBAAC,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}