@etus/ui 0.4.0-beta.2 → 0.4.0-beta.21

package/dist/chunk-VHJ6ALIE.js

@@ -0,0 +1,230 @@
+import { Divider } from './chunk-LCBB3N5H.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("group/item-group flex flex-col", className),
+      "data-slot": "item-group",
+      role: "list",
+      ...props
+    }
+  );
+}
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Divider,
+    {
+      className: cn("my-0", className),
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      ...props
+    }
+  );
+}
+var itemVariants = cva(
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-[colors,transform,box-shadow] [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+        active: "bg-[color:var(--sidebar-accent)] text-[color:var(--sidebar-accent-foreground)] font-medium"
+      },
+      size: {
+        sm: "py-3 px-4 gap-2.5 min-h-7",
+        default: "p-4 gap-4 min-h-8",
+        lg: "py-3.5 px-4 gap-3.5 min-h-14"
+      },
+      interactive: {
+        true: "cursor-pointer hover:translate-y-px active:translate-y-0.5 motion-reduce:transform-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      interactive: false
+    }
+  }
+);
+function Item({
+  className,
+  variant,
+  active = false,
+  interactive = false,
+  size = "default",
+  asChild = false,
+  "data-id": dataId,
+  onClick,
+  onFocus,
+  onKeyDown,
+  ...props
+}) {
+  const resolvedVariant = variant ?? (active ? "active" : "default");
+  const isActive = resolvedVariant === "active";
+  const Comp = asChild ? Slot : interactive ? "button" : "div";
+  const createPayload = React.useCallback(
+    () => ({
+      ...dataId ? { id: dataId } : {},
+      active: isActive,
+      timestamp: Date.now()
+    }),
+    [dataId, isActive]
+  );
+  const handleClick = React.useCallback(
+    (event) => {
+      onClick?.(event, createPayload());
+    },
+    [onClick, createPayload]
+  );
+  const handleFocus = React.useCallback(
+    (event) => {
+      onFocus?.(event, createPayload());
+    },
+    [onFocus, createPayload]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      onKeyDown?.(event, createPayload());
+    },
+    [onKeyDown, createPayload]
+  );
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "aria-current": isActive && interactive ? "page" : void 0,
+      className: cn(itemVariants({ variant: resolvedVariant, size, interactive, className })),
+      "data-active": isActive || void 0,
+      "data-id": dataId,
+      "data-interactive": interactive ?? void 0,
+      "data-size": size,
+      "data-slot": "item",
+      "data-variant": resolvedVariant,
+      type: interactive && !asChild ? "button" : void 0,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      ...props
+    }
+  );
+}
+var itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(itemMediaVariants({ variant, className })),
+      "data-slot": "item-media",
+      "data-variant": variant,
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      "data-slot": "item-content",
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        className
+      ),
+      "data-slot": "item-title",
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      "data-slot": "item-description",
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-2", className),
+      "data-slot": "item-actions",
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      "data-slot": "item-header",
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      "data-slot": "item-footer",
+      ...props
+    }
+  );
+}
+
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, itemMediaVariants, itemVariants };
+//# sourceMappingURL=chunk-VHJ6ALIE.js.map
+//# sourceMappingURL=chunk-VHJ6ALIE.js.map

package/dist/chunk-VHJ6ALIE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Item/Item.tsx"],"names":[],"mappings":"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","file":"chunk-VHJ6ALIE.js","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Divider } from \"../../primitives/Divider\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"group/item-group flex flex-col\", className)}\n      data-slot=\"item-group\"\n      role=\"list\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Divider>) {\n  return (\n    <Divider\n      className={cn(\"my-0\", className)}\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex items-center border border-transparent text-sm rounded-md transition-[colors,transform,box-shadow] [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50\",\n        active: \"bg-[color:var(--sidebar-accent)] text-[color:var(--sidebar-accent-foreground)] font-medium\",\n      },\n      size: {\n        sm: \"py-3 px-4 gap-2.5 min-h-7\",\n        default: \"p-4 gap-4 min-h-8\",\n        lg: \"py-3.5 px-4 gap-3.5 min-h-14\",\n      },\n      interactive: {\n        true: \"cursor-pointer hover:translate-y-px active:translate-y-0.5 motion-reduce:transform-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      interactive: false,\n    },\n  }\n)\n\nexport interface ItemEventPayload {\n  /** Whether the item is currently in active state */\n  active: boolean\n  /** Reflects the `data-id` prop */\n  id?: string\n  /** Event timestamp (Date.now()) */\n  timestamp: number\n}\n\ninterface ItemProps\n  extends Omit<React.ComponentProps<\"div\">, \"onClick\" | \"onFocus\" | \"onKeyDown\">,\n    VariantProps<typeof itemVariants> {\n  /** Shorthand for `variant=\"active\"`. When both passed, `variant` wins. */\n  active?: boolean\n  asChild?: boolean\n  /** Reflected to `data-id` and to the event payload. */\n  \"data-id\"?: string\n  /** Click handler — receives the event + an ItemEventPayload. */\n  onClick?: (\n    event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>,\n    payload: ItemEventPayload,\n  ) => void\n  onFocus?: (\n    event: React.FocusEvent<HTMLButtonElement | HTMLDivElement>,\n    payload: ItemEventPayload,\n  ) => void\n  onKeyDown?: (\n    event: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>,\n    payload: ItemEventPayload,\n  ) => void\n}\n\nfunction Item({\n  className,\n  variant,\n  active = false,\n  interactive = false,\n  size = \"default\",\n  asChild = false,\n  \"data-id\": dataId,\n  onClick,\n  onFocus,\n  onKeyDown,\n  ...props\n}: ItemProps) {\n  // active prop is shorthand for variant=\"active\"; explicit variant wins\n  const resolvedVariant = variant ?? (active ? \"active\" : \"default\")\n  const isActive = resolvedVariant === \"active\"\n\n  // Root element selection: asChild > interactive=button > default div\n  // (when asChild, Radix Slot proxies to the child)\n  // Cast to ElementType so the spread of generic props works against any root\n  const Comp = (asChild ? Slot : interactive ? \"button\" : \"div\") as React.ElementType\n\n  const createPayload = React.useCallback(\n    (): ItemEventPayload => ({\n      ...(dataId ? { id: dataId } : {}),\n      active: isActive,\n      timestamp: Date.now(),\n    }),\n    [dataId, isActive],\n  )\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n      onClick?.(event, createPayload())\n    },\n    [onClick, createPayload],\n  )\n\n  const handleFocus = React.useCallback(\n    (event: React.FocusEvent<HTMLButtonElement | HTMLDivElement>) => {\n      onFocus?.(event, createPayload())\n    },\n    [onFocus, createPayload],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n      onKeyDown?.(event, createPayload())\n    },\n    [onKeyDown, createPayload],\n  )\n\n  return (\n    <Comp\n      aria-current={isActive && interactive ? \"page\" : undefined}\n      className={cn(itemVariants({ variant: resolvedVariant, size, interactive, className }))}\n      data-active={isActive || undefined}\n      data-id={dataId}\n      data-interactive={interactive ?? undefined}\n      data-size={size}\n      data-slot=\"item\"\n      data-variant={resolvedVariant}\n      type={interactive && !asChild ? \"button\" : undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\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:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 rounded-sm overflow-hidden [&_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      className={cn(itemMediaVariants({ variant, className }))}\n      data-slot=\"item-media\"\n      data-variant={variant}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      data-slot=\"item-content\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium\",\n        className\n      )}\n      data-slot=\"item-title\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      className={cn(\n        \"text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      data-slot=\"item-description\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex items-center gap-2\", className)}\n      data-slot=\"item-actions\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      data-slot=\"item-header\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      data-slot=\"item-footer\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  itemMediaVariants,\n  ItemSeparator,\n  ItemTitle,\n  itemVariants,\n}\n"]}

package/dist/chunk-WG34IXUV.js

@@ -0,0 +1,137 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var inputOTPSlotVariants = cva(
+  // Base styles
+  [
+    "relative flex items-center justify-center border-y border-r text-center shadow-xs transition-all outline-none",
+    "first:border-l",
+    "border-[color:var(--input-otp-slot-border)] bg-[color:var(--input-otp-slot-bg)] dark:bg-input/30",
+    "data-[active=true]:border-[color:var(--input-otp-slot-active-border)] data-[active=true]:ring-[color:var(--input-otp-slot-active-ring)]/50 data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+    "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"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-[var(--input-otp-slot-size-sm-size)] text-[length:var(--input-otp-slot-size-sm-text)] rounded-[var(--input-otp-slot-size-sm-radius)]",
+        md: "size-[var(--input-otp-slot-size-md-size)] text-[length:var(--input-otp-slot-size-md-text)] rounded-[var(--input-otp-slot-size-md-radius)]",
+        lg: "size-[var(--input-otp-slot-size-lg-size)] text-[length:var(--input-otp-slot-size-lg-text)] rounded-[var(--input-otp-slot-size-lg-radius)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputOTPContainerVariants = cva(
+  "flex items-center has-disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "gap-[var(--input-otp-container-gap-sm)]",
+        md: "gap-[var(--input-otp-container-gap-md)]",
+        lg: "gap-[var(--input-otp-container-gap-lg)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputOTPGroupVariants = cva("flex items-center");
+var inputOTPCaretStyles = "pointer-events-none absolute inset-0 flex items-center justify-center";
+var inputOTPCaretInnerStyles = "animate-caret-blink bg-[color:var(--input-otp-caret-color)] h-[var(--input-otp-caret-height)] w-[var(--input-otp-caret-width)] duration-1000";
+function normalizeOTPValue(value) {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.join("");
+  }
+  return "";
+}
+function InputOTP({
+  className,
+  containerClassName,
+  slotSize = "md",
+  defaultValue,
+  onChange,
+  value,
+  ...props
+}) {
+  const isControlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    () => normalizeOTPValue(defaultValue)
+  );
+  const resolvedValue = isControlled ? normalizeOTPValue(value) : uncontrolledValue;
+  const handleChange = React.useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      className: cn("disabled:cursor-not-allowed", className),
+      containerClassName: cn(inputOTPContainerVariants({ size: slotSize }), containerClassName),
+      "data-slot": "input-otp",
+      value: resolvedValue,
+      onChange: handleChange,
+      ...props
+    }
+  );
+}
+function InputOTPGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(inputOTPGroupVariants(), className),
+      "data-slot": "input-otp-group",
+      ...props
+    }
+  );
+}
+function InputOTPSlot({
+  index,
+  size,
+  placeholder,
+  className,
+  ...props
+}) {
+  const inputOTPContext = React.use(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
+  const showPlaceholder = !char && !isActive && placeholder;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(inputOTPSlotVariants({ size }), className),
+      "data-active": isActive,
+      "data-slot": "input-otp-slot",
+      ...props,
+      children: [
+        char,
+        showPlaceholder && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/30 select-none", children: placeholder }),
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: inputOTPCaretStyles, children: /* @__PURE__ */ jsx("div", { className: inputOTPCaretInnerStyles }) })
+      ]
+    }
+  );
+}
+function InputOTPSeparator({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: children ?? /* @__PURE__ */ jsx(MinusIcon, {}) });
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, inputOTPCaretInnerStyles, inputOTPCaretStyles, inputOTPContainerVariants, inputOTPGroupVariants, inputOTPSlotVariants };
+//# sourceMappingURL=chunk-WG34IXUV.js.map
+//# sourceMappingURL=chunk-WG34IXUV.js.map

package/dist/chunk-WG34IXUV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/InputOTP/InputOTP.variants.ts","../src/components/forms/InputOTP/InputOTP.tsx"],"names":[],"mappings":";;;;;;;AAKO,IAAM,oBAAA,GAAuB,GAAA;AAAA;AAAA,EAElC;AAAA,IACE,+GAAA;AAAA,IACA,gBAAA;AAAA,IACA,kGAAA;AAAA,IACA,kMAAA;AAAA,IACA,8GAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2IAAA;AAAA,QACJ,EAAA,EAAI,2IAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,yBAAA,GAA4B,GAAA;AAAA,EACvC,2CAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,yCAAA;AAAA,QACJ,EAAA,EAAI,yCAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,qBAAA,GAAwB,IAAI,mBAAmB;AAKrD,IAAM,mBAAA,GACX;AAEK,IAAM,wBAAA,GACX;ACtCF,SAAS,kBACP,KAAA,EACQ;AACR,EAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC7B,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC7B,IAAA,OAAO,OAAO,KAAK,CAAA;AAAA,EACrB;AAEA,EAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG;AACxB,IAAA,OAAO,KAAA,CAAM,KAAK,EAAE,CAAA;AAAA,EACtB;AAEA,EAAA,OAAO,EAAA;AACT;AAEA,SAAS,QAAA,CAAS;AAAA,EAChB,SAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAA,GAAW,IAAA;AAAA,EACX,YAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,eAAe,KAAA,KAAU,MAAA;AAC/B,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAU,KAAA,CAAA,QAAA;AAAA,IAAS,MAC/D,kBAAkB,YAAY;AAAA,GAChC;AAEA,EAAA,MAAM,aAAA,GAAgB,YAAA,GAAe,iBAAA,CAAkB,KAAK,CAAA,GAAI,iBAAA;AAEhE,EAAA,MAAM,YAAA,GAAqB,KAAA,CAAA,WAAA;AAAA,IACzB,CAAC,SAAA,KAAsB;AACrB,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,oBAAA,CAAqB,SAAS,CAAA;AAAA,MAChC;AAEA,MAAA,QAAA,GAAW,SAAS,CAAA;AAAA,IACtB,CAAA;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,GACzB;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,MACtD,kBAAA,EAAoB,GAAG,yBAAA,CAA0B,EAAE,MAAM,QAAA,EAAU,GAAG,kBAAkB,CAAA;AAAA,MACxF,WAAA,EAAU,WAAA;AAAA,MACV,KAAA,EAAO,aAAA;AAAA,MACP,QAAA,EAAU,YAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAAuB;AAClE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAsB,EAAG,SAAS,CAAA;AAAA,MAChD,WAAA,EAAU,iBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,YAAA,CAAa;AAAA,EACpB,KAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsB;AACpB,EAAA,MAAM,eAAA,GAAwB,UAAI,eAAe,CAAA;AACjD,EAAA,MAAM,EAAE,MAAM,YAAA,EAAc,QAAA,KAAa,eAAA,CAAgB,KAAA,CAAM,KAAK,CAAA,IAAK,EAAC;AAG1E,EAAA,MAAM,eAAA,GAAkB,CAAC,IAAA,IAAQ,CAAC,QAAA,IAAY,WAAA;AAE9C,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,EAAA,CAAG,oBAAA,CAAqB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACvD,aAAA,EAAa,QAAA;AAAA,MACb,WAAA,EAAU,gBAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA,eAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wCAAwC,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAErE,YAAA,wBACE,KAAA,EAAA,EAAI,SAAA,EAAW,qBACd,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,wBAAA,EAA0B,CAAA,EAC5C;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAEA,SAAS,iBAAA,CAAkB,EAAE,QAAA,EAAU,GAAG,OAAM,EAA2B;AACzE,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,qBAAA,EAAsB,IAAA,EAAK,WAAA,EAAa,GAAG,KAAA,EACvD,QAAA,EAAA,QAAA,oBAAY,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EAC1B,CAAA;AAEJ","file":"chunk-WG34IXUV.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * InputOTP slot variant styles using CVA\n */\nexport const inputOTPSlotVariants = cva(\n  // Base styles\n  [\n    \"relative flex items-center justify-center border-y border-r text-center shadow-xs transition-all outline-none\",\n    \"first:border-l\",\n    \"border-[color:var(--input-otp-slot-border)] bg-[color:var(--input-otp-slot-bg)] dark:bg-input/30\",\n    \"data-[active=true]:border-[color:var(--input-otp-slot-active-border)] data-[active=true]:ring-[color:var(--input-otp-slot-active-ring)]/50 data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n    \"data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n    \"aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-[var(--input-otp-slot-size-sm-size)] text-[length:var(--input-otp-slot-size-sm-text)] rounded-[var(--input-otp-slot-size-sm-radius)]\",\n        md: \"size-[var(--input-otp-slot-size-md-size)] text-[length:var(--input-otp-slot-size-md-text)] rounded-[var(--input-otp-slot-size-md-radius)]\",\n        lg: \"size-[var(--input-otp-slot-size-lg-size)] text-[length:var(--input-otp-slot-size-lg-text)] rounded-[var(--input-otp-slot-size-lg-radius)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputOTP container variant styles using CVA\n */\nexport const inputOTPContainerVariants = cva(\n  \"flex items-center has-disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"gap-[var(--input-otp-container-gap-sm)]\",\n        md: \"gap-[var(--input-otp-container-gap-md)]\",\n        lg: \"gap-[var(--input-otp-container-gap-lg)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputOTP group styles\n */\nexport const inputOTPGroupVariants = cva(\"flex items-center\")\n\n/**\n * InputOTP caret animation styles\n */\nexport const inputOTPCaretStyles =\n  \"pointer-events-none absolute inset-0 flex items-center justify-center\"\n\nexport const inputOTPCaretInnerStyles =\n  \"animate-caret-blink bg-[color:var(--input-otp-caret-color)] h-[var(--input-otp-caret-height)] w-[var(--input-otp-caret-width)] duration-1000\"\n\nexport type InputOTPSlotVariantProps = VariantProps<typeof inputOTPSlotVariants>\nexport type InputOTPContainerVariantProps = VariantProps<typeof inputOTPContainerVariants>\n","\"use client\"\n\nimport type {\n  InputOTPGroupProps,\n  InputOTPProps,\n  InputOTPSeparatorProps,\n  InputOTPSlotProps,\n} from \"./InputOTP.types\"\n\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { MinusIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  inputOTPCaretInnerStyles,\n  inputOTPCaretStyles,\n  inputOTPContainerVariants,\n  inputOTPGroupVariants,\n  inputOTPSlotVariants,\n} from \"./InputOTP.variants\"\n\nfunction normalizeOTPValue(\n  value: InputOTPProps[\"defaultValue\"] | InputOTPProps[\"value\"]\n): string {\n  if (typeof value === \"string\") {\n    return value\n  }\n\n  if (typeof value === \"number\") {\n    return String(value)\n  }\n\n  if (Array.isArray(value)) {\n    return value.join(\"\")\n  }\n\n  return \"\"\n}\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  slotSize = \"md\",\n  defaultValue,\n  onChange,\n  value,\n  ...props\n}: InputOTPProps) {\n  const isControlled = value !== undefined\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(() =>\n    normalizeOTPValue(defaultValue)\n  )\n\n  const resolvedValue = isControlled ? normalizeOTPValue(value) : uncontrolledValue\n\n  const handleChange = React.useCallback(\n    (nextValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(nextValue)\n      }\n\n      onChange?.(nextValue)\n    },\n    [isControlled, onChange]\n  )\n\n  return (\n    <OTPInput\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      containerClassName={cn(inputOTPContainerVariants({ size: slotSize }), containerClassName)}\n      data-slot=\"input-otp\"\n      value={resolvedValue}\n      onChange={handleChange}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: InputOTPGroupProps) {\n  return (\n    <div\n      className={cn(inputOTPGroupVariants(), className)}\n      data-slot=\"input-otp-group\"\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  size,\n  placeholder,\n  className,\n  ...props\n}: InputOTPSlotProps) {\n  const inputOTPContext = React.use(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {}\n\n  // Show placeholder only when slot is empty and not active\n  const showPlaceholder = !char && !isActive && placeholder\n\n  return (\n    <div\n      className={cn(inputOTPSlotVariants({ size }), className)}\n      data-active={isActive}\n      data-slot=\"input-otp-slot\"\n      {...props}\n    >\n      {char}\n      {showPlaceholder && (\n        <span className=\"text-muted-foreground/30 select-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className={inputOTPCaretStyles}>\n          <div className={inputOTPCaretInnerStyles} />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ children, ...props }: InputOTPSeparatorProps) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      {children ?? <MinusIcon />}\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }\n"]}

package/dist/chunk-WG5IYG7X.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-WG5IYG7X.js.map
+//# sourceMappingURL=chunk-WG5IYG7X.js.map

package/dist/chunk-WG5IYG7X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-WG5IYG7X.js"}