@allxsmith/bestax-bulma 5.56.0 → 5.57.1

package/dist/esm/elements/Image.js

@@ -1,4 +1,5 @@
 /* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../src/elements/Image.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the Image component.\n */\nexport interface ImageProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper for the container. */\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 `.image.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  /** Background color helper for the container. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Fixed size or aspect ratio modifier for the image container. A ratio\n   * (`16by9` and the rest) renders only its `is-<ratio>` class there. Bulma\n   * stretches an `<img>` inside to fill the ratio, but any other child, such\n   * as an `iframe`, fills it only with `className=\"has-ratio\"` of its own.\n   */\n  size?:\n    | '16x16'\n    | '24x24'\n    | '32x32'\n    | '48x48'\n    | '64x64'\n    | '96x96'\n    | '128x128'\n    | 'square'\n    | '1by1'\n    | '5by4'\n    | '4by3'\n    | '3by2'\n    | '5by3'\n    | '16by9'\n    | '2by1'\n    | '3by1'\n    | '4by5'\n    | '3by4'\n    | '2by3'\n    | '3by5'\n    | '9by16'\n    | '1by2'\n    | '1by3';\n  /** Renders the image with rounded corners. */\n  isRounded?: boolean;\n  /** Uses retina (2x) image source. */\n  isRetina?: boolean;\n  /** Image source URL. */\n  src?: string;\n  /** Alternate text for the image. */\n  alt?: string;\n  /** Arbitrary content (e.g., iframe, custom HTML) inside the image container. */\n  children?: React.ReactNode;\n  /** Container element tag. Defaults to `'figure'` when using aspect-ratio sizes, `'div'` otherwise. */\n  as?: 'figure' | 'div' | 'p';\n}\n\n/**\n * The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.\n *\n * @function\n * @param {ImageProps} props - Props for the Image component.\n * @returns {JSX.Element} The rendered image element.\n * @see {@link https://bulma.io/documentation/elements/image/ | Bulma Image documentation}\n */\nexport const Image: React.FC<ImageProps> = ({\n  as,\n  className,\n  textColor,\n  color,\n  bgColor,\n  size,\n  isRounded,\n  isRetina,\n  src,\n  alt,\n  children,\n  ...props\n}) => {\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Bulma reads `.has-ratio` only on a child of the ratio container, so the\n  // container carries just its `is-<ratio>` class.\n  const bulmaClasses = usePrefixedClassNames('image', {\n    [`is-${size}`]: size,\n  });\n\n  const imageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  // Default tag logic: if \"as\" is provided, use it.\n  // If not, use <figure> for aspect ratios, <div> otherwise.\n  const Tag: 'figure' | 'div' | 'p' =\n    as ?? (size?.includes('by') ? 'figure' : 'div');\n\n  const roundedClass = usePrefixedClassNames('is-rounded');\n\n  const content = children ? (\n    children\n  ) : (\n    <img\n      className={classNames({ [roundedClass]: isRounded }) || undefined}\n      src={src}\n      alt={alt}\n      {...(isRetina && src ? { srcSet: `${src} 2x` } : {})}\n    />\n  );\n\n  return (\n    <Tag className={imageClasses} {...rest}>\n      {content}\n    </Tag>\n  );\n};\n\nexport default Image;\n"],"names":["_jsx"],"mappings":";;;;;AAwEA;;;;;;;AAOG;AACI,MAAM,KAAK,GAAyB,CAAC,EAC1C,EAAE,EACF,SAAS,EACT,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACnD,KAAK,EAAE,SAAS,IAAI,KAAK;AACzB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;;AAIF,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,EAAE;AAClD,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI;AACrB,KAAA,CAAC;IAEF,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;;;IAI5E,MAAM,GAAG,GACP,EAAE,KAAK,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEjD,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,YAAY,CAAC;IAExD,MAAM,OAAO,GAAG,QAAQ,IACtB,QAAQ,KAERA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,EAAE,CAAC,YAAY,GAAG,SAAS,EAAE,CAAC,IAAI,SAAS,EACjE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,IACH,QAAQ,IAAI,GAAG,GAAG,EAAE,MAAM,EAAE,CAAA,EAAG,GAAG,CAAA,GAAA,CAAK,EAAE,GAAG,EAAE,CAAC,EAAA,CACpD,CACH;AAED,IAAA,QACEA,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAE,YAAY,EAAA,GAAM,IAAI,EAAA,QAAA,EACnC,OAAO,EAAA,CACJ;AAEV;;"}
+{"version":3,"file":"Image.js","sources":["../../../src/elements/Image.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the Image component.\n */\nexport interface ImageProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper for the container. */\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 `.image.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  /** Background color helper for the container. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Fixed size or aspect ratio modifier for the image container. A ratio\n   * (`16by9` and the rest) renders only its `is-<ratio>` class there. Bulma\n   * stretches an `<img>` inside to fill the ratio, but any other child, such\n   * as an `iframe`, fills it only with `className=\"has-ratio\"` of its own.\n   */\n  size?:\n    | '16x16'\n    | '24x24'\n    | '32x32'\n    | '48x48'\n    | '64x64'\n    | '96x96'\n    | '128x128'\n    | 'square'\n    | '1by1'\n    | '5by4'\n    | '4by3'\n    | '3by2'\n    | '5by3'\n    | '16by9'\n    | '2by1'\n    | '3by1'\n    | '4by5'\n    | '3by4'\n    | '2by3'\n    | '3by5'\n    | '9by16'\n    | '1by2'\n    | '1by3';\n  /** Renders the image with rounded corners. */\n  isRounded?: boolean;\n  /** Uses retina (2x) image source. */\n  isRetina?: boolean;\n  /** Image source URL. */\n  src?: string;\n  /** Alternate text for the image. */\n  alt?: string;\n  /** Arbitrary content (e.g., iframe, custom HTML) inside the image container. */\n  children?: React.ReactNode;\n  /** Container element tag. Defaults to `'figure'` when using aspect-ratio sizes, `'div'` otherwise. */\n  as?: 'figure' | 'div' | 'p';\n}\n\n/**\n * The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners, retina images, and all Bulma helper props for color and spacing.\n *\n * @function\n * @param {ImageProps} props - Props for the Image component.\n * @returns {JSX.Element} The rendered image element.\n * @see {@link https://bulma.io/documentation/elements/image/ | Bulma Image documentation}\n */\nexport const Image: React.FC<ImageProps> = ({\n  as,\n  className,\n  textColor,\n  color,\n  bgColor,\n  size,\n  isRounded,\n  isRetina,\n  src,\n  alt,\n  children,\n  ...props\n}) => {\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor ?? color,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Bulma reads `.has-ratio` only on a child of the ratio container, so the\n  // container carries just its `is-<ratio>` class.\n  const bulmaClasses = usePrefixedClassNames('image', {\n    [`is-${size}`]: size,\n  });\n\n  const imageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  // Default tag logic: if \"as\" is provided, use it.\n  // If not, use <figure> for aspect ratios, <div> otherwise.\n  const Tag: 'figure' | 'div' | 'p' =\n    as ?? (size?.includes('by') ? 'figure' : 'div');\n\n  const roundedClass = usePrefixedClassNames('is-rounded');\n\n  const content = children ? (\n    children\n  ) : (\n    <img\n      className={classNames({ [roundedClass]: isRounded }) || undefined}\n      src={src}\n      alt={alt}\n      {...(isRetina && src ? { srcSet: `${src} 2x` } : {})}\n    />\n  );\n\n  return (\n    <Tag className={imageClasses} {...rest}>\n      {content}\n    </Tag>\n  );\n};\n\nexport default Image;\n"],"names":["_jsx"],"mappings":";;;;;;AAwEA;;;;;;;AAOG;AACI,MAAM,KAAK,GAAyB,CAAC,EAC1C,EAAE,EACF,SAAS,EACT,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACnD,KAAK,EAAE,SAAS,IAAI,KAAK;AACzB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;;AAIF,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,EAAE;AAClD,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI;AACrB,KAAA,CAAC;IAEF,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;;;IAI5E,MAAM,GAAG,GACP,EAAE,KAAK,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEjD,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,YAAY,CAAC;IAExD,MAAM,OAAO,GAAG,QAAQ,IACtB,QAAQ,KAERA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,EAAE,CAAC,YAAY,GAAG,SAAS,EAAE,CAAC,IAAI,SAAS,EACjE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,IACH,QAAQ,IAAI,GAAG,GAAG,EAAE,MAAM,EAAE,CAAA,EAAG,GAAG,CAAA,GAAA,CAAK,EAAE,GAAG,EAAE,CAAC,EAAA,CACpD,CACH;AAED,IAAA,QACEA,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAE,YAAY,EAAA,GAAM,IAAI,EAAA,QAAA,EACnC,OAAO,EAAA,CACJ;AAEV;;"}

package/dist/esm/elements/Kbd.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","sources":["../../../src/elements/Kbd.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { flattenChildren } from '../helpers/flattenChildren';\nimport { visuallyHidden } from '../helpers/statusRegion';\nimport { withSubComponents } from '../helpers/withSubComponents';\n\n/**\n * Props for the Kbd component. The helper props, the other attributes and\n * the `ref` land on the `<kbd>`.\n *\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<kbd>`.\n */\nexport interface KbdProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * The key as it's printed on the keyboard: a word (`Ctrl`, `Esc`), a\n   * letter, or a symbol (`⌘`).\n   */\n  children?: React.ReactNode;\n  /**\n   * What a screen reader says in place of a symbol, in your app's language:\n   * `label=\"Command\"` on `⌘`. The symbol is hidden from assistive tech with\n   * `aria-hidden`, and the label is read in its place, from text that's\n   * visually hidden. Use it for a glyph that isn't a word, such as `⌘`, `⌥`,\n   * `⇧`, `⌃` or `⏎`, and leave it off a key written as a word. Copying the\n   * key copies the label along with the glyph. Don't reach for `aria-label`\n   * instead: ARIA in HTML prohibits naming a `<kbd>`, so nothing obliges a\n   * screen reader to read it.\n   */\n  label?: string;\n  /**\n   * Text color helper. The key's edge and fill are mixed from its text\n   * color, so they follow it.\n   */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Background color helper. It replaces the key's faint fill, and the text\n   * still follows the text around it, which turns light in dark mode, so pair\n   * it with a `textColor` that reads on that color in both schemes, such as\n   * `textColor=\"black\"` on `bgColor=\"warning\"`.\n   */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n}\n\n/**\n * Props for Kbd.Group, keys pressed together or one after another. The\n * group renders the outer `<kbd>` of a combination, and the helper props,\n * the other attributes and the `ref` land on it.\n *\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the outer `<kbd>`.\n */\nexport interface KbdGroupProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * The keys, a `Kbd` each, in the order they're pressed. The group renders\n   * the outer `<kbd>` around them, so it doesn't go inside a `Kbd` of its\n   * own, and it puts the separator between them, so don't type one: a `+`\n   * of your own doubles up. A `null` or `false` child, or an empty Fragment,\n   * gets no separator, and the keys in a Fragment are separated like the\n   * rest. A component that renders nothing still gets one, since the group\n   * can't see what a child renders, so write a conditional key inline\n   * (`{isMac && <Kbd label=\"Command\">⌘</Kbd>}`), not in a component of its\n   * own.\n   */\n  children?: React.ReactNode;\n  /**\n   * What goes between the keys, shown and read aloud, with a space either\n   * side. Use `'then'` for a sequence pressed one key after another. It's a\n   * string because a screen reader has to read it.\n   */\n  separator?: string;\n  /** Text color helper. The keys and separators inside follow it. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n}\n\n/**\n * Keys pressed together or one after another, in the outer `<kbd>` HTML gives a combination, with the separator between each pair as text.\n *\n * It doesn't wrap in the middle and isn't drawn as a key itself. It sets no\n * font size, so the keys in it are the size of a key on its own.\n *\n * @function\n * @param {KbdGroupProps} props - Props for Kbd.Group.\n * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the outer `<kbd>`.\n * @returns {JSX.Element} The rendered combination.\n *\n * @example\n * <Kbd.Group>\n *   <Kbd>Ctrl</Kbd>\n *   <Kbd>Shift</Kbd>\n *   <Kbd>P</Kbd>\n * </Kbd.Group>\n *\n * @example\n * <Kbd.Group separator=\"then\">\n *   <Kbd>G</Kbd>\n *   <Kbd>I</Kbd>\n * </Kbd.Group>\n */\nexport const KbdGroup = forwardRef<HTMLElement, KbdGroupProps>(\n  ({ className, textColor, separator = '+', children, ...props }, ref) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n    const groupClass = usePrefixedClassNames('kbd-group');\n    const separatorClass = usePrefixedClassNames('kbd-separator');\n\n    // Null, undefined and booleans drop out, and Fragments are opened up, so\n    // an empty Fragment leaves no separator behind and the keys in one are\n    // separated like the rest. The spaces are part of the text, so a screen\n    // reader reads \"Ctrl plus S\" rather than one run-together word, whatever\n    // the CSS does.\n    const keys = flattenChildren(children);\n\n    return (\n      <kbd\n        ref={ref}\n        className={classNames(groupClass, bulmaHelperClasses, className)}\n        {...rest}\n      >\n        {keys.map((key, index) => (\n          // Each wrapper takes its child's own React key, so a child that\n          // moves keeps its node. Text has none, so it goes by its place.\n          <React.Fragment\n            key={React.isValidElement(key) && key.key != null ? key.key : index}\n          >\n            {index > 0 && (\n              <span className={separatorClass}>{` ${separator} `}</span>\n            )}\n            {key}\n          </React.Fragment>\n        ))}\n      </kbd>\n    );\n  }\n);\n\nKbdGroup.displayName = 'Kbd.Group';\n\n/**\n * The `Kbd` component renders a `<kbd>` drawn as a keycap, for a key the reader presses.\n *\n * It only shows the key: it doesn't listen for it. The key takes its colors\n * from the text it sits in, and its size in `em`, so it fits a paragraph, a\n * title or a filled button as it is, and `textSize` sizes it outright. For a\n * combination or a sequence, put the keys in a `Kbd.Group`. What tells\n * assistive tech a control has a shortcut is `aria-keyshortcuts` on that\n * control, with `Kbd` as the hint people see next to it.\n *\n * @function\n * @param {KbdProps} props - Props for the Kbd component.\n * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<kbd>`.\n * @returns {JSX.Element} The rendered key.\n *\n * @example\n * <Kbd>Esc</Kbd>\n *\n * @example\n * <Kbd label=\"Command\">⌘</Kbd>\n */\nconst KbdRoot = forwardRef<HTMLElement, KbdProps>(\n  ({ className, textColor, bgColor, label, children, ...props }, ref) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      backgroundColor: bgColor,\n      ...props,\n    });\n    const kbdClass = usePrefixedClassNames('kbd');\n\n    // The name is text rather than an aria-label, which ARIA in HTML\n    // prohibits on kbd. Its styles are inline, so it stays hidden in a\n    // modular build that leaves out Bulma's helper classes.\n    return (\n      <kbd\n        ref={ref}\n        className={classNames(kbdClass, bulmaHelperClasses, className)}\n        {...rest}\n      >\n        {label ? (\n          <>\n            <span aria-hidden=\"true\">{children}</span>\n            <span style={visuallyHidden}>{label}</span>\n          </>\n        ) : (\n          children\n        )}\n      </kbd>\n    );\n  }\n);\n\nexport const Kbd = withSubComponents(KbdRoot, { Group: KbdGroup }, 'Kbd');\n\nexport default Kbd;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAwFA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACrE,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;AACF,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,WAAW,CAAC;AACrD,IAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,eAAe,CAAC;;;;;;AAO7D,IAAA,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,CAAC;AAEtC,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,kBAAkB,EAAE,SAAS,CAAC,KAC5D,IAAI,EAAA,QAAA,EAEP,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MAGnBC,KAAC,KAAK,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CAGZ,KAAK,GAAG,CAAC,KACRD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,cAAc,EAAA,QAAA,EAAG,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAG,EAAA,CAAQ,CAC3D,EACA,GAAG,CAAA,EAAA,EALC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,KAAK,CAMpD,CAClB,CAAC,EAAA,CACE;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,WAAW;AAElC;;;;;;;;;;;;;;;;;;;;AAoBG;AACH,MAAM,OAAO,GAAG,UAAU,CACxB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACpE,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;AACF,IAAA,MAAM,QAAQ,GAAG,qBAAqB,CAAC,KAAK,CAAC;;;;IAK7C,QACEA,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,kBAAkB,EAAE,SAAS,CAAC,EAAA,GAC1D,IAAI,EAAA,QAAA,EAEP,KAAK,IACJC,4BACED,GAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,YAAE,QAAQ,EAAA,CAAQ,EAC1CA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,cAAc,EAAA,QAAA,EAAG,KAAK,GAAQ,CAAA,EAAA,CAC1C,KAEH,QAAQ,CACT,EAAA,CACG;AAEV,CAAC,CACF;AAEM,MAAM,GAAG,GAAG,iBAAiB,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK;;"}
+{"version":3,"file":"Kbd.js","sources":["../../../src/elements/Kbd.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { flattenChildren } from '../helpers/flattenChildren';\nimport { visuallyHidden } from '../helpers/statusRegion';\nimport { withSubComponents } from '../helpers/withSubComponents';\n\n/**\n * Props for the Kbd component. The helper props, the other attributes and\n * the `ref` land on the `<kbd>`.\n *\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<kbd>`.\n */\nexport interface KbdProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * The key as it's printed on the keyboard: a word (`Ctrl`, `Esc`), a\n   * letter, or a symbol (`⌘`).\n   */\n  children?: React.ReactNode;\n  /**\n   * What a screen reader says in place of a symbol, in your app's language:\n   * `label=\"Command\"` on `⌘`. The symbol is hidden from assistive tech with\n   * `aria-hidden`, and the label is read in its place, from text that's\n   * visually hidden. Use it for a glyph that isn't a word, such as `⌘`, `⌥`,\n   * `⇧`, `⌃` or `⏎`, and leave it off a key written as a word. Copying the\n   * key copies the label along with the glyph. Don't reach for `aria-label`\n   * instead: ARIA in HTML prohibits naming a `<kbd>`, so nothing obliges a\n   * screen reader to read it.\n   */\n  label?: string;\n  /**\n   * Text color helper. The key's edge and fill are mixed from its text\n   * color, so they follow it.\n   */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Background color helper. It replaces the key's faint fill, and the text\n   * still follows the text around it, which turns light in dark mode, so pair\n   * it with a `textColor` that reads on that color in both schemes, such as\n   * `textColor=\"black\"` on `bgColor=\"warning\"`.\n   */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n}\n\n/**\n * Props for Kbd.Group, keys pressed together or one after another. The\n * group renders the outer `<kbd>` of a combination, and the helper props,\n * the other attributes and the `ref` land on it.\n *\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the outer `<kbd>`.\n */\nexport interface KbdGroupProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * The keys, a `Kbd` each, in the order they're pressed. The group renders\n   * the outer `<kbd>` around them, so it doesn't go inside a `Kbd` of its\n   * own, and it puts the separator between them, so don't type one: a `+`\n   * of your own doubles up. A `null` or `false` child, or an empty Fragment,\n   * gets no separator, and the keys in a Fragment are separated like the\n   * rest. A component that renders nothing still gets one, since the group\n   * can't see what a child renders, so write a conditional key inline\n   * (`{isMac && <Kbd label=\"Command\">⌘</Kbd>}`), not in a component of its\n   * own.\n   */\n  children?: React.ReactNode;\n  /**\n   * What goes between the keys, shown and read aloud, with a space either\n   * side. Use `'then'` for a sequence pressed one key after another. It's a\n   * string because a screen reader has to read it.\n   */\n  separator?: string;\n  /** Text color helper. The keys and separators inside follow it. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n}\n\n/**\n * Keys pressed together or one after another, in the outer `<kbd>` HTML gives a combination, with the separator between each pair as text.\n *\n * It doesn't wrap in the middle and isn't drawn as a key itself. It sets no\n * font size, so the keys in it are the size of a key on its own.\n *\n * @function\n * @param {KbdGroupProps} props - Props for Kbd.Group.\n * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the outer `<kbd>`.\n * @returns {JSX.Element} The rendered combination.\n *\n * @example\n * <Kbd.Group>\n *   <Kbd>Ctrl</Kbd>\n *   <Kbd>Shift</Kbd>\n *   <Kbd>P</Kbd>\n * </Kbd.Group>\n *\n * @example\n * <Kbd.Group separator=\"then\">\n *   <Kbd>G</Kbd>\n *   <Kbd>I</Kbd>\n * </Kbd.Group>\n */\nexport const KbdGroup = forwardRef<HTMLElement, KbdGroupProps>(\n  ({ className, textColor, separator = '+', children, ...props }, ref) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n    const groupClass = usePrefixedClassNames('kbd-group');\n    const separatorClass = usePrefixedClassNames('kbd-separator');\n\n    // Null, undefined and booleans drop out, and Fragments are opened up, so\n    // an empty Fragment leaves no separator behind and the keys in one are\n    // separated like the rest. The spaces are part of the text, so a screen\n    // reader reads \"Ctrl plus S\" rather than one run-together word, whatever\n    // the CSS does.\n    const keys = flattenChildren(children);\n\n    return (\n      <kbd\n        ref={ref}\n        className={classNames(groupClass, bulmaHelperClasses, className)}\n        {...rest}\n      >\n        {keys.map((key, index) => (\n          // Each wrapper takes its child's own React key, so a child that\n          // moves keeps its node. Text has none, so it goes by its place.\n          <React.Fragment\n            key={React.isValidElement(key) && key.key != null ? key.key : index}\n          >\n            {index > 0 && (\n              <span className={separatorClass}>{` ${separator} `}</span>\n            )}\n            {key}\n          </React.Fragment>\n        ))}\n      </kbd>\n    );\n  }\n);\n\nKbdGroup.displayName = 'Kbd.Group';\n\n/**\n * The `Kbd` component renders a `<kbd>` drawn as a keycap, for a key the reader presses.\n *\n * It only shows the key: it doesn't listen for it. The key takes its colors\n * from the text it sits in, and its size in `em`, so it fits a paragraph, a\n * title or a filled button as it is, and `textSize` sizes it outright. For a\n * combination or a sequence, put the keys in a `Kbd.Group`. What tells\n * assistive tech a control has a shortcut is `aria-keyshortcuts` on that\n * control, with `Kbd` as the hint people see next to it.\n *\n * @function\n * @param {KbdProps} props - Props for the Kbd component.\n * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<kbd>`.\n * @returns {JSX.Element} The rendered key.\n *\n * @example\n * <Kbd>Esc</Kbd>\n *\n * @example\n * <Kbd label=\"Command\">⌘</Kbd>\n */\nconst KbdRoot = forwardRef<HTMLElement, KbdProps>(\n  ({ className, textColor, bgColor, label, children, ...props }, ref) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      backgroundColor: bgColor,\n      ...props,\n    });\n    const kbdClass = usePrefixedClassNames('kbd');\n\n    // The name is text rather than an aria-label, which ARIA in HTML\n    // prohibits on kbd. Its styles are inline, so it stays hidden in a\n    // modular build that leaves out Bulma's helper classes.\n    return (\n      <kbd\n        ref={ref}\n        className={classNames(kbdClass, bulmaHelperClasses, className)}\n        {...rest}\n      >\n        {label ? (\n          <>\n            <span aria-hidden=\"true\">{children}</span>\n            <span style={visuallyHidden}>{label}</span>\n          </>\n        ) : (\n          children\n        )}\n      </kbd>\n    );\n  }\n);\n\nexport const Kbd = withSubComponents(KbdRoot, { Group: KbdGroup }, 'Kbd');\n\nexport default Kbd;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAwFA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACrE,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;AACF,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,WAAW,CAAC;AACrD,IAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,eAAe,CAAC;;;;;;AAO7D,IAAA,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,CAAC;AAEtC,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,kBAAkB,EAAE,SAAS,CAAC,KAC5D,IAAI,EAAA,QAAA,EAEP,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MAGnBC,KAAC,KAAK,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CAGZ,KAAK,GAAG,CAAC,KACRD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,cAAc,EAAA,QAAA,EAAG,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAG,EAAA,CAAQ,CAC3D,EACA,GAAG,CAAA,EAAA,EALC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,KAAK,CAMpD,CAClB,CAAC,EAAA,CACE;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,WAAW;AAElC;;;;;;;;;;;;;;;;;;;;AAoBG;AACH,MAAM,OAAO,GAAG,UAAU,CACxB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACpE,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;AACF,IAAA,MAAM,QAAQ,GAAG,qBAAqB,CAAC,KAAK,CAAC;;;;IAK7C,QACEA,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,kBAAkB,EAAE,SAAS,CAAC,EAAA,GAC1D,IAAI,EAAA,QAAA,EAEP,KAAK,IACJC,4BACED,GAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,YAAE,QAAQ,EAAA,CAAQ,EAC1CA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,cAAc,EAAA,QAAA,EAAG,KAAK,GAAQ,CAAA,EAAA,CAC1C,KAEH,QAAQ,CACT,EAAA,CACG;AAEV,CAAC,CACF;AAEM,MAAM,GAAG,GAAG,iBAAiB,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK;;"}

package/dist/esm/elements/Link.js

@@ -1,4 +1,5 @@
 /* @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 '../helpers/classNames.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../src/elements/Link.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport type { PolymorphicComponent } from '../helpers/polymorphic';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * The Link component's own props — everything it adds on top of the attributes\n * of whatever element `as` renders.\n */\nexport interface LinkOwnProps extends Omit<\n  BulmaClassesProps,\n  'color' | 'backgroundColor'\n> {\n  /**\n   * Not accepted. `color` on this component would be the deprecated\n   * presentational HTML attribute, and `useBulmaClasses` consumes any `color`\n   * key as a Bulma helper before the target could see it — so it is declared\n   * unavailable rather than silently eaten. Use `textColor` / `bgColor`.\n   * @internal\n   */\n  color?: never;\n  /**\n   * Not accepted under this name. `useBulmaClasses` consumes any\n   * `backgroundColor` key before `rest` is spread, so a custom `as` target\n   * declaring one would never receive it. Use `bgColor`.\n   * @internal\n   */\n  backgroundColor?: never;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the link appears active. */\n  isActive?: boolean;\n  /** Content to render inside the link. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the Link component. The DOM attributes and the `ref` both follow\n * `as`: with the default `'a'` the anchor attributes (`href`, `target`, `rel`)\n * are accepted, with `as=\"span\"` they are not.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps &\n  Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps | 'as'> & {\n    /**\n     * Render as another intrinsic element (`'span'`, `'button'`) or a custom component (e.g. a router `Link`) instead of `<a>`. Defaults to `'a'`.\n     *\n     * `'button'` renders `type=\"button\"`, so a link inside a form does not submit it. Pass\n     * `type=\"submit\"` or `type=\"reset\"` and yours is used; any other value, or a spread\n     * carrying `type: undefined`, renders `type=\"button\"`.\n     */\n    as?: T;\n  };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `LinkProps<T>` above — the body cannot see through `T`, so it reads the widest\n * form of the props it actually touches.\n */\ntype LinkImplProps = LinkOwnProps & {\n  as?: React.ElementType;\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n};\n\n/**\n * The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.\n *\n * @function\n * @param {LinkProps} props - Props for the Link component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered anchor, or whatever `as` names.\n * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}\n */\nexport const Link = forwardRef(function Link(\n  linkProps: LinkProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const {\n    className,\n    textColor,\n    bgColor,\n    isActive,\n    as: Component = 'a',\n    children,\n    ...props\n  } = linkProps as LinkImplProps;\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  } as BulmaClassesProps & typeof props);\n\n  const bulmaClasses = usePrefixedClassNames({\n    'is-active': isActive,\n  });\n  const linkClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  return (\n    <Component\n      ref={ref}\n      className={linkClasses || undefined}\n      {...rest}\n      // A `<button>` defaults to type=\"submit\", and a link-styled button inside\n      // a form must not submit it. After the spread, reading through it, so a\n      // spread carrying `type: undefined` cannot erase the default. A caller's\n      // `submit` or `reset` still wins; `buttonType` says more.\n      {...(Component === 'button' ? { type: buttonType(rest.type) } : {})}\n    >\n      {children}\n    </Component>\n  );\n}) as PolymorphicComponent<LinkOwnProps, 'a'>;\n\nLink.displayName = 'Link';\n"],"names":["_jsx"],"mappings":";;;;;;;AA0EA;;;;;;;;AAQG;AACI,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,IAAI,CAC1C,SAAoB,EACpB,GAA2B,EAAA;IAE3B,MAAM,EACJ,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,GAAG,SAA0B;AAC9B;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AAC2B,KAAA,CAAC;IAEtC,MAAM,YAAY,GAAG,qBAAqB,CAAC;AACzC,QAAA,WAAW,EAAE,QAAQ;AACtB,KAAA,CAAC;IACF,MAAM,WAAW,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAE3E,IAAA,QACEA,GAAA,CAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,WAAW,IAAI,SAAS,EAAA,GAC/B,IAAI,MAKH,SAAS,KAAK,QAAQ,GAAG,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,YAElE,QAAQ,EAAA,CACC;AAEhB,CAAC;AAED,IAAI,CAAC,WAAW,GAAG,MAAM;;"}
+{"version":3,"file":"Link.js","sources":["../../../src/elements/Link.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport type { PolymorphicComponent } from '../helpers/polymorphic';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * The Link component's own props — everything it adds on top of the attributes\n * of whatever element `as` renders.\n */\nexport interface LinkOwnProps extends Omit<\n  BulmaClassesProps,\n  'color' | 'backgroundColor'\n> {\n  /**\n   * Not accepted. `color` on this component would be the deprecated\n   * presentational HTML attribute, and `useBulmaClasses` consumes any `color`\n   * key as a Bulma helper before the target could see it — so it is declared\n   * unavailable rather than silently eaten. Use `textColor` / `bgColor`.\n   * @internal\n   */\n  color?: never;\n  /**\n   * Not accepted under this name. `useBulmaClasses` consumes any\n   * `backgroundColor` key before `rest` is spread, so a custom `as` target\n   * declaring one would never receive it. Use `bgColor`.\n   * @internal\n   */\n  backgroundColor?: never;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the link appears active. */\n  isActive?: boolean;\n  /** Content to render inside the link. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the Link component. The DOM attributes and the `ref` both follow\n * `as`: with the default `'a'` the anchor attributes (`href`, `target`, `rel`)\n * are accepted, with `as=\"span\"` they are not.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps &\n  Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps | 'as'> & {\n    /**\n     * Render as another intrinsic element (`'span'`, `'button'`) or a custom component (e.g. a router `Link`) instead of `<a>`. Defaults to `'a'`.\n     *\n     * `'button'` renders `type=\"button\"`, so a link inside a form does not submit it. Pass\n     * `type=\"submit\"` or `type=\"reset\"` and yours is used; any other value, or a spread\n     * carrying `type: undefined`, renders `type=\"button\"`.\n     */\n    as?: T;\n  };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `LinkProps<T>` above — the body cannot see through `T`, so it reads the widest\n * form of the props it actually touches.\n */\ntype LinkImplProps = LinkOwnProps & {\n  as?: React.ElementType;\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n};\n\n/**\n * The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.\n *\n * @function\n * @param {LinkProps} props - Props for the Link component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered anchor, or whatever `as` names.\n * @see {@link https://bulma.io/documentation/elements/content/ | Bulma Content documentation}\n */\nexport const Link = forwardRef(function Link(\n  linkProps: LinkProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const {\n    className,\n    textColor,\n    bgColor,\n    isActive,\n    as: Component = 'a',\n    children,\n    ...props\n  } = linkProps as LinkImplProps;\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  } as BulmaClassesProps & typeof props);\n\n  const bulmaClasses = usePrefixedClassNames({\n    'is-active': isActive,\n  });\n  const linkClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  return (\n    <Component\n      ref={ref}\n      className={linkClasses || undefined}\n      {...rest}\n      // A `<button>` defaults to type=\"submit\", and a link-styled button inside\n      // a form must not submit it. After the spread, reading through it, so a\n      // spread carrying `type: undefined` cannot erase the default. A caller's\n      // `submit` or `reset` still wins; `buttonType` says more.\n      {...(Component === 'button' ? { type: buttonType(rest.type) } : {})}\n    >\n      {children}\n    </Component>\n  );\n}) as PolymorphicComponent<LinkOwnProps, 'a'>;\n\nLink.displayName = 'Link';\n"],"names":["_jsx"],"mappings":";;;;;;;;AA0EA;;;;;;;;AAQG;AACI,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,IAAI,CAC1C,SAAoB,EACpB,GAA2B,EAAA;IAE3B,MAAM,EACJ,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,GAAG,SAA0B;AAC9B;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AAC2B,KAAA,CAAC;IAEtC,MAAM,YAAY,GAAG,qBAAqB,CAAC;AACzC,QAAA,WAAW,EAAE,QAAQ;AACtB,KAAA,CAAC;IACF,MAAM,WAAW,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAE3E,IAAA,QACEA,GAAA,CAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,WAAW,IAAI,SAAS,EAAA,GAC/B,IAAI,MAKH,SAAS,KAAK,QAAQ,GAAG,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,YAElE,QAAQ,EAAA,CACC;AAEhB,CAAC;AAED,IAAI,CAAC,WAAW,GAAG,MAAM;;"}

package/dist/esm/elements/LinkButton.js

@@ -1,4 +1,5 @@
 /* @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 { Button } from './Button.js';

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

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.js","sources":["../../../src/elements/LinkButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonOwnProps } from './Button';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport type { PolymorphicComponent } from '../helpers/polymorphic';\n\n/**\n * The LinkButton component's own props — everything it adds on top of the\n * attributes of whatever element `as` renders.\n */\nexport interface LinkButtonOwnProps extends Omit<\n  ButtonOwnProps,\n  'color' | 'isOutlined' | 'isInverted' | 'isLight'\n> {\n  /** Display mode. `text` has no underline and highlights its background on hover; `ghost` uses the default text color and underlines on hover; `underline` drops the button chrome entirely (transparent background and border) and underlines on hover or focus. */\n  variant?: 'text' | 'ghost' | 'underline';\n  /** Text color override for the button. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'white'\n    | 'light'\n    | 'dark'\n    | 'black';\n  /**\n   * Not available on `LinkButton`, and declared so that a custom `as` target\n   * cannot reintroduce it. `Button` consumes these three for styling variants\n   * `LinkButton` does not offer, and strips them before rendering the target —\n   * so without this a component requiring one would type-check and silently\n   * never receive it.\n   * @internal\n   */\n  isOutlined?: never;\n  /** @internal Not available on `LinkButton` — see `isOutlined`. */\n  isInverted?: never;\n  /** @internal Not available on `LinkButton` — see `isOutlined`. */\n  isLight?: never;\n}\n\n/**\n * Props for the LinkButton component. The DOM attributes and the `ref` both\n * follow `as`, exactly as they do on `Button`.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type LinkButtonProps<T extends React.ElementType = 'button'> =\n  LinkButtonOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkButtonOwnProps | 'as'> & {\n      /**\n       * Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`).\n       * @defaultValue 'button'\n       */\n      as?: T;\n    };\n\n/**\n * The `LinkButton` component renders a `<button>` that visually looks like text or a link.\n *\n * @function\n * @param {LinkButtonProps} props - Props for the LinkButton component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered link-styled button element.\n *\n * @example\n * // Text variant (default)\n * <LinkButton onClick={handleClick}>Click me</LinkButton>\n *\n * @example\n * // Underline variant with color\n * <LinkButton variant=\"underline\" color=\"primary\">Learn more</LinkButton>\n */\nexport const LinkButton = forwardRef(function LinkButton(\n  { variant = 'text', color, className, ...props }: LinkButtonProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const buttonColor = variant === 'underline' ? 'text' : variant;\n\n  const prefixedClasses = usePrefixedClassNames(\n    'link-button',\n    color && `link-button-${color}`,\n    variant === 'underline' && 'link-button-underline'\n  );\n\n  return (\n    <Button\n      // LinkButton is polymorphic through to Button, which resolves the element\n      // from `as`. TS cannot infer that through the spread below.\n      ref={ref as React.Ref<HTMLButtonElement>}\n      color={buttonColor}\n      className={classNames(prefixedClasses, className)}\n      {...props}\n    />\n  );\n}) as PolymorphicComponent<LinkButtonOwnProps, 'button'>;\n\nLinkButton.displayName = 'LinkButton';\n\nexport default LinkButton;\n"],"names":["_jsx"],"mappings":";;;;;;AA0DA;;;;;;;;;;;;;;;AAeG;MACU,UAAU,GAAG,UAAU,CAAC,SAAS,UAAU,CACtD,EAAE,OAAO,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmB,EACjE,GAA2B,EAAA;AAE3B,IAAA,MAAM,WAAW,GAAG,OAAO,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO;AAE9D,IAAA,MAAM,eAAe,GAAG,qBAAqB,CAC3C,aAAa,EACb,KAAK,IAAI,CAAA,YAAA,EAAe,KAAK,CAAA,CAAE,EAC/B,OAAO,KAAK,WAAW,IAAI,uBAAuB,CACnD;IAED,QACEA,IAAC;;;;;;AAGC,QAAA,GAAG,EAAE,GAAmC,EACxC,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,KAC7C,KAAK,EAAA,CACT;AAEN,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;"}
+{"version":3,"file":"LinkButton.js","sources":["../../../src/elements/LinkButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonOwnProps } from './Button';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport type { PolymorphicComponent } from '../helpers/polymorphic';\n\n/**\n * The LinkButton component's own props — everything it adds on top of the\n * attributes of whatever element `as` renders.\n */\nexport interface LinkButtonOwnProps extends Omit<\n  ButtonOwnProps,\n  'color' | 'isOutlined' | 'isInverted' | 'isLight'\n> {\n  /** Display mode. `text` has no underline and highlights its background on hover; `ghost` uses the default text color and underlines on hover; `underline` drops the button chrome entirely (transparent background and border) and underlines on hover or focus. */\n  variant?: 'text' | 'ghost' | 'underline';\n  /** Text color override for the button. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'white'\n    | 'light'\n    | 'dark'\n    | 'black';\n  /**\n   * Not available on `LinkButton`, and declared so that a custom `as` target\n   * cannot reintroduce it. `Button` consumes these three for styling variants\n   * `LinkButton` does not offer, and strips them before rendering the target —\n   * so without this a component requiring one would type-check and silently\n   * never receive it.\n   * @internal\n   */\n  isOutlined?: never;\n  /** @internal Not available on `LinkButton` — see `isOutlined`. */\n  isInverted?: never;\n  /** @internal Not available on `LinkButton` — see `isOutlined`. */\n  isLight?: never;\n}\n\n/**\n * Props for the LinkButton component. The DOM attributes and the `ref` both\n * follow `as`, exactly as they do on `Button`.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type LinkButtonProps<T extends React.ElementType = 'button'> =\n  LinkButtonOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkButtonOwnProps | 'as'> & {\n      /**\n       * Render as a `<button>`, `<a>`, or a custom component (e.g. a router `Link`).\n       * @defaultValue 'button'\n       */\n      as?: T;\n    };\n\n/**\n * The `LinkButton` component renders a `<button>` that visually looks like text or a link.\n *\n * @function\n * @param {LinkButtonProps} props - Props for the LinkButton component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered link-styled button element.\n *\n * @example\n * // Text variant (default)\n * <LinkButton onClick={handleClick}>Click me</LinkButton>\n *\n * @example\n * // Underline variant with color\n * <LinkButton variant=\"underline\" color=\"primary\">Learn more</LinkButton>\n */\nexport const LinkButton = forwardRef(function LinkButton(\n  { variant = 'text', color, className, ...props }: LinkButtonProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const buttonColor = variant === 'underline' ? 'text' : variant;\n\n  const prefixedClasses = usePrefixedClassNames(\n    'link-button',\n    color && `link-button-${color}`,\n    variant === 'underline' && 'link-button-underline'\n  );\n\n  return (\n    <Button\n      // LinkButton is polymorphic through to Button, which resolves the element\n      // from `as`. TS cannot infer that through the spread below.\n      ref={ref as React.Ref<HTMLButtonElement>}\n      color={buttonColor}\n      className={classNames(prefixedClasses, className)}\n      {...props}\n    />\n  );\n}) as PolymorphicComponent<LinkButtonOwnProps, 'button'>;\n\nLinkButton.displayName = 'LinkButton';\n\nexport default LinkButton;\n"],"names":["_jsx"],"mappings":";;;;;;;AA0DA;;;;;;;;;;;;;;;AAeG;MACU,UAAU,GAAG,UAAU,CAAC,SAAS,UAAU,CACtD,EAAE,OAAO,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmB,EACjE,GAA2B,EAAA;AAE3B,IAAA,MAAM,WAAW,GAAG,OAAO,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO;AAE9D,IAAA,MAAM,eAAe,GAAG,qBAAqB,CAC3C,aAAa,EACb,KAAK,IAAI,CAAA,YAAA,EAAe,KAAK,CAAA,CAAE,EAC/B,OAAO,KAAK,WAAW,IAAI,uBAAuB,CACnD;IAED,QACEA,IAAC;;;;;;AAGC,QAAA,GAAG,EAAE,GAAmC,EACxC,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,KAC7C,KAAK,EAAA,CACT;AAEN,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;"}

package/dist/esm/elements/ListItem.js

@@ -1,4 +1,5 @@
 /* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../src/elements/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the ListItem component.\n * @extraProp {number} [value] - Custom value for ordered list items.\n */\nexport interface ListItemProps\n  extends\n    React.LiHTMLAttributes<HTMLLIElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Content to render inside the list item. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.\n *\n * @function\n * @param {ListItemProps} props - Props for the ListItem component.\n * @returns {JSX.Element} The rendered li element.\n */\nexport const ListItem: React.FC<ListItemProps> = ({\n  className,\n  textColor,\n  bgColor,\n  children,\n  ...props\n}) => {\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  } as BulmaClassesProps & typeof props);\n\n  const bulmaClasses = usePrefixedClassNames();\n  const itemClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  return (\n    <li className={itemClasses || undefined} {...rest}>\n      {children}\n    </li>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AA0BA;;;;;;AAMG;AACI,MAAM,QAAQ,GAA4B,CAAC,EAChD,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AAC2B,KAAA,CAAC;AAEtC,IAAA,MAAM,YAAY,GAAG,qBAAqB,EAAE;IAC5C,MAAM,WAAW,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAE3E,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,WAAW,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAC9C,QAAQ,EAAA,CACN;AAET;;"}
+{"version":3,"file":"ListItem.js","sources":["../../../src/elements/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the ListItem component.\n * @extraProp {number} [value] - Custom value for ordered list items.\n */\nexport interface ListItemProps\n  extends\n    React.LiHTMLAttributes<HTMLLIElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Content to render inside the list item. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.\n *\n * @function\n * @param {ListItemProps} props - Props for the ListItem component.\n * @returns {JSX.Element} The rendered li element.\n */\nexport const ListItem: React.FC<ListItemProps> = ({\n  className,\n  textColor,\n  bgColor,\n  children,\n  ...props\n}) => {\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  } as BulmaClassesProps & typeof props);\n\n  const bulmaClasses = usePrefixedClassNames();\n  const itemClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  return (\n    <li className={itemClasses || undefined} {...rest}>\n      {children}\n    </li>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AA0BA;;;;;;AAMG;AACI,MAAM,QAAQ,GAA4B,CAAC,EAChD,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AAC2B,KAAA,CAAC;AAEtC,IAAA,MAAM,YAAY,GAAG,qBAAqB,EAAE;IAC5C,MAAM,WAAW,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAE3E,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,WAAW,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAC9C,QAAQ,EAAA,CACN;AAET;;"}

package/dist/esm/elements/Loader.js

@@ -1,4 +1,5 @@
 /* @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 '../helpers/classNames.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/elements/Loader.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\n\n/**\n * Props for the Loader component.\n *\n * There is no color prop, and the text and background color helpers are left\n * out on purpose: Bulma draws the ring in `--bulma-border`, so a text color\n * never reaches it. For a colored spinner over a region, use `Loading`.\n *\n * @extraProp {React.Ref<HTMLSpanElement>} [ref] - Ref forwarded to the loader element.\n */\nexport interface LoaderProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'children'>,\n    Omit<\n      BulmaClassesProps,\n      'color' | 'colorShade' | 'backgroundColor' | 'backgroundColorShade'\n    > {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Accessible name of the progress indicator. Name what is loading\n   * (`\"Saving row\"`) when more than one loader can be on screen at once.\n   */\n  ariaLabel?: string;\n}\n\n/**\n * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.\n *\n * The ring is `1em` square, so `textSize` scales it. It is exposed as an\n * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning\n * under `prefers-reduced-motion: reduce` while staying drawn. In forced\n * colors its two open sides take the page's color, so it stays open.\n *\n * @function\n * @param {LoaderProps} props - Props for the Loader component.\n * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the loader element.\n * @returns {JSX.Element} The rendered loader element.\n *\n * @example\n * <Loader />\n *\n * @example\n * <Loader textSize=\"3\" ariaLabel=\"Saving\" />\n */\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(\n  ({ className, ariaLabel = 'Loading', ...props }, ref) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const loaderClass = usePrefixedClassNames('loader');\n\n    // role=\"progressbar\", not role=\"status\": a status region mounted together\n    // with its text is not reliably announced, so the loader claims only what\n    // it can deliver, a named indicator found by reading the page. No\n    // aria-valuenow, because the progress is indeterminate.\n    return (\n      <span\n        ref={ref}\n        className={classNames(loaderClass, bulmaHelperClasses, className)}\n        role=\"progressbar\"\n        aria-label={ariaLabel}\n        {...rest}\n      />\n    );\n  }\n);\n\nLoader.displayName = 'Loader';\n"],"names":["_jsx"],"mappings":";;;;;;AA6BA;;;;;;;;;;;;;;;;;;AAkBG;MACU,MAAM,GAAG,UAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACtD,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,WAAW,GAAG,qBAAqB,CAAC,QAAQ,CAAC;;;;;IAMnD,QACEA,GAAA,CAAA,MAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,EACjE,IAAI,EAAC,aAAa,EAAA,YAAA,EACN,SAAS,EAAA,GACjB,IAAI,EAAA,CACR;AAEN,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;"}
+{"version":3,"file":"Loader.js","sources":["../../../src/elements/Loader.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\n\n/**\n * Props for the Loader component.\n *\n * There is no color prop, and the text and background color helpers are left\n * out on purpose: Bulma draws the ring in `--bulma-border`, so a text color\n * never reaches it. For a colored spinner over a region, use `Loading`.\n *\n * @extraProp {React.Ref<HTMLSpanElement>} [ref] - Ref forwarded to the loader element.\n */\nexport interface LoaderProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'children'>,\n    Omit<\n      BulmaClassesProps,\n      'color' | 'colorShade' | 'backgroundColor' | 'backgroundColorShade'\n    > {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Accessible name of the progress indicator. Name what is loading\n   * (`\"Saving row\"`) when more than one loader can be on screen at once.\n   */\n  ariaLabel?: string;\n}\n\n/**\n * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.\n *\n * The ring is `1em` square, so `textSize` scales it. It is exposed as an\n * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning\n * under `prefers-reduced-motion: reduce` while staying drawn. In forced\n * colors its two open sides take the page's color, so it stays open.\n *\n * @function\n * @param {LoaderProps} props - Props for the Loader component.\n * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the loader element.\n * @returns {JSX.Element} The rendered loader element.\n *\n * @example\n * <Loader />\n *\n * @example\n * <Loader textSize=\"3\" ariaLabel=\"Saving\" />\n */\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(\n  ({ className, ariaLabel = 'Loading', ...props }, ref) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const loaderClass = usePrefixedClassNames('loader');\n\n    // role=\"progressbar\", not role=\"status\": a status region mounted together\n    // with its text is not reliably announced, so the loader claims only what\n    // it can deliver, a named indicator found by reading the page. No\n    // aria-valuenow, because the progress is indeterminate.\n    return (\n      <span\n        ref={ref}\n        className={classNames(loaderClass, bulmaHelperClasses, className)}\n        role=\"progressbar\"\n        aria-label={ariaLabel}\n        {...rest}\n      />\n    );\n  }\n);\n\nLoader.displayName = 'Loader';\n"],"names":["_jsx"],"mappings":";;;;;;;AA6BA;;;;;;;;;;;;;;;;;;AAkBG;MACU,MAAM,GAAG,UAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACtD,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,WAAW,GAAG,qBAAqB,CAAC,QAAQ,CAAC;;;;;IAMnD,QACEA,GAAA,CAAA,MAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,kBAAkB,EAAE,SAAS,CAAC,EACjE,IAAI,EAAC,aAAa,EAAA,YAAA,EACN,SAAS,EAAA,GACjB,IAAI,EAAA,CACR;AAEN,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;"}

package/dist/esm/elements/Notification.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useSyncExternalStore, useMemo, useRef, useCallback, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/elements/Notification.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useCallback,\n  useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnUnstyledColor } from '../helpers/colorDeprecations';\nimport { groupIntoPositionStacks } from '../helpers/positionStacks';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { usePortalContainer } from '../helpers/portal';\nimport { LocalePortalScope } from '../helpers/LocaleProvider';\nimport { StatusRegion, spokenText } from '../helpers/statusRegion';\n\n/**\n * Props for the Notification component.\n */\nexport interface NotificationProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   */\n  color?: (typeof validColors)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Use the light color variant. */\n  isLight?: boolean;\n  /**\n   * Shows a close (delete) button in the notification. It renders\n   * `type=\"button\"`, so it does not submit a form around it.\n   *\n   * The notification also takes `has-delete`, which pads its end by\n   * `--bulma-notification-delete-padding-inline-end` so the text clears the\n   * button. That rule ships in bestax's stylesheets, not Bulma's, so an app\n   * styled by Bulma's CSS alone keeps Bulma's padding.\n   */\n  hasDelete?: boolean;\n  /** Callback fired when the delete button is clicked. */\n  onDelete?: () => void;\n  /** Content inside the notification. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.\n *\n * @function\n * @param {NotificationProps} props - Props for the Notification component.\n * @returns {JSX.Element} The rendered notification element.\n * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}\n */\nexport const Notification: React.FC<NotificationProps> = ({\n  className,\n  color,\n  textColor,\n  isLight,\n  hasDelete,\n  onDelete,\n  children,\n  ...props\n}) => {\n  warnUnstyledColor('Notification', color);\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    ...props,\n  });\n\n  const bulmaClasses = usePrefixedClassNames('notification', {\n    [`is-${color}`]: color && validColors.includes(color),\n    'is-light': isLight,\n    'has-delete': hasDelete,\n  });\n\n  const deleteClasses = usePrefixedClassNames('delete');\n\n  const notificationClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  return (\n    <div className={notificationClasses} {...rest}>\n      {hasDelete && (\n        <button\n          type=\"button\"\n          className={deleteClasses}\n          onClick={onDelete}\n          aria-label=\"Close notification\"\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n\n// Programmatic Notification API\n\n/** Screen positions where programmatic notifications can be displayed. */\nexport type NotificationPosition =\n  'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';\n\n/**\n * Options for showing a programmatic notification.\n */\nexport interface NotificationOptions {\n  /**\n   * The message to display.\n   *\n   * For a notification other than `danger` and `warning`, NotificationContainer\n   * announces the text the message renders, with an element's `aria-label`,\n   * or an image's `alt`, standing in for what's inside it, a break between\n   * block-level elements, and parts that are `aria-hidden`, `hidden` or\n   * inline-styled `display: none` left out. Other ways of naming or hiding\n   * content, such as `aria-labelledby`, CSS-generated content or a\n   * stylesheet's `display: none`, aren't followed, so a message that relies on\n   * them can be announced differently from what a screen reader would read.\n   */\n  message: string | React.ReactNode;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   */\n  color?: (typeof validColors)[number];\n  /** Use the light color variant. */\n  isLight?: boolean;\n  /** Duration in ms before auto-close. Default 3000. */\n  duration?: number;\n  /**\n   * Position on the screen. A notification shown without one goes to\n   * `NotificationContainer`'s `position`.\n   */\n  position?: NotificationPosition;\n  /**\n   * When true, notifications enter a FIFO queue and display one at a time,\n   * one queue across every `position`. Default false.\n   */\n  queue?: boolean;\n  /** Show a delete (close) button. Default true. */\n  hasDelete?: boolean;\n  /** Stay open until dismissed. */\n  indefinite?: boolean;\n  /** Pause auto-close timer on hover. Default true. */\n  pauseOnHover?: boolean;\n}\n\n/**\n * Internal representation of a notification instance.\n */\ninterface NotificationInstance {\n  /** Unique identifier for this notification. */\n  id: string;\n  /** Configuration options for the notification. */\n  options: NotificationOptions;\n}\n\nlet notificationId = 0;\nconst notificationListeners: Set<(items: NotificationInstance[]) => void> =\n  new Set();\nlet notifications: NotificationInstance[] = [];\n\n// Queue support\nlet queuedNotifications: NotificationInstance[] = [];\nlet currentQueuedNotification: NotificationInstance | null = null;\n\n// The server has nowhere to portal a notification to, and its copy of this\n// module is shared by every request, so server rendering reads an empty list.\n// Hydration reads it too, which keeps the first client render matching the\n// server's.\nconst noNotifications: NotificationInstance[] = [];\nconst getServerNotifications = () => noNotifications;\n\n// What a container shows right now: the stacked notifications, then the queued\n// one on screen. NotificationContainer renders from this rather than from\n// updates alone, so notifications raised before it mounted still appear. It is\n// replaced rather than mutated, and only when listeners are notified, because\n// useSyncExternalStore needs the same array back between changes. An empty\n// list is `noNotifications` itself, so an empty store reads the same snapshot\n// on the client as on the server, and a notify that leaves nothing showing\n// when nothing was showing doesn't render the container again.\nlet visibleNotifications: NotificationInstance[] = noNotifications;\nconst getVisibleNotifications = () => visibleNotifications;\n\nconst notifyNotificationListeners = () => {\n  const allVisible = [...notifications];\n  if (currentQueuedNotification) {\n    allVisible.push(currentQueuedNotification);\n  }\n  visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;\n  notificationListeners.forEach(listener => listener([...allVisible]));\n};\n\nconst processQueuedNotification = () => {\n  if (currentQueuedNotification || queuedNotifications.length === 0) return;\n  currentQueuedNotification = queuedNotifications.shift()!;\n  notifyNotificationListeners();\n};\n\n/**\n * Programmatic notification API for showing, closing, and managing notifications.\n *\n * @example\n * notification.success('File saved successfully');\n * notification.danger('Something went wrong', { duration: 5000 });\n */\nexport const notification = {\n  /**\n   * Show a notification with the given options.\n   * @param {NotificationOptions} options - Notification configuration.\n   * @returns {string} The unique ID of the created notification.\n   */\n  show: (options: NotificationOptions): string => {\n    const id = `notification-${++notificationId}`;\n    const instance = { id, options };\n\n    if (options.queue) {\n      queuedNotifications.push(instance);\n      processQueuedNotification();\n    } else {\n      notifications.push(instance);\n      notifyNotificationListeners();\n    }\n\n    return id;\n  },\n\n  /**\n   * Show a success notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  success: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'success', ...options });\n  },\n\n  /**\n   * Show a danger notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  danger: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'danger', ...options });\n  },\n\n  /**\n   * Show a warning notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  warning: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'warning', ...options });\n  },\n\n  /**\n   * Show an info notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  info: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'info', ...options });\n  },\n\n  /**\n   * Close a specific notification by ID.\n   * @param {string} id - The notification ID to close.\n   */\n  close: (id: string): void => {\n    if (currentQueuedNotification && currentQueuedNotification.id === id) {\n      currentQueuedNotification = null;\n      processQueuedNotification();\n    } else {\n      queuedNotifications = queuedNotifications.filter(n => n.id !== id);\n      notifications = notifications.filter(n => n.id !== id);\n    }\n    notifyNotificationListeners();\n  },\n\n  /** Close all notifications and clear the queue. */\n  closeAll: (): void => {\n    notifications = [];\n    queuedNotifications = [];\n    currentQueuedNotification = null;\n    notifyNotificationListeners();\n  },\n\n  /**\n   * Subscribe to notification state changes.\n   * @param {(items: NotificationInstance[]) => void} listener - Callback invoked on changes.\n   * @returns {() => void} Unsubscribe function.\n   */\n  subscribe: (\n    listener: (items: NotificationInstance[]) => void\n  ): (() => void) => {\n    notificationListeners.add(listener);\n    return () => notificationListeners.delete(listener);\n  },\n};\n\n/**\n * Whether a notification of this color announces itself as an alert, rather\n * than politely through NotificationContainer's status region.\n *\n * @function isUrgentColor\n * @param {NotificationOptions['color']} color - The notification's color.\n * @returns {boolean} True for `danger` and `warning`.\n */\nconst isUrgentColor = (color: NotificationOptions['color']): boolean =>\n  color === 'danger' || color === 'warning';\n\n/**\n * Single auto-dismissing notification item used by NotificationContainer.\n *\n * @function\n * @param {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.\n * @returns {JSX.Element} The rendered notification item.\n */\nconst NotificationItem: React.FC<{\n  instance: NotificationInstance;\n  onClose: (id: string) => void;\n  registerMessage: (id: string, node: HTMLElement | null) => void;\n}> = ({ instance, onClose, registerMessage }) => {\n  const {\n    message,\n    color,\n    isLight,\n    duration = 3000,\n    hasDelete = true,\n    indefinite = false,\n    pauseOnHover = true,\n  } = instance.options;\n\n  const [isPaused, setIsPaused] = useState(false);\n  const urgent = isUrgentColor(color);\n\n  const handleClose = useCallback(() => {\n    onClose(instance.id);\n  }, [onClose, instance.id]);\n\n  const messageRef = useCallback(\n    (node: HTMLElement | null) => {\n      registerMessage(instance.id, node);\n    },\n    [registerMessage, instance.id]\n  );\n\n  // Auto-close timer\n  useEffect(() => {\n    if (indefinite || duration === 0 || isPaused) return undefined;\n\n    const timer = setTimeout(handleClose, duration);\n    return () => clearTimeout(timer);\n  }, [duration, indefinite, isPaused, handleClose]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (pauseOnHover) setIsPaused(true);\n  }, [pauseOnHover]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (pauseOnHover) setIsPaused(false);\n  }, [pauseOnHover]);\n\n  return (\n    <Notification\n      color={color}\n      isLight={isLight}\n      hasDelete={hasDelete}\n      onDelete={handleClose}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{ pointerEvents: 'auto' }}\n    >\n      {/* Only the message is announced, not the close button Notification\n          renders ahead of its children. Danger and warning announce\n          themselves as an assertive alert, which a screen reader reliably\n          reads out even when it arrives with its text. The rest are announced\n          through the container's status region, which reads their text from\n          this span, so it carries no role of its own that would announce them\n          a second time. */}\n      {urgent ? (\n        <span role=\"alert\" aria-live=\"assertive\">\n          {message}\n        </span>\n      ) : (\n        <span ref={messageRef}>{message}</span>\n      )}\n    </Notification>\n  );\n};\n\n// The order NotificationContainer renders its stacks in: across the top of the\n// screen, then across the bottom.\nconst notificationStackOrder: readonly NotificationPosition[] = [\n  'top-left',\n  'top',\n  'top-right',\n  'bottom-left',\n  'bottom',\n  'bottom-right',\n];\n\n/**\n * Inline style that fixes a stack of notifications to its place on the screen.\n *\n * @function\n * @param {NotificationPosition} position - Where the stack sits.\n * @returns {React.CSSProperties} The stack's style.\n */\nconst notificationStackStyle = (\n  position: NotificationPosition\n): React.CSSProperties => {\n  const isBottom = position.startsWith('bottom');\n  const isCenter = position === 'top' || position === 'bottom';\n  const isRight = position.endsWith('right');\n\n  return {\n    position: 'fixed',\n    zIndex: 100,\n    display: 'flex',\n    flexDirection: isBottom ? 'column-reverse' : 'column',\n    gap: '0.75rem',\n    padding: '1rem',\n    pointerEvents: 'none',\n    maxWidth: '100%',\n    ...(isBottom ? { bottom: 0 } : { top: 0 }),\n    ...(isCenter\n      ? { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }\n      : isRight\n        ? { right: 0, alignItems: 'flex-end' }\n        : { left: 0, alignItems: 'flex-start' }),\n  };\n};\n\n/**\n * Container component for rendering programmatic notifications.\n * Place once at your app root to enable the notification API. A notification\n * shown with a `position` appears there, and one shown without goes to the\n * container's `position`, so the container renders a stack for each position\n * in use.\n *\n * It keeps a visually hidden `role=\"status\"` live region in the page from the\n * moment it mounts, even while nothing is showing, and announces every\n * notification other than `danger` and `warning` through it, a moment after\n * the notification appears. Those notifications carry no `role=\"status\"` of\n * their own, so `getByRole('status')` finds the region, not the notification.\n * The text stays in the region briefly, even if the notification closes in\n * the meantime, and while both are up the page holds two copies of it. A\n * polite notification that closes before its announcement is written, a\n * moment after it appears, isn't announced at all. `danger` and `warning`\n * notifications announce themselves as assertive alerts. The region is hidden\n * with inline styles, so it needs no stylesheet.\n *\n * @function\n * @param {{ position?: NotificationPosition }} props - Container props.\n * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.\n */\nexport const NotificationContainer: React.FC<{\n  /**\n   * Where a notification shown without a `position` of its own appears.\n   * Default: 'top-right'. When it changes, those notifications move without\n   * remounting, but one shown with its own `position` equal to the old or new\n   * value remounts and starts over as if it had just been shown.\n   */\n  position?: NotificationPosition;\n}> = ({ position = 'top-right' }) => {\n  // Starts from the notifications already showing instead of an empty list,\n  // then follows changes.\n  const items = useSyncExternalStore(\n    notification.subscribe,\n    getVisibleNotifications,\n    getServerNotifications\n  );\n  // A portal needs a document, and it has no server-rendered counterpart, so\n  // the server render and the hydrating one render nothing, and the container\n  // portals in from the render after hydration.\n  const isHydrated = useIsHydrated();\n  const resolveContainer = usePortalContainer();\n\n  // The notifications the status region announces. Danger and warning\n  // announce themselves.\n  const politeItems = useMemo(\n    () => items.filter(item => !isUrgentColor(item.options.color)),\n    [items]\n  );\n\n  // Each polite notification's message element, so the text the region\n  // announces is the text on screen, whatever the message renders.\n  const messageNodesRef = useRef(new Map<string, HTMLElement>());\n  const registerMessage = useCallback(\n    (id: string, node: HTMLElement | null) => {\n      if (node) {\n        messageNodesRef.current.set(id, node);\n      } else {\n        messageNodesRef.current.delete(id);\n      }\n    },\n    []\n  );\n  // StatusRegion only describes polite notifications that are on screen, and\n  // each of those registered its message element when it mounted. The\n  // fallback is for a notification announced without being rendered, should\n  // the container ever render fewer than it announces: a plain-text message\n  // still says itself, and anything else is skipped.\n  const describe = useCallback((item: NotificationInstance) => {\n    const node = messageNodesRef.current.get(item.id);\n    /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */\n    if (!node) {\n      const { message } = item.options;\n      return typeof message === 'string' ? message : null;\n    }\n    return spokenText(node);\n  }, []);\n\n  if (typeof document === 'undefined' || !isHydrated) {\n    return null;\n  }\n\n  const stacks = groupIntoPositionStacks(\n    items,\n    item => item.options.position,\n    position,\n    notificationStackOrder\n  );\n\n  const target = resolveContainer();\n  return createPortal(\n    <LocalePortalScope target={target}>\n      {stacks.map(stack => (\n        <div key={stack.key} style={notificationStackStyle(stack.position)}>\n          {stack.items.map(item => (\n            <NotificationItem\n              key={item.id}\n              instance={item}\n              onClose={notification.close}\n              registerMessage={registerMessage}\n            />\n          ))}\n        </div>\n      ))}\n      <StatusRegion items={politeItems} describe={describe} />\n    </LocalePortalScope>,\n    target\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Notification.js","sources":["../../../src/elements/Notification.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useCallback,\n  useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnUnstyledColor } from '../helpers/colorDeprecations';\nimport { groupIntoPositionStacks } from '../helpers/positionStacks';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { usePortalContainer } from '../helpers/portal';\nimport { LocalePortalScope } from '../helpers/LocaleProvider';\nimport { StatusRegion, spokenText } from '../helpers/statusRegion';\n\n/**\n * Props for the Notification component.\n */\nexport interface NotificationProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   */\n  color?: (typeof validColors)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Use the light color variant. */\n  isLight?: boolean;\n  /**\n   * Shows a close (delete) button in the notification. It renders\n   * `type=\"button\"`, so it does not submit a form around it.\n   *\n   * The notification also takes `has-delete`, which pads its end by\n   * `--bulma-notification-delete-padding-inline-end` so the text clears the\n   * button. That rule ships in bestax's stylesheets, not Bulma's, so an app\n   * styled by Bulma's CSS alone keeps Bulma's padding.\n   */\n  hasDelete?: boolean;\n  /** Callback fired when the delete button is clicked. */\n  onDelete?: () => void;\n  /** Content inside the notification. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.\n *\n * @function\n * @param {NotificationProps} props - Props for the Notification component.\n * @returns {JSX.Element} The rendered notification element.\n * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}\n */\nexport const Notification: React.FC<NotificationProps> = ({\n  className,\n  color,\n  textColor,\n  isLight,\n  hasDelete,\n  onDelete,\n  children,\n  ...props\n}) => {\n  warnUnstyledColor('Notification', color);\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    ...props,\n  });\n\n  const bulmaClasses = usePrefixedClassNames('notification', {\n    [`is-${color}`]: color && validColors.includes(color),\n    'is-light': isLight,\n    'has-delete': hasDelete,\n  });\n\n  const deleteClasses = usePrefixedClassNames('delete');\n\n  const notificationClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  return (\n    <div className={notificationClasses} {...rest}>\n      {hasDelete && (\n        <button\n          type=\"button\"\n          className={deleteClasses}\n          onClick={onDelete}\n          aria-label=\"Close notification\"\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n\n// Programmatic Notification API\n\n/** Screen positions where programmatic notifications can be displayed. */\nexport type NotificationPosition =\n  'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';\n\n/**\n * Options for showing a programmatic notification.\n */\nexport interface NotificationOptions {\n  /**\n   * The message to display.\n   *\n   * For a notification other than `danger` and `warning`, NotificationContainer\n   * announces the text the message renders, with an element's `aria-label`,\n   * or an image's `alt`, standing in for what's inside it, a break between\n   * block-level elements, and parts that are `aria-hidden`, `hidden` or\n   * inline-styled `display: none` left out. Other ways of naming or hiding\n   * content, such as `aria-labelledby`, CSS-generated content or a\n   * stylesheet's `display: none`, aren't followed, so a message that relies on\n   * them can be announced differently from what a screen reader would read.\n   */\n  message: string | React.ReactNode;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   */\n  color?: (typeof validColors)[number];\n  /** Use the light color variant. */\n  isLight?: boolean;\n  /** Duration in ms before auto-close. Default 3000. */\n  duration?: number;\n  /**\n   * Position on the screen. A notification shown without one goes to\n   * `NotificationContainer`'s `position`.\n   */\n  position?: NotificationPosition;\n  /**\n   * When true, notifications enter a FIFO queue and display one at a time,\n   * one queue across every `position`. Default false.\n   */\n  queue?: boolean;\n  /** Show a delete (close) button. Default true. */\n  hasDelete?: boolean;\n  /** Stay open until dismissed. */\n  indefinite?: boolean;\n  /** Pause auto-close timer on hover. Default true. */\n  pauseOnHover?: boolean;\n}\n\n/**\n * Internal representation of a notification instance.\n */\ninterface NotificationInstance {\n  /** Unique identifier for this notification. */\n  id: string;\n  /** Configuration options for the notification. */\n  options: NotificationOptions;\n}\n\nlet notificationId = 0;\nconst notificationListeners: Set<(items: NotificationInstance[]) => void> =\n  new Set();\nlet notifications: NotificationInstance[] = [];\n\n// Queue support\nlet queuedNotifications: NotificationInstance[] = [];\nlet currentQueuedNotification: NotificationInstance | null = null;\n\n// The server has nowhere to portal a notification to, and its copy of this\n// module is shared by every request, so server rendering reads an empty list.\n// Hydration reads it too, which keeps the first client render matching the\n// server's.\nconst noNotifications: NotificationInstance[] = [];\nconst getServerNotifications = () => noNotifications;\n\n// What a container shows right now: the stacked notifications, then the queued\n// one on screen. NotificationContainer renders from this rather than from\n// updates alone, so notifications raised before it mounted still appear. It is\n// replaced rather than mutated, and only when listeners are notified, because\n// useSyncExternalStore needs the same array back between changes. An empty\n// list is `noNotifications` itself, so an empty store reads the same snapshot\n// on the client as on the server, and a notify that leaves nothing showing\n// when nothing was showing doesn't render the container again.\nlet visibleNotifications: NotificationInstance[] = noNotifications;\nconst getVisibleNotifications = () => visibleNotifications;\n\nconst notifyNotificationListeners = () => {\n  const allVisible = [...notifications];\n  if (currentQueuedNotification) {\n    allVisible.push(currentQueuedNotification);\n  }\n  visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;\n  notificationListeners.forEach(listener => listener([...allVisible]));\n};\n\nconst processQueuedNotification = () => {\n  if (currentQueuedNotification || queuedNotifications.length === 0) return;\n  currentQueuedNotification = queuedNotifications.shift()!;\n  notifyNotificationListeners();\n};\n\n/**\n * Programmatic notification API for showing, closing, and managing notifications.\n *\n * @example\n * notification.success('File saved successfully');\n * notification.danger('Something went wrong', { duration: 5000 });\n */\nexport const notification = {\n  /**\n   * Show a notification with the given options.\n   * @param {NotificationOptions} options - Notification configuration.\n   * @returns {string} The unique ID of the created notification.\n   */\n  show: (options: NotificationOptions): string => {\n    const id = `notification-${++notificationId}`;\n    const instance = { id, options };\n\n    if (options.queue) {\n      queuedNotifications.push(instance);\n      processQueuedNotification();\n    } else {\n      notifications.push(instance);\n      notifyNotificationListeners();\n    }\n\n    return id;\n  },\n\n  /**\n   * Show a success notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  success: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'success', ...options });\n  },\n\n  /**\n   * Show a danger notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  danger: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'danger', ...options });\n  },\n\n  /**\n   * Show a warning notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  warning: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'warning', ...options });\n  },\n\n  /**\n   * Show an info notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  info: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'info', ...options });\n  },\n\n  /**\n   * Close a specific notification by ID.\n   * @param {string} id - The notification ID to close.\n   */\n  close: (id: string): void => {\n    if (currentQueuedNotification && currentQueuedNotification.id === id) {\n      currentQueuedNotification = null;\n      processQueuedNotification();\n    } else {\n      queuedNotifications = queuedNotifications.filter(n => n.id !== id);\n      notifications = notifications.filter(n => n.id !== id);\n    }\n    notifyNotificationListeners();\n  },\n\n  /** Close all notifications and clear the queue. */\n  closeAll: (): void => {\n    notifications = [];\n    queuedNotifications = [];\n    currentQueuedNotification = null;\n    notifyNotificationListeners();\n  },\n\n  /**\n   * Subscribe to notification state changes.\n   * @param {(items: NotificationInstance[]) => void} listener - Callback invoked on changes.\n   * @returns {() => void} Unsubscribe function.\n   */\n  subscribe: (\n    listener: (items: NotificationInstance[]) => void\n  ): (() => void) => {\n    notificationListeners.add(listener);\n    return () => notificationListeners.delete(listener);\n  },\n};\n\n/**\n * Whether a notification of this color announces itself as an alert, rather\n * than politely through NotificationContainer's status region.\n *\n * @function isUrgentColor\n * @param {NotificationOptions['color']} color - The notification's color.\n * @returns {boolean} True for `danger` and `warning`.\n */\nconst isUrgentColor = (color: NotificationOptions['color']): boolean =>\n  color === 'danger' || color === 'warning';\n\n/**\n * Single auto-dismissing notification item used by NotificationContainer.\n *\n * @function\n * @param {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.\n * @returns {JSX.Element} The rendered notification item.\n */\nconst NotificationItem: React.FC<{\n  instance: NotificationInstance;\n  onClose: (id: string) => void;\n  registerMessage: (id: string, node: HTMLElement | null) => void;\n}> = ({ instance, onClose, registerMessage }) => {\n  const {\n    message,\n    color,\n    isLight,\n    duration = 3000,\n    hasDelete = true,\n    indefinite = false,\n    pauseOnHover = true,\n  } = instance.options;\n\n  const [isPaused, setIsPaused] = useState(false);\n  const urgent = isUrgentColor(color);\n\n  const handleClose = useCallback(() => {\n    onClose(instance.id);\n  }, [onClose, instance.id]);\n\n  const messageRef = useCallback(\n    (node: HTMLElement | null) => {\n      registerMessage(instance.id, node);\n    },\n    [registerMessage, instance.id]\n  );\n\n  // Auto-close timer\n  useEffect(() => {\n    if (indefinite || duration === 0 || isPaused) return undefined;\n\n    const timer = setTimeout(handleClose, duration);\n    return () => clearTimeout(timer);\n  }, [duration, indefinite, isPaused, handleClose]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (pauseOnHover) setIsPaused(true);\n  }, [pauseOnHover]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (pauseOnHover) setIsPaused(false);\n  }, [pauseOnHover]);\n\n  return (\n    <Notification\n      color={color}\n      isLight={isLight}\n      hasDelete={hasDelete}\n      onDelete={handleClose}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{ pointerEvents: 'auto' }}\n    >\n      {/* Only the message is announced, not the close button Notification\n          renders ahead of its children. Danger and warning announce\n          themselves as an assertive alert, which a screen reader reliably\n          reads out even when it arrives with its text. The rest are announced\n          through the container's status region, which reads their text from\n          this span, so it carries no role of its own that would announce them\n          a second time. */}\n      {urgent ? (\n        <span role=\"alert\" aria-live=\"assertive\">\n          {message}\n        </span>\n      ) : (\n        <span ref={messageRef}>{message}</span>\n      )}\n    </Notification>\n  );\n};\n\n// The order NotificationContainer renders its stacks in: across the top of the\n// screen, then across the bottom.\nconst notificationStackOrder: readonly NotificationPosition[] = [\n  'top-left',\n  'top',\n  'top-right',\n  'bottom-left',\n  'bottom',\n  'bottom-right',\n];\n\n/**\n * Inline style that fixes a stack of notifications to its place on the screen.\n *\n * @function\n * @param {NotificationPosition} position - Where the stack sits.\n * @returns {React.CSSProperties} The stack's style.\n */\nconst notificationStackStyle = (\n  position: NotificationPosition\n): React.CSSProperties => {\n  const isBottom = position.startsWith('bottom');\n  const isCenter = position === 'top' || position === 'bottom';\n  const isRight = position.endsWith('right');\n\n  return {\n    position: 'fixed',\n    zIndex: 100,\n    display: 'flex',\n    flexDirection: isBottom ? 'column-reverse' : 'column',\n    gap: '0.75rem',\n    padding: '1rem',\n    pointerEvents: 'none',\n    maxWidth: '100%',\n    ...(isBottom ? { bottom: 0 } : { top: 0 }),\n    ...(isCenter\n      ? { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }\n      : isRight\n        ? { right: 0, alignItems: 'flex-end' }\n        : { left: 0, alignItems: 'flex-start' }),\n  };\n};\n\n/**\n * Container component for rendering programmatic notifications.\n * Place once at your app root to enable the notification API. A notification\n * shown with a `position` appears there, and one shown without goes to the\n * container's `position`, so the container renders a stack for each position\n * in use.\n *\n * It keeps a visually hidden `role=\"status\"` live region in the page from the\n * moment it mounts, even while nothing is showing, and announces every\n * notification other than `danger` and `warning` through it, a moment after\n * the notification appears. Those notifications carry no `role=\"status\"` of\n * their own, so `getByRole('status')` finds the region, not the notification.\n * The text stays in the region briefly, even if the notification closes in\n * the meantime, and while both are up the page holds two copies of it. A\n * polite notification that closes before its announcement is written, a\n * moment after it appears, isn't announced at all. `danger` and `warning`\n * notifications announce themselves as assertive alerts. The region is hidden\n * with inline styles, so it needs no stylesheet.\n *\n * @function\n * @param {{ position?: NotificationPosition }} props - Container props.\n * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.\n */\nexport const NotificationContainer: React.FC<{\n  /**\n   * Where a notification shown without a `position` of its own appears.\n   * Default: 'top-right'. When it changes, those notifications move without\n   * remounting, but one shown with its own `position` equal to the old or new\n   * value remounts and starts over as if it had just been shown.\n   */\n  position?: NotificationPosition;\n}> = ({ position = 'top-right' }) => {\n  // Starts from the notifications already showing instead of an empty list,\n  // then follows changes.\n  const items = useSyncExternalStore(\n    notification.subscribe,\n    getVisibleNotifications,\n    getServerNotifications\n  );\n  // A portal needs a document, and it has no server-rendered counterpart, so\n  // the server render and the hydrating one render nothing, and the container\n  // portals in from the render after hydration.\n  const isHydrated = useIsHydrated();\n  const resolveContainer = usePortalContainer();\n\n  // The notifications the status region announces. Danger and warning\n  // announce themselves.\n  const politeItems = useMemo(\n    () => items.filter(item => !isUrgentColor(item.options.color)),\n    [items]\n  );\n\n  // Each polite notification's message element, so the text the region\n  // announces is the text on screen, whatever the message renders.\n  const messageNodesRef = useRef(new Map<string, HTMLElement>());\n  const registerMessage = useCallback(\n    (id: string, node: HTMLElement | null) => {\n      if (node) {\n        messageNodesRef.current.set(id, node);\n      } else {\n        messageNodesRef.current.delete(id);\n      }\n    },\n    []\n  );\n  // StatusRegion only describes polite notifications that are on screen, and\n  // each of those registered its message element when it mounted. The\n  // fallback is for a notification announced without being rendered, should\n  // the container ever render fewer than it announces: a plain-text message\n  // still says itself, and anything else is skipped.\n  const describe = useCallback((item: NotificationInstance) => {\n    const node = messageNodesRef.current.get(item.id);\n    /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */\n    if (!node) {\n      const { message } = item.options;\n      return typeof message === 'string' ? message : null;\n    }\n    return spokenText(node);\n  }, []);\n\n  if (typeof document === 'undefined' || !isHydrated) {\n    return null;\n  }\n\n  const stacks = groupIntoPositionStacks(\n    items,\n    item => item.options.position,\n    position,\n    notificationStackOrder\n  );\n\n  const target = resolveContainer();\n  return createPortal(\n    <LocalePortalScope target={target}>\n      {stacks.map(stack => (\n        <div key={stack.key} style={notificationStackStyle(stack.position)}>\n          {stack.items.map(item => (\n            <NotificationItem\n              key={item.id}\n              instance={item}\n              onClose={notification.close}\n              registerMessage={registerMessage}\n            />\n          ))}\n        </div>\n      ))}\n      <StatusRegion items={politeItems} describe={describe} />\n    </LocalePortalScope>,\n    target\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/elements/OrderedList.js

@@ -1,4 +1,5 @@
 /* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { withSubComponents } from '../helpers/withSubComponents.js';

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

@@ -1 +1 @@
-{"version":3,"file":"OrderedList.js","sources":["../../../src/elements/OrderedList.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { ListItem } from './ListItem';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the OrderedList component.\n * @extraProp {'1' | 'a' | 'A' | 'i' | 'I'} [type='1'] - The numbering type for the list.\n * @extraProp {number} [start] - The starting number for the list.\n * @extraProp {boolean} [reversed] - Whether to reverse the list numbering.\n */\nexport interface OrderedListProps\n  extends\n    React.OlHTMLAttributes<HTMLOListElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** List items to render inside the list. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration.\n *\n * @function\n * @param {OrderedListProps} props - Props for the OrderedList component.\n * @returns {JSX.Element} The rendered ol element.\n */\nconst OrderedListComponent: React.FC<OrderedListProps> = ({\n  className,\n  textColor,\n  bgColor,\n  children,\n  ...props\n}) => {\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  } as BulmaClassesProps & typeof props);\n\n  const bulmaClasses = usePrefixedClassNames();\n  const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  return (\n    <ol className={listClasses || undefined} {...rest}>\n      {children}\n    </ol>\n  );\n};\n\nexport const OrderedList = withSubComponents(\n  OrderedListComponent,\n  { Item: ListItem },\n  'OrderedList'\n);\n"],"names":["_jsx"],"mappings":";;;;;;;AA8BA;;;;;;AAMG;AACH,MAAM,oBAAoB,GAA+B,CAAC,EACxD,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AAC2B,KAAA,CAAC;AAEtC,IAAA,MAAM,YAAY,GAAG,qBAAqB,EAAE;IAC5C,MAAM,WAAW,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAE3E,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,WAAW,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAC9C,QAAQ,EAAA,CACN;AAET,CAAC;AAEM,MAAM,WAAW,GAAG,iBAAiB,CAC1C,oBAAoB,EACpB,EAAE,IAAI,EAAE,QAAQ,EAAE,EAClB,aAAa;;"}
+{"version":3,"file":"OrderedList.js","sources":["../../../src/elements/OrderedList.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { ListItem } from './ListItem';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the OrderedList component.\n * @extraProp {'1' | 'a' | 'A' | 'i' | 'I'} [type='1'] - The numbering type for the list.\n * @extraProp {number} [start] - The starting number for the list.\n * @extraProp {boolean} [reversed] - Whether to reverse the list numbering.\n */\nexport interface OrderedListProps\n  extends\n    React.OlHTMLAttributes<HTMLOListElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** List items to render inside the list. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration.\n *\n * @function\n * @param {OrderedListProps} props - Props for the OrderedList component.\n * @returns {JSX.Element} The rendered ol element.\n */\nconst OrderedListComponent: React.FC<OrderedListProps> = ({\n  className,\n  textColor,\n  bgColor,\n  children,\n  ...props\n}) => {\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  } as BulmaClassesProps & typeof props);\n\n  const bulmaClasses = usePrefixedClassNames();\n  const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  return (\n    <ol className={listClasses || undefined} {...rest}>\n      {children}\n    </ol>\n  );\n};\n\nexport const OrderedList = withSubComponents(\n  OrderedListComponent,\n  { Item: ListItem },\n  'OrderedList'\n);\n"],"names":["_jsx"],"mappings":";;;;;;;;AA8BA;;;;;;AAMG;AACH,MAAM,oBAAoB,GAA+B,CAAC,EACxD,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AAC2B,KAAA,CAAC;AAEtC,IAAA,MAAM,YAAY,GAAG,qBAAqB,EAAE;IAC5C,MAAM,WAAW,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAE3E,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,WAAW,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAC9C,QAAQ,EAAA,CACN;AAET,CAAC;AAEM,MAAM,WAAW,GAAG,iBAAiB,CAC1C,oBAAoB,EACpB,EAAE,IAAI,EAAE,QAAQ,EAAE,EAClB,aAAa;;"}

package/dist/esm/elements/Paragraph.js

@@ -1,4 +1,5 @@
 /* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.js","sources":["../../../src/elements/Paragraph.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the Paragraph component.\n */\nexport interface ParagraphProps\n  extends\n    React.HTMLAttributes<HTMLParagraphElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Content to render inside the paragraph. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.\n *\n * @function\n * @param {ParagraphProps} props - Props for the Paragraph component.\n * @returns {JSX.Element} The rendered paragraph element.\n */\nexport const Paragraph: React.FC<ParagraphProps> = ({\n  className,\n  textColor,\n  bgColor,\n  children,\n  ...props\n}) => {\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  } as BulmaClassesProps & typeof props);\n\n  const bulmaClasses = usePrefixedClassNames();\n  const paragraphClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  return (\n    <p className={paragraphClasses || undefined} {...rest}>\n      {children}\n    </p>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAyBA;;;;;;AAMG;AACI,MAAM,SAAS,GAA6B,CAAC,EAClD,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AAC2B,KAAA,CAAC;AAEtC,IAAA,MAAM,YAAY,GAAG,qBAAqB,EAAE;IAC5C,MAAM,gBAAgB,GAAG,UAAU,CACjC,YAAY,EACZ,kBAAkB,EAClB,SAAS,CACV;AAED,IAAA,QACEA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,gBAAgB,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAClD,QAAQ,EAAA,CACP;AAER;;"}
+{"version":3,"file":"Paragraph.js","sources":["../../../src/elements/Paragraph.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the Paragraph component.\n */\nexport interface ParagraphProps\n  extends\n    React.HTMLAttributes<HTMLParagraphElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Content to render inside the paragraph. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.\n *\n * @function\n * @param {ParagraphProps} props - Props for the Paragraph component.\n * @returns {JSX.Element} The rendered paragraph element.\n */\nexport const Paragraph: React.FC<ParagraphProps> = ({\n  className,\n  textColor,\n  bgColor,\n  children,\n  ...props\n}) => {\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  } as BulmaClassesProps & typeof props);\n\n  const bulmaClasses = usePrefixedClassNames();\n  const paragraphClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  return (\n    <p className={paragraphClasses || undefined} {...rest}>\n      {children}\n    </p>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAyBA;;;;;;AAMG;AACI,MAAM,SAAS,GAA6B,CAAC,EAClD,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AAC2B,KAAA,CAAC;AAEtC,IAAA,MAAM,YAAY,GAAG,qBAAqB,EAAE;IAC5C,MAAM,gBAAgB,GAAG,UAAU,CACjC,YAAY,EACZ,kBAAkB,EAClB,SAAS,CACV;AAED,IAAA,QACEA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,gBAAgB,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAClD,QAAQ,EAAA,CACP;AAER;;"}

package/dist/esm/elements/Pre.js

@@ -1,4 +1,5 @@
 /* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Pre.js","sources":["../../../src/elements/Pre.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the Pre component.\n */\nexport interface PreProps\n  extends\n    React.HTMLAttributes<HTMLPreElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Preformatted content to render. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.\n *\n * @function\n * @param {PreProps} props - Props for the Pre component.\n * @returns {JSX.Element} The rendered pre element.\n */\nexport const Pre: React.FC<PreProps> = ({\n  className,\n  textColor,\n  bgColor,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  } as BulmaClassesProps & typeof props);\n\n  const bulmaClasses = usePrefixedClassNames();\n  const preClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  return (\n    <pre className={preClasses || undefined} {...rest}>\n      {children}\n    </pre>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAyBA;;;;;;AAMG;AACI,MAAM,GAAG,GAAuB,CAAC,EACtC,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AAC2B,KAAA,CAAC;AAEtC,IAAA,MAAM,YAAY,GAAG,qBAAqB,EAAE;IAC5C,MAAM,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAE1E,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAC9C,QAAQ,EAAA,CACL;AAEV;;"}
+{"version":3,"file":"Pre.js","sources":["../../../src/elements/Pre.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\n\n/**\n * Props for the Pre component.\n */\nexport interface PreProps\n  extends\n    React.HTMLAttributes<HTMLPreElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Preformatted content to render. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.\n *\n * @function\n * @param {PreProps} props - Props for the Pre component.\n * @returns {JSX.Element} The rendered pre element.\n */\nexport const Pre: React.FC<PreProps> = ({\n  className,\n  textColor,\n  bgColor,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  } as BulmaClassesProps & typeof props);\n\n  const bulmaClasses = usePrefixedClassNames();\n  const preClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  return (\n    <pre className={preClasses || undefined} {...rest}>\n      {children}\n    </pre>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAyBA;;;;;;AAMG;AACI,MAAM,GAAG,GAAuB,CAAC,EACtC,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AAC2B,KAAA,CAAC;AAEtC,IAAA,MAAM,YAAY,GAAG,qBAAqB,EAAE;IAC5C,MAAM,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC;AAE1E,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,IAAI,SAAS,EAAA,GAAM,IAAI,EAAA,QAAA,EAC9C,QAAQ,EAAA,CACL;AAEV;;"}

package/dist/esm/elements/Progress.js

@@ -1,4 +1,5 @@
 /* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sources":["../../../src/elements/Progress.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnUnstyledColor } from '../helpers/colorDeprecations';\n\n/**\n * Props for the Progress component.\n */\nexport interface ProgressProps\n  extends\n    React.ProgressHTMLAttributes<HTMLProgressElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Bulma color modifier for the progress bar (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.progress`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * bar renders unstyled; those log a console warning in development and will\n   * be removed from this union in the next major version.\n   */\n  color?: (typeof validColors)[number];\n  /** Size modifier for the progress bar. */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Current value of the progress bar. Leave it unset for an indeterminate\n   * bar, which sweeps across the track. Under `prefers-reduced-motion: reduce`\n   * that bar holds still (with bestax's CSS loaded), so it can read as\n   * partly filled.\n   */\n  value?: number;\n  /** Maximum value of the progress bar. */\n  max?: number;\n  /** Optional custom content inside the progress bar. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Progress` component displays a Bulma-styled progress bar.\n *\n * @function\n * @param {ProgressProps} props - Props for the Progress component.\n * @returns {JSX.Element} The rendered progress bar element.\n * @see {@link https://bulma.io/documentation/elements/progress/ | Bulma Progress documentation}\n */\nexport const Progress: React.FC<ProgressProps> = ({\n  className,\n  color,\n  size,\n  value,\n  max,\n  children,\n  ...props\n}) => {\n  warnUnstyledColor('Progress', color);\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    ...props,\n  });\n\n  const bulmaClasses = usePrefixedClassNames('progress', {\n    [`is-${color}`]: color && validColors.includes(color),\n    [`is-${size}`]: size,\n  });\n\n  const progressClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  return (\n    <progress className={progressClasses} value={value} max={max} {...rest}>\n      {children}\n    </progress>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AA2CA;;;;;;;AAOG;MACU,QAAQ,GAA4B,CAAC,EAChD,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,iBAAiB,CAAC,UAAU,EAAE,KAAK,CAAC;AAEpC;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;AAEF,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,UAAU,EAAE;AACrD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;AACrD,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI;AACrB,KAAA,CAAC;IAEF,MAAM,eAAe,GAAG,UAAU,CAChC,YAAY,EACZ,kBAAkB,EAClB,SAAS,CACV;AAED,IAAA,QACEA,GAAA,CAAA,UAAA,EAAA,EAAU,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,YACnE,QAAQ,EAAA,CACA;AAEf;;"}
+{"version":3,"file":"Progress.js","sources":["../../../src/elements/Progress.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnUnstyledColor } from '../helpers/colorDeprecations';\n\n/**\n * Props for the Progress component.\n */\nexport interface ProgressProps\n  extends\n    React.ProgressHTMLAttributes<HTMLProgressElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Bulma color modifier for the progress bar (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.progress`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * bar renders unstyled; those log a console warning in development and will\n   * be removed from this union in the next major version.\n   */\n  color?: (typeof validColors)[number];\n  /** Size modifier for the progress bar. */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Current value of the progress bar. Leave it unset for an indeterminate\n   * bar, which sweeps across the track. Under `prefers-reduced-motion: reduce`\n   * that bar holds still (with bestax's CSS loaded), so it can read as\n   * partly filled.\n   */\n  value?: number;\n  /** Maximum value of the progress bar. */\n  max?: number;\n  /** Optional custom content inside the progress bar. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Progress` component displays a Bulma-styled progress bar.\n *\n * @function\n * @param {ProgressProps} props - Props for the Progress component.\n * @returns {JSX.Element} The rendered progress bar element.\n * @see {@link https://bulma.io/documentation/elements/progress/ | Bulma Progress documentation}\n */\nexport const Progress: React.FC<ProgressProps> = ({\n  className,\n  color,\n  size,\n  value,\n  max,\n  children,\n  ...props\n}) => {\n  warnUnstyledColor('Progress', color);\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    ...props,\n  });\n\n  const bulmaClasses = usePrefixedClassNames('progress', {\n    [`is-${color}`]: color && validColors.includes(color),\n    [`is-${size}`]: size,\n  });\n\n  const progressClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  return (\n    <progress className={progressClasses} value={value} max={max} {...rest}>\n      {children}\n    </progress>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;AA2CA;;;;;;;AAOG;MACU,QAAQ,GAA4B,CAAC,EAChD,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,iBAAiB,CAAC,UAAU,EAAE,KAAK,CAAC;AAEpC;;AAEG;AACH,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;AAEF,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,UAAU,EAAE;AACrD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;AACrD,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI;AACrB,KAAA,CAAC;IAEF,MAAM,eAAe,GAAG,UAAU,CAChC,YAAY,EACZ,kBAAkB,EAClB,SAAS,CACV;AAED,IAAA,QACEA,GAAA,CAAA,UAAA,EAAA,EAAU,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,YACnE,QAAQ,EAAA,CACA;AAEf;;"}

package/dist/esm/elements/RingProgress.js

@@ -1,4 +1,5 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useEffect } from 'react';
 import { usePrefixedClassNames, classNames, prefixedClassNames } from '../helpers/classNames.js';

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

@@ -1 +1 @@
-{"version":3,"file":"RingProgress.js","sources":["../../../src/elements/RingProgress.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from 'react';\nimport {\n  classNames,\n  prefixedClassNames,\n  usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useClassPrefix } from '../helpers/Config';\nimport { useNumberFormat } from '../helpers/localeFormat';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnOnce } from '../helpers/devWarnings';\n\nconst validRingProgressColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n  'black',\n  'dark',\n  'light',\n  'white',\n] as const;\n/** The Bulma colors an arc takes, the ones `Progress` takes. */\nexport type RingProgressColor = (typeof validRingProgressColors)[number];\n\nconst validRingProgressSizes = ['small', 'medium', 'large'] as const;\n\n/** One colored part of a ring drawn in sections. */\nexport interface RingProgressSection {\n  /** Its size, in the same units as the ring's `max`. */\n  value: number;\n  /** Its color. Without one, it takes the ring's. */\n  color?: RingProgressColor;\n  /** What it is, such as \"Photos\", read in the ring's name with its share. */\n  label: string;\n}\n\n/**\n * Props for the RingProgress component. The helper props, the other\n * attributes and the `ref` land on its root `<div>`.\n *\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `<div>`.\n * @extraProp {string} [aria-labelledby] - The id of a visible heading that names the ring, in place of `label`. With `sections`, use `label`, since a name from here replaces the one that lists the values.\n * @extraProp {string} [aria-valuetext] - What a screen reader says for the value, such as \"7 of 10 tasks\". Without it, the value is read as a percentage.\n */\nexport interface RingProgressProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'role'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * How far along it is, from 0 to `max`. Values outside that range are\n   * drawn, and read, at the nearest end. Ignored with `sections`.\n   */\n  value?: number;\n  /** The value that fills the ring. */\n  max?: number;\n  /**\n   * Several values around one ring, in order clockwise from the top, each\n   * with its own color and label. The ring is then an image whose name\n   * writes them out, such as \"Storage: Documents 40%, Photos 15%\", since a\n   * screen reader can't take several values from one element. Inside a\n   * `LocaleProvider` with a `locale`, the shares are written as that locale\n   * writes a percentage. A total over `max` fills the ring and stops.\n   */\n  sections?: RingProgressSection[];\n  /**\n   * What it shows, such as \"Upload\" or \"Storage\". It names the ring, so it's\n   * read with the value. A development build warns when the ring has no\n   * name.\n   */\n  label?: string;\n  /**\n   * A level within a range, such as storage used or a score, rather than a\n   * task moving toward done: `role=\"meter\"` in place of `role=\"progressbar\"`.\n   * Ignored with `sections`.\n   */\n  isMeter?: boolean;\n  /** The arc's color, and the color of sections without one. */\n  color?: RingProgressColor;\n  /** The ring's size. */\n  size?: (typeof validRingProgressSizes)[number];\n  /** Rounds the ends of the arc. */\n  isRounded?: boolean;\n  /**\n   * What sits in the middle of the ring, such as the value as text. It's\n   * hidden from assistive tech, which reads the value from the ring itself,\n   * so the value isn't heard twice. Say anything more, such as \"7 of 10\n   * tasks\", in `aria-valuetext`.\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/** An arc's place on the ring, in percent of the way round. */\ninterface Arc {\n  start: number;\n  length: number;\n  color?: RingProgressColor;\n}\n\nconst clamp = (value: number, low: number, high: number) =>\n  Math.min(Math.max(value, low), high);\n\n/**\n * The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle.\n *\n * It's a `progressbar` for a task moving toward done, or a `meter` with\n * `isMeter` for a level within a range, named by `label`. With `sections`\n * it draws several values around one ring and is an image whose name lists\n * them. It has no state for work with no value: that's `Loader`.\n *\n * @function\n * @param {RingProgressProps} props - Props for the RingProgress component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root `<div>`.\n * @returns {JSX.Element} The rendered ring.\n *\n * @example\n * <RingProgress value={72} label=\"Upload\" color=\"success\">\n *   72%\n * </RingProgress>\n */\nexport const RingProgress = forwardRef<HTMLDivElement, RingProgressProps>(\n  (\n    {\n      className,\n      textColor,\n      bgColor,\n      value,\n      max = 100,\n      sections,\n      label,\n      isMeter,\n      color,\n      size,\n      isRounded,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      backgroundColor: bgColor,\n      ...props,\n    });\n\n    const named = Boolean(\n      label || rest['aria-label'] || rest['aria-labelledby']\n    );\n    const mixed = sections !== undefined && value !== undefined;\n    useEffect(() => {\n      if (!named) {\n        warnOnce(\n          'RingProgress:unnamed',\n          '[bestax-bulma] <RingProgress> has no accessible name. Pass ' +\n            'label, so a screen reader can say what the ring shows.'\n        );\n      }\n      if (mixed) {\n        warnOnce(\n          'RingProgress:value-and-sections',\n          '[bestax-bulma] <RingProgress> was given both value and sections. ' +\n            'It draws the sections and ignores value.'\n        );\n      }\n    }, [named, mixed]);\n\n    const total = max > 0 ? max : 100;\n    const share = (part: number) => (clamp(part, 0, total) / total) * 100;\n\n    // Each arc starts where the one before ended, and the last stops at the\n    // top, so a total over max fills the ring and no more.\n    const arcs: Arc[] = [];\n    if (sections) {\n      let start = 0;\n      for (const section of sections) {\n        const length = Math.min(share(section.value), 100 - start);\n        arcs.push({ start, length, color: section.color });\n        start += length;\n      }\n    } else {\n      arcs.push({ start: 0, length: share(value ?? 0) });\n    }\n\n    const rootClass = usePrefixedClassNames('ring-progress', {\n      [`is-${size}`]:\n        !!size && (validRingProgressSizes as readonly string[]).includes(size),\n      [`is-${color}`]:\n        !!color &&\n        (validRingProgressColors as readonly string[]).includes(color),\n      'is-rounded': !!isRounded,\n      'has-sections': !!sections,\n    });\n    const ringClass = usePrefixedClassNames('ring-progress-ring');\n    const trackClass = usePrefixedClassNames('ring-progress-track');\n    const arcClass = usePrefixedClassNames('ring-progress-arc');\n    const labelClass = usePrefixedClassNames('ring-progress-label');\n    // A section's color class, prefixed like the rest.\n    const classPrefix = useClassPrefix();\n    const formatNumber = useNumberFormat();\n    const writeShare = (share: number) =>\n      formatNumber\n        ? formatNumber(share / 100, { style: 'percent' })\n        : `${share}%`;\n\n    const roleProps = sections\n      ? {\n          role: 'img',\n          'aria-label': [\n            label || rest['aria-label'],\n            sections\n              .map(\n                (section, i) =>\n                  `${section.label} ${writeShare(Math.round(arcs[i].length))}`\n              )\n              .join(', '),\n          ]\n            .filter(Boolean)\n            .join(': '),\n        }\n      : {\n          role: isMeter ? 'meter' : 'progressbar',\n          'aria-valuenow': clamp(value ?? 0, 0, total),\n          'aria-valuemin': 0,\n          'aria-valuemax': total,\n          'aria-label': label || rest['aria-label'],\n        };\n\n    return (\n      <div\n        ref={ref}\n        className={classNames(rootClass, bulmaHelperClasses, className)}\n        {...rest}\n        {...roleProps}\n      >\n        <svg className={ringClass} viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n          <circle className={trackClass} cx=\"50\" cy=\"50\" r=\"42\" />\n          {arcs.map(\n            (arc, i) =>\n              arc.length > 0 && (\n                <circle\n                  key={i}\n                  className={classNames(\n                    arcClass,\n                    arc.color &&\n                      (validRingProgressColors as readonly string[]).includes(\n                        arc.color\n                      ) &&\n                      prefixedClassNames(classPrefix, `is-${arc.color}`)\n                  )}\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"42\"\n                  pathLength={100}\n                  style={\n                    {\n                      '--ring-progress-length': arc.length,\n                      '--ring-progress-start': arc.start,\n                    } as React.CSSProperties\n                  }\n                />\n              )\n          )}\n        </svg>\n        {children !== undefined && children !== null && (\n          // The ring's value is already read from its role, and not every\n          // browser keeps a meter's content out of the tree, so the middle\n          // is for the eye only.\n          <div className={labelClass} aria-hidden=\"true\">\n            {children}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nRingProgress.displayName = 'RingProgress';\n\nexport default RingProgress;\n"],"names":["clamp","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"RingProgress.js","sources":["../../../src/elements/RingProgress.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from 'react';\nimport {\n  classNames,\n  prefixedClassNames,\n  usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useClassPrefix } from '../helpers/Config';\nimport { useNumberFormat } from '../helpers/localeFormat';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnOnce } from '../helpers/devWarnings';\n\nconst validRingProgressColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n  'black',\n  'dark',\n  'light',\n  'white',\n] as const;\n/** The Bulma colors an arc takes, the ones `Progress` takes. */\nexport type RingProgressColor = (typeof validRingProgressColors)[number];\n\nconst validRingProgressSizes = ['small', 'medium', 'large'] as const;\n\n/** One colored part of a ring drawn in sections. */\nexport interface RingProgressSection {\n  /** Its size, in the same units as the ring's `max`. */\n  value: number;\n  /** Its color. Without one, it takes the ring's. */\n  color?: RingProgressColor;\n  /** What it is, such as \"Photos\", read in the ring's name with its share. */\n  label: string;\n}\n\n/**\n * Props for the RingProgress component. The helper props, the other\n * attributes and the `ref` land on its root `<div>`.\n *\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `<div>`.\n * @extraProp {string} [aria-labelledby] - The id of a visible heading that names the ring, in place of `label`. With `sections`, use `label`, since a name from here replaces the one that lists the values.\n * @extraProp {string} [aria-valuetext] - What a screen reader says for the value, such as \"7 of 10 tasks\". Without it, the value is read as a percentage.\n */\nexport interface RingProgressProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'role'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * How far along it is, from 0 to `max`. Values outside that range are\n   * drawn, and read, at the nearest end. Ignored with `sections`.\n   */\n  value?: number;\n  /** The value that fills the ring. */\n  max?: number;\n  /**\n   * Several values around one ring, in order clockwise from the top, each\n   * with its own color and label. The ring is then an image whose name\n   * writes them out, such as \"Storage: Documents 40%, Photos 15%\", since a\n   * screen reader can't take several values from one element. Inside a\n   * `LocaleProvider` with a `locale`, the shares are written as that locale\n   * writes a percentage. A total over `max` fills the ring and stops.\n   */\n  sections?: RingProgressSection[];\n  /**\n   * What it shows, such as \"Upload\" or \"Storage\". It names the ring, so it's\n   * read with the value. A development build warns when the ring has no\n   * name.\n   */\n  label?: string;\n  /**\n   * A level within a range, such as storage used or a score, rather than a\n   * task moving toward done: `role=\"meter\"` in place of `role=\"progressbar\"`.\n   * Ignored with `sections`.\n   */\n  isMeter?: boolean;\n  /** The arc's color, and the color of sections without one. */\n  color?: RingProgressColor;\n  /** The ring's size. */\n  size?: (typeof validRingProgressSizes)[number];\n  /** Rounds the ends of the arc. */\n  isRounded?: boolean;\n  /**\n   * What sits in the middle of the ring, such as the value as text. It's\n   * hidden from assistive tech, which reads the value from the ring itself,\n   * so the value isn't heard twice. Say anything more, such as \"7 of 10\n   * tasks\", in `aria-valuetext`.\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/** An arc's place on the ring, in percent of the way round. */\ninterface Arc {\n  start: number;\n  length: number;\n  color?: RingProgressColor;\n}\n\nconst clamp = (value: number, low: number, high: number) =>\n  Math.min(Math.max(value, low), high);\n\n/**\n * The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle.\n *\n * It's a `progressbar` for a task moving toward done, or a `meter` with\n * `isMeter` for a level within a range, named by `label`. With `sections`\n * it draws several values around one ring and is an image whose name lists\n * them. It has no state for work with no value: that's `Loader`.\n *\n * @function\n * @param {RingProgressProps} props - Props for the RingProgress component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root `<div>`.\n * @returns {JSX.Element} The rendered ring.\n *\n * @example\n * <RingProgress value={72} label=\"Upload\" color=\"success\">\n *   72%\n * </RingProgress>\n */\nexport const RingProgress = forwardRef<HTMLDivElement, RingProgressProps>(\n  (\n    {\n      className,\n      textColor,\n      bgColor,\n      value,\n      max = 100,\n      sections,\n      label,\n      isMeter,\n      color,\n      size,\n      isRounded,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      backgroundColor: bgColor,\n      ...props,\n    });\n\n    const named = Boolean(\n      label || rest['aria-label'] || rest['aria-labelledby']\n    );\n    const mixed = sections !== undefined && value !== undefined;\n    useEffect(() => {\n      if (!named) {\n        warnOnce(\n          'RingProgress:unnamed',\n          '[bestax-bulma] <RingProgress> has no accessible name. Pass ' +\n            'label, so a screen reader can say what the ring shows.'\n        );\n      }\n      if (mixed) {\n        warnOnce(\n          'RingProgress:value-and-sections',\n          '[bestax-bulma] <RingProgress> was given both value and sections. ' +\n            'It draws the sections and ignores value.'\n        );\n      }\n    }, [named, mixed]);\n\n    const total = max > 0 ? max : 100;\n    const share = (part: number) => (clamp(part, 0, total) / total) * 100;\n\n    // Each arc starts where the one before ended, and the last stops at the\n    // top, so a total over max fills the ring and no more.\n    const arcs: Arc[] = [];\n    if (sections) {\n      let start = 0;\n      for (const section of sections) {\n        const length = Math.min(share(section.value), 100 - start);\n        arcs.push({ start, length, color: section.color });\n        start += length;\n      }\n    } else {\n      arcs.push({ start: 0, length: share(value ?? 0) });\n    }\n\n    const rootClass = usePrefixedClassNames('ring-progress', {\n      [`is-${size}`]:\n        !!size && (validRingProgressSizes as readonly string[]).includes(size),\n      [`is-${color}`]:\n        !!color &&\n        (validRingProgressColors as readonly string[]).includes(color),\n      'is-rounded': !!isRounded,\n      'has-sections': !!sections,\n    });\n    const ringClass = usePrefixedClassNames('ring-progress-ring');\n    const trackClass = usePrefixedClassNames('ring-progress-track');\n    const arcClass = usePrefixedClassNames('ring-progress-arc');\n    const labelClass = usePrefixedClassNames('ring-progress-label');\n    // A section's color class, prefixed like the rest.\n    const classPrefix = useClassPrefix();\n    const formatNumber = useNumberFormat();\n    const writeShare = (share: number) =>\n      formatNumber\n        ? formatNumber(share / 100, { style: 'percent' })\n        : `${share}%`;\n\n    const roleProps = sections\n      ? {\n          role: 'img',\n          'aria-label': [\n            label || rest['aria-label'],\n            sections\n              .map(\n                (section, i) =>\n                  `${section.label} ${writeShare(Math.round(arcs[i].length))}`\n              )\n              .join(', '),\n          ]\n            .filter(Boolean)\n            .join(': '),\n        }\n      : {\n          role: isMeter ? 'meter' : 'progressbar',\n          'aria-valuenow': clamp(value ?? 0, 0, total),\n          'aria-valuemin': 0,\n          'aria-valuemax': total,\n          'aria-label': label || rest['aria-label'],\n        };\n\n    return (\n      <div\n        ref={ref}\n        className={classNames(rootClass, bulmaHelperClasses, className)}\n        {...rest}\n        {...roleProps}\n      >\n        <svg className={ringClass} viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n          <circle className={trackClass} cx=\"50\" cy=\"50\" r=\"42\" />\n          {arcs.map(\n            (arc, i) =>\n              arc.length > 0 && (\n                <circle\n                  key={i}\n                  className={classNames(\n                    arcClass,\n                    arc.color &&\n                      (validRingProgressColors as readonly string[]).includes(\n                        arc.color\n                      ) &&\n                      prefixedClassNames(classPrefix, `is-${arc.color}`)\n                  )}\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"42\"\n                  pathLength={100}\n                  style={\n                    {\n                      '--ring-progress-length': arc.length,\n                      '--ring-progress-start': arc.start,\n                    } as React.CSSProperties\n                  }\n                />\n              )\n          )}\n        </svg>\n        {children !== undefined && children !== null && (\n          // The ring's value is already read from its role, and not every\n          // browser keeps a meter's content out of the tree, so the middle\n          // is for the eye only.\n          <div className={labelClass} aria-hidden=\"true\">\n            {children}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nRingProgress.displayName = 'RingProgress';\n\nexport default RingProgress;\n"],"names":["clamp","_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/elements/Skeleton.js

@@ -1,4 +1,5 @@
 /* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../src/elements/Skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\n\n/**\n * Props for the Skeleton component.\n */\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Skeleton variant: block (single block) or lines. */\n  variant?: 'block' | 'lines';\n  /** Number of lines (only for `lines` variant). */\n  lines?: number;\n  /** Content inside the block (only for block variant). */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.\n *\n * @function\n * @param {SkeletonProps} props - Props for the Skeleton component.\n * @returns {JSX.Element} The rendered skeleton element.\n *\n * @example\n * // Block skeleton\n * <Skeleton />\n *\n * @example\n * // Multi-line skeleton\n * <Skeleton variant=\"lines\" lines={5} />\n */\nexport const Skeleton: React.FC<SkeletonProps> = ({\n  className,\n  variant = 'block',\n  lines = 3,\n  children,\n  ...props\n}) => {\n  const linesClass = usePrefixedClassNames('skeleton-lines');\n  const blockClass = usePrefixedClassNames('skeleton-block');\n\n  if (variant === 'lines') {\n    return (\n      <div className={classNames(linesClass, className)} {...props}>\n        {Array.from({ length: lines }).map((_, i) => (\n          <div key={i} />\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div className={classNames(blockClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;AAiBA;;;;;;;;;;;;;;AAcG;MACU,QAAQ,GAA4B,CAAC,EAChD,SAAS,EACT,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,CAAC,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,gBAAgB,CAAC;AAC1D,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,gBAAgB,CAAC;AAE1D,IAAA,IAAI,OAAO,KAAK,OAAO,EAAE;AACvB,QAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EACzD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACtCA,eAAU,CAAC,CAAI,CAChB,CAAC,EAAA,CACE;IAEV;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,QAAA,EACzD,QAAQ,EAAA,CACL;AAEV;;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../src/elements/Skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\n\n/**\n * Props for the Skeleton component.\n */\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Skeleton variant: block (single block) or lines. */\n  variant?: 'block' | 'lines';\n  /** Number of lines (only for `lines` variant). */\n  lines?: number;\n  /** Content inside the block (only for block variant). */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.\n *\n * @function\n * @param {SkeletonProps} props - Props for the Skeleton component.\n * @returns {JSX.Element} The rendered skeleton element.\n *\n * @example\n * // Block skeleton\n * <Skeleton />\n *\n * @example\n * // Multi-line skeleton\n * <Skeleton variant=\"lines\" lines={5} />\n */\nexport const Skeleton: React.FC<SkeletonProps> = ({\n  className,\n  variant = 'block',\n  lines = 3,\n  children,\n  ...props\n}) => {\n  const linesClass = usePrefixedClassNames('skeleton-lines');\n  const blockClass = usePrefixedClassNames('skeleton-block');\n\n  if (variant === 'lines') {\n    return (\n      <div className={classNames(linesClass, className)} {...props}>\n        {Array.from({ length: lines }).map((_, i) => (\n          <div key={i} />\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div className={classNames(blockClass, className)} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAiBA;;;;;;;;;;;;;;AAcG;MACU,QAAQ,GAA4B,CAAC,EAChD,SAAS,EACT,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,CAAC,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,gBAAgB,CAAC;AAC1D,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,gBAAgB,CAAC;AAE1D,IAAA,IAAI,OAAO,KAAK,OAAO,EAAE;AACvB,QAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EACzD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACtCA,eAAU,CAAC,CAAI,CAChB,CAAC,EAAA,CACE;IAEV;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,QAAA,EACzD,QAAQ,EAAA,CACL;AAEV;;"}