@godxjp/ui 20.0.0 → 20.2.0

package/dist/components/navigation/tabs.d.ts

@@ -1,42 +1,14 @@
 import * as React from "react";
-export type TabsItem = {
-    value: string;
-    label: React.ReactNode;
-    content: React.ReactNode;
-    disabled?: boolean;
-};
+import type { TabItemProp, TabsProp } from "../../props/components/navigation.prop.js";
+export type { TabItemProp, TabsProp, TabsVariantProp, TabsPlacementProp, TabsExtraProp, } from "../../props/components/navigation.prop.js";
 export type TabsOrientation = "vertical" | "horizontal";
-/**
- * The repo's Radix-era vocabulary, kept VERBATIM. React Aria spells the same four things
- * `selectedKey` / `defaultSelectedKey` / `onSelectionChange` / `keyboardActivation`; the
- * translation lives inside this file so no consumer ever has to learn RAC's names.
- *
- * `activationMode` is the one that MUST NOT be dropped. `.ai/rules/settings.md` in the consumer
- * requires `orientation="vertical"` + `activationMode="manual"` for the settings rail, because
- * every item there is a URL — automatic activation would load four pages while the reader is only
- * arrowing past them.
- */
-export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> & {
-    /** Controlled selected tab — RAC `selectedKey`. */
-    value?: string;
-    /** Uncontrolled initial selection — RAC `defaultSelectedKey`. */
-    defaultValue?: string;
-    /** Fired with the NEW selected value — RAC `onSelectionChange`. */
-    onValueChange?: (value: string) => void;
+export type TabsItem = TabItemProp;
+export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> & TabsProp & {
     orientation?: TabsOrientation;
-    /**
-     * DOM attribute only. Under Radix this also steered RTL arrow keys; React Aria reads the
-     * direction from the locale, so an RTL app must set it through `I18nProvider`.
-     */
     dir?: "ltr" | "rtl";
-    /** `"manual"` = arrow keys move focus without selecting — RAC `keyboardActivation`. */
     activationMode?: "manual" | "automatic";
-    items?: TabsItem[];
-    variant?: "default" | "line" | "card";
-    listClassName?: string;
-    contentClassName?: string;
 };
-export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, listClassName, contentClassName, children, ...props }: TabsProps): React.JSX.Element;
+export declare function Tabs({ className, orientation, items, value, defaultValue, onValueChange, activationMode, dir, variant, tabPlacement, size, centered, extra, destroyOnHidden, onEdit, addIcon, hideAdd, listClassName, contentClassName, children, ...props }: TabsProps): React.JSX.Element;
 export declare const TabsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     variant?: "default" | "line";
     /**

package/dist/components/navigation/tabs.js

@@ -7,6 +7,8 @@ import {
   TabPanel as AriaTabPanel,
   Tabs as AriaTabs
 } from "react-aria-components";
+import { Plus, X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { useKeepActiveTabVisible } from "./tabs-scroll.js";
 const TabsFrameContext = React.createContext({
@@ -31,9 +33,27 @@ function withDomProps(element, slot, raw, domProps, own) {
     ...own
   });
 }
+function resolveTabsExtra(extra) {
+  if (extra === void 0 || extra === null || extra === false) return {};
+  const isSlotMap = typeof extra === "object" && !React.isValidElement(extra) && !Array.isArray(extra) && ("start" in extra || "end" in extra);
+  if (isSlotMap) return extra;
+  return { end: extra };
+}
+function resolveTabsAxis(tabPlacement, orientation) {
+  if (tabPlacement) {
+    return {
+      placement: tabPlacement,
+      orientation: orientation ?? (tabPlacement === "start" || tabPlacement === "end" ? "vertical" : "horizontal")
+    };
+  }
+  return {
+    placement: orientation === "vertical" ? "start" : "top",
+    orientation: orientation ?? "horizontal"
+  };
+}
 function Tabs({
   className,
-  orientation = "horizontal",
+  orientation,
   items,
   value,
   defaultValue,
@@ -41,95 +61,235 @@ function Tabs({
   activationMode,
   dir,
   variant = "default",
+  tabPlacement,
+  size = "md",
+  centered,
+  extra,
+  destroyOnHidden = true,
+  onEdit,
+  addIcon,
+  hideAdd,
   listClassName,
   contentClassName,
   children,
   ...props
 }) {
+  const { t } = useTranslation();
   const resolvedDefault = resolveFallbackTabValue(items, defaultValue);
+  const { placement, orientation: resolvedOrientation } = resolveTabsAxis(
+    tabPlacement,
+    orientation
+  );
   const selectionSuppressed = value === void 0 && items != null && items.length > 0 && resolvedDefault === void 0;
   const frame = React.useMemo(
-    () => ({ orientation, selectionSuppressed }),
-    [orientation, selectionSuppressed]
+    () => ({ orientation: resolvedOrientation, selectionSuppressed }),
+    [resolvedOrientation, selectionSuppressed]
+  );
+  const editable = variant === "editable-card";
+  const [mirroredValue, setMirroredValue] = React.useState(
+    value ?? resolvedDefault
+  );
+  React.useEffect(() => {
+    if (value !== void 0) setMirroredValue(value);
+  }, [value]);
+  const activeValue = value ?? mirroredValue;
+  const handleValueChange = React.useCallback(
+    (next) => {
+      setMirroredValue(next);
+      onValueChange?.(next);
+    },
+    [onValueChange]
   );
+  const { start: extraStart, end: extraEnd } = resolveTabsExtra(extra);
+  const showAdd = editable && !hideAdd && Boolean(onEdit);
+  const needsBar = Boolean(extraStart || extraEnd || showAdd);
+  const card = variant === "card" || variant === "editable-card";
+  const sizeTriggerClassName = cn(
+    size === "sm" && "min-h-[var(--tabs-trigger-height-sm)] px-[var(--tabs-trigger-padding-x-sm)] text-[length:var(--tabs-trigger-font-size-sm)]",
+    size === "md" && "min-h-[var(--tabs-trigger-height-md)] px-[var(--tabs-trigger-padding-x-md)] text-[length:var(--tabs-trigger-font-size-md)]",
+    size === "lg" && "min-h-[var(--tabs-trigger-height-lg)] px-[var(--tabs-trigger-padding-x-lg)] text-[length:var(--tabs-trigger-font-size-lg)]"
+  );
+  const list = items ? /* @__PURE__ */ jsx(
+    TabsList,
+    {
+      "data-slot": "tabs-list",
+      variant: variant === "line" ? "line" : "default",
+      className: cn(
+        // The inset override is an arbitrary value reading the knob (never `p-0`): it must
+        // stay a UTILITY so tailwind-merge still drops the strip's own padding step.
+        //
+        // IT IS SPLIT INTO `px-`/`py-` FOR THE FOCUS RING (gh#376). The strip clips its
+        // block axis (`overflow-y: hidden` beside `overflow-x: auto`), and this variant's
+        // inset is 0px, so a focused trigger had NO block headroom at all — measured in
+        // Chromium, 0px top and bottom, i.e. the entire ring was shaved. The headroom has to
+        // come from layout: `overflow-y: visible` next to `overflow-x: auto` computes back
+        // to `auto` per spec (a second scroll container, not a ring), and Chromium honours
+        // `overflow-clip-margin` only when BOTH axes are `clip`. So the block padding carries
+        // the ring's outer reach and an equal negative block margin hands it straight back —
+        // the ring paints inside the scrollport and the strip's OUTER box is unchanged
+        // (measured: 38px before and after). Both values read the same token the ring is
+        // sized from, so the two can never drift apart.
+        //
+        // The cost, recorded rather than hidden: the rail hairline (`border-b`, drawn at the
+        // border box) now sits the ring's reach below the triggers instead of flush. That is
+        // where a hand-composed <TabsList variant="line"> already put it — its `p-1` gives
+        // the same block inset — so the two construction paths now agree. A service that
+        // wants the active bar parked back on the hairline raises `--tabs-indicator-offset`,
+        // which exists for exactly that.
+        variant === "line" && "my-[calc(-1_*_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] h-auto w-full justify-start border-b px-[var(--tabs-list-line-space-inset)] py-[calc(var(--tabs-list-line-space-inset)_+_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))]",
+        // CARD strip. The list keeps `data-variant="default"` on purpose (a hand-composed
+        // <TabsList> must be unaffected), so the card face is selected from the ROOT — but the
+        // three properties the base list already claims as utilities (`bg-muted`, `p-1`,
+        // `rounded-lg`) have to be replaced with utilities too, or the components layer loses.
+        card && "w-full items-end justify-start gap-[var(--tabs-card-list-space-gap)] rounded-[var(--tabs-card-list-radius)] p-[var(--tabs-card-list-space-inset)] data-[variant=default]:bg-transparent",
+        // CENTERED. Two independent moves, because the strip has two shapes: the pill/card strip
+        // is `w-fit` (auto inline margins centre the BOX) and the line strip is `w-full`
+        // (`justify-content` centres its CONTENT). `safe` keeps the overflow rule the strip
+        // already depends on — plain `center` strands the leading tab outside the scrollport.
+        centered && "mx-auto justify-center-safe",
+        listClassName
+      ),
+      children: items.map((item) => {
+        const removable = editable && Boolean(onEdit) && item.closable !== false && !item.disabled;
+        return /* @__PURE__ */ jsxs(
+          TabsTrigger,
+          {
+            value: item.value,
+            disabled: item.disabled,
+            "aria-keyshortcuts": removable ? "Delete" : void 0,
+            onKeyDown: removable ? (event) => {
+              if (event.key !== "Delete" && event.key !== "Backspace") return;
+              event.preventDefault();
+              onEdit?.(item.value, "remove");
+            } : void 0,
+            className: cn(
+              // Geometry only — the active underline is the token-owned `::after` bar the
+              // line variant already owns (never a second, hand-rolled border-b indicator).
+              // They are arbitrary-value utilities so tailwind-merge keeps dropping the pill
+              // trigger's own radius / padding steps from the base class list.
+              variant === "line" && "rounded-[var(--tabs-trigger-line-radius)] px-[var(--tabs-trigger-line-padding-x)] py-[var(--tabs-trigger-line-padding-y)]",
+              sizeTriggerClassName,
+              // A centred strip must let its triggers SHRINK to their labels first. The base
+              // trigger is `flex-1`, so on a full-width (`line`) strip they already fill every
+              // pixel and `justify-content` has nothing left to centre — measured, the leading and
+              // trailing gaps were both 0px with `centered` on and off.
+              centered && "flex-none",
+              // CARD face: a real boundary on every side, rounded on the leading block edge only.
+              // The ACTIVE face's block-end edge is the SURFACE colour, never `transparent`: the
+              // rail is an inset shadow at the strip's padding-box edge, so a see-through border
+              // would let that 1px of rail run straight across the tab it is joined to.
+              card && "data-[state=active]:border-b-background rounded-[var(--tabs-card-radius)_var(--tabs-card-radius)_0_0] border-[color:hsl(var(--border))] bg-[hsl(var(--tabs-card-background,var(--muted)))]"
+            ),
+            children: [
+              item.icon ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "tabs-trigger-icon",
+                  className: "ui-tabs-trigger-icon",
+                  "aria-hidden": "true",
+                  children: item.icon
+                }
+              ) : null,
+              item.label,
+              removable ? (
+                // A POINTER SHORTCUT, not a control — and that is measured, not stylistic. antd's own
+                // TabNode puts a real <button> beside the role="tab" element; rendered through
+                // vitest-axe that markup fails `aria-required-children`, because a tablist may own
+                // nothing but tabs and axe walks straight through the generic wrapper to find the
+                // button. Putting the button INSIDE the tab is worse still (`nested-interactive`,
+                // plus a <button> in a <button> is invalid HTML). So the × is an aria-hidden span and
+                // the real, announced route is the Delete/Backspace shortcut above — the WAI-ARIA APG
+                // "tabs with deletion" shape.
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "tabs-tab-remove",
+                    className: "ui-tabs-tab-remove",
+                    "aria-hidden": "true",
+                    title: t("navigation.tabs.removeTab"),
+                    onPointerDown: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                    },
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                    },
+                    onClick: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onEdit?.(item.value, "remove");
+                    },
+                    children: item.closeIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-tabs-tab-remove-icon", "aria-hidden": "true" })
+                  }
+                )
+              ) : null
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  ) : null;
   return /* @__PURE__ */ jsx(TabsFrameContext.Provider, { value: frame, children: /* @__PURE__ */ jsx(
     AriaTabs,
     {
-      orientation,
+      "data-slot": "tabs",
+      "data-orientation": resolvedOrientation,
+      "data-variant": variant,
+      "data-placement": placement,
+      "data-size": size,
+      "data-centered": centered ? "true" : void 0,
+      orientation: resolvedOrientation,
       keyboardActivation: activationMode,
       selectedKey: value,
       defaultSelectedKey: value === void 0 ? resolvedDefault : void 0,
-      onSelectionChange: onValueChange ? (key) => {
-        onValueChange(String(key));
-      } : void 0,
+      onSelectionChange: (key) => handleValueChange(String(key)),
       className: cn(
-        // Structure only.
-        // live in src/styles/navigation-layout.css so the gap reads --tabs-root-gap and a service
+        // Structure only. The paint (and the placement flip, which is `order`/`flex-direction`)
+        // lives in src/styles/navigation-layout.css so the gap reads --tabs-root-gap and a service
+        // can retune it.
         "group/tabs flex data-[orientation=horizontal]:flex-col",
+        // PLACEMENT is a flex REVERSAL, never a re-ordered tree: the strip stays first in the DOM
+        // at every placement, so reading order and the APG tablist → tabpanel relationship do not
+        // depend on which edge the bar is painted on. Both classes carry the same modifier as the
+        // base step they replace, so tailwind-merge drops that step instead of stacking two
+        // flex-direction values on one element.
+        placement === "bottom" && "data-[orientation=horizontal]:flex-col-reverse",
+        placement === "end" && "flex-row-reverse",
         className
       ),
       render: (domProps) => withDomProps("div", "tabs", { dir, ...props }, domProps, {
-        "data-orientation": orientation,
-        "data-variant": variant
+        "data-orientation": resolvedOrientation,
+        "data-variant": variant,
+        "data-placement": placement,
+        "data-size": size,
+        "data-centered": centered ? "true" : void 0
       }),
       children: items ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          TabsList,
-          {
-            "data-slot": "tabs-list",
-            variant: variant === "line" ? "line" : "default",
-            className: cn(
-              // The inset override is an arbitrary value reading the knob (never `p-0`): it must
-              // stay a UTILITY so tailwind-merge still drops the strip's own padding step.
-              //
-              // IT IS SPLIT INTO `px-`/`py-` FOR THE FOCUS RING (gh#376). The strip clips its
-              // block axis (`overflow-y: hidden` beside `overflow-x: auto`), and this variant's
-              // inset is 0px, so a focused trigger had NO block headroom at all — measured in
-              // Chromium, 0px top and bottom, i.e. the entire ring was shaved. The headroom has to
-              // come from layout: `overflow-y: visible` next to `overflow-x: auto` computes back
-              // to `auto` per spec (a second scroll container, not a ring), and Chromium honours
-              // `overflow-clip-margin` only when BOTH axes are `clip`. So the block padding carries
-              // the ring's outer reach and an equal negative block margin hands it straight back —
-              // the ring paints inside the scrollport and the strip's OUTER box is unchanged
-              // (measured: 38px before and after). Both values read the same token the ring is
-              // sized from, so the two can never drift apart.
-              //
-              // The cost, recorded rather than hidden: the rail hairline (`border-b`, drawn at the
-              // border box) now sits the ring's reach below the triggers instead of flush. That is
-              // where a hand-composed <TabsList variant="line"> already put it — its `p-1` gives
-              // the same block inset — so the two construction paths now agree. A service that
-              // wants the active bar parked back on the hairline raises `--tabs-indicator-offset`,
-              // which exists for exactly that.
-              variant === "line" && "my-[calc(-1_*_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))] h-auto w-full justify-start border-b px-[var(--tabs-list-line-space-inset)] py-[calc(var(--tabs-list-line-space-inset)_+_var(--tabs-list-focus-ring-space-inset,calc(var(--focus-ring-width)_+_var(--focus-ring-glow-width))))]",
-              variant === "card" && "w-full justify-start",
-              listClassName
-            ),
-            children: items.map((item) => /* @__PURE__ */ jsx(
-              TabsTrigger,
-              {
-                value: item.value,
-                disabled: item.disabled,
-                className: cn(
-                  // Geometry only — the active underline is the token-owned `::after` bar the
-                  // line variant already owns (never a second, hand-rolled border-b indicator).
-                  // utilities so tailwind-merge keeps dropping the pill trigger's own radius /
-                  // padding steps from the base class list.
-                  // `card` adds NOTHING here — its list is forwarded as data-variant="default", so
-                  // the active lift already comes from the base trigger's
-                  // `group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm`.
-                  variant === "line" && "rounded-[var(--tabs-trigger-line-radius)] px-[var(--tabs-trigger-line-padding-x)] py-[var(--tabs-trigger-line-padding-y)]"
-                ),
-                children: item.label
-              },
-              item.value
-            ))
-          }
-        ),
+        needsBar ? /* @__PURE__ */ jsxs("div", { "data-slot": "tabs-bar", className: "ui-tabs-bar", children: [
+          extraStart ? /* @__PURE__ */ jsx("div", { "data-slot": "tabs-extra", "data-side": "start", className: "ui-tabs-extra", children: extraStart }) : null,
+          list,
+          showAdd ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "tabs-add",
+              className: "ui-tabs-add",
+              "aria-label": t("navigation.tabs.addTab"),
+              onClick: (event) => onEdit?.(event, "add"),
+              children: addIcon ?? /* @__PURE__ */ jsx(Plus, { className: "ui-tabs-add-icon", "aria-hidden": "true" })
+            }
+          ) : null,
+          extraEnd ? /* @__PURE__ */ jsx("div", { "data-slot": "tabs-extra", "data-side": "end", className: "ui-tabs-extra", children: extraEnd }) : null
+        ] }) : list,
         items.map((item) => /* @__PURE__ */ jsx(
           TabsContent,
           {
             value: item.value,
             "data-slot": "tabs-panel",
+            forceMount: destroyOnHidden ? void 0 : true,
+            hidden: destroyOnHidden ? void 0 : item.value !== activeValue,
             className: contentClassName,
             children: item.content
           },
@@ -181,7 +341,7 @@ const TabsList = React.forwardRef(
 );
 TabsList.displayName = "TabsList";
 const TabsTrigger = React.forwardRef(
-  ({ className, value, disabled, children, ...props }, ref) => {
+  ({ className, value, disabled, children, onKeyDown, ...props }, ref) => {
     const { orientation, selectionSuppressed } = React.useContext(TabsFrameContext);
     return /* @__PURE__ */ jsx(
       AriaTab,
@@ -219,6 +379,14 @@ const TabsTrigger = React.forwardRef(
           "aria-selected": renderProps.isSelected && !selectionSuppressed,
           "data-orientation": orientation,
           disabled,
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented) {
+              domProps.onKeyDown?.(
+                event
+              );
+            }
+          },
           tabIndex: props.tabIndex ?? domProps.tabIndex
         }),
         children

package/dist/components/ui/hover-card.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import { chain, mergeRefs } from "@react-aria/utils";
 import { Popover as AriaPopover } from "react-aria-components";
@@ -142,9 +143,11 @@ function HoverCardContent({
   ...props
 }) {
   const card = useHoverCard("HoverCardContent");
+  const overlayPortalContainer = useOverlayPortalContainer();
   return /* @__PURE__ */ jsx(
     AriaPopover,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       isOpen: card.open,
       onOpenChange: card.setOpenImmediately,
       isNonModal: true,

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-import type { InputOTPAlignProp } from "../../props/components/data-entry.prop.js";
 /**
  * InputOTP — the code-challenge field.
  *
@@ -8,39 +7,38 @@ import type { InputOTPAlignProp } from "../../props/components/data-entry.prop.j
  * hidden input because `input-otp` owns the container element; `.ui-otp-container` reads it back
  * through `:has()`, exactly as it already does for the invalid and disabled states. A service that
  * wants every code field centred sets `--otp-container-align` once instead.
+ *
+ * `size`/`status`/`variant` ride the same `controlSurfaceAttrs` helper as Input, Select, Cascader
+ * and TagInput, so the code field sits on the shared control-height ladder and paints the same
+ * error edge — they reach the CSS by the same `:has()` route as `align`.
+ *
+ * The VALUE is owned here, not by `input-otp`: `formatter` and `readOnly` have to hold for paste
+ * too, and `input-otp` writes its own internal state inside its paste handler, which a wrapper
+ * that only intercepted `onChange` could not undo.
  */
-export declare const InputOTP: React.ForwardRefExoticComponent<((Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "containerClassName" | "maxLength" | "noScriptCSSFallback" | "nonce" | "onChange" | "onComplete" | "pasteTransformer" | "pushPasswordManagerStrategy" | "textAlign" | "value"> & {
-    value?: string;
-    onChange?: (newValue: string) => unknown;
+export declare const InputOTP: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "defaultValue" | "onChange" | "size" | "value"> & {
     maxLength: number;
-    textAlign?: 'left' | 'center' | 'right';
-    onComplete?: (...args: any[]) => unknown;
-    pushPasswordManagerStrategy?: 'increase-width' | 'none';
-    pasteTransformer?: (pasted: string) => string;
-    containerClassName?: string;
-    noScriptCSSFallback?: string | null;
-    nonce?: string;
-} & {
-    render: (props: import("input-otp").RenderProps) => React.ReactNode;
-    children?: never;
-} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "containerClassName" | "maxLength" | "noScriptCSSFallback" | "nonce" | "onChange" | "onComplete" | "pasteTransformer" | "pushPasswordManagerStrategy" | "textAlign" | "value"> & {
     value?: string;
-    onChange?: (newValue: string) => unknown;
-    maxLength: number;
-    textAlign?: 'left' | 'center' | 'right';
-    onComplete?: (...args: any[]) => unknown;
-    pushPasswordManagerStrategy?: 'increase-width' | 'none';
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    formatter?: (value: string) => string;
+    mask?: import("./input-otp.js").InputOTPMaskProp;
+    align?: import("./input-otp.js").InputOTPAlignProp;
+    size?: import("../../props/index.js").SizeProp;
+    status?: import("../../props/index.js").ControlStatusProp;
+    variant?: import("../../props/index.js").ControlVariantProp;
+    pattern?: string;
     pasteTransformer?: (pasted: string) => string;
-    containerClassName?: string;
+    containerClassName?: import("../../props/index.js").ClassNameProp;
+    pushPasswordManagerStrategy?: "increase-width" | "none";
     noScriptCSSFallback?: string | null;
     nonce?: string;
-} & {
-    render?: never;
-    children: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>, "ref">) & {
-    align?: InputOTPAlignProp;
-}) & React.RefAttributes<HTMLInputElement>>;
-export type { InputOTPAlignProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProp as InputOTPGroupProps, } from "../../props/components/data-entry.prop.js";
+    children?: React.ReactNode;
+    render?: (props: import("input-otp").RenderProps) => React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+export type { InputOTPAlignProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProp as InputOTPGroupProps, InputOTPMaskProp, InputOTPProp, InputOTPProp as InputOTPProps, } from "../../props/components/data-entry.prop.js";
 export declare const InputOTPGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     appearance?: import("./input-otp.js").InputOTPGroupAppearanceProp;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -4,18 +4,58 @@ import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Minus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-const InputOTP = React.forwardRef(({ className, containerClassName, align, ...props }, ref) => /* @__PURE__ */ jsx(
-  OTPInput,
-  {
+import { controlSurfaceAttrs, resolveAriaInvalid } from "../data-entry/control-surface.js";
+const DEFAULT_MASK_CHAR = "\u2022";
+const InputOTPMaskContext = React.createContext(null);
+const InputOTP = React.forwardRef(function InputOTP2({
+  className,
+  containerClassName,
+  align,
+  mask,
+  formatter,
+  size,
+  status,
+  variant,
+  value,
+  defaultValue,
+  onChange,
+  onValueChange,
+  readOnly,
+  "aria-invalid": ariaInvalid,
+  children,
+  render,
+  ...props
+}, ref) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? "");
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : uncontrolled;
+  const handleChange = (next) => {
+    if (readOnly) return;
+    const formatted = formatter ? formatter(next) : next;
+    if (!isControlled) setUncontrolled(formatted);
+    onValueChange?.(formatted);
+    if (onChange !== onValueChange) onChange?.(formatted);
+  };
+  const maskChar = mask === true ? DEFAULT_MASK_CHAR : typeof mask === "string" && mask ? mask.charAt(0) : null;
+  const shared = {
     ref,
     "data-slot": "input-otp",
+    // INERT DEFAULT: `start` emits no attribute, so an existing field keeps its exact DOM.
     "data-align": align && align !== "start" ? align : void 0,
+    ...controlSurfaceAttrs({ size, status, variant }),
+    "aria-invalid": resolveAriaInvalid(ariaInvalid, status),
+    // Native `readonly` already conveys the state, but the library's readOnly contract names
+    // `aria-readonly` explicitly and half the controls did not honour it.
+    "aria-readonly": readOnly ? true : void 0,
+    readOnly,
+    value: current,
+    onChange: handleChange,
     containerClassName: cn("ui-otp-container", containerClassName),
     className: cn("ui-otp-input", className),
     ...props
-  }
-));
-InputOTP.displayName = "InputOTP";
+  };
+  return /* @__PURE__ */ jsx(InputOTPMaskContext.Provider, { value: maskChar, children: render ? /* @__PURE__ */ jsx(OTPInput, { ...shared, render }) : /* @__PURE__ */ jsx(OTPInput, { ...shared, children }) });
+});
 const InputOTPGroup = React.forwardRef(
   ({ appearance = "slots", className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -31,17 +71,20 @@ const InputOTPGroup = React.forwardRef(
 InputOTPGroup.displayName = "InputOTPGroup";
 const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
   const context = React.useContext(OTPInputContext);
+  const maskChar = React.useContext(InputOTPMaskContext);
   const slot = context.slots[index] ?? { char: null, hasFakeCaret: false, isActive: false };
+  const painted = slot.char === null ? null : maskChar ?? slot.char;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       "data-slot": "input-otp-slot",
       "data-active": slot.isActive || void 0,
+      "data-masked": maskChar && slot.char !== null ? "" : void 0,
       className: cn("ui-otp-slot", className),
       ...props,
       children: [
-        slot.char,
+        painted,
         slot.hasFakeCaret ? /* @__PURE__ */ jsx("div", { className: "ui-otp-caret-wrapper", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "ui-otp-caret" }) }) : null
       ]
     }

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

@@ -1,4 +1,38 @@
 import * as React from "react";
 import { Input } from "../data-entry/input.js";
-export type PasswordInputProps = Omit<React.ComponentPropsWithoutRef<typeof Input>, "type">;
-export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * antd `Input.Password.visibilityToggle`. `false` removes the eye entirely — a kiosk, a shared
+ * screen, or a security policy that forbids ever revealing a secret has no other way to say so.
+ * The object form is the controlled triad for the reveal state: `visible` wins when provided, and
+ * `onVisibleChange` fires on both the controlled and the uncontrolled path.
+ */
+export type PasswordVisibilityToggleProp = boolean | {
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+};
+export type PasswordInputProps = Omit<React.ComponentPropsWithoutRef<typeof Input>, "type"> & {
+    /** antd `visibilityToggle` — see {@link PasswordVisibilityToggleProp}. Default `true`. */
+    visibilityToggle?: PasswordVisibilityToggleProp;
+    /** antd `iconRender` — replace the eye glyph. Receives the CURRENT visibility. */
+    iconRender?: (visible: boolean) => React.ReactNode;
+};
+export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "size"> & {
+    onValueChange?: (value: string) => void;
+    size?: "sm" | "md" | "lg";
+    status?: import("../../props/index.js").ControlStatusProp;
+    variant?: import("../../props/index.js").ControlVariantProp;
+    allowClear?: import("../../props/index.js").AllowClearProp;
+    onClear?: () => void;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    count?: import("../../props/components/data-entry.prop.js").ControlCountProp;
+} & React.RefAttributes<HTMLInputElement>, "ref">, "type"> & {
+    /** antd `visibilityToggle` — see {@link PasswordVisibilityToggleProp}. Default `true`. */
+    visibilityToggle?: PasswordVisibilityToggleProp;
+    /** antd `iconRender` — replace the eye glyph. Receives the CURRENT visibility. */
+    iconRender?: (visible: boolean) => React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;