@evinvest/uikit 0.18.0 → 0.20.0

package/dist/components/info-tip.js

@@ -0,0 +1,161 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import { useFloating } from "../primitives/use-floating.js";
+import { useDismissableLayer } from "../primitives/dismissable-layer.js";
+import { usePresence } from "../primitives/presence.js";
+import { useHoverIntent } from "../primitives/use-hover-intent.js";
+import { mergeRefs } from "../primitives/merge-refs.js";
+import { Portal } from "../primitives/portal.js";
+import { Slot } from "../primitives/slot.js";
+import { POPOVER_CONTENT } from "../generated/popover.js";
+const InfoTipContext = React.createContext(null);
+function useInfoTip() {
+  const ctx = React.useContext(InfoTipContext);
+  if (!ctx) throw new Error("InfoTip parts must be used within <InfoTip>");
+  return ctx;
+}
+function InfoTip({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children
+}) {
+  const [isOpen, setOpen] = useControllableState({
+    ...open !== void 0 ? { value: open } : {},
+    defaultValue: defaultOpen,
+    ...onOpenChange ? { onChange: onOpenChange } : {}
+  });
+  const anchorRef = React.useRef(null);
+  const contentId = React.useId();
+  return /* @__PURE__ */ jsx(
+    InfoTipContext.Provider,
+    {
+      value: { open: isOpen, setOpen, anchorRef, contentId },
+      children
+    }
+  );
+}
+function InfoGlyph({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      className: cn("size-4", className),
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+      ]
+    }
+  );
+}
+function InfoTipTrigger({
+  asChild = false,
+  label = "More information",
+  hoverDelay = 500,
+  className,
+  onClick,
+  onBlur,
+  onPointerEnter,
+  onPointerLeave,
+  children,
+  ...props
+}) {
+  const { open, setOpen, anchorRef, contentId } = useInfoTip();
+  const hover = useHoverIntent({
+    onOpen: () => setOpen(true),
+    onClose: () => setOpen(false),
+    openDelay: hoverDelay
+  });
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "info-tip-trigger",
+      "data-state": open ? "open" : "closed",
+      type: asChild ? void 0 : "button",
+      "aria-label": label,
+      "aria-expanded": open,
+      "aria-controls": contentId,
+      ref: anchorRef,
+      className: cn(
+        "inline-flex size-4 shrink-0 cursor-help items-center justify-center rounded-full align-middle text-ink-soft outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:text-accent-debug",
+        className
+      ),
+      onClick: (e) => {
+        onClick?.(e);
+        setOpen(!open);
+      },
+      onBlur: (e) => {
+        onBlur?.(e);
+        setOpen(false);
+      },
+      onPointerEnter: (e) => {
+        onPointerEnter?.(e);
+        hover.onPointerEnter(e);
+      },
+      onPointerLeave: (e) => {
+        onPointerLeave?.(e);
+        hover.onPointerLeave(e);
+      },
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(InfoGlyph, {})
+    }
+  );
+}
+function InfoTipContent({
+  className,
+  side: sideProp = "bottom",
+  align = "center",
+  sideOffset = 6,
+  children,
+  ...props
+}) {
+  const { open, setOpen, anchorRef, contentId } = useInfoTip();
+  const { isPresent, ref: presRef } = usePresence(open);
+  const { floatingRef, style, side } = useFloating({
+    anchorRef,
+    open,
+    side: sideProp,
+    align,
+    offset: sideOffset
+  });
+  const dismissRef = useDismissableLayer({
+    enabled: open,
+    onDismiss: () => setOpen(false),
+    exclude: [anchorRef]
+  });
+  if (!isPresent) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: contentId,
+      role: "status",
+      "aria-live": "polite",
+      "data-slot": "info-tip-content",
+      "data-state": open ? "open" : "closed",
+      "data-side": side,
+      "data-align": align,
+      ref: mergeRefs(floatingRef, dismissRef, presRef),
+      style,
+      className: cn(POPOVER_CONTENT, "w-64 p-3 text-sm", className),
+      ...props,
+      children
+    }
+  ) });
+}
+export {
+  InfoTip,
+  InfoTipContent,
+  InfoTipTrigger
+};
+//# sourceMappingURL=info-tip.js.map

package/dist/components/info-tip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/info-tip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { useHoverIntent } from \"../primitives/use-hover-intent\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport { POPOVER_CONTENT } from \"../generated/popover\";\n\n/**\n * `InfoTip` — the ⓘ-beside-a-label *toggletip*. It reuses the popover machinery\n * (controllable state + floating + dismissable layer + portal) but deliberately\n * NOT the tooltip ARIA: the trigger is a real `<button aria-expanded aria-controls>`\n * and the bubble is a `role=\"status\"` live region, never `role=\"tooltip\"`. That is\n * the pattern that stays correct across mouse, keyboard and touch (a `role=tooltip`\n * is hover/focus-only and never opens on tap). Hover-with-intent (~0.5s) is layered\n * on as a mouse-only enhancement; click/tap/Enter/Space toggle instantly.\n *\n * The bubble holds plain, non-interactive help text — it does not trap focus and\n * nothing inside it is focusable, so there is no focus to manage or return.\n */\ninterface InfoTipContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  anchorRef: React.RefObject<HTMLElement | null>;\n  contentId: string;\n}\n\nconst InfoTipContext = React.createContext<InfoTipContextValue | null>(null);\n\nfunction useInfoTip(): InfoTipContextValue {\n  const ctx = React.useContext(InfoTipContext);\n  if (!ctx) throw new Error(\"InfoTip parts must be used within <InfoTip>\");\n  return ctx;\n}\n\nexport interface InfoTipProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function InfoTip({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: InfoTipProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const anchorRef = React.useRef<HTMLElement | null>(null);\n  const contentId = React.useId();\n  return (\n    <InfoTipContext.Provider\n      value={{ open: isOpen, setOpen, anchorRef, contentId }}\n    >\n      {children}\n    </InfoTipContext.Provider>\n  );\n}\n\n// lucide `info`, inlined per the kit's no-lucide-dep icon convention.\nfunction InfoGlyph({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      className={cn(\"size-4\", className)}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 16v-4\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n}\n\nexport interface InfoTipTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n  /** Accessible name for the icon-only button. */\n  label?: string;\n  /** Milliseconds the mouse must dwell before the tip opens on hover. */\n  hoverDelay?: number;\n}\n\nexport function InfoTipTrigger({\n  asChild = false,\n  label = \"More information\",\n  hoverDelay = 500,\n  className,\n  onClick,\n  onBlur,\n  onPointerEnter,\n  onPointerLeave,\n  children,\n  ...props\n}: InfoTipTriggerProps) {\n  const { open, setOpen, anchorRef, contentId } = useInfoTip();\n  const hover = useHoverIntent({\n    onOpen: () => setOpen(true),\n    onClose: () => setOpen(false),\n    openDelay: hoverDelay,\n  });\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"info-tip-trigger\"\n      data-state={open ? \"open\" : \"closed\"}\n      type={asChild ? undefined : \"button\"}\n      aria-label={label}\n      aria-expanded={open}\n      aria-controls={contentId}\n      ref={anchorRef as React.Ref<never>}\n      className={cn(\n        \"inline-flex size-4 shrink-0 cursor-help items-center justify-center rounded-full align-middle text-ink-soft outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:text-accent-debug\",\n        className,\n      )}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      onBlur={(e: React.FocusEvent<HTMLButtonElement>) => {\n        onBlur?.(e);\n        setOpen(false);\n      }}\n      onPointerEnter={(e: React.PointerEvent<HTMLButtonElement>) => {\n        onPointerEnter?.(e);\n        hover.onPointerEnter(e);\n      }}\n      onPointerLeave={(e: React.PointerEvent<HTMLButtonElement>) => {\n        onPointerLeave?.(e);\n        hover.onPointerLeave(e);\n      }}\n      {...(props as Record<string, unknown>)}\n    >\n      {children ?? <InfoGlyph />}\n    </Comp>\n  );\n}\n\nexport interface InfoTipContentProps extends React.ComponentProps<\"div\"> {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n}\n\nexport function InfoTipContent({\n  className,\n  side: sideProp = \"bottom\",\n  align = \"center\",\n  sideOffset = 6,\n  children,\n  ...props\n}: InfoTipContentProps) {\n  const { open, setOpen, anchorRef, contentId } = useInfoTip();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const { floatingRef, style, side } = useFloating({\n    anchorRef,\n    open,\n    side: sideProp,\n    align,\n    offset: sideOffset,\n  });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [anchorRef],\n  });\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <div\n        id={contentId}\n        role=\"status\"\n        aria-live=\"polite\"\n        data-slot=\"info-tip-content\"\n        data-state={open ? \"open\" : \"closed\"}\n        data-side={side}\n        data-align={align}\n        ref={mergeRefs(floatingRef, dismissRef, presRef)}\n        style={style}\n        className={cn(POPOVER_CONTENT, \"w-64 p-3 text-sm\", className)}\n        {...(props as Record<string, unknown>)}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/input-group.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import {
+  INPUT_GROUP_ADDON_BASE,
+  INPUT_GROUP_BASE,
+  INPUT_GROUP_BUTTON_BASE,
+  INPUT_GROUP_INPUT_CONTROL,
+  INPUT_GROUP_TEXT,
+  INPUT_GROUP_TEXTAREA_CONTROL,
+  inputGroupAddonAligns,
+  inputGroupButtonSizes
+} from "../generated/input-group.js";
+function InputGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(INPUT_GROUP_BASE, className),
+      ...props
+    }
+  );
+}
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(
+        INPUT_GROUP_ADDON_BASE,
+        inputGroupAddonAligns[align],
+        className
+      ),
+      onClick: (e) => {
+        if (e.target.closest("button")) return;
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(
+        INPUT_GROUP_BUTTON_BASE,
+        inputGroupButtonSizes[size],
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupText({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(INPUT_GROUP_TEXT, className),
+      ...props
+    }
+  );
+}
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-slot": "input-group-control",
+      className: cn(INPUT_GROUP_INPUT_CONTROL, className),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(INPUT_GROUP_TEXTAREA_CONTROL, className),
+      ...props
+    }
+  );
+}
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea
+};
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/input-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Input } from \"./input\";\nimport { Textarea } from \"./textarea\";\nimport {\n  INPUT_GROUP_ADDON_BASE,\n  INPUT_GROUP_BASE,\n  INPUT_GROUP_BUTTON_BASE,\n  INPUT_GROUP_INPUT_CONTROL,\n  INPUT_GROUP_TEXT,\n  INPUT_GROUP_TEXTAREA_CONTROL,\n  inputGroupAddonAligns,\n  inputGroupButtonSizes,\n  type InputGroupAddonAlign,\n  type InputGroupButtonSize,\n} from \"../generated/input-group\";\n\nexport type { InputGroupAddonAlign, InputGroupButtonSize };\n\nexport function InputGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(INPUT_GROUP_BASE, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface InputGroupAddonProps extends React.ComponentProps<\"div\"> {\n  align?: InputGroupAddonAlign;\n}\n\nexport function InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: InputGroupAddonProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(\n        INPUT_GROUP_ADDON_BASE,\n        inputGroupAddonAligns[align],\n        className,\n      )}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) return;\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface InputGroupButtonProps\n  extends Omit<ButtonProps, \"size\"> {\n  size?: InputGroupButtonSize;\n}\n\nexport function InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: InputGroupButtonProps) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(\n        INPUT_GROUP_BUTTON_BASE,\n        inputGroupButtonSizes[size],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupText({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(INPUT_GROUP_TEXT, className)}\n      {...props}\n    />\n  );\n}\n\n// The group, not the control, owns the height, so the control takes neither the\n// kit's `size` nor the native one `Input` gave up for it.\nexport function InputGroupInput({\n  className,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(INPUT_GROUP_INPUT_CONTROL, className)}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(INPUT_GROUP_TEXTAREA_CONTROL, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";AA2BI;AAzBJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,cAAgC;AACzC,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAIA,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACxC,GAAG;AAAA;AAAA,EACN;AAEJ;AAMO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,sBAAsB,KAAK;AAAA,QAC3B;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,YAAK,EAAE,OAAuB,QAAQ,QAAQ,EAAG;AACjD,UAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;AAAA,MAC/D;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAOO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,sBAAsB,IAAI;AAAA,QAC1B;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACxC,GAAG;AAAA;AAAA,EACN;AAEJ;AAIO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAAgD;AAC9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,2BAA2B,SAAS;AAAA,MACjD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACpD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/input-otp.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import {
+  INPUT_OTP_CONTAINER,
+  INPUT_OTP_GROUP,
+  INPUT_OTP_INPUT,
+  INPUT_OTP_SLOT,
+  INPUT_OTP_SLOT_CARET,
+  INPUT_OTP_SLOT_CARET_WRAPPER
+} from "../generated/input-otp.js";
+const InputOTPContext = React.createContext(null);
+function useInputOTP() {
+  const context = React.useContext(InputOTPContext);
+  if (!context) {
+    throw new Error("InputOTP slots must be used within an <InputOTP />");
+  }
+  return context;
+}
+function InputOTP({
+  maxLength,
+  value: valueProp,
+  defaultValue = "",
+  onChange,
+  className,
+  containerClassName,
+  children,
+  disabled,
+  ...props
+}) {
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange
+  });
+  const [focused, setFocused] = React.useState(false);
+  const activeIndex = focused ? Math.min(value.length, maxLength - 1) : -1;
+  return /* @__PURE__ */ jsx(InputOTPContext.Provider, { value: { value, maxLength, activeIndex }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "input-otp",
+      className: cn(INPUT_OTP_CONTAINER, containerClassName),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            inputMode: "numeric",
+            autoComplete: "one-time-code",
+            maxLength,
+            value,
+            disabled,
+            onChange: (e) => setValue(e.target.value.slice(0, maxLength)),
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
+            className: cn(INPUT_OTP_INPUT, className),
+            ...props
+          }
+        )
+      ]
+    }
+  ) });
+}
+function InputOTPGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-otp-group",
+      className: cn(INPUT_OTP_GROUP, className),
+      ...props
+    }
+  );
+}
+function InputOTPSlot({ index, className, ...props }) {
+  const { value, activeIndex } = useInputOTP();
+  const char = value[index];
+  const isActive = activeIndex === index;
+  const hasFakeCaret = isActive && char === void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "input-otp-slot",
+      "data-active": isActive,
+      className: cn(INPUT_OTP_SLOT, className),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: INPUT_OTP_SLOT_CARET_WRAPPER, children: /* @__PURE__ */ jsx("div", { className: INPUT_OTP_SLOT_CARET }) })
+      ]
+    }
+  );
+}
+function InputOTPSeparator({ ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+    }
+  ) });
+}
+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"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport {\n  INPUT_OTP_CONTAINER,\n  INPUT_OTP_GROUP,\n  INPUT_OTP_INPUT,\n  INPUT_OTP_SLOT,\n  INPUT_OTP_SLOT_CARET,\n  INPUT_OTP_SLOT_CARET_WRAPPER,\n} from \"../generated/input-otp\";\n\ntype InputOTPContextValue = {\n  value: string;\n  maxLength: number;\n  activeIndex: number;\n};\n\nconst InputOTPContext = React.createContext<InputOTPContextValue | null>(null);\n\nfunction useInputOTP() {\n  const context = React.useContext(InputOTPContext);\n  if (!context) {\n    throw new Error(\"InputOTP slots must be used within an <InputOTP />\");\n  }\n  return context;\n}\n\nexport interface InputOTPProps\n  extends Omit<React.ComponentProps<\"input\">, \"value\" | \"defaultValue\" | \"onChange\"> {\n  maxLength: number;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  containerClassName?: string;\n  children?: React.ReactNode;\n}\n\nexport function InputOTP({\n  maxLength,\n  value: valueProp,\n  defaultValue = \"\",\n  onChange,\n  className,\n  containerClassName,\n  children,\n  disabled,\n  ...props\n}: InputOTPProps) {\n  const [value, setValue] = useControllableState<string>({\n    value: valueProp,\n    defaultValue,\n    onChange,\n  });\n  const [focused, setFocused] = React.useState(false);\n\n  const activeIndex = focused ? Math.min(value.length, maxLength - 1) : -1;\n\n  return (\n    <InputOTPContext.Provider value={{ value, maxLength, activeIndex }}>\n      <div\n        data-slot=\"input-otp\"\n        className={cn(INPUT_OTP_CONTAINER, containerClassName)}\n      >\n        {children}\n        <input\n          // drag/momentum: n/a — single visually-hidden input tracks the string\n          inputMode=\"numeric\"\n          autoComplete=\"one-time-code\"\n          maxLength={maxLength}\n          value={value}\n          disabled={disabled}\n          onChange={(e) => setValue(e.target.value.slice(0, maxLength))}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          className={cn(INPUT_OTP_INPUT, className)}\n          {...props}\n        />\n      </div>\n    </InputOTPContext.Provider>\n  );\n}\n\nexport function InputOTPGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(INPUT_OTP_GROUP, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface InputOTPSlotProps extends React.ComponentProps<\"div\"> {\n  index: number;\n}\n\nexport function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps) {\n  const { value, activeIndex } = useInputOTP();\n  const char = value[index];\n  const isActive = activeIndex === index;\n  const hasFakeCaret = isActive && char === undefined;\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(INPUT_OTP_SLOT, className)}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className={INPUT_OTP_SLOT_CARET_WRAPPER}>\n          <div className={INPUT_OTP_SLOT_CARET} />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M5 12h14\" />\n      </svg>\n    </div>\n  );\n}\n"],"mappings":";AA8DM,SAKE,KALF;AA5DN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,MAAM,kBAAkB,MAAM,cAA2C,IAAI;AAE7E,SAAS,cAAc;AACrB,QAAM,UAAU,MAAM,WAAW,eAAe;AAChD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;AAYO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,OAAO,QAAQ,IAAI,qBAA6B;AAAA,IACrD,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAElD,QAAM,cAAc,UAAU,KAAK,IAAI,MAAM,QAAQ,YAAY,CAAC,IAAI;AAEtE,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,OAAO,WAAW,YAAY,GAC/D;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,qBAAqB,kBAAkB;AAAA,MAEpD;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,MAAM,MAAM,GAAG,SAAS,CAAC;AAAA,YAC5D,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,QAAQ,MAAM,WAAW,KAAK;AAAA,YAC9B,WAAW,GAAG,iBAAiB,SAAS;AAAA,YACvC,GAAG;AAAA;AAAA,QACN;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAG;AAAA;AAAA,EACN;AAEJ;AAMO,SAAS,aAAa,EAAE,OAAO,WAAW,GAAG,MAAM,GAAsB;AAC9E,QAAM,EAAE,OAAO,YAAY,IAAI,YAAY;AAC3C,QAAM,OAAO,MAAM,KAAK;AACxB,QAAM,WAAW,gBAAgB;AACjC,QAAM,eAAe,YAAY,SAAS;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW,GAAG,gBAAgB,SAAS;AAAA,MACtC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,gBACC,oBAAC,SAAI,WAAW,8BACd,8BAAC,SAAI,WAAW,sBAAsB,GACxC;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEO,SAAS,kBAAkB,EAAE,GAAG,MAAM,GAAgC;AAC3E,SACE,oBAAC,SAAI,aAAU,uBAAsB,MAAK,aAAa,GAAG,OACxD;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAY;AAAA,MAEZ,8BAAC,UAAK,GAAE,YAAW;AAAA;AAAA,EACrB,GACF;AAEJ;","names":[]}

package/dist/components/input.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { INPUT_BASE, inputSizeClasses } from "../generated/input.js";
+import { useFieldControlId } from "./field-context.js";
+const Input = React.forwardRef(
+  function Input2({ className, type, id, size = "md", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type,
+        id: useFieldControlId(id),
+        "data-slot": "input",
+        "data-size": size,
+        className: cn(INPUT_BASE, inputSizeClasses[size], className),
+        ...props
+      }
+    );
+  }
+);
+export {
+  Input
+};
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/input.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { INPUT_BASE, inputSizeClasses, type InputSize } from \"../generated/input\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport type { InputSize };\n\n// The native `size` attribute (a width in characters) gives way to the kit's\n// scale, as it does on `NativeSelect`; a width belongs in `className`.\nexport interface InputProps extends Omit<React.ComponentPropsWithoutRef<\"input\">, \"size\"> {\n  size?: InputSize;\n}\n\n// `forwardRef` rather than a `ref` prop so the handle also reaches the element\n// under React 18, where function components drop `ref`.\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  function Input({ className, type, id, size = \"md\", ...props }, ref) {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        id={useFieldControlId(id)}\n        data-slot=\"input\"\n        data-size={size}\n        className={cn(INPUT_BASE, inputSizeClasses[size], className)}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":";AAoBM;AAlBN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwC;AAC7D,SAAS,yBAAyB;AAY3B,MAAM,QAAQ,MAAM;AAAA,EACzB,SAASA,OAAM,EAAE,WAAW,MAAM,IAAI,OAAO,MAAM,GAAG,MAAM,GAAG,KAAK;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,IAAI,kBAAkB,EAAE;AAAA,QACxB,aAAU;AAAA,QACV,aAAW;AAAA,QACX,WAAW,GAAG,YAAY,iBAAiB,IAAI,GAAG,SAAS;AAAA,QAC1D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["Input"]}

package/dist/components/item.js

@@ -0,0 +1,167 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Slot } from "../primitives/slot.js";
+import { Separator } from "./separator.js";
+import {
+  ITEM_ACTIONS,
+  ITEM_BASE,
+  ITEM_CONTENT,
+  ITEM_DESCRIPTION,
+  ITEM_FOOTER,
+  ITEM_GROUP,
+  ITEM_HEADER,
+  ITEM_MEDIA_BASE,
+  ITEM_SEPARATOR,
+  ITEM_TITLE,
+  itemMediaVariants,
+  itemSizes,
+  itemVariants
+} from "../generated/item.js";
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "list",
+      "data-slot": "item-group",
+      className: cn(ITEM_GROUP, className),
+      ...props
+    }
+  );
+}
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: cn(ITEM_SEPARATOR, className),
+      ...props
+    }
+  );
+}
+function Item({
+  className,
+  variant = "bare",
+  size = "md",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(ITEM_BASE, itemVariants[variant], itemSizes[size], className),
+      ...props
+    }
+  );
+}
+function ItemMedia({
+  className,
+  variant = "bare",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(ITEM_MEDIA_BASE, itemMediaVariants[variant], className),
+      ...props
+    }
+  );
+}
+function ItemContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: cn(ITEM_CONTENT, className),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn(ITEM_TITLE, className),
+      ...props
+    }
+  );
+}
+function ItemDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(ITEM_DESCRIPTION, className),
+      ...props
+    }
+  );
+}
+function ItemActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: cn(ITEM_ACTIONS, className),
+      ...props
+    }
+  );
+}
+function ItemHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-header",
+      className: cn(ITEM_HEADER, className),
+      ...props
+    }
+  );
+}
+function ItemFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: cn(ITEM_FOOTER, className),
+      ...props
+    }
+  );
+}
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle
+};
+//# sourceMappingURL=item.js.map

package/dist/components/item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/item.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Slot } from \"../primitives/slot\";\nimport { Separator } from \"./separator\";\nimport {\n  ITEM_ACTIONS,\n  ITEM_BASE,\n  ITEM_CONTENT,\n  ITEM_DESCRIPTION,\n  ITEM_FOOTER,\n  ITEM_GROUP,\n  ITEM_HEADER,\n  ITEM_MEDIA_BASE,\n  ITEM_SEPARATOR,\n  ITEM_TITLE,\n  itemMediaVariants,\n  itemSizes,\n  itemVariants,\n  type ItemMediaVariant,\n  type ItemSize,\n  type ItemVariant,\n} from \"../generated/item\";\n\nexport type { ItemMediaVariant, ItemSize, ItemVariant };\n\nexport function ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(ITEM_GROUP, className)}\n      {...props}\n    />\n  );\n}\n\nexport function 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(ITEM_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ItemProps extends React.ComponentProps<\"div\"> {\n  variant?: ItemVariant;\n  size?: ItemSize;\n  asChild?: boolean;\n}\n\nexport function Item({\n  className,\n  variant = \"bare\",\n  size = \"md\",\n  asChild = false,\n  ...props\n}: ItemProps) {\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(ITEM_BASE, itemVariants[variant], itemSizes[size], className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface ItemMediaProps extends React.ComponentProps<\"div\"> {\n  variant?: ItemMediaVariant;\n}\n\nexport function ItemMedia({\n  className,\n  variant = \"bare\",\n  ...props\n}: ItemMediaProps) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(ITEM_MEDIA_BASE, itemMediaVariants[variant], className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(ITEM_CONTENT, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(ITEM_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(ITEM_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(ITEM_ACTIONS, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(ITEM_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(ITEM_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}