acai-ui-library 0.1.11

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * InputGroup renders an input with leading/trailing addons sharing a single
+ * rounded border and a unified focus ring. Works with both native `<input>`
+ * elements and the library's `<Input>` — the group aggressively flattens
+ * nested wrappers, strips inner borders/rings/rounds, and owns all container
+ * styling itself.
+ */
+declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface InputAddonProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const InputAddon: React.ForwardRefExoticComponent<InputAddonProps & React.RefAttributes<HTMLDivElement>>;
+
+export { InputAddon, type InputAddonProps, InputGroup, type InputGroupProps };

package/dist/components/input-group.js

@@ -0,0 +1,71 @@
+// src/components/input-group.tsx
+import * as React from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/input-group.tsx
+import { jsx } from "react/jsx-runtime";
+var InputGroup = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "input-group",
+      className: cn(
+        // container — full height row, shared border + glow ring
+        "relative flex h-10 w-full items-stretch rounded-md border border-input bg-background text-sm transition-[color,border-color,box-shadow] duration-150 overflow-hidden",
+        "focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]",
+        // Flatten the lib Input's outer wrapper so horizontal flow works
+        "[&_[data-slot=input-root]]:h-full [&_[data-slot=input-root]]:flex-1 [&_[data-slot=input-root]]:flex-row [&_[data-slot=input-root]]:gap-0 [&_[data-slot=input-root]]:min-w-0",
+        // Hide any label/hint the user accidentally passed via the lib Input
+        "[&_[data-slot=input-root]>label]:hidden [&_[data-slot=input-root]>p]:hidden",
+        // Flatten the lib Input's inner wrapper (remove border, ring, round, padding, bg)
+        "[&_[data-slot=input-wrapper]]:h-full [&_[data-slot=input-wrapper]]:w-full [&_[data-slot=input-wrapper]]:flex-1 [&_[data-slot=input-wrapper]]:border-0 [&_[data-slot=input-wrapper]]:rounded-none [&_[data-slot=input-wrapper]]:bg-transparent [&_[data-slot=input-wrapper]]:shadow-none [&_[data-slot=input-wrapper]]:ring-0 [&_[data-slot=input-wrapper]]:px-0 [&_[data-slot=input-wrapper]]:py-0 [&_[data-slot=input-wrapper]]:focus-within:ring-0 [&_[data-slot=input-wrapper]]:focus-within:border-transparent",
+        // Native <input> styling inside the group
+        "[&_input]:h-full [&_input]:flex-1 [&_input]:min-w-0 [&_input]:bg-transparent [&_input]:px-3 [&_input]:text-sm [&_input]:outline-none [&_input]:placeholder:text-muted-foreground",
+        "[&_input]:border-0 [&_input]:rounded-none [&_input]:shadow-none [&_input]:ring-0",
+        "[&_input:focus]:ring-0 [&_input:focus-visible]:ring-0 [&_input:focus-within]:ring-0",
+        // Buttons inside the group fill height + shed own borders/rings
+        "[&>button]:h-full [&>button]:rounded-none [&>button]:border-0 [&>button]:shadow-none [&>button]:ring-0 [&>button:focus]:ring-0 [&>button:focus-visible]:ring-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+InputGroup.displayName = "InputGroup";
+var InputAddon = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const containsButton = React.Children.toArray(children).some(
+      (c) => React.isValidElement(c) && (c.type === "button" || typeof c.type !== "string" && c.type?.displayName?.includes?.("Button"))
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "input-addon",
+        className: cn(
+          "flex shrink-0 items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground select-none",
+          // plain-content addon: subtle muted fill with a divider that matches the container border
+          !containsButton && "bg-[var(--hc-grey-100)] px-3 border-e border-[var(--hc-color-border-subtle)] last:border-e-0 last:border-s",
+          // button addon: transparent slot, button fills the area and has proper padding
+          containsButton && "p-0 bg-transparent border-e border-[var(--hc-color-border-subtle)] last:border-e-0 last:border-s [&>button]:h-full [&>button]:px-3 [&>button]:gap-2 [&>button]:rounded-none",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+InputAddon.displayName = "InputAddon";
+export {
+  InputAddon,
+  InputGroup
+};
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/input-group.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * InputGroup renders an input with leading/trailing addons sharing a single\n * rounded border and a unified focus ring. Works with both native `<input>`\n * elements and the library's `<Input>` — the group aggressively flattens\n * nested wrappers, strips inner borders/rings/rounds, and owns all container\n * styling itself.\n */\nconst InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"input-group\"\n      className={cn(\n        // container — full height row, shared border + glow ring\n        \"relative flex h-10 w-full items-stretch rounded-md border border-input bg-background text-sm transition-[color,border-color,box-shadow] duration-150 overflow-hidden\",\n        \"focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]\",\n\n        // Flatten the lib Input's outer wrapper so horizontal flow works\n        \"[&_[data-slot=input-root]]:h-full [&_[data-slot=input-root]]:flex-1 [&_[data-slot=input-root]]:flex-row [&_[data-slot=input-root]]:gap-0 [&_[data-slot=input-root]]:min-w-0\",\n        // Hide any label/hint the user accidentally passed via the lib Input\n        \"[&_[data-slot=input-root]>label]:hidden [&_[data-slot=input-root]>p]:hidden\",\n\n        // Flatten the lib Input's inner wrapper (remove border, ring, round, padding, bg)\n        \"[&_[data-slot=input-wrapper]]:h-full [&_[data-slot=input-wrapper]]:w-full [&_[data-slot=input-wrapper]]:flex-1 [&_[data-slot=input-wrapper]]:border-0 [&_[data-slot=input-wrapper]]:rounded-none [&_[data-slot=input-wrapper]]:bg-transparent [&_[data-slot=input-wrapper]]:shadow-none [&_[data-slot=input-wrapper]]:ring-0 [&_[data-slot=input-wrapper]]:px-0 [&_[data-slot=input-wrapper]]:py-0 [&_[data-slot=input-wrapper]]:focus-within:ring-0 [&_[data-slot=input-wrapper]]:focus-within:border-transparent\",\n\n        // Native <input> styling inside the group\n        \"[&_input]:h-full [&_input]:flex-1 [&_input]:min-w-0 [&_input]:bg-transparent [&_input]:px-3 [&_input]:text-sm [&_input]:outline-none [&_input]:placeholder:text-muted-foreground\",\n        \"[&_input]:border-0 [&_input]:rounded-none [&_input]:shadow-none [&_input]:ring-0\",\n        \"[&_input:focus]:ring-0 [&_input:focus-visible]:ring-0 [&_input:focus-within]:ring-0\",\n\n        // Buttons inside the group fill height + shed own borders/rings\n        \"[&>button]:h-full [&>button]:rounded-none [&>button]:border-0 [&>button]:shadow-none [&>button]:ring-0 [&>button:focus]:ring-0 [&>button:focus-visible]:ring-0\",\n\n        className\n      )}\n      {...props}\n    />\n  )\n)\nInputGroup.displayName = \"InputGroup\"\n\nexport interface InputAddonProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst InputAddon = React.forwardRef<HTMLDivElement, InputAddonProps>(\n  ({ className, children, ...props }, ref) => {\n    const containsButton = React.Children.toArray(children).some(\n      (c) =>\n        React.isValidElement(c) &&\n        (c.type === \"button\" ||\n          (typeof c.type !== \"string\" &&\n            (c.type as any)?.displayName?.includes?.(\"Button\")))\n    )\n    return (\n      <div\n        ref={ref}\n        data-slot=\"input-addon\"\n        className={cn(\n          \"flex shrink-0 items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground select-none\",\n          // plain-content addon: subtle muted fill with a divider that matches the container border\n          !containsButton &&\n            \"bg-[var(--hc-grey-100)] px-3 border-e border-[var(--hc-color-border-subtle)] last:border-e-0 last:border-s\",\n          // button addon: transparent slot, button fills the area and has proper padding\n          containsButton &&\n            \"p-0 bg-transparent border-e border-[var(--hc-color-border-subtle)] last:border-e-0 last:border-s [&>button]:h-full [&>button]:px-3 [&>button]:gap-2 [&>button]:rounded-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n)\nInputAddon.displayName = \"InputAddon\"\n\nexport { InputGroup, InputAddon }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADSI;AAFJ,IAAM,aAAmB;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA;AAAA,QAET;AAAA,QACA;AAAA;AAAA,QAGA;AAAA;AAAA,QAEA;AAAA;AAAA,QAGA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QAEA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,WAAW,cAAc;AAIzB,IAAM,aAAmB;AAAA,EACvB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC1C,UAAM,iBAAuB,eAAS,QAAQ,QAAQ,EAAE;AAAA,MACtD,CAAC,MACO,qBAAe,CAAC,MACrB,EAAE,SAAS,YACT,OAAO,EAAE,SAAS,YAChB,EAAE,MAAc,aAAa,WAAW,QAAQ;AAAA,IACzD;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA;AAAA,UAEA,CAAC,kBACC;AAAA;AAAA,UAEF,kBACE;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}

package/dist/components/input-otp.cjs

@@ -0,0 +1,127 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/input-otp.tsx
+var input_otp_exports = {};
+__export(input_otp_exports, {
+  InputOTP: () => InputOTP,
+  InputOTPGroup: () => InputOTPGroup,
+  InputOTPSeparator: () => InputOTPSeparator,
+  InputOTPSlot: () => InputOTPSlot
+});
+module.exports = __toCommonJS(input_otp_exports);
+var React = __toESM(require("react"), 1);
+var import_input_otp = require("input-otp");
+var import_lucide_react = require("lucide-react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/input-otp.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var InputOTPGroupContext = React.createContext("joined");
+var InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_input_otp.OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:cursor-not-allowed", className),
+    ...props
+  }
+));
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React.forwardRef(({ className, variant = "joined", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputOTPGroupContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    "data-variant": variant,
+    className: cn(
+      "flex items-center",
+      variant === "separated" && "gap-2",
+      className
+    ),
+    ...props
+  }
+) }));
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(import_input_otp.OTPInputContext);
+  const variant = React.useContext(InputOTPGroupContext);
+  const slot = inputOTPContext.slots[index];
+  if (!slot) return null;
+  const { char, hasFakeCaret, isActive } = slot;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      role: "textbox",
+      "aria-label": `Digit ${index + 1}`,
+      "data-slot-index": index,
+      className: cn(
+        "relative flex size-10 items-center justify-center border border-input bg-background text-base font-medium transition-[color,border-color,box-shadow] duration-150",
+        variant === "joined" && "border-y border-e border-s-0 first:rounded-s-md first:border-s last:rounded-e-md",
+        variant === "separated" && "rounded-md",
+        isActive && "z-10 border-[var(--hc-primary-500)] ring-[3px] ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-5 w-px animate-caret-blink bg-foreground duration-1000" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    role: "separator",
+    className: cn("text-muted-foreground", className),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Dot, {})
+  }
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot
+});
+//# sourceMappingURL=input-otp.cjs.map

package/dist/components/input-otp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/input-otp.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Dot } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\ntype OTPGroupVariant = \"joined\" | \"separated\"\nconst InputOTPGroupContext = React.createContext<OTPGroupVariant>(\"joined\")\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\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))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { variant?: OTPGroupVariant }\n>(({ className, variant = \"joined\", ...props }, ref) => (\n  <InputOTPGroupContext.Provider value={variant}>\n    <div\n      ref={ref}\n      data-variant={variant}\n      className={cn(\n        \"flex items-center\",\n        variant === \"separated\" && \"gap-2\",\n        className\n      )}\n      {...props}\n    />\n  </InputOTPGroupContext.Provider>\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const variant = React.useContext(InputOTPGroupContext)\n  const slot = inputOTPContext.slots[index]\n  if (!slot) return null\n  const { char, hasFakeCaret, isActive } = slot\n\n  return (\n    <div\n      ref={ref}\n      role=\"textbox\"\n      aria-label={`Digit ${index + 1}`}\n      data-slot-index={index}\n      className={cn(\n        \"relative flex size-10 items-center justify-center border border-input bg-background text-base font-medium transition-[color,border-color,box-shadow] duration-150\",\n        variant === \"joined\" &&\n          \"border-y border-e border-s-0 first:rounded-s-md first:border-s last:rounded-e-md\",\n        variant === \"separated\" && \"rounded-md\",\n        isActive &&\n          \"z-10 border-[var(--hc-primary-500)] ring-[3px] ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]\",\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=\"h-5 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"separator\"\n    className={cn(\"text-muted-foreground\", className)}\n    {...props}\n  >\n    <Dot />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,uBAA0C;AAC1C,0BAAoB;;;ACFpB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADOE;AANF,IAAM,uBAA6B,oBAA+B,QAAQ;AAE1E,IAAM,WAAiB,iBAGrB,CAAC,EAAE,WAAW,oBAAoB,GAAG,MAAM,GAAG,QAC9C;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,oBAAoB;AAAA,MAClB;AAAA,MACA;AAAA,IACF;AAAA,IACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,IACrD,GAAG;AAAA;AACN,CACD;AACD,SAAS,cAAc;AAEvB,IAAM,gBAAsB,iBAG1B,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAC9C,4CAAC,qBAAqB,UAArB,EAA8B,OAAO,SACpC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,gBAAc;AAAA,IACd,WAAW;AAAA,MACT;AAAA,MACA,YAAY,eAAe;AAAA,MAC3B;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,GACF,CACD;AACD,cAAc,cAAc;AAE5B,IAAM,eAAqB,iBAGzB,CAAC,EAAE,OAAO,WAAW,GAAG,MAAM,GAAG,QAAQ;AACzC,QAAM,kBAAwB,iBAAW,gCAAe;AACxD,QAAM,UAAgB,iBAAW,oBAAoB;AACrD,QAAM,OAAO,gBAAgB,MAAM,KAAK;AACxC,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,EAAE,MAAM,cAAc,SAAS,IAAI;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,cAAY,SAAS,QAAQ,CAAC;AAAA,MAC9B,mBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA,YAAY,YACV;AAAA,QACF,YAAY,eAAe;AAAA,QAC3B,YACE;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,gBACC,4CAAC,SAAI,WAAU,yEACb,sDAAC,SAAI,WAAU,4DAA2D,GAC5E;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AACD,aAAa,cAAc;AAE3B,IAAM,oBAA0B,iBAG9B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,MAAK;AAAA,IACL,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAC/C,GAAG;AAAA,IAEJ,sDAAC,2BAAI;AAAA;AACP,CACD;AACD,kBAAkB,cAAc;","names":[]}

package/dist/components/input-otp.d.cts

@@ -0,0 +1,40 @@
+import * as input_otp from 'input-otp';
+import * as React from 'react';
+
+type OTPGroupVariant = "joined" | "separated";
+declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+    value?: string;
+    onChange?: (newValue: string) => unknown;
+    maxLength: number;
+    textAlign?: "left" | "center" | "right";
+    onComplete?: (...args: any[]) => unknown;
+    pushPasswordManagerStrategy?: "increase-width" | "none";
+    pasteTransformer?: (pasted: string) => string;
+    containerClassName?: string;
+    noScriptCSSFallback?: string | null;
+} & {
+    render: (props: input_otp.RenderProps) => React.ReactNode;
+    children?: never;
+} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+    value?: string;
+    onChange?: (newValue: string) => unknown;
+    maxLength: number;
+    textAlign?: "left" | "center" | "right";
+    onComplete?: (...args: any[]) => unknown;
+    pushPasswordManagerStrategy?: "increase-width" | "none";
+    pasteTransformer?: (pasted: string) => string;
+    containerClassName?: string;
+    noScriptCSSFallback?: string | null;
+} & {
+    render?: never;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>, "ref">) & React.RefAttributes<HTMLInputElement>>;
+declare const InputOTPGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    variant?: OTPGroupVariant;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const InputOTPSlot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    index: number;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const InputOTPSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

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

@@ -0,0 +1,40 @@
+import * as input_otp from 'input-otp';
+import * as React from 'react';
+
+type OTPGroupVariant = "joined" | "separated";
+declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+    value?: string;
+    onChange?: (newValue: string) => unknown;
+    maxLength: number;
+    textAlign?: "left" | "center" | "right";
+    onComplete?: (...args: any[]) => unknown;
+    pushPasswordManagerStrategy?: "increase-width" | "none";
+    pasteTransformer?: (pasted: string) => string;
+    containerClassName?: string;
+    noScriptCSSFallback?: string | null;
+} & {
+    render: (props: input_otp.RenderProps) => React.ReactNode;
+    children?: never;
+} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+    value?: string;
+    onChange?: (newValue: string) => unknown;
+    maxLength: number;
+    textAlign?: "left" | "center" | "right";
+    onComplete?: (...args: any[]) => unknown;
+    pushPasswordManagerStrategy?: "increase-width" | "none";
+    pasteTransformer?: (pasted: string) => string;
+    containerClassName?: string;
+    noScriptCSSFallback?: string | null;
+} & {
+    render?: never;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>, "ref">) & React.RefAttributes<HTMLInputElement>>;
+declare const InputOTPGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    variant?: OTPGroupVariant;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const InputOTPSlot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    index: number;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const InputOTPSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input-otp.js

@@ -0,0 +1,89 @@
+// src/components/input-otp.tsx
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Dot } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/input-otp.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputOTPGroupContext = React.createContext("joined");
+var InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+  OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:cursor-not-allowed", className),
+    ...props
+  }
+));
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React.forwardRef(({ className, variant = "joined", ...props }, ref) => /* @__PURE__ */ jsx(InputOTPGroupContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "data-variant": variant,
+    className: cn(
+      "flex items-center",
+      variant === "separated" && "gap-2",
+      className
+    ),
+    ...props
+  }
+) }));
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const variant = React.useContext(InputOTPGroupContext);
+  const slot = inputOTPContext.slots[index];
+  if (!slot) return null;
+  const { char, hasFakeCaret, isActive } = slot;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "textbox",
+      "aria-label": `Digit ${index + 1}`,
+      "data-slot-index": index,
+      className: cn(
+        "relative flex size-10 items-center justify-center border border-input bg-background text-base font-medium transition-[color,border-color,box-shadow] duration-150",
+        variant === "joined" && "border-y border-e border-s-0 first:rounded-s-md first:border-s last:rounded-e-md",
+        variant === "separated" && "rounded-md",
+        isActive && "z-10 border-[var(--hc-primary-500)] ring-[3px] ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]",
+        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: "h-5 w-px animate-caret-blink bg-foreground duration-1000" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "separator",
+    className: cn("text-muted-foreground", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(Dot, {})
+  }
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot
+};
+//# sourceMappingURL=input-otp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/input-otp.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Dot } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\ntype OTPGroupVariant = \"joined\" | \"separated\"\nconst InputOTPGroupContext = React.createContext<OTPGroupVariant>(\"joined\")\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\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))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { variant?: OTPGroupVariant }\n>(({ className, variant = \"joined\", ...props }, ref) => (\n  <InputOTPGroupContext.Provider value={variant}>\n    <div\n      ref={ref}\n      data-variant={variant}\n      className={cn(\n        \"flex items-center\",\n        variant === \"separated\" && \"gap-2\",\n        className\n      )}\n      {...props}\n    />\n  </InputOTPGroupContext.Provider>\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const variant = React.useContext(InputOTPGroupContext)\n  const slot = inputOTPContext.slots[index]\n  if (!slot) return null\n  const { char, hasFakeCaret, isActive } = slot\n\n  return (\n    <div\n      ref={ref}\n      role=\"textbox\"\n      aria-label={`Digit ${index + 1}`}\n      data-slot-index={index}\n      className={cn(\n        \"relative flex size-10 items-center justify-center border border-input bg-background text-base font-medium transition-[color,border-color,box-shadow] duration-150\",\n        variant === \"joined\" &&\n          \"border-y border-e border-s-0 first:rounded-s-md first:border-s last:rounded-e-md\",\n        variant === \"separated\" && \"rounded-md\",\n        isActive &&\n          \"z-10 border-[var(--hc-primary-500)] ring-[3px] ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]\",\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=\"h-5 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"separator\"\n    className={cn(\"text-muted-foreground\", className)}\n    {...props}\n  >\n    <Dot />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,UAAU,uBAAuB;AAC1C,SAAS,WAAW;;;ACFpB,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADOE,cA0CE,YA1CF;AANF,IAAM,uBAA6B,oBAA+B,QAAQ;AAE1E,IAAM,WAAiB,iBAGrB,CAAC,EAAE,WAAW,oBAAoB,GAAG,MAAM,GAAG,QAC9C;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,oBAAoB;AAAA,MAClB;AAAA,MACA;AAAA,IACF;AAAA,IACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,IACrD,GAAG;AAAA;AACN,CACD;AACD,SAAS,cAAc;AAEvB,IAAM,gBAAsB,iBAG1B,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAC9C,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,SACpC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,gBAAc;AAAA,IACd,WAAW;AAAA,MACT;AAAA,MACA,YAAY,eAAe;AAAA,MAC3B;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,GACF,CACD;AACD,cAAc,cAAc;AAE5B,IAAM,eAAqB,iBAGzB,CAAC,EAAE,OAAO,WAAW,GAAG,MAAM,GAAG,QAAQ;AACzC,QAAM,kBAAwB,iBAAW,eAAe;AACxD,QAAM,UAAgB,iBAAW,oBAAoB;AACrD,QAAM,OAAO,gBAAgB,MAAM,KAAK;AACxC,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,EAAE,MAAM,cAAc,SAAS,IAAI;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,cAAY,SAAS,QAAQ,CAAC;AAAA,MAC9B,mBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA,YAAY,YACV;AAAA,QACF,YAAY,eAAe;AAAA,QAC3B,YACE;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,gBACC,oBAAC,SAAI,WAAU,yEACb,8BAAC,SAAI,WAAU,4DAA2D,GAC5E;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AACD,aAAa,cAAc;AAE3B,IAAM,oBAA0B,iBAG9B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,MAAK;AAAA,IACL,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAC/C,GAAG;AAAA,IAEJ,8BAAC,OAAI;AAAA;AACP,CACD;AACD,kBAAkB,cAAc;","names":[]}