ml-uikit 1.1.0 → 1.1.2

package/dist/index.es29.js

@@ -1,46 +1,154 @@
-import * as e from "react";
-import { OTPInput as c, OTPInputContext as d } from "input-otp";
-import { Minus as p } from "lucide-react";
-import { cn as n } from "./index.es56.js";
-const u = e.forwardRef(({ className: t, containerClassName: r, ...a }, o) => /* @__PURE__ */ e.createElement(
-  c,
+import * as a from "react";
+import { cva as s } from "class-variance-authority";
+import { cn as r } from "./index.es57.js";
+import { Button as u } from "./index.es10.js";
+import { Input as p } from "./index.es28.js";
+import { Textarea as l } from "./index.es53.js";
+function h({ className: e, ...t }) {
+  return /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: r(
+        "group/input-group relative flex w-full items-center rounded-[8px] border border-[#e6e6e6] bg-white text-[14px] leading-[20px] text-foreground transition-colors",
+        "h-10 has-[>textarea]:h-auto",
+        // Variants based on alignment.
+        "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",
+        // Focus state.
+        "focus-within:border-[#1D1C20]",
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-[#ff3b30]",
+        // Disabled state.
+        "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-[#f2f2f2] data-[disabled=true]:text-[#9ca3af]",
+        e
+      ),
+      ...t
+    }
+  );
+}
+const d = s(
+  "flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium text-[#7f7d83] group-data-[disabled=true]/input-group:text-[#b3b3b3] [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
-    ref: o,
-    containerClassName: n(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
-      r
-    ),
-    className: n("disabled:cursor-not-allowed", t),
-    ...a
+    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.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
   }
-));
-u.displayName = "InputOTP";
-const f = e.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e.createElement("div", { ref: a, className: n("flex items-center", t), ...r }));
-f.displayName = "InputOTPGroup";
-const O = e.forwardRef(({ index: t, className: r, ...a }, o) => {
-  const s = e.useContext(d), { char: i, hasFakeCaret: l, isActive: m } = s.slots[t];
-  return /* @__PURE__ */ e.createElement(
+);
+function v({
+  className: e,
+  align: t = "inline-start",
+  ...o
+}) {
+  return /* @__PURE__ */ a.createElement(
     "div",
     {
-      ref: o,
-      className: n(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        m && "z-10 ring-1 ring-ring",
-        r
-      ),
-      ...a
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": t,
+      className: r(d({ align: t }), e),
+      onClick: (n) => {
+        n.target.closest("button") || n.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...o
+    }
+  );
+}
+const c = s(
+  "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"
+      }
     },
-    i,
-    l && /* @__PURE__ */ e.createElement("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ e.createElement("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }))
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function k({
+  className: e,
+  type: t = "button",
+  variant: o = "ghost",
+  size: n = "xs",
+  ...i
+}) {
+  return /* @__PURE__ */ a.createElement(
+    u,
+    {
+      type: t,
+      "data-size": n,
+      variant: o,
+      className: r(c({ size: n }), e),
+      ...i
+    }
+  );
+}
+function z({ className: e, ...t }) {
+  return /* @__PURE__ */ a.createElement(
+    "span",
+    {
+      className: r(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function w({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a.createElement(
+    p,
+    {
+      "data-slot": "input-group-control",
+      className: r(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        e
+      ),
+      ...t
+    }
+  );
+}
+function G({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a.createElement(
+    l,
+    {
+      "data-slot": "input-group-control",
+      className: r(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        e
+      ),
+      ...t
+    }
   );
-});
-O.displayName = "InputOTPSlot";
-const P = e.forwardRef(({ ...t }, r) => /* @__PURE__ */ e.createElement("div", { ref: r, role: "separator", ...t }, /* @__PURE__ */ e.createElement(p, null)));
-P.displayName = "InputOTPSeparator";
+}
 export {
-  u as InputOTP,
-  f as InputOTPGroup,
-  P as InputOTPSeparator,
-  O as InputOTPSlot
+  h as InputGroup,
+  v as InputGroupAddon,
+  k as InputGroupButton,
+  w as InputGroupInput,
+  z as InputGroupText,
+  G as InputGroupTextarea
 };
 //# sourceMappingURL=index.es29.js.map

package/dist/index.es29.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es29.js","sources":["../src/components/ui/input-otp.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Minus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\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\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\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 { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-1 ring-ring\",\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-4 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>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Minus />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"],"names":["InputOTP","React","className","containerClassName","props","ref","OTPInput","cn","InputOTPGroup","InputOTPSlot","index","inputOTPContext","OTPInputContext","char","hasFakeCaret","isActive","InputOTPSeparator","Minus"],"mappings":";;;;AAMA,MAAMA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,oBAAAC,GAAoB,GAAGC,EAAA,GAASC,MAC9C,gBAAAJ,EAAA;AAAA,EAACK;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,oBAAoBE;AAAA,MAClB;AAAA,MACAJ;AAAA,IAAA;AAAA,IAEF,WAAWI,EAAG,+BAA+BL,CAAS;AAAA,IACrD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAS,cAAc;AAEvB,MAAMQ,IAAgBP,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGE,KAASC,sCACzB,OAAA,EAAI,KAAAA,GAAU,WAAWE,EAAG,qBAAqBL,CAAS,GAAI,GAAGE,GAAO,CAC1E;AACDI,EAAc,cAAc;AAE5B,MAAMC,IAAeR,EAAM,WAGzB,CAAC,EAAE,OAAAS,GAAO,WAAAR,GAAW,GAAGE,EAAA,GAASC,MAAQ;AACzC,QAAMM,IAAkBV,EAAM,WAAWW,CAAe,GAClD,EAAE,MAAAC,GAAM,cAAAC,GAAc,UAAAC,MAAaJ,EAAgB,MAAMD,CAAK;AAEpE,SACE,gBAAAT,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAI;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAQ,KAAY;AAAA,QACZb;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,IAEHS;AAAA,IACAC,qCACE,OAAA,EAAI,WAAU,2EACb,gBAAAb,EAAA,cAAC,OAAA,EAAI,WAAU,2DAAA,CAA2D,CAC5E;AAAA,EAAA;AAIR,CAAC;AACDQ,EAAa,cAAc;AAE3B,MAAMO,IAAoBf,EAAM,WAG9B,CAAC,EAAE,GAAGG,KAASC,sCACd,OAAA,EAAI,KAAAA,GAAU,MAAK,aAAa,GAAGD,KAClC,gBAAAH,EAAA,cAACgB,GAAA,IAAM,CACT,CACD;AACDD,EAAkB,cAAc;"}
+{"version":3,"file":"index.es29.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\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-[8px] border border-[#e6e6e6] bg-white text-[14px] leading-[20px] text-foreground transition-colors\",\n        \"h-10 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        \"focus-within:border-[#1D1C20]\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-[#ff3b30]\",\n\n        // Disabled state.\n        \"data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-[#f2f2f2] data-[disabled=true]:text-[#9ca3af]\",\n\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium text-[#7f7d83] group-data-[disabled=true]/input-group:text-[#b3b3b3] [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\":\n          \"order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5\",\n        \"block-end\":\n          \"[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-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\":\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\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-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"],"names":["InputGroup","className","props","React","cn","inputGroupAddonVariants","cva","InputGroupAddon","align","e","inputGroupButtonVariants","InputGroupButton","type","variant","size","Button","InputGroupText","InputGroupInput","Input","InputGroupTextarea","Textarea"],"mappings":"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"}

package/dist/index.es3.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import * as t from "@radix-ui/react-accordion";
 import { ChevronDown as i } from "lucide-react";
-import { cn as m } from "./index.es56.js";
+import { cn as m } from "./index.es57.js";
 const p = t.Root, c = e.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ e.createElement(
   t.Item,
   {

package/dist/index.es30.js

@@ -1,188 +1,46 @@
-import * as a from "react";
-import { Slot as m } from "@radix-ui/react-slot";
-import { cva as i } from "class-variance-authority";
-import { cn as r } from "./index.es56.js";
-import { Separator as d } from "./index.es42.js";
-function x({ className: t, ...e }) {
-  return /* @__PURE__ */ a.createElement(
-    "div",
-    {
-      role: "list",
-      "data-slot": "item-group",
-      className: r("group/item-group flex flex-col", t),
-      ...e
-    }
-  );
-}
-function b({
-  className: t,
-  ...e
-}) {
-  return /* @__PURE__ */ a.createElement(
-    d,
-    {
-      "data-slot": "item-separator",
-      orientation: "horizontal",
-      className: r("my-0", t),
-      ...e
-    }
-  );
-}
-const c = i(
-  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+import * as e from "react";
+import { OTPInput as c, OTPInputContext as d } from "input-otp";
+import { Minus as p } from "lucide-react";
+import { cn as n } from "./index.es57.js";
+const u = e.forwardRef(({ className: t, containerClassName: r, ...a }, o) => /* @__PURE__ */ e.createElement(
+  c,
   {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border-border",
-        muted: "bg-muted/50"
-      },
-      size: {
-        default: "gap-4 p-4 ",
-        sm: "gap-2.5 px-4 py-3"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
+    ref: o,
+    containerClassName: n(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      r
+    ),
+    className: n("disabled:cursor-not-allowed", t),
+    ...a
   }
-);
-function E({
-  className: t,
-  variant: e = "default",
-  size: n = "default",
-  asChild: o = !1,
-  ...s
-}) {
-  const l = o ? m : "div";
-  return /* @__PURE__ */ a.createElement(
-    l,
-    {
-      "data-slot": "item",
-      "data-variant": e,
-      "data-size": n,
-      className: r(c({ variant: e, size: n, className: t })),
-      ...s
-    }
-  );
-}
-const u = i(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
-        image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function I({
-  className: t,
-  variant: e = "default",
-  ...n
-}) {
-  return /* @__PURE__ */ a.createElement(
-    "div",
-    {
-      "data-slot": "item-media",
-      "data-variant": e,
-      className: r(u({ variant: e, className: t })),
-      ...n
-    }
-  );
-}
-function N({ className: t, ...e }) {
-  return /* @__PURE__ */ a.createElement(
+));
+u.displayName = "InputOTP";
+const f = e.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e.createElement("div", { ref: a, className: n("flex items-center", t), ...r }));
+f.displayName = "InputOTPGroup";
+const O = e.forwardRef(({ index: t, className: r, ...a }, o) => {
+  const s = e.useContext(d), { char: i, hasFakeCaret: l, isActive: m } = s.slots[t];
+  return /* @__PURE__ */ e.createElement(
     "div",
     {
-      "data-slot": "item-content",
-      className: r(
-        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
-        t
+      ref: o,
+      className: n(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        m && "z-10 ring-1 ring-ring",
+        r
       ),
-      ...e
-    }
-  );
-}
-function h({ className: t, ...e }) {
-  return /* @__PURE__ */ a.createElement(
-    "div",
-    {
-      "data-slot": "item-title",
-      className: r(
-        "flex w-fit items-center gap-2 text-sm font-medium leading-snug",
-        t
-      ),
-      ...e
-    }
-  );
-}
-function z({ className: t, ...e }) {
-  return /* @__PURE__ */ a.createElement(
-    "p",
-    {
-      "data-slot": "item-description",
-      className: r(
-        "text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        t
-      ),
-      ...e
-    }
-  );
-}
-function y({ className: t, ...e }) {
-  return /* @__PURE__ */ a.createElement(
-    "div",
-    {
-      "data-slot": "item-actions",
-      className: r("flex items-center gap-2", t),
-      ...e
-    }
-  );
-}
-function w({ className: t, ...e }) {
-  return /* @__PURE__ */ a.createElement(
-    "div",
-    {
-      "data-slot": "item-header",
-      className: r(
-        "flex basis-full items-center justify-between gap-2",
-        t
-      ),
-      ...e
-    }
-  );
-}
-function j({ className: t, ...e }) {
-  return /* @__PURE__ */ a.createElement(
-    "div",
-    {
-      "data-slot": "item-footer",
-      className: r(
-        "flex basis-full items-center justify-between gap-2",
-        t
-      ),
-      ...e
-    }
+      ...a
+    },
+    i,
+    l && /* @__PURE__ */ e.createElement("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ e.createElement("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }))
   );
-}
+});
+O.displayName = "InputOTPSlot";
+const P = e.forwardRef(({ ...t }, r) => /* @__PURE__ */ e.createElement("div", { ref: r, role: "separator", ...t }, /* @__PURE__ */ e.createElement(p, null)));
+P.displayName = "InputOTPSeparator";
 export {
-  E as Item,
-  y as ItemActions,
-  N as ItemContent,
-  z as ItemDescription,
-  j as ItemFooter,
-  x as ItemGroup,
-  w as ItemHeader,
-  I as ItemMedia,
-  b as ItemSeparator,
-  h as ItemTitle
+  u as InputOTP,
+  f as InputOTPGroup,
+  P as InputOTPSeparator,
+  O as InputOTPSlot
 };
 //# sourceMappingURL=index.es30.js.map

package/dist/index.es30.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es30.js","sources":["../src/components/ui/item.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/components/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\"group/item-group flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-0\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50\",\n      },\n      size: {\n        default: \"gap-4 p-4 \",\n        sm: \"gap-2.5 px-4 py-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm font-medium leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n"],"names":["ItemGroup","className","props","React","cn","ItemSeparator","Separator","itemVariants","cva","Item","variant","size","asChild","Comp","Slot","itemMediaVariants","ItemMedia","ItemContent","ItemTitle","ItemDescription","ItemActions","ItemHeader","ItemFooter"],"mappings":"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"}
+{"version":3,"file":"index.es30.js","sources":["../src/components/ui/input-otp.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Minus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\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\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\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 { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-1 ring-ring\",\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-4 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>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Minus />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"],"names":["InputOTP","React","className","containerClassName","props","ref","OTPInput","cn","InputOTPGroup","InputOTPSlot","index","inputOTPContext","OTPInputContext","char","hasFakeCaret","isActive","InputOTPSeparator","Minus"],"mappings":";;;;AAMA,MAAMA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,oBAAAC,GAAoB,GAAGC,EAAA,GAASC,MAC9C,gBAAAJ,EAAA;AAAA,EAACK;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,oBAAoBE;AAAA,MAClB;AAAA,MACAJ;AAAA,IAAA;AAAA,IAEF,WAAWI,EAAG,+BAA+BL,CAAS;AAAA,IACrD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAS,cAAc;AAEvB,MAAMQ,IAAgBP,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGE,KAASC,sCACzB,OAAA,EAAI,KAAAA,GAAU,WAAWE,EAAG,qBAAqBL,CAAS,GAAI,GAAGE,GAAO,CAC1E;AACDI,EAAc,cAAc;AAE5B,MAAMC,IAAeR,EAAM,WAGzB,CAAC,EAAE,OAAAS,GAAO,WAAAR,GAAW,GAAGE,EAAA,GAASC,MAAQ;AACzC,QAAMM,IAAkBV,EAAM,WAAWW,CAAe,GAClD,EAAE,MAAAC,GAAM,cAAAC,GAAc,UAAAC,MAAaJ,EAAgB,MAAMD,CAAK;AAEpE,SACE,gBAAAT,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAI;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAQ,KAAY;AAAA,QACZb;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,IAEHS;AAAA,IACAC,qCACE,OAAA,EAAI,WAAU,2EACb,gBAAAb,EAAA,cAAC,OAAA,EAAI,WAAU,2DAAA,CAA2D,CAC5E;AAAA,EAAA;AAIR,CAAC;AACDQ,EAAa,cAAc;AAE3B,MAAMO,IAAoBf,EAAM,WAG9B,CAAC,EAAE,GAAGG,KAASC,sCACd,OAAA,EAAI,KAAAA,GAAU,MAAK,aAAa,GAAGD,KAClC,gBAAAH,EAAA,cAACgB,GAAA,IAAM,CACT,CACD;AACDD,EAAkB,cAAc;"}