@neynar/ui 0.4.0 → 1.0.0

package/dist/components/ui/input-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input-group.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAIhD,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEnD;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAY3D;AAED,QAAA,MAAM,uBAAuB;;8EAmB5B,CAAC;AAEF,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GACrD,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAE/C;;;GAGG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAgBtB;AAED,QAAA,MAAM,wBAAwB;;8EAgB7B,CAAC;AAEF,KAAK,qBAAqB,GAAG,IAAI,CAC/B,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EACnC,MAAM,GAAG,MAAM,CAChB,GACC,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC9C,qCAAqC;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,CAAC;AAEJ;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAUvB;AAED,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAExD;;;GAGG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAUnE;AAED,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAE1D;;;GAGG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAWrE;AAED,KAAK,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;AAEhE;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAW3E;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,EACxB,KAAK,eAAe,EACpB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,GAC7B,CAAC"}

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

@@ -0,0 +1,142 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        "inline-start": "pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first",
+        "inline-end": "pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last",
+        "block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+        "block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start"
+      }
+    },
+    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
+    }
+  );
+}
+const inputGroupButtonVariants = cva(
+  "gap-2 text-sm shadow-none flex items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "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"
+    }
+  }
+);
+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(
+        "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+  inputGroupAddonVariants,
+  inputGroupButtonVariants
+};
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\ntype InputGroupProps = React.ComponentProps<\"div\">;\n\n/**\n * Container for input with addons (icons, text, buttons) at start/end.\n * Manages focus ring, validation states, and addon alignment.\n */\nfunction InputGroup({ className, ...props }: InputGroupProps) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\ntype InputGroupAddonProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>;\n\n/**\n * Addon container for icons, text, or buttons at input start/end.\n * Clicking the addon focuses the input (unless clicking a button).\n */\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: InputGroupAddonProps) {\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  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"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\ntype InputGroupButtonProps = Omit<\n  React.ComponentProps<typeof Button>,\n  \"size\" | \"type\"\n> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    /** Button type. @default \"button\" */\n    type?: \"button\" | \"submit\" | \"reset\";\n  };\n\n/**\n * Button sized for use within InputGroupAddon.\n * Defaults to ghost variant and extra-small size.\n */\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: InputGroupButtonProps) {\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\ntype InputGroupTextProps = React.ComponentProps<\"span\">;\n\n/**\n * Text label/prefix/suffix for use within InputGroupAddon.\n * Commonly used for URL schemes (https://), units (USD, MB), or format indicators (@, /).\n */\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype InputGroupInputProps = React.ComponentProps<\"input\">;\n\n/**\n * Input styled for use within InputGroup.\n * Removes border/shadow/ring to integrate with group container styling.\n */\nfunction InputGroupInput({ className, ...props }: InputGroupInputProps) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype InputGroupTextareaProps = React.ComponentProps<\"textarea\">;\n\n/**\n * Textarea styled for use within InputGroup.\n * Removes border/shadow/ring to integrate with group container styling.\n */\nfunction InputGroupTextarea({ className, ...props }: InputGroupTextareaProps) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n  inputGroupAddonVariants,\n  inputGroupButtonVariants,\n  type InputGroupProps,\n  type InputGroupAddonProps,\n  type InputGroupButtonProps,\n  type InputGroupTextProps,\n  type InputGroupInputProps,\n  type InputGroupTextareaProps,\n};\n"],"names":[],"mappings":";;;;;;;AAcA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAM,0BAA0B;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,gBACE;AAAA,QACF,cACE;AAAA,QACF,eACE;AAAA,QACF,aACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AASA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW,GAAG,wBAAwB,EAAE,MAAA,CAAO,GAAG,SAAS;AAAA,MAC3D,SAAS,CAAC,MAAM;AACd,YAAK,EAAE,OAAuB,QAAQ,QAAQ,GAAG;AAC/C;AAAA,QACF;AACA,UAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAA;AAAA,MACzD;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAM,2BAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,WACE;AAAA,QACF,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAeA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MACA,WAAW,GAAG,yBAAyB,EAAE,KAAA,CAAM,GAAG,SAAS;AAAA,MAC1D,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AACpE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -0,0 +1,34 @@
+import { OTPInput } from 'input-otp';
+import * as React from "react";
+type InputOTPProps = React.ComponentProps<typeof OTPInput> & {
+    /** Additional class names for the container element. */
+    containerClassName?: string;
+};
+/**
+ * One-time password input with individual character slots.
+ * Built on input-otp library with styled slots and separators.
+ */
+declare function InputOTP({ className, containerClassName, ...props }: InputOTPProps): import("react/jsx-runtime").JSX.Element;
+type InputOTPGroupProps = React.ComponentProps<"div">;
+/**
+ * Groups multiple InputOTPSlot components together.
+ * Supports error state via aria-invalid.
+ */
+declare function InputOTPGroup({ className, ...props }: InputOTPGroupProps): import("react/jsx-runtime").JSX.Element;
+type InputOTPSlotProps = React.ComponentProps<"div"> & {
+    /** Zero-based index of this slot in the OTP sequence. */
+    index: number;
+};
+/**
+ * Individual character slot for OTP input.
+ * Displays current character, active state, and animated caret.
+ */
+declare function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps): import("react/jsx-runtime").JSX.Element;
+type InputOTPSeparatorProps = React.ComponentProps<"div">;
+/**
+ * Visual separator between InputOTPGroup components.
+ * Renders a minus icon by default.
+ */
+declare function InputOTPSeparator({ ...props }: InputOTPSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, type InputOTPProps, type InputOTPGroupProps, type InputOTPSlotProps, type InputOTPSeparatorProps, };
+//# sourceMappingURL=input-otp.d.ts.map

package/dist/components/ui/input-otp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input-otp.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAC;AAKtD,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC3D,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;GAGG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAa3E;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEtD;;;GAGG;AACH,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAWjE;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACrD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAsBtE;AAED,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1D;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAW9D;AAED,OAAO,EACL,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,GAC5B,CAAC"}

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

@@ -0,0 +1,73 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { cn } from "../../lib/utils.js";
+import Minus from "../../node_modules/lucide-react/dist/esm/icons/minus.js";
+function InputOTP({ className, containerClassName, ...props }) {
+  return /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      "data-slot": "input-otp",
+      containerClassName: cn(
+        "cn-input-otp flex items-center has-disabled:opacity-50",
+        containerClassName
+      ),
+      spellCheck: false,
+      className: cn("disabled:cursor-not-allowed", className),
+      ...props
+    }
+  );
+}
+function InputOTPGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-otp-group",
+      className: cn(
+        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputOTPSlot({ index, className, ...props }) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "input-otp-slot",
+      "data-active": isActive,
+      className: cn(
+        "dark:bg-input/30 border-input 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 size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        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 bg-foreground h-4 w-px" }) })
+      ]
+    }
+  );
+}
+function InputOTPSeparator({ ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-otp-separator",
+      className: "[&_svg:not([class*='size-'])]:size-4 flex items-center",
+      role: "separator",
+      ...props,
+      children: /* @__PURE__ */ jsx(Minus, {})
+    }
+  );
+}
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot
+};
+//# sourceMappingURL=input-otp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.js","sources":["../../../src/components/ui/input-otp.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\n\nimport { cn } from \"@/lib/utils\";\nimport { MinusIcon } from \"lucide-react\";\n\ntype InputOTPProps = React.ComponentProps<typeof OTPInput> & {\n  /** Additional class names for the container element. */\n  containerClassName?: string;\n};\n\n/**\n * One-time password input with individual character slots.\n * Built on input-otp library with styled slots and separators.\n */\nfunction InputOTP({ className, containerClassName, ...props }: InputOTPProps) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName,\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  );\n}\n\ntype InputOTPGroupProps = React.ComponentProps<\"div\">;\n\n/**\n * Groups multiple InputOTPSlot components together.\n * Supports error state via aria-invalid.\n */\nfunction InputOTPGroup({ className, ...props }: InputOTPGroupProps) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype InputOTPSlotProps = React.ComponentProps<\"div\"> & {\n  /** Zero-based index of this slot in the OTP sequence. */\n  index: number;\n};\n\n/**\n * Individual character slot for OTP input.\n * Displays current character, active state, and animated caret.\n */\nfunction InputOTPSlot({ index, className, ...props }: InputOTPSlotProps) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input 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 size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className,\n      )}\n      {...props}\n    >\n      {char}\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 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\ntype InputOTPSeparatorProps = React.ComponentProps<\"div\">;\n\n/**\n * Visual separator between InputOTPGroup components.\n * Renders a minus icon by default.\n */\nfunction InputOTPSeparator({ ...props }: InputOTPSeparatorProps) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n  InputOTPSeparator,\n  type InputOTPProps,\n  type InputOTPGroupProps,\n  type InputOTPSlotProps,\n  type InputOTPSeparatorProps,\n};\n"],"names":[],"mappings":";;;;;;AAiBA;AACE;AACE;AAAC;AAAA;AACW;AACU;AAClB;AACA;AAAA;AAEU;AAC0C;AAClD;AAAA;AAGV;AAQA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAWA;AACE;AACA;AAEA;AACE;AAAC;AAAA;AACW;AACG;AACF;AACT;AACA;AAAA;AAEE;AAEH;AAAA;AAIC;AAAA;AAAA;AAIR;AAQA;AACE;AACE;AAAC;AAAA;AACW;AACA;AACL;AACD;AAEO;AAAA;AAGjB;;;;;;;"}

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

@@ -1,188 +1,11 @@
 import * as React from "react";
+type InputProps = React.ComponentProps<"input">;
 /**
- * Input - Versatile form input component for text, email, password, and other input types
+ * Text input field with support for all HTML input types.
  *
- * A flexible and accessible input component built on native HTML input elements with enhanced
- * styling and form integration capabilities. Supports all HTML input types including text, email,
- * password, number, file, date, and more. Features consistent design tokens, error states, focus
- * management, and seamless integration with form libraries like React Hook Form.
- *
- * @example
- * ```tsx
- * // Basic text input
- * <Input type="text" placeholder="Enter your name" />
- * ```
- *
- * @example
- * ```tsx
- * // Email input with validation
- * <Input
- *   type="email"
- *   placeholder="your@email.com"
- *   required
- *   aria-describedby="email-error"
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Password input with toggle visibility
- * <div className="relative">
- *   <Input
- *     type="password"
- *     placeholder="Enter password"
- *     autoComplete="current-password"
- *   />
- *   <Button
- *     type="button"
- *     variant="ghost"
- *     size="sm"
- *     className="absolute right-0 top-0 h-full px-3"
- *   >
- *     <Eye className="h-4 w-4" />
- *   </Button>
- * </div>
- * ```
- *
- * @example
- * ```tsx
- * // Number input with min/max constraints
- * <Input
- *   type="number"
- *   placeholder="Age"
- *   min={0}
- *   max={120}
- *   step={1}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // File input with proper labeling
- * <div className="grid w-full max-w-sm items-center gap-1.5">
- *   <Label htmlFor="picture">Profile Picture</Label>
- *   <Input
- *     id="picture"
- *     type="file"
- *     accept="image/*"
- *     aria-describedby="file-help"
- *   />
- *   <p id="file-help" className="text-sm text-muted-foreground">
- *     Upload a PNG, JPG or GIF (max 5MB)
- *   </p>
- * </div>
- * ```
- *
- * @example
- * ```tsx
- * // Search input with icon
- * <div className="relative">
- *   <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground" />
- *   <Input
- *     type="search"
- *     placeholder="Search..."
- *     className="pl-8"
- *   />
- * </div>
- * ```
- *
- * @example
- * ```tsx
- * // Input with error state
- * <div className="space-y-2">
- *   <Label htmlFor="email">Email</Label>
- *   <Input
- *     id="email"
- *     type="email"
- *     aria-invalid={true}
- *     aria-describedby="email-error"
- *   />
- *   <p id="email-error" className="text-sm text-destructive">
- *     Please enter a valid email address
- *   </p>
- * </div>
- * ```
- *
- * @example
- * ```tsx
- * // Form integration with React Hook Form
- * const { register, formState: { errors } } = useForm();
- *
- * <div className="space-y-2">
- *   <Label htmlFor="username">Username</Label>
- *   <Input
- *     id="username"
- *     {...register("username", { required: "Username is required" })}
- *     aria-invalid={!!errors.username}
- *     aria-describedby={errors.username ? "username-error" : undefined}
- *   />
- *   {errors.username && (
- *     <p id="username-error" className="text-sm text-destructive">
- *       {errors.username.message}
- *     </p>
- *   )}
- * </div>
- * ```
- *
- * @example
- * ```tsx
- * // Input with button (subscription form)
- * <div className="flex w-full max-w-sm items-center space-x-2">
- *   <Input
- *     type="email"
- *     placeholder="Enter your email"
- *     aria-label="Email for newsletter"
- *   />
- *   <Button type="submit">Subscribe</Button>
- * </div>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled input with explanation
- * <div className="space-y-2">
- *   <Label htmlFor="readonly-field">System Generated ID</Label>
- *   <Input
- *     id="readonly-field"
- *     value="SYS-12345"
- *     disabled
- *     aria-describedby="readonly-help"
- *   />
- *   <p id="readonly-help" className="text-sm text-muted-foreground">
- *     This value is automatically generated and cannot be edited
- *   </p>
- * </div>
- * ```
- *
- * @accessibility
- * - Provides proper focus management with visible focus ring (focus-visible:ring-ring/50)
- * - Supports all ARIA attributes including aria-invalid for error state indication
- * - Compatible with screen readers and assistive technologies
- * - Maintains proper tab order and keyboard navigation patterns
- * - Disabled state prevents interaction and is announced to screen readers
- * - File inputs provide accessible file selection with proper labeling
- * - Error states are properly associated with inputs via aria-describedby
- * - Required fields can be marked with aria-required for screen reader users
- * - Placeholder text provides input guidance but doesn't replace proper labels
- * - Text selection has optimized contrast with custom selection colors
- *
- * @styling
- * - Uses consistent design tokens from the design system
- * - Adaptive height (h-9) with responsive text sizing (md:text-sm)
- * - Smooth transitions for focus states and interactions
- * - Custom file input styling that matches the design system
- * - Error state styling with destructive border and focus ring colors
- * - Dark mode support with semi-transparent background (dark:bg-input/30)
- * - Proper spacing and typography hierarchy for form layouts
- *
- * @see {@link https://ui.shadcn.com/docs/components/input} shadcn/ui Input documentation
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input} MDN Input element reference
- * @see {@link Label} For accessible input labels and proper association
- * @see {@link Button} Often used alongside inputs in forms and search interfaces
- * @see {@link Form} Complete form integration with validation and error handling
- * @see {@link Textarea} For multi-line text input needs
- * @since 1.0.0
+ * Supports text, email, password, number, tel, url, search, date, time, file, and other input types.
+ * Includes built-in validation styling via `aria-invalid` attribute.
  */
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
-export { Input };
+declare function Input({ className, type, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export { Input, type InputProps };
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuLG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAc1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAEhD;;;;;GAKG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAYvD;AAED,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAC"}

package/dist/components/ui/input.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../lib/utils.js";
+import { Input as Input$1 } from "../../node_modules/@base-ui/react/esm/input/Input.js";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Input
+};
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype InputProps = React.ComponentProps<\"input\">;\n\n/**\n * Text input field with support for all HTML input types.\n *\n * Supports text, email, password, number, tel, url, search, date, time, file, and other input types.\n * Includes built-in validation styling via `aria-invalid` attribute.\n */\nfunction Input({ className, type, ...props }: InputProps) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input, type InputProps };\n"],"names":["InputPrimitive"],"mappings":";;;;AAaA,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,SAAqB;AACxD,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}