@godxjp/ui 31.31.8 → 32.0.0

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

@@ -1,101 +0,0 @@
-"use client";
-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 "../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
-  };
-  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,
-  InputOTPSeparator,
-  InputOTPSlot
-};

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

@@ -1,38 +0,0 @@
-import * as React from "react";
-import { Input } from "../data-entry/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/ui/password-input.js

@@ -1,60 +0,0 @@
-"use client";
-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 "../data-entry/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/ui/rating.d.ts

@@ -1,38 +0,0 @@
-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/ui/rating.js

@@ -1,131 +0,0 @@
-"use client";
-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/ui/segmented.d.ts

@@ -1,94 +0,0 @@
-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 {};

package/dist/components/ui/segmented.js

@@ -1,108 +0,0 @@
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from "react-aria-components";
-import { withOwnHitTarget } from "../data-entry/choice-hit-target.js";
-import { cn } from "../../lib/utils.js";
-import { useTranslation } from "../../i18n/use-translation.js";
-import { numberFormat } from "../../lib/intl-cache.js";
-function SegmentedCountPill({
-  count,
-  overflowCount = 99,
-  showZero = true,
-  countLabel
-}) {
-  const { locale } = useTranslation();
-  const visible = count != null && count !== "" && (typeof count !== "number" || count !== 0 || showZero);
-  const formatted = React.useMemo(() => {
-    if (count == null || count === "") return "";
-    if (typeof count === "string") return count;
-    const format = numberFormat(locale);
-    return count > overflowCount ? `${format.format(overflowCount)}+` : format.format(count);
-  }, [count, locale, overflowCount]);
-  if (!visible) return null;
-  const spoken = countLabel ? `${formatted} ${countLabel}` : formatted;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { "data-slot": "segmented-count", className: "ui-segmented-count", "aria-hidden": "true", children: formatted }),
-    /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${spoken}` })
-  ] });
-}
-const Segmented = React.forwardRef(function Segmented2({
-  options,
-  value,
-  defaultValue,
-  onValueChange,
-  disabled,
-  block = false,
-  vertical = false,
-  size,
-  name,
-  id,
-  className,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsx(
-    AriaRadioGroup,
-    {
-      ref,
-      id,
-      "data-slot": "segmented",
-      "data-block": block ? "true" : void 0,
-      "data-size": size,
-      className: cn("ui-segmented", className),
-      orientation: vertical ? "vertical" : "horizontal",
-      value,
-      defaultValue,
-      onChange: onValueChange,
-      isDisabled: disabled,
-      name,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
-      ...props,
-      children: options.map((option) => /* @__PURE__ */ jsxs(
-        AriaRadio,
-        {
-          value: option.value,
-          isDisabled: option.disabled,
-          "data-slot": "segmented-item",
-          className: "ui-segmented-item ui-focus-ring",
-          render: (domProps, state) => /* @__PURE__ */ jsx(
-            "label",
-            {
-              ...domProps,
-              "data-state": state.isSelected ? "checked" : "unchecked",
-              children: withOwnHitTarget(domProps.children)
-            }
-          ),
-          children: [
-            option.icon == null ? null : /* @__PURE__ */ jsx(
-              "span",
-              {
-                "data-slot": "segmented-item-icon",
-                className: "ui-segmented-item-icon",
-                "aria-hidden": "true",
-                children: option.icon
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { "data-slot": "segmented-item-label", className: "ui-segmented-item-label", children: option.label }),
-            /* @__PURE__ */ jsx(
-              SegmentedCountPill,
-              {
-                count: option.count,
-                overflowCount: option.overflowCount,
-                showZero: option.showZero,
-                countLabel: option.countLabel
-              }
-            )
-          ]
-        },
-        option.value
-      ))
-    }
-  );
-});
-export {
-  Segmented
-};

package/dist/components/ui/separator.d.ts

@@ -1,25 +0,0 @@
-import * as React from "react";
-export type { SeparatorProp, SeparatorProp as SeparatorProps, } from "../../props/components/layout.prop.js";
-/**
- * ACCESSIBILITY — the whole point of the labelled form is that the label is ANNOUNCED, exactly
- * ONCE. Without a label the rule stays `decorative` (`role="none"`), which is right: a section
- * rule carries no information.
- *
- * SUBSTRATE — React Aria Components. Its `Separator` has no `decorative` prop: `useSeparator`
- * emits `role="separator"` unconditionally (and `aria-orientation="vertical"` on the vertical
- * rule), and it drops `children` entirely. Both are handled in the `render` override below, which
- * is RAC's supported escape hatch for owning the element: it hands us the computed DOM props and
- * the ref, and we decide what element carries them.
- */
-export declare const Separator: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-    labelSize?: "2xs" | "xs" | "sm" | "md";
-    space?: import("../../props/index.js").GapProp;
-    hideBelow?: import("../../props/index.js").BreakpointProp;
-    hideFrom?: import("../../props/index.js").BreakpointProp;
-    orientation?: import("../../props/index.js").OrientationProp;
-    label?: string;
-    labelAlign?: import("../../props/index.js").TextAlignProp;
-    tone?: import("../../props/index.js").TextToneProp;
-    decorative?: boolean;
-    className?: import("../../props/index.js").ClassNameProp;
-} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/separator.js

@@ -1,74 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Separator as AriaSeparator } from "react-aria-components";
-import { padStepToken } from "../../lib/variants.js";
-import { cn } from "../../lib/utils.js";
-import { isDevelopment } from "../../lib/dev.js";
-const Separator = React.forwardRef(
-  ({
-    className,
-    labelSize,
-    space,
-    hideBelow,
-    hideFrom,
-    style,
-    orientation = "horizontal",
-    decorative,
-    label,
-    labelAlign = "center",
-    tone = "default",
-    ...props
-  }, ref) => {
-    const hasLabel = typeof label === "string" && label.trim() !== "";
-    const labelled = hasLabel && orientation === "horizontal";
-    if (isDevelopment()) {
-      if (hasLabel && orientation === "vertical") {
-        console.warn(
-          'Separator: `label` is rendered on orientation="horizontal" only; it was ignored. Use a horizontal rule for a day divider / unread watermark.'
-        );
-      }
-    }
-    const isDecorative = decorative ?? !labelled;
-    return /* @__PURE__ */ jsx(
-      AriaSeparator,
-      {
-        ref,
-        elementType: "div",
-        "data-slot": "separator",
-        "data-label-size": labelSize,
-        "data-hide-below": hideBelow,
-        "data-hide-from": hideFrom,
-        style: {
-          ...style,
-          ...space === void 0 ? void 0 : { marginBlock: padStepToken(space) }
-        },
-        "data-orientation": orientation,
-        "data-tone": tone,
-        "data-labelled": labelled ? "" : void 0,
-        "data-label-align": labelled ? labelAlign : void 0,
-        orientation,
-        "aria-label": labelled && !isDecorative ? label : void 0,
-        className: cn("ui-separator", className),
-        ...props,
-        render: ({ role, "aria-orientation": ariaOrientation, ...domProps }) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            role: isDecorative ? "none" : role,
-            "aria-orientation": isDecorative ? void 0 : ariaOrientation,
-            ...props,
-            ...domProps,
-            children: labelled ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { className: "ui-separator-rule", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx("span", { className: "ui-separator-label", "aria-hidden": isDecorative ? void 0 : true, children: label }),
-              /* @__PURE__ */ jsx("span", { className: "ui-separator-rule", "aria-hidden": "true" })
-            ] }) : null
-          }
-        )
-      }
-    );
-  }
-);
-Separator.displayName = "Separator";
-export {
-  Separator
-};