@godxjp/ui 31.31.7 → 32.0.0

package/dist/components/data-entry/index.js

@@ -16,8 +16,6 @@ import {
 import { Checkbox } from "./checkbox.js";
 import { CheckboxGroup } from "./checkbox-group.js";
 import { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
-import { ChatComposer } from "./chat-composer.js";
-import { ChatSuggestion } from "./chat-suggestion.js";
 import { Textarea } from "./textarea.js";
 import { Form, useFormLayout } from "./form.js";
 import { FormField } from "./form-field.js";
@@ -53,25 +51,22 @@ import {
   CommandList
 } from "./command.js";
 import { CommandPalette } from "./command-palette.js";
-import { EmojiPicker } from "./emoji-picker.js";
-import { SortableList } from "./sortable-list.js";
 import { PasswordInput } from "./password-input.js";
 import { PasswordStrength, usePasswordStrength } from "./password-strength.js";
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./input-otp.js";
 import { Rating } from "./rating.js";
-import { TagInput } from "./tag-input.js";
 import { Segmented } from "./segmented.js";
 import { BranchScopePicker } from "./branch-scope-picker.js";
 import { TimeRangePicker } from "./time-range-picker.js";
-import { Attachments } from "./attachments.js";
 import { DayButton, dateMatchModifiers } from "./calendar.js";
+import { pickFieldA11y, omitFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
+import { controlSurfaceAttrs, resolveAriaInvalid } from "./control-surface.js";
+import { isImeComposing } from "../../lib/ime.js";
+import { readDroppedFiles } from "./upload-files.js";
 export {
-  Attachments,
   BranchScopePicker,
   Calendar,
   Cascader,
-  ChatComposer,
-  ChatSuggestion,
   Checkbox,
   CheckboxGroup,
   ColorPicker,
@@ -84,7 +79,6 @@ export {
   CommandPalette,
   DatePicker,
   DayButton,
-  EmojiPicker,
   Field,
   Form,
   FormErrors,
@@ -121,9 +115,7 @@ export {
   SelectTrigger,
   SelectValue,
   Slider,
-  SortableList,
   Switch,
-  TagInput,
   Textarea,
   TimePicker,
   TimeRangePicker,
@@ -136,8 +128,15 @@ export {
   Upload,
   UploadCropDialog,
   collectUploadCommitActions,
+  controlSurfaceAttrs,
   createUploadItem,
   dateMatchModifiers,
+  isImeComposing,
+  omitFieldA11y,
+  pickFieldA11y,
+  readDroppedFiles,
+  resolveAriaInvalid,
+  useFieldIdentity,
   useFormLayout,
   usePasswordStrength,
   useUploadDraft

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

@@ -1,2 +1,48 @@
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "../ui/input-otp.js";
-export type { InputOTPAlignProp, InputOTPMaskProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, InputOTPProp, InputOTPProps, } from "../ui/input-otp.js";
+import * as React from "react";
+/**
+ * InputOTP — the code-challenge field.
+ *
+ * `align` positions the whole row (groups + separators) on the main axis: `start` (default,
+ * unchanged), `center` — the canonical auth challenge — or `end`. The attribute lands on the
+ * 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<React.InputHTMLAttributes<HTMLInputElement>, "children" | "defaultValue" | "onChange" | "size" | "style" | "value"> & {
+    maxLength: number;
+    value?: string;
+    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?: import("../../props/index.js").ClassNameProp;
+    pushPasswordManagerStrategy?: "increase-width" | "none";
+    noScriptCSSFallback?: string | null;
+    nonce?: string;
+    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>>;
+export declare const InputOTPSlot: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    index: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const InputOTPSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-entry/input-otp.js

@@ -1,5 +1,98 @@
 "use client";
-import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "../ui/input-otp.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { controlSurfaceAttrs, resolveAriaInvalid } from "./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
+  };
+  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",
+    {
+      ref,
+      "data-slot": "input-otp-group",
+      "data-appearance": appearance,
+      className: cn("ui-otp-group", className),
+      ...props
+    }
+  )
+);
+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: [
+        painted,
+        slot.hasFakeCaret ? /* @__PURE__ */ jsx("div", { className: "ui-otp-caret-wrapper", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "ui-otp-caret" }) }) : null
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, { className: "ui-otp-separator-icon", "aria-hidden": "true" }) }));
+InputOTPSeparator.displayName = "InputOTPSeparator";
 export {
   InputOTP,
   InputOTPGroup,

package/dist/components/data-entry/number-input.d.ts

@@ -4,7 +4,7 @@ export type { NumberInputProp, NumberInputProp as NumberInputProps, } from "../.
  * NumberInput — WAI-ARIA spinbutton: a localized numeric `<Input>` with increment/decrement steps.
  * Composes the real `Input` primitive (no raw `<input>`) plus two icon `Button`s.
  */
-export declare const NumberInput: React.ForwardRefExoticComponent<import("../../lib/field-a11y.js").FieldA11yProps & {
+export declare const NumberInput: React.ForwardRefExoticComponent<import(".").FieldA11yProps & {
     value?: import("../../props/index.js").ValueProp<number | null>;
     defaultValue?: import("../../props/index.js").DefaultValueProp<number | null>;
     onValueChange?: import("../../props/index.js").OnValueChangeProp<number | null>;

package/dist/components/data-entry/password-input.d.ts

@@ -1,2 +1,38 @@
-export { PasswordInput } from "../ui/password-input.js";
-export type { PasswordInputProps, PasswordVisibilityToggleProp } from "../ui/password-input.js";
+import * as React from "react";
+import { Input } from "./input.js";
+/**
+ * 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?: "xs" | "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>>;

package/dist/components/data-entry/password-input.js

@@ -1,5 +1,60 @@
 "use client";
-import { PasswordInput } from "../ui/password-input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Input } from "./input.js";
+import { isDevelopment } from "../../lib/dev.js";
+const PasswordInput = React.forwardRef(
+  ({ className, visibilityToggle = true, iconRender, suffix, trailingIcon, allowClear, ...props }, ref) => {
+    const { t } = useTranslation();
+    const controlledVisible = typeof visibilityToggle === "object" ? visibilityToggle.visible : void 0;
+    const onVisibleChange = typeof visibilityToggle === "object" ? visibilityToggle.onVisibleChange : void 0;
+    const showToggle = visibilityToggle !== false;
+    const [internalVisible, setInternalVisible] = React.useState(false);
+    const isVisibleControlled = controlledVisible !== void 0;
+    const visible = showToggle ? isVisibleControlled ? controlledVisible : internalVisible : false;
+    const setVisible = (next) => {
+      if (!isVisibleControlled) setInternalVisible(next);
+      onVisibleChange?.(next);
+    };
+    const toggleOwnsTrailing = showToggle;
+    if (toggleOwnsTrailing && isDevelopment() && (suffix != null || trailingIcon != null || allowClear)) {
+      console.warn(
+        "[godxjp-ui] PasswordInput: the reveal toggle owns the trailing slot, so `suffix` / `trailingIcon` / `allowClear` are ignored. Use `leadingIcon` (or `prefix`), or pass `visibilityToggle={false}` to hand the slot back."
+      );
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "ui-password-input", "data-slot": "password-input", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref,
+          type: visible ? "text" : "password",
+          className: cn(showToggle && "ui-password-input-field", className),
+          suffix: toggleOwnsTrailing ? void 0 : suffix,
+          trailingIcon: toggleOwnsTrailing ? void 0 : trailingIcon,
+          allowClear: toggleOwnsTrailing ? false : allowClear,
+          ...props
+        }
+      ),
+      showToggle ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ui-password-input-toggle",
+          disabled: props.disabled,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => setVisible(!visible),
+          "aria-label": visible ? t("ui.passwordInput.hide") : t("ui.passwordInput.show"),
+          "aria-pressed": visible,
+          children: iconRender ? iconRender(visible) : visible ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
+        }
+      ) : null
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
 export {
   PasswordInput
 };

package/dist/components/data-entry/rating.d.ts

@@ -1,2 +1,38 @@
-export { Rating } from "../ui/rating.js";
-export type { RatingProps } from "../ui/rating.js";
+import * as React from "react";
+export type RatingProps = {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** Number of symbols. This library's older name for antd's `count`; both are accepted. */
+    max?: number;
+    /** antd `count` — number of symbols. Default 5. */
+    count?: number;
+    /**
+     * antd `allowHalf` — a symbol can be half-filled, so the scale is 0.5 … count in steps of 0.5.
+     * The keyboard steps by a half too, and each symbol becomes TWO hit areas (leading / trailing).
+     */
+    allowHalf?: boolean;
+    /**
+     * antd `allowClear` — choosing the value that is already chosen clears it back to 0. On by
+     * default in antd; off here, because a rating inside a form is usually required and a silent
+     * reset on a second click reads as a lost answer.
+     */
+    allowClear?: boolean;
+    /**
+     * antd `character` — what a symbol IS. A node for every symbol, or a function of the 1-based
+     * index for a scale whose symbols differ (A/B/C, 松竹梅, a heart for the top step).
+     */
+    character?: React.ReactNode | ((index: number) => React.ReactNode);
+    /**
+     * antd `tooltips` — a label per step, in order. It is folded into each symbol's ACCESSIBLE NAME
+     * rather than shown only on hover: a `title` attribute is invisible to a keyboard and to touch,
+     * and the whole point of the prop is to say what "3 of 5" means.
+     */
+    tooltips?: readonly string[];
+    readOnly?: boolean;
+    disabled?: boolean;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-entry/rating.js

@@ -1,5 +1,131 @@
 "use client";
-import { Rating } from "../ui/rating.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Star } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+const Rating = React.forwardRef(
+  ({
+    value,
+    defaultValue = 0,
+    onValueChange,
+    max,
+    count,
+    allowHalf = false,
+    allowClear = false,
+    character,
+    tooltips,
+    readOnly,
+    disabled,
+    name,
+    className,
+    ...rest
+  }, ref) => {
+    const { t } = useTranslation();
+    const symbols = count ?? max ?? 5;
+    const [internal, setInternal] = React.useState(defaultValue);
+    const current = value ?? internal;
+    const [hover, setHover] = React.useState(null);
+    const display = hover ?? current;
+    const interactive = !readOnly && !disabled;
+    const stepSize = allowHalf ? 0.5 : 1;
+    const select = (next) => {
+      if (!interactive) return;
+      const resolved = allowClear && next === current ? 0 : next;
+      if (value === void 0) setInternal(resolved);
+      onValueChange?.(resolved);
+    };
+    const focusableStar = current > 0 ? Math.ceil(current) : 1;
+    const onKeyDown = (e, star) => {
+      if (!interactive) return;
+      let next;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = Math.min(symbols, star + stepSize);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = Math.max(stepSize, star - stepSize);
+          break;
+        case "Home":
+          next = stepSize;
+          break;
+        case "End":
+          next = symbols;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      if (value === void 0) setInternal(next);
+      onValueChange?.(next);
+    };
+    const stepLabel = (star) => {
+      const tooltip = tooltips?.[star - 1];
+      const base = t("ui.rating.starLabel", { star, max: symbols });
+      return tooltip ? `${base}, ${tooltip}` : base;
+    };
+    const glyph = (star) => typeof character === "function" ? character(star) : character ?? /* @__PURE__ */ jsx(Star, { "aria-hidden": "true" });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "data-slot": "rating",
+        "data-allow-half": allowHalf ? "true" : void 0,
+        className: cn("ui-rating", className),
+        "aria-label": rest["aria-label"] ?? t("ui.rating.ariaLabel"),
+        children: [
+          Array.from({ length: symbols }, (_, i) => i + 1).map((star) => {
+            const symbol = /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": current === star,
+                "aria-label": stepLabel(star),
+                disabled: disabled || readOnly,
+                tabIndex: interactive && star === focusableStar ? 0 : -1,
+                className: cn(
+                  "ui-rating-star",
+                  star <= display && "ui-rating-star-filled",
+                  allowHalf && star - 0.5 === display && "ui-rating-star-half-filled"
+                ),
+                onMouseEnter: () => interactive && setHover(star),
+                onMouseLeave: () => setHover(null),
+                onClick: () => select(star),
+                onKeyDown: (e) => onKeyDown(e, star),
+                children: glyph(star)
+              },
+              star
+            );
+            if (!allowHalf) return symbol;
+            return /* @__PURE__ */ jsxs("span", { "data-slot": "rating-symbol", className: "ui-rating-symbol", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-hidden": "true",
+                  disabled: disabled || readOnly,
+                  "data-slot": "rating-half",
+                  className: "ui-rating-star-half",
+                  onMouseEnter: () => interactive && setHover(star - 0.5),
+                  onMouseLeave: () => setHover(null),
+                  onClick: () => select(star - 0.5)
+                }
+              ),
+              symbol
+            ] }, star);
+          }),
+          name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current }) : null
+        ]
+      }
+    );
+  }
+);
+Rating.displayName = "Rating";
 export {
   Rating
 };

package/dist/components/data-entry/segmented.d.ts

@@ -1,2 +1,94 @@
-export { Segmented } from "../ui/segmented.js";
-export type { SegmentedOption, SegmentedProp, SegmentedProps } from "../ui/segmented.js";
+import * as React from "react";
+/** Counter pill fields on {@link SegmentedOption} — same vocabulary as `Button` / `Toggle`. */
+type SegmentedCountFields = {
+    /**
+     * Optional count rendered as a borderless pill after the label — do not nest `Badge` in `label`
+     * for this (gh#602): `Badge` `secondary` is `--muted`, which matches the Segmented track.
+     */
+    count?: number | string;
+    /** Cap for numeric `count` — beyond it the pill shows `{overflowCount}+` (e.g. `99+`). */
+    overflowCount?: number;
+    /** Render the pill when numeric `count` is 0. Default `true`. */
+    showZero?: boolean;
+    /**
+     * Localized description of what the count means, folded into the accessible name
+     * (`全件, 54 件` when supplied).
+     */
+    countLabel?: string;
+};
+/** One choice in a {@link Segmented}. */
+export type SegmentedOption = SegmentedCountFields & {
+    /** Wire value — what `onValueChange` reports and what a form submits. */
+    value: string;
+    /** Visible label. It is also the item's accessible name, so it is required. */
+    label: React.ReactNode;
+    /** Optional leading glyph, rendered `aria-hidden` beside the label. */
+    icon?: React.ReactNode;
+    /** Disable this one choice; the rest of the group stays operable. */
+    disabled?: boolean;
+};
+export type SegmentedProp = {
+    /** The closed set of choices, in reading order. */
+    options: readonly SegmentedOption[];
+    /** Controlled selection. */
+    value?: string;
+    /** Uncontrolled initial selection. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * antd `block` — stretch the bar to its container and share the width EQUALLY between the
+     * choices, so the selected pill does not resize as the label changes length.
+     */
+    block?: boolean;
+    /** antd `vertical` — stack the choices in a column. Arrow keys follow the axis. */
+    vertical?: boolean;
+    /**
+     * Control height tier: `md` (default), `xs`, `sm` or `lg` — the same `--control-height-*` tier
+     * every other control reads. `xs` is the fourth step (gh#719, the one Toggle/ToggleGroup took in
+     * gh#716): a 24px-dense row can carry a real segmented control instead of a hand-rolled row of
+     * Buttons.
+     */
+    size?: "xs" | "sm" | "md" | "lg";
+    /** Disable the whole group. */
+    disabled?: boolean;
+    /** Form field name — submits the selected value with the form. */
+    name?: string;
+    id?: string;
+    className?: string;
+    /** Accessible name of the group. Required unless a visible label points at `id`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+export type SegmentedProps = SegmentedProp;
+/**
+ * Segmented — one-of-N from a small, closed, always-visible set. The established enterprise
+ * `Segmented` control (docs/DESIGN-AUTHORITY.md) drawn on react-aria-components' RadioGroup,
+ * which is this repo's authority for behaviour primitives.
+ *
+ * WHY NOT `ToggleGroup`. A ToggleGroup is a row of PRESSED buttons: `aria-pressed`, independently
+ * togglable, and — even at `type="single"` — deselectable, so "no theme at all" is a state the
+ * markup permits. A segmented control is a radio group: exactly one member is always chosen, the
+ * arrow keys move between members rather than Tab, and a screen reader must say "Light, radio
+ * button, 1 of 3, selected" and not "Light, toggle button, pressed". WAI-ARIA APG owns that
+ * distinction and it is not a skin.
+ *
+ * The primitive gives roving tabindex, arrow-key traversal (RTL-aware), the radiogroup/radio roles
+ * and the hidden input a native form submit needs. This file adds that geometry and nothing
+ * else — the focus mark comes from `ui-focus-ring`, the ONE source in styles/focus-ring.css.
+ *
+ * "RTL-aware" IS true now, and it used not to be. On Radix it was: Radix read `dir` from its own
+ * `DirectionProvider`, this repo rendered none, and it never looked at `<html dir>` — measured in
+ * jsdom, with `document.documentElement.dir = "rtl"` ArrowLeft on the first option went to the
+ * LAST one, i.e. straight LTR traversal under a reversed layout, so the key that moves your eye
+ * left moved the selection right. The repair then was to hand Radix the ambient React Aria
+ * direction explicitly.
+ *
+ * On `react-aria-components` that hand-off is gone, because the primitive reads the SAME
+ * `useLocale()` itself. One source of truth, fed by `AppProvider`, nothing threaded through the
+ * call site — and `src/__tests__/rtl-arrow-direction.test.tsx` holds it: under an `ar-AE` locale
+ * ArrowLeft advances and ArrowRight retreats, and `<html dir="rtl">` alone still does not.
+ * `orientation` decides WHICH pair of arrows moves the focus; the locale decides which END of the
+ * row each of them means.
+ */
+export declare const Segmented: React.ForwardRefExoticComponent<SegmentedProp & React.RefAttributes<HTMLDivElement>>;
+export {};