@allxsmith/bestax-bulma 5.58.0 → 5.60.0

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/portal.js

@@ -48,6 +48,33 @@ function usePortalContainer() {
     const { portalContainer } = useConfig();
     return container => resolvePortalContainer(container || portalContainer);
 }
+/**
+ * Reads Modal's `portal` prop (`boolean | string | HTMLElement`) for a
+ * component that takes it: whether the content is in its portal yet, and
+ * where it goes.
+ *
+ * A portal has no server-rendered counterpart, so such a component renders in
+ * place on the server and while hydrating, and moves into its portal once the
+ * client takes over. Render the content in `Portal` with
+ * `disabled={!isPortaled}` and this `container`. Moving remounts the content,
+ * so an effect that holds one of its nodes depends on `isPortaled`, `portal`
+ * and `defaultTarget`.
+ *
+ * @function usePortalProp
+ * @param portal - The component's `portal` prop.
+ * @returns Whether it's portaled now, its `container`, and the provider's
+ * target while that places it.
+ */
+function usePortalProp(portal) {
+    const hydrated = useIsHydrated();
+    const { portalContainer } = useConfig();
+    const isPortaled = Boolean(portal) && hydrated;
+    return {
+        isPortaled,
+        container: typeof portal === 'boolean' ? undefined : portal,
+        defaultTarget: isPortaled && portal === true ? portalContainer : undefined,
+    };
+}
 /**
  * Renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.
  *
@@ -111,5 +138,5 @@ function Portal({ children, container, disabled = false }) {
     return createPortal(jsx(LocalePortalScope, { target: target, children: children }), target);
 }
 
-export { Portal, resolvePortalContainer, usePortalContainer };
+export { Portal, resolvePortalContainer, usePortalContainer, usePortalProp };
 //# sourceMappingURL=portal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"portal.js","sources":["../../../src/helpers/portal.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIsHydrated } from './useIsHydrated';\nimport { useConfig } from './Config';\nimport { LocalePortalScope } from './LocaleProvider';\n\n/**\n * Resolves a portal target: an `HTMLElement` is used directly, a non-empty\n * `string` is treated as a `document.querySelector` selector (falling back to\n * `document.body` when it matches nothing), and any falsy value — `undefined`\n * or the empty string — resolves to `document.body`.\n *\n * The empty string is deliberately treated as \"no target\" rather than passed\n * through: `document.querySelector('')` throws a `SyntaxError`, and callers\n * building a selector from state can easily hand us `''`.\n *\n * @function resolvePortalContainer\n * @param container - The requested portal target, if any.\n * @returns The resolved DOM node to portal into.\n */\nexport function resolvePortalContainer(\n  container?: string | HTMLElement\n): HTMLElement {\n  if (!container) {\n    return document.body;\n  }\n  if (typeof container === 'string') {\n    return (\n      (document.querySelector(container) as HTMLElement | null) ?? document.body\n    );\n  }\n  return container;\n}\n\n/**\n * Where a component's portal goes, as a function to call when the portal is\n * created: the target the component was given, else the `portalContainer` a\n * `ConfigProvider` sets, else `document.body`, each read as\n * `resolvePortalContainer` reads it. A component that portals resolves its\n * target through this, so the provider's default reaches it.\n *\n * The hook only reads context, so it is safe to call on the server, ahead of\n * any early return. The function it returns reads the DOM, so call it only\n * where the portal is created, which the server never reaches.\n *\n * @function usePortalContainer\n * @returns A function that takes the component's own target, if any, and\n * returns the DOM node to portal into.\n */\nexport function usePortalContainer(): (\n  container?: string | HTMLElement\n) => HTMLElement {\n  const { portalContainer } = useConfig();\n  return container => resolvePortalContainer(container || portalContainer);\n}\n\n/**\n * Props for the Portal component.\n */\nexport interface PortalProps {\n  /** Content to render into the container. */\n  children?: React.ReactNode;\n  /**\n   * Where the content goes: an element, or a `document.querySelector`\n   * selector. Omitted or empty, it goes to the `portalContainer` a\n   * `ConfigProvider` sets, and to `document.body` when none is set. A\n   * selector that matches nothing means `document.body` too. A selector is\n   * looked up again on each render, so the\n   * content follows the target when it changes. Moving to another target\n   * remounts the children and resets their state, which includes a selector\n   * that only starts matching after the content has shown in `document.body`.\n   * Render the target first, or pass the element once you have it.\n   */\n  container?: string | HTMLElement;\n  /**\n   * Render the children in place instead, on the server as well as the\n   * client. Lets a component that portals only sometimes keep a single code\n   * path.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.\n *\n * React's server renderer can't render a portal, so `Portal` renders nothing\n * on the server and during hydration, and mounts its children in the commit\n * that follows. The first client render then matches the server markup. In an app\n * without server rendering it portals on the first render.\n *\n * React context, such as `ConfigProvider`'s class prefix, reaches the\n * portaled children, and their React events bubble through the React tree.\n * CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme`\n * sets its variables on a wrapper element the portaled content has left, so\n * that content sees the page-level theme, and styles scoped to a shadow root\n * don't reach `document.body` at all. To keep them, portal into an element\n * inside the themed area or the shadow root: pass it as `container`, or as\n * the `portalContainer` of a `ConfigProvider` around that area. The second\n * also reaches what the library's components portal, such as Popover's\n * `appendToBody` panel or a `Modal` with `portal`.\n *\n * Inside a `LocaleProvider`, the children keep its `dir` and `lang`. A\n * container inside the provider's own wrapper takes the children as they\n * are, and they follow the provider through the page. Any other,\n * `document.body` included, gets them inside one `<div>` carrying the\n * provider's values, with `display: contents` so it adds no box. It is\n * still an element, so content that must be the container's direct child,\n * a `<tr>` in a `<tbody>`, or that a direct-child selector styles, belongs\n * in a container inside the provider. Which of the two is settled when the\n * children mount, so a change of locale updates them in place rather than\n * remounting them.\n *\n * Tab order and focus follow the DOM too. Content portaled from inside a\n * focus trap is no longer inside the trapped element, so the trap neither\n * reaches it nor holds focus there: render nested overlays inside the\n * trapped element, or give them a trap of their own. To trap portaled\n * content, put `useFocusTrap`'s ref on the element inside the `Portal`.\n *\n * @function\n * @param {PortalProps} props - Props for the Portal component.\n * @returns The portal, the children in place when `disabled`, or nothing\n * before hydration.\n *\n * @example\n * <Portal>\n *   <div className=\"box\">Rendered at the end of document.body</div>\n * </Portal>\n *\n * @example\n * // Into a dedicated overlay root\n * <Portal container=\"#overlays\">\n *   <CommandPalette />\n * </Portal>\n */\nexport function Portal({ children, container, disabled = false }: PortalProps) {\n  const hydrated = useIsHydrated();\n  const resolveContainer = usePortalContainer();\n  if (disabled) return <>{children}</>;\n  if (!hydrated) return null;\n  const target = resolveContainer(container);\n  return createPortal(\n    <LocalePortalScope target={target}>{children}</LocalePortalScope>,\n    target\n  );\n}\n"],"names":["_jsx","_Fragment"],"mappings":";;;;;;;;AAMA;;;;;;;;;;;;;AAaG;AACG,SAAU,sBAAsB,CACpC,SAAgC,EAAA;IAEhC,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,QAAQ,CAAC,IAAI;IACtB;AACA,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,QACG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAwB,IAAI,QAAQ,CAAC,IAAI;IAE9E;AACA,IAAA,OAAO,SAAS;AAClB;AAEA;;;;;;;;;;;;;;AAcG;SACa,kBAAkB,GAAA;AAGhC,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE;IACvC,OAAO,SAAS,IAAI,sBAAsB,CAAC,SAAS,IAAI,eAAe,CAAC;AAC1E;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDG;AACG,SAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAe,EAAA;AAC3E,IAAA,MAAM,QAAQ,GAAG,aAAa,EAAE;AAChC,IAAA,MAAM,gBAAgB,GAAG,kBAAkB,EAAE;AAC7C,IAAA,IAAI,QAAQ;QAAE,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI;AACpC,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,IAAI;AAC1B,IAAA,MAAM,MAAM,GAAG,gBAAgB,CAAC,SAAS,CAAC;AAC1C,IAAA,OAAO,YAAY,CACjBD,GAAA,CAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAqB,EACjE,MAAM,CACP;AACH;;"}
+{"version":3,"file":"portal.js","sources":["../../../src/helpers/portal.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIsHydrated } from './useIsHydrated';\nimport { useConfig } from './Config';\nimport { LocalePortalScope } from './LocaleProvider';\n\n/**\n * Resolves a portal target: an `HTMLElement` is used directly, a non-empty\n * `string` is treated as a `document.querySelector` selector (falling back to\n * `document.body` when it matches nothing), and any falsy value — `undefined`\n * or the empty string — resolves to `document.body`.\n *\n * The empty string is deliberately treated as \"no target\" rather than passed\n * through: `document.querySelector('')` throws a `SyntaxError`, and callers\n * building a selector from state can easily hand us `''`.\n *\n * @function resolvePortalContainer\n * @param container - The requested portal target, if any.\n * @returns The resolved DOM node to portal into.\n */\nexport function resolvePortalContainer(\n  container?: string | HTMLElement\n): HTMLElement {\n  if (!container) {\n    return document.body;\n  }\n  if (typeof container === 'string') {\n    return (\n      (document.querySelector(container) as HTMLElement | null) ?? document.body\n    );\n  }\n  return container;\n}\n\n/**\n * Where a component's portal goes, as a function to call when the portal is\n * created: the target the component was given, else the `portalContainer` a\n * `ConfigProvider` sets, else `document.body`, each read as\n * `resolvePortalContainer` reads it. A component that portals resolves its\n * target through this, so the provider's default reaches it.\n *\n * The hook only reads context, so it is safe to call on the server, ahead of\n * any early return. The function it returns reads the DOM, so call it only\n * where the portal is created, which the server never reaches.\n *\n * @function usePortalContainer\n * @returns A function that takes the component's own target, if any, and\n * returns the DOM node to portal into.\n */\nexport function usePortalContainer(): (\n  container?: string | HTMLElement\n) => HTMLElement {\n  const { portalContainer } = useConfig();\n  return container => resolvePortalContainer(container || portalContainer);\n}\n\n/**\n * What a component that takes Modal's `portal` prop does with it now. See\n * `usePortalProp`.\n */\nexport interface PortalPropState {\n  /**\n   * Whether the content renders in its portal: `portal` is set and\n   * hydration is over. Before that it renders in place.\n   */\n  isPortaled: boolean;\n  /**\n   * The target to pass `Portal` as its `container`: the selector or element\n   * `portal` names, or `undefined` for `true`, which leaves the choice to the\n   * `portalContainer` a `ConfigProvider` sets and then `document.body`.\n   */\n  container?: string | HTMLElement;\n  /**\n   * The `portalContainer` a `ConfigProvider` sets, while it's what places the\n   * content (portaled, with `portal` set to `true`), else `undefined`. A\n   * change to it moves the content, so effects that hold its nodes depend\n   * on it.\n   */\n  defaultTarget?: string | HTMLElement;\n}\n\n/**\n * Reads Modal's `portal` prop (`boolean | string | HTMLElement`) for a\n * component that takes it: whether the content is in its portal yet, and\n * where it goes.\n *\n * A portal has no server-rendered counterpart, so such a component renders in\n * place on the server and while hydrating, and moves into its portal once the\n * client takes over. Render the content in `Portal` with\n * `disabled={!isPortaled}` and this `container`. Moving remounts the content,\n * so an effect that holds one of its nodes depends on `isPortaled`, `portal`\n * and `defaultTarget`.\n *\n * @function usePortalProp\n * @param portal - The component's `portal` prop.\n * @returns Whether it's portaled now, its `container`, and the provider's\n * target while that places it.\n */\nexport function usePortalProp(\n  portal?: boolean | string | HTMLElement\n): PortalPropState {\n  const hydrated = useIsHydrated();\n  const { portalContainer } = useConfig();\n  const isPortaled = Boolean(portal) && hydrated;\n  return {\n    isPortaled,\n    container: typeof portal === 'boolean' ? undefined : portal,\n    defaultTarget: isPortaled && portal === true ? portalContainer : undefined,\n  };\n}\n\n/**\n * Props for the Portal component.\n */\nexport interface PortalProps {\n  /** Content to render into the container. */\n  children?: React.ReactNode;\n  /**\n   * Where the content goes: an element, or a `document.querySelector`\n   * selector. Omitted or empty, it goes to the `portalContainer` a\n   * `ConfigProvider` sets, and to `document.body` when none is set. A\n   * selector that matches nothing means `document.body` too. A selector is\n   * looked up again on each render, so the\n   * content follows the target when it changes. Moving to another target\n   * remounts the children and resets their state, which includes a selector\n   * that only starts matching after the content has shown in `document.body`.\n   * Render the target first, or pass the element once you have it.\n   */\n  container?: string | HTMLElement;\n  /**\n   * Render the children in place instead, on the server as well as the\n   * client. Lets a component that portals only sometimes keep a single code\n   * path.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\n/**\n * Renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.\n *\n * React's server renderer can't render a portal, so `Portal` renders nothing\n * on the server and during hydration, and mounts its children in the commit\n * that follows. The first client render then matches the server markup. In an app\n * without server rendering it portals on the first render.\n *\n * React context, such as `ConfigProvider`'s class prefix, reaches the\n * portaled children, and their React events bubble through the React tree.\n * CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme`\n * sets its variables on a wrapper element the portaled content has left, so\n * that content sees the page-level theme, and styles scoped to a shadow root\n * don't reach `document.body` at all. To keep them, portal into an element\n * inside the themed area or the shadow root: pass it as `container`, or as\n * the `portalContainer` of a `ConfigProvider` around that area. The second\n * also reaches what the library's components portal, such as Popover's\n * `appendToBody` panel or a `Modal` with `portal`.\n *\n * Inside a `LocaleProvider`, the children keep its `dir` and `lang`. A\n * container inside the provider's own wrapper takes the children as they\n * are, and they follow the provider through the page. Any other,\n * `document.body` included, gets them inside one `<div>` carrying the\n * provider's values, with `display: contents` so it adds no box. It is\n * still an element, so content that must be the container's direct child,\n * a `<tr>` in a `<tbody>`, or that a direct-child selector styles, belongs\n * in a container inside the provider. Which of the two is settled when the\n * children mount, so a change of locale updates them in place rather than\n * remounting them.\n *\n * Tab order and focus follow the DOM too. Content portaled from inside a\n * focus trap is no longer inside the trapped element, so the trap neither\n * reaches it nor holds focus there: render nested overlays inside the\n * trapped element, or give them a trap of their own. To trap portaled\n * content, put `useFocusTrap`'s ref on the element inside the `Portal`.\n *\n * @function\n * @param {PortalProps} props - Props for the Portal component.\n * @returns The portal, the children in place when `disabled`, or nothing\n * before hydration.\n *\n * @example\n * <Portal>\n *   <div className=\"box\">Rendered at the end of document.body</div>\n * </Portal>\n *\n * @example\n * // Into a dedicated overlay root\n * <Portal container=\"#overlays\">\n *   <CommandPalette />\n * </Portal>\n */\nexport function Portal({ children, container, disabled = false }: PortalProps) {\n  const hydrated = useIsHydrated();\n  const resolveContainer = usePortalContainer();\n  if (disabled) return <>{children}</>;\n  if (!hydrated) return null;\n  const target = resolveContainer(container);\n  return createPortal(\n    <LocalePortalScope target={target}>{children}</LocalePortalScope>,\n    target\n  );\n}\n"],"names":["_jsx","_Fragment"],"mappings":";;;;;;;;AAMA;;;;;;;;;;;;;AAaG;AACG,SAAU,sBAAsB,CACpC,SAAgC,EAAA;IAEhC,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,QAAQ,CAAC,IAAI;IACtB;AACA,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,QACG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAwB,IAAI,QAAQ,CAAC,IAAI;IAE9E;AACA,IAAA,OAAO,SAAS;AAClB;AAEA;;;;;;;;;;;;;;AAcG;SACa,kBAAkB,GAAA;AAGhC,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE;IACvC,OAAO,SAAS,IAAI,sBAAsB,CAAC,SAAS,IAAI,eAAe,CAAC;AAC1E;AA2BA;;;;;;;;;;;;;;;;AAgBG;AACG,SAAU,aAAa,CAC3B,MAAuC,EAAA;AAEvC,IAAA,MAAM,QAAQ,GAAG,aAAa,EAAE;AAChC,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE;IACvC,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,QAAQ;IAC9C,OAAO;QACL,UAAU;AACV,QAAA,SAAS,EAAE,OAAO,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM;AAC3D,QAAA,aAAa,EAAE,UAAU,IAAI,MAAM,KAAK,IAAI,GAAG,eAAe,GAAG,SAAS;KAC3E;AACH;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDG;AACG,SAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAe,EAAA;AAC3E,IAAA,MAAM,QAAQ,GAAG,aAAa,EAAE;AAChC,IAAA,MAAM,gBAAgB,GAAG,kBAAkB,EAAE;AAC7C,IAAA,IAAI,QAAQ;QAAE,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI;AACpC,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,IAAI;AAC1B,IAAA,MAAM,MAAM,GAAG,gBAAgB,CAAC,SAAS,CAAC;AAC1C,IAAA,OAAO,YAAY,CACjBD,GAAA,CAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAqB,EACjE,MAAM,CACP;AACH;;"}

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

package/dist/esm/layout/Flex.js

@@ -0,0 +1,34 @@
+/* @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 `Flex` component is a flex container with CSS's own defaults, taking the flex container's properties as props.
+ *
+ * It's a row that doesn't wrap, with its children stretched across it and no
+ * gap, until you set otherwise. Use it for a layout of your own, such as a
+ * fixed side beside a growing one, with `flexGrow` and `flexShrink` on the
+ * children. Its children's own block margins are zeroed, so the gap is the
+ * only space. For a column of blocks or a row of controls with Bulma's
+ * spacing already in place, `Stack` and `Group` start closer.
+ *
+ * @function
+ * @param {FlexProps} props - Props for the Flex component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered flex container.
+ *
+ * @example
+ * <Flex gap="4" alignItems="flex-start">
+ *   <Box flexShrink="0">…</Box>
+ *   <Box flexGrow="1">…</Box>
+ * </Flex>
+ */
+const Flex = forwardRef(function Flex(props, ref) {
+    return jsx(StackLayout, { ref: ref, ...props });
+});
+Flex.displayName = 'Flex';
+
+export { Flex };
+//# sourceMappingURL=Flex.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../../src/layout/Flex.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 {\n  BulmaGapStep,\n  validAlignContents,\n  validAlignItems,\n  validFlexDirections,\n  validFlexWraps,\n  validJustifyContents,\n} from '../helpers/useBulmaClasses';\n\n/**\n * The Flex component's own props, beside the attributes of the element `as`\n * renders.\n */\nexport interface FlexOwnProps extends LayoutOwnProps {\n  /**\n   * The main axis. `row-reverse` and `column-reverse` change only what's seen:\n   * reading and Tab order still follow the children's order (WCAG 1.3.2 and\n   * 2.4.3). Needs Bulma's helper classes: under `bestax-no-helpers.css` the\n   * default stays.\n   * @defaultValue 'row'\n   */\n  flexDirection?: (typeof validFlexDirections)[number];\n  /**\n   * Whether children move to a new line when they don't fit. Needs Bulma's\n   * helper classes: under `bestax-no-helpers.css` the default stays.\n   * @defaultValue 'nowrap'\n   */\n  flexWrap?: (typeof validFlexWraps)[number];\n  /**\n   * How each child sits across the main axis. Needs Bulma's helper classes:\n   * under `bestax-no-helpers.css` the default stays.\n   * @defaultValue 'stretch'\n   */\n  alignItems?: (typeof validAlignItems)[number];\n  /**\n   * Where the children sit along the main axis. Needs Bulma's helper classes:\n   * under `bestax-no-helpers.css` the default stays.\n   */\n  justifyContent?: (typeof validJustifyContents)[number];\n  /**\n   * How wrapped lines share the space across the main axis. Needs Bulma's\n   * helper classes: under `bestax-no-helpers.css` the default stays.\n   */\n  alignContent?: (typeof validAlignContents)[number];\n  /**\n   * Space between children, a step of Bulma's gap scale. None by default. Needs\n   * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.\n   */\n  gap?: BulmaGapStep;\n  /**\n   * Space between wrapped lines, when it differs from `gap`. Needs Bulma's\n   * helper classes: under `bestax-no-helpers.css` the default stays.\n   */\n  rowGap?: BulmaGapStep;\n  /**\n   * Space between children along a row, when it differs from `gap`. Needs\n   * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.\n   */\n  columnGap?: BulmaGapStep;\n}\n\n/**\n * Props for the Flex component. The attributes and the `ref` follow `as`, so\n * `as=\"form\"` takes `action` and `as=\"fieldset\"` takes `disabled`.\n *\n * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.\n */\nexport type FlexProps<T extends LayoutElement = LayoutElement> = FlexOwnProps &\n  Omit<React.ComponentPropsWithoutRef<T>, keyof FlexOwnProps | '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 `Flex` component is a flex container with CSS's own defaults, taking the flex container's properties as props.\n *\n * It's a row that doesn't wrap, with its children stretched across it and no\n * gap, until you set otherwise. Use it for a layout of your own, such as a\n * fixed side beside a growing one, with `flexGrow` and `flexShrink` on the\n * children. Its children's own block margins are zeroed, so the gap is the\n * only space. For a column of blocks or a row of controls with Bulma's\n * spacing already in place, `Stack` and `Group` start closer.\n *\n * @function\n * @param {FlexProps} props - Props for the Flex component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered flex container.\n *\n * @example\n * <Flex gap=\"4\" alignItems=\"flex-start\">\n *   <Box flexShrink=\"0\">…</Box>\n *   <Box flexGrow=\"1\">…</Box>\n * </Flex>\n */\nexport const Flex = forwardRef(function Flex(\n  props: FlexProps,\n  ref: React.Ref<HTMLElement>\n) {\n  return <StackLayout ref={ref} {...(props as StackLayoutProps)} />;\n}) as ConstrainedPolymorphicComponent<FlexOwnProps, LayoutElement, 'div'>;\n\nFlex.displayName = 'Flex';\n\nexport default Flex;\n"],"names":["_jsx"],"mappings":";;;;;;AAqFA;;;;;;;;;;;;;;;;;;;;AAoBG;AACI,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,IAAI,CAC1C,KAAgB,EAChB,GAA2B,EAAA;IAE3B,OAAOA,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAO,KAA0B,EAAA,CAAI;AACnE,CAAC;AAED,IAAI,CAAC,WAAW,GAAG,MAAM;;"}