@allxsmith/bestax-bulma 5.58.0 → 5.59.0

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 { 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 */\nexport interface 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;;"}
+{"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 { IconButton } from './IconButton';\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 */\nexport interface 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    IconButton,\n  },\n  'Buttons'\n);\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AAaA,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;IACZ,UAAU;CACX,EACD,SAAS;;"}

package/dist/esm/elements/IconButton.js

@@ -0,0 +1,114 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import React, { forwardRef, useEffect } from 'react';
+import { Button } from './Button.js';
+import { Icon } from './Icon.js';
+import { buttonType } from '../helpers/buttonType.js';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { isDev, warnOnce } from '../helpers/devWarnings.js';
+import { flattenChildren } from '../helpers/flattenChildren.js';
+
+/** Whether a string has something in it besides spaces. */
+const hasText = (value) => typeof value === 'string' && value.trim() !== '';
+/** Whether a string is only spaces, which JSX leaves between elements. */
+const isBlank = (node) => typeof node === 'string' && node.trim() === '';
+/**
+ * The glyph in one `.icon`, which is what Bulma keeps square: an `<Icon>` as
+ * given, Fragments opened up and blank text left out, and anything else
+ * inside an `Icon`. Null when there's nothing to draw, so an empty Fragment
+ * or array counts as no glyph.
+ */
+function iconOf(node) {
+    const items = flattenChildren(node).filter(item => !isBlank(item));
+    if (items.length === 0)
+        return null;
+    const [only] = items;
+    if (items.length === 1 && React.isValidElement(only) && only.type === Icon) {
+        return only;
+    }
+    return jsx(Icon, { children: items });
+}
+/** The glyph `icon` draws: a string is an `Icon` name, the rest as `iconOf`. */
+function iconFromProp(icon) {
+    if (typeof icon !== 'string')
+        return iconOf(icon);
+    return hasText(icon) ? jsx(Icon, { name: icon }) : null;
+}
+/**
+ * The `IconButton` component renders a button that shows only an icon, and requires a name for it.
+ *
+ * It renders through `Button`, so it takes everything `Button` takes, and
+ * adds the icon and a name the types require: `aria-label`, or
+ * `aria-labelledby` in its place. Bulma keeps a button whose only child is an
+ * `.icon` square at every size, and `isRounded` makes it a circle. It has no
+ * tooltip of its own: wrap it in `Tooltip` for a description.
+ *
+ * @function
+ * @param {IconButtonProps} props - Props for the IconButton component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered button, anchor, or custom element.
+ * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
+ *
+ * @example
+ * <IconButton icon="trash" aria-label="Delete" color="danger" />
+ *
+ * @example
+ * <IconButton aria-label="Settings">
+ *   <Icon name="cog" />
+ * </IconButton>
+ */
+const IconButton = forwardRef(function IconButton(props, ref) {
+    const { icon, children, className, ...rest } = props;
+    const iconButtonClass = usePrefixedClassNames('icon-button');
+    const unnamed = !hasText(rest['aria-label']) && !hasText(rest['aria-labelledby']);
+    // Each way of giving the glyph counts only if it draws something, so an
+    // empty Fragment or array as `icon` doesn't hide real children, and an
+    // empty one as children doesn't warn.
+    const fromIcon = iconFromProp(icon);
+    const fromChildren = iconOf(children);
+    const both = fromIcon !== null && fromChildren !== null;
+    // One glyph, from `icon` or else from `children`, so the button's only
+    // child is one `.icon`, which Bulma keeps square, and round with
+    // `isRounded`.
+    const glyph = fromIcon ?? fromChildren;
+    const empty = glyph === null;
+    // Only top-level text, Fragments opened up, and only in development, where
+    // the warning below can say something about it.
+    const textInside = isDev() &&
+        flattenChildren(children).some(child => typeof child === 'number' || hasText(child));
+    useEffect(() => {
+        if (unnamed) {
+            warnOnce('IconButton:unnamed', '[bestax-bulma] <IconButton> has no accessible name. Pass ' +
+                'aria-label naming what it does ("Delete"), or aria-labelledby, ' +
+                'so a screen reader has something to announce.');
+        }
+        if (empty) {
+            warnOnce('IconButton:no-glyph', '[bestax-bulma] <IconButton> has no glyph: neither icon nor ' +
+                'children draws one, so it renders an empty square. Pass an icon ' +
+                'name, an <Icon> or another node.');
+        }
+        if (both) {
+            warnOnce('IconButton:icon-and-children', '[bestax-bulma] <IconButton> was given both icon and children. It ' +
+                'draws icon and leaves the children out: give the glyph one way.');
+        }
+        if (textInside) {
+            warnOnce('IconButton:text', '[bestax-bulma] <IconButton> was given text as children. Its ' +
+                'aria-label replaces the text as its name, so a button with text ' +
+                'is a <Button>.');
+        }
+    }, [unnamed, empty, both, textInside]);
+    // `type` is a button's only on a `<button>`. On an `<a>` it's the MIME hint,
+    // and a custom component owns what it means, so those get it as given.
+    const tag = rest.as ?? 'button';
+    const typeProp = tag === 'button' ? { type: buttonType(rest.type) } : undefined;
+    return (jsx(Button
+    // IconButton is polymorphic through to Button, which resolves the
+    // element from `as`. TS can't infer that through the spread, so the
+    // props and the ref are read at Button's default element.
+    , { ...rest, ...typeProp, ref: ref, className: classNames(iconButtonClass, className), children: glyph }));
+});
+IconButton.displayName = 'IconButton';
+
+export { IconButton };
+//# sourceMappingURL=IconButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../src/elements/IconButton.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from 'react';\nimport { Button, type ButtonOwnProps, type ButtonProps } from './Button';\nimport { Icon } from './Icon';\nimport { buttonType } from '../helpers/buttonType';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { isDev, warnOnce } from '../helpers/devWarnings';\nimport { flattenChildren } from '../helpers/flattenChildren';\nimport type { PolymorphicComponent } from '../helpers/polymorphic';\n\n/**\n * The IconButton component's own props: everything `Button` takes, plus the\n * icon.\n */\nexport interface IconButtonOwnProps extends ButtonOwnProps {\n  /**\n   * The glyph. A string is an `Icon` name, drawn from the icon library\n   * `ConfigProvider` sets. An `<Icon>` renders as given, so it can carry its\n   * own `variant` or `library`. Any other node, such as an SVG or a component\n   * from an icon package, goes inside an `Icon`, which gives it the `.icon`\n   * wrapper Bulma keeps square. It's decorative: the button's name says what\n   * it does. Give the glyph here or as `children`, not both: with both, it\n   * draws `icon` and warns in development. With neither, such as an empty\n   * string from `cond ? 'trash' : ''`, the button is an empty square, and that\n   * warns in development too.\n   */\n  icon?: React.ReactNode;\n  /**\n   * The glyph as children, the way Mantine, MUI and Chakra take it: an\n   * `<Icon>` renders as given, and any other node, such as an SVG, goes\n   * inside an `Icon`, as with `icon`. Left out when `icon` is given, which\n   * warns in development. Text warns too, since `aria-label` replaces it as\n   * the name: a button with text is a `Button`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Makes the button a circle the size of its square. The circle comes from\n   * bestax's CSS, in `bestax.css` and its variants, or in `extras.css` next\n   * to your own Bulma. Without it, Bulma's `is-rounded` draws a pill a little\n   * wider than it is tall.\n   */\n  isRounded?: boolean;\n}\n\n/** Names an IconButton by the text of another element. */\nexport interface IconButtonLabelledBy {\n  /** The id of the element whose text names the button, in place of `aria-label`. */\n  'aria-labelledby': string;\n  /**\n   * @internal Not with `aria-labelledby`, which already names the button.\n   * Declared so the two can't be passed together.\n   */\n  'aria-label'?: undefined;\n}\n\n/** Names an IconButton with `aria-label`, the usual way. */\nexport interface IconButtonLabel {\n  /**\n   * The button's name: what a screen reader announces and what a voice\n   * control user says to press it. Required, or `aria-labelledby` in its\n   * place, since an icon has no text to name it by. Name the action\n   * (\"Delete\"), not the picture (\"Trash\"). An empty or blank one warns in\n   * development.\n   */\n  'aria-label': string;\n  /**\n   * @internal Not with `aria-label`. Declared so the two can't be passed\n   * together.\n   */\n  'aria-labelledby'?: undefined;\n}\n\n/**\n * How an IconButton gets its name: `aria-label`, or `aria-labelledby` in its\n * place. `IconButtonLabel` comes last because TypeScript names the union's\n * last member when neither is given: under \"No overload matches this call\",\n * each overload's error ends \"Property ''aria-label'' is missing … but\n * required in type 'IconButtonLabel'\".\n */\nexport type IconButtonName = IconButtonLabelledBy | IconButtonLabel;\n\n/**\n * Props for the IconButton component. The DOM attributes and the `ref` follow\n * `as`, exactly as they do on `Button`.\n *\n * @extraProp {string} [type='button'] - On a `<button>`, `'button'`, `'submit'` or `'reset'`, and `'button'` unless you pass one of the other two, so it never submits a form by accident. With another `as`, whatever that element or component takes, passed through as given, such as an `<a>`'s MIME type.\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`.\n */\nexport type IconButtonProps<T extends React.ElementType = 'button'> =\n  IconButtonOwnProps &\n    IconButtonName &\n    Omit<\n      React.ComponentPropsWithoutRef<T>,\n      keyof IconButtonOwnProps | 'aria-label' | 'aria-labelledby' | 'as'\n    > & {\n      /**\n       * Render as a `<button>`, an `<a>`, or a custom component such as a\n       * router `Link`, as on `Button`.\n       * @defaultValue 'button'\n       */\n      as?: T;\n    };\n\n/**\n * The shape the implementation destructures. The public contract is the\n * generic `IconButtonProps<T>` above, and the body can't see through `T`, so\n * it reads the widest form of the props it touches.\n */\ntype IconButtonImplProps = IconButtonOwnProps & {\n  as?: React.ElementType;\n  type?: unknown;\n  'aria-label'?: unknown;\n  'aria-labelledby'?: unknown;\n};\n\n/** Whether a string has something in it besides spaces. */\nconst hasText = (value: unknown) =>\n  typeof value === 'string' && value.trim() !== '';\n\n/** Whether a string is only spaces, which JSX leaves between elements. */\nconst isBlank = (node: React.ReactNode) =>\n  typeof node === 'string' && node.trim() === '';\n\n/**\n * The glyph in one `.icon`, which is what Bulma keeps square: an `<Icon>` as\n * given, Fragments opened up and blank text left out, and anything else\n * inside an `Icon`. Null when there's nothing to draw, so an empty Fragment\n * or array counts as no glyph.\n */\nfunction iconOf(node: React.ReactNode) {\n  const items = flattenChildren(node).filter(item => !isBlank(item));\n  if (items.length === 0) return null;\n  const [only] = items;\n  if (items.length === 1 && React.isValidElement(only) && only.type === Icon) {\n    return only;\n  }\n  return <Icon>{items}</Icon>;\n}\n\n/** The glyph `icon` draws: a string is an `Icon` name, the rest as `iconOf`. */\nfunction iconFromProp(icon: React.ReactNode) {\n  if (typeof icon !== 'string') return iconOf(icon);\n  return hasText(icon) ? <Icon name={icon} /> : null;\n}\n\n/**\n * The `IconButton` component renders a button that shows only an icon, and requires a name for it.\n *\n * It renders through `Button`, so it takes everything `Button` takes, and\n * adds the icon and a name the types require: `aria-label`, or\n * `aria-labelledby` in its place. Bulma keeps a button whose only child is an\n * `.icon` square at every size, and `isRounded` makes it a circle. It has no\n * tooltip of its own: wrap it in `Tooltip` for a description.\n *\n * @function\n * @param {IconButtonProps} props - Props for the IconButton 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 * @example\n * <IconButton icon=\"trash\" aria-label=\"Delete\" color=\"danger\" />\n *\n * @example\n * <IconButton aria-label=\"Settings\">\n *   <Icon name=\"cog\" />\n * </IconButton>\n */\nexport const IconButton = forwardRef(function IconButton(\n  props: IconButtonProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const { icon, children, className, ...rest } = props as IconButtonImplProps;\n\n  const iconButtonClass = usePrefixedClassNames('icon-button');\n\n  const unnamed =\n    !hasText(rest['aria-label']) && !hasText(rest['aria-labelledby']);\n  // Each way of giving the glyph counts only if it draws something, so an\n  // empty Fragment or array as `icon` doesn't hide real children, and an\n  // empty one as children doesn't warn.\n  const fromIcon = iconFromProp(icon);\n  const fromChildren = iconOf(children);\n  const both = fromIcon !== null && fromChildren !== null;\n  // One glyph, from `icon` or else from `children`, so the button's only\n  // child is one `.icon`, which Bulma keeps square, and round with\n  // `isRounded`.\n  const glyph = fromIcon ?? fromChildren;\n  const empty = glyph === null;\n  // Only top-level text, Fragments opened up, and only in development, where\n  // the warning below can say something about it.\n  const textInside =\n    isDev() &&\n    flattenChildren(children).some(\n      child => typeof child === 'number' || hasText(child)\n    );\n  useEffect(() => {\n    if (unnamed) {\n      warnOnce(\n        'IconButton:unnamed',\n        '[bestax-bulma] <IconButton> has no accessible name. Pass ' +\n          'aria-label naming what it does (\"Delete\"), or aria-labelledby, ' +\n          'so a screen reader has something to announce.'\n      );\n    }\n    if (empty) {\n      warnOnce(\n        'IconButton:no-glyph',\n        '[bestax-bulma] <IconButton> has no glyph: neither icon nor ' +\n          'children draws one, so it renders an empty square. Pass an icon ' +\n          'name, an <Icon> or another node.'\n      );\n    }\n    if (both) {\n      warnOnce(\n        'IconButton:icon-and-children',\n        '[bestax-bulma] <IconButton> was given both icon and children. It ' +\n          'draws icon and leaves the children out: give the glyph one way.'\n      );\n    }\n    if (textInside) {\n      warnOnce(\n        'IconButton:text',\n        '[bestax-bulma] <IconButton> was given text as children. Its ' +\n          'aria-label replaces the text as its name, so a button with text ' +\n          'is a <Button>.'\n      );\n    }\n  }, [unnamed, empty, both, textInside]);\n\n  // `type` is a button's only on a `<button>`. On an `<a>` it's the MIME hint,\n  // and a custom component owns what it means, so those get it as given.\n  const tag = rest.as ?? 'button';\n  const typeProp =\n    tag === 'button' ? { type: buttonType(rest.type) } : undefined;\n\n  return (\n    <Button\n      // IconButton is polymorphic through to Button, which resolves the\n      // element from `as`. TS can't infer that through the spread, so the\n      // props and the ref are read at Button's default element.\n      {...(rest as ButtonProps)}\n      {...typeProp}\n      ref={ref as React.Ref<HTMLButtonElement>}\n      className={classNames(iconButtonClass, className)}\n    >\n      {glyph}\n    </Button>\n  );\n}) as PolymorphicComponent<IconButtonOwnProps & IconButtonName, 'button'>;\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/helpers/containerBreakpoints.js

@@ -0,0 +1,14 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+// INTERNAL: not exported from src/index.ts, which re-exports Container's
+// module whole, so this list lives here rather than beside the type.
+//
+// Every value `ContainerBreakpoint` takes, in one list, so Container's and
+// Group's checks of a JavaScript caller's `breakpoint` can't drift apart.
+const CONTAINER_BREAKPOINTS = [
+    'tablet',
+    'desktop',
+    'widescreen',
+];
+
+export { CONTAINER_BREAKPOINTS };
+//# sourceMappingURL=containerBreakpoints.js.map

package/dist/esm/helpers/containerBreakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"containerBreakpoints.js","sources":["../../../src/helpers/containerBreakpoints.ts"],"sourcesContent":["// INTERNAL: not exported from src/index.ts, which re-exports Container's\n// module whole, so this list lives here rather than beside the type.\n//\n// Every value `ContainerBreakpoint` takes, in one list, so Container's and\n// Group's checks of a JavaScript caller's `breakpoint` can't drift apart.\n\nimport type { ContainerBreakpoint } from '../layout/Container';\n\nexport const CONTAINER_BREAKPOINTS: readonly ContainerBreakpoint[] = [\n  'tablet',\n  'desktop',\n  'widescreen',\n];\n"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AAIO,MAAM,qBAAqB,GAAmC;IACnE,QAAQ;IACR,SAAS;IACT,YAAY;;;"}

package/dist/esm/helpers/polymorphic.js.map

@@ -1 +1 @@
-{"version":3,"file":"polymorphic.js","sources":["../../../src/helpers/polymorphic.ts"],"sourcesContent":["import type React from 'react';\n\n/**\n * Whether an `as` target is a custom element rather than a built-in tag.\n *\n * HTML requires a custom element's name to contain a hyphen, and no built-in\n * element name has one, so this is exact rather than a heuristic. It matters\n * because a custom element is an intrinsic STRING — `typeof as === 'string'` is\n * true — while its props are whatever a consumer declared through\n * `React.JSX.IntrinsicElements`, the way this package declares `<ion-icon>`.\n * A runtime backstop that filters built-in attributes must leave those alone,\n * or it strips props the derived type just promised to forward.\n */\nexport function isCustomElement(as: unknown): as is string {\n  return typeof as === 'string' && as.includes('-');\n}\n\n/**\n * The ref type of whatever element `as` renders.\n *\n * Derived from `ComponentPropsWithRef` rather than `React.ComponentRef` so it\n * resolves on every `@types/react` a consumer may be on: this package supports\n * React 18 and 19, and the CI matrix pins only `react`/`react-dom`, never the\n * types, so a types-only regression here would not be caught.\n *\n * `never` when the target takes no ref. A plain function component has no `ref`\n * key at all, and React's own types reject `<PlainFC ref={…} />`; without the\n * guard the indexed access degraded to `unknown` and we accepted a ref that\n * silently does nothing — `ref.current` stays null and a later `.focus()`\n * throws. Matching React's strictness is the point.\n */\nexport type PolymorphicRef<T extends React.ElementType> =\n  'ref' extends keyof React.ComponentPropsWithRef<T>\n    ? React.ComponentPropsWithRef<T>['ref']\n    : never;\n\n/**\n * A component's own props, plus the attributes of the element `as` names.\n *\n * `Own` wins a collision by default — a component that declares\n * `color` as a Bulma variant keeps it, rather than inheriting the DOM attribute\n * of the same name. `color` used to be dropped here as well, to stop the\n * deprecated presentational HTML attribute reaching the components whose own\n * props do not declare one — but doing it in the shared type also stripped\n * `color` from a CUSTOM target that legitimately has one. Those components\n * declare `color?: never` themselves instead, which lands in `keyof Own` and\n * reaches the same result without a special case here.\n *\n * `Forwarded` names the own props the component hands STRAIGHT to the target\n * instead of consuming, and the subtraction runs the other way for them: the\n * TARGET's declaration wins, and the own one is what covers a target that has\n * no such prop. Subtracting them threw the target's declaration away, so an\n * OPTIONAL own prop hid a REQUIRED one — `<Avatar as={NextLink} name=\"Ada\" />`\n * compiled because Avatar's `href?: string` survived while `next/link`'s\n * required `href` was omitted, and the target threw on what it never received\n * (#665). The target wins rather than both declarations applying at once,\n * because for a prop the component only passes along its own type has no\n * standing: `next/link` accepts a URL object as well as a string, and\n * intersecting Avatar's `string` with that would refuse the object.\n *\n * `Forwarded` defaults to `never`, so a prop the component CONSUMES stays\n * subtracted — the common case, and the one `color` needs. What that costs is\n * that a target REQUIRING a consumed prop is still satisfiable with the prop\n * omitted, and the value goes wherever the component sends it: `Menu.Item`\n * spends several of its own props on its wrapping `<li>`, `title` and `style`\n * among them, so a target requiring one of those never sees it. Erroring on\n * that needs a category this pair cannot express, since `className` is consumed\n * too and yet every component composes one and passes it on. It is pinned as a\n * limitation in `__typetests__/polymorphic.tsx` rather than guessed at here.\n *\n * `Own` is returned untouched when nothing is forwarded, rather than run through\n * an `Omit` that names no keys. `Omit` is not the identity it looks like: it\n * keys off `keyof Own`, which for a UNION `Own` is only what the members share,\n * so `PolymorphicProps<'div', A | B>` lost every prop of both. It is public API\n * and a consumer's wrapper can pass a union; the untouched branch also keeps\n * each own prop's TSDoc reaching an IDE, which a mapped type drops. The\n * forwarded branch distributes over `Own` for the same reason.\n *\n * Distributive over `T` on purpose. `Omit<A | B, K>` keys off `keyof (A | B)`,\n * which is only what A and B share — so a union-typed `as` (a ternary, or a\n * variable typed `'a' | 'button'`) silently lost every prop that belongs to\n * just one member, `href` among them. Distributing produces a union of prop\n * shapes instead, and each member keeps its own.\n *\n * Each component writes this intersection out in its own `*Props` alias rather\n * than referring to this type: the API-docs extractor\n * (`scripts/lib/props-extract.mjs`) walks heritage syntactically, and a generic\n * alias leaves it resolving a type parameter it cannot see through.\n * This type is here for the component's cast target and for consumers writing\n * wrappers.\n */\nexport type PolymorphicProps<\n  T extends React.ElementType,\n  Own,\n  Forwarded extends keyof Own = never,\n> = T extends unknown\n  ? ([Forwarded] extends [never]\n      ? Own\n      : Own extends unknown\n        ? Omit<Own, Extract<Forwarded, keyof React.ComponentPropsWithoutRef<T>>>\n        : never) &\n      Omit<\n        React.ComponentPropsWithoutRef<T>,\n        Exclude<keyof Own, Forwarded> | 'as'\n      > & {\n        /** The element or component to render. */\n        as?: T;\n      }\n  : never;\n\n/**\n * A component whose props and forwarded ref both follow `as`.\n *\n * `forwardRef` cannot express a generic component, so the implementation is\n * cast to this. `displayName` is part of the type because the library sets it\n * on every `forwardRef` component, and `withSubComponents` constrains its base\n * to `{ displayName?: string }`.\n *\n * The second, non-generic signature exists for type DERIVATION rather than for\n * calls. `React.ComponentProps<typeof Button>` infers from the last overload;\n * with only the generic one it instantiated at the constraint and collapsed to\n * `any`, so a consumer building their own prop type on ours lost every check.\n * Calls still resolve against the generic signature first, so ordering here is\n * load-bearing — swapping the two puts the collapse back.\n *\n * **A wrapping HOC erases the genericity.** `React.memo(Button)`,\n * `React.lazy`, a `styled()` wrapper — anything that infers its props through\n * `ComponentProps<T>` — instantiates the type parameter once and hands back a\n * component with a single prop type. It takes the LAST call signature, which is\n * the derivation overload, so the wrapper is pinned to the DEFAULT element:\n * `React.memo(Button)` rejects `as=\"div\"` outright, and `React.memo(Dropdown.Item)`\n * renders neither a `<div>` nor a `<button>`, though both components accept those\n * directly. Stricter, not looser — the checks do not stop, they collapse onto one\n * element, and a `Dropdown.Item` memoized for a long menu list is the case that\n * meets it. This is inherent to polymorphic components in TypeScript, not\n * something this library can fix. Re-assert the type to get the rest back:\n *\n * ```tsx\n * const MemoButton = React.memo(Button) as typeof Button;\n * ```\n */\nexport interface PolymorphicComponent<\n  Own,\n  Default extends React.ElementType,\n  Forwarded extends keyof Own = never,\n> {\n  <T extends React.ElementType = Default>(\n    props: PolymorphicProps<T, Own, Forwarded> & { ref?: PolymorphicRef<T> }\n  ): React.ReactElement | null;\n  (\n    props: PolymorphicProps<Default, Own, Forwarded> & {\n      ref?: PolymorphicRef<Default>;\n    }\n  ): React.ReactElement | null;\n  displayName?: string;\n}\n\n/**\n * A component whose props follow `as` but which forwards no ref.\n *\n * For components that own the node they observe — `Reveal` keeps its own ref on\n * the element it watches for scroll intersection, which is not always the\n * element `as` names.\n *\n * It carries `Forwarded` even with no component passing one today: the default\n * is the behaviour without it, and a component that grows a forwarded own prop\n * would otherwise reintroduce #665 here with nothing to say so.\n */\nexport interface PolymorphicComponentWithoutRef<\n  Own,\n  Default extends React.ElementType,\n  Forwarded extends keyof Own = never,\n> {\n  <T extends React.ElementType = Default>(\n    props: PolymorphicProps<T, Own, Forwarded>\n  ): React.ReactElement | null;\n  // The same derivation overload `PolymorphicComponent` carries, for the same\n  // reason: without it `React.ComponentProps<typeof Reveal>` instantiates at the\n  // constraint and collapses to `any`.\n  (props: PolymorphicProps<Default, Own, Forwarded>): React.ReactElement | null;\n  displayName?: string;\n}\n\n/**\n * A component whose props follow `as`, where `as` is a closed set of tags.\n *\n * `PolymorphicComponentWithoutRef` lets `as` name anything; this narrows it to\n * `Allowed`. Bulma pins some elements by its own markup contract — a dropdown\n * item is an `<a>`, a `<div>` or a `<button>` and nothing else — and the\n * constraint keeps that promise while still deriving props from whichever of\n * the three a caller picks.\n *\n * Genericity is what makes the derivation exact for a LITERAL `as`, and it is\n * worth the extra type parameter. Typing such a component as `React.FC<Union>`\n * instead — a union of the three prop shapes — reads as equivalent but is not:\n * against a union target, an object literal's excess-property check passes if\n * the property exists in ANY member, so `<Item as=\"div\" href=\"/x\" />` slips\n * through. Inferring `T` from the literal checks against that one member.\n *\n * A UNION-typed `as` — a ternary, or a variable typed as the whole set — infers\n * `T` as the union and lands back in that same permissive check, so\n * `<Item as={tag} href=\"/x\" />` compiles whatever `tag` turns out to be. That is\n * the open `as` behaviour too, and deliberate there: `PolymorphicProps`\n * distributes precisely so a union-typed `as` KEEPS each member's props rather\n * than losing every prop the members do not share. Narrowing it is not a\n * constrained-component question; it would have to change for `Button` first.\n */\nexport interface ConstrainedPolymorphicComponentWithoutRef<\n  Own,\n  Allowed extends React.ElementType,\n  Default extends Allowed,\n  Forwarded extends keyof Own = never,\n> {\n  <T extends Allowed = Default>(\n    props: PolymorphicProps<T, Own, Forwarded>\n  ): React.ReactElement | null;\n  // The derivation overload `PolymorphicComponent` documents, for the same\n  // reason: without it `React.ComponentProps<typeof DropdownItem>` instantiates\n  // at the constraint and collapses to `any`.\n  (props: PolymorphicProps<Default, Own, Forwarded>): React.ReactElement | null;\n  displayName?: string;\n}\n"],"names":[],"mappings":";AAEA;;;;;;;;;;AAUG;AACG,SAAU,eAAe,CAAC,EAAW,EAAA;IACzC,OAAO,OAAO,EAAE,KAAK,QAAQ,IAAI,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC;AACnD;;"}
+{"version":3,"file":"polymorphic.js","sources":["../../../src/helpers/polymorphic.ts"],"sourcesContent":["import type React from 'react';\n\n/**\n * Whether an `as` target is a custom element rather than a built-in tag.\n *\n * HTML requires a custom element's name to contain a hyphen, and no built-in\n * element name has one, so this is exact rather than a heuristic. It matters\n * because a custom element is an intrinsic STRING — `typeof as === 'string'` is\n * true — while its props are whatever a consumer declared through\n * `React.JSX.IntrinsicElements`, the way this package declares `<ion-icon>`.\n * A runtime backstop that filters built-in attributes must leave those alone,\n * or it strips props the derived type just promised to forward.\n */\nexport function isCustomElement(as: unknown): as is string {\n  return typeof as === 'string' && as.includes('-');\n}\n\n/**\n * The ref type of whatever element `as` renders.\n *\n * Derived from `ComponentPropsWithRef` rather than `React.ComponentRef` so it\n * resolves on every `@types/react` a consumer may be on: this package supports\n * React 18 and 19, and the CI matrix pins only `react`/`react-dom`, never the\n * types, so a types-only regression here would not be caught.\n *\n * `never` when the target takes no ref. A plain function component has no `ref`\n * key at all, and React's own types reject `<PlainFC ref={…} />`; without the\n * guard the indexed access degraded to `unknown` and we accepted a ref that\n * silently does nothing — `ref.current` stays null and a later `.focus()`\n * throws. Matching React's strictness is the point.\n */\nexport type PolymorphicRef<T extends React.ElementType> =\n  'ref' extends keyof React.ComponentPropsWithRef<T>\n    ? React.ComponentPropsWithRef<T>['ref']\n    : never;\n\n/**\n * A component's own props, plus the attributes of the element `as` names.\n *\n * `Own` wins a collision by default — a component that declares\n * `color` as a Bulma variant keeps it, rather than inheriting the DOM attribute\n * of the same name. `color` used to be dropped here as well, to stop the\n * deprecated presentational HTML attribute reaching the components whose own\n * props do not declare one — but doing it in the shared type also stripped\n * `color` from a CUSTOM target that legitimately has one. Those components\n * declare `color?: never` themselves instead, which lands in `keyof Own` and\n * reaches the same result without a special case here.\n *\n * `Forwarded` names the own props the component hands STRAIGHT to the target\n * instead of consuming, and the subtraction runs the other way for them: the\n * TARGET's declaration wins, and the own one is what covers a target that has\n * no such prop. Subtracting them threw the target's declaration away, so an\n * OPTIONAL own prop hid a REQUIRED one — `<Avatar as={NextLink} name=\"Ada\" />`\n * compiled because Avatar's `href?: string` survived while `next/link`'s\n * required `href` was omitted, and the target threw on what it never received\n * (#665). The target wins rather than both declarations applying at once,\n * because for a prop the component only passes along its own type has no\n * standing: `next/link` accepts a URL object as well as a string, and\n * intersecting Avatar's `string` with that would refuse the object.\n *\n * `Forwarded` defaults to `never`, so a prop the component CONSUMES stays\n * subtracted — the common case, and the one `color` needs. What that costs is\n * that a target REQUIRING a consumed prop is still satisfiable with the prop\n * omitted, and the value goes wherever the component sends it: `Menu.Item`\n * spends several of its own props on its wrapping `<li>`, `title` and `style`\n * among them, so a target requiring one of those never sees it. Erroring on\n * that needs a category this pair cannot express, since `className` is consumed\n * too and yet every component composes one and passes it on. It is pinned as a\n * limitation in `__typetests__/polymorphic.tsx` rather than guessed at here.\n *\n * `Own` is returned untouched when nothing is forwarded, rather than run through\n * an `Omit` that names no keys. `Omit` is not the identity it looks like: it\n * keys off `keyof Own`, which for a UNION `Own` is only what the members share,\n * so `PolymorphicProps<'div', A | B>` lost every prop of both. It is public API\n * and a consumer's wrapper can pass a union; the untouched branch also keeps\n * each own prop's TSDoc reaching an IDE, which a mapped type drops. The\n * forwarded branch distributes over `Own` for the same reason.\n *\n * Distributive over `T` on purpose. `Omit<A | B, K>` keys off `keyof (A | B)`,\n * which is only what A and B share — so a union-typed `as` (a ternary, or a\n * variable typed `'a' | 'button'`) silently lost every prop that belongs to\n * just one member, `href` among them. Distributing produces a union of prop\n * shapes instead, and each member keeps its own.\n *\n * Each component writes this intersection out in its own `*Props` alias rather\n * than referring to this type: the API-docs extractor\n * (`scripts/lib/props-extract.mjs`) walks heritage syntactically, and a generic\n * alias leaves it resolving a type parameter it cannot see through.\n * This type is here for the component's cast target and for consumers writing\n * wrappers.\n */\nexport type PolymorphicProps<\n  T extends React.ElementType,\n  Own,\n  Forwarded extends keyof Own = never,\n> = T extends unknown\n  ? ([Forwarded] extends [never]\n      ? Own\n      : Own extends unknown\n        ? Omit<Own, Extract<Forwarded, keyof React.ComponentPropsWithoutRef<T>>>\n        : never) &\n      Omit<\n        React.ComponentPropsWithoutRef<T>,\n        Exclude<keyof Own, Forwarded> | 'as'\n      > & {\n        /** The element or component to render. */\n        as?: T;\n      }\n  : never;\n\n/**\n * A component whose props and forwarded ref both follow `as`.\n *\n * `forwardRef` cannot express a generic component, so the implementation is\n * cast to this. `displayName` is part of the type because the library sets it\n * on every `forwardRef` component, and `withSubComponents` constrains its base\n * to `{ displayName?: string }`.\n *\n * The second, non-generic signature exists for type DERIVATION rather than for\n * calls. `React.ComponentProps<typeof Button>` infers from the last overload;\n * with only the generic one it instantiated at the constraint and collapsed to\n * `any`, so a consumer building their own prop type on ours lost every check.\n * Calls still resolve against the generic signature first, so ordering here is\n * load-bearing — swapping the two puts the collapse back.\n *\n * **A wrapping HOC erases the genericity.** `React.memo(Button)`,\n * `React.lazy`, a `styled()` wrapper — anything that infers its props through\n * `ComponentProps<T>` — instantiates the type parameter once and hands back a\n * component with a single prop type. It takes the LAST call signature, which is\n * the derivation overload, so the wrapper is pinned to the DEFAULT element:\n * `React.memo(Button)` rejects `as=\"div\"` outright, and `React.memo(Dropdown.Item)`\n * renders neither a `<div>` nor a `<button>`, though both components accept those\n * directly. Stricter, not looser — the checks do not stop, they collapse onto one\n * element, and a `Dropdown.Item` memoized for a long menu list is the case that\n * meets it. This is inherent to polymorphic components in TypeScript, not\n * something this library can fix. Re-assert the type to get the rest back:\n *\n * ```tsx\n * const MemoButton = React.memo(Button) as typeof Button;\n * ```\n */\nexport interface PolymorphicComponent<\n  Own,\n  Default extends React.ElementType,\n  Forwarded extends keyof Own = never,\n> {\n  <T extends React.ElementType = Default>(\n    props: PolymorphicProps<T, Own, Forwarded> & { ref?: PolymorphicRef<T> }\n  ): React.ReactElement | null;\n  (\n    props: PolymorphicProps<Default, Own, Forwarded> & {\n      ref?: PolymorphicRef<Default>;\n    }\n  ): React.ReactElement | null;\n  displayName?: string;\n}\n\n/**\n * A component whose props follow `as` but which forwards no ref.\n *\n * For components that own the node they observe — `Reveal` keeps its own ref on\n * the element it watches for scroll intersection, which is not always the\n * element `as` names.\n *\n * It carries `Forwarded` even with no component passing one today: the default\n * is the behaviour without it, and a component that grows a forwarded own prop\n * would otherwise reintroduce #665 here with nothing to say so.\n */\nexport interface PolymorphicComponentWithoutRef<\n  Own,\n  Default extends React.ElementType,\n  Forwarded extends keyof Own = never,\n> {\n  <T extends React.ElementType = Default>(\n    props: PolymorphicProps<T, Own, Forwarded>\n  ): React.ReactElement | null;\n  // The same derivation overload `PolymorphicComponent` carries, for the same\n  // reason: without it `React.ComponentProps<typeof Reveal>` instantiates at the\n  // constraint and collapses to `any`.\n  (props: PolymorphicProps<Default, Own, Forwarded>): React.ReactElement | null;\n  displayName?: string;\n}\n\n/**\n * A component whose props follow `as`, where `as` is a closed set of tags.\n *\n * `PolymorphicComponentWithoutRef` lets `as` name anything; this narrows it to\n * `Allowed`. Bulma pins some elements by its own markup contract — a dropdown\n * item is an `<a>`, a `<div>` or a `<button>` and nothing else — and the\n * constraint keeps that promise while still deriving props from whichever of\n * the three a caller picks.\n *\n * Genericity is what makes the derivation exact for a LITERAL `as`, and it is\n * worth the extra type parameter. Typing such a component as `React.FC<Union>`\n * instead — a union of the three prop shapes — reads as equivalent but is not:\n * against a union target, an object literal's excess-property check passes if\n * the property exists in ANY member, so `<Item as=\"div\" href=\"/x\" />` slips\n * through. Inferring `T` from the literal checks against that one member.\n *\n * A UNION-typed `as` — a ternary, or a variable typed as the whole set — infers\n * `T` as the union and lands back in that same permissive check, so\n * `<Item as={tag} href=\"/x\" />` compiles whatever `tag` turns out to be. That is\n * the open `as` behaviour too, and deliberate there: `PolymorphicProps`\n * distributes precisely so a union-typed `as` KEEPS each member's props rather\n * than losing every prop the members do not share. Narrowing it is not a\n * constrained-component question; it would have to change for `Button` first.\n */\nexport interface ConstrainedPolymorphicComponentWithoutRef<\n  Own,\n  Allowed extends React.ElementType,\n  Default extends Allowed,\n  Forwarded extends keyof Own = never,\n> {\n  <T extends Allowed = Default>(\n    props: PolymorphicProps<T, Own, Forwarded>\n  ): React.ReactElement | null;\n  // The derivation overload `PolymorphicComponent` documents, for the same\n  // reason: without it `React.ComponentProps<typeof DropdownItem>` instantiates\n  // at the constraint and collapses to `any`.\n  (props: PolymorphicProps<Default, Own, Forwarded>): React.ReactElement | null;\n  displayName?: string;\n}\n\n/**\n * `ConstrainedPolymorphicComponentWithoutRef` with a forwarded ref: the props\n * and the ref both follow `as`, and `as` is one of `Allowed`.\n *\n * For a component whose `as` is a closed set of tags that don't share one\n * prop surface. `Stack` renders a `<div>`, a `<form>`, an `<ol>` or a\n * `<fieldset>` among others, which take different attributes (`action`,\n * `start`, `disabled`) and give the ref a different element, so pinning them\n * all to `HTMLAttributes<HTMLElement>` would refuse attributes that work.\n */\nexport interface ConstrainedPolymorphicComponent<\n  Own,\n  Allowed extends React.ElementType,\n  Default extends Allowed,\n  Forwarded extends keyof Own = never,\n> {\n  <T extends Allowed = Default>(\n    props: PolymorphicProps<T, Own, Forwarded> & { ref?: PolymorphicRef<T> }\n  ): React.ReactElement | null;\n  // The derivation overload `PolymorphicComponent` documents.\n  (\n    props: PolymorphicProps<Default, Own, Forwarded> & {\n      ref?: PolymorphicRef<Default>;\n    }\n  ): React.ReactElement | null;\n  displayName?: string;\n}\n"],"names":[],"mappings":";AAEA;;;;;;;;;;AAUG;AACG,SAAU,eAAe,CAAC,EAAW,EAAA;IACzC,OAAO,OAAO,EAAE,KAAK,QAAQ,IAAI,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC;AACnD;;"}

package/dist/esm/helpers/stackLayout.js

@@ -0,0 +1,30 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { usePrefixedClassNames, classNames } from './classNames.js';
+import { useBulmaClasses } from './useBulmaClasses.js';
+
+/**
+ * The `.stack` element behind Stack, Group, Center and Flex.
+ *
+ * With `as="ul"` or `as="ol"` it renders `role="list"`, which Safari needs:
+ * WebKit stops exposing a list as one once its markers are hidden, and
+ * Bulma's reset hides a `<ul>`'s. Menu.List restates it for the same reason.
+ */
+const StackLayout = forwardRef(function StackLayout({ as = 'div', className, textColor, bgColor, 
+// Not accepted, and taken out before the spread below, where a spread's
+// `color: undefined`, or a JavaScript caller's `color`, would replace
+// `textColor`, as `backgroundColor` would `bgColor`.
+color: _color, backgroundColor: _backgroundColor, modifiers, children, ...props }, ref) {
+    // The partial makes the element a flex container, so the container
+    // helpers (alignItems and the rest) apply without a `display` prop.
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ color: textColor, backgroundColor: bgColor, ...props }, { flexContainer: true });
+    const stackClasses = usePrefixedClassNames('stack', modifiers);
+    const Component = as;
+    const isList = as === 'ul' || as === 'ol';
+    return (jsx(Component, { ref: ref, className: classNames(stackClasses, bulmaHelperClasses, className), ...rest, ...(isList ? { role: rest.role || 'list' } : {}), children: children }));
+});
+
+export { StackLayout };
+//# sourceMappingURL=stackLayout.js.map

package/dist/esm/helpers/stackLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stackLayout.js","sources":["../../../src/helpers/stackLayout.tsx"],"sourcesContent":["// INTERNAL: only `LayoutElement` is exported from src/index.ts.\n//\n// The element Stack, Group, Center and Flex share. Each is a `.stack`, which\n// `scss/layout/_stack.scss` makes a flex container, with a modifier class\n// for its own layout, so the helper props reach it as they reach any flex\n// container, with no `display` prop.\n\nimport React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from './classNames';\nimport {\n  useBulmaClasses,\n  type BulmaClassesProps,\n  type validColors,\n  type validFlexDirections,\n} from './useBulmaClasses';\n\n/**\n * The elements Stack, Group, Center and Flex can render as: Container's\n * landmarks and sections, a list, a form or a fieldset.\n */\nexport type LayoutElement =\n  | 'div'\n  | 'main'\n  | 'section'\n  | 'article'\n  | 'aside'\n  | 'header'\n  | 'footer'\n  | 'nav'\n  | 'ul'\n  | 'ol'\n  | 'form'\n  | 'fieldset';\n\n/**\n * What Stack, Group, Center and Flex take in common. The helper props, the\n * other attributes and the `ref` land on the root.\n *\n * @flexContainer The root is a flex container by its own stylesheet, so the\n * flex container helper props apply with no `display` prop. The API docs\n * extractor reads this tag off a component's props type or its bases, and\n * the ESLint plugin's `no-inert-flex-props` takes its flex containers from it.\n */\nexport interface LayoutOwnProps extends Omit<\n  BulmaClassesProps,\n  'color' | 'backgroundColor' | 'flexDirection'\n> {\n  /**\n   * Not accepted. `color` here would be the deprecated presentational HTML\n   * attribute. Use `textColor`.\n   * @internal\n   */\n  color?: never;\n  /**\n   * Not accepted under this name. Use `bgColor`.\n   * @internal\n   */\n  backgroundColor?: never;\n  /** Additional CSS classes. */\n  className?: string;\n  /**\n   * What it lays out. The top and bottom margins Bulma gives them are\n   * zeroed, so `gap` is the only space between them, and a spacing helper\n   * such as `mt=\"2\"` still adds to it. A `Columns` child keeps its own top and side\n   * margins, and takes at the bottom the one Bulma gives the last Columns in\n   * a container, the column gap pulled back in (none when gapless), so its\n   * columns line up. A `Pagination` child keeps its negative margins too,\n   * so its links line up.\n   */\n  children?: React.ReactNode;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n}\n\n/** The props `StackLayout` reads, from whichever of the four renders it. */\nexport interface StackLayoutProps\n  extends LayoutOwnProps, Omit<React.HTMLAttributes<HTMLElement>, 'color'> {\n  /** The element to render. */\n  as?: LayoutElement;\n  /** Flex's direction. The other three pass `undefined`, so they never reorder. */\n  flexDirection?: (typeof validFlexDirections)[number];\n  /** The modifier classes beside `stack`, as `usePrefixedClassNames` takes them. */\n  modifiers?: Record<string, boolean | undefined>;\n}\n\n/**\n * The `.stack` element behind Stack, Group, Center and Flex.\n *\n * With `as=\"ul\"` or `as=\"ol\"` it renders `role=\"list\"`, which Safari needs:\n * WebKit stops exposing a list as one once its markers are hidden, and\n * Bulma's reset hides a `<ul>`'s. Menu.List restates it for the same reason.\n */\nexport const StackLayout = forwardRef<HTMLElement, StackLayoutProps>(\n  function StackLayout(\n    {\n      as = 'div',\n      className,\n      textColor,\n      bgColor,\n      // Not accepted, and taken out before the spread below, where a spread's\n      // `color: undefined`, or a JavaScript caller's `color`, would replace\n      // `textColor`, as `backgroundColor` would `bgColor`.\n      color: _color,\n      backgroundColor: _backgroundColor,\n      modifiers,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    // The partial makes the element a flex container, so the container\n    // helpers (alignItems and the rest) apply without a `display` prop.\n    const { bulmaHelperClasses, rest } = useBulmaClasses(\n      { color: textColor, backgroundColor: bgColor, ...props },\n      { flexContainer: true }\n    );\n    const stackClasses = usePrefixedClassNames('stack', modifiers);\n    const Component = as as React.ElementType;\n    const isList = as === 'ul' || as === 'ol';\n\n    return (\n      <Component\n        ref={ref}\n        className={classNames(stackClasses, bulmaHelperClasses, className)}\n        {...rest}\n        // After the spread, reading through it, so a spread carrying\n        // `role: undefined` can't erase the list's role. A role you pass wins.\n        {...(isList ? { role: rest.role || 'list' } : {})}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["_jsx"],"mappings":";;;;;;;AAuFA;;;;;;AAMG;AACI,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EACE,EAAE,GAAG,KAAK,EACV,SAAS,EACT,SAAS,EACT,OAAO;AACP;AACA;AACA;AACA,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,gBAAgB,EACjC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EAAA;;;IAIH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAClD,EAAE,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EACxD,EAAE,aAAa,EAAE,IAAI,EAAE,CACxB;IACD,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,EAAE,SAAS,CAAC;IAC9D,MAAM,SAAS,GAAG,EAAuB;IACzC,MAAM,MAAM,GAAG,EAAE,KAAK,IAAI,IAAI,EAAE,KAAK,IAAI;IAEzC,QACEA,IAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC,EAAA,GAC9D,IAAI,EAAA,IAGH,MAAM,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,MAAM,EAAE,GAAG,EAAE,CAAC,YAEhD,QAAQ,EAAA,CACC;AAEhB,CAAC;;"}

package/dist/esm/helpers/useBulmaClasses.js

@@ -22,8 +22,14 @@ export { validAlignContents, validAlignItems, validAlignSelfs, validAlignments,
  * `background-color: var(--bulma-scheme-*)` style (`undefined` for all other
  * inputs). Merge it with a user `style` prop via `mergeBulmaStyles`.
  *
+ * The flex container props (`flexDirection`, `flexWrap`, `justifyContent`,
+ * `alignContent`, `alignItems`) emit a class only on a flex container: when a
+ * `display` prop is `flex` or `inline-flex`, or when `options.flexContainer`
+ * says the element's own stylesheet makes it one.
+ *
  * @function useBulmaClasses
  * @param props - Combination of BulmaClassesPropsWithScheme and additional props.
+ * @param options - Passed to `useFlexboxClasses`: whether the element is a flex container without a display prop.
  * @returns An object containing the Bulma helper classes, optional helper
  * styles, and unhandled props.
  * @example
@@ -36,7 +42,7 @@ export { validAlignContents, validAlignItems, validAlignSelfs, validAlignments,
  * // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }
  * // rest: { className: 'custom-class' }
  */
-const useBulmaClasses = (props) => {
+const useBulmaClasses = (props, options) => {
     const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, gap, columnGap, rowGap, gapless, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overflowX, overflowY, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, skeleton, clearfix, pos, relative, fullHeight, aspectRatio, ...rest } = props;
     const colorClasses = useColorClasses({
         color,
@@ -125,7 +131,7 @@ const useBulmaClasses = (props) => {
         displayWidescreen,
         displayWidescreenOnly,
         displayFullhd,
-    });
+    }, options);
     const otherClasses = useOtherClasses({
         float,
         overflow,

package/dist/esm/helpers/useBulmaClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBulmaClasses.js","sources":["../../../src/helpers/useBulmaClasses.tsx"],"sourcesContent":["import { useMemo, type CSSProperties } from 'react';\nimport { classNames } from '../helpers/classNames';\nimport {\n  BulmaDisplayProps,\n  BulmaViewportProps,\n  type BulmaGapStep,\n} from './bulmaClassHelpers';\nimport {\n  useColorClasses,\n  useColorStyles,\n  BulmaColorProps,\n  BulmaColorPropsWithScheme,\n} from './useColorClasses';\nimport { useSpacingClasses, BulmaSpacingProps } from './useSpacingClasses';\nimport {\n  useTypographyClasses,\n  BulmaTypographyProps,\n} from './useTypographyClasses';\nimport {\n  useVisibilityClasses,\n  BulmaVisibilityProps,\n} from './useVisibilityClasses';\nimport { useFlexboxClasses, BulmaFlexboxProps } from './useFlexboxClasses';\nimport { useOtherClasses, BulmaOtherProps } from './useOtherClasses';\n\n/**\n * Props for applying Bulma helper classes to components.\n */\nexport interface BulmaClassesProps\n  extends\n    BulmaColorProps,\n    BulmaSpacingProps,\n    BulmaTypographyProps,\n    BulmaVisibilityProps,\n    BulmaFlexboxProps,\n    BulmaOtherProps {}\n\n/**\n * {@link BulmaClassesProps} with `backgroundColor` widened to also accept the\n * scheme color names from `validSchemeColors` (see\n * {@link BulmaColorPropsWithScheme}). This is the input type of\n * `useBulmaClasses`; scheme values surface as the `bulmaHelperStyles` return\n * member instead of a class.\n */\nexport type BulmaClassesPropsWithScheme = Omit<\n  BulmaClassesProps,\n  keyof BulmaColorProps\n> &\n  BulmaColorPropsWithScheme;\n\n/**\n * A hook that generates Bulma helper classes from props and separates unhandled props.\n *\n * Composed from the per-concern mini hooks (useColorClasses, useSpacingClasses,\n * useTypographyClasses, useVisibilityClasses, useFlexboxClasses, and\n * useOtherClasses), which can also be used individually.\n *\n * Scheme background values (`backgroundColor: 'scheme-main-bis'`, …) emit no\n * class; they are returned as `bulmaHelperStyles` — a dark-mode-safe inline\n * `background-color: var(--bulma-scheme-*)` style (`undefined` for all other\n * inputs). Merge it with a user `style` prop via `mergeBulmaStyles`.\n *\n * @function useBulmaClasses\n * @param props - Combination of BulmaClassesPropsWithScheme and additional props.\n * @returns An object containing the Bulma helper classes, optional helper\n * styles, and unhandled props.\n * @example\n * const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n *   color: 'primary',\n *   backgroundColor: 'scheme-main-bis',\n *   className: 'custom-class'\n * });\n * // bulmaHelperClasses: 'has-text-primary'\n * // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }\n * // rest: { className: 'custom-class' }\n */\nexport const useBulmaClasses = <T extends object>(\n  props: BulmaClassesPropsWithScheme & T\n): {\n  bulmaHelperClasses: string;\n  bulmaHelperStyles?: CSSProperties;\n  rest: Omit<T, keyof BulmaClassesProps>;\n} => {\n  const {\n    color,\n    backgroundColor,\n    colorShade,\n    backgroundColorShade,\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n    mx,\n    my,\n    p,\n    pt,\n    pr,\n    pb,\n    pl,\n    px,\n    py,\n    gap,\n    columnGap,\n    rowGap,\n    gapless,\n    textSize,\n    textAlign,\n    textTransform,\n    textWeight,\n    fontFamily,\n    display,\n    visibility,\n    flexDirection,\n    flexWrap,\n    justifyContent,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexGrow,\n    flexShrink,\n    float,\n    overflow,\n    overflowX,\n    overflowY,\n    overlay,\n    interaction,\n    cursor,\n    radius,\n    shadow,\n    responsive,\n    viewport,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n    textSizeMobile,\n    textSizeTablet,\n    textSizeDesktop,\n    textSizeWidescreen,\n    textSizeFullhd,\n    textAlignMobile,\n    textAlignTablet,\n    textAlignDesktop,\n    textAlignWidescreen,\n    textAlignFullhd,\n    visibilityMobile,\n    visibilityTablet,\n    visibilityTabletOnly,\n    visibilityTouch,\n    visibilityDesktop,\n    visibilityDesktopOnly,\n    visibilityWidescreen,\n    visibilityWidescreenOnly,\n    visibilityFullhd,\n    skeleton,\n    clearfix,\n    pos,\n    relative,\n    fullHeight,\n    aspectRatio,\n    ...rest\n  } = props;\n\n  const colorClasses = useColorClasses({\n    color,\n    colorShade,\n    backgroundColor,\n    backgroundColorShade,\n  });\n\n  const bulmaHelperStyles = useColorStyles({ backgroundColor });\n\n  const spacingClasses = useSpacingClasses({\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n    mx,\n    my,\n    p,\n    pt,\n    pr,\n    pb,\n    pl,\n    px,\n    py,\n    gap,\n    columnGap,\n    rowGap,\n    gapless,\n  });\n\n  const typographyClasses = useTypographyClasses({\n    textSize,\n    textAlign,\n    textTransform,\n    textWeight,\n    fontFamily,\n    viewport,\n    textSizeMobile,\n    textSizeTablet,\n    textSizeDesktop,\n    textSizeWidescreen,\n    textSizeFullhd,\n    textAlignMobile,\n    textAlignTablet,\n    textAlignDesktop,\n    textAlignWidescreen,\n    textAlignFullhd,\n  });\n\n  const visibilityClasses = useVisibilityClasses({\n    visibility,\n    visibilityMobile,\n    visibilityTablet,\n    visibilityTabletOnly,\n    visibilityTouch,\n    visibilityDesktop,\n    visibilityDesktopOnly,\n    visibilityWidescreen,\n    visibilityWidescreenOnly,\n    visibilityFullhd,\n    display,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n    viewport,\n  });\n\n  const flexboxClasses = useFlexboxClasses({\n    flexDirection,\n    flexWrap,\n    justifyContent,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexGrow,\n    flexShrink,\n    display,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n  });\n\n  const otherClasses = useOtherClasses({\n    float,\n    overflow,\n    overflowX,\n    overflowY,\n    overlay,\n    interaction,\n    cursor,\n    radius,\n    shadow,\n    responsive,\n    skeleton,\n    clearfix,\n    pos,\n    relative,\n    fullHeight,\n    aspectRatio,\n  });\n\n  const bulmaHelperClasses = useMemo(\n    () =>\n      classNames(\n        colorClasses,\n        spacingClasses,\n        typographyClasses,\n        visibilityClasses,\n        flexboxClasses,\n        otherClasses\n      ),\n    [\n      colorClasses,\n      spacingClasses,\n      typographyClasses,\n      visibilityClasses,\n      flexboxClasses,\n      otherClasses,\n    ]\n  );\n\n  return { bulmaHelperClasses, bulmaHelperStyles, rest };\n};\n\nexport {\n  validColors,\n  validColorShades,\n  validSchemeColors,\n  validSizes,\n  validGaps,\n  validTextSizes,\n  validAlignments,\n  validTextTransforms,\n  validTextWeights,\n  validFontFamilies,\n  validDisplays,\n  validVisibilities,\n  validFlexDirections,\n  validFlexWraps,\n  validJustifyContents,\n  validAlignContents,\n  validAlignItems,\n  validAlignSelfs,\n  validFlexGrowShrink,\n  validViewports,\n  validFloats,\n  validOverflows,\n  validAxisOverflows,\n  validInteractions,\n  validCursors,\n  validRadii,\n  validShadows,\n  validResponsives,\n  validPositions,\n  validAspectRatios,\n} from './bulmaClassHelpers';\nexport type { BulmaViewportProps, BulmaDisplayProps, BulmaGapStep };\nexport * from './useColorClasses';\nexport * from './useSpacingClasses';\nexport * from './useTypographyClasses';\nexport * from './useVisibilityClasses';\nexport * from './useFlexboxClasses';\nexport * from './useOtherClasses';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useBulmaClasses.js","sources":["../../../src/helpers/useBulmaClasses.tsx"],"sourcesContent":["import { useMemo, type CSSProperties } from 'react';\nimport { classNames } from '../helpers/classNames';\nimport {\n  BulmaDisplayProps,\n  BulmaViewportProps,\n  type BulmaGapStep,\n} from './bulmaClassHelpers';\nimport {\n  useColorClasses,\n  useColorStyles,\n  BulmaColorProps,\n  BulmaColorPropsWithScheme,\n} from './useColorClasses';\nimport { useSpacingClasses, BulmaSpacingProps } from './useSpacingClasses';\nimport {\n  useTypographyClasses,\n  BulmaTypographyProps,\n} from './useTypographyClasses';\nimport {\n  useVisibilityClasses,\n  BulmaVisibilityProps,\n} from './useVisibilityClasses';\nimport {\n  useFlexboxClasses,\n  BulmaFlexboxProps,\n  type UseFlexboxClassesOptions,\n} from './useFlexboxClasses';\nimport { useOtherClasses, BulmaOtherProps } from './useOtherClasses';\n\n/**\n * Props for applying Bulma helper classes to components.\n */\nexport interface BulmaClassesProps\n  extends\n    BulmaColorProps,\n    BulmaSpacingProps,\n    BulmaTypographyProps,\n    BulmaVisibilityProps,\n    BulmaFlexboxProps,\n    BulmaOtherProps {}\n\n/**\n * {@link BulmaClassesProps} with `backgroundColor` widened to also accept the\n * scheme color names from `validSchemeColors` (see\n * {@link BulmaColorPropsWithScheme}). This is the input type of\n * `useBulmaClasses`; scheme values surface as the `bulmaHelperStyles` return\n * member instead of a class.\n */\nexport type BulmaClassesPropsWithScheme = Omit<\n  BulmaClassesProps,\n  keyof BulmaColorProps\n> &\n  BulmaColorPropsWithScheme;\n\n/**\n * A hook that generates Bulma helper classes from props and separates unhandled props.\n *\n * Composed from the per-concern mini hooks (useColorClasses, useSpacingClasses,\n * useTypographyClasses, useVisibilityClasses, useFlexboxClasses, and\n * useOtherClasses), which can also be used individually.\n *\n * Scheme background values (`backgroundColor: 'scheme-main-bis'`, …) emit no\n * class; they are returned as `bulmaHelperStyles` — a dark-mode-safe inline\n * `background-color: var(--bulma-scheme-*)` style (`undefined` for all other\n * inputs). Merge it with a user `style` prop via `mergeBulmaStyles`.\n *\n * The flex container props (`flexDirection`, `flexWrap`, `justifyContent`,\n * `alignContent`, `alignItems`) emit a class only on a flex container: when a\n * `display` prop is `flex` or `inline-flex`, or when `options.flexContainer`\n * says the element's own stylesheet makes it one.\n *\n * @function useBulmaClasses\n * @param props - Combination of BulmaClassesPropsWithScheme and additional props.\n * @param options - Passed to `useFlexboxClasses`: whether the element is a flex container without a display prop.\n * @returns An object containing the Bulma helper classes, optional helper\n * styles, and unhandled props.\n * @example\n * const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n *   color: 'primary',\n *   backgroundColor: 'scheme-main-bis',\n *   className: 'custom-class'\n * });\n * // bulmaHelperClasses: 'has-text-primary'\n * // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }\n * // rest: { className: 'custom-class' }\n */\nexport const useBulmaClasses = <T extends object>(\n  props: BulmaClassesPropsWithScheme & T,\n  options?: UseFlexboxClassesOptions\n): {\n  bulmaHelperClasses: string;\n  bulmaHelperStyles?: CSSProperties;\n  rest: Omit<T, keyof BulmaClassesProps>;\n} => {\n  const {\n    color,\n    backgroundColor,\n    colorShade,\n    backgroundColorShade,\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n    mx,\n    my,\n    p,\n    pt,\n    pr,\n    pb,\n    pl,\n    px,\n    py,\n    gap,\n    columnGap,\n    rowGap,\n    gapless,\n    textSize,\n    textAlign,\n    textTransform,\n    textWeight,\n    fontFamily,\n    display,\n    visibility,\n    flexDirection,\n    flexWrap,\n    justifyContent,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexGrow,\n    flexShrink,\n    float,\n    overflow,\n    overflowX,\n    overflowY,\n    overlay,\n    interaction,\n    cursor,\n    radius,\n    shadow,\n    responsive,\n    viewport,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n    textSizeMobile,\n    textSizeTablet,\n    textSizeDesktop,\n    textSizeWidescreen,\n    textSizeFullhd,\n    textAlignMobile,\n    textAlignTablet,\n    textAlignDesktop,\n    textAlignWidescreen,\n    textAlignFullhd,\n    visibilityMobile,\n    visibilityTablet,\n    visibilityTabletOnly,\n    visibilityTouch,\n    visibilityDesktop,\n    visibilityDesktopOnly,\n    visibilityWidescreen,\n    visibilityWidescreenOnly,\n    visibilityFullhd,\n    skeleton,\n    clearfix,\n    pos,\n    relative,\n    fullHeight,\n    aspectRatio,\n    ...rest\n  } = props;\n\n  const colorClasses = useColorClasses({\n    color,\n    colorShade,\n    backgroundColor,\n    backgroundColorShade,\n  });\n\n  const bulmaHelperStyles = useColorStyles({ backgroundColor });\n\n  const spacingClasses = useSpacingClasses({\n    m,\n    mt,\n    mr,\n    mb,\n    ml,\n    mx,\n    my,\n    p,\n    pt,\n    pr,\n    pb,\n    pl,\n    px,\n    py,\n    gap,\n    columnGap,\n    rowGap,\n    gapless,\n  });\n\n  const typographyClasses = useTypographyClasses({\n    textSize,\n    textAlign,\n    textTransform,\n    textWeight,\n    fontFamily,\n    viewport,\n    textSizeMobile,\n    textSizeTablet,\n    textSizeDesktop,\n    textSizeWidescreen,\n    textSizeFullhd,\n    textAlignMobile,\n    textAlignTablet,\n    textAlignDesktop,\n    textAlignWidescreen,\n    textAlignFullhd,\n  });\n\n  const visibilityClasses = useVisibilityClasses({\n    visibility,\n    visibilityMobile,\n    visibilityTablet,\n    visibilityTabletOnly,\n    visibilityTouch,\n    visibilityDesktop,\n    visibilityDesktopOnly,\n    visibilityWidescreen,\n    visibilityWidescreenOnly,\n    visibilityFullhd,\n    display,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n    viewport,\n  });\n\n  const flexboxClasses = useFlexboxClasses(\n    {\n      flexDirection,\n      flexWrap,\n      justifyContent,\n      alignContent,\n      alignItems,\n      alignSelf,\n      flexGrow,\n      flexShrink,\n      display,\n      displayMobile,\n      displayTablet,\n      displayTabletOnly,\n      displayTouch,\n      displayDesktop,\n      displayDesktopOnly,\n      displayWidescreen,\n      displayWidescreenOnly,\n      displayFullhd,\n    },\n    options\n  );\n\n  const otherClasses = useOtherClasses({\n    float,\n    overflow,\n    overflowX,\n    overflowY,\n    overlay,\n    interaction,\n    cursor,\n    radius,\n    shadow,\n    responsive,\n    skeleton,\n    clearfix,\n    pos,\n    relative,\n    fullHeight,\n    aspectRatio,\n  });\n\n  const bulmaHelperClasses = useMemo(\n    () =>\n      classNames(\n        colorClasses,\n        spacingClasses,\n        typographyClasses,\n        visibilityClasses,\n        flexboxClasses,\n        otherClasses\n      ),\n    [\n      colorClasses,\n      spacingClasses,\n      typographyClasses,\n      visibilityClasses,\n      flexboxClasses,\n      otherClasses,\n    ]\n  );\n\n  return { bulmaHelperClasses, bulmaHelperStyles, rest };\n};\n\nexport {\n  validColors,\n  validColorShades,\n  validSchemeColors,\n  validSizes,\n  validGaps,\n  validTextSizes,\n  validAlignments,\n  validTextTransforms,\n  validTextWeights,\n  validFontFamilies,\n  validDisplays,\n  validVisibilities,\n  validFlexDirections,\n  validFlexWraps,\n  validJustifyContents,\n  validAlignContents,\n  validAlignItems,\n  validAlignSelfs,\n  validFlexGrowShrink,\n  validViewports,\n  validFloats,\n  validOverflows,\n  validAxisOverflows,\n  validInteractions,\n  validCursors,\n  validRadii,\n  validShadows,\n  validResponsives,\n  validPositions,\n  validAspectRatios,\n} from './bulmaClassHelpers';\nexport type { BulmaViewportProps, BulmaDisplayProps, BulmaGapStep };\nexport * from './useColorClasses';\nexport * from './useSpacingClasses';\nexport * from './useTypographyClasses';\nexport * from './useVisibilityClasses';\nexport * from './useFlexboxClasses';\nexport * from './useOtherClasses';\n"],"names":[],"mappings":"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"}

package/dist/esm/helpers/useFlexboxClasses.js

@@ -8,8 +8,9 @@ import { createBulmaClassHelpers, validFlexDirections, validFlexWraps, validJust
 /**
  * A hook that generates Bulma flexbox helper classes. Flex container helpers
  * (direction, wrap, justify/align content, align items) are only emitted when
- * one of the display props indicates a flex display; flex item helpers
- * (align self, grow, shrink) are always emitted.
+ * one of the display props indicates a flex display, or when `options` says
+ * the element is a flex container by its own CSS; flex item helpers (align
+ * self, grow, shrink) are always emitted.
  *
  * Note: this hook reads the display props purely as a gate and never emits
  * display classes — `is-flex` and friends come from useVisibilityClasses (or
@@ -17,6 +18,7 @@ import { createBulmaClassHelpers, validFlexDirections, validFlexWraps, validJust
  *
  * @function useFlexboxClasses
  * @param props - Flexbox-related Bulma helper props.
+ * @param options - Whether the element is a flex container without a display prop.
  * @returns A space-separated string of flexbox helper classes.
  * @example
  * const flexboxClasses = useFlexboxClasses({
@@ -25,14 +27,24 @@ import { createBulmaClassHelpers, validFlexDirections, validFlexWraps, validJust
  * });
  * // flexboxClasses: 'is-justify-content-center'
  * // ('is-flex' itself comes from useVisibilityClasses/useBulmaClasses)
+ *
+ * @example
+ * // An element whose own stylesheet makes it a flex container
+ * const flexboxClasses = useFlexboxClasses(
+ *   { alignItems: 'center' },
+ *   { flexContainer: true }
+ * );
+ * // flexboxClasses: 'is-align-items-center'
  */
-const useFlexboxClasses = (props) => {
+const useFlexboxClasses = (props, options = {}) => {
     const { classPrefix } = useConfig();
+    const { flexContainer = false } = options;
     const { flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, display, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, } = props;
     return useMemo(() => {
         const { classes, addClassNoViewport } = createBulmaClassHelpers(classPrefix);
         // Flexbox
-        const hasFlexDisplay = display === 'flex' ||
+        const hasFlexDisplay = flexContainer ||
+            display === 'flex' ||
             display === 'inline-flex' ||
             displayMobile === 'flex' ||
             displayMobile === 'inline-flex' ||
@@ -68,6 +80,7 @@ const useFlexboxClasses = (props) => {
         return classNames(classes);
     }, [
         classPrefix,
+        flexContainer,
         flexDirection,
         flexWrap,
         justifyContent,

package/dist/esm/helpers/useFlexboxClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFlexboxClasses.js","sources":["../../../src/helpers/useFlexboxClasses.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { classNames } from './classNames';\nimport { useConfig } from './Config';\nimport {\n  createBulmaClassHelpers,\n  validFlexDirections,\n  validFlexWraps,\n  validJustifyContents,\n  validAlignContents,\n  validAlignItems,\n  validAlignSelfs,\n  validFlexGrowShrink,\n  BulmaDisplayProps,\n} from './bulmaClassHelpers';\n\n/**\n * Props for applying Bulma flexbox helper classes. The display props are read\n * only to gate the flex container helpers; this hook never emits display\n * classes itself.\n */\nexport interface BulmaFlexboxProps extends BulmaDisplayProps {\n  /** Flex direction (e.g., 'row', 'column'). */\n  flexDirection?: (typeof validFlexDirections)[number];\n  /** Flex wrap (e.g., 'wrap', 'nowrap'). */\n  flexWrap?: (typeof validFlexWraps)[number];\n  /** Justify content (e.g., 'center', 'space-between'). */\n  justifyContent?: (typeof validJustifyContents)[number];\n  /** Align content (e.g., 'center', 'stretch'). */\n  alignContent?: (typeof validAlignContents)[number];\n  /** Align items (e.g., 'center', 'flex-start'). */\n  alignItems?: (typeof validAlignItems)[number];\n  /** Align self (e.g., 'auto', 'center'). */\n  alignSelf?: (typeof validAlignSelfs)[number];\n  /** Flex grow value (e.g., '0', '1', '2', '3', '4', '5'). */\n  flexGrow?: (typeof validFlexGrowShrink)[number];\n  /** Flex shrink value (e.g., '0', '1', '2', '3', '4', '5'). */\n  flexShrink?: (typeof validFlexGrowShrink)[number];\n}\n\n/**\n * A hook that generates Bulma flexbox helper classes. Flex container helpers\n * (direction, wrap, justify/align content, align items) are only emitted when\n * one of the display props indicates a flex display; flex item helpers\n * (align self, grow, shrink) are always emitted.\n *\n * Note: this hook reads the display props purely as a gate and never emits\n * display classes — `is-flex` and friends come from useVisibilityClasses (or\n * the useBulmaClasses aggregate).\n *\n * @function useFlexboxClasses\n * @param props - Flexbox-related Bulma helper props.\n * @returns A space-separated string of flexbox helper classes.\n * @example\n * const flexboxClasses = useFlexboxClasses({\n *   display: 'flex', // gates the container helpers, but emits no 'is-flex'\n *   justifyContent: 'center',\n * });\n * // flexboxClasses: 'is-justify-content-center'\n * // ('is-flex' itself comes from useVisibilityClasses/useBulmaClasses)\n */\nexport const useFlexboxClasses = (props: BulmaFlexboxProps): string => {\n  const { classPrefix } = useConfig();\n\n  const {\n    flexDirection,\n    flexWrap,\n    justifyContent,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexGrow,\n    flexShrink,\n    display,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n  } = props;\n\n  return useMemo(() => {\n    const { classes, addClassNoViewport } =\n      createBulmaClassHelpers(classPrefix);\n\n    // Flexbox\n    const hasFlexDisplay =\n      display === 'flex' ||\n      display === 'inline-flex' ||\n      displayMobile === 'flex' ||\n      displayMobile === 'inline-flex' ||\n      displayTablet === 'flex' ||\n      displayTablet === 'inline-flex' ||\n      displayTabletOnly === 'flex' ||\n      displayTabletOnly === 'inline-flex' ||\n      displayTouch === 'flex' ||\n      displayTouch === 'inline-flex' ||\n      displayDesktop === 'flex' ||\n      displayDesktop === 'inline-flex' ||\n      displayDesktopOnly === 'flex' ||\n      displayDesktopOnly === 'inline-flex' ||\n      displayWidescreen === 'flex' ||\n      displayWidescreen === 'inline-flex' ||\n      displayWidescreenOnly === 'flex' ||\n      displayWidescreenOnly === 'inline-flex' ||\n      displayFullhd === 'flex' ||\n      displayFullhd === 'inline-flex';\n\n    if (hasFlexDisplay) {\n      // Flexbox container properties do not support viewport modifiers in Bulma\n      addClassNoViewport(\n        'is-flex-direction',\n        flexDirection,\n        validFlexDirections\n      );\n      addClassNoViewport('is-flex-wrap', flexWrap, validFlexWraps);\n      addClassNoViewport(\n        'is-justify-content',\n        justifyContent,\n        validJustifyContents\n      );\n      addClassNoViewport('is-align-content', alignContent, validAlignContents);\n      addClassNoViewport('is-align-items', alignItems, validAlignItems);\n    }\n\n    // Flex item properties (can be applied to any element that is a flex item)\n    // These don't require the element itself to have display: flex\n    addClassNoViewport('is-align-self', alignSelf, validAlignSelfs);\n    addClassNoViewport('is-flex-grow', flexGrow, validFlexGrowShrink);\n    addClassNoViewport('is-flex-shrink', flexShrink, validFlexGrowShrink);\n\n    return classNames(classes);\n  }, [\n    classPrefix,\n    flexDirection,\n    flexWrap,\n    justifyContent,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexGrow,\n    flexShrink,\n    display,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n  ]);\n};\n"],"names":[],"mappings":";;;;;;;AAuCA;;;;;;;;;;;;;;;;;;;;AAoBG;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAwB,KAAY;AACpE,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AAEnC,IAAA,MAAM,EACJ,aAAa,EACb,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,UAAU,EACV,SAAS,EACT,QAAQ,EACR,UAAU,EACV,OAAO,EACP,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,aAAa,GACd,GAAG,KAAK;IAET,OAAO,OAAO,CAAC,MAAK;QAClB,MAAM,EAAE,OAAO,EAAE,kBAAkB,EAAE,GACnC,uBAAuB,CAAC,WAAW,CAAC;;AAGtC,QAAA,MAAM,cAAc,GAClB,OAAO,KAAK,MAAM;AAClB,YAAA,OAAO,KAAK,aAAa;AACzB,YAAA,aAAa,KAAK,MAAM;AACxB,YAAA,aAAa,KAAK,aAAa;AAC/B,YAAA,aAAa,KAAK,MAAM;AACxB,YAAA,aAAa,KAAK,aAAa;AAC/B,YAAA,iBAAiB,KAAK,MAAM;AAC5B,YAAA,iBAAiB,KAAK,aAAa;AACnC,YAAA,YAAY,KAAK,MAAM;AACvB,YAAA,YAAY,KAAK,aAAa;AAC9B,YAAA,cAAc,KAAK,MAAM;AACzB,YAAA,cAAc,KAAK,aAAa;AAChC,YAAA,kBAAkB,KAAK,MAAM;AAC7B,YAAA,kBAAkB,KAAK,aAAa;AACpC,YAAA,iBAAiB,KAAK,MAAM;AAC5B,YAAA,iBAAiB,KAAK,aAAa;AACnC,YAAA,qBAAqB,KAAK,MAAM;AAChC,YAAA,qBAAqB,KAAK,aAAa;AACvC,YAAA,aAAa,KAAK,MAAM;YACxB,aAAa,KAAK,aAAa;QAEjC,IAAI,cAAc,EAAE;;AAElB,YAAA,kBAAkB,CAChB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,CACpB;AACD,YAAA,kBAAkB,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC;AAC5D,YAAA,kBAAkB,CAChB,oBAAoB,EACpB,cAAc,EACd,oBAAoB,CACrB;AACD,YAAA,kBAAkB,CAAC,kBAAkB,EAAE,YAAY,EAAE,kBAAkB,CAAC;AACxE,YAAA,kBAAkB,CAAC,gBAAgB,EAAE,UAAU,EAAE,eAAe,CAAC;QACnE;;;AAIA,QAAA,kBAAkB,CAAC,eAAe,EAAE,SAAS,EAAE,eAAe,CAAC;AAC/D,QAAA,kBAAkB,CAAC,cAAc,EAAE,QAAQ,EAAE,mBAAmB,CAAC;AACjE,QAAA,kBAAkB,CAAC,gBAAgB,EAAE,UAAU,EAAE,mBAAmB,CAAC;AAErE,QAAA,OAAO,UAAU,CAAC,OAAO,CAAC;AAC5B,IAAA,CAAC,EAAE;QACD,WAAW;QACX,aAAa;QACb,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,UAAU;QACV,SAAS;QACT,QAAQ;QACR,UAAU;QACV,OAAO;QACP,aAAa;QACb,aAAa;QACb,iBAAiB;QACjB,YAAY;QACZ,cAAc;QACd,kBAAkB;QAClB,iBAAiB;QACjB,qBAAqB;QACrB,aAAa;AACd,KAAA,CAAC;AACJ;;"}
+{"version":3,"file":"useFlexboxClasses.js","sources":["../../../src/helpers/useFlexboxClasses.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { classNames } from './classNames';\nimport { useConfig } from './Config';\nimport {\n  createBulmaClassHelpers,\n  validFlexDirections,\n  validFlexWraps,\n  validJustifyContents,\n  validAlignContents,\n  validAlignItems,\n  validAlignSelfs,\n  validFlexGrowShrink,\n  BulmaDisplayProps,\n} from './bulmaClassHelpers';\n\n/**\n * Props for applying Bulma flexbox helper classes. The display props are read\n * only to gate the flex container helpers; this hook never emits display\n * classes itself.\n */\nexport interface BulmaFlexboxProps extends BulmaDisplayProps {\n  /** Flex direction (e.g., 'row', 'column'). */\n  flexDirection?: (typeof validFlexDirections)[number];\n  /** Flex wrap (e.g., 'wrap', 'nowrap'). */\n  flexWrap?: (typeof validFlexWraps)[number];\n  /** Justify content (e.g., 'center', 'space-between'). */\n  justifyContent?: (typeof validJustifyContents)[number];\n  /** Align content (e.g., 'center', 'stretch'). */\n  alignContent?: (typeof validAlignContents)[number];\n  /** Align items (e.g., 'center', 'flex-start'). */\n  alignItems?: (typeof validAlignItems)[number];\n  /** Align self (e.g., 'auto', 'center'). */\n  alignSelf?: (typeof validAlignSelfs)[number];\n  /** Flex grow value (e.g., '0', '1', '2', '3', '4', '5'). */\n  flexGrow?: (typeof validFlexGrowShrink)[number];\n  /** Flex shrink value (e.g., '0', '1', '2', '3', '4', '5'). */\n  flexShrink?: (typeof validFlexGrowShrink)[number];\n}\n\n/**\n * Options for `useFlexboxClasses`, which `useBulmaClasses` passes through.\n */\nexport interface UseFlexboxClassesOptions {\n  /**\n   * Whether the element is a flex container by its own CSS, as `Stack` and\n   * `Group` are, so the container helpers apply with no `display` prop. It\n   * adds no display class: the element's own stylesheet has to make it a flex\n   * container.\n   * @defaultValue false\n   */\n  flexContainer?: boolean;\n}\n\n/**\n * A hook that generates Bulma flexbox helper classes. Flex container helpers\n * (direction, wrap, justify/align content, align items) are only emitted when\n * one of the display props indicates a flex display, or when `options` says\n * the element is a flex container by its own CSS; flex item helpers (align\n * self, grow, shrink) are always emitted.\n *\n * Note: this hook reads the display props purely as a gate and never emits\n * display classes — `is-flex` and friends come from useVisibilityClasses (or\n * the useBulmaClasses aggregate).\n *\n * @function useFlexboxClasses\n * @param props - Flexbox-related Bulma helper props.\n * @param options - Whether the element is a flex container without a display prop.\n * @returns A space-separated string of flexbox helper classes.\n * @example\n * const flexboxClasses = useFlexboxClasses({\n *   display: 'flex', // gates the container helpers, but emits no 'is-flex'\n *   justifyContent: 'center',\n * });\n * // flexboxClasses: 'is-justify-content-center'\n * // ('is-flex' itself comes from useVisibilityClasses/useBulmaClasses)\n *\n * @example\n * // An element whose own stylesheet makes it a flex container\n * const flexboxClasses = useFlexboxClasses(\n *   { alignItems: 'center' },\n *   { flexContainer: true }\n * );\n * // flexboxClasses: 'is-align-items-center'\n */\nexport const useFlexboxClasses = (\n  props: BulmaFlexboxProps,\n  options: UseFlexboxClassesOptions = {}\n): string => {\n  const { classPrefix } = useConfig();\n  const { flexContainer = false } = options;\n\n  const {\n    flexDirection,\n    flexWrap,\n    justifyContent,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexGrow,\n    flexShrink,\n    display,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n  } = props;\n\n  return useMemo(() => {\n    const { classes, addClassNoViewport } =\n      createBulmaClassHelpers(classPrefix);\n\n    // Flexbox\n    const hasFlexDisplay =\n      flexContainer ||\n      display === 'flex' ||\n      display === 'inline-flex' ||\n      displayMobile === 'flex' ||\n      displayMobile === 'inline-flex' ||\n      displayTablet === 'flex' ||\n      displayTablet === 'inline-flex' ||\n      displayTabletOnly === 'flex' ||\n      displayTabletOnly === 'inline-flex' ||\n      displayTouch === 'flex' ||\n      displayTouch === 'inline-flex' ||\n      displayDesktop === 'flex' ||\n      displayDesktop === 'inline-flex' ||\n      displayDesktopOnly === 'flex' ||\n      displayDesktopOnly === 'inline-flex' ||\n      displayWidescreen === 'flex' ||\n      displayWidescreen === 'inline-flex' ||\n      displayWidescreenOnly === 'flex' ||\n      displayWidescreenOnly === 'inline-flex' ||\n      displayFullhd === 'flex' ||\n      displayFullhd === 'inline-flex';\n\n    if (hasFlexDisplay) {\n      // Flexbox container properties do not support viewport modifiers in Bulma\n      addClassNoViewport(\n        'is-flex-direction',\n        flexDirection,\n        validFlexDirections\n      );\n      addClassNoViewport('is-flex-wrap', flexWrap, validFlexWraps);\n      addClassNoViewport(\n        'is-justify-content',\n        justifyContent,\n        validJustifyContents\n      );\n      addClassNoViewport('is-align-content', alignContent, validAlignContents);\n      addClassNoViewport('is-align-items', alignItems, validAlignItems);\n    }\n\n    // Flex item properties (can be applied to any element that is a flex item)\n    // These don't require the element itself to have display: flex\n    addClassNoViewport('is-align-self', alignSelf, validAlignSelfs);\n    addClassNoViewport('is-flex-grow', flexGrow, validFlexGrowShrink);\n    addClassNoViewport('is-flex-shrink', flexShrink, validFlexGrowShrink);\n\n    return classNames(classes);\n  }, [\n    classPrefix,\n    flexContainer,\n    flexDirection,\n    flexWrap,\n    justifyContent,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexGrow,\n    flexShrink,\n    display,\n    displayMobile,\n    displayTablet,\n    displayTabletOnly,\n    displayTouch,\n    displayDesktop,\n    displayDesktopOnly,\n    displayWidescreen,\n    displayWidescreenOnly,\n    displayFullhd,\n  ]);\n};\n"],"names":[],"mappings":";;;;;;;AAqDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AACI,MAAM,iBAAiB,GAAG,CAC/B,KAAwB,EACxB,OAAA,GAAoC,EAAE,KAC5B;AACV,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AACnC,IAAA,MAAM,EAAE,aAAa,GAAG,KAAK,EAAE,GAAG,OAAO;AAEzC,IAAA,MAAM,EACJ,aAAa,EACb,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,UAAU,EACV,SAAS,EACT,QAAQ,EACR,UAAU,EACV,OAAO,EACP,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,aAAa,GACd,GAAG,KAAK;IAET,OAAO,OAAO,CAAC,MAAK;QAClB,MAAM,EAAE,OAAO,EAAE,kBAAkB,EAAE,GACnC,uBAAuB,CAAC,WAAW,CAAC;;QAGtC,MAAM,cAAc,GAClB,aAAa;AACb,YAAA,OAAO,KAAK,MAAM;AAClB,YAAA,OAAO,KAAK,aAAa;AACzB,YAAA,aAAa,KAAK,MAAM;AACxB,YAAA,aAAa,KAAK,aAAa;AAC/B,YAAA,aAAa,KAAK,MAAM;AACxB,YAAA,aAAa,KAAK,aAAa;AAC/B,YAAA,iBAAiB,KAAK,MAAM;AAC5B,YAAA,iBAAiB,KAAK,aAAa;AACnC,YAAA,YAAY,KAAK,MAAM;AACvB,YAAA,YAAY,KAAK,aAAa;AAC9B,YAAA,cAAc,KAAK,MAAM;AACzB,YAAA,cAAc,KAAK,aAAa;AAChC,YAAA,kBAAkB,KAAK,MAAM;AAC7B,YAAA,kBAAkB,KAAK,aAAa;AACpC,YAAA,iBAAiB,KAAK,MAAM;AAC5B,YAAA,iBAAiB,KAAK,aAAa;AACnC,YAAA,qBAAqB,KAAK,MAAM;AAChC,YAAA,qBAAqB,KAAK,aAAa;AACvC,YAAA,aAAa,KAAK,MAAM;YACxB,aAAa,KAAK,aAAa;QAEjC,IAAI,cAAc,EAAE;;AAElB,YAAA,kBAAkB,CAChB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,CACpB;AACD,YAAA,kBAAkB,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC;AAC5D,YAAA,kBAAkB,CAChB,oBAAoB,EACpB,cAAc,EACd,oBAAoB,CACrB;AACD,YAAA,kBAAkB,CAAC,kBAAkB,EAAE,YAAY,EAAE,kBAAkB,CAAC;AACxE,YAAA,kBAAkB,CAAC,gBAAgB,EAAE,UAAU,EAAE,eAAe,CAAC;QACnE;;;AAIA,QAAA,kBAAkB,CAAC,eAAe,EAAE,SAAS,EAAE,eAAe,CAAC;AAC/D,QAAA,kBAAkB,CAAC,cAAc,EAAE,QAAQ,EAAE,mBAAmB,CAAC;AACjE,QAAA,kBAAkB,CAAC,gBAAgB,EAAE,UAAU,EAAE,mBAAmB,CAAC;AAErE,QAAA,OAAO,UAAU,CAAC,OAAO,CAAC;AAC5B,IAAA,CAAC,EAAE;QACD,WAAW;QACX,aAAa;QACb,aAAa;QACb,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,UAAU;QACV,SAAS;QACT,QAAQ;QACR,UAAU;QACV,OAAO;QACP,aAAa;QACb,aAAa;QACb,iBAAiB;QACjB,YAAY;QACZ,cAAc;QACd,kBAAkB;QAClB,iBAAiB;QACjB,qBAAqB;QACrB,aAAa;AACd,KAAA,CAAC;AACJ;;"}

package/dist/esm/layout/Center.js

@@ -0,0 +1,33 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { StackLayout } from '../helpers/stackLayout.js';
+
+/**
+ * The `Center` component centers its content on both axes.
+ *
+ * Use it for a loader, an icon or an empty state in the middle of a box, a
+ * card or a section. Give it a height, or put it in something that has one,
+ * to center down the middle as well as across. Several children sit side by
+ * side in the middle, with no gap unless you set one.
+ *
+ * @function
+ * @param {CenterProps} props - Props for the Center component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered center.
+ *
+ * @example
+ * <Center p="6">
+ *   <Loader />
+ * </Center>
+ */
+const Center = forwardRef(function Center(props, ref) {
+    return (jsx(StackLayout, { ref: ref, ...props, 
+        // Centered both ways, in the children's own order.
+        flexDirection: undefined, modifiers: { 'is-centered': true } }));
+});
+Center.displayName = 'Center';
+
+export { Center };
+//# sourceMappingURL=Center.js.map

package/dist/esm/layout/Center.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Center.js","sources":["../../../src/layout/Center.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { ConstrainedPolymorphicComponent } from '../helpers/polymorphic';\nimport {\n  StackLayout,\n  type LayoutElement,\n  type LayoutOwnProps,\n  type StackLayoutProps,\n} from '../helpers/stackLayout';\nimport type { BulmaGapStep, validDisplays } from '../helpers/useBulmaClasses';\n\n/**\n * The Center component's own props, beside the attributes of the element\n * `as` renders.\n */\nexport interface CenterOwnProps extends LayoutOwnProps {\n  /**\n   * Space between children, when there are several. None by default. Needs\n   * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.\n   */\n  gap?: BulmaGapStep;\n  /**\n   * `'inline-flex'` sizes it to its content, to center something inside a line\n   * of text. Needs Bulma's helper classes: under `bestax-no-helpers.css` the\n   * default stays.\n   */\n  display?: (typeof validDisplays)[number] | 'none';\n}\n\n/**\n * Props for the Center component. The attributes and the `ref` follow `as`.\n *\n * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.\n */\nexport type CenterProps<T extends LayoutElement = LayoutElement> =\n  CenterOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof CenterOwnProps | 'as'> & {\n      /**\n       * The element to render. With `ul` or `ol`, give it `li` children: it\n       * restates `role=\"list\"`, which Bulma's list reset takes away in Safari.\n       * @defaultValue 'div'\n       */\n      as?: T;\n    };\n\n/**\n * The `Center` component centers its content on both axes.\n *\n * Use it for a loader, an icon or an empty state in the middle of a box, a\n * card or a section. Give it a height, or put it in something that has one,\n * to center down the middle as well as across. Several children sit side by\n * side in the middle, with no gap unless you set one.\n *\n * @function\n * @param {CenterProps} props - Props for the Center component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered center.\n *\n * @example\n * <Center p=\"6\">\n *   <Loader />\n * </Center>\n */\nexport const Center = forwardRef(function Center(\n  props: CenterProps,\n  ref: React.Ref<HTMLElement>\n) {\n  return (\n    <StackLayout\n      ref={ref}\n      {...(props as StackLayoutProps)}\n      // Centered both ways, in the children's own order.\n      flexDirection={undefined}\n      modifiers={{ 'is-centered': true }}\n    />\n  );\n}) as ConstrainedPolymorphicComponent<CenterOwnProps, LayoutElement, 'div'>;\n\nCenter.displayName = 'Center';\n\nexport default Center;\n"],"names":["_jsx"],"mappings":";;;;;;AA4CA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,MAAM,GAAG,UAAU,CAAC,SAAS,MAAM,CAC9C,KAAkB,EAClB,GAA2B,EAAA;IAE3B,QACEA,IAAC,WAAW,EAAA,EACV,GAAG,EAAE,GAAG,KACH,KAA0B;;AAE/B,QAAA,aAAa,EAAE,SAAS,EACxB,SAAS,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,EAAA,CAClC;AAEN,CAAC;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ;;"}

package/dist/esm/layout/Container.js

@@ -4,6 +4,7 @@ import { jsx } from 'react/jsx-runtime';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
 import { mergeBulmaStyles } from '../helpers/mergeBulmaStyles.js';
+import { CONTAINER_BREAKPOINTS } from '../helpers/containerBreakpoints.js';
 
 /**
  * The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.
@@ -20,14 +21,9 @@ const Container = ({ as: Tag = 'div', className, textColor, color, bgColor, flui
         ...props,
     });
     // Only allow isMax for supported breakpoints
-    const validMaxBreakpoints = [
-        'tablet',
-        'desktop',
-        'widescreen',
-    ];
     let breakpointClass;
     if (breakpoint) {
-        if (isMax && validMaxBreakpoints.includes(breakpoint)) {
+        if (isMax && CONTAINER_BREAKPOINTS.includes(breakpoint)) {
             breakpointClass = `is-max-${breakpoint}`;
         }
         else if (!isMax) {

package/dist/esm/layout/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../src/layout/Container.tsx"],"sourcesContent":["import React from 'react';\nimport classNames, { usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n  validSchemeColors,\n} from '../helpers/useBulmaClasses';\nimport { mergeBulmaStyles } from '../helpers/mergeBulmaStyles';\n\n/**\n * Bulma container breakpoints.\n */\nexport type ContainerBreakpoint = 'tablet' | 'desktop' | 'widescreen';\n\n/**\n * Props for the Container component.\n */\nexport interface ContainerProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * HTML element to render (default: `div`). Bulma pages often put the\n   * container on a landmark, such as `<main class=\"container\">` or\n   * `<footer class=\"container\">`. A page has only one visible `main`, and a\n   * `section` is a `region` landmark only once it has an accessible name\n   * (`aria-label`, or `aria-labelledby` pointing at its heading).\n   */\n  as?:\n    | 'div'\n    | 'main'\n    | 'section'\n    | 'article'\n    | 'aside'\n    | 'header'\n    | 'footer'\n    | 'nav';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Text color helper. */\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 `.container.is-<color>` CSS exists). Prefer\n   * `textColor`, which takes precedence when both are set; use `bgColor` for\n   * a colored surface.\n   */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /**\n   * Background color helper. `scheme-*` values render as a dark-mode-safe\n   * inline `background-color: var(--bulma-scheme-*)` instead of a class. The\n   * `scheme-invert*` values do not change text color — pair them with a\n   * contrasting foreground.\n   */\n  bgColor?:\n    | (typeof validColors)[number]\n    | (typeof validSchemeColors)[number]\n    | 'inherit'\n    | 'current';\n  /** Makes the container full-width with a 32px gap on each side. */\n  fluid?: boolean;\n  /** Makes the container full-width until the `widescreen` breakpoint. */\n  widescreen?: boolean;\n  /** Makes the container full-width until the `fullhd` breakpoint. */\n  fullhd?: boolean;\n  /** Responsive breakpoint for container (`is-tablet`, `is-desktop`, `is-widescreen`). */\n  breakpoint?: ContainerBreakpoint;\n  /** Uses Bulma's `is-max-*` class for the specified breakpoint, limiting max width. */\n  isMax?: boolean;\n  /** Content inside the container. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.\n *\n * @function\n * @param {ContainerProps} props - Props for the Container component.\n * @returns {JSX.Element} The rendered container.\n * @see {@link https://bulma.io/documentation/layout/container/ | Bulma Container documentation}\n */\nexport const Container: React.FC<ContainerProps> = ({\n  as: Tag = 'div',\n  className,\n  textColor,\n  color,\n  bgColor,\n  fluid,\n  widescreen,\n  fullhd,\n  breakpoint,\n  isMax,\n  children,\n  style,\n  ...props\n}) => {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Only allow isMax for supported breakpoints\n  const validMaxBreakpoints: ContainerBreakpoint[] = [\n    'tablet',\n    'desktop',\n    'widescreen',\n  ];\n  let breakpointClass: string | undefined;\n  if (breakpoint) {\n    if (isMax && validMaxBreakpoints.includes(breakpoint)) {\n      breakpointClass = `is-max-${breakpoint}`;\n    } else if (!isMax) {\n      breakpointClass = `is-${breakpoint}`;\n    }\n  }\n\n  const mainClass = usePrefixedClassNames('container');\n  const containerModifiers = usePrefixedClassNames('', {\n    'is-fluid': fluid,\n    'is-widescreen': widescreen,\n    'is-fullhd': fullhd,\n  });\n  const prefixedBreakpointClass = usePrefixedClassNames(breakpointClass || '');\n\n  const containerClasses = classNames(\n    mainClass,\n    containerModifiers,\n    prefixedBreakpointClass,\n    className,\n    bulmaHelperClasses\n  );\n\n  return (\n    <Tag\n      className={containerClasses}\n      style={mergeBulmaStyles(bulmaHelperStyles, style)}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nexport default Container;\n"],"names":["_jsx"],"mappings":";;;;;;;AA0EA;;;;;;;AAOG;AACI,MAAM,SAAS,GAA6B,CAAC,EAClD,EAAE,EAAE,GAAG,GAAG,KAAK,EACf,SAAS,EACT,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACtE,KAAK,EAAE,SAAS,IAAI,KAAK;AACzB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;AAGF,IAAA,MAAM,mBAAmB,GAA0B;QACjD,QAAQ;QACR,SAAS;QACT,YAAY;KACb;AACD,IAAA,IAAI,eAAmC;IACvC,IAAI,UAAU,EAAE;QACd,IAAI,KAAK,IAAI,mBAAmB,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;AACrD,YAAA,eAAe,GAAG,CAAA,OAAA,EAAU,UAAU,CAAA,CAAE;QAC1C;aAAO,IAAI,CAAC,KAAK,EAAE;AACjB,YAAA,eAAe,GAAG,CAAA,GAAA,EAAM,UAAU,CAAA,CAAE;QACtC;IACF;AAEA,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,WAAW,CAAC;AACpD,IAAA,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,EAAE,EAAE;AACnD,QAAA,UAAU,EAAE,KAAK;AACjB,QAAA,eAAe,EAAE,UAAU;AAC3B,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA,CAAC;IACF,MAAM,uBAAuB,GAAG,qBAAqB,CAAC,eAAe,IAAI,EAAE,CAAC;AAE5E,IAAA,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,EACT,kBAAkB,EAClB,uBAAuB,EACvB,SAAS,EACT,kBAAkB,CACnB;IAED,QACEA,IAAC,GAAG,EAAA,EACF,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,gBAAgB,CAAC,iBAAiB,EAAE,KAAK,CAAC,EAAA,GAC7C,IAAI,EAAA,QAAA,EAEP,QAAQ,EAAA,CACL;AAEV;;"}
+{"version":3,"file":"Container.js","sources":["../../../src/layout/Container.tsx"],"sourcesContent":["import React from 'react';\nimport classNames, { usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n  validSchemeColors,\n} from '../helpers/useBulmaClasses';\nimport { mergeBulmaStyles } from '../helpers/mergeBulmaStyles';\nimport { CONTAINER_BREAKPOINTS } from '../helpers/containerBreakpoints';\n\n/**\n * Bulma container breakpoints.\n */\nexport type ContainerBreakpoint = 'tablet' | 'desktop' | 'widescreen';\n\n/**\n * Props for the Container component.\n */\nexport interface ContainerProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * HTML element to render (default: `div`). Bulma pages often put the\n   * container on a landmark, such as `<main class=\"container\">` or\n   * `<footer class=\"container\">`. A page has only one visible `main`, and a\n   * `section` is a `region` landmark only once it has an accessible name\n   * (`aria-label`, or `aria-labelledby` pointing at its heading).\n   */\n  as?:\n    | 'div'\n    | 'main'\n    | 'section'\n    | 'article'\n    | 'aside'\n    | 'header'\n    | 'footer'\n    | 'nav';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Text color helper. */\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 `.container.is-<color>` CSS exists). Prefer\n   * `textColor`, which takes precedence when both are set; use `bgColor` for\n   * a colored surface.\n   */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /**\n   * Background color helper. `scheme-*` values render as a dark-mode-safe\n   * inline `background-color: var(--bulma-scheme-*)` instead of a class. The\n   * `scheme-invert*` values do not change text color — pair them with a\n   * contrasting foreground.\n   */\n  bgColor?:\n    | (typeof validColors)[number]\n    | (typeof validSchemeColors)[number]\n    | 'inherit'\n    | 'current';\n  /** Makes the container full-width with a 32px gap on each side. */\n  fluid?: boolean;\n  /** Makes the container full-width until the `widescreen` breakpoint. */\n  widescreen?: boolean;\n  /** Makes the container full-width until the `fullhd` breakpoint. */\n  fullhd?: boolean;\n  /** Responsive breakpoint for container (`is-tablet`, `is-desktop`, `is-widescreen`). */\n  breakpoint?: ContainerBreakpoint;\n  /** Uses Bulma's `is-max-*` class for the specified breakpoint, limiting max width. */\n  isMax?: boolean;\n  /** Content inside the container. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.\n *\n * @function\n * @param {ContainerProps} props - Props for the Container component.\n * @returns {JSX.Element} The rendered container.\n * @see {@link https://bulma.io/documentation/layout/container/ | Bulma Container documentation}\n */\nexport const Container: React.FC<ContainerProps> = ({\n  as: Tag = 'div',\n  className,\n  textColor,\n  color,\n  bgColor,\n  fluid,\n  widescreen,\n  fullhd,\n  breakpoint,\n  isMax,\n  children,\n  style,\n  ...props\n}) => {\n  const { bulmaHelperClasses, bulmaHelperStyles, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Only allow isMax for supported breakpoints\n  let breakpointClass: string | undefined;\n  if (breakpoint) {\n    if (isMax && CONTAINER_BREAKPOINTS.includes(breakpoint)) {\n      breakpointClass = `is-max-${breakpoint}`;\n    } else if (!isMax) {\n      breakpointClass = `is-${breakpoint}`;\n    }\n  }\n\n  const mainClass = usePrefixedClassNames('container');\n  const containerModifiers = usePrefixedClassNames('', {\n    'is-fluid': fluid,\n    'is-widescreen': widescreen,\n    'is-fullhd': fullhd,\n  });\n  const prefixedBreakpointClass = usePrefixedClassNames(breakpointClass || '');\n\n  const containerClasses = classNames(\n    mainClass,\n    containerModifiers,\n    prefixedBreakpointClass,\n    className,\n    bulmaHelperClasses\n  );\n\n  return (\n    <Tag\n      className={containerClasses}\n      style={mergeBulmaStyles(bulmaHelperStyles, style)}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nexport default Container;\n"],"names":["_jsx"],"mappings":";;;;;;;;AA2EA;;;;;;;AAOG;AACI,MAAM,SAAS,GAA6B,CAAC,EAClD,EAAE,EAAE,GAAG,GAAG,KAAK,EACf,SAAS,EACT,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACtE,KAAK,EAAE,SAAS,IAAI,KAAK;AACzB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;AAGF,IAAA,IAAI,eAAmC;IACvC,IAAI,UAAU,EAAE;QACd,IAAI,KAAK,IAAI,qBAAqB,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;AACvD,YAAA,eAAe,GAAG,CAAA,OAAA,EAAU,UAAU,CAAA,CAAE;QAC1C;aAAO,IAAI,CAAC,KAAK,EAAE;AACjB,YAAA,eAAe,GAAG,CAAA,GAAA,EAAM,UAAU,CAAA,CAAE;QACtC;IACF;AAEA,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,WAAW,CAAC;AACpD,IAAA,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,EAAE,EAAE;AACnD,QAAA,UAAU,EAAE,KAAK;AACjB,QAAA,eAAe,EAAE,UAAU;AAC3B,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA,CAAC;IACF,MAAM,uBAAuB,GAAG,qBAAqB,CAAC,eAAe,IAAI,EAAE,CAAC;AAE5E,IAAA,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,EACT,kBAAkB,EAClB,uBAAuB,EACvB,SAAS,EACT,kBAAkB,CACnB;IAED,QACEA,IAAC,GAAG,EAAA,EACF,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,gBAAgB,CAAC,iBAAiB,EAAE,KAAK,CAAC,EAAA,GAC7C,IAAI,EAAA,QAAA,EAEP,QAAQ,EAAA,CACL;AAEV;;"}