@allxsmith/bestax-bulma 5.31.0 → 5.32.0

package/dist/esm/components/SegmentedControl.js

@@ -0,0 +1,230 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useState, useCallback, useEffect, useContext, useRef } from 'react';
+import { Button } from '../elements/Button.js';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { warnOnce } from '../helpers/devWarnings.js';
+import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
+
+// Not exported, so it stays out of the public API that `index.ts` re-exports.
+const SegmentedControlContext = createContext(null);
+/** Sorts mounted segments into the order they sit in the page. */
+const inDocumentOrder = (a, b) => a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING
+    ? -1
+    : 1;
+/** How far each arrow key moves along the row. */
+const STEPS = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1,
+};
+/**
+ * The segment a key moves to, found among the segments of the same group in
+ * DOM order, skipping disabled ones and wrapping at either end. `undefined`
+ * for a key the group leaves alone, when no enabled segment is left, or when
+ * the segment isn't inside its row in the page, as a portaled one isn't.
+ */
+function segmentFor(current, key) {
+    const group = current.closest('[role="radiogroup"]');
+    if (!group)
+        return undefined;
+    const segments = Array.from(group.querySelectorAll('[role="radio"]'));
+    const enabled = segments.filter(segment => !segment.disabled);
+    if (key === 'Home')
+        return enabled[0];
+    if (key === 'End')
+        return enabled[enabled.length - 1];
+    const step = STEPS[key];
+    if (!step)
+        return undefined;
+    const at = segments.indexOf(current);
+    for (let i = 1; i <= segments.length; i += 1) {
+        const candidate = segments[(at + step * i + segments.length) % segments.length];
+        if (!candidate.disabled)
+            return candidate;
+    }
+    return undefined;
+}
+/**
+ * The `SegmentedControl` component renders a row of buttons where only one can be on, and tells a screen reader it's a radio group.
+ *
+ * It's Bulma's `.buttons.has-addons` row, with the checked segment filled and
+ * marked `is-selected`, the way Bulma's button docs show it. To a screen
+ * reader it's `role="radiogroup"`, with `role="radio"` and `aria-checked` on
+ * each segment, which is how the APG toolbar example marks its alignment
+ * buttons. The keys follow the APG radio group: the row is one tab stop, the
+ * arrow keys move to the next or previous enabled segment and check it,
+ * wrapping at either end, Home and End go to the first and last, and Space
+ * checks the focused segment. Once a segment is checked, one always is.
+ *
+ * It carries no form value. A choice that's sent with a form is `Radios`.
+ *
+ * @function
+ * @param {SegmentedControlProps} props - Props for the SegmentedControl component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the row's `<div>`.
+ * @returns {JSX.Element} The rendered segmented control.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ | APG radio group pattern}
+ * @see {@link https://bulma.io/documentation/elements/button/#list-of-buttons | Bulma list of buttons}
+ *
+ * @example
+ * <SegmentedControl aria-label="Text alignment" defaultValue="left">
+ *   <SegmentedControl.Segment value="left">Left</SegmentedControl.Segment>
+ *   <SegmentedControl.Segment value="center">Center</SegmentedControl.Segment>
+ *   <SegmentedControl.Segment value="right">Right</SegmentedControl.Segment>
+ * </SegmentedControl>
+ */
+const SegmentedControlRoot = forwardRef(function SegmentedControl({ value, defaultValue, onChange, color = 'link', size, hasAddons = true, isCentered, isRight, className, children, ...props }, ref) {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    // Controlled vs uncontrolled, as in Tabs and Collapses.
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const checked = isControlled ? (value ?? undefined) : internalValue;
+    const select = (next) => {
+        if (next === checked)
+            return;
+        if (!isControlled)
+            setInternalValue(next);
+        onChange?.(next);
+    };
+    // The segments mount and register from an effect, so the group knows
+    // which can hold the tab stop wherever in the tree they sit.
+    const [segments, setSegments] = useState([]);
+    const register = useCallback((record) => {
+        setSegments(prev => [...prev, record]);
+        return () => setSegments(prev => prev.filter(r => r !== record));
+    }, []);
+    const [focused, setFocused] = useState();
+    // The first enabled segment in the page, sorted when it's read rather
+    // than when a segment registers, so reordered segments are seen too. It's
+    // read after the commit: a render runs before React moves the nodes, so
+    // sorting there would find the old order.
+    const [firstEnabled, setFirstEnabled] = useState();
+    useClientLayoutEffect(() => {
+        const inPage = segments.filter(s => !s.disabled).sort(inDocumentOrder);
+        setFirstEnabled(inPage[0]?.value);
+    }, [segments, children]);
+    // One tab stop for the row (roving tabindex). While focus is in the row
+    // the stop follows it, so Tab leaves from wherever focus is even when a
+    // controlled group hasn't taken the new value. Otherwise it's the checked
+    // segment, or the first enabled one when none is checked or the checked
+    // one is disabled. Before the segments register (the server render and
+    // the first client render) the checked one holds it, so a row with
+    // nothing checked has no stop until the client has rendered.
+    const canHoldStop = (candidate) => segments.some(s => !s.disabled && s.value === candidate);
+    let tabStop;
+    if (canHoldStop(focused))
+        tabStop = focused;
+    else if (segments.length === 0 || canHoldStop(checked))
+        tabStop = checked;
+    else
+        tabStop = firstEnabled;
+    const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);
+    useEffect(() => {
+        if (!named) {
+            warnOnce('SegmentedControl:unnamed', '[bestax-bulma] <SegmentedControl> has no accessible name. Pass ' +
+                'aria-label or aria-labelledby, so a screen reader can say what ' +
+                'the choice is.');
+        }
+    }, [named]);
+    const rowClasses = usePrefixedClassNames('buttons', {
+        'has-addons': hasAddons,
+        'is-centered': isCentered,
+        'is-right': isRight,
+        [`are-${size}`]: size,
+    });
+    // The props are spread first, so the role a screen reader relies on wins
+    // over anything a JavaScript caller or a spread object passes along.
+    return (jsx(SegmentedControlContext.Provider, { value: { checked, tabStop, color, select, setFocused, register }, children: jsx("div", { ...rest, ref: ref, role: "radiogroup", className: classNames(rowClasses, bulmaHelperClasses, className), children: children }) }));
+});
+/**
+ * One option in the row: a `<button role="radio">` that's checked while the group's value is its `value`, filled with the group's `color` and marked `is-selected`.
+ *
+ * @function
+ * @param {SegmentedControlSegmentProps} props - Props for the segment.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered segment.
+ */
+const Segment = forwardRef(function Segment({ value, isDisabled, disabled, className, onClick, onKeyDown, onFocus, onBlur, ...props }, ref) {
+    const ctx = useContext(SegmentedControlContext);
+    const checked = ctx !== null && ctx.checked === value;
+    const off = Boolean(isDisabled || disabled);
+    // Prefixed like Button's own classes, which a hand-written
+    // `className="is-selected"` could not be under ConfigProvider classPrefix.
+    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.
+    const selectedClass = usePrefixedClassNames({ 'is-selected': checked });
+    const nodeRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        nodeRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const register = ctx?.register;
+    useEffect(() => {
+        if (!register) {
+            warnOnce('SegmentedControl.Segment:outside', '[bestax-bulma] <SegmentedControl.Segment> is outside a ' +
+                '<SegmentedControl>, so nothing can check it. Put it inside one.');
+            return undefined;
+        }
+        return register({
+            value,
+            disabled: off,
+            node: nodeRef.current,
+        });
+    }, [register, value, off]);
+    // The caller's onClick runs first, so a `preventDefault()` there keeps
+    // the segment from being checked. A disabled button gets no click.
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        ctx?.select(value);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (!ctx ||
+            event.defaultPrevented ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey) {
+            return;
+        }
+        const target = segmentFor(event.currentTarget, event.key);
+        if (!target)
+            return;
+        event.preventDefault();
+        // The row has taken this key, so nothing above it acts on it too: a
+        // Carousel moves its slide on the arrows from a document listener that
+        // doesn't read `defaultPrevented`. Keys the row leaves alone still bubble.
+        event.stopPropagation();
+        target.focus();
+        // The check follows focus, APG's rule for a radio group outside a
+        // toolbar. It goes through a click on the segment, as a native radio's
+        // does, so its onClick sees it. Inside a toolbar the arrows would move
+        // focus alone; that is the line a toolbar would change.
+        target.click();
+    };
+    const handleFocus = (event) => {
+        onFocus?.(event);
+        ctx?.setFocused(value);
+    };
+    // The segment focus moves to, if any, records itself straight after.
+    const handleBlur = (event) => {
+        onBlur?.(event);
+        ctx?.setFocused(undefined);
+    };
+    // The props are spread first, so what a radio depends on wins over
+    // anything a JavaScript caller or a spread object passes along: it stays
+    // a button, never submits, reports whether it's checked, and the group
+    // decides whether Tab reaches it.
+    return (jsx(Button, { ...props, ref: setRefs, as: "button", type: "button", role: "radio", "aria-checked": checked, tabIndex: ctx ? (ctx.tabStop === value ? 0 : -1) : undefined, isDisabled: off, color: checked ? ctx.color : undefined, className: classNames(selectedClass, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur }));
+});
+Segment.displayName = 'SegmentedControl.Segment';
+const SegmentedControl = withSubComponents(SegmentedControlRoot, { Segment }, 'SegmentedControl');
+
+export { SegmentedControl };
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/esm/components/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button, type ButtonOwnProps } from '../elements/Button';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { warnOnce } from '../helpers/devWarnings';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\n\n// Spelled out so the API page can list the values. The tests hold it to\n// ToggleButton's, since the checked segment fills the way a pressed toggle\n// does and for the same reasons.\n/**\n * The fills the checked segment takes: `Button`'s colors, minus `text` and\n * `ghost`, which don't fill, and `white`, `light`, `dark` and `black`, which in\n * one theme or the other fill about as light or dark as an unchecked segment\n * already is. The same set `ToggleButton` takes.\n */\nexport type SegmentedControlColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\n/** A mounted segment, as the group needs to know it for the tab stop. */\ninterface SegmentRecord {\n  value: string;\n  disabled: boolean;\n  node: HTMLButtonElement;\n}\n\ninterface SegmentedControlContextValue {\n  /** The checked segment's value, or `undefined` while none is. */\n  checked: string | undefined;\n  /** The segment that holds `tabIndex={0}`, or `undefined` for none. */\n  tabStop: string | undefined;\n  /** The fill the checked segment takes. */\n  color: SegmentedControlColor;\n  /** Checks a segment, unless it's checked already. */\n  select: (value: string) => void;\n  /** Records which segment has focus, so the tab stop can follow it. */\n  setFocused: (value: string | undefined) => void;\n  register: (record: SegmentRecord) => () => void;\n}\n\n// Not exported, so it stays out of the public API that `index.ts` re-exports.\nconst SegmentedControlContext =\n  createContext<SegmentedControlContextValue | null>(null);\n\n/** Sorts mounted segments into the order they sit in the page. */\nconst inDocumentOrder = (a: SegmentRecord, b: SegmentRecord) =>\n  a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING\n    ? -1\n    : 1;\n\n/** How far each arrow key moves along the row. */\nconst STEPS: Record<string, number> = {\n  ArrowRight: 1,\n  ArrowDown: 1,\n  ArrowLeft: -1,\n  ArrowUp: -1,\n};\n\n/**\n * The segment a key moves to, found among the segments of the same group in\n * DOM order, skipping disabled ones and wrapping at either end. `undefined`\n * for a key the group leaves alone, when no enabled segment is left, or when\n * the segment isn't inside its row in the page, as a portaled one isn't.\n */\nfunction segmentFor(\n  current: HTMLButtonElement,\n  key: string\n): HTMLButtonElement | undefined {\n  const group = current.closest('[role=\"radiogroup\"]');\n  if (!group) return undefined;\n  const segments = Array.from(\n    group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')\n  );\n  const enabled = segments.filter(segment => !segment.disabled);\n\n  if (key === 'Home') return enabled[0];\n  if (key === 'End') return enabled[enabled.length - 1];\n\n  const step = STEPS[key];\n  if (!step) return undefined;\n  const at = segments.indexOf(current);\n  for (let i = 1; i <= segments.length; i += 1) {\n    const candidate =\n      segments[(at + step * i + segments.length) % segments.length];\n    if (!candidate.disabled) return candidate;\n  }\n  return undefined;\n}\n\n// ---------------------------------------------------------------------------\n// SegmentedControl (root)\n// ---------------------------------------------------------------------------\n\n/**\n * Props for the SegmentedControl component. The helper props, the other `<div>`\n * attributes and the `ref` all land on the row.\n *\n * @extraProp {string} [aria-label] - Names the group for a screen reader, such as \"Text alignment\". A radio group needs a name, so pass this or `aria-labelledby`, and a development build warns when it has neither.\n * @extraProp {string} [aria-labelledby] - The id of a visible heading or label that names the group, in place of `aria-label`.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the row's `<div>`.\n */\nexport interface SegmentedControlProps\n  extends\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'onChange' | 'defaultValue' | 'color' | 'role'\n    >,\n    Omit<\n      BulmaClassesProps,\n      'color' | 'colorShade' | 'backgroundColor' | 'backgroundColorShade'\n    > {\n  /**\n   * The checked segment's `value`, when you hold the state. Setting it makes\n   * the group controlled: picking a segment only calls `onChange`, and nothing\n   * changes until you pass the new value. `null` checks nothing, with the\n   * tab stop `defaultValue` describes for that. Pick this or `defaultValue`\n   * for the group's lifetime.\n   */\n  value?: string | null;\n  /**\n   * The segment checked to begin with, when the group holds its own state.\n   * Leave it out and nothing is checked until someone picks one, and Tab\n   * lands on the first enabled segment meanwhile. That fallback takes hold\n   * once the row has rendered in the browser: server markup with nothing\n   * checked has no tab stop until then, while a checked segment is the stop\n   * from the server markup on.\n   */\n  defaultValue?: string;\n  /**\n   * Called with the newly checked segment's `value`, whether or not `value`\n   * is set. The arrow keys, Home and End check the segment they move to, so\n   * each of those calls it too: the check follows focus, as in a native radio\n   * group. Pressing the checked segment again doesn't call it, since a\n   * segmented control can't be cleared: one stays checked once one is.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * The checked segment's fill. The others are plain buttons, so the fill is\n   * the difference people see. Takes the same colors as `ToggleButton`, for\n   * the same reason: `white`, `light`, `dark` and `black` fill about as light\n   * or dark as a plain button already is in one theme or the other.\n   */\n  color?: SegmentedControlColor;\n  /** Size of every segment, through Bulma's `are-<size>` on the row. */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Joins the segments into one row with no gap between them, Bulma's\n   * `has-addons`. Set it to `false` for separate buttons.\n   */\n  hasAddons?: boolean;\n  /** Centers the row. */\n  isCentered?: boolean;\n  /** Aligns the row to the right. */\n  isRight?: boolean;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** The `SegmentedControl.Segment`s, each with a `value` of its own. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `SegmentedControl` component renders a row of buttons where only one can be on, and tells a screen reader it's a radio group.\n *\n * It's Bulma's `.buttons.has-addons` row, with the checked segment filled and\n * marked `is-selected`, the way Bulma's button docs show it. To a screen\n * reader it's `role=\"radiogroup\"`, with `role=\"radio\"` and `aria-checked` on\n * each segment, which is how the APG toolbar example marks its alignment\n * buttons. The keys follow the APG radio group: the row is one tab stop, the\n * arrow keys move to the next or previous enabled segment and check it,\n * wrapping at either end, Home and End go to the first and last, and Space\n * checks the focused segment. Once a segment is checked, one always is.\n *\n * It carries no form value. A choice that's sent with a form is `Radios`.\n *\n * @function\n * @param {SegmentedControlProps} props - Props for the SegmentedControl component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the row's `<div>`.\n * @returns {JSX.Element} The rendered segmented control.\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ | APG radio group pattern}\n * @see {@link https://bulma.io/documentation/elements/button/#list-of-buttons | Bulma list of buttons}\n *\n * @example\n * <SegmentedControl aria-label=\"Text alignment\" defaultValue=\"left\">\n *   <SegmentedControl.Segment value=\"left\">Left</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"center\">Center</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"right\">Right</SegmentedControl.Segment>\n * </SegmentedControl>\n */\nconst SegmentedControlRoot = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      value,\n      defaultValue,\n      onChange,\n      color = 'link',\n      size,\n      hasAddons = true,\n      isCentered,\n      isRight,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n    // Controlled vs uncontrolled, as in Tabs and Collapses.\n    const isControlled = value !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const checked = isControlled ? (value ?? undefined) : internalValue;\n\n    const select = (next: string) => {\n      if (next === checked) return;\n      if (!isControlled) setInternalValue(next);\n      onChange?.(next);\n    };\n\n    // The segments mount and register from an effect, so the group knows\n    // which can hold the tab stop wherever in the tree they sit.\n    const [segments, setSegments] = useState<SegmentRecord[]>([]);\n    const register = useCallback((record: SegmentRecord) => {\n      setSegments(prev => [...prev, record]);\n      return () => setSegments(prev => prev.filter(r => r !== record));\n    }, []);\n    const [focused, setFocused] = useState<string | undefined>();\n\n    // The first enabled segment in the page, sorted when it's read rather\n    // than when a segment registers, so reordered segments are seen too. It's\n    // read after the commit: a render runs before React moves the nodes, so\n    // sorting there would find the old order.\n    const [firstEnabled, setFirstEnabled] = useState<string | undefined>();\n    useClientLayoutEffect(() => {\n      const inPage = segments.filter(s => !s.disabled).sort(inDocumentOrder);\n      setFirstEnabled(inPage[0]?.value);\n    }, [segments, children]);\n\n    // One tab stop for the row (roving tabindex). While focus is in the row\n    // the stop follows it, so Tab leaves from wherever focus is even when a\n    // controlled group hasn't taken the new value. Otherwise it's the checked\n    // segment, or the first enabled one when none is checked or the checked\n    // one is disabled. Before the segments register (the server render and\n    // the first client render) the checked one holds it, so a row with\n    // nothing checked has no stop until the client has rendered.\n    const canHoldStop = (candidate: string | undefined) =>\n      segments.some(s => !s.disabled && s.value === candidate);\n    let tabStop: string | undefined;\n    if (canHoldStop(focused)) tabStop = focused;\n    else if (segments.length === 0 || canHoldStop(checked)) tabStop = checked;\n    else tabStop = firstEnabled;\n\n    const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);\n    useEffect(() => {\n      if (!named) {\n        warnOnce(\n          'SegmentedControl:unnamed',\n          '[bestax-bulma] <SegmentedControl> has no accessible name. Pass ' +\n            'aria-label or aria-labelledby, so a screen reader can say what ' +\n            'the choice is.'\n        );\n      }\n    }, [named]);\n\n    const rowClasses = usePrefixedClassNames('buttons', {\n      'has-addons': hasAddons,\n      'is-centered': isCentered,\n      'is-right': isRight,\n      [`are-${size}`]: size,\n    });\n\n    // The props are spread first, so the role a screen reader relies on wins\n    // over anything a JavaScript caller or a spread object passes along.\n    return (\n      <SegmentedControlContext.Provider\n        value={{ checked, tabStop, color, select, setFocused, register }}\n      >\n        <div\n          {...rest}\n          ref={ref}\n          role=\"radiogroup\"\n          className={classNames(rowClasses, bulmaHelperClasses, className)}\n        >\n          {children}\n        </div>\n      </SegmentedControlContext.Provider>\n    );\n  }\n);\n\n// ---------------------------------------------------------------------------\n// SegmentedControl.Segment\n// ---------------------------------------------------------------------------\n\n/**\n * Props for SegmentedControl.Segment. The helper props, the other button\n * attributes and the `ref` all land on the `<button>`.\n *\n * Some of `Button`'s props are left out on purpose. `as`, `type`, `role` and\n * `tabIndex`, since a segment is always a `<button type=\"button\" role=\"radio\">`\n * and the group decides which segment Tab reaches. `color`, which the group\n * sets for the checked segment, and the props that change the fill\n * (`isActive`, `isLight`, `isOutlined`, `isInverted`, `textColor`, `bgColor`\n * and their shades), since each would color it whether checked or not. `size`\n * and the width and shape props, which the row sets for every segment. And\n * `isStatic` and `isLoading`, a segment you couldn't pick.\n *\n * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the `<button>`.\n */\nexport interface SegmentedControlSegmentProps\n  extends\n    Omit<\n      ButtonOwnProps,\n      | 'color'\n      | 'size'\n      | 'isActive'\n      | 'isStatic'\n      | 'isLoading'\n      | 'isLight'\n      | 'isOutlined'\n      | 'isInverted'\n      | 'isRounded'\n      | 'isFullwidth'\n      | 'isFullWidth'\n      | 'textColor'\n      | 'bgColor'\n      | 'colorShade'\n      | 'backgroundColorShade'\n    >,\n    Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      | keyof ButtonOwnProps\n      | 'type'\n      | 'value'\n      | 'role'\n      | 'tabIndex'\n      | 'aria-checked'\n      | 'aria-pressed'\n    > {\n  /**\n   * **Required.** What `onChange` reports when this segment is checked, and\n   * what the group's `value` and `defaultValue` name it by. Unique within the\n   * group.\n   */\n  value: string;\n  /**\n   * The label. An icon on its own needs an `aria-label`, so a screen reader\n   * has something to say.\n   */\n  children?: React.ReactNode;\n  /**\n   * Disables the segment, the same as `disabled`: it can't be clicked, the\n   * arrow keys, Home and End skip it, and it never holds the row's tab stop.\n   * A checked one keeps its fill under Bulma's disabled look.\n   */\n  isDisabled?: boolean;\n  /**\n   * Not accepted: `aria-checked` follows the group's value. Declared because\n   * JSX lets a hyphenated attribute through when the props don't name it.\n   * @internal\n   */\n  'aria-checked'?: never;\n  /**\n   * Not accepted: a segment is a radio, which says checked, not pressed.\n   * @internal\n   */\n  'aria-pressed'?: never;\n}\n\n/**\n * One option in the row: a `<button role=\"radio\">` that's checked while the group's value is its `value`, filled with the group's `color` and marked `is-selected`.\n *\n * @function\n * @param {SegmentedControlSegmentProps} props - Props for the segment.\n * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.\n * @returns {JSX.Element} The rendered segment.\n */\nconst Segment = forwardRef<HTMLButtonElement, SegmentedControlSegmentProps>(\n  function Segment(\n    {\n      value,\n      isDisabled,\n      disabled,\n      className,\n      onClick,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref\n  ) {\n    const ctx = useContext(SegmentedControlContext);\n    const checked = ctx !== null && ctx.checked === value;\n    const off = Boolean(isDisabled || disabled);\n\n    // Prefixed like Button's own classes, which a hand-written\n    // `className=\"is-selected\"` could not be under ConfigProvider classPrefix.\n    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.\n    const selectedClass = usePrefixedClassNames({ 'is-selected': checked });\n\n    const nodeRef = useRef<HTMLButtonElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLButtonElement | null) => {\n        nodeRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    const register = ctx?.register;\n    useEffect(() => {\n      if (!register) {\n        warnOnce(\n          'SegmentedControl.Segment:outside',\n          '[bestax-bulma] <SegmentedControl.Segment> is outside a ' +\n            '<SegmentedControl>, so nothing can check it. Put it inside one.'\n        );\n        return undefined;\n      }\n      return register({\n        value,\n        disabled: off,\n        node: nodeRef.current as HTMLButtonElement,\n      });\n    }, [register, value, off]);\n\n    // The caller's onClick runs first, so a `preventDefault()` there keeps\n    // the segment from being checked. A disabled button gets no click.\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      ctx?.select(value);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(event);\n      if (\n        !ctx ||\n        event.defaultPrevented ||\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey\n      ) {\n        return;\n      }\n      const target = segmentFor(event.currentTarget, event.key);\n      if (!target) return;\n      event.preventDefault();\n      // The row has taken this key, so nothing above it acts on it too: a\n      // Carousel moves its slide on the arrows from a document listener that\n      // doesn't read `defaultPrevented`. Keys the row leaves alone still bubble.\n      event.stopPropagation();\n      target.focus();\n      // The check follows focus, APG's rule for a radio group outside a\n      // toolbar. It goes through a click on the segment, as a native radio's\n      // does, so its onClick sees it. Inside a toolbar the arrows would move\n      // focus alone; that is the line a toolbar would change.\n      target.click();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n      onFocus?.(event);\n      ctx?.setFocused(value);\n    };\n\n    // The segment focus moves to, if any, records itself straight after.\n    const handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n      onBlur?.(event);\n      ctx?.setFocused(undefined);\n    };\n\n    // The props are spread first, so what a radio depends on wins over\n    // anything a JavaScript caller or a spread object passes along: it stays\n    // a button, never submits, reports whether it's checked, and the group\n    // decides whether Tab reaches it.\n    return (\n      <Button\n        {...props}\n        ref={setRefs}\n        as=\"button\"\n        type=\"button\"\n        role=\"radio\"\n        aria-checked={checked}\n        tabIndex={ctx ? (ctx.tabStop === value ? 0 : -1) : undefined}\n        isDisabled={off}\n        color={checked ? ctx.color : undefined}\n        className={classNames(selectedClass, className)}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n    );\n  }\n);\n\nSegment.displayName = 'SegmentedControl.Segment';\n\nexport const SegmentedControl = withSubComponents(\n  SegmentedControlRoot,\n  { Segment },\n  'SegmentedControl'\n);\n\nexport default SegmentedControl;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AAqDA;AACA,MAAM,uBAAuB,GAC3B,aAAa,CAAsC,IAAI,CAAC;AAE1D;AACA,MAAM,eAAe,GAAG,CAAC,CAAgB,EAAE,CAAgB,KACzD,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;MAC1C;MACA,CAAC;AAEP;AACA,MAAM,KAAK,GAA2B;AACpC,IAAA,UAAU,EAAE,CAAC;AACb,IAAA,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,EAAE;IACb,OAAO,EAAE,EAAE;CACZ;AAED;;;;;AAKG;AACH,SAAS,UAAU,CACjB,OAA0B,EAC1B,GAAW,EAAA;IAEX,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,qBAAqB,CAAC;AACpD,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,SAAS;AAC5B,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CACzB,KAAK,CAAC,gBAAgB,CAAoB,gBAAgB,CAAC,CAC5D;AACD,IAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;IAE7D,IAAI,GAAG,KAAK,MAAM;AAAE,QAAA,OAAO,OAAO,CAAC,CAAC,CAAC;IACrC,IAAI,GAAG,KAAK,KAAK;QAAE,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;AAErD,IAAA,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC;AACvB,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,SAAS;IAC3B,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC;AACpC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;QAC5C,MAAM,SAAS,GACb,QAAQ,CAAC,CAAC,EAAE,GAAG,IAAI,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,SAAS,CAAC,QAAQ;AAAE,YAAA,OAAO,SAAS;IAC3C;AACA,IAAA,OAAO,SAAS;AAClB;AAyEA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AACH,MAAM,oBAAoB,GAAG,UAAU,CACrC,SAAS,gBAAgB,CACvB,EACE,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,IAAI,EACJ,SAAS,GAAG,IAAI,EAChB,UAAU,EACV,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EAAA;AAEH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;;AAGlE,IAAA,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS;IACxC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC;AAChE,IAAA,MAAM,OAAO,GAAG,YAAY,IAAI,KAAK,IAAI,SAAS,IAAI,aAAa;AAEnE,IAAA,MAAM,MAAM,GAAG,CAAC,IAAY,KAAI;QAC9B,IAAI,IAAI,KAAK,OAAO;YAAE;AACtB,QAAA,IAAI,CAAC,YAAY;YAAE,gBAAgB,CAAC,IAAI,CAAC;AACzC,QAAA,QAAQ,GAAG,IAAI,CAAC;AAClB,IAAA,CAAC;;;IAID,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC;AAC7D,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,MAAqB,KAAI;AACrD,QAAA,WAAW,CAAC,IAAI,IAAI,CAAC,GAAG,IAAI,EAAE,MAAM,CAAC,CAAC;QACtC,OAAO,MAAM,WAAW,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,CAAC;IAClE,CAAC,EAAE,EAAE,CAAC;IACN,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAsB;;;;;IAM5D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAsB;IACtE,qBAAqB,CAAC,MAAK;QACzB,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;QACtE,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;AACnC,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;;;;;;;;IASxB,MAAM,WAAW,GAAG,CAAC,SAA6B,KAChD,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC;AAC1D,IAAA,IAAI,OAA2B;IAC/B,IAAI,WAAW,CAAC,OAAO,CAAC;QAAE,OAAO,GAAG,OAAO;SACtC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC;QAAE,OAAO,GAAG,OAAO;;QACpE,OAAO,GAAG,YAAY;AAE3B,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACpE,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,KAAK,EAAE;YACV,QAAQ,CACN,0BAA0B,EAC1B,iEAAiE;gBAC/D,iEAAiE;AACjE,gBAAA,gBAAgB,CACnB;QACH;AACF,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,SAAS,EAAE;AAClD,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,OAAO;AACnB,QAAA,CAAC,CAAA,IAAA,EAAO,IAAI,CAAA,CAAE,GAAG,IAAI;AACtB,KAAA,CAAC;;;IAIF,QACEA,IAAC,uBAAuB,CAAC,QAAQ,EAAA,EAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAEhEA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,YAAY,EACjB,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,kBAAkB,EAAE,SAAS,CAAC,YAE/D,QAAQ,EAAA,CACL,EAAA,CAC2B;AAEvC,CAAC,CACF;AAiFD;;;;;;;AAOG;AACH,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,OAAO,CACd,EACE,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACT,EACD,GAAG,EAAA;AAEH,IAAA,MAAM,GAAG,GAAG,UAAU,CAAC,uBAAuB,CAAC;IAC/C,MAAM,OAAO,GAAG,GAAG,KAAK,IAAI,IAAI,GAAG,CAAC,OAAO,KAAK,KAAK;IACrD,MAAM,GAAG,GAAG,OAAO,CAAC,UAAU,IAAI,QAAQ,CAAC;;;;IAK3C,MAAM,aAAa,GAAG,qBAAqB,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC;AAEvE,IAAA,MAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,CAAC;AACtD,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,IAA8B,KAAI;AACjC,QAAA,OAAO,CAAC,OAAO,GAAG,IAAI;QACtB,IAAI,OAAO,GAAG,KAAK,UAAU;YAAE,GAAG,CAAC,IAAI,CAAC;AACnC,aAAA,IAAI,GAAG;AAAE,YAAA,GAAG,CAAC,OAAO,GAAG,IAAI;AAClC,IAAA,CAAC,EACD,CAAC,GAAG,CAAC,CACN;AAED,IAAA,MAAM,QAAQ,GAAG,GAAG,EAAE,QAAQ;IAC9B,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,QAAQ,EAAE;YACb,QAAQ,CACN,kCAAkC,EAClC,yDAAyD;AACvD,gBAAA,iEAAiE,CACpE;AACD,YAAA,OAAO,SAAS;QAClB;AACA,QAAA,OAAO,QAAQ,CAAC;YACd,KAAK;AACL,YAAA,QAAQ,EAAE,GAAG;YACb,IAAI,EAAE,OAAO,CAAC,OAA4B;AAC3C,SAAA,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;;;AAI1B,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AACjE,QAAA,OAAO,GAAG,KAAK,CAAC;QAChB,IAAI,KAAK,CAAC,gBAAgB;YAAE;AAC5B,QAAA,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC;AACpB,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,KAA6C,KAAI;AACtE,QAAA,SAAS,GAAG,KAAK,CAAC;AAClB,QAAA,IACE,CAAC,GAAG;AACJ,YAAA,KAAK,CAAC,gBAAgB;AACtB,YAAA,KAAK,CAAC,MAAM;AACZ,YAAA,KAAK,CAAC,OAAO;YACb,KAAK,CAAC,OAAO,EACb;YACA;QACF;AACA,QAAA,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC;AACzD,QAAA,IAAI,CAAC,MAAM;YAAE;QACb,KAAK,CAAC,cAAc,EAAE;;;;QAItB,KAAK,CAAC,eAAe,EAAE;QACvB,MAAM,CAAC,KAAK,EAAE;;;;;QAKd,MAAM,CAAC,KAAK,EAAE;AAChB,IAAA,CAAC;AAED,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AACjE,QAAA,OAAO,GAAG,KAAK,CAAC;AAChB,QAAA,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC;AACxB,IAAA,CAAC;;AAGD,IAAA,MAAM,UAAU,GAAG,CAAC,KAA0C,KAAI;AAChE,QAAA,MAAM,GAAG,KAAK,CAAC;AACf,QAAA,GAAG,EAAE,UAAU,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC;;;;;IAMD,QACEA,IAAC,MAAM,EAAA,EAAA,GACD,KAAK,EACT,GAAG,EAAE,OAAO,EACZ,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,EAAA,cAAA,EACE,OAAO,EACrB,QAAQ,EAAE,GAAG,IAAI,GAAG,CAAC,OAAO,KAAK,KAAK,GAAG,CAAC,GAAG,EAAE,IAAI,SAAS,EAC5D,UAAU,EAAE,GAAG,EACf,KAAK,EAAE,OAAO,GAAG,GAAG,CAAC,KAAK,GAAG,SAAS,EACtC,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAC/C,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAAA,CAClB;AAEN,CAAC,CACF;AAED,OAAO,CAAC,WAAW,GAAG,0BAA0B;AAEzC,MAAM,gBAAgB,GAAG,iBAAiB,CAC/C,oBAAoB,EACpB,EAAE,OAAO,EAAE,EACX,kBAAkB;;"}

package/dist/esm/elements/ToggleButton.js

@@ -11,7 +11,8 @@ import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
  * carries no form value: a setting saved with a form is a `Checkbox` or a
  * `Switch`. A set of toggles that each turn on and off on their own goes in
  * `Buttons hasAddons` with `role="group"` and an `aria-label`. A set where only
- * one can be on is a radio group rather than a row of these: use `Radios`.
+ * one can be on is a radio group rather than a row of these: use
+ * `SegmentedControl`, or `Radios` for a choice that's sent with a form.
  *
  * @function
  * @param {ToggleButtonProps} props - Props for the ToggleButton component.

package/dist/esm/elements/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../../../src/elements/ToggleButton.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport { Button, type ButtonOwnProps } from './Button';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\n\n// Spelled out rather than as an `Exclude` of Button's colors so the API page\n// can list the values. The tests hold it to that `Exclude`, so a color Button\n// gains fails there until it's added here or left out on purpose.\n/**\n * The fills a pressed `ToggleButton` takes: `Button`'s colors, minus `text`\n * and `ghost`, which don't fill, and `white`, `light`, `dark` and `black`.\n * Bulma's color modifier fills the button and drops its border, and those four\n * fill it with about the lightness a plain button already has in one theme or\n * the other, so pressed would look like off without its border.\n */\nexport type ToggleButtonColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Props for the ToggleButton component. The helper props, the other button\n * attributes and the `ref` all land on the `<button>`.\n *\n * Some of `Button`'s props are left out on purpose. `as`, since only a button\n * can be pressed, and `type`, which is always `button`. `isActive`, which is\n * `pressed` here, and `isStatic`, a toggle you couldn't press. And the props\n * that change the fill (`isLight`, `isOutlined`, `isInverted`, `textColor`,\n * `bgColor` and their shades), since each would color the button in both\n * states or turn \"on\" into a faint tint. `color` takes only the fills that\n * stand out from a plain button: see `ToggleButtonColor`.\n *\n * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the `<button>`.\n */\nexport interface ToggleButtonProps\n  extends\n    Omit<\n      ButtonOwnProps,\n      | 'color'\n      | 'isActive'\n      | 'isStatic'\n      | 'isLight'\n      | 'isOutlined'\n      | 'isInverted'\n      | 'textColor'\n      | 'bgColor'\n      | 'colorShade'\n      | 'backgroundColorShade'\n    >,\n    Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      keyof ButtonOwnProps | 'type' | 'aria-pressed'\n    > {\n  /**\n   * Whether it's pressed, when you hold the state. Setting it makes the toggle\n   * controlled: a click only calls `onPressedChange`, and nothing changes until\n   * you pass the new value. Pick this or `defaultPressed` for the button's\n   * lifetime.\n   */\n  pressed?: boolean;\n  /** Whether it starts pressed, when it holds its own state. */\n  defaultPressed?: boolean;\n  /**\n   * Called with the new state each time it's toggled, whether or not\n   * `pressed` is set. An `onClick` that calls `preventDefault()` stops the\n   * toggle, and this doesn't fire.\n   */\n  onPressedChange?: (pressed: boolean) => void;\n  /**\n   * The fill while it's pressed. Not pressed, it's a plain button, so the fill\n   * is the difference people see. `white`, `light`, `dark` and `black` aren't\n   * offered, since in one theme or the other each fills about as light or dark\n   * as a plain button already is. Of the rest, a pale one such as `warning`\n   * changes less than the default `link`.\n   */\n  color?: ToggleButtonColor;\n  /**\n   * The label, which stays the same in both states: a screen reader announces\n   * whether it's pressed, so \"Mute\" stays \"Mute\". An icon can swap, but an\n   * icon-only toggle needs an `aria-label` that doesn't. A label that changes\n   * (\"Play\", then \"Pause\") belongs on a plain `Button`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Shows Bulma's spinner in place of the label and holds the toggle where it\n   * is: a click, Enter or Space does nothing, so neither `onClick` nor\n   * `onPressedChange` fires, until it's cleared. Set it while a change is\n   * saving. The button carries `aria-busy` and `aria-disabled` meanwhile, and\n   * stays focusable, so focus isn't lost mid-save. Under\n   * `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with\n   * bestax's CSS loaded).\n   */\n  isLoading?: boolean;\n  /**\n   * Not accepted: `aria-pressed` follows the state. Declared because JSX lets a\n   * hyphenated attribute through when the props don't name it, so leaving it\n   * out of the type alone would not reject `aria-pressed=\"mixed\"`.\n   * @internal\n   */\n  'aria-pressed'?: never;\n}\n\n/**\n * The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.\n *\n * It's always a `<button type=\"button\">`, so it never submits a form and\n * carries no form value: a setting saved with a form is a `Checkbox` or a\n * `Switch`. A set of toggles that each turn on and off on their own goes in\n * `Buttons hasAddons` with `role=\"group\"` and an `aria-label`. A set where only\n * one can be on is a radio group rather than a row of these: use `Radios`.\n *\n * @function\n * @param {ToggleButtonProps} props - Props for the ToggleButton component.\n * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.\n * @returns {JSX.Element} The rendered toggle button.\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | APG button pattern}\n *\n * @example\n * <ToggleButton onPressedChange={setMuted}>Mute</ToggleButton>\n *\n * @example\n * <Buttons hasAddons role=\"group\" aria-label=\"Text style\">\n *   <ToggleButton aria-label=\"Bold\" pressed={bold} onPressedChange={setBold}>\n *     <Icon name=\"bold\" />\n *   </ToggleButton>\n * </Buttons>\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(\n    {\n      pressed: controlledPressed,\n      defaultPressed = false,\n      onPressedChange,\n      color = 'link',\n      isLoading,\n      'aria-busy': ariaBusy,\n      'aria-disabled': ariaDisabled,\n      className,\n      onClick,\n      ...props\n    },\n    ref\n  ) {\n    const isControlled = controlledPressed !== undefined;\n    const [internalPressed, setInternalPressed] = useState(defaultPressed);\n    const pressed = controlledPressed ?? internalPressed;\n\n    // Prefixed like Button's own classes, which a hand-written\n    // `className=\"is-selected\"` could not be under ConfigProvider classPrefix.\n    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.\n    const selectedClass = usePrefixedClassNames({ 'is-selected': pressed });\n\n    // The caller's onClick runs first, so a `preventDefault()` there vetoes\n    // the toggle, as it does in Radix, MUI and Zag. Enter and Space reach here\n    // through the button's own click, and a disabled button gets no click.\n    //\n    // A loading one gets the click but drops it. Bulma's spinner only stops a\n    // pointer, so without this a key flipped a toggle the mouse couldn't.\n    // `disabled` would stop both, but it takes focus away mid-save.\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (isLoading) return;\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      const next = !pressed;\n      onPressedChange?.(next);\n      if (!isControlled) setInternalPressed(next);\n    };\n\n    // The props are spread first, so what a toggle depends on wins over\n    // anything a JavaScript caller or a spread object passes along: it stays\n    // a button, never submits, reports the state it's in, and says it's busy\n    // and won't respond while it's loading. A caller's own `aria-busy` or\n    // `aria-disabled` stays when it isn't loading.\n    return (\n      <Button\n        {...props}\n        ref={ref}\n        as=\"button\"\n        type=\"button\"\n        isLoading={isLoading}\n        aria-busy={isLoading || ariaBusy}\n        aria-disabled={isLoading || ariaDisabled}\n        aria-pressed={pressed}\n        color={pressed ? color : undefined}\n        className={classNames(selectedClass, className)}\n        onClick={handleClick}\n      />\n    );\n  }\n);\n\nToggleButton.displayName = 'ToggleButton';\n\nexport default ToggleButton;\n"],"names":["_jsx"],"mappings":";;;;;;AAmGA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACI,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EACE,OAAO,EAAE,iBAAiB,EAC1B,cAAc,GAAG,KAAK,EACtB,eAAe,EACf,KAAK,GAAG,MAAM,EACd,SAAS,EACT,WAAW,EAAE,QAAQ,EACrB,eAAe,EAAE,YAAY,EAC7B,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EACD,GAAG,EAAA;AAEH,IAAA,MAAM,YAAY,GAAG,iBAAiB,KAAK,SAAS;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC;AACtE,IAAA,MAAM,OAAO,GAAG,iBAAiB,IAAI,eAAe;;;;IAKpD,MAAM,aAAa,GAAG,qBAAqB,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC;;;;;;;;AASvE,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AACjE,QAAA,IAAI,SAAS;YAAE;AACf,QAAA,OAAO,GAAG,KAAK,CAAC;QAChB,IAAI,KAAK,CAAC,gBAAgB;YAAE;AAC5B,QAAA,MAAM,IAAI,GAAG,CAAC,OAAO;AACrB,QAAA,eAAe,GAAG,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,YAAY;YAAE,kBAAkB,CAAC,IAAI,CAAC;AAC7C,IAAA,CAAC;;;;;;IAOD,QACEA,GAAA,CAAC,MAAM,EAAA,EAAA,GACD,KAAK,EACT,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EAAA,WAAA,EACT,SAAS,IAAI,QAAQ,EAAA,eAAA,EACjB,SAAS,IAAI,YAAY,kBAC1B,OAAO,EACrB,KAAK,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,EAClC,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAC/C,OAAO,EAAE,WAAW,EAAA,CACpB;AAEN,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;"}
+{"version":3,"file":"ToggleButton.js","sources":["../../../src/elements/ToggleButton.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport { Button, type ButtonOwnProps } from './Button';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\n\n// Spelled out rather than as an `Exclude` of Button's colors so the API page\n// can list the values. The tests hold it to that `Exclude`, so a color Button\n// gains fails there until it's added here or left out on purpose.\n/**\n * The fills a pressed `ToggleButton` takes: `Button`'s colors, minus `text`\n * and `ghost`, which don't fill, and `white`, `light`, `dark` and `black`.\n * Bulma's color modifier fills the button and drops its border, and those four\n * fill it with about the lightness a plain button already has in one theme or\n * the other, so pressed would look like off without its border.\n */\nexport type ToggleButtonColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Props for the ToggleButton component. The helper props, the other button\n * attributes and the `ref` all land on the `<button>`.\n *\n * Some of `Button`'s props are left out on purpose. `as`, since only a button\n * can be pressed, and `type`, which is always `button`. `isActive`, which is\n * `pressed` here, and `isStatic`, a toggle you couldn't press. And the props\n * that change the fill (`isLight`, `isOutlined`, `isInverted`, `textColor`,\n * `bgColor` and their shades), since each would color the button in both\n * states or turn \"on\" into a faint tint. `color` takes only the fills that\n * stand out from a plain button: see `ToggleButtonColor`.\n *\n * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the `<button>`.\n */\nexport interface ToggleButtonProps\n  extends\n    Omit<\n      ButtonOwnProps,\n      | 'color'\n      | 'isActive'\n      | 'isStatic'\n      | 'isLight'\n      | 'isOutlined'\n      | 'isInverted'\n      | 'textColor'\n      | 'bgColor'\n      | 'colorShade'\n      | 'backgroundColorShade'\n    >,\n    Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      keyof ButtonOwnProps | 'type' | 'aria-pressed'\n    > {\n  /**\n   * Whether it's pressed, when you hold the state. Setting it makes the toggle\n   * controlled: a click only calls `onPressedChange`, and nothing changes until\n   * you pass the new value. Pick this or `defaultPressed` for the button's\n   * lifetime.\n   */\n  pressed?: boolean;\n  /** Whether it starts pressed, when it holds its own state. */\n  defaultPressed?: boolean;\n  /**\n   * Called with the new state each time it's toggled, whether or not\n   * `pressed` is set. An `onClick` that calls `preventDefault()` stops the\n   * toggle, and this doesn't fire.\n   */\n  onPressedChange?: (pressed: boolean) => void;\n  /**\n   * The fill while it's pressed. Not pressed, it's a plain button, so the fill\n   * is the difference people see. `white`, `light`, `dark` and `black` aren't\n   * offered, since in one theme or the other each fills about as light or dark\n   * as a plain button already is. Of the rest, a pale one such as `warning`\n   * changes less than the default `link`.\n   */\n  color?: ToggleButtonColor;\n  /**\n   * The label, which stays the same in both states: a screen reader announces\n   * whether it's pressed, so \"Mute\" stays \"Mute\". An icon can swap, but an\n   * icon-only toggle needs an `aria-label` that doesn't. A label that changes\n   * (\"Play\", then \"Pause\") belongs on a plain `Button`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Shows Bulma's spinner in place of the label and holds the toggle where it\n   * is: a click, Enter or Space does nothing, so neither `onClick` nor\n   * `onPressedChange` fires, until it's cleared. Set it while a change is\n   * saving. The button carries `aria-busy` and `aria-disabled` meanwhile, and\n   * stays focusable, so focus isn't lost mid-save. Under\n   * `prefers-reduced-motion: reduce` the spinner stops and stays drawn (with\n   * bestax's CSS loaded).\n   */\n  isLoading?: boolean;\n  /**\n   * Not accepted: `aria-pressed` follows the state. Declared because JSX lets a\n   * hyphenated attribute through when the props don't name it, so leaving it\n   * out of the type alone would not reject `aria-pressed=\"mixed\"`.\n   * @internal\n   */\n  'aria-pressed'?: never;\n}\n\n/**\n * The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.\n *\n * It's always a `<button type=\"button\">`, so it never submits a form and\n * carries no form value: a setting saved with a form is a `Checkbox` or a\n * `Switch`. A set of toggles that each turn on and off on their own goes in\n * `Buttons hasAddons` with `role=\"group\"` and an `aria-label`. A set where only\n * one can be on is a radio group rather than a row of these: use\n * `SegmentedControl`, or `Radios` for a choice that's sent with a form.\n *\n * @function\n * @param {ToggleButtonProps} props - Props for the ToggleButton component.\n * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.\n * @returns {JSX.Element} The rendered toggle button.\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | APG button pattern}\n *\n * @example\n * <ToggleButton onPressedChange={setMuted}>Mute</ToggleButton>\n *\n * @example\n * <Buttons hasAddons role=\"group\" aria-label=\"Text style\">\n *   <ToggleButton aria-label=\"Bold\" pressed={bold} onPressedChange={setBold}>\n *     <Icon name=\"bold\" />\n *   </ToggleButton>\n * </Buttons>\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(\n    {\n      pressed: controlledPressed,\n      defaultPressed = false,\n      onPressedChange,\n      color = 'link',\n      isLoading,\n      'aria-busy': ariaBusy,\n      'aria-disabled': ariaDisabled,\n      className,\n      onClick,\n      ...props\n    },\n    ref\n  ) {\n    const isControlled = controlledPressed !== undefined;\n    const [internalPressed, setInternalPressed] = useState(defaultPressed);\n    const pressed = controlledPressed ?? internalPressed;\n\n    // Prefixed like Button's own classes, which a hand-written\n    // `className=\"is-selected\"` could not be under ConfigProvider classPrefix.\n    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.\n    const selectedClass = usePrefixedClassNames({ 'is-selected': pressed });\n\n    // The caller's onClick runs first, so a `preventDefault()` there vetoes\n    // the toggle, as it does in Radix, MUI and Zag. Enter and Space reach here\n    // through the button's own click, and a disabled button gets no click.\n    //\n    // A loading one gets the click but drops it. Bulma's spinner only stops a\n    // pointer, so without this a key flipped a toggle the mouse couldn't.\n    // `disabled` would stop both, but it takes focus away mid-save.\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (isLoading) return;\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      const next = !pressed;\n      onPressedChange?.(next);\n      if (!isControlled) setInternalPressed(next);\n    };\n\n    // The props are spread first, so what a toggle depends on wins over\n    // anything a JavaScript caller or a spread object passes along: it stays\n    // a button, never submits, reports the state it's in, and says it's busy\n    // and won't respond while it's loading. A caller's own `aria-busy` or\n    // `aria-disabled` stays when it isn't loading.\n    return (\n      <Button\n        {...props}\n        ref={ref}\n        as=\"button\"\n        type=\"button\"\n        isLoading={isLoading}\n        aria-busy={isLoading || ariaBusy}\n        aria-disabled={isLoading || ariaDisabled}\n        aria-pressed={pressed}\n        color={pressed ? color : undefined}\n        className={classNames(selectedClass, className)}\n        onClick={handleClick}\n      />\n    );\n  }\n);\n\nToggleButton.displayName = 'ToggleButton';\n\nexport default ToggleButton;\n"],"names":["_jsx"],"mappings":";;;;;;AAmGA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACI,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CACnB,EACE,OAAO,EAAE,iBAAiB,EAC1B,cAAc,GAAG,KAAK,EACtB,eAAe,EACf,KAAK,GAAG,MAAM,EACd,SAAS,EACT,WAAW,EAAE,QAAQ,EACrB,eAAe,EAAE,YAAY,EAC7B,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EACD,GAAG,EAAA;AAEH,IAAA,MAAM,YAAY,GAAG,iBAAiB,KAAK,SAAS;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC;AACtE,IAAA,MAAM,OAAO,GAAG,iBAAiB,IAAI,eAAe;;;;IAKpD,MAAM,aAAa,GAAG,qBAAqB,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC;;;;;;;;AASvE,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AACjE,QAAA,IAAI,SAAS;YAAE;AACf,QAAA,OAAO,GAAG,KAAK,CAAC;QAChB,IAAI,KAAK,CAAC,gBAAgB;YAAE;AAC5B,QAAA,MAAM,IAAI,GAAG,CAAC,OAAO;AACrB,QAAA,eAAe,GAAG,IAAI,CAAC;AACvB,QAAA,IAAI,CAAC,YAAY;YAAE,kBAAkB,CAAC,IAAI,CAAC;AAC7C,IAAA,CAAC;;;;;;IAOD,QACEA,GAAA,CAAC,MAAM,EAAA,EAAA,GACD,KAAK,EACT,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EAAA,WAAA,EACT,SAAS,IAAI,QAAQ,EAAA,eAAA,EACjB,SAAS,IAAI,YAAY,kBAC1B,OAAO,EACrB,KAAK,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,EAClC,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAC/C,OAAO,EAAE,WAAW,EAAA,CACpB;AAEN,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;"}