@allxsmith/bestax-bulma 5.29.0 → 5.31.0

package/dist/esm/components/HoverCard.js

@@ -6,17 +6,10 @@ import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
 import { Portal } from '../helpers/portal.js';
 import { useIsHydrated } from '../helpers/useIsHydrated.js';
 import { useAnchoredPosition, marginGap } from '../helpers/useAnchoredPosition.js';
-import { useHoverOpen } from '../helpers/useHoverOpen.js';
+import { useHoverOpen, chain } from '../helpers/useHoverOpen.js';
 import { isTabbableKind } from '../helpers/useFocusTrap.js';
 import { isDev, warnOnce } from '../helpers/devWarnings.js';
 
-/** Runs the caller's handler on the wrapper, then the hover card's. */
-function chain(own, ours) {
-    return event => {
-        own?.(event);
-        ours(event);
-    };
-}
 /**
  * The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.
  *
@@ -41,7 +34,7 @@ function chain(own, ours) {
  */
 const HoverCard = ({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, openDelay = 600, closeDelay = 300, position = 'bottom-left', appendToBody = false, openOnTap = false, className, contentClassName, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const { onPointerEnter, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
+    const { onPointerEnter, onPointerOver, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
     const rootRef = useRef(null);
     const cardRef = useRef(null);
     const cardId = `${useId()}-card`;
@@ -114,7 +107,7 @@ const HoverCard = ({ trigger, children, open: controlledOpen, defaultOpen = fals
         [`is-${resolved.position}`]: true,
         'is-portal': appendToBody,
     }), contentClassName);
-    return (jsxs("span", { className: rootClasses, ...attrs, onPointerEnter: chain(onPointerEnter, hover.onPointerEnter), onPointerLeave: chain(onPointerLeave, hover.onPointerLeave), onFocus: chain(onFocus, hover.onFocus), onBlur: chain(onBlur, hover.onBlur), onPointerDown: chain(onPointerDown, hover.onPointerDown), onPointerUp: chain(onPointerUp, hover.onPointerUp), ref: rootRef, children: [clonedTrigger, isOpen && (jsx(Portal, { disabled: !appendToBody, children: jsx("div", { ref: cardRef, id: cardId, className: cardClasses, style: appendToBody
+    return (jsxs("span", { className: rootClasses, ...attrs, onPointerEnter: chain(onPointerEnter, hover.onPointerEnter), onPointerOver: chain(onPointerOver, hover.onPointerOver), onPointerLeave: chain(onPointerLeave, hover.onPointerLeave), onFocus: chain(onFocus, hover.onFocus), onBlur: chain(onBlur, hover.onBlur), onPointerDown: chain(onPointerDown, hover.onPointerDown), onPointerUp: chain(onPointerUp, hover.onPointerUp), ref: rootRef, children: [clonedTrigger, isOpen && (jsx(Portal, { disabled: !appendToBody, children: jsx("div", { ref: cardRef, id: cardId, className: cardClasses, style: appendToBody
                         ? {
                             position: 'fixed',
                             top: resolved.top,

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

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.js","sources":["../../../src/components/HoverCard.tsx"],"sourcesContent":["import React, {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { Portal } from '../helpers/portal';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { marginGap, useAnchoredPosition } from '../helpers/useAnchoredPosition';\nimport { useHoverOpen } from '../helpers/useHoverOpen';\nimport { isTabbableKind } from '../helpers/useFocusTrap';\nimport { isDev, warnOnce } from '../helpers/devWarnings';\nimport type { PickerPosition } from '../form/_pickerInternals/pickerTypes';\n\n/**\n * Where the card opens against its trigger: below (`bottom-*`) or above\n * (`top-*`), lined up with the trigger's left or right edge. `auto` picks the\n * one that keeps the card in the viewport, preferring below and lined up on\n * the left. The same union `Popover` and the date and time pickers take.\n */\nexport type HoverCardPosition = PickerPosition;\n\n/**\n * Props for the HoverCard component. `className`, `id`, the other HTML\n * attributes and the helper props land on the `span` around the trigger, not\n * on the card; `contentClassName` reaches the card.\n * @extraProp {string} [className] - Additional classes for the `span` around the trigger. The card takes `contentClassName`.\n */\nexport interface HoverCardProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'children'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * The element the card previews, such as a link or a `Button`. The element\n   * itself has to take focus, so keyboard users can open the card too: a\n   * link inside a `<span>` doesn't do, since focus comes back to the trigger\n   * and its ARIA is on it. HoverCard gives it no role and no tab stop, since\n   * it can't know what the element is, and a development build warns when\n   * it can't take focus: use a link or a button, or give the element\n   * `tabIndex={0}`. A disabled button can't take focus either. HoverCard adds\n   * `aria-expanded` and `aria-controls`, both naming the card only while it\n   * is on the page, so it has to be a single element that passes those to\n   * its DOM node. Its own click and keys stay its own, and the card doesn't\n   * toggle on them, except Escape while the card is open, which closes the\n   * card before the trigger sees it.\n   */\n  trigger: React.ReactElement;\n  /**\n   * The card's content: a preview whose links and buttons are fine, but not a\n   * form, which belongs in a `Popover`. The card pads itself, so content goes\n   * straight in.\n   */\n  children?: React.ReactNode;\n  /**\n   * Controlled open state. When set, hover, focus and Escape only report\n   * through `onOpenChange`, so an action inside the card can close it. While\n   * the card is open, Escape is reported, and when focus is in the card, on\n   * its trigger or nowhere, the key stops there even if you keep the card\n   * open, so a `Modal` around it doesn't close from the keyboard until the\n   * card does.\n   */\n  open?: boolean;\n  /**\n   * Initial open state when uncontrolled. A card that starts open stays open\n   * until the pointer or focus has been and gone, or Escape closes it.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the state asked for: when `openDelay` or `closeDelay` runs\n   * out, and right away on Escape. Fires in both controlled and uncontrolled\n   * use. An Escape it reports stops at the card when focus is in the card,\n   * on its trigger or nowhere, so nothing around it sees that key. With\n   * focus anywhere else, the card still closes and the key goes on to\n   * whatever has focus.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * How long the pointer or keyboard focus waits on the trigger before the\n   * card opens, in milliseconds.\n   * @defaultValue 600\n   */\n  openDelay?: number;\n  /**\n   * How long the card stays after the pointer and focus have left the trigger\n   * and the card, in milliseconds. It is the time the pointer has to cross\n   * the gap between the trigger and the card: with `0` the card closes as the\n   * pointer leaves the trigger, before the pointer can reach it.\n   * @defaultValue 300\n   */\n  closeDelay?: number;\n  /**\n   * Where the card opens against the trigger.\n   * @defaultValue 'bottom-left'\n   */\n  position?: HoverCardPosition;\n  /**\n   * Render the card through `Portal`, into the `portalContainer` a\n   * `ConfigProvider` sets, `document.body` by default, fixed to the viewport,\n   * so an ancestor's `overflow`, `transform` or stacking context can't clip\n   * it. A trigger in running text needs it too, since the card's block\n   * content can't sit inside a `<p>`. The card then shows from the commit\n   * after hydration, never in server markup, and it sits in the Tab order\n   * where its container is. At the end of `<body>`, the default, Tab reaches\n   * it only after the rest of the page, and focus leaving the trigger on the\n   * way closes it, so keyboard users can open it, read it and close it with\n   * Escape, and whatever it links to has to be reachable from the page as\n   * well. It is measured against the trigger when it opens and on resize and\n   * scroll, so it doesn't follow content that changes size while it is open.\n   * Theming variables set on an ancestor of the trigger reach it only when its\n   * container is inside that ancestor.\n   * @defaultValue false\n   */\n  appendToBody?: boolean;\n  /**\n   * Open the card with a tap on a touch screen. Touch has no hover, so\n   * without this a phone or tablet never opens the card. With it, a tap on\n   * the trigger opens the card at once, and it stays until a second tap on\n   * the trigger, a tap outside the trigger and the card, or Escape. The tap\n   * still does whatever the trigger does, so turn this on only for a trigger\n   * with no tap action of its own, such as a `Button` with no `onClick`: on\n   * a link, the first tap would follow the link rather than show the card.\n   * Mouse and pen work the same either way.\n   * @defaultValue false\n   */\n  openOnTap?: boolean;\n  /** Additional classes for the card (`.hover-card-content`). */\n  contentClassName?: string;\n}\n\n/** Runs the caller's handler on the wrapper, then the hover card's. */\nfunction chain<E>(\n  own: ((event: E) => void) | undefined,\n  ours: (event: E) => void\n): (event: E) => void {\n  return event => {\n    own?.(event);\n    ours(event);\n  };\n}\n\n/**\n * The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.\n *\n * Nothing moves focus when the card opens, and nothing traps it. In place,\n * the card comes right after the trigger, so Tab goes from the trigger into\n * its links and tabbing past them closes it. The pointer can move onto the\n * card, Escape closes it from anywhere, and by default touch doesn't open it,\n * so tapping the trigger just does what the trigger does. `openOnTap` opens\n * it with a tap, for a trigger with no tap action of its own. For hints with nothing to\n * click use `Tooltip`, and for content opened on purpose, such as a form,\n * use `Popover`.\n *\n * @function\n * @param {HoverCardProps} props - Props for the HoverCard component.\n * @returns {JSX.Element} The trigger in its wrapper, and the card while open.\n *\n * @example\n * <HoverCard trigger={<a href=\"/people/ada\">Ada Lovelace</a>}>\n *   <Title as=\"p\" size=\"6\">Ada Lovelace</Title>\n *   <SubTitle as=\"p\" size=\"6\">Analytical Engine team</SubTitle>\n * </HoverCard>\n */\nexport const HoverCard: React.FC<HoverCardProps> = ({\n  trigger,\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  openDelay = 600,\n  closeDelay = 300,\n  position = 'bottom-left',\n  appendToBody = false,\n  openOnTap = false,\n  className,\n  contentClassName,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const {\n    onPointerEnter,\n    onPointerLeave,\n    onPointerDown,\n    onPointerUp,\n    onFocus,\n    onBlur,\n    ...attrs\n  } = rest;\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const cardRef = useRef<HTMLDivElement>(null);\n  const cardId = `${useId()}-card`;\n\n  const isControlled = controlledOpen !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = controlledOpen ?? internalOpen;\n\n  const requestOpen = useCallback(\n    (next: boolean) => {\n      onOpenChange?.(next);\n      if (!isControlled) setInternalOpen(next);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  // A portaled card has no server markup, so it only exists from the commit\n  // after hydration, and nothing measures it before then.\n  const hydrated = useIsHydrated();\n  const cardMounted = isOpen && (hydrated || !appendToBody);\n\n  const resolved = useAnchoredPosition(rootRef, cardRef, {\n    active: cardMounted,\n    position,\n    fixed: appendToBody,\n    // The gap comes from `--bulma-hover-card-offset` in the stylesheet, so\n    // the coordinates leave it out and `auto` reads it off the card.\n    offset: 0,\n    styledGap: marginGap,\n  });\n\n  // The trigger renders first inside the wrapper. Read when needed rather\n  // than held, so a trigger that remounted is still the one found.\n  const triggerRef = useMemo(\n    () => ({\n      get current() {\n        const first = (rootRef.current as HTMLSpanElement).firstElementChild;\n        return first && first !== cardRef.current\n          ? (first as HTMLElement)\n          : null;\n      },\n    }),\n    []\n  );\n\n  const hover = useHoverOpen({\n    open: isOpen,\n    onOpenChange: requestOpen,\n    openDelay,\n    closeDelay,\n    triggerRef,\n    floatingRef: cardRef,\n    openOnTap,\n  });\n\n  // A trigger that can't take focus leaves keyboard users no way to open the\n  // card. It has to be the trigger element itself, not something inside it,\n  // since focus comes back to it and its ARIA is on it. Judged by what the\n  // element is rather than by its styles, which can hide it for now. After\n  // every commit, since the trigger can change, and only in development.\n  useEffect(() => {\n    if (!isDev()) return;\n    const triggerNode = triggerRef.current;\n    if (!triggerNode) return;\n    if (!triggerNode.matches(':disabled') && isTabbableKind(triggerNode)) {\n      return;\n    }\n    warnOnce(\n      'HoverCard:unfocusable-trigger',\n      \"[bestax-bulma] <HoverCard> has a trigger that can't take focus, so \" +\n        \"keyboard users can't open the card. Use a link or a button as the \" +\n        'trigger, or give it tabIndex={0}.'\n    );\n  });\n\n  // Expanded only while the card is on the page, so a portaled card that\n  // waits for hydration isn't announced before it exists.\n  const clonedTrigger = cloneElement(\n    trigger as React.ReactElement<Record<string, unknown>>,\n    {\n      'aria-expanded': cardMounted,\n      'aria-controls': cardMounted ? cardId : undefined,\n    }\n  );\n\n  const rootClasses = classNames(\n    usePrefixedClassNames('hover-card', { 'is-active': cardMounted }),\n    bulmaHelperClasses,\n    className\n  );\n  const cardClasses = classNames(\n    usePrefixedClassNames('hover-card-content', {\n      [`is-${resolved.position}`]: true,\n      'is-portal': appendToBody,\n    }),\n    contentClassName\n  );\n\n  return (\n    // The ref after the spread: React 19 hands a function component a `ref`\n    // prop like any other, and the wrapper has to stay ours. The card is in\n    // the wrapper's React tree even when portaled, so the hover and focus\n    // handlers here hear from both.\n    <span\n      className={rootClasses}\n      {...attrs}\n      onPointerEnter={chain(onPointerEnter, hover.onPointerEnter)}\n      onPointerLeave={chain(onPointerLeave, hover.onPointerLeave)}\n      onFocus={chain(onFocus, hover.onFocus)}\n      onBlur={chain(onBlur, hover.onBlur)}\n      onPointerDown={chain(onPointerDown, hover.onPointerDown)}\n      onPointerUp={chain(onPointerUp, hover.onPointerUp)}\n      ref={rootRef}\n    >\n      {clonedTrigger}\n      {isOpen && (\n        <Portal disabled={!appendToBody}>\n          <div\n            ref={cardRef}\n            id={cardId}\n            className={cardClasses}\n            style={\n              appendToBody\n                ? {\n                    position: 'fixed',\n                    top: resolved.top,\n                    left: resolved.left,\n                  }\n                : undefined\n            }\n          >\n            {children}\n          </div>\n        </Portal>\n      )}\n    </span>\n  );\n};\n\nexport default HoverCard;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"HoverCard.js","sources":["../../../src/components/HoverCard.tsx"],"sourcesContent":["import React, {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { Portal } from '../helpers/portal';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { marginGap, useAnchoredPosition } from '../helpers/useAnchoredPosition';\nimport { chain, useHoverOpen } from '../helpers/useHoverOpen';\nimport { isTabbableKind } from '../helpers/useFocusTrap';\nimport { isDev, warnOnce } from '../helpers/devWarnings';\nimport type { PickerPosition } from '../form/_pickerInternals/pickerTypes';\n\n/**\n * Where the card opens against its trigger: below (`bottom-*`) or above\n * (`top-*`), lined up with the trigger's left or right edge. `auto` picks the\n * one that keeps the card in the viewport, preferring below and lined up on\n * the left. The same union `Popover` and the date and time pickers take.\n */\nexport type HoverCardPosition = PickerPosition;\n\n/**\n * Props for the HoverCard component. `className`, `id`, the other HTML\n * attributes and the helper props land on the `span` around the trigger, not\n * on the card; `contentClassName` reaches the card.\n * @extraProp {string} [className] - Additional classes for the `span` around the trigger. The card takes `contentClassName`.\n */\nexport interface HoverCardProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'children'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * The element the card previews, such as a link or a `Button`. The element\n   * itself has to take focus, so keyboard users can open the card too: a\n   * link inside a `<span>` doesn't do, since focus comes back to the trigger\n   * and its ARIA is on it. HoverCard gives it no role and no tab stop, since\n   * it can't know what the element is, and a development build warns when\n   * it can't take focus: use a link or a button, or give the element\n   * `tabIndex={0}`. A disabled button can't take focus either. HoverCard adds\n   * `aria-expanded` and `aria-controls`, both naming the card only while it\n   * is on the page, so it has to be a single element that passes those to\n   * its DOM node. Its own click and keys stay its own, and the card doesn't\n   * toggle on them, except Escape while the card is open, which closes the\n   * card before the trigger sees it.\n   */\n  trigger: React.ReactElement;\n  /**\n   * The card's content: a preview whose links and buttons are fine, but not a\n   * form, which belongs in a `Popover`. The card pads itself, so content goes\n   * straight in.\n   */\n  children?: React.ReactNode;\n  /**\n   * Controlled open state. When set, hover, focus and Escape only report\n   * through `onOpenChange`, so an action inside the card can close it. While\n   * the card is open, Escape is reported, and when focus is in the card, on\n   * its trigger or nowhere, the key stops there even if you keep the card\n   * open, so a `Modal` around it doesn't close from the keyboard until the\n   * card does.\n   */\n  open?: boolean;\n  /**\n   * Initial open state when uncontrolled. A card that starts open stays open\n   * until the pointer or focus has been and gone, or Escape closes it.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the state asked for: when `openDelay` or `closeDelay` runs\n   * out, and right away on Escape. Fires in both controlled and uncontrolled\n   * use. An Escape it reports stops at the card when focus is in the card,\n   * on its trigger or nowhere, so nothing around it sees that key. With\n   * focus anywhere else, the card still closes and the key goes on to\n   * whatever has focus.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * How long the pointer or keyboard focus waits on the trigger before the\n   * card opens, in milliseconds.\n   * @defaultValue 600\n   */\n  openDelay?: number;\n  /**\n   * How long the card stays after the pointer and focus have left the trigger\n   * and the card, in milliseconds. It is the time the pointer has to cross\n   * the gap between the trigger and the card: with `0` the card closes as the\n   * pointer leaves the trigger, before the pointer can reach it.\n   * @defaultValue 300\n   */\n  closeDelay?: number;\n  /**\n   * Where the card opens against the trigger.\n   * @defaultValue 'bottom-left'\n   */\n  position?: HoverCardPosition;\n  /**\n   * Render the card through `Portal`, into the `portalContainer` a\n   * `ConfigProvider` sets, `document.body` by default, fixed to the viewport,\n   * so an ancestor's `overflow`, `transform` or stacking context can't clip\n   * it. A trigger in running text needs it too, since the card's block\n   * content can't sit inside a `<p>`. The card then shows from the commit\n   * after hydration, never in server markup, and it sits in the Tab order\n   * where its container is. At the end of `<body>`, the default, Tab reaches\n   * it only after the rest of the page, and focus leaving the trigger on the\n   * way closes it, so keyboard users can open it, read it and close it with\n   * Escape, and whatever it links to has to be reachable from the page as\n   * well. It is measured against the trigger when it opens and on resize and\n   * scroll, so it doesn't follow content that changes size while it is open.\n   * Theming variables set on an ancestor of the trigger reach it only when its\n   * container is inside that ancestor.\n   * @defaultValue false\n   */\n  appendToBody?: boolean;\n  /**\n   * Open the card with a tap on a touch screen. Touch has no hover, so\n   * without this a phone or tablet never opens the card. With it, a tap on\n   * the trigger opens the card at once, and it stays until a second tap on\n   * the trigger, a tap outside the trigger and the card, or Escape. The tap\n   * still does whatever the trigger does, so turn this on only for a trigger\n   * with no tap action of its own, such as a `Button` with no `onClick`: on\n   * a link, the first tap would follow the link rather than show the card.\n   * Mouse and pen work the same either way.\n   * @defaultValue false\n   */\n  openOnTap?: boolean;\n  /** Additional classes for the card (`.hover-card-content`). */\n  contentClassName?: string;\n}\n\n/**\n * The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.\n *\n * Nothing moves focus when the card opens, and nothing traps it. In place,\n * the card comes right after the trigger, so Tab goes from the trigger into\n * its links and tabbing past them closes it. The pointer can move onto the\n * card, Escape closes it from anywhere, and by default touch doesn't open it,\n * so tapping the trigger just does what the trigger does. `openOnTap` opens\n * it with a tap, for a trigger with no tap action of its own. For hints with nothing to\n * click use `Tooltip`, and for content opened on purpose, such as a form,\n * use `Popover`.\n *\n * @function\n * @param {HoverCardProps} props - Props for the HoverCard component.\n * @returns {JSX.Element} The trigger in its wrapper, and the card while open.\n *\n * @example\n * <HoverCard trigger={<a href=\"/people/ada\">Ada Lovelace</a>}>\n *   <Title as=\"p\" size=\"6\">Ada Lovelace</Title>\n *   <SubTitle as=\"p\" size=\"6\">Analytical Engine team</SubTitle>\n * </HoverCard>\n */\nexport const HoverCard: React.FC<HoverCardProps> = ({\n  trigger,\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  openDelay = 600,\n  closeDelay = 300,\n  position = 'bottom-left',\n  appendToBody = false,\n  openOnTap = false,\n  className,\n  contentClassName,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const {\n    onPointerEnter,\n    onPointerOver,\n    onPointerLeave,\n    onPointerDown,\n    onPointerUp,\n    onFocus,\n    onBlur,\n    ...attrs\n  } = rest;\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const cardRef = useRef<HTMLDivElement>(null);\n  const cardId = `${useId()}-card`;\n\n  const isControlled = controlledOpen !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = controlledOpen ?? internalOpen;\n\n  const requestOpen = useCallback(\n    (next: boolean) => {\n      onOpenChange?.(next);\n      if (!isControlled) setInternalOpen(next);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  // A portaled card has no server markup, so it only exists from the commit\n  // after hydration, and nothing measures it before then.\n  const hydrated = useIsHydrated();\n  const cardMounted = isOpen && (hydrated || !appendToBody);\n\n  const resolved = useAnchoredPosition(rootRef, cardRef, {\n    active: cardMounted,\n    position,\n    fixed: appendToBody,\n    // The gap comes from `--bulma-hover-card-offset` in the stylesheet, so\n    // the coordinates leave it out and `auto` reads it off the card.\n    offset: 0,\n    styledGap: marginGap,\n  });\n\n  // The trigger renders first inside the wrapper. Read when needed rather\n  // than held, so a trigger that remounted is still the one found.\n  const triggerRef = useMemo(\n    () => ({\n      get current() {\n        const first = (rootRef.current as HTMLSpanElement).firstElementChild;\n        return first && first !== cardRef.current\n          ? (first as HTMLElement)\n          : null;\n      },\n    }),\n    []\n  );\n\n  const hover = useHoverOpen({\n    open: isOpen,\n    onOpenChange: requestOpen,\n    openDelay,\n    closeDelay,\n    triggerRef,\n    floatingRef: cardRef,\n    openOnTap,\n  });\n\n  // A trigger that can't take focus leaves keyboard users no way to open the\n  // card. It has to be the trigger element itself, not something inside it,\n  // since focus comes back to it and its ARIA is on it. Judged by what the\n  // element is rather than by its styles, which can hide it for now. After\n  // every commit, since the trigger can change, and only in development.\n  useEffect(() => {\n    if (!isDev()) return;\n    const triggerNode = triggerRef.current;\n    if (!triggerNode) return;\n    if (!triggerNode.matches(':disabled') && isTabbableKind(triggerNode)) {\n      return;\n    }\n    warnOnce(\n      'HoverCard:unfocusable-trigger',\n      \"[bestax-bulma] <HoverCard> has a trigger that can't take focus, so \" +\n        \"keyboard users can't open the card. Use a link or a button as the \" +\n        'trigger, or give it tabIndex={0}.'\n    );\n  });\n\n  // Expanded only while the card is on the page, so a portaled card that\n  // waits for hydration isn't announced before it exists.\n  const clonedTrigger = cloneElement(\n    trigger as React.ReactElement<Record<string, unknown>>,\n    {\n      'aria-expanded': cardMounted,\n      'aria-controls': cardMounted ? cardId : undefined,\n    }\n  );\n\n  const rootClasses = classNames(\n    usePrefixedClassNames('hover-card', { 'is-active': cardMounted }),\n    bulmaHelperClasses,\n    className\n  );\n  const cardClasses = classNames(\n    usePrefixedClassNames('hover-card-content', {\n      [`is-${resolved.position}`]: true,\n      'is-portal': appendToBody,\n    }),\n    contentClassName\n  );\n\n  return (\n    // The ref after the spread: React 19 hands a function component a `ref`\n    // prop like any other, and the wrapper has to stay ours. The card is in\n    // the wrapper's React tree even when portaled, so the hover and focus\n    // handlers here hear from both.\n    <span\n      className={rootClasses}\n      {...attrs}\n      onPointerEnter={chain(onPointerEnter, hover.onPointerEnter)}\n      onPointerOver={chain(onPointerOver, hover.onPointerOver)}\n      onPointerLeave={chain(onPointerLeave, hover.onPointerLeave)}\n      onFocus={chain(onFocus, hover.onFocus)}\n      onBlur={chain(onBlur, hover.onBlur)}\n      onPointerDown={chain(onPointerDown, hover.onPointerDown)}\n      onPointerUp={chain(onPointerUp, hover.onPointerUp)}\n      ref={rootRef}\n    >\n      {clonedTrigger}\n      {isOpen && (\n        <Portal disabled={!appendToBody}>\n          <div\n            ref={cardRef}\n            id={cardId}\n            className={cardClasses}\n            style={\n              appendToBody\n                ? {\n                    position: 'fixed',\n                    top: resolved.top,\n                    left: resolved.left,\n                  }\n                : undefined\n            }\n          >\n            {children}\n          </div>\n        </Portal>\n      )}\n    </span>\n  );\n};\n\nexport default HoverCard;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/Tooltip.js

@@ -1,12 +1,39 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
+import { useState, useRef, useId, isValidElement, Fragment, useEffect, useLayoutEffect, cloneElement } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useHoverOpen, chain } from '../helpers/useHoverOpen.js';
+import { isTabbableKind } from '../helpers/useFocusTrap.js';
+import { isDev, warnOnce } from '../helpers/devWarnings.js';
 
+/** An id list with `id` added at the end, unless it's in there already. */
+const withId = (ids, id) => [...new Set([...(ids ?? '').split(/\s+/), id])].filter(Boolean).join(' ');
+/**
+ * The first element in the trigger that Tab lands on, judged by what it is
+ * rather than by its styles, which can hide it for now. The trigger is all
+ * of the wrapper that comes before the tooltip.
+ */
+const triggerTabStop = (wrapper, tooltip) => {
+    const elements = Array.from(wrapper.querySelectorAll('*'));
+    return elements
+        .slice(0, elements.indexOf(tooltip))
+        .find(el => isTabbableKind(el) && !el.matches(':disabled'));
+};
 /**
  * The `Tooltip` component displays helpful information when users hover over or focus on an element.
  *
+ * Hovering the trigger or giving it keyboard focus shows it. Touch doesn't,
+ * unless `openOnTap` is on, and neither does focus a click or a tap brings,
+ * so tapping the trigger just does what the trigger does. The pointer can
+ * move onto a shown tooltip. Escape hides it wherever focus is, without
+ * moving the pointer or focus, and it stays hidden until one of them leaves
+ * the trigger and comes back, or, with `openOnTap`, until the next tap on
+ * the trigger. The key always goes on too, to whatever has focus or a
+ * `Modal` or `Popover` around it, since a tooltip only adds to what's
+ * there. The tooltip is its trigger's description, so a screen reader reads
+ * it as the trigger takes focus, whether it's showing yet or not.
+ *
  * @function
  * @param {TooltipProps} props - Props for the Tooltip component.
  * @returns {JSX.Element} The rendered tooltip wrapper.
@@ -18,70 +45,69 @@ import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
  * </Tooltip>
  *
  * @example
- * // Positioned tooltip with color
- * <Tooltip label="Delete item" position="right" color="danger">
- *   <Icon icon="fas fa-trash" />
+ * // Positioned tooltip with color, on an icon-only button with a name of its own
+ * <Tooltip label="Moves it to the trash" position="right" color="danger">
+ *   <Button aria-label="Delete">
+ *     <Icon name="fas fa-trash" />
+ *   </Button>
  * </Tooltip>
  *
  * @example
  * // Multiline tooltip
  * <Tooltip label="This is a longer tooltip that wraps to multiple lines" multiline>
- *   <span>?</span>
+ *   <button>More info</button>
  * </Tooltip>
  */
-const Tooltip = ({ label, content, position = 'top', color, size, active: alwaysActive, multiline = false, animated = true, square = false, dashed = false, delay = 0, closeDelay = 0, children, className, tooltipClassName, ...props }) => {
+const Tooltip = ({ label, content, position = 'top', color, size, active: alwaysActive, multiline = false, animated = true, square = false, dashed = false, delay = 0, closeDelay = 0, openOnTap = false, children, className, tooltipClassName, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const { onPointerEnter, onPointerOver, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
     const [isVisible, setIsVisible] = useState(false);
-    const [isHovering, setIsHovering] = useState(false);
     const [resolvedPosition, setResolvedPosition] = useState(position === 'auto' ? 'top' : position);
     const [contentStyle, setContentStyle] = useState({});
-    const openTimeoutRef = useRef(null);
-    const closeTimeoutRef = useRef(null);
     const wrapperRef = useRef(null);
     const contentRef = useRef(null);
-    // Clear timeouts on unmount
-    useEffect(() => {
-        return () => {
-            if (openTimeoutRef.current) {
-                clearTimeout(openTimeoutRef.current);
-            }
-            if (closeTimeoutRef.current) {
-                clearTimeout(closeTimeoutRef.current);
-            }
-        };
-    }, []);
-    // Handle delayed visibility
+    const tooltipId = `${useId()}-tooltip`;
+    // Only a single element can be given the link, and a fragment takes no
+    // props of its own.
+    const linkable = isValidElement(children) &&
+        children.type !== Fragment;
+    // A screen reader reads the tooltip only when Tab lands on an element that
+    // carries the link. Only the page shows whether it does, since a component
+    // may not pass the attribute on, or what takes focus may sit inside the
+    // element that took it. After every commit, since the children can change,
+    // and only in development.
     useEffect(() => {
-        if (isHovering) {
-            if (closeTimeoutRef.current) {
-                clearTimeout(closeTimeoutRef.current);
-                closeTimeoutRef.current = null;
-            }
-            if (delay > 0) {
-                openTimeoutRef.current = setTimeout(() => {
-                    setIsVisible(true);
-                }, delay);
-            }
-            else {
-                // eslint-disable-next-line react-hooks/set-state-in-effect -- show immediately on hover when no delay
-                setIsVisible(true);
-            }
-        }
-        else {
-            if (openTimeoutRef.current) {
-                clearTimeout(openTimeoutRef.current);
-                openTimeoutRef.current = null;
-            }
-            if (closeDelay > 0) {
-                closeTimeoutRef.current = setTimeout(() => {
-                    setIsVisible(false);
-                }, closeDelay);
-            }
-            else {
-                setIsVisible(false);
-            }
+        if (!isDev())
+            return;
+        const stop = triggerTabStop(wrapperRef.current, contentRef.current);
+        if (stop?.getAttribute('aria-describedby')?.split(/\s+/).includes(tooltipId)) {
+            return;
         }
-    }, [isHovering, delay, closeDelay]);
+        warnOnce('Tooltip:unlinked-trigger', "[bestax-bulma] <Tooltip> can't describe its trigger, so a screen " +
+            "reader won't read the tooltip: Tab reaches nothing in the trigger, " +
+            "or what it reaches doesn't carry the aria-describedby that points " +
+            'at the tooltip. Pass one element that takes focus and passes ' +
+            'aria-describedby on to its DOM node, such as a button, a link or a ' +
+            'Span with tabIndex={0}.');
+    });
+    const hover = useHoverOpen({
+        // The pointer and focus as they are. `active` shows it on top of that, so
+        // dropping `active` leaves it shown while the pointer or focus holds it.
+        // An ask to close can come while it's already hidden, which is no change.
+        open: isVisible,
+        onOpenChange: setIsVisible,
+        openDelay: delay,
+        closeDelay,
+        // The wrapper stands in for the trigger. It holds only the children and
+        // the tooltip, and nothing in the tooltip takes focus, so focus anywhere
+        // in it is focus on the trigger.
+        triggerRef: wrapperRef,
+        floatingRef: contentRef,
+        // Escape hides it and carries on, so a control in the trigger, or a
+        // Modal around it, still gets the key.
+        consumeEscape: false,
+        openOnTap,
+    });
     // Auto-placement and overflow correction
     useLayoutEffect(() => {
         const isAuto = position === 'auto';
@@ -170,21 +196,12 @@ const Tooltip = ({ label, content, position = 'top', color, size, active: always
             setContentStyle(style);
         });
     }, [position, resolvedPosition, isVisible, alwaysActive, label, content]);
-    const handleMouseEnter = useCallback(() => {
-        setIsHovering(true);
-    }, []);
-    const handleMouseLeave = useCallback(() => {
-        setIsHovering(false);
-    }, []);
-    const handleFocus = useCallback(() => {
-        setIsHovering(true);
-    }, []);
-    const handleBlur = useCallback(() => {
-        setIsHovering(false);
-    }, []);
     // Generate Bulma classes
     const tooltipClasses = usePrefixedClassNames('tooltip', {
         'is-active': alwaysActive || isVisible,
+        // Open by the pointer, focus or a tap, rather than shown by `active`
+        // alone: only then does the tooltip, and the gap to it, take the pointer.
+        'is-open': isVisible,
         [`is-${resolvedPosition}`]: resolvedPosition,
         [`is-${color}`]: color,
         [`is-${size}`]: size,
@@ -195,7 +212,15 @@ const Tooltip = ({ label, content, position = 'top', color, size, active: always
     });
     const combinedClasses = classNames(tooltipClasses, bulmaHelperClasses, className);
     const combinedTooltipClasses = usePrefixedClassNames('tooltip-content', tooltipClassName);
-    return (jsxs("span", { ref: wrapperRef, className: combinedClasses, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, ...(label ? { 'data-tooltip': label } : {}), ...rest, children: [children, jsx("span", { ref: contentRef, className: combinedTooltipClasses, role: "tooltip", "aria-hidden": !isVisible && !alwaysActive, style: Object.keys(contentStyle).length > 0 ? contentStyle : undefined, children: content || label })] }));
+    return (jsxs("span", { ref: wrapperRef, className: combinedClasses, onPointerEnter: chain(onPointerEnter, hover.onPointerEnter), onPointerOver: chain(onPointerOver, hover.onPointerOver), onPointerLeave: chain(onPointerLeave, hover.onPointerLeave), onFocus: chain(onFocus, hover.onFocus), onBlur: chain(onBlur, hover.onBlur), onPointerDown: chain(onPointerDown, hover.onPointerDown), onPointerUp: chain(onPointerUp, hover.onPointerUp), ...(label ? { 'data-tooltip': label } : {}), ...attrs, children: [linkable
+                ? cloneElement(children, {
+                    'aria-describedby': withId(children.props['aria-describedby'], tooltipId),
+                })
+                : children, jsx("span", { ref: contentRef, id: tooltipId, className: combinedTooltipClasses, 
+                // Hidden by `visibility: hidden` in the stylesheet, which keeps it out
+                // of the accessibility tree and still lets it describe the trigger
+                // (accname step 2A), so it takes no aria-hidden.
+                role: "tooltip", style: Object.keys(contentStyle).length > 0 ? contentStyle : undefined, children: content || label })] }));
 };
 
 export { Tooltip };

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useEffect,\n  useLayoutEffect,\n  useCallback,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\n\n/** Screen positions for the tooltip. */\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';\n/** Color variants for the tooltip. */\nexport type TooltipColor =\n  | 'primary'\n  | 'link'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'dark'\n  | 'light';\n/** Size variants for the tooltip. */\nexport type TooltipSize = 'small' | 'medium' | 'large';\n\n/**\n * Props for the Tooltip component.\n * @extraProp {React.ReactNode} [children] - The element that triggers the tooltip.\n * @extraProp {string} [className] - Additional CSS classes.\n */\nexport interface TooltipProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'content'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** The tooltip text content. */\n  label?: string;\n  /** Rich tooltip content (alternative to `label`). */\n  content?: React.ReactNode;\n  /** Position of the tooltip. Default: 'top'. */\n  position?: TooltipPosition;\n  /** Color variant for the tooltip. */\n  color?: TooltipColor;\n  /** Size of the tooltip. */\n  size?: TooltipSize;\n  /** Force tooltip to be always visible. */\n  active?: boolean;\n  /** Allow tooltip to wrap to multiple lines. */\n  multiline?: boolean;\n  /** Enable fade animation. Default: true. */\n  animated?: boolean;\n  /** Use square corners instead of rounded. */\n  square?: boolean;\n  /** Show dashed underline on trigger. */\n  dashed?: boolean;\n  /** Delay before showing tooltip (ms). */\n  delay?: number;\n  /** Delay in ms before hiding the tooltip. */\n  closeDelay?: number;\n  /** Additional classes for the tooltip element. */\n  tooltipClassName?: string;\n}\n\n/**\n * The `Tooltip` component displays helpful information when users hover over or focus on an element.\n *\n * @function\n * @param {TooltipProps} props - Props for the Tooltip component.\n * @returns {JSX.Element} The rendered tooltip wrapper.\n *\n * @example\n * // Basic tooltip\n * <Tooltip label=\"This is helpful info\">\n *   <button>Hover me</button>\n * </Tooltip>\n *\n * @example\n * // Positioned tooltip with color\n * <Tooltip label=\"Delete item\" position=\"right\" color=\"danger\">\n *   <Icon icon=\"fas fa-trash\" />\n * </Tooltip>\n *\n * @example\n * // Multiline tooltip\n * <Tooltip label=\"This is a longer tooltip that wraps to multiple lines\" multiline>\n *   <span>?</span>\n * </Tooltip>\n */\nexport const Tooltip: React.FC<TooltipProps> = ({\n  label,\n  content,\n  position = 'top',\n  color,\n  size,\n  active: alwaysActive,\n  multiline = false,\n  animated = true,\n  square = false,\n  dashed = false,\n  delay = 0,\n  closeDelay = 0,\n  children,\n  className,\n  tooltipClassName,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const [isVisible, setIsVisible] = useState(false);\n  const [isHovering, setIsHovering] = useState(false);\n  const [resolvedPosition, setResolvedPosition] = useState<\n    Exclude<TooltipPosition, 'auto'>\n  >(position === 'auto' ? 'top' : position);\n  const [contentStyle, setContentStyle] = useState<React.CSSProperties>({});\n  const openTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const wrapperRef = useRef<HTMLSpanElement | null>(null);\n  const contentRef = useRef<HTMLSpanElement | null>(null);\n\n  // Clear timeouts on unmount\n  useEffect(() => {\n    return () => {\n      if (openTimeoutRef.current) {\n        clearTimeout(openTimeoutRef.current);\n      }\n      if (closeTimeoutRef.current) {\n        clearTimeout(closeTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  // Handle delayed visibility\n  useEffect(() => {\n    if (isHovering) {\n      if (closeTimeoutRef.current) {\n        clearTimeout(closeTimeoutRef.current);\n        closeTimeoutRef.current = null;\n      }\n      if (delay > 0) {\n        openTimeoutRef.current = setTimeout(() => {\n          setIsVisible(true);\n        }, delay);\n      } else {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- show immediately on hover when no delay\n        setIsVisible(true);\n      }\n    } else {\n      if (openTimeoutRef.current) {\n        clearTimeout(openTimeoutRef.current);\n        openTimeoutRef.current = null;\n      }\n      if (closeDelay > 0) {\n        closeTimeoutRef.current = setTimeout(() => {\n          setIsVisible(false);\n        }, closeDelay);\n      } else {\n        setIsVisible(false);\n      }\n    }\n  }, [isHovering, delay, closeDelay]);\n\n  // Auto-placement and overflow correction\n  useLayoutEffect(() => {\n    const isAuto = position === 'auto';\n\n    if (!isAuto) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- layout measurement effect resolves placement\n      setResolvedPosition(position);\n    }\n\n    const showing = isVisible || alwaysActive;\n    if (!showing) {\n      setContentStyle({});\n      return;\n    }\n\n    const wrapper = wrapperRef.current;\n    const content = contentRef.current;\n    if (!wrapper || !content) return;\n\n    const wrapperRect = wrapper.getBoundingClientRect();\n    const margin = 40;\n    const edgePadding = 8; // minimum distance from viewport edge\n\n    // Step 1: determine position (auto mode only)\n    if (isAuto) {\n      const spaceTop = wrapperRect.top;\n      const spaceBottom = window.innerHeight - wrapperRect.bottom;\n\n      if (spaceTop >= margin) {\n        setResolvedPosition('top');\n      } else if (spaceBottom >= margin) {\n        setResolvedPosition('bottom');\n      } else if (window.innerWidth - wrapperRect.right >= wrapperRect.left) {\n        setResolvedPosition('right');\n      } else {\n        setResolvedPosition('left');\n      }\n    }\n\n    // Step 2: measure tooltip content and correct overflow.\n    // Use requestAnimationFrame so the resolved position class is applied first.\n    requestAnimationFrame(() => {\n      const contentEl = contentRef.current;\n      if (!contentEl) return;\n\n      const contentRect = contentEl.getBoundingClientRect();\n      const style: React.CSSProperties = {};\n\n      // For top/bottom positions, tooltip is centered horizontally via CSS\n      // (left: 50%; transform: translateX(-50%)).\n      // Check if it overflows left or right and apply a corrective shift.\n      const pos = isAuto ? undefined : position; // read from state won't be updated yet in auto\n      const effectivePos = pos || 'top'; // fallback, actual is set by state\n      const isVertical =\n        effectivePos === 'top' ||\n        effectivePos === 'bottom' ||\n        resolvedPosition === 'top' ||\n        resolvedPosition === 'bottom';\n\n      if (isVertical) {\n        if (contentRect.left < edgePadding) {\n          // Overflows left — shift right\n          const shift = edgePadding - contentRect.left;\n          style.left = `calc(50% + ${shift}px)`;\n          (style as Record<string, string>)['--tooltip-arrow-offset'] =\n            `${-shift}px`;\n        } else if (contentRect.right > window.innerWidth - edgePadding) {\n          // Overflows right — shift left\n          const shift = contentRect.right - (window.innerWidth - edgePadding);\n          style.left = `calc(50% - ${shift}px)`;\n          (style as Record<string, string>)['--tooltip-arrow-offset'] =\n            `${shift}px`;\n        }\n      } else {\n        // For left/right positions, tooltip is centered vertically via CSS\n        // (top: 50%; transform: translateY(-50%)).\n        if (contentRect.top < edgePadding) {\n          const shift = edgePadding - contentRect.top;\n          style.top = `calc(50% + ${shift}px)`;\n          (style as Record<string, string>)['--tooltip-arrow-offset'] =\n            `${-shift}px`;\n        } else if (contentRect.bottom > window.innerHeight - edgePadding) {\n          const shift = contentRect.bottom - (window.innerHeight - edgePadding);\n          style.top = `calc(50% - ${shift}px)`;\n          (style as Record<string, string>)['--tooltip-arrow-offset'] =\n            `${shift}px`;\n        }\n      }\n\n      setContentStyle(style);\n    });\n  }, [position, resolvedPosition, isVisible, alwaysActive, label, content]);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovering(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovering(false);\n  }, []);\n\n  const handleFocus = useCallback(() => {\n    setIsHovering(true);\n  }, []);\n\n  const handleBlur = useCallback(() => {\n    setIsHovering(false);\n  }, []);\n\n  // Generate Bulma classes\n  const tooltipClasses = usePrefixedClassNames('tooltip', {\n    'is-active': alwaysActive || isVisible,\n    [`is-${resolvedPosition}`]: resolvedPosition,\n    [`is-${color}`]: color,\n    [`is-${size}`]: size,\n    'is-multiline': multiline,\n    'is-animated': animated,\n    'is-square': square,\n    'is-dashed': dashed,\n  });\n\n  const combinedClasses = classNames(\n    tooltipClasses,\n    bulmaHelperClasses,\n    className\n  );\n  const combinedTooltipClasses = usePrefixedClassNames(\n    'tooltip-content',\n    tooltipClassName\n  );\n\n  return (\n    <span\n      ref={wrapperRef}\n      className={combinedClasses}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      {...(label ? { 'data-tooltip': label } : {})}\n      {...rest}\n    >\n      {children}\n      <span\n        ref={contentRef}\n        className={combinedTooltipClasses}\n        role=\"tooltip\"\n        aria-hidden={!isVisible && !alwaysActive}\n        style={Object.keys(contentStyle).length > 0 ? contentStyle : undefined}\n      >\n        {content || label}\n      </span>\n    </span>\n  );\n};\n\nexport default Tooltip;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip.tsx"],"sourcesContent":["import React, {\n  Fragment,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useId,\n  useState,\n  useRef,\n  useLayoutEffect,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { chain, useHoverOpen } from '../helpers/useHoverOpen';\nimport { isTabbableKind } from '../helpers/useFocusTrap';\nimport { isDev, warnOnce } from '../helpers/devWarnings';\n\n/** Screen positions for the tooltip. */\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';\n/** Color variants for the tooltip. */\nexport type TooltipColor =\n  | 'primary'\n  | 'link'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'dark'\n  | 'light';\n/** Size variants for the tooltip. */\nexport type TooltipSize = 'small' | 'medium' | 'large';\n\n/** An id list with `id` added at the end, unless it's in there already. */\nconst withId = (ids: string | undefined, id: string) =>\n  [...new Set([...(ids ?? '').split(/\\s+/), id])].filter(Boolean).join(' ');\n\n/**\n * The first element in the trigger that Tab lands on, judged by what it is\n * rather than by its styles, which can hide it for now. The trigger is all\n * of the wrapper that comes before the tooltip.\n */\nconst triggerTabStop = (wrapper: Element, tooltip: Element) => {\n  const elements = Array.from(wrapper.querySelectorAll('*'));\n  return elements\n    .slice(0, elements.indexOf(tooltip))\n    .find(el => isTabbableKind(el) && !el.matches(':disabled'));\n};\n\n/**\n * Props for the Tooltip component.\n * @extraProp {React.ReactNode} [children] - The element that triggers the\n * tooltip. Its `aria-describedby` points at the tooltip, after any ids it\n * already had, so a screen reader reads the tooltip as its description when\n * it takes focus, even while the tooltip is hidden. That takes a single\n * element which passes `aria-describedby` on to its DOM node, as native\n * elements and bestax components do, and takes focus itself, such as a\n * button, a link or a `Span` with `tabIndex={0}`: something focusable inside\n * it doesn't get the link, and text, a fragment or several elements get none.\n * A development build warns when the first element Tab reaches in the\n * trigger doesn't carry the link, or there isn't one.\n * @extraProp {string} [className] - Additional CSS classes.\n */\nexport interface TooltipProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'content'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** The tooltip text content. */\n  label?: string;\n  /**\n   * Rich tooltip content (alternative to `label`), to read rather than use.\n   * Nothing in it should take focus or a click: it isn't in the Tab order\n   * while hidden, focus there isn't counted as being in the tooltip, and\n   * Escape hiding it would drop that focus. For links or buttons, use\n   * `HoverCard` or `Popover`. A screen reader reads it as plain text, since\n   * it's the trigger's description.\n   */\n  content?: React.ReactNode;\n  /** Position of the tooltip. Default: 'top'. */\n  position?: TooltipPosition;\n  /** Color variant for the tooltip. */\n  color?: TooltipColor;\n  /** Size of the tooltip. */\n  size?: TooltipSize;\n  /**\n   * Force tooltip to be always visible. Hover, focus and Escape leave it\n   * shown, so Escape goes on to whatever has focus, or to a `Modal` or\n   * `Popover` around it.\n   */\n  active?: boolean;\n  /** Allow tooltip to wrap to multiple lines. */\n  multiline?: boolean;\n  /** Enable fade animation. Default: true. */\n  animated?: boolean;\n  /** Use square corners instead of rounded. */\n  square?: boolean;\n  /** Show dashed underline on trigger. */\n  dashed?: boolean;\n  /**\n   * How long the pointer or keyboard focus waits on the trigger before the\n   * tooltip shows, in milliseconds.\n   */\n  delay?: number;\n  /**\n   * How long the tooltip stays after the pointer and focus have left the\n   * trigger and the tooltip, in milliseconds. The pointer can move from the\n   * trigger onto a shown tooltip without one, across the default gap. A\n   * theme that raises `--bulma-tooltip-arrow-size` or\n   * `--bulma-tooltip-arrow-margin` widens the gap past what the pointer can\n   * cross on its own, so give it a `closeDelay` long enough to cross the\n   * rest.\n   */\n  closeDelay?: number;\n  /**\n   * Show the tooltip with a tap on a touch screen. Touch has no hover, so\n   * without this a phone or tablet never shows it. With it, a tap on the\n   * trigger shows it at once, and it stays until another tap on the trigger\n   * or the tooltip, a tap anywhere else, or Escape. The tap still does\n   * whatever the trigger does, so turn this on only for a trigger with no\n   * tap action of its own. Mouse and pen work the same either way.\n   * @defaultValue false\n   */\n  openOnTap?: boolean;\n  /** Additional classes for the tooltip element. */\n  tooltipClassName?: string;\n}\n\n/**\n * The `Tooltip` component displays helpful information when users hover over or focus on an element.\n *\n * Hovering the trigger or giving it keyboard focus shows it. Touch doesn't,\n * unless `openOnTap` is on, and neither does focus a click or a tap brings,\n * so tapping the trigger just does what the trigger does. The pointer can\n * move onto a shown tooltip. Escape hides it wherever focus is, without\n * moving the pointer or focus, and it stays hidden until one of them leaves\n * the trigger and comes back, or, with `openOnTap`, until the next tap on\n * the trigger. The key always goes on too, to whatever has focus or a\n * `Modal` or `Popover` around it, since a tooltip only adds to what's\n * there. The tooltip is its trigger's description, so a screen reader reads\n * it as the trigger takes focus, whether it's showing yet or not.\n *\n * @function\n * @param {TooltipProps} props - Props for the Tooltip component.\n * @returns {JSX.Element} The rendered tooltip wrapper.\n *\n * @example\n * // Basic tooltip\n * <Tooltip label=\"This is helpful info\">\n *   <button>Hover me</button>\n * </Tooltip>\n *\n * @example\n * // Positioned tooltip with color, on an icon-only button with a name of its own\n * <Tooltip label=\"Moves it to the trash\" position=\"right\" color=\"danger\">\n *   <Button aria-label=\"Delete\">\n *     <Icon name=\"fas fa-trash\" />\n *   </Button>\n * </Tooltip>\n *\n * @example\n * // Multiline tooltip\n * <Tooltip label=\"This is a longer tooltip that wraps to multiple lines\" multiline>\n *   <button>More info</button>\n * </Tooltip>\n */\nexport const Tooltip: React.FC<TooltipProps> = ({\n  label,\n  content,\n  position = 'top',\n  color,\n  size,\n  active: alwaysActive,\n  multiline = false,\n  animated = true,\n  square = false,\n  dashed = false,\n  delay = 0,\n  closeDelay = 0,\n  openOnTap = false,\n  children,\n  className,\n  tooltipClassName,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const {\n    onPointerEnter,\n    onPointerOver,\n    onPointerLeave,\n    onPointerDown,\n    onPointerUp,\n    onFocus,\n    onBlur,\n    ...attrs\n  } = rest;\n  const [isVisible, setIsVisible] = useState(false);\n  const [resolvedPosition, setResolvedPosition] = useState<\n    Exclude<TooltipPosition, 'auto'>\n  >(position === 'auto' ? 'top' : position);\n  const [contentStyle, setContentStyle] = useState<React.CSSProperties>({});\n  const wrapperRef = useRef<HTMLSpanElement | null>(null);\n  const contentRef = useRef<HTMLSpanElement | null>(null);\n  const tooltipId = `${useId()}-tooltip`;\n\n  // Only a single element can be given the link, and a fragment takes no\n  // props of its own.\n  const linkable =\n    isValidElement<{ 'aria-describedby'?: string }>(children) &&\n    children.type !== Fragment;\n\n  // A screen reader reads the tooltip only when Tab lands on an element that\n  // carries the link. Only the page shows whether it does, since a component\n  // may not pass the attribute on, or what takes focus may sit inside the\n  // element that took it. After every commit, since the children can change,\n  // and only in development.\n  useEffect(() => {\n    if (!isDev()) return;\n    const stop = triggerTabStop(\n      wrapperRef.current as HTMLSpanElement,\n      contentRef.current as HTMLSpanElement\n    );\n    if (\n      stop?.getAttribute('aria-describedby')?.split(/\\s+/).includes(tooltipId)\n    ) {\n      return;\n    }\n    warnOnce(\n      'Tooltip:unlinked-trigger',\n      \"[bestax-bulma] <Tooltip> can't describe its trigger, so a screen \" +\n        \"reader won't read the tooltip: Tab reaches nothing in the trigger, \" +\n        \"or what it reaches doesn't carry the aria-describedby that points \" +\n        'at the tooltip. Pass one element that takes focus and passes ' +\n        'aria-describedby on to its DOM node, such as a button, a link or a ' +\n        'Span with tabIndex={0}.'\n    );\n  });\n\n  const hover = useHoverOpen({\n    // The pointer and focus as they are. `active` shows it on top of that, so\n    // dropping `active` leaves it shown while the pointer or focus holds it.\n    // An ask to close can come while it's already hidden, which is no change.\n    open: isVisible,\n    onOpenChange: setIsVisible,\n    openDelay: delay,\n    closeDelay,\n    // The wrapper stands in for the trigger. It holds only the children and\n    // the tooltip, and nothing in the tooltip takes focus, so focus anywhere\n    // in it is focus on the trigger.\n    triggerRef: wrapperRef,\n    floatingRef: contentRef,\n    // Escape hides it and carries on, so a control in the trigger, or a\n    // Modal around it, still gets the key.\n    consumeEscape: false,\n    openOnTap,\n  });\n\n  // Auto-placement and overflow correction\n  useLayoutEffect(() => {\n    const isAuto = position === 'auto';\n\n    if (!isAuto) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- layout measurement effect resolves placement\n      setResolvedPosition(position);\n    }\n\n    const showing = isVisible || alwaysActive;\n    if (!showing) {\n      setContentStyle({});\n      return;\n    }\n\n    const wrapper = wrapperRef.current;\n    const content = contentRef.current;\n    if (!wrapper || !content) return;\n\n    const wrapperRect = wrapper.getBoundingClientRect();\n    const margin = 40;\n    const edgePadding = 8; // minimum distance from viewport edge\n\n    // Step 1: determine position (auto mode only)\n    if (isAuto) {\n      const spaceTop = wrapperRect.top;\n      const spaceBottom = window.innerHeight - wrapperRect.bottom;\n\n      if (spaceTop >= margin) {\n        setResolvedPosition('top');\n      } else if (spaceBottom >= margin) {\n        setResolvedPosition('bottom');\n      } else if (window.innerWidth - wrapperRect.right >= wrapperRect.left) {\n        setResolvedPosition('right');\n      } else {\n        setResolvedPosition('left');\n      }\n    }\n\n    // Step 2: measure tooltip content and correct overflow.\n    // Use requestAnimationFrame so the resolved position class is applied first.\n    requestAnimationFrame(() => {\n      const contentEl = contentRef.current;\n      if (!contentEl) return;\n\n      const contentRect = contentEl.getBoundingClientRect();\n      const style: React.CSSProperties = {};\n\n      // For top/bottom positions, tooltip is centered horizontally via CSS\n      // (left: 50%; transform: translateX(-50%)).\n      // Check if it overflows left or right and apply a corrective shift.\n      const pos = isAuto ? undefined : position; // read from state won't be updated yet in auto\n      const effectivePos = pos || 'top'; // fallback, actual is set by state\n      const isVertical =\n        effectivePos === 'top' ||\n        effectivePos === 'bottom' ||\n        resolvedPosition === 'top' ||\n        resolvedPosition === 'bottom';\n\n      if (isVertical) {\n        if (contentRect.left < edgePadding) {\n          // Overflows left — shift right\n          const shift = edgePadding - contentRect.left;\n          style.left = `calc(50% + ${shift}px)`;\n          (style as Record<string, string>)['--tooltip-arrow-offset'] =\n            `${-shift}px`;\n        } else if (contentRect.right > window.innerWidth - edgePadding) {\n          // Overflows right — shift left\n          const shift = contentRect.right - (window.innerWidth - edgePadding);\n          style.left = `calc(50% - ${shift}px)`;\n          (style as Record<string, string>)['--tooltip-arrow-offset'] =\n            `${shift}px`;\n        }\n      } else {\n        // For left/right positions, tooltip is centered vertically via CSS\n        // (top: 50%; transform: translateY(-50%)).\n        if (contentRect.top < edgePadding) {\n          const shift = edgePadding - contentRect.top;\n          style.top = `calc(50% + ${shift}px)`;\n          (style as Record<string, string>)['--tooltip-arrow-offset'] =\n            `${-shift}px`;\n        } else if (contentRect.bottom > window.innerHeight - edgePadding) {\n          const shift = contentRect.bottom - (window.innerHeight - edgePadding);\n          style.top = `calc(50% - ${shift}px)`;\n          (style as Record<string, string>)['--tooltip-arrow-offset'] =\n            `${shift}px`;\n        }\n      }\n\n      setContentStyle(style);\n    });\n  }, [position, resolvedPosition, isVisible, alwaysActive, label, content]);\n\n  // Generate Bulma classes\n  const tooltipClasses = usePrefixedClassNames('tooltip', {\n    'is-active': alwaysActive || isVisible,\n    // Open by the pointer, focus or a tap, rather than shown by `active`\n    // alone: only then does the tooltip, and the gap to it, take the pointer.\n    'is-open': isVisible,\n    [`is-${resolvedPosition}`]: resolvedPosition,\n    [`is-${color}`]: color,\n    [`is-${size}`]: size,\n    'is-multiline': multiline,\n    'is-animated': animated,\n    'is-square': square,\n    'is-dashed': dashed,\n  });\n\n  const combinedClasses = classNames(\n    tooltipClasses,\n    bulmaHelperClasses,\n    className\n  );\n  const combinedTooltipClasses = usePrefixedClassNames(\n    'tooltip-content',\n    tooltipClassName\n  );\n\n  return (\n    // The tooltip is inside the wrapper, so the pointer on it is still on the\n    // wrapper, and the stylesheet bridges the gap between them.\n    <span\n      ref={wrapperRef}\n      className={combinedClasses}\n      onPointerEnter={chain(onPointerEnter, hover.onPointerEnter)}\n      onPointerOver={chain(onPointerOver, hover.onPointerOver)}\n      onPointerLeave={chain(onPointerLeave, hover.onPointerLeave)}\n      onFocus={chain(onFocus, hover.onFocus)}\n      onBlur={chain(onBlur, hover.onBlur)}\n      onPointerDown={chain(onPointerDown, hover.onPointerDown)}\n      onPointerUp={chain(onPointerUp, hover.onPointerUp)}\n      {...(label ? { 'data-tooltip': label } : {})}\n      {...attrs}\n    >\n      {linkable\n        ? cloneElement(children, {\n            'aria-describedby': withId(\n              children.props['aria-describedby'],\n              tooltipId\n            ),\n          })\n        : children}\n      <span\n        ref={contentRef}\n        id={tooltipId}\n        className={combinedTooltipClasses}\n        // Hidden by `visibility: hidden` in the stylesheet, which keeps it out\n        // of the accessibility tree and still lets it describe the trigger\n        // (accname step 2A), so it takes no aria-hidden.\n        role=\"tooltip\"\n        style={Object.keys(contentStyle).length > 0 ? contentStyle : undefined}\n      >\n        {content || label}\n      </span>\n    </span>\n  );\n};\n\nexport default Tooltip;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/elements/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  isCustomElement,\n  type PolymorphicComponent,\n} from '../helpers/polymorphic';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * The Button component's own props — everything it adds on top of the\n * attributes of whatever element `as` renders.\n */\nexport interface ButtonOwnProps extends Omit<\n  BulmaClassesProps,\n  'color' | 'backgroundColor' | 'size'\n> {\n  /**\n   * Not accepted under this name. `useBulmaClasses` consumes any\n   * `backgroundColor` key before `rest` is spread, so a custom `as` target\n   * declaring one would never receive it. Use `bgColor`.\n   * @internal\n   */\n  backgroundColor?: never;\n  /** Bulma color variant for the button. `ghost` renders a link-like button; `text` renders a minimal text-only button. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'white'\n    | 'light'\n    | 'dark'\n    | 'black'\n    | 'text'\n    | 'ghost';\n  /** Size of the button. */\n  size?: 'small' | 'normal' | 'medium' | 'large';\n  /** Applies a lighter color variant. */\n  isLight?: boolean;\n  /** Makes the button rounded. */\n  isRounded?: boolean;\n  /**\n   * Displays a loading spinner.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   */\n  isLoading?: boolean;\n  /** Makes the button non-interactive. */\n  isStatic?: boolean;\n  /** Makes the button full-width. */\n  isFullwidth?: boolean;\n  /** Makes the button full-width. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  isFullWidth?: boolean;\n  /** Applies outlined styling (requires color). */\n  isOutlined?: boolean;\n  /** Applies inverted styling (requires color). */\n  isInverted?: boolean;\n  /** Applies focused styling (visual only). */\n  isFocused?: boolean;\n  /** Applies active styling (visual only). */\n  isActive?: boolean;\n  /** Applies hovered styling (visual only). */\n  isHovered?: boolean;\n  /** Applies disabled styling. */\n  isDisabled?: boolean;\n  /** Custom class name. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Button content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the Button component. The DOM attributes and the `ref` both follow\n * `as`: with `as=\"a\"` the anchor attributes are accepted, with `as=\"div\"` they\n * are not.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type ButtonProps<T extends React.ElementType = 'button'> =\n  ButtonOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonOwnProps | 'as'> & {\n      /** Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else renders through the anchor path, which adds `href`/`target`/`rel` and withholds the submit-override attributes (`formAction` and friends) from an `<a>`. */\n      as?: T;\n    };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `ButtonProps<T>` above — the body cannot see through `T`, so it reads the\n * widest form of the props it actually touches.\n */\ntype ButtonImplProps = ButtonOwnProps & {\n  as?: React.ElementType;\n  href?: string;\n  target?: string;\n  rel?: string;\n  onClick?:\n    | React.MouseEventHandler<HTMLButtonElement>\n    | React.MouseEventHandler<HTMLAnchorElement>;\n};\n\nconst validButtonColors = [...validColors, 'text', 'ghost'] as const;\n\n/**\n * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.\n *\n * @function\n * @param {ButtonProps} props - Props for the Button component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered button, anchor, or custom element.\n * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}\n */\n\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const {\n    color,\n    size,\n    isLight,\n    isRounded,\n    isLoading,\n    isStatic,\n    isFullwidth,\n    isFullWidth,\n    isOutlined,\n    isInverted,\n    isFocused,\n    isActive,\n    isHovered,\n    isDisabled,\n    className,\n    children,\n    textColor,\n    bgColor,\n    as: Component = 'button',\n    href,\n    onClick,\n    target,\n    rel,\n    ...bulmaProps\n  } = props as ButtonImplProps;\n\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...bulmaProps,\n  });\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('button', {\n    [`is-${color}`]:\n      color &&\n      validButtonColors.includes(color as (typeof validButtonColors)[number]),\n    [`is-${size}`]: size,\n    'is-outlined': isOutlined,\n    'is-light': isLight,\n    'is-loading': isLoading,\n    'is-static': isStatic,\n    'is-disabled': isDisabled,\n    'is-rounded': isRounded,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'is-active': isActive,\n    'is-inverted': isInverted,\n    'is-fullwidth': isFullwidth ?? isFullWidth,\n  });\n\n  // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes\n  const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  if (Component !== 'button') {\n    // Strip the form-control attributes a link-like element cannot carry, so a\n    // JavaScript consumer or a spread object doesn't put them on the DOM. The\n    // types no longer allow them through; this is the runtime backstop.\n    //\n    // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its\n    // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that\n    // its props reach it. Stripping names by their spelling alone broke that\n    // promise silently: `<Button as={Custom} name=\"x\" />` type-checked while\n    // `Custom` never received the `name` it requires.\n    //\n    // `autoFocus` and `type` are deliberately NOT stripped: both are valid on\n    // targets this list was filtering them from. `autoFocus` is a global\n    // attribute (React decides per element whether to honour it, which is not\n    // ours to pre-empt), and `type` on an anchor is the MIME hint that\n    // `ButtonProps<'a'>` now types it as.\n    //\n    // The types already answer this for a TypeScript caller: `ButtonProps<T>`\n    // derives from `ComponentPropsWithoutRef<T>`, so only what the target\n    // accepts can be passed. What is left is a runtime backstop for JavaScript\n    // consumers and spread objects.\n    //\n    // Keep it to the two cases where a stray attribute does something. The\n    // submit-overrides belong to a submit control and never make sense on the\n    // anchor path. `disabled` is the one that is VISIBLE: Bulma styles\n    // `.button[disabled]` (background, border, shadow, opacity), so letting it\n    // through to a `<span>` greys the element out — main stripped it, and not\n    // stripping it would be a silent visual change on a types-only release.\n    //\n    // Everything else (`name`, `value`, `form`) is inert where it does not\n    // belong, and enumerating which tags own it is what kept going wrong:\n    // first all nine names on every non-button tag (so `<Button as=\"input\"\n    // name=\"query\" value=\"Search\">` submitted nothing), then a form-control\n    // allowlist that still lost `formAction` on an input and `value` on an\n    // option. Those now ride on the types instead.\n    //\n    // A custom component is exempt entirely — it owns its prop contract, and\n    // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.\n    //\n    // The elements that own `disabled`, per the HTML spec. A closed set, unlike\n    // the open-ended question of which tag owns which attribute.\n    const SUBMIT_OVERRIDES = [\n      'formAction',\n      'formEncType',\n      'formMethod',\n      'formNoValidate',\n      'formTarget',\n    ];\n    const OWNS_DISABLED = [\n      'button',\n      'fieldset',\n      'input',\n      'optgroup',\n      'option',\n      'select',\n      'textarea',\n    ];\n\n    // Two independent filters. They are not exclusive — an `<a>` owns neither\n    // the submit-overrides nor `disabled`, so it takes both — and deriving them\n    // from one destructure, or from one if/else, is what broke each of them in\n    // turn: first the overrides came off every intrinsic (an `as=\"input\"` lost\n    // `formAction`), then scoping them to the anchor let `disabled` back onto\n    // it.\n    const forwardedRest: Record<string, unknown> = { ...rest };\n    if (typeof Component === 'string' && !isCustomElement(Component)) {\n      // Meaningless anywhere but a submit control, and an anchor is not one.\n      if (Component === 'a') {\n        for (const key of SUBMIT_OVERRIDES) delete forwardedRest[key];\n      }\n      // Visible via Bulma's `.button[disabled]`, so withheld from any element\n      // that does not own it.\n      if (!OWNS_DISABLED.includes(Component)) delete forwardedRest.disabled;\n    }\n\n    return (\n      <Component\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={buttonClasses}\n        href={href}\n        target={target}\n        rel={rel}\n        aria-disabled={isDisabled}\n        tabIndex={isDisabled ? -1 : undefined}\n        onClick={\n          isDisabled\n            ? // Guarded, because this handler is installed into whatever `as`\n              // renders and a custom component's `onClick` need not be a DOM\n              // event handler at all. One declaring `onClick: (v: string) =>\n              // void` calls this with a string, and an unguarded\n              // `e.preventDefault()` throws `is not a function`. Blocking the\n              // real event is the point; a foreign payload is simply not ours\n              // to act on.\n              (e: React.MouseEvent<HTMLAnchorElement>) => {\n                if (typeof e?.preventDefault === 'function') e.preventDefault();\n              }\n            : (onClick as\n                React.MouseEventHandler<HTMLAnchorElement> | undefined)\n        }\n        {...(forwardedRest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {children}\n      </Component>\n    );\n  }\n\n  return (\n    <button\n      ref={ref as React.Ref<HTMLButtonElement>}\n      className={buttonClasses}\n      disabled={isDisabled}\n      onClick={\n        onClick as React.MouseEventHandler<HTMLButtonElement> | undefined\n      }\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n}) as PolymorphicComponent<ButtonOwnProps, 'button'>;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/elements/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  isCustomElement,\n  type PolymorphicComponent,\n} from '../helpers/polymorphic';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * The Button component's own props — everything it adds on top of the\n * attributes of whatever element `as` renders.\n */\nexport interface ButtonOwnProps extends Omit<\n  BulmaClassesProps,\n  'color' | 'backgroundColor' | 'size'\n> {\n  /**\n   * Not accepted under this name. `useBulmaClasses` consumes any\n   * `backgroundColor` key before `rest` is spread, so a custom `as` target\n   * declaring one would never receive it. Use `bgColor`.\n   * @internal\n   */\n  backgroundColor?: never;\n  /** Bulma color variant for the button. `ghost` renders a link-like button; `text` renders a minimal text-only button. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'white'\n    | 'light'\n    | 'dark'\n    | 'black'\n    | 'text'\n    | 'ghost';\n  /** Size of the button. */\n  size?: 'small' | 'normal' | 'medium' | 'large';\n  /** Applies a lighter color variant. */\n  isLight?: boolean;\n  /** Makes the button rounded. */\n  isRounded?: boolean;\n  /**\n   * Displays a loading spinner.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   */\n  isLoading?: boolean;\n  /** Makes the button non-interactive. */\n  isStatic?: boolean;\n  /** Makes the button full-width. */\n  isFullwidth?: boolean;\n  /** Makes the button full-width. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  isFullWidth?: boolean;\n  /** Applies outlined styling (requires color). */\n  isOutlined?: boolean;\n  /** Applies inverted styling (requires color). */\n  isInverted?: boolean;\n  /** Applies focused styling (visual only). */\n  isFocused?: boolean;\n  /** Applies active styling (visual only), with no `aria-pressed`. For a button that stays pressed, use `ToggleButton`. */\n  isActive?: boolean;\n  /** Applies hovered styling (visual only). */\n  isHovered?: boolean;\n  /** Applies disabled styling. */\n  isDisabled?: boolean;\n  /** Custom class name. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Button content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the Button component. The DOM attributes and the `ref` both follow\n * `as`: with `as=\"a\"` the anchor attributes are accepted, with `as=\"div\"` they\n * are not.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type ButtonProps<T extends React.ElementType = 'button'> =\n  ButtonOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonOwnProps | 'as'> & {\n      /** Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`). Defaults to `'button'`; anything else renders through the anchor path, which adds `href`/`target`/`rel` and withholds the submit-override attributes (`formAction` and friends) from an `<a>`. */\n      as?: T;\n    };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `ButtonProps<T>` above — the body cannot see through `T`, so it reads the\n * widest form of the props it actually touches.\n */\ntype ButtonImplProps = ButtonOwnProps & {\n  as?: React.ElementType;\n  href?: string;\n  target?: string;\n  rel?: string;\n  onClick?:\n    | React.MouseEventHandler<HTMLButtonElement>\n    | React.MouseEventHandler<HTMLAnchorElement>;\n};\n\nconst validButtonColors = [...validColors, 'text', 'ghost'] as const;\n\n/**\n * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.\n *\n * @function\n * @param {ButtonProps} props - Props for the Button component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered button, anchor, or custom element.\n * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}\n */\n\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const {\n    color,\n    size,\n    isLight,\n    isRounded,\n    isLoading,\n    isStatic,\n    isFullwidth,\n    isFullWidth,\n    isOutlined,\n    isInverted,\n    isFocused,\n    isActive,\n    isHovered,\n    isDisabled,\n    className,\n    children,\n    textColor,\n    bgColor,\n    as: Component = 'button',\n    href,\n    onClick,\n    target,\n    rel,\n    ...bulmaProps\n  } = props as ButtonImplProps;\n\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...bulmaProps,\n  });\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('button', {\n    [`is-${color}`]:\n      color &&\n      validButtonColors.includes(color as (typeof validButtonColors)[number]),\n    [`is-${size}`]: size,\n    'is-outlined': isOutlined,\n    'is-light': isLight,\n    'is-loading': isLoading,\n    'is-static': isStatic,\n    'is-disabled': isDisabled,\n    'is-rounded': isRounded,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'is-active': isActive,\n    'is-inverted': isInverted,\n    'is-fullwidth': isFullwidth ?? isFullWidth,\n  });\n\n  // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes\n  const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  if (Component !== 'button') {\n    // Strip the form-control attributes a link-like element cannot carry, so a\n    // JavaScript consumer or a spread object doesn't put them on the DOM. The\n    // types no longer allow them through; this is the runtime backstop.\n    //\n    // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its\n    // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that\n    // its props reach it. Stripping names by their spelling alone broke that\n    // promise silently: `<Button as={Custom} name=\"x\" />` type-checked while\n    // `Custom` never received the `name` it requires.\n    //\n    // `autoFocus` and `type` are deliberately NOT stripped: both are valid on\n    // targets this list was filtering them from. `autoFocus` is a global\n    // attribute (React decides per element whether to honour it, which is not\n    // ours to pre-empt), and `type` on an anchor is the MIME hint that\n    // `ButtonProps<'a'>` now types it as.\n    //\n    // The types already answer this for a TypeScript caller: `ButtonProps<T>`\n    // derives from `ComponentPropsWithoutRef<T>`, so only what the target\n    // accepts can be passed. What is left is a runtime backstop for JavaScript\n    // consumers and spread objects.\n    //\n    // Keep it to the two cases where a stray attribute does something. The\n    // submit-overrides belong to a submit control and never make sense on the\n    // anchor path. `disabled` is the one that is VISIBLE: Bulma styles\n    // `.button[disabled]` (background, border, shadow, opacity), so letting it\n    // through to a `<span>` greys the element out — main stripped it, and not\n    // stripping it would be a silent visual change on a types-only release.\n    //\n    // Everything else (`name`, `value`, `form`) is inert where it does not\n    // belong, and enumerating which tags own it is what kept going wrong:\n    // first all nine names on every non-button tag (so `<Button as=\"input\"\n    // name=\"query\" value=\"Search\">` submitted nothing), then a form-control\n    // allowlist that still lost `formAction` on an input and `value` on an\n    // option. Those now ride on the types instead.\n    //\n    // A custom component is exempt entirely — it owns its prop contract, and\n    // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.\n    //\n    // The elements that own `disabled`, per the HTML spec. A closed set, unlike\n    // the open-ended question of which tag owns which attribute.\n    const SUBMIT_OVERRIDES = [\n      'formAction',\n      'formEncType',\n      'formMethod',\n      'formNoValidate',\n      'formTarget',\n    ];\n    const OWNS_DISABLED = [\n      'button',\n      'fieldset',\n      'input',\n      'optgroup',\n      'option',\n      'select',\n      'textarea',\n    ];\n\n    // Two independent filters. They are not exclusive — an `<a>` owns neither\n    // the submit-overrides nor `disabled`, so it takes both — and deriving them\n    // from one destructure, or from one if/else, is what broke each of them in\n    // turn: first the overrides came off every intrinsic (an `as=\"input\"` lost\n    // `formAction`), then scoping them to the anchor let `disabled` back onto\n    // it.\n    const forwardedRest: Record<string, unknown> = { ...rest };\n    if (typeof Component === 'string' && !isCustomElement(Component)) {\n      // Meaningless anywhere but a submit control, and an anchor is not one.\n      if (Component === 'a') {\n        for (const key of SUBMIT_OVERRIDES) delete forwardedRest[key];\n      }\n      // Visible via Bulma's `.button[disabled]`, so withheld from any element\n      // that does not own it.\n      if (!OWNS_DISABLED.includes(Component)) delete forwardedRest.disabled;\n    }\n\n    return (\n      <Component\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={buttonClasses}\n        href={href}\n        target={target}\n        rel={rel}\n        aria-disabled={isDisabled}\n        tabIndex={isDisabled ? -1 : undefined}\n        onClick={\n          isDisabled\n            ? // Guarded, because this handler is installed into whatever `as`\n              // renders and a custom component's `onClick` need not be a DOM\n              // event handler at all. One declaring `onClick: (v: string) =>\n              // void` calls this with a string, and an unguarded\n              // `e.preventDefault()` throws `is not a function`. Blocking the\n              // real event is the point; a foreign payload is simply not ours\n              // to act on.\n              (e: React.MouseEvent<HTMLAnchorElement>) => {\n                if (typeof e?.preventDefault === 'function') e.preventDefault();\n              }\n            : (onClick as\n                React.MouseEventHandler<HTMLAnchorElement> | undefined)\n        }\n        {...(forwardedRest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {children}\n      </Component>\n    );\n  }\n\n  return (\n    <button\n      ref={ref as React.Ref<HTMLButtonElement>}\n      className={buttonClasses}\n      disabled={isDisabled}\n      onClick={\n        onClick as React.MouseEventHandler<HTMLButtonElement> | undefined\n      }\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n}) as PolymorphicComponent<ButtonOwnProps, 'button'>;\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["_jsx"],"mappings":";;;;;;;;AA8GA,MAAM,iBAAiB,GAAG,CAAC,GAAG,WAAW,EAAE,MAAM,EAAE,OAAO,CAAU;AAEpE;;;;;;;;AAQG;AAEI,MAAM,MAAM,GAAG,UAAU,CAAC,SAAS,MAAM,CAC9C,KAAkB,EAClB,GAA2B,EAAA;IAE3B,MAAM,EACJ,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAS,EACT,SAAS,EACT,QAAQ,EACR,WAAW,EACX,WAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EACT,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAS,EACT,QAAQ,EACR,SAAS,EACT,OAAO,EACP,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,IAAI,EACJ,OAAO,EACP,MAAM,EACN,GAAG,EACH,GAAG,UAAU,EACd,GAAG,KAAwB;AAE5B,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,UAAU;AACd,KAAA,CAAC;;AAGF,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,QAAQ,EAAE;AACnD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GACZ,KAAK;AACL,YAAA,iBAAiB,CAAC,QAAQ,CAAC,KAA2C,CAAC;AACzE,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI;AACpB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,OAAO;AACnB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,aAAa,EAAE,UAAU;QACzB,cAAc,EAAE,WAAW,IAAI,WAAW;AAC3C,KAAA,CAAC;;IAGF,MAAM,aAAa,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAE7E,IAAA,IAAI,SAAS,KAAK,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyC1B,QAAA,MAAM,gBAAgB,GAAG;YACvB,YAAY;YACZ,aAAa;YACb,YAAY;YACZ,gBAAgB;YAChB,YAAY;SACb;AACD,QAAA,MAAM,aAAa,GAAG;YACpB,QAAQ;YACR,UAAU;YACV,OAAO;YACP,UAAU;YACV,QAAQ;YACR,QAAQ;YACR,UAAU;SACX;;;;;;;AAQD,QAAA,MAAM,aAAa,GAA4B,EAAE,GAAG,IAAI,EAAE;QAC1D,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE;;AAEhE,YAAA,IAAI,SAAS,KAAK,GAAG,EAAE;gBACrB,KAAK,MAAM,GAAG,IAAI,gBAAgB;AAAE,oBAAA,OAAO,aAAa,CAAC,GAAG,CAAC;YAC/D;;;AAGA,YAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC;gBAAE,OAAO,aAAa,CAAC,QAAQ;QACvE;AAEA,QAAA,QACEA,GAAA,CAAC,SAAS,IACR,GAAG,EAAE,GAAmC,EACxC,SAAS,EAAE,aAAa,EACxB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EAAA,eAAA,EACO,UAAU,EACzB,QAAQ,EAAE,UAAU,GAAG,EAAE,GAAG,SAAS,EACrC,OAAO,EACL;AACE;;;;;;;oBAOE,CAAC,CAAsC,KAAI;AACzC,wBAAA,IAAI,OAAO,CAAC,EAAE,cAAc,KAAK,UAAU;4BAAE,CAAC,CAAC,cAAc,EAAE;oBACjE;kBACC,OACwD,EAAA,GAE1D,aAA+D,YAEnE,QAAQ,EAAA,CACC;IAEhB;IAEA,QACEA,gBACE,GAAG,EAAE,GAAmC,EACxC,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,UAAU,EACpB,OAAO,EACL,OAAiE,EAAA,GAE/D,IAAI,EAAA,QAAA,EAEP,QAAQ,EAAA,CACF;AAEb,CAAC;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ;;"}

package/dist/esm/elements/Buttons.js

@@ -4,6 +4,7 @@ import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { withSubComponents } from '../helpers/withSubComponents.js';
 import { Button } from './Button.js';
 import { LinkButton } from './LinkButton.js';
+import { ToggleButton } from './ToggleButton.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
 
 const validButtonsSizes = ['small', 'medium', 'large'];
@@ -36,6 +37,7 @@ const ButtonsComponent = ({ className, textColor, color, bgColor, isCentered, is
 const Buttons = withSubComponents(ButtonsComponent, {
     Button,
     LinkButton,
+    ToggleButton,
 }, 'Buttons');
 
 export { Buttons };

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

@@ -1 +1 @@
-{"version":3,"file":"Buttons.js","sources":["../../../src/elements/Buttons.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { Button } from './Button';\nimport { LinkButton } from './LinkButton';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\nconst validButtonsSizes = ['small', 'medium', 'large'] as const;\n/**\n * Valid size values for the Buttons component (Bulma button group sizes).\n */\nexport type ButtonsSize = (typeof validButtonsSizes)[number];\n\n/**\n * Props for the Buttons component.\n */\ninterface ButtonsProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'size'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper for the button group. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Text color alias: renders `has-text-<color>`, exactly like `textColor`.\n   * Not a filled variant (no `.buttons.is-<color>` CSS exists; color the\n   * individual `Button`s instead). Prefer `textColor`, which takes precedence\n   * when both are set; use `bgColor` for a colored surface.\n   */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color helper for the button group. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Center the group of buttons. */\n  isCentered?: boolean;\n  /** Align the group of buttons to the right. */\n  isRight?: boolean;\n  /** Group buttons together as addons (removes spacing between them). */\n  hasAddons?: boolean;\n  /** Size of the button group. */\n  size?: ButtonsSize;\n  /** The button elements to render inside the group. */\n  children: React.ReactNode;\n}\n\n/**\n * The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.\n *\n * @function\n * @param {ButtonsProps} props - Props for the Buttons component.\n * @returns {JSX.Element} The rendered group of buttons.\n * @see {@link https://bulma.io/documentation/elements/button/#group | Bulma Button Group documentation}\n */\nconst ButtonsComponent: React.FC<ButtonsProps> = ({\n  className,\n  textColor,\n  color,\n  bgColor,\n  isCentered,\n  isRight,\n  hasAddons,\n  size,\n  children,\n  ...props\n}) => {\n  const buttonsClasses = usePrefixedClassNames('buttons', {\n    'is-centered': isCentered,\n    'is-right': isRight,\n    'has-addons': hasAddons,\n    [`are-${size}`]: size && validButtonsSizes.includes(size),\n  });\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const combinedClasses = classNames(\n    buttonsClasses,\n    className,\n    bulmaHelperClasses\n  );\n\n  return (\n    <div className={combinedClasses} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nexport const Buttons = withSubComponents(\n  ButtonsComponent,\n  {\n    Button,\n    LinkButton,\n  },\n  'Buttons'\n);\n"],"names":["_jsx"],"mappings":";;;;;;;;AAWA,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU;AAsC/D;;;;;;;AAOG;AACH,MAAM,gBAAgB,GAA2B,CAAC,EAChD,SAAS,EACT,SAAS,EACT,KAAK,EACL,OAAO,EACP,UAAU,EACV,OAAO,EACP,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,SAAS,EAAE;AACtD,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,OAAO;AACnB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,CAAC,CAAA,IAAA,EAAO,IAAI,CAAA,CAAE,GAAG,IAAI,IAAI,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC1D,KAAA,CAAC;AAEF;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACnD,KAAK,EAAE,SAAS,IAAI,KAAK;AACzB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;IAEF,MAAM,eAAe,GAAG,UAAU,CAChC,cAAc,EACd,SAAS,EACT,kBAAkB,CACnB;IAED,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,EAAA,GAAM,IAAI,EAAA,QAAA,EACtC,QAAQ,EAAA,CACL;AAEV,CAAC;AAEM,MAAM,OAAO,GAAG,iBAAiB,CACtC,gBAAgB,EAChB;IACE,MAAM;IACN,UAAU;CACX,EACD,SAAS;;"}
+{"version":3,"file":"Buttons.js","sources":["../../../src/elements/Buttons.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { Button } from './Button';\nimport { LinkButton } from './LinkButton';\nimport { ToggleButton } from './ToggleButton';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\nconst validButtonsSizes = ['small', 'medium', 'large'] as const;\n/**\n * Valid size values for the Buttons component (Bulma button group sizes).\n */\nexport type ButtonsSize = (typeof validButtonsSizes)[number];\n\n/**\n * Props for the Buttons component.\n */\ninterface ButtonsProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'size'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper for the button group. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Text color alias: renders `has-text-<color>`, exactly like `textColor`.\n   * Not a filled variant (no `.buttons.is-<color>` CSS exists; color the\n   * individual `Button`s instead). Prefer `textColor`, which takes precedence\n   * when both are set; use `bgColor` for a colored surface.\n   */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color helper for the button group. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Center the group of buttons. */\n  isCentered?: boolean;\n  /** Align the group of buttons to the right. */\n  isRight?: boolean;\n  /** Group buttons together as addons (removes spacing between them). */\n  hasAddons?: boolean;\n  /** Size of the button group. */\n  size?: ButtonsSize;\n  /** The button elements to render inside the group. */\n  children: React.ReactNode;\n}\n\n/**\n * The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.\n *\n * @function\n * @param {ButtonsProps} props - Props for the Buttons component.\n * @returns {JSX.Element} The rendered group of buttons.\n * @see {@link https://bulma.io/documentation/elements/button/#group | Bulma Button Group documentation}\n */\nconst ButtonsComponent: React.FC<ButtonsProps> = ({\n  className,\n  textColor,\n  color,\n  bgColor,\n  isCentered,\n  isRight,\n  hasAddons,\n  size,\n  children,\n  ...props\n}) => {\n  const buttonsClasses = usePrefixedClassNames('buttons', {\n    'is-centered': isCentered,\n    'is-right': isRight,\n    'has-addons': hasAddons,\n    [`are-${size}`]: size && validButtonsSizes.includes(size),\n  });\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const combinedClasses = classNames(\n    buttonsClasses,\n    className,\n    bulmaHelperClasses\n  );\n\n  return (\n    <div className={combinedClasses} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nexport const Buttons = withSubComponents(\n  ButtonsComponent,\n  {\n    Button,\n    LinkButton,\n    ToggleButton,\n  },\n  'Buttons'\n);\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAYA,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU;AAsC/D;;;;;;;AAOG;AACH,MAAM,gBAAgB,GAA2B,CAAC,EAChD,SAAS,EACT,SAAS,EACT,KAAK,EACL,OAAO,EACP,UAAU,EACV,OAAO,EACP,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,SAAS,EAAE;AACtD,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,OAAO;AACnB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,CAAC,CAAA,IAAA,EAAO,IAAI,CAAA,CAAE,GAAG,IAAI,IAAI,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC1D,KAAA,CAAC;AAEF;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACnD,KAAK,EAAE,SAAS,IAAI,KAAK;AACzB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;IAEF,MAAM,eAAe,GAAG,UAAU,CAChC,cAAc,EACd,SAAS,EACT,kBAAkB,CACnB;IAED,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,EAAA,GAAM,IAAI,EAAA,QAAA,EACtC,QAAQ,EAAA,CACL;AAEV,CAAC;AAEM,MAAM,OAAO,GAAG,iBAAiB,CACtC,gBAAgB,EAChB;IACE,MAAM;IACN,UAAU;IACV,YAAY;CACb,EACD,SAAS;;"}

package/dist/esm/elements/ToggleButton.js

@@ -0,0 +1,68 @@
+/* @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 { forwardRef, useState } from 'react';
+import { Button } from './Button.js';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+
+/**
+ * The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.
+ *
+ * It's always a `<button type="button">`, so it never submits a form and
+ * 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`.
+ *
+ * @function
+ * @param {ToggleButtonProps} props - Props for the ToggleButton component.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered toggle button.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | APG button pattern}
+ *
+ * @example
+ * <ToggleButton onPressedChange={setMuted}>Mute</ToggleButton>
+ *
+ * @example
+ * <Buttons hasAddons role="group" aria-label="Text style">
+ *   <ToggleButton aria-label="Bold" pressed={bold} onPressedChange={setBold}>
+ *     <Icon name="bold" />
+ *   </ToggleButton>
+ * </Buttons>
+ */
+const ToggleButton = forwardRef(function ToggleButton({ pressed: controlledPressed, defaultPressed = false, onPressedChange, color = 'link', isLoading, 'aria-busy': ariaBusy, 'aria-disabled': ariaDisabled, className, onClick, ...props }, ref) {
+    const isControlled = controlledPressed !== undefined;
+    const [internalPressed, setInternalPressed] = useState(defaultPressed);
+    const pressed = controlledPressed ?? internalPressed;
+    // 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': pressed });
+    // The caller's onClick runs first, so a `preventDefault()` there vetoes
+    // the toggle, as it does in Radix, MUI and Zag. Enter and Space reach here
+    // through the button's own click, and a disabled button gets no click.
+    //
+    // A loading one gets the click but drops it. Bulma's spinner only stops a
+    // pointer, so without this a key flipped a toggle the mouse couldn't.
+    // `disabled` would stop both, but it takes focus away mid-save.
+    const handleClick = (event) => {
+        if (isLoading)
+            return;
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        const next = !pressed;
+        onPressedChange?.(next);
+        if (!isControlled)
+            setInternalPressed(next);
+    };
+    // The props are spread first, so what a toggle depends on wins over
+    // anything a JavaScript caller or a spread object passes along: it stays
+    // a button, never submits, reports the state it's in, and says it's busy
+    // and won't respond while it's loading. A caller's own `aria-busy` or
+    // `aria-disabled` stays when it isn't loading.
+    return (jsx(Button, { ...props, ref: ref, as: "button", type: "button", isLoading: isLoading, "aria-busy": isLoading || ariaBusy, "aria-disabled": isLoading || ariaDisabled, "aria-pressed": pressed, color: pressed ? color : undefined, className: classNames(selectedClass, className), onClick: handleClick }));
+});
+ToggleButton.displayName = 'ToggleButton';
+
+export { ToggleButton };
+//# sourceMappingURL=ToggleButton.js.map