@godxjp/ui 31.31.7 → 32.0.0

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

@@ -1,5 +1,108 @@
 "use client";
-import { Segmented } from "../ui/segmented.js";
+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 "./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/tag-input.d.ts → data-entry/select-tags-inline.d.ts}

@@ -1,10 +1,12 @@
 import * as React from "react";
 import type { AllowClearProp, ControlStatusProp, ControlVariantProp, MaxTagCountProp, MaxTagPlaceholderProp, SizeProp } from "../../props/vocabulary/index.js";
 /**
- * TagInput is this library's answer to antd's `Select mode="tags"` — a free-text token field — so
- * it takes the same token-level props antd puts on that mode.
+ * The INLINE presentation of `<Select mode="tags" open={false}>` — a free-text chip field whose
+ * list never opens (antd's own spelling of "a tags input with no dropdown"). It was the public
+ * `TagInput` until v32 folded it into Select (#1223); the props below are the subset of Select's
+ * tags contract this presentation reads, with the same token-level knobs antd puts on that mode.
  */
-export type TagInputProps = {
+type SelectTagsInlineProps = {
     value?: string[];
     defaultValue?: string[];
     onValueChange?: (tags: string[]) => void;
@@ -65,4 +67,5 @@ export type TagInputProps = {
      */
     tokenSeparators?: string[];
 };
-export declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const SelectTagsInline: React.ForwardRefExoticComponent<SelectTagsInlineProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/{ui/tag-input.js → data-entry/select-tags-inline.js}

@@ -10,8 +10,8 @@ import {
   controlSurfaceAttrs,
   resolveAllowClear,
   splitByTokenSeparators
-} from "../data-entry/control-surface.js";
-const TagInput = React.forwardRef(
+} from "./control-surface.js";
+const SelectTagsInline = React.forwardRef(
   ({
     value,
     defaultValue = [],
@@ -210,7 +210,7 @@ const TagInput = React.forwardRef(
     );
   }
 );
-TagInput.displayName = "TagInput";
+SelectTagsInline.displayName = "SelectTagsInline";
 export {
-  TagInput
+  SelectTagsInline
 };

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

@@ -27,6 +27,7 @@ import {
 import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import { radixSurfaceState, toPlacement } from "../navigation/dropdown-menu.js";
 import { SearchSelect } from "./search-select.js";
+import { SelectTagsInline } from "./select-tags-inline.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { normalizeSelectOptions } from "../../lib/select-options.js";
 function isDataSelect(props) {
@@ -138,6 +139,9 @@ function SelectRoot({
   );
 }
 function Select(props) {
+  if (props.mode === "tags" && props.open === false && !props.labelInValue) {
+    return /* @__PURE__ */ jsx(SelectTagsInline, { ...props });
+  }
   if (isDataSelect(props)) {
     if (props.labelInValue) return /* @__PURE__ */ jsx(LabelInValueSelect, { ...props });
     return /* @__PURE__ */ jsx(DataSelect, { ...props });

package/dist/components/data-entry/toggle-group.d.ts

@@ -1,2 +1,108 @@
-export { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group.js";
-export type { ToggleGroupItemProp, ToggleGroupItemProps } from "../ui/toggle-group.js";
+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/data-entry/toggle-group.js

@@ -1,5 +1,193 @@
 "use client";
-import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group.js";
+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

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

@@ -1,2 +1,86 @@
-export { Toggle } from "../ui/toggle.js";
-export type { ToggleProp, ToggleProps } from "../ui/toggle.js";
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | "soft" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+    shape?: "default" | "pill" | "sharp" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Not exported on its own — it is folded into `ToggleProp` and `ToggleGroupItemProp` so there is
+ * one public name per component.
+ */
+type ToggleCountFields = {
+    /**
+     * Optional numeric count rendered as a borderless counter pill after the label — the SAME
+     * vocabulary `Button` already defines, so a counted segmented toggle and a counted filter tab
+     * read identically. Formatted with `Intl.NumberFormat` in the active locale (never `String(n)`,
+     * never a hand-rolled thousands separator).
+     */
+    count?: number;
+    /** Cap for `count` — beyond it the pill shows `{overflowCount}+` (e.g. `99+`). */
+    overflowCount?: number;
+    /** Render the pill when `count` is 0. Default `true`, matching Button. */
+    showZero?: boolean;
+    /**
+     * Localized description of what the count MEANS, folded into the accessible name so the control
+     * never announces as a bare number ("👍 3" → "thumbs up, 3 reactions"). Supply it whenever the
+     * visible label is an icon or an emoji; with a text label the label itself already carries the
+     * meaning.
+     */
+    countLabel?: string;
+};
+/**
+ * The repo's two-state vocabulary, kept VERBATIM from the Radix era. React Aria spells the same
+ * four things `isSelected` / `defaultSelected` / `onChange` / `isDisabled`; the translation lives
+ * inside this file so no consumer ever has to learn RAC's names.
+ */
+type TogglePressedFields = {
+    /** Controlled pressed state — RAC `isSelected`. */
+    pressed?: boolean;
+    /** Uncontrolled initial pressed state — RAC `defaultSelected`. */
+    defaultPressed?: boolean;
+    /** Fired with the NEW pressed state — RAC `onChange`. */
+    onPressedChange?: (pressed: boolean) => void;
+};
+/**
+ * Counter pill shared by `Toggle`, `ToggleGroupItem` and `Tabs` items. ACCESSIBLE NAME.
+ *
+ * `slot` names the hooks the pill emits (`data-slot="<slot>-count"` / `.ui-<slot>-count`) so a
+ * third component can reuse the whole construction — the Intl formatting, the `overflowCount`
+ * cap, and above all the `aria-hidden` + `sr-only` split that keeps «未対応12» out of the
+ * accessible name (gh#734) — without a second counting API growing beside this one (gh#762).
+ * It defaults to `toggle`, so every existing call emits the identical markup it always has.
+ */
+declare function useCounterPill({ count, overflowCount, showZero, countLabel, ariaLabel, slot, }: ToggleCountFields & {
+    ariaLabel?: string;
+    slot?: string;
+}): {
+    pill: null;
+    resolvedAriaLabel: string | undefined;
+} | {
+    pill: React.JSX.Element;
+    resolvedAriaLabel: string | undefined;
+};
+/**
+ * RAC's `filterDOMProps` forwards only `id`, `data-*`, the four labelling `aria-*` and the global
+ * mouse/pointer events; `title`, `tabIndex` and the rarer DOM props are dropped silently, and
+ * Radix forwarded ALL of them. `render` is RAC's own escape hatch: the raw props go on first, RAC's
+ * merged ones second so its `type`/`disabled`/`aria-pressed`/handlers always win.
+ *
+ * Two exceptions, both of which Radix owned: `tabIndex` stays the caller's, and so does `id` —
+ * inside a ToggleButtonGroup RAC spends `id` as the selection KEY and blanks the DOM attribute,
+ * which would otherwise silently drop the id off every grouped item.
+ */
+declare function restoreDomProps<P extends {
+    id?: string;
+    tabIndex?: number;
+}>(raw: P, domProps: React.JSX.IntrinsicElements["button"]): React.JSX.Element;
+export type ToggleProp = React.ComponentPropsWithoutRef<"button"> & TogglePressedFields & VariantProps<typeof toggleVariants> & ToggleCountFields;
+export type ToggleProps = ToggleProp;
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & TogglePressedFields & VariantProps<(props?: ({
+    variant?: "default" | "outline" | "soft" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+    shape?: "default" | "pill" | "sharp" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & ToggleCountFields & React.RefAttributes<HTMLButtonElement>>;
+export { toggleVariants, useCounterPill, restoreDomProps };
+export type { ToggleCountFields, TogglePressedFields };