@godxjp/ui 31.31.8 → 32.0.1

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
-};

package/dist/components/ui/toggle-group.d.ts

@@ -1,108 +0,0 @@
-import * as React from "react";
-import { type ToggleCountFields, type ToggleProp } from "./toggle.js";
-type ToggleGroupVariant = ToggleProp["variant"];
-type ToggleGroupSize = ToggleProp["size"];
-type ToggleGroupShape = ToggleProp["shape"];
-type ToggleGroupBaseProp = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> & {
-    variant?: ToggleGroupVariant;
-    size?: ToggleGroupSize;
-    shape?: ToggleGroupShape;
-    /** Disable every item at once — RAC `isDisabled`. */
-    disabled?: boolean;
-    /** Which way the arrow keys walk the group. */
-    orientation?: "horizontal" | "vertical";
-    /**
-     * May the group end up with NOTHING selected? Omitted (`false`) it may, which is what a tag
-     * filter wants — pressing the selected chip again clears it and reports `""`. Set it and the
-     * selected item stays selected when it is pressed again.
-     *
-     * **It also decides the ARIA role of a `type="single"` group (gh#744)**, because emptiness is
-     * exactly what the two roles disagree about. ARIA has no "press again to deselect" for a radio:
-     * a radiogroup that has a selection always has exactly one checked item, so a radiogroup that
-     * the user just emptied is a state a screen reader cannot read out. Therefore:
-     *
-     * - omitted → `role="group"` + `aria-pressed` per item (a row of toggle buttons, which MAY be
-     *   all-off) — this is the default, so no existing single group changes behaviour;
-     * - set → `role="radiogroup"` + `role="radio"` / `aria-checked` per item, and the arrow keys
-     *   move the SELECTION as APG's radio-group pattern requires, not just the focus.
-     *
-     * The name is React Aria's own (`useToggleGroupState`, which this component is built on) —
-     * neither antd nor Radix names the capability. See `docs/DESIGN-AUTHORITY.md`.
-     *
-     * On `type="multiple"` it only keeps the last remaining item selected; the roles do not move
-     * (a row of `aria-pressed` buttons is already the right reading there).
-     */
-    disallowEmptySelection?: boolean;
-    /**
-     * Let the row break onto further lines instead of running past its rail (gh#741). Same name,
-     * same boolean shape and same `data-wrap` attribute as `Flex` — one spelling answers "what does
-     * this row do when it does not fit" across the library.
-     *
-     * OPT-IN (`false`), and deliberately the SAME default for every `variant`. `Flex`'s `wrap` is
-     * `false`, and one word must not mean two defaults. Measured in Chromium at a 320px rail:
-     * forcing `flex-wrap: wrap` on all 18 groups of the docs page left the 17 that FIT untouched
-     * (same line count, same height, at a 320px and a 1358px rail) — including every `soft` one, so
-     * paint is not the axis that decides. The only row it moves is the one that overflows, from
-     * 171.5px to 108px: a default of `true` reflows exactly those rows, silently, on an upgrade
-     * whose call sites did not change.
-     *
-     * Wrapping keeps the group's single `gap`, so the two axes stay equal (4px × 4px measured);
-     * `flex-wrap` reorders nothing, so arrow keys still walk the items in DOM order across lines.
-     */
-    wrap?: boolean;
-    /**
-     * Writing direction. It still lands on the DOM node, but React Aria reads the direction it
-     * navigates by from the ambient locale (`I18nProvider`), NOT from this attribute — where Radix
-     * read this prop directly. An RTL app must set the locale, not just `dir`.
-     */
-    dir?: "ltr" | "rtl";
-    /**
-     * Accepted for source compatibility with the Radix era, where it wrapped arrow-key focus around
-     * the ends. React Aria's toolbar navigation stops at the ends and has no equivalent switch, so
-     * this prop no longer changes anything.
-     */
-    loop?: boolean;
-};
-/**
- * `type` is the discriminant, exactly as it was under Radix: `"single"` reports the one selected
- * value as a string (`""` once it is deselected), `"multiple"` reports an array. React Aria models
- * both as `selectionMode` + a `Set` of keys — that Set is built and unpacked here so the public
- * shape stays a string / an array of strings.
- */
-type ToggleGroupSingleProp = ToggleGroupBaseProp & {
-    type: "single";
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
-};
-type ToggleGroupMultipleProp = ToggleGroupBaseProp & {
-    type: "multiple";
-    value?: string[];
-    defaultValue?: string[];
-    onValueChange?: (value: string[]) => void;
-};
-type ToggleGroupProp = ToggleGroupSingleProp | ToggleGroupMultipleProp;
-export declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProp & React.RefAttributes<HTMLDivElement>>;
-/** Same vocabulary as `Toggle` and `Button` — one counter pill for the whole library. */
-export type ToggleGroupItemProp = Omit<React.ComponentPropsWithoutRef<"button">, "value"> & ToggleCountFields & {
-    /**
-     * This item's key in the group's value. React Aria calls it `id` (the key it stores in
-     * `selectedKeys`); the public spelling stays `value`, as it was under Radix.
-     */
-    value: string;
-    variant?: ToggleGroupVariant;
-    size?: ToggleGroupSize;
-    shape?: ToggleGroupShape;
-};
-export type ToggleGroupItemProps = ToggleGroupItemProp;
-export declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value"> & ToggleCountFields & {
-    /**
-     * This item's key in the group's value. React Aria calls it `id` (the key it stores in
-     * `selectedKeys`); the public spelling stays `value`, as it was under Radix.
-     */
-    value: string;
-    variant?: ToggleGroupVariant;
-    size?: ToggleGroupSize;
-    shape?: ToggleGroupShape;
-} & React.RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/components/ui/toggle-group.js

@@ -1,194 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import {
-  ToggleButton,
-  ToggleButtonGroup,
-  ToggleGroupStateContext
-} from "react-aria-components";
-import { cn } from "../../lib/utils.js";
-import {
-  restoreDomProps,
-  toggleVariants,
-  useCounterPill
-} from "./toggle.js";
-const ToggleGroupContext = React.createContext({});
-const ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
-function toSelectedKeys(value) {
-  if (value == null) {
-    return void 0;
-  }
-  if (Array.isArray(value)) {
-    return new Set(value);
-  }
-  return new Set(value === "" ? [] : [value]);
-}
-const ToggleGroup = React.forwardRef(
-  // No destructuring defaults: an unset prop must stay `undefined` so the emitted attribute is
-  // either absent or a declared union member.
-  // is NOT in the `sm | md | lg` size union — the group advertised an invalid value for its own
-  // type.) The real default lives in `toggleVariants`, applied per item.
-  ({
-    className,
-    variant,
-    size,
-    shape,
-    wrap,
-    children,
-    type,
-    value,
-    defaultValue,
-    onValueChange,
-    disabled,
-    disallowEmptySelection,
-    loop: _loop,
-    ...props
-  }, ref) => {
-    const radioSemantics = type === "single" && disallowEmptySelection === true;
-    const arrowNav = React.useRef(false);
-    const groupElement = React.useRef(null);
-    const [inToolbar, setInToolbar] = React.useState(false);
-    React.useLayoutEffect(() => {
-      setInToolbar(!!groupElement.current?.parentElement?.closest('[role="toolbar"]'));
-    }, []);
-    const context = React.useMemo(
-      () => ({ variant, size, shape, radioSemantics, arrowNav, inToolbar }),
-      [variant, size, shape, radioSemantics, inToolbar]
-    );
-    const selectedKeys = React.useMemo(() => toSelectedKeys(value), [value]);
-    const defaultSelectedKeys = React.useMemo(() => toSelectedKeys(defaultValue), [defaultValue]);
-    const handleSelectionChange = (keys) => {
-      const next = [...keys].map(String);
-      if (type === "single") {
-        onValueChange?.(next[0] ?? "");
-      } else {
-        onValueChange?.(next);
-      }
-    };
-    return /* @__PURE__ */ jsx(
-      ToggleButtonGroup,
-      {
-        ref,
-        "data-slot": "toggle-group",
-        "data-variant": variant,
-        "data-size": size,
-        "data-shape": shape,
-        "data-wrap": wrap ? "true" : void 0,
-        className: cn("ui-toggle-group", className),
-        ...props,
-        selectionMode: type,
-        selectedKeys,
-        defaultSelectedKeys,
-        onSelectionChange: handleSelectionChange,
-        isDisabled: disabled,
-        disallowEmptySelection,
-        render: (domProps) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...props,
-            ...domProps,
-            ref: (node) => {
-              groupElement.current = node;
-              const aria = domProps.ref;
-              if (typeof aria === "function") aria(node);
-              else if (aria) aria.current = node;
-            },
-            ...type === "single" && !radioSemantics ? { role: "group", "aria-orientation": void 0 } : null,
-            onKeyDownCapture: (event) => {
-              if (radioSemantics) {
-                arrowNav.current = ARROW_KEYS.has(event.key);
-                if (arrowNav.current) {
-                  queueMicrotask(() => {
-                    arrowNav.current = false;
-                  });
-                }
-              }
-              domProps.onKeyDownCapture?.(event);
-            },
-            tabIndex: props.tabIndex ?? domProps.tabIndex
-          }
-        ),
-        children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: context, children })
-      }
-    );
-  }
-);
-ToggleGroup.displayName = "ToggleGroup";
-const ToggleGroupItem = React.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    shape,
-    count,
-    overflowCount,
-    showZero,
-    countLabel,
-    children,
-    "aria-label": ariaLabel,
-    value,
-    disabled,
-    ...props
-  }, ref) => {
-    const context = React.useContext(ToggleGroupContext);
-    const resolvedVariant = variant ?? context.variant;
-    const resolvedSize = size ?? context.size;
-    const resolvedShape = shape ?? context.shape;
-    const { pill, resolvedAriaLabel } = useCounterPill({
-      count,
-      overflowCount,
-      showZero,
-      countLabel,
-      ariaLabel
-    });
-    const groupState = React.useContext(ToggleGroupStateContext);
-    const isPressed = groupState?.selectedKeys.has(value) ?? false;
-    const isSingle = groupState?.selectionMode === "single";
-    const radioSemantics = context.radioSemantics === true;
-    const rovingTabIndex = radioSemantics && !context.inToolbar && groupState && groupState.selectedKeys.size > 0 ? isPressed ? 0 : -1 : void 0;
-    return /* @__PURE__ */ jsxs(
-      ToggleButton,
-      {
-        ref,
-        "data-slot": "toggle-group-item",
-        "data-state": isPressed ? "on" : "off",
-        "data-variant": resolvedVariant,
-        "data-size": resolvedSize,
-        "data-shape": resolvedShape,
-        "aria-label": resolvedAriaLabel,
-        className: cn(
-          toggleVariants({ variant: resolvedVariant, size: resolvedSize, shape: resolvedShape }),
-          className
-        ),
-        ...props,
-        id: value,
-        isDisabled: disabled,
-        render: (domProps) => restoreDomProps(props, {
-          ...domProps,
-          ...isSingle && !radioSemantics ? { role: void 0, "aria-checked": void 0, "aria-pressed": isPressed } : null,
-          ...rovingTabIndex == null ? null : { tabIndex: rovingTabIndex },
-          // Selection follows focus, as APG requires of a radio group — but only when an arrow
-          // key is what moved it. Measured otherwise: RAC's toolbar Tab handler focuses the
-          // LAST item on the way out, which silently moved the selection to it.
-          ...radioSemantics ? {
-            onFocus: (event) => {
-              if (context.arrowNav?.current && groupState && groupState.selectedKeys.size > 0 && !isPressed) {
-                groupState.setSelected(value, true);
-              }
-              domProps.onFocus?.(event);
-            }
-          } : null
-        }),
-        children: [
-          children,
-          pill
-        ]
-      }
-    );
-  }
-);
-ToggleGroupItem.displayName = "ToggleGroupItem";
-export {
-  ToggleGroup,
-  ToggleGroupItem
-};