@allxsmith/bestax-bulma 5.57.4 → 5.58.0

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

@@ -1 +1 @@
-{"version":3,"file":"Avatars.js","sources":["../../../src/components/Avatars.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { flattenChildren } from '../helpers/flattenChildren';\nimport { useNumberFormat } from '../helpers/localeFormat';\nimport { Avatar, AvatarProps } from './Avatar';\n\n/** Valid overlap spacing values for the Avatars component. */\nexport type AvatarsSpacing = 'sm' | 'md' | 'lg';\n\n/**\n * Props for the Avatars component.\n */\nexport interface AvatarsProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Show only the first `max` children, replacing the overflow with a \"+N\" surplus avatar. A single overflow avatar is shown directly rather than as a pointless \"+1\". */\n  max?: number;\n  /** Uniform size applied to every child `Avatar` (and the surplus avatar). */\n  size?: AvatarProps['size'];\n  /** Uniform shape applied to every child `Avatar` (and the surplus avatar); a child's own `shape` wins when this is unset. */\n  shape?: AvatarProps['shape'];\n  /** Space between avatars: a preset or a pixel `number`. The overlap distance, or the gap when `spaced`. */\n  spacing?: AvatarsSpacing | number;\n  /** Lay the avatars out side by side (non-overlapping), using `spacing` as the gap. */\n  spaced?: boolean;\n  /** Builds the surplus avatar's accessible name from the hidden count, for localization. Default: `` `${count} more` ``. Inside a `LocaleProvider` with a `locale`, the visible `+count` and the count in the default name are written the way that locale writes numbers. */\n  surplusLabel?: (count: number) => string;\n  /** `Avatar` elements to render inside the group. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Avatars` component renders an overlapping/stacked group of `Avatar`s, the \"members\" list pattern.\n *\n * @function\n * @param {AvatarsProps} props - Props for the Avatars component.\n * @returns {JSX.Element} The rendered avatars group.\n *\n * @example\n * <Avatars max={3} size=\"48x48\">\n *   {members.map(m => <Avatar key={m.id} src={m.photo} name={m.name} />)}\n * </Avatars>\n */\nconst AvatarsComponent: React.FC<AvatarsProps> = ({\n  className,\n  max,\n  size,\n  shape,\n  spacing = 'md',\n  spaced = false,\n  surplusLabel,\n  style,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n  const formatNumber = useNumberFormat();\n\n  // A preset spacing maps to a class; a numeric spacing sets the CSS var inline\n  // (mirrors Sidebar's inline --bulma-* width var).\n  const isPresetSpacing = typeof spacing === 'string';\n  const avatarsClasses = usePrefixedClassNames('avatars', {\n    [`is-spacing-${spacing}`]: isPresetSpacing,\n    'is-spaced': spaced,\n  });\n  const spacingStyle: React.CSSProperties | undefined =\n    typeof spacing === 'number'\n      ? ({ '--bulma-avatars-spacing': `${spacing}px` } as React.CSSProperties)\n      : undefined;\n\n  const surplusClass = usePrefixedClassNames('is-surplus');\n\n  const combinedClasses = classNames(\n    avatarsClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // Fragments are opened up, so the avatars inside one count toward `max` and\n  // take the group's size and shape one by one. Text between them is dropped.\n  const childArray = flattenChildren(children).filter(\n    (child): child is React.ReactElement<AvatarProps> =>\n      React.isValidElement(child)\n  );\n\n  const maxCount =\n    typeof max === 'number' && Number.isInteger(max) && max >= 0\n      ? max\n      : undefined;\n  const overshoot = maxCount !== undefined ? childArray.length - maxCount : 0;\n  // A \"+1\" surplus bubble occupies the same slot the hidden avatar would, so\n  // only collapse into a surplus when it stands in for two or more avatars; a\n  // single overflow avatar is shown directly.\n  const clamp = maxCount !== undefined && overshoot >= 2;\n  const visibleChildren = clamp ? childArray.slice(0, maxCount) : childArray;\n  const overflowCount = clamp ? overshoot : 0;\n\n  return (\n    <div\n      className={combinedClasses}\n      style={{ ...spacingStyle, ...style }}\n      {...rest}\n    >\n      {visibleChildren.map(child =>\n        // Conditional-spread so an unset group size/shape doesn't clobber a\n        // child that set its own.\n        React.cloneElement(child, {\n          ...(size !== undefined ? { size } : {}),\n          ...(shape !== undefined ? { shape } : {}),\n        })\n      )}\n      {overflowCount > 0 && (\n        <Avatar\n          initials={\n            formatNumber\n              ? formatNumber(overflowCount, { signDisplay: 'always' })\n              : `+${overflowCount}`\n          }\n          alt={\n            // `||` (not a plain ternary): an empty string from surplusLabel\n            // would make the bubble decorative (alt=\"\") and hide the count\n            // from assistive tech — fall back to the default label instead.\n            surplusLabel?.(overflowCount) ||\n            `${formatNumber ? formatNumber(overflowCount) : overflowCount} more`\n          }\n          size={size}\n          shape={shape}\n          className={surplusClass}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const Avatars = withSubComponents(\n  AvatarsComponent,\n  { Avatar },\n  'Avatars'\n);\n\nexport default Avatars;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Avatars.js","sources":["../../../src/components/Avatars.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { flattenChildren } from '../helpers/flattenChildren';\nimport { useScopedNumberFormat } from '../helpers/localeFormat';\nimport { Avatar, AvatarProps } from './Avatar';\n\n/** Valid overlap spacing values for the Avatars component. */\nexport type AvatarsSpacing = 'sm' | 'md' | 'lg';\n\n/**\n * Props for the Avatars component.\n */\nexport interface AvatarsProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    Omit<BulmaClassesProps, 'backgroundColor' | 'color'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Show only the first `max` children, replacing the overflow with a \"+N\" surplus avatar. A single overflow avatar is shown directly rather than as a pointless \"+1\". */\n  max?: number;\n  /** Uniform size applied to every child `Avatar` (and the surplus avatar). */\n  size?: AvatarProps['size'];\n  /** Uniform shape applied to every child `Avatar` (and the surplus avatar); a child's own `shape` wins when this is unset. */\n  shape?: AvatarProps['shape'];\n  /** Space between avatars: a preset or a pixel `number`. The overlap distance, or the gap when `spaced`. */\n  spacing?: AvatarsSpacing | number;\n  /** Lay the avatars out side by side (non-overlapping), using `spacing` as the gap. */\n  spaced?: boolean;\n  /** Builds the surplus avatar's accessible name from the hidden count, for localization. Default: `` `${count} more` ``. Inside a `LocaleProvider` with a `locale`, the visible `+count` and the count in the default name are written the way that locale writes numbers. */\n  surplusLabel?: (count: number) => string;\n  /** `Avatar` elements to render inside the group. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Avatars` component renders an overlapping/stacked group of `Avatar`s, the \"members\" list pattern.\n *\n * @function\n * @param {AvatarsProps} props - Props for the Avatars component.\n * @returns {JSX.Element} The rendered avatars group.\n *\n * @example\n * <Avatars max={3} size=\"48x48\">\n *   {members.map(m => <Avatar key={m.id} src={m.photo} name={m.name} />)}\n * </Avatars>\n */\nconst AvatarsComponent: React.FC<AvatarsProps> = ({\n  className,\n  max,\n  size,\n  shape,\n  spacing = 'md',\n  spaced = false,\n  surplusLabel,\n  style,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n  const formatNumber = useScopedNumberFormat();\n\n  // A preset spacing maps to a class; a numeric spacing sets the CSS var inline\n  // (mirrors Sidebar's inline --bulma-* width var).\n  const isPresetSpacing = typeof spacing === 'string';\n  const avatarsClasses = usePrefixedClassNames('avatars', {\n    [`is-spacing-${spacing}`]: isPresetSpacing,\n    'is-spaced': spaced,\n  });\n  const spacingStyle: React.CSSProperties | undefined =\n    typeof spacing === 'number'\n      ? ({ '--bulma-avatars-spacing': `${spacing}px` } as React.CSSProperties)\n      : undefined;\n\n  const surplusClass = usePrefixedClassNames('is-surplus');\n\n  const combinedClasses = classNames(\n    avatarsClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // Fragments are opened up, so the avatars inside one count toward `max` and\n  // take the group's size and shape one by one. Text between them is dropped.\n  const childArray = flattenChildren(children).filter(\n    (child): child is React.ReactElement<AvatarProps> =>\n      React.isValidElement(child)\n  );\n\n  const maxCount =\n    typeof max === 'number' && Number.isInteger(max) && max >= 0\n      ? max\n      : undefined;\n  const overshoot = maxCount !== undefined ? childArray.length - maxCount : 0;\n  // A \"+1\" surplus bubble occupies the same slot the hidden avatar would, so\n  // only collapse into a surplus when it stands in for two or more avatars; a\n  // single overflow avatar is shown directly.\n  const clamp = maxCount !== undefined && overshoot >= 2;\n  const visibleChildren = clamp ? childArray.slice(0, maxCount) : childArray;\n  const overflowCount = clamp ? overshoot : 0;\n\n  return (\n    <div\n      className={combinedClasses}\n      style={{ ...spacingStyle, ...style }}\n      {...rest}\n    >\n      {visibleChildren.map(child =>\n        // Conditional-spread so an unset group size/shape doesn't clobber a\n        // child that set its own.\n        React.cloneElement(child, {\n          ...(size !== undefined ? { size } : {}),\n          ...(shape !== undefined ? { shape } : {}),\n        })\n      )}\n      {overflowCount > 0 && (\n        <Avatar\n          initials={\n            formatNumber\n              ? formatNumber(overflowCount, { signDisplay: 'always' })\n              : `+${overflowCount}`\n          }\n          alt={\n            // `||` (not a plain ternary): an empty string from surplusLabel\n            // would make the bubble decorative (alt=\"\") and hide the count\n            // from assistive tech — fall back to the default label instead.\n            surplusLabel?.(overflowCount) ||\n            `${formatNumber ? formatNumber(overflowCount) : overflowCount} more`\n          }\n          size={size}\n          shape={shape}\n          className={surplusClass}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const Avatars = withSubComponents(\n  AvatarsComponent,\n  { Avatar },\n  'Avatars'\n);\n\nexport default Avatars;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/Badge.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
-import { useNumberFormat } from '../helpers/localeFormat.js';
+import { useScopedNumberFormat } from '../helpers/localeFormat.js';
 
 const badgeColors = [
     'primary',
@@ -52,7 +52,7 @@ const Badge = ({ className, badgeClassName, content, max = 99, dot = false, show
     // A negative or non-integer max is nonsensical; fall back to the default
     // rather than render e.g. "-1+" (mirrors Avatars' max sanitization).
     const sanitizedMax = Number.isInteger(max) && max >= 0 ? max : 99;
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const displayValue = useMemo(() => {
         if (dot || !hasContent)
             return undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useNumberFormat } from '../helpers/localeFormat';\n\nconst badgeColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n  'black',\n  'dark',\n  'light',\n  'white',\n] as const;\n\n/** Valid color values for the Badge component. */\nexport type BadgeColor = (typeof badgeColors)[number];\n\n/** Valid corner position values for the Badge component. */\nexport type BadgePosition =\n  'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n\n/** Valid overlap adjustment values for the Badge component. */\nexport type BadgeOverlap = 'circle' | 'square';\n\n/**\n * Props for the Badge component.\n */\nexport interface BadgeProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'content'>,\n    Omit<BulmaClassesProps, 'color'> {\n  /** Additional CSS classes for the root — the wrapper when `children` are present, else the badge pill. */\n  className?: string;\n  /** Additional CSS classes applied to the badge pill itself (unprefixed, like `Tooltip`'s `tooltipClassName`). */\n  badgeClassName?: string;\n  /** Count, short text, or a custom node to display; omit with `dot` for a plain dot. `max`/`showZero` apply only to numeric content. A numeric count is written the way the `locale` of a `LocaleProvider` around it writes numbers. */\n  content?: React.ReactNode;\n  /** Numeric `content` above this renders as `\"{max}+\"`. A negative or non-integer value falls back to the default. */\n  max?: number;\n  /** Render a small dot with no content. */\n  dot?: boolean;\n  /** Show the badge when `content` is `0`. Default `false`. */\n  showZero?: boolean;\n  /** Status color. Default `'danger'`. */\n  color?: BadgeColor;\n  /** Corner to overlay the badge on, relative to `children`. Ignored for standalone badges (no `children`). */\n  position?: BadgePosition;\n  /** Nudges the offset for a round (`'circle'`) vs rectangular (`'square'`) child. Ignored for standalone badges (no `children`). */\n  overlap?: BadgeOverlap;\n  /** Processing/pulse animation; no-ops under `prefers-reduced-motion: reduce`. */\n  pulse?: boolean;\n  /** Hide the badge pill without unmounting it (the wrapper and `children` stay visible). */\n  invisible?: boolean;\n  /** The element the badge overlays. Omit to render a standalone badge. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Badge` component is a small status/count indicator overlaid on the corner of another element, or rendered standalone.\n *\n * @function\n * @param {BadgeProps} props - Props for the Badge component.\n * @returns {JSX.Element | null} The rendered badge (and children, if provided).\n *\n * @example\n * <Badge dot color=\"success\" overlap=\"circle\">\n *   <Avatar src=\"/users/ada.jpg\" name=\"Ada\" />\n * </Badge>\n * @example\n * <Badge content={128} max={99} color=\"danger\">\n *   <Icon name=\"bell\" />\n * </Badge>\n */\nexport const Badge: React.FC<BadgeProps> = ({\n  className,\n  badgeClassName,\n  content,\n  max = 99,\n  dot = false,\n  showZero = false,\n  color = 'danger',\n  position = 'top-right',\n  overlap = 'square',\n  pulse = false,\n  invisible = false,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  const hasChildren = children != null && children !== false;\n\n  const isZero = typeof content === 'number' && content === 0;\n  const hasContent =\n    content != null &&\n    content !== false &&\n    content !== true &&\n    content !== '' &&\n    (!isZero || showZero);\n  // A hidden zero keeps the pill mounted (visually hidden via .is-zero) so the\n  // role=\"status\" live region exists before a 0 -> 1 change — mutating text in\n  // an existing region is reliably announced, inserting an already-populated\n  // region is not.\n  const zeroPlaceholder = isZero && !showZero && !dot && !invisible;\n  const shouldRender = dot || hasContent || invisible || zeroPlaceholder;\n\n  // A negative or non-integer max is nonsensical; fall back to the default\n  // rather than render e.g. \"-1+\" (mirrors Avatars' max sanitization).\n  const sanitizedMax = Number.isInteger(max) && max >= 0 ? max : 99;\n  const formatNumber = useNumberFormat();\n\n  const displayValue = useMemo<React.ReactNode>(() => {\n    if (dot || !hasContent) return undefined;\n    // max only applies to numeric content; any other node renders verbatim.\n    if (typeof content === 'number') {\n      const write = formatNumber ?? String;\n      return content > sanitizedMax\n        ? `${write(sanitizedMax)}+`\n        : write(content);\n    }\n    return content;\n  }, [dot, hasContent, content, sanitizedMax, formatNumber]);\n\n  // Only primitive content produces a meaningful aria-label; a custom node\n  // supplies its own accessible text, so we leave role=\"status\" unlabeled.\n  const ariaLabel =\n    typeof displayValue === 'string' || typeof displayValue === 'number'\n      ? String(displayValue)\n      : undefined;\n\n  // Both prefixed-classname hooks stay above the early returns (Rules of Hooks).\n  const wrapperClass = usePrefixedClassNames('badge-wrapper');\n  const badgeClasses = usePrefixedClassNames('badge', {\n    [`is-${color}`]: !!color && badgeColors.includes(color),\n    // Corner position / overlap only mean anything inside a wrapper; emitting\n    // them on a standalone badge shifts it out of normal flow via the transform.\n    [`is-${position}`]: !!position && hasChildren,\n    [`is-overlap-${overlap}`]: !!overlap && hasChildren,\n    'is-standalone': !hasChildren,\n    'is-dot': dot,\n    'is-pulse': pulse,\n    'is-invisible': invisible,\n    'is-zero': zeroPlaceholder,\n  });\n\n  // badgeClassName is a plain (unprefixed) slot merged onto the pill, mirroring\n  // Tooltip's tooltipClassName. Standalone badges have no wrapper, so the pill\n  // is the root and takes className/helpers/rest directly.\n  const pillClass = hasChildren\n    ? classNames(badgeClasses, badgeClassName)\n    : classNames(badgeClasses, badgeClassName, bulmaHelperClasses, className);\n\n  const a11yProps = dot\n    ? { 'aria-hidden': true as const }\n    : {\n        role: 'status' as const,\n        ...(ariaLabel !== undefined ? { 'aria-label': ariaLabel } : {}),\n      };\n\n  const indicator = shouldRender ? (\n    <span className={pillClass} {...a11yProps} {...(hasChildren ? {} : rest)}>\n      {!dot && displayValue}\n    </span>\n  ) : null;\n\n  if (!hasChildren) {\n    return indicator;\n  }\n\n  // Always render the wrapper when there are children so the root keeps\n  // className/helpers/rest (data-testid, id, onClick, ...) even when the badge\n  // itself is hidden.\n  return (\n    <span\n      className={classNames(wrapperClass, bulmaHelperClasses, className)}\n      {...rest}\n    >\n      {children}\n      {indicator}\n    </span>\n  );\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;AAKA,MAAM,WAAW,GAAG;IAClB,SAAS;IACT,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;IACR,OAAO;IACP,MAAM;IACN,OAAO;IACP,OAAO;CACC;AA6CV;;;;;;;;;;;;;;;AAeG;MACU,KAAK,GAAyB,CAAC,EAC1C,SAAS,EACT,cAAc,EACd,OAAO,EACP,GAAG,GAAG,EAAE,EACR,GAAG,GAAG,KAAK,EACX,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,QAAQ,EAChB,QAAQ,GAAG,WAAW,EACtB,OAAO,GAAG,QAAQ,EAClB,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;IAE3D,MAAM,WAAW,GAAG,QAAQ,IAAI,IAAI,IAAI,QAAQ,KAAK,KAAK;IAE1D,MAAM,MAAM,GAAG,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,CAAC;AAC3D,IAAA,MAAM,UAAU,GACd,OAAO,IAAI,IAAI;AACf,QAAA,OAAO,KAAK,KAAK;AACjB,QAAA,OAAO,KAAK,IAAI;AAChB,QAAA,OAAO,KAAK,EAAE;AACd,SAAC,CAAC,MAAM,IAAI,QAAQ,CAAC;;;;;AAKvB,IAAA,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG,IAAI,CAAC,SAAS;IACjE,MAAM,YAAY,GAAG,GAAG,IAAI,UAAU,IAAI,SAAS,IAAI,eAAe;;;IAItE,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG,EAAE;AACjE,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AAEtC,IAAA,MAAM,YAAY,GAAG,OAAO,CAAkB,MAAK;QACjD,IAAI,GAAG,IAAI,CAAC,UAAU;AAAE,YAAA,OAAO,SAAS;;AAExC,QAAA,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;AAC/B,YAAA,MAAM,KAAK,GAAG,YAAY,IAAI,MAAM;YACpC,OAAO,OAAO,GAAG;AACf,kBAAE,CAAA,EAAG,KAAK,CAAC,YAAY,CAAC,CAAA,CAAA;AACxB,kBAAE,KAAK,CAAC,OAAO,CAAC;QACpB;AACA,QAAA,OAAO,OAAO;AAChB,IAAA,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;;;IAI1D,MAAM,SAAS,GACb,OAAO,YAAY,KAAK,QAAQ,IAAI,OAAO,YAAY,KAAK;AAC1D,UAAE,MAAM,CAAC,YAAY;UACnB,SAAS;;AAGf,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,eAAe,CAAC;AAC3D,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,EAAE;AAClD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,KAAK,IAAI,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;;;QAGvD,CAAC,CAAA,GAAA,EAAM,QAAQ,CAAA,CAAE,GAAG,CAAC,CAAC,QAAQ,IAAI,WAAW;QAC7C,CAAC,CAAA,WAAA,EAAc,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,OAAO,IAAI,WAAW;QACnD,eAAe,EAAE,CAAC,WAAW;AAC7B,QAAA,QAAQ,EAAE,GAAG;AACb,QAAA,UAAU,EAAE,KAAK;AACjB,QAAA,cAAc,EAAE,SAAS;AACzB,QAAA,SAAS,EAAE,eAAe;AAC3B,KAAA,CAAC;;;;IAKF,MAAM,SAAS,GAAG;AAChB,UAAE,UAAU,CAAC,YAAY,EAAE,cAAc;UACvC,UAAU,CAAC,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,SAAS,CAAC;IAE3E,MAAM,SAAS,GAAG;AAChB,UAAE,EAAE,aAAa,EAAE,IAAa;AAChC,UAAE;AACE,YAAA,IAAI,EAAE,QAAiB;AACvB,YAAA,IAAI,SAAS,KAAK,SAAS,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;SAChE;AAEL,IAAA,MAAM,SAAS,GAAG,YAAY,IAC5BA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,SAAS,EAAA,GAAM,SAAS,EAAA,IAAO,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,YACrE,CAAC,GAAG,IAAI,YAAY,GAChB,IACL,IAAI;IAER,IAAI,CAAC,WAAW,EAAE;AAChB,QAAA,OAAO,SAAS;IAClB;;;;IAKA,QACEC,eACE,SAAS,EAAE,UAAU,CAAC,YAAY,EAAE,kBAAkB,EAAE,SAAS,CAAC,EAAA,GAC9D,IAAI,EAAA,QAAA,EAAA,CAEP,QAAQ,EACR,SAAS,CAAA,EAAA,CACL;AAEX;AAEA,KAAK,CAAC,WAAW,GAAG,OAAO;;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useScopedNumberFormat } from '../helpers/localeFormat';\n\nconst badgeColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n  'black',\n  'dark',\n  'light',\n  'white',\n] as const;\n\n/** Valid color values for the Badge component. */\nexport type BadgeColor = (typeof badgeColors)[number];\n\n/** Valid corner position values for the Badge component. */\nexport type BadgePosition =\n  'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n\n/** Valid overlap adjustment values for the Badge component. */\nexport type BadgeOverlap = 'circle' | 'square';\n\n/**\n * Props for the Badge component.\n */\nexport interface BadgeProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'content'>,\n    Omit<BulmaClassesProps, 'color'> {\n  /** Additional CSS classes for the root — the wrapper when `children` are present, else the badge pill. */\n  className?: string;\n  /** Additional CSS classes applied to the badge pill itself (unprefixed, like `Tooltip`'s `tooltipClassName`). */\n  badgeClassName?: string;\n  /** Count, short text, or a custom node to display; omit with `dot` for a plain dot. `max`/`showZero` apply only to numeric content. A numeric count is written the way the `locale` of a `LocaleProvider` around it writes numbers. */\n  content?: React.ReactNode;\n  /** Numeric `content` above this renders as `\"{max}+\"`. A negative or non-integer value falls back to the default. */\n  max?: number;\n  /** Render a small dot with no content. */\n  dot?: boolean;\n  /** Show the badge when `content` is `0`. Default `false`. */\n  showZero?: boolean;\n  /** Status color. Default `'danger'`. */\n  color?: BadgeColor;\n  /** Corner to overlay the badge on, relative to `children`. Ignored for standalone badges (no `children`). */\n  position?: BadgePosition;\n  /** Nudges the offset for a round (`'circle'`) vs rectangular (`'square'`) child. Ignored for standalone badges (no `children`). */\n  overlap?: BadgeOverlap;\n  /** Processing/pulse animation; no-ops under `prefers-reduced-motion: reduce`. */\n  pulse?: boolean;\n  /** Hide the badge pill without unmounting it (the wrapper and `children` stay visible). */\n  invisible?: boolean;\n  /** The element the badge overlays. Omit to render a standalone badge. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Badge` component is a small status/count indicator overlaid on the corner of another element, or rendered standalone.\n *\n * @function\n * @param {BadgeProps} props - Props for the Badge component.\n * @returns {JSX.Element | null} The rendered badge (and children, if provided).\n *\n * @example\n * <Badge dot color=\"success\" overlap=\"circle\">\n *   <Avatar src=\"/users/ada.jpg\" name=\"Ada\" />\n * </Badge>\n * @example\n * <Badge content={128} max={99} color=\"danger\">\n *   <Icon name=\"bell\" />\n * </Badge>\n */\nexport const Badge: React.FC<BadgeProps> = ({\n  className,\n  badgeClassName,\n  content,\n  max = 99,\n  dot = false,\n  showZero = false,\n  color = 'danger',\n  position = 'top-right',\n  overlap = 'square',\n  pulse = false,\n  invisible = false,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  const hasChildren = children != null && children !== false;\n\n  const isZero = typeof content === 'number' && content === 0;\n  const hasContent =\n    content != null &&\n    content !== false &&\n    content !== true &&\n    content !== '' &&\n    (!isZero || showZero);\n  // A hidden zero keeps the pill mounted (visually hidden via .is-zero) so the\n  // role=\"status\" live region exists before a 0 -> 1 change — mutating text in\n  // an existing region is reliably announced, inserting an already-populated\n  // region is not.\n  const zeroPlaceholder = isZero && !showZero && !dot && !invisible;\n  const shouldRender = dot || hasContent || invisible || zeroPlaceholder;\n\n  // A negative or non-integer max is nonsensical; fall back to the default\n  // rather than render e.g. \"-1+\" (mirrors Avatars' max sanitization).\n  const sanitizedMax = Number.isInteger(max) && max >= 0 ? max : 99;\n  const formatNumber = useScopedNumberFormat();\n\n  const displayValue = useMemo<React.ReactNode>(() => {\n    if (dot || !hasContent) return undefined;\n    // max only applies to numeric content; any other node renders verbatim.\n    if (typeof content === 'number') {\n      const write = formatNumber ?? String;\n      return content > sanitizedMax\n        ? `${write(sanitizedMax)}+`\n        : write(content);\n    }\n    return content;\n  }, [dot, hasContent, content, sanitizedMax, formatNumber]);\n\n  // Only primitive content produces a meaningful aria-label; a custom node\n  // supplies its own accessible text, so we leave role=\"status\" unlabeled.\n  const ariaLabel =\n    typeof displayValue === 'string' || typeof displayValue === 'number'\n      ? String(displayValue)\n      : undefined;\n\n  // Both prefixed-classname hooks stay above the early returns (Rules of Hooks).\n  const wrapperClass = usePrefixedClassNames('badge-wrapper');\n  const badgeClasses = usePrefixedClassNames('badge', {\n    [`is-${color}`]: !!color && badgeColors.includes(color),\n    // Corner position / overlap only mean anything inside a wrapper; emitting\n    // them on a standalone badge shifts it out of normal flow via the transform.\n    [`is-${position}`]: !!position && hasChildren,\n    [`is-overlap-${overlap}`]: !!overlap && hasChildren,\n    'is-standalone': !hasChildren,\n    'is-dot': dot,\n    'is-pulse': pulse,\n    'is-invisible': invisible,\n    'is-zero': zeroPlaceholder,\n  });\n\n  // badgeClassName is a plain (unprefixed) slot merged onto the pill, mirroring\n  // Tooltip's tooltipClassName. Standalone badges have no wrapper, so the pill\n  // is the root and takes className/helpers/rest directly.\n  const pillClass = hasChildren\n    ? classNames(badgeClasses, badgeClassName)\n    : classNames(badgeClasses, badgeClassName, bulmaHelperClasses, className);\n\n  const a11yProps = dot\n    ? { 'aria-hidden': true as const }\n    : {\n        role: 'status' as const,\n        ...(ariaLabel !== undefined ? { 'aria-label': ariaLabel } : {}),\n      };\n\n  const indicator = shouldRender ? (\n    <span className={pillClass} {...a11yProps} {...(hasChildren ? {} : rest)}>\n      {!dot && displayValue}\n    </span>\n  ) : null;\n\n  if (!hasChildren) {\n    return indicator;\n  }\n\n  // Always render the wrapper when there are children so the root keeps\n  // className/helpers/rest (data-testid, id, onClick, ...) even when the badge\n  // itself is hidden.\n  return (\n    <span\n      className={classNames(wrapperClass, bulmaHelperClasses, className)}\n      {...rest}\n    >\n      {children}\n      {indicator}\n    </span>\n  );\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/Pagination.js

@@ -6,7 +6,7 @@ import { classNames, usePrefixedClassNames } from '../helpers/classNames.js';
 import { withSubComponents } from '../helpers/withSubComponents.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
 import { warnDeprecatedColorProp } from '../helpers/colorDeprecations.js';
-import { useNumberFormat } from '../helpers/localeFormat.js';
+import { useScopedNumberFormat } from '../helpers/localeFormat.js';
 
 /** A count read as a whole number from zero, or `fallback` when it's no number. */
 function whole(count, fallback) {
@@ -84,7 +84,7 @@ const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded,
         backgroundColor: bgColor,
         ...props,
     });
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     // Generate Bulma classes with prefix
     const bulmaClasses = usePrefixedClassNames('pagination', {
         [`is-${color}`]: color,

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnDeprecatedColorProp } from '../helpers/colorDeprecations';\nimport { useNumberFormat } from '../helpers/localeFormat';\n\n/**\n * Props for the Pagination component.\n */\nexport interface PaginationProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * Color modifier for the pagination (renders `is-<color>`).\n   *\n   * Bulma ships no pagination color CSS, so this prop has never had a visual\n   * effect for any value. Passing it logs a console warning in development.\n   * Use `textColor` / `bgColor` instead.\n   * @deprecated No `.pagination.is-<color>` CSS exists; the prop renders\n   * unstyled and will be removed in the next major version.\n   */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Size modifier for the pagination. */\n  size?: 'small' | 'medium' | 'large';\n  /** Alignment for the pagination. */\n  align?: 'centered' | 'right';\n  /** Renders pagination with rounded corners. */\n  rounded?: boolean;\n  /**\n   * The number of pages. Given `total` and no children, `Pagination` renders\n   * the whole control itself: Previous, Next and a link for each page it\n   * shows, with an ellipsis where it skips some. Given children, it renders\n   * those as they are, and `total` and the other page props do nothing.\n   */\n  total?: number;\n  /**\n   * The page shown as current, counting from 1, when rendering from `total`.\n   * Leave it out and `Pagination` keeps the page itself, starting at 1.\n   */\n  current?: number;\n  /**\n   * Called with the page chosen, when rendering from `total`. Choosing the\n   * page already current doesn't call it.\n   */\n  onPageChange?: (page: number) => void;\n  /** How many pages to show on each side of the current one, when rendering from `total`. */\n  siblingCount?: number;\n  /** How many pages to always show at the start and at the end, when rendering from `total`. */\n  boundaryCount?: number;\n  /** The Previous link's content, when rendering from `total`. */\n  previousLabel?: React.ReactNode;\n  /** The Next link's content, when rendering from `total`. */\n  nextLabel?: React.ReactNode;\n  /** Disables every link, when rendering from `total`. */\n  disabled?: boolean;\n  /**\n   * The `href` for a page's link, when rendering from `total`, making each\n   * one a real link (`page => '?page=' + page`). A click then calls\n   * `onPageChange` and the browser follows the link too. Without it the\n   * links have no `href`, act as buttons, and Enter or Space chooses a page.\n   */\n  getPageHref?: (page: number) => string;\n  /**\n   * The accessible name of a page's link, when rendering from `total`, since\n   * its content is only the number (`page => 'Page ' + page` by default).\n   * Inside a `LocaleProvider` with a `locale`, the number on the link, and\n   * in the default name, is written the way that locale writes numbers, so\n   * the name still holds the text on screen.\n   */\n  getPageLabel?: (page: number) => string;\n  /** Additional CSS classes. */\n  className?: string;\n  /** Custom pagination content (usually subcomponents). */\n  children?: React.ReactNode;\n}\n\n/** A page's number, or a run of pages left out. */\ntype PageItem = number | 'start-gap' | 'end-gap';\n\n/** A count read as a whole number from zero, or `fallback` when it's no number. */\nfunction whole(count: number, fallback: number): number {\n  return Number.isFinite(count) ? Math.max(Math.floor(count), 0) : fallback;\n}\n\nfunction range(from: number, to: number): number[] {\n  return Array.from({ length: Math.max(to - from + 1, 0) }, (_, i) => from + i);\n}\n\n/**\n * The pages to show for `current` of `total`: the first and last\n * `boundaries`, `siblings` on each side of the current one, and a gap for\n * each run left out. A gap of a single page shows that page instead, and the\n * window around the current page slides inward near either end, so the row\n * keeps its length as the page moves.\n */\nfunction pageItems(\n  total: number,\n  current: number,\n  siblings: number,\n  boundaries: number\n): PageItem[] {\n  const windowSize = siblings * 2 + 1;\n  // Every page fits in the room the boundary pages, the window and two gaps take.\n  if (total <= boundaries * 2 + windowSize + 2) return range(1, total);\n  const lowest = boundaries + 2;\n  const highest = total - boundaries - 1;\n  const start = Math.min(\n    Math.max(current - siblings, lowest),\n    highest - windowSize + 1\n  );\n  const end = start + windowSize - 1;\n  const gap = (from: number, to: number, name: PageItem): PageItem[] =>\n    to === from ? [from] : [name];\n  return [\n    ...range(1, boundaries),\n    ...gap(boundaries + 1, start - 1, 'start-gap'),\n    ...range(start, end),\n    ...gap(end + 1, total - boundaries, 'end-gap'),\n    ...range(total - boundaries + 1, total),\n  ];\n}\n\n/**\n * Props for PaginationPrevious and PaginationNext components.\n */\nexport interface PaginationPreviousNextProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Whether previous/next is disabled. */\n  disabled?: boolean;\n  /** Button content. */\n  children?: React.ReactNode;\n}\n\n/**\n * \"Previous\" navigation button.\n *\n * @function\n * @param {PaginationPreviousNextProps} props - Props for the PaginationPrevious component.\n * @returns {JSX.Element} The rendered previous button.\n */\nexport const PaginationPrevious: React.FC<PaginationPreviousNextProps> = ({\n  className,\n  disabled,\n  children,\n  ...props\n}) => (\n  <a\n    className={classNames(\n      usePrefixedClassNames('pagination-previous', {\n        'is-disabled': disabled,\n      }),\n      className\n    )}\n    aria-disabled={disabled}\n    tabIndex={disabled ? -1 : 0}\n    {...props}\n    onClick={\n      disabled\n        ? e => {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        : props.onClick\n    }\n  >\n    {children}\n  </a>\n);\n\n/**\n * \"Next\" navigation button.\n *\n * @function\n * @param {PaginationPreviousNextProps} props - Props for the PaginationNext component.\n * @returns {JSX.Element} The rendered next button.\n */\nexport const PaginationNext: React.FC<PaginationPreviousNextProps> = ({\n  className,\n  disabled,\n  children,\n  ...props\n}) => (\n  <a\n    className={classNames(\n      usePrefixedClassNames('pagination-next', { 'is-disabled': disabled }),\n      className\n    )}\n    aria-disabled={disabled}\n    tabIndex={disabled ? -1 : 0}\n    {...props}\n    onClick={\n      disabled\n        ? e => {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        : props.onClick\n    }\n  >\n    {children}\n  </a>\n);\n\n/**\n * The `Pagination` component provides a flexible, composable Bulma pagination navigation for your Bulma React UI.\n *\n * @function\n * @param {PaginationProps} props - Props for the Pagination component.\n * @returns {JSX.Element} The rendered pagination.\n * @see {@link https://bulma.io/documentation/components/pagination/ | Bulma Pagination documentation}\n */\nconst PaginationComponent: React.FC<PaginationProps> = ({\n  color,\n  textColor,\n  bgColor,\n  size,\n  align,\n  rounded,\n  total,\n  current,\n  onPageChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  previousLabel = 'Previous',\n  nextLabel = 'Next',\n  disabled,\n  getPageHref,\n  getPageLabel,\n  className,\n  children,\n  ...props\n}) => {\n  const [kept, setKept] = React.useState(1);\n  warnDeprecatedColorProp(\n    'Pagination',\n    color,\n    'Use the textColor / bgColor helper props instead.'\n  );\n\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const formatNumber = useNumberFormat();\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('pagination', {\n    [`is-${color}`]: color,\n    [`is-${size}`]: size,\n    [`is-${align}`]: align,\n    'is-rounded': rounded,\n  });\n\n  const paginationClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // A child that renders nothing (`{show && …}` when false) is no children.\n  const fromTotal =\n    total !== undefined && React.Children.toArray(children).length === 0;\n  let content: React.ReactNode = children;\n  if (fromTotal) {\n    const pages = Number.isFinite(total) ? Math.max(Math.floor(total), 0) : 0;\n    // A current page that's no number reads as the first.\n    const page = Math.min(\n      Math.max(whole(current ?? kept, 1), 1),\n      Math.max(pages, 1)\n    );\n    const choose = (next: number) => {\n      if (next === page) return;\n      if (current === undefined) setKept(next);\n      onPageChange?.(next);\n    };\n    /**\n     * What a link to `target` is given, beside what it renders. With no\n     * `getPageHref` it's a button; a link that's `off` goes nowhere.\n     */\n    const linkTo = (target: number, off: boolean) => ({\n      href: off || !getPageHref ? undefined : getPageHref(target),\n      role: getPageHref ? undefined : 'button',\n      // A link that's off is disabled too, and the parts drop its clicks.\n      onClick: () => choose(target),\n      onKeyDown: getPageHref\n        ? undefined\n        : (e: React.KeyboardEvent<HTMLAnchorElement>) => {\n            if (off || (e.key !== 'Enter' && e.key !== ' ')) return;\n            e.preventDefault();\n            choose(target);\n          },\n    });\n    const atStart = disabled || page <= 1;\n    const atEnd = disabled || page >= pages;\n    content = (\n      <>\n        <PaginationPrevious disabled={atStart} {...linkTo(page - 1, atStart)}>\n          {previousLabel}\n        </PaginationPrevious>\n        <PaginationNext disabled={atEnd} {...linkTo(page + 1, atEnd)}>\n          {nextLabel}\n        </PaginationNext>\n        <PaginationList>\n          {pageItems(\n            pages,\n            page,\n            whole(siblingCount, 1),\n            whole(boundaryCount, 1)\n          ).map(item => {\n            if (typeof item !== 'number') {\n              return <PaginationEllipsis key={item} />;\n            }\n            const shown = formatNumber ? formatNumber(item) : item;\n            return (\n              <PaginationLink\n                key={item}\n                aria-label={getPageLabel ? getPageLabel(item) : `Page ${shown}`}\n                active={item === page}\n                disabled={disabled}\n                {...linkTo(item, Boolean(disabled))}\n              >\n                {shown}\n              </PaginationLink>\n            );\n          })}\n        </PaginationList>\n      </>\n    );\n  }\n\n  return (\n    <nav\n      className={paginationClasses}\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      {...rest}\n    >\n      {content}\n    </nav>\n  );\n};\n\n/**\n * Props for the PaginationList component.\n */\nexport interface PaginationListProps\n  extends\n    React.HTMLAttributes<HTMLUListElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Text color for the list. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color modifier for the list. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the list. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** List items. */\n  children?: React.ReactNode;\n}\n\n/**\n * Container for page links and ellipsis.\n *\n * @function\n * @param {PaginationListProps} props - Props for the PaginationList component.\n * @returns {JSX.Element} The rendered pagination list.\n */\nexport const PaginationList: React.FC<PaginationListProps> = ({\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  });\n  return (\n    <ul\n      className={classNames(\n        usePrefixedClassNames('pagination-list'),\n        bulmaHelperClasses,\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </ul>\n  );\n};\n\n/**\n * Props for the PaginationLink component.\n */\nexport interface PaginationLinkProps\n  extends\n    React.AnchorHTMLAttributes<HTMLAnchorElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Bulma color modifier. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the link is for the current page. */\n  active?: boolean;\n  /** Whether the link is disabled. */\n  disabled?: boolean;\n  /** Link content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Page number or navigation link.\n *\n * @function\n * @param {PaginationLinkProps} props - Props for the PaginationLink component.\n * @returns {JSX.Element} The rendered pagination link.\n */\nexport const PaginationLink: React.FC<PaginationLinkProps> = ({\n  className,\n  textColor,\n  bgColor,\n  active,\n  disabled,\n  onClick,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n    if (disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  return (\n    <li>\n      <a\n        className={classNames(\n          usePrefixedClassNames('pagination-link', {\n            'is-current': active,\n            'is-disabled': disabled,\n          }),\n          bulmaHelperClasses,\n          className\n        )}\n        aria-current={active ? 'page' : undefined}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleClick}\n        {...rest}\n      >\n        {children}\n      </a>\n    </li>\n  );\n};\n\n/**\n * Ellipsis separator.\n *\n * @function\n * @param {React.LiHTMLAttributes<HTMLLIElement>} props - Standard li props.\n * @returns {JSX.Element} The rendered ellipsis.\n */\nexport const PaginationEllipsis: React.FC<\n  React.LiHTMLAttributes<HTMLLIElement>\n> = props => (\n  <li>\n    <span className={usePrefixedClassNames('pagination-ellipsis')} {...props}>\n      &hellip;\n    </span>\n  </li>\n);\n\nexport const Pagination = withSubComponents(\n  PaginationComponent,\n  {\n    Link: PaginationLink,\n    List: PaginationList,\n    Ellipsis: PaginationEllipsis,\n    Previous: PaginationPrevious,\n    Next: PaginationNext,\n  },\n  'Pagination'\n);\n\nexport default Pagination;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnDeprecatedColorProp } from '../helpers/colorDeprecations';\nimport { useScopedNumberFormat } from '../helpers/localeFormat';\n\n/**\n * Props for the Pagination component.\n */\nexport interface PaginationProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * Color modifier for the pagination (renders `is-<color>`).\n   *\n   * Bulma ships no pagination color CSS, so this prop has never had a visual\n   * effect for any value. Passing it logs a console warning in development.\n   * Use `textColor` / `bgColor` instead.\n   * @deprecated No `.pagination.is-<color>` CSS exists; the prop renders\n   * unstyled and will be removed in the next major version.\n   */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color helper. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Size modifier for the pagination. */\n  size?: 'small' | 'medium' | 'large';\n  /** Alignment for the pagination. */\n  align?: 'centered' | 'right';\n  /** Renders pagination with rounded corners. */\n  rounded?: boolean;\n  /**\n   * The number of pages. Given `total` and no children, `Pagination` renders\n   * the whole control itself: Previous, Next and a link for each page it\n   * shows, with an ellipsis where it skips some. Given children, it renders\n   * those as they are, and `total` and the other page props do nothing.\n   */\n  total?: number;\n  /**\n   * The page shown as current, counting from 1, when rendering from `total`.\n   * Leave it out and `Pagination` keeps the page itself, starting at 1.\n   */\n  current?: number;\n  /**\n   * Called with the page chosen, when rendering from `total`. Choosing the\n   * page already current doesn't call it.\n   */\n  onPageChange?: (page: number) => void;\n  /** How many pages to show on each side of the current one, when rendering from `total`. */\n  siblingCount?: number;\n  /** How many pages to always show at the start and at the end, when rendering from `total`. */\n  boundaryCount?: number;\n  /** The Previous link's content, when rendering from `total`. */\n  previousLabel?: React.ReactNode;\n  /** The Next link's content, when rendering from `total`. */\n  nextLabel?: React.ReactNode;\n  /** Disables every link, when rendering from `total`. */\n  disabled?: boolean;\n  /**\n   * The `href` for a page's link, when rendering from `total`, making each\n   * one a real link (`page => '?page=' + page`). A click then calls\n   * `onPageChange` and the browser follows the link too. Without it the\n   * links have no `href`, act as buttons, and Enter or Space chooses a page.\n   */\n  getPageHref?: (page: number) => string;\n  /**\n   * The accessible name of a page's link, when rendering from `total`, since\n   * its content is only the number (`page => 'Page ' + page` by default).\n   * Inside a `LocaleProvider` with a `locale`, the number on the link, and\n   * in the default name, is written the way that locale writes numbers, so\n   * the name still holds the text on screen.\n   */\n  getPageLabel?: (page: number) => string;\n  /** Additional CSS classes. */\n  className?: string;\n  /** Custom pagination content (usually subcomponents). */\n  children?: React.ReactNode;\n}\n\n/** A page's number, or a run of pages left out. */\ntype PageItem = number | 'start-gap' | 'end-gap';\n\n/** A count read as a whole number from zero, or `fallback` when it's no number. */\nfunction whole(count: number, fallback: number): number {\n  return Number.isFinite(count) ? Math.max(Math.floor(count), 0) : fallback;\n}\n\nfunction range(from: number, to: number): number[] {\n  return Array.from({ length: Math.max(to - from + 1, 0) }, (_, i) => from + i);\n}\n\n/**\n * The pages to show for `current` of `total`: the first and last\n * `boundaries`, `siblings` on each side of the current one, and a gap for\n * each run left out. A gap of a single page shows that page instead, and the\n * window around the current page slides inward near either end, so the row\n * keeps its length as the page moves.\n */\nfunction pageItems(\n  total: number,\n  current: number,\n  siblings: number,\n  boundaries: number\n): PageItem[] {\n  const windowSize = siblings * 2 + 1;\n  // Every page fits in the room the boundary pages, the window and two gaps take.\n  if (total <= boundaries * 2 + windowSize + 2) return range(1, total);\n  const lowest = boundaries + 2;\n  const highest = total - boundaries - 1;\n  const start = Math.min(\n    Math.max(current - siblings, lowest),\n    highest - windowSize + 1\n  );\n  const end = start + windowSize - 1;\n  const gap = (from: number, to: number, name: PageItem): PageItem[] =>\n    to === from ? [from] : [name];\n  return [\n    ...range(1, boundaries),\n    ...gap(boundaries + 1, start - 1, 'start-gap'),\n    ...range(start, end),\n    ...gap(end + 1, total - boundaries, 'end-gap'),\n    ...range(total - boundaries + 1, total),\n  ];\n}\n\n/**\n * Props for PaginationPrevious and PaginationNext components.\n */\nexport interface PaginationPreviousNextProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Whether previous/next is disabled. */\n  disabled?: boolean;\n  /** Button content. */\n  children?: React.ReactNode;\n}\n\n/**\n * \"Previous\" navigation button.\n *\n * @function\n * @param {PaginationPreviousNextProps} props - Props for the PaginationPrevious component.\n * @returns {JSX.Element} The rendered previous button.\n */\nexport const PaginationPrevious: React.FC<PaginationPreviousNextProps> = ({\n  className,\n  disabled,\n  children,\n  ...props\n}) => (\n  <a\n    className={classNames(\n      usePrefixedClassNames('pagination-previous', {\n        'is-disabled': disabled,\n      }),\n      className\n    )}\n    aria-disabled={disabled}\n    tabIndex={disabled ? -1 : 0}\n    {...props}\n    onClick={\n      disabled\n        ? e => {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        : props.onClick\n    }\n  >\n    {children}\n  </a>\n);\n\n/**\n * \"Next\" navigation button.\n *\n * @function\n * @param {PaginationPreviousNextProps} props - Props for the PaginationNext component.\n * @returns {JSX.Element} The rendered next button.\n */\nexport const PaginationNext: React.FC<PaginationPreviousNextProps> = ({\n  className,\n  disabled,\n  children,\n  ...props\n}) => (\n  <a\n    className={classNames(\n      usePrefixedClassNames('pagination-next', { 'is-disabled': disabled }),\n      className\n    )}\n    aria-disabled={disabled}\n    tabIndex={disabled ? -1 : 0}\n    {...props}\n    onClick={\n      disabled\n        ? e => {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        : props.onClick\n    }\n  >\n    {children}\n  </a>\n);\n\n/**\n * The `Pagination` component provides a flexible, composable Bulma pagination navigation for your Bulma React UI.\n *\n * @function\n * @param {PaginationProps} props - Props for the Pagination component.\n * @returns {JSX.Element} The rendered pagination.\n * @see {@link https://bulma.io/documentation/components/pagination/ | Bulma Pagination documentation}\n */\nconst PaginationComponent: React.FC<PaginationProps> = ({\n  color,\n  textColor,\n  bgColor,\n  size,\n  align,\n  rounded,\n  total,\n  current,\n  onPageChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  previousLabel = 'Previous',\n  nextLabel = 'Next',\n  disabled,\n  getPageHref,\n  getPageLabel,\n  className,\n  children,\n  ...props\n}) => {\n  const [kept, setKept] = React.useState(1);\n  warnDeprecatedColorProp(\n    'Pagination',\n    color,\n    'Use the textColor / bgColor helper props instead.'\n  );\n\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n  const formatNumber = useScopedNumberFormat();\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('pagination', {\n    [`is-${color}`]: color,\n    [`is-${size}`]: size,\n    [`is-${align}`]: align,\n    'is-rounded': rounded,\n  });\n\n  const paginationClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // A child that renders nothing (`{show && …}` when false) is no children.\n  const fromTotal =\n    total !== undefined && React.Children.toArray(children).length === 0;\n  let content: React.ReactNode = children;\n  if (fromTotal) {\n    const pages = Number.isFinite(total) ? Math.max(Math.floor(total), 0) : 0;\n    // A current page that's no number reads as the first.\n    const page = Math.min(\n      Math.max(whole(current ?? kept, 1), 1),\n      Math.max(pages, 1)\n    );\n    const choose = (next: number) => {\n      if (next === page) return;\n      if (current === undefined) setKept(next);\n      onPageChange?.(next);\n    };\n    /**\n     * What a link to `target` is given, beside what it renders. With no\n     * `getPageHref` it's a button; a link that's `off` goes nowhere.\n     */\n    const linkTo = (target: number, off: boolean) => ({\n      href: off || !getPageHref ? undefined : getPageHref(target),\n      role: getPageHref ? undefined : 'button',\n      // A link that's off is disabled too, and the parts drop its clicks.\n      onClick: () => choose(target),\n      onKeyDown: getPageHref\n        ? undefined\n        : (e: React.KeyboardEvent<HTMLAnchorElement>) => {\n            if (off || (e.key !== 'Enter' && e.key !== ' ')) return;\n            e.preventDefault();\n            choose(target);\n          },\n    });\n    const atStart = disabled || page <= 1;\n    const atEnd = disabled || page >= pages;\n    content = (\n      <>\n        <PaginationPrevious disabled={atStart} {...linkTo(page - 1, atStart)}>\n          {previousLabel}\n        </PaginationPrevious>\n        <PaginationNext disabled={atEnd} {...linkTo(page + 1, atEnd)}>\n          {nextLabel}\n        </PaginationNext>\n        <PaginationList>\n          {pageItems(\n            pages,\n            page,\n            whole(siblingCount, 1),\n            whole(boundaryCount, 1)\n          ).map(item => {\n            if (typeof item !== 'number') {\n              return <PaginationEllipsis key={item} />;\n            }\n            const shown = formatNumber ? formatNumber(item) : item;\n            return (\n              <PaginationLink\n                key={item}\n                aria-label={getPageLabel ? getPageLabel(item) : `Page ${shown}`}\n                active={item === page}\n                disabled={disabled}\n                {...linkTo(item, Boolean(disabled))}\n              >\n                {shown}\n              </PaginationLink>\n            );\n          })}\n        </PaginationList>\n      </>\n    );\n  }\n\n  return (\n    <nav\n      className={paginationClasses}\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      {...rest}\n    >\n      {content}\n    </nav>\n  );\n};\n\n/**\n * Props for the PaginationList component.\n */\nexport interface PaginationListProps\n  extends\n    React.HTMLAttributes<HTMLUListElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Text color for the list. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color modifier for the list. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the list. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** List items. */\n  children?: React.ReactNode;\n}\n\n/**\n * Container for page links and ellipsis.\n *\n * @function\n * @param {PaginationListProps} props - Props for the PaginationList component.\n * @returns {JSX.Element} The rendered pagination list.\n */\nexport const PaginationList: React.FC<PaginationListProps> = ({\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  });\n  return (\n    <ul\n      className={classNames(\n        usePrefixedClassNames('pagination-list'),\n        bulmaHelperClasses,\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </ul>\n  );\n};\n\n/**\n * Props for the PaginationLink component.\n */\nexport interface PaginationLinkProps\n  extends\n    React.AnchorHTMLAttributes<HTMLAnchorElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Bulma color modifier. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the link is for the current page. */\n  active?: boolean;\n  /** Whether the link is disabled. */\n  disabled?: boolean;\n  /** Link content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Page number or navigation link.\n *\n * @function\n * @param {PaginationLinkProps} props - Props for the PaginationLink component.\n * @returns {JSX.Element} The rendered pagination link.\n */\nexport const PaginationLink: React.FC<PaginationLinkProps> = ({\n  className,\n  textColor,\n  bgColor,\n  active,\n  disabled,\n  onClick,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n    if (disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  return (\n    <li>\n      <a\n        className={classNames(\n          usePrefixedClassNames('pagination-link', {\n            'is-current': active,\n            'is-disabled': disabled,\n          }),\n          bulmaHelperClasses,\n          className\n        )}\n        aria-current={active ? 'page' : undefined}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleClick}\n        {...rest}\n      >\n        {children}\n      </a>\n    </li>\n  );\n};\n\n/**\n * Ellipsis separator.\n *\n * @function\n * @param {React.LiHTMLAttributes<HTMLLIElement>} props - Standard li props.\n * @returns {JSX.Element} The rendered ellipsis.\n */\nexport const PaginationEllipsis: React.FC<\n  React.LiHTMLAttributes<HTMLLIElement>\n> = props => (\n  <li>\n    <span className={usePrefixedClassNames('pagination-ellipsis')} {...props}>\n      &hellip;\n    </span>\n  </li>\n);\n\nexport const Pagination = withSubComponents(\n  PaginationComponent,\n  {\n    Link: PaginationLink,\n    List: PaginationList,\n    Ellipsis: PaginationEllipsis,\n    Previous: PaginationPrevious,\n    Next: PaginationNext,\n  },\n  'Pagination'\n);\n\nexport default Pagination;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;AAmGA;AACA,SAAS,KAAK,CAAC,KAAa,EAAE,QAAgB,EAAA;IAC5C,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ;AAC3E;AAEA,SAAS,KAAK,CAAC,IAAY,EAAE,EAAU,EAAA;AACrC,IAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC;AAC/E;AAEA;;;;;;AAMG;AACH,SAAS,SAAS,CAChB,KAAa,EACb,OAAe,EACf,QAAgB,EAChB,UAAkB,EAAA;AAElB,IAAA,MAAM,UAAU,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC;;IAEnC,IAAI,KAAK,IAAI,UAAU,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC;AAAE,QAAA,OAAO,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;AACpE,IAAA,MAAM,MAAM,GAAG,UAAU,GAAG,CAAC;AAC7B,IAAA,MAAM,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,CAAC;IACtC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CACpB,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,QAAQ,EAAE,MAAM,CAAC,EACpC,OAAO,GAAG,UAAU,GAAG,CAAC,CACzB;AACD,IAAA,MAAM,GAAG,GAAG,KAAK,GAAG,UAAU,GAAG,CAAC;IAClC,MAAM,GAAG,GAAG,CAAC,IAAY,EAAE,EAAU,EAAE,IAAc,KACnD,EAAE,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;IAC/B,OAAO;AACL,QAAA,GAAG,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;QACvB,GAAG,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,WAAW,CAAC;AAC9C,QAAA,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC;QACpB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,EAAE,KAAK,GAAG,UAAU,EAAE,SAAS,CAAC;QAC9C,GAAG,KAAK,CAAC,KAAK,GAAG,UAAU,GAAG,CAAC,EAAE,KAAK,CAAC;KACxC;AACH;AAcA;;;;;;AAMG;AACI,MAAM,kBAAkB,GAA0C,CAAC,EACxE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,MACCA,GAAA,CAAA,GAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,CAAC,qBAAqB,EAAE;AAC3C,QAAA,aAAa,EAAE,QAAQ;KACxB,CAAC,EACF,SAAS,CACV,EAAA,eAAA,EACc,QAAQ,EACvB,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,KACvB,KAAK,EACT,OAAO,EACL;UACI,CAAC,IAAG;YACF,CAAC,CAAC,cAAc,EAAE;YAClB,CAAC,CAAC,eAAe,EAAE;QACrB;UACA,KAAK,CAAC,OAAO,YAGlB,QAAQ,EAAA,CACP;AAGN;;;;;;AAMG;AACI,MAAM,cAAc,GAA0C,CAAC,EACpE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,MACCA,GAAA,CAAA,GAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,CAAC,iBAAiB,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,EACrE,SAAS,CACV,EAAA,eAAA,EACc,QAAQ,EACvB,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,GACvB,KAAK,EACT,OAAO,EACL;UACI,CAAC,IAAG;YACF,CAAC,CAAC,cAAc,EAAE;YAClB,CAAC,CAAC,eAAe,EAAE;QACrB;UACA,KAAK,CAAC,OAAO,YAGlB,QAAQ,EAAA,CACP;AAGN;;;;;;;AAOG;AACH,MAAM,mBAAmB,GAA8B,CAAC,EACtD,KAAK,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAY,GAAG,CAAC,EAChB,aAAa,GAAG,CAAC,EACjB,aAAa,GAAG,UAAU,EAC1B,SAAS,GAAG,MAAM,EAClB,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;AACzC,IAAA,uBAAuB,CACrB,YAAY,EACZ,KAAK,EACL,mDAAmD,CACpD;AAED,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,YAAY,GAAG,qBAAqB,EAAE;;AAG5C,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,YAAY,EAAE;AACvD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK;AACtB,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI;AACpB,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK;AACtB,QAAA,YAAY,EAAE,OAAO;AACtB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,UAAU,CAClC,YAAY,EACZ,kBAAkB,EAClB,SAAS,CACV;;AAGD,IAAA,MAAM,SAAS,GACb,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,KAAK,CAAC;IACtE,IAAI,OAAO,GAAoB,QAAQ;IACvC,IAAI,SAAS,EAAE;AACb,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC;;AAEzE,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CACnB,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EACtC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CACnB;AACD,QAAA,MAAM,MAAM,GAAG,CAAC,IAAY,KAAI;YAC9B,IAAI,IAAI,KAAK,IAAI;gBAAE;YACnB,IAAI,OAAO,KAAK,SAAS;gBAAE,OAAO,CAAC,IAAI,CAAC;AACxC,YAAA,YAAY,GAAG,IAAI,CAAC;AACtB,QAAA,CAAC;AACD;;;AAGG;QACH,MAAM,MAAM,GAAG,CAAC,MAAc,EAAE,GAAY,MAAM;AAChD,YAAA,IAAI,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC;YAC3D,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ;;AAExC,YAAA,OAAO,EAAE,MAAM,MAAM,CAAC,MAAM,CAAC;AAC7B,YAAA,SAAS,EAAE;AACT,kBAAE;AACF,kBAAE,CAAC,CAAyC,KAAI;AAC5C,oBAAA,IAAI,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC;wBAAE;oBACjD,CAAC,CAAC,cAAc,EAAE;oBAClB,MAAM,CAAC,MAAM,CAAC;gBAChB,CAAC;AACN,SAAA,CAAC;AACF,QAAA,MAAM,OAAO,GAAG,QAAQ,IAAI,IAAI,IAAI,CAAC;AACrC,QAAA,MAAM,KAAK,GAAG,QAAQ,IAAI,IAAI,IAAI,KAAK;AACvC,QAAA,OAAO,IACLC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAC,kBAAkB,EAAA,EAAC,QAAQ,EAAE,OAAO,EAAA,GAAM,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,OAAO,CAAC,EAAA,QAAA,EACjE,aAAa,EAAA,CACK,EACrBA,IAAC,cAAc,EAAA,EAAC,QAAQ,EAAE,KAAK,EAAA,GAAM,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,KAAK,CAAC,EAAA,QAAA,EACzD,SAAS,EAAA,CACK,EACjBA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EACZ,SAAS,CACR,KAAK,EACL,IAAI,EACJ,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,EACtB,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,CACxB,CAAC,GAAG,CAAC,IAAI,IAAG;AACX,wBAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC5B,4BAAA,OAAOA,GAAA,CAAC,kBAAkB,EAAA,EAAA,EAAM,IAAI,CAAI;wBAC1C;AACA,wBAAA,MAAM,KAAK,GAAG,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI;wBACtD,QACEA,IAAC,cAAc,EAAA,EAAA,YAAA,EAED,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,KAAK,CAAA,CAAE,EAC/D,MAAM,EAAE,IAAI,KAAK,IAAI,EACrB,QAAQ,EAAE,QAAQ,KACd,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAA,QAAA,EAElC,KAAK,IAND,IAAI,CAOM;AAErB,oBAAA,CAAC,CAAC,EAAA,CACa,CAAA,EAAA,CAChB,CACJ;IACH;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,YAAY,EAAA,YAAA,EACN,YAAY,EAAA,GACnB,IAAI,YAEP,OAAO,EAAA,CACJ;AAEV,CAAC;AAqBD;;;;;;AAMG;AACI,MAAM,cAAc,GAAkC,CAAC,EAC5D,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;AACT,KAAA,CAAC;IACF,QACEA,YACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,CAAC,iBAAiB,CAAC,EACxC,kBAAkB,EAClB,SAAS,CACV,EAAA,GACG,IAAI,EAAA,QAAA,EAEP,QAAQ,EAAA,CACN;AAET;AAyBA;;;;;;AAMG;AACI,MAAM,cAAc,GAAkC,CAAC,EAC5D,SAAS,EACT,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,EACR,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;AACT,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,CAAC,CAAkD,KAAI;QACzE,IAAI,QAAQ,EAAE;YACZ,CAAC,CAAC,cAAc,EAAE;YAClB,CAAC,CAAC,eAAe,EAAE;YACnB;QACF;QACA,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,CAAC,CAAC;QACZ;AACF,IAAA,CAAC;IAED,QACEA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAAA,GAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,qBAAqB,CAAC,iBAAiB,EAAE;AACvC,gBAAA,YAAY,EAAE,MAAM;AACpB,gBAAA,aAAa,EAAE,QAAQ;AACxB,aAAA,CAAC,EACF,kBAAkB,EAClB,SAAS,CACV,EAAA,cAAA,EACa,MAAM,GAAG,MAAM,GAAG,SAAS,EAAA,eAAA,EAC1B,QAAQ,EACvB,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAC3B,OAAO,EAAE,WAAW,KAChB,IAAI,EAAA,QAAA,EAEP,QAAQ,EAAA,CACP,EAAA,CACD;AAET;AAEA;;;;;;AAMG;MACU,kBAAkB,GAE3B,KAAK,KACPA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,qBAAqB,CAAC,qBAAqB,CAAC,KAAM,KAAK,EAAA,QAAA,EAAA,QAAA,EAAA,CAEjE,EAAA,CACJ;AAGA,MAAM,UAAU,GAAG,iBAAiB,CACzC,mBAAmB,EACnB;AACE,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,QAAQ,EAAE,kBAAkB;AAC5B,IAAA,QAAQ,EAAE,kBAAkB;AAC5B,IAAA,IAAI,EAAE,cAAc;CACrB,EACD,YAAY;;"}

package/dist/esm/components/Steps.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { classNames, usePrefixedClassNames } from '../helpers/classNames.js';
 import { withSubComponents } from '../helpers/withSubComponents.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
-import { useNumberFormat } from '../helpers/localeFormat.js';
+import { useScopedNumberFormat } from '../helpers/localeFormat.js';
 
 /**
  * Individual Step component for use inside Steps.
@@ -16,7 +16,7 @@ import { useNumberFormat } from '../helpers/localeFormat.js';
  */
 const Step = ({ isActive = false, isCompleted = false, label, icon, clickable = false, onClick, stepNumber, completedIcon, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const stepClasses = classNames(usePrefixedClassNames('steps-segment', {
         'is-active': isActive,
         'is-completed': isCompleted,

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

@@ -1 +1 @@
-{"version":3,"file":"Steps.js","sources":["../../../src/components/Steps.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useNumberFormat } from '../helpers/localeFormat';\n\n/** Available size modifiers for the Steps component. */\nexport type StepsSize = 'small' | 'medium' | 'large';\n/** Available color variants for the Steps component. */\nexport type StepsColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Props for individual Step items.\n */\nexport interface StepItemProps {\n  /**\n   * Step label/title. On a `clickable` step it's rendered inside the step's\n   * `<button>`, so it has to be phrasing content, like text, a `<span>` or an\n   * icon, with no link, button or other control in it.\n   */\n  label?: React.ReactNode;\n  /** Icon for the step marker */\n  icon?: React.ReactNode;\n  /**\n   * Icon shown when the step is completed.\n   * @defaultValue '✓'\n   */\n  completedIcon?: React.ReactNode;\n  /**\n   * Whether this step is clickable. A clickable step puts its marker and\n   * label in a `<button type=\"button\">` inside its list item, which calls\n   * `onStepClick`, and the current step's `aria-current` goes on that button.\n   */\n  clickable?: boolean;\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for the Steps component.\n * @extraProp {React.ReactNode} [children] - Step children (alternative to items).\n * @extraProp {string} [className] - Additional CSS classes.\n */\nexport interface StepsProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Current active step (0-indexed). */\n  value?: number;\n  /** Array of step items. */\n  items?: StepItemProps[];\n  /** Size of the steps. */\n  size?: StepsSize;\n  /** Color variant. */\n  color?: StepsColor;\n  /** Show step markers. Default: true. */\n  hasMarker?: boolean;\n  /** Enable animations. Default: true. */\n  animated?: boolean;\n  /** Use rounded markers. Default: true. */\n  rounded?: boolean;\n  /** Vertical layout. */\n  vertical?: boolean;\n  /**\n   * Position of labels. `right` and `left` mean the end and the start of the\n   * line, so in a right-to-left page `right` puts each label to the left of\n   * its marker, and `left` to the right.\n   */\n  labelPosition?: 'bottom' | 'right' | 'left';\n  /** Mobile display mode. */\n  mobileMode?: 'minimal' | 'compact' | 'right';\n  /** Displays step numbers in the markers. */\n  showStepNumbers?: boolean;\n  /**\n   * Shows previous/next navigation buttons. They render `type=\"button\"`, so a\n   * multi-step form wrapped around the steps is not submitted by moving\n   * between them.\n   */\n  hasNavigation?: boolean;\n  /** Label for the previous button. */\n  prevLabel?: string;\n  /** Label for the next button. */\n  nextLabel?: string;\n  /** Callback when previous button is clicked. */\n  onPrev?: () => void;\n  /** Callback when next button is clicked. */\n  onNext?: () => void;\n  /** Callback when a step is clicked. */\n  onStepClick?: (step: number) => void;\n}\n\n/**\n * Props for the Step subcomponent.\n */\nexport interface StepProps\n  extends\n    Omit<React.LiHTMLAttributes<HTMLLIElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Whether this step is active */\n  isActive?: boolean;\n  /** Whether this step is completed */\n  isCompleted?: boolean;\n  /**\n   * Step label/title, or pass it as `children`. On a `clickable` step it's\n   * rendered inside the step's `<button>`, so it has to be phrasing content,\n   * like text, a `<span>` or an icon, with no link, button or other control\n   * in it.\n   */\n  label?: React.ReactNode;\n  /** Icon for the step marker */\n  icon?: React.ReactNode;\n  /**\n   * Whether this step is clickable. A clickable step puts its marker and\n   * label in a `<button type=\"button\">` inside the `<li>`, which calls\n   * `onClick`, and `aria-current` goes on that button. The `<li>` keeps the\n   * rest of the props.\n   */\n  clickable?: boolean;\n  /** Click handler */\n  onClick?: () => void;\n  /**\n   * Step number to display in marker (1-indexed), written the way the\n   * `locale` of a `LocaleProvider` around it writes numbers.\n   */\n  stepNumber?: number;\n  /**\n   * Icon shown when the step is completed.\n   * @defaultValue '✓'\n   */\n  completedIcon?: React.ReactNode;\n}\n\n/**\n * Individual Step component for use inside Steps.\n *\n * @function\n * @param {StepProps} props - Props for the Step component.\n * @returns {JSX.Element} The rendered step segment.\n */\nexport const Step: React.FC<StepProps> = ({\n  isActive = false,\n  isCompleted = false,\n  label,\n  icon,\n  clickable = false,\n  onClick,\n  stepNumber,\n  completedIcon,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const formatNumber = useNumberFormat();\n\n  const stepClasses = classNames(\n    usePrefixedClassNames('steps-segment', {\n      'is-active': isActive,\n      'is-completed': isCompleted,\n    }),\n    bulmaHelperClasses,\n    className\n  );\n  const stepsLinkClass = usePrefixedClassNames('steps-link');\n  const stepsMarkerClass = usePrefixedClassNames('steps-marker');\n  const stepsContentClass = usePrefixedClassNames('steps-content');\n  const stepsTitleClass = usePrefixedClassNames('steps-title');\n\n  const resolvedCompletedIcon =\n    completedIcon === undefined ? '\\u2713' : completedIcon;\n  const markerContent =\n    icon ||\n    (isCompleted && resolvedCompletedIcon\n      ? resolvedCompletedIcon\n      : stepNumber == null || !formatNumber\n        ? (stepNumber ?? null)\n        : formatNumber(stepNumber));\n  const title = label || children;\n  const current = isActive ? 'step' : undefined;\n\n  // The step stays a list item, and a real button inside it does the\n  // clicking, so the list keeps its items and the button brings Enter, Space\n  // and focus with it. A button holds only phrasing content, so its parts\n  // are spans.\n  if (clickable) {\n    return (\n      <li className={stepClasses} {...rest}>\n        <button\n          type=\"button\"\n          className={stepsLinkClass}\n          onClick={() => onClick?.()}\n          aria-current={current}\n        >\n          <span className={stepsMarkerClass}>{markerContent}</span>\n          {title && (\n            <span className={stepsContentClass}>\n              <span className={stepsTitleClass}>{title}</span>\n            </span>\n          )}\n        </button>\n      </li>\n    );\n  }\n\n  return (\n    <li className={stepClasses} aria-current={current} {...rest}>\n      <div className={stepsLinkClass}>\n        <span className={stepsMarkerClass}>{markerContent}</span>\n        {title && (\n          <div className={stepsContentClass}>\n            <p className={stepsTitleClass}>{title}</p>\n          </div>\n        )}\n      </div>\n    </li>\n  );\n};\n\n/**\n * The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.\n *\n * @function\n * @param {StepsProps} props - Props for the Steps component.\n * @returns {JSX.Element} The rendered steps component.\n *\n * @example\n * // Basic steps with items\n * <Steps\n *   value={1}\n *   items={[\n *     { label: 'Account' },\n *     { label: 'Profile' },\n *     { label: 'Complete' },\n *   ]}\n * />\n *\n * @example\n * // Clickable steps with navigation\n * <Steps\n *   value={currentStep}\n *   onStepClick={(step) => setCurrentStep(step)}\n *   hasNavigation\n *   items={[\n *     { label: 'Step 1', clickable: true },\n *     { label: 'Step 2', clickable: true },\n *     { label: 'Step 3', clickable: true },\n *   ]}\n * />\n */\nconst StepsComponent: React.FC<StepsProps> = ({\n  value = 0,\n  items,\n  size,\n  color,\n  hasMarker = true,\n  animated = true,\n  rounded = true,\n  vertical = false,\n  labelPosition = 'bottom',\n  mobileMode,\n  showStepNumbers = true,\n  hasNavigation = false,\n  prevLabel,\n  nextLabel,\n  onPrev,\n  onNext,\n  onStepClick,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  // Generate classes for the wrapper div\n  const stepsClasses = usePrefixedClassNames('steps', {\n    [`is-${size}`]: size,\n    [`is-${color}`]: color,\n    'has-marker': hasMarker,\n    'is-animated': animated,\n    'is-rounded': rounded,\n    'is-vertical': vertical,\n    [`has-label-${labelPosition}`]:\n      labelPosition && (labelPosition !== 'bottom' || vertical),\n    [`is-${mobileMode}`]: mobileMode,\n  });\n\n  const combinedClasses = classNames(\n    stepsClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // Generate classes for the ul (list)\n  const listClasses = usePrefixedClassNames('steps-list', {\n    'is-vertical': vertical,\n  });\n  const stepsNavigationClass = usePrefixedClassNames('steps-navigation');\n  const prevButtonClass = usePrefixedClassNames('button');\n  const nextButtonClass = usePrefixedClassNames('button', {\n    'is-primary': true,\n  });\n\n  // Count total steps for navigation\n  const totalSteps = items ? items.length : React.Children.count(children);\n\n  // Render items if provided\n  const renderSteps = () => {\n    if (items && items.length > 0) {\n      return items.map((item, index) => (\n        <Step\n          key={index}\n          isActive={index === value}\n          isCompleted={index < value}\n          label={item.label}\n          icon={item.icon}\n          completedIcon={item.completedIcon}\n          clickable={item.clickable}\n          stepNumber={showStepNumbers ? index + 1 : undefined}\n          onClick={\n            item.clickable && onStepClick ? () => onStepClick(index) : undefined\n          }\n          className={item.className}\n        />\n      ));\n    }\n\n    // If children are provided, clone them with active/completed states\n    if (children) {\n      return React.Children.map(children, (child, index) => {\n        if (React.isValidElement<StepProps>(child)) {\n          return React.cloneElement(child, {\n            isActive: index === value,\n            isCompleted: index < value,\n            stepNumber: showStepNumbers ? index + 1 : undefined,\n            onClick:\n              child.props.clickable && onStepClick\n                ? () => onStepClick(index)\n                : child.props.onClick,\n          });\n        }\n        return child;\n      });\n    }\n\n    return null;\n  };\n\n  // role=\"list\" restates the <ul>'s own role, for Safari: WebKit stops\n  // exposing a list as one once its markers are hidden, as they are here,\n  // unless the role is set explicitly.\n  return (\n    <div className={combinedClasses} {...rest}>\n      <ul className={listClasses} role=\"list\">\n        {renderSteps()}\n      </ul>\n      {hasNavigation && (\n        <div className={stepsNavigationClass}>\n          <button\n            type=\"button\"\n            className={prevButtonClass}\n            disabled={value === 0}\n            onClick={onPrev ?? (() => onStepClick?.(value - 1))}\n          >\n            {prevLabel ?? 'Previous'}\n          </button>\n          <button\n            type=\"button\"\n            className={nextButtonClass}\n            disabled={value === totalSteps - 1}\n            onClick={onNext ?? (() => onStepClick?.(value + 1))}\n          >\n            {nextLabel ?? 'Next'}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// Attach Step as static property\nexport const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');\n\nexport default Steps;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Steps.js","sources":["../../../src/components/Steps.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useScopedNumberFormat } from '../helpers/localeFormat';\n\n/** Available size modifiers for the Steps component. */\nexport type StepsSize = 'small' | 'medium' | 'large';\n/** Available color variants for the Steps component. */\nexport type StepsColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Props for individual Step items.\n */\nexport interface StepItemProps {\n  /**\n   * Step label/title. On a `clickable` step it's rendered inside the step's\n   * `<button>`, so it has to be phrasing content, like text, a `<span>` or an\n   * icon, with no link, button or other control in it.\n   */\n  label?: React.ReactNode;\n  /** Icon for the step marker */\n  icon?: React.ReactNode;\n  /**\n   * Icon shown when the step is completed.\n   * @defaultValue '✓'\n   */\n  completedIcon?: React.ReactNode;\n  /**\n   * Whether this step is clickable. A clickable step puts its marker and\n   * label in a `<button type=\"button\">` inside its list item, which calls\n   * `onStepClick`, and the current step's `aria-current` goes on that button.\n   */\n  clickable?: boolean;\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for the Steps component.\n * @extraProp {React.ReactNode} [children] - Step children (alternative to items).\n * @extraProp {string} [className] - Additional CSS classes.\n */\nexport interface StepsProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Current active step (0-indexed). */\n  value?: number;\n  /** Array of step items. */\n  items?: StepItemProps[];\n  /** Size of the steps. */\n  size?: StepsSize;\n  /** Color variant. */\n  color?: StepsColor;\n  /** Show step markers. Default: true. */\n  hasMarker?: boolean;\n  /** Enable animations. Default: true. */\n  animated?: boolean;\n  /** Use rounded markers. Default: true. */\n  rounded?: boolean;\n  /** Vertical layout. */\n  vertical?: boolean;\n  /**\n   * Position of labels. `right` and `left` mean the end and the start of the\n   * line, so in a right-to-left page `right` puts each label to the left of\n   * its marker, and `left` to the right.\n   */\n  labelPosition?: 'bottom' | 'right' | 'left';\n  /** Mobile display mode. */\n  mobileMode?: 'minimal' | 'compact' | 'right';\n  /** Displays step numbers in the markers. */\n  showStepNumbers?: boolean;\n  /**\n   * Shows previous/next navigation buttons. They render `type=\"button\"`, so a\n   * multi-step form wrapped around the steps is not submitted by moving\n   * between them.\n   */\n  hasNavigation?: boolean;\n  /** Label for the previous button. */\n  prevLabel?: string;\n  /** Label for the next button. */\n  nextLabel?: string;\n  /** Callback when previous button is clicked. */\n  onPrev?: () => void;\n  /** Callback when next button is clicked. */\n  onNext?: () => void;\n  /** Callback when a step is clicked. */\n  onStepClick?: (step: number) => void;\n}\n\n/**\n * Props for the Step subcomponent.\n */\nexport interface StepProps\n  extends\n    Omit<React.LiHTMLAttributes<HTMLLIElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Whether this step is active */\n  isActive?: boolean;\n  /** Whether this step is completed */\n  isCompleted?: boolean;\n  /**\n   * Step label/title, or pass it as `children`. On a `clickable` step it's\n   * rendered inside the step's `<button>`, so it has to be phrasing content,\n   * like text, a `<span>` or an icon, with no link, button or other control\n   * in it.\n   */\n  label?: React.ReactNode;\n  /** Icon for the step marker */\n  icon?: React.ReactNode;\n  /**\n   * Whether this step is clickable. A clickable step puts its marker and\n   * label in a `<button type=\"button\">` inside the `<li>`, which calls\n   * `onClick`, and `aria-current` goes on that button. The `<li>` keeps the\n   * rest of the props.\n   */\n  clickable?: boolean;\n  /** Click handler */\n  onClick?: () => void;\n  /**\n   * Step number to display in marker (1-indexed), written the way the\n   * `locale` of a `LocaleProvider` around it writes numbers.\n   */\n  stepNumber?: number;\n  /**\n   * Icon shown when the step is completed.\n   * @defaultValue '✓'\n   */\n  completedIcon?: React.ReactNode;\n}\n\n/**\n * Individual Step component for use inside Steps.\n *\n * @function\n * @param {StepProps} props - Props for the Step component.\n * @returns {JSX.Element} The rendered step segment.\n */\nexport const Step: React.FC<StepProps> = ({\n  isActive = false,\n  isCompleted = false,\n  label,\n  icon,\n  clickable = false,\n  onClick,\n  stepNumber,\n  completedIcon,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const formatNumber = useScopedNumberFormat();\n\n  const stepClasses = classNames(\n    usePrefixedClassNames('steps-segment', {\n      'is-active': isActive,\n      'is-completed': isCompleted,\n    }),\n    bulmaHelperClasses,\n    className\n  );\n  const stepsLinkClass = usePrefixedClassNames('steps-link');\n  const stepsMarkerClass = usePrefixedClassNames('steps-marker');\n  const stepsContentClass = usePrefixedClassNames('steps-content');\n  const stepsTitleClass = usePrefixedClassNames('steps-title');\n\n  const resolvedCompletedIcon =\n    completedIcon === undefined ? '\\u2713' : completedIcon;\n  const markerContent =\n    icon ||\n    (isCompleted && resolvedCompletedIcon\n      ? resolvedCompletedIcon\n      : stepNumber == null || !formatNumber\n        ? (stepNumber ?? null)\n        : formatNumber(stepNumber));\n  const title = label || children;\n  const current = isActive ? 'step' : undefined;\n\n  // The step stays a list item, and a real button inside it does the\n  // clicking, so the list keeps its items and the button brings Enter, Space\n  // and focus with it. A button holds only phrasing content, so its parts\n  // are spans.\n  if (clickable) {\n    return (\n      <li className={stepClasses} {...rest}>\n        <button\n          type=\"button\"\n          className={stepsLinkClass}\n          onClick={() => onClick?.()}\n          aria-current={current}\n        >\n          <span className={stepsMarkerClass}>{markerContent}</span>\n          {title && (\n            <span className={stepsContentClass}>\n              <span className={stepsTitleClass}>{title}</span>\n            </span>\n          )}\n        </button>\n      </li>\n    );\n  }\n\n  return (\n    <li className={stepClasses} aria-current={current} {...rest}>\n      <div className={stepsLinkClass}>\n        <span className={stepsMarkerClass}>{markerContent}</span>\n        {title && (\n          <div className={stepsContentClass}>\n            <p className={stepsTitleClass}>{title}</p>\n          </div>\n        )}\n      </div>\n    </li>\n  );\n};\n\n/**\n * The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.\n *\n * @function\n * @param {StepsProps} props - Props for the Steps component.\n * @returns {JSX.Element} The rendered steps component.\n *\n * @example\n * // Basic steps with items\n * <Steps\n *   value={1}\n *   items={[\n *     { label: 'Account' },\n *     { label: 'Profile' },\n *     { label: 'Complete' },\n *   ]}\n * />\n *\n * @example\n * // Clickable steps with navigation\n * <Steps\n *   value={currentStep}\n *   onStepClick={(step) => setCurrentStep(step)}\n *   hasNavigation\n *   items={[\n *     { label: 'Step 1', clickable: true },\n *     { label: 'Step 2', clickable: true },\n *     { label: 'Step 3', clickable: true },\n *   ]}\n * />\n */\nconst StepsComponent: React.FC<StepsProps> = ({\n  value = 0,\n  items,\n  size,\n  color,\n  hasMarker = true,\n  animated = true,\n  rounded = true,\n  vertical = false,\n  labelPosition = 'bottom',\n  mobileMode,\n  showStepNumbers = true,\n  hasNavigation = false,\n  prevLabel,\n  nextLabel,\n  onPrev,\n  onNext,\n  onStepClick,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  // Generate classes for the wrapper div\n  const stepsClasses = usePrefixedClassNames('steps', {\n    [`is-${size}`]: size,\n    [`is-${color}`]: color,\n    'has-marker': hasMarker,\n    'is-animated': animated,\n    'is-rounded': rounded,\n    'is-vertical': vertical,\n    [`has-label-${labelPosition}`]:\n      labelPosition && (labelPosition !== 'bottom' || vertical),\n    [`is-${mobileMode}`]: mobileMode,\n  });\n\n  const combinedClasses = classNames(\n    stepsClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // Generate classes for the ul (list)\n  const listClasses = usePrefixedClassNames('steps-list', {\n    'is-vertical': vertical,\n  });\n  const stepsNavigationClass = usePrefixedClassNames('steps-navigation');\n  const prevButtonClass = usePrefixedClassNames('button');\n  const nextButtonClass = usePrefixedClassNames('button', {\n    'is-primary': true,\n  });\n\n  // Count total steps for navigation\n  const totalSteps = items ? items.length : React.Children.count(children);\n\n  // Render items if provided\n  const renderSteps = () => {\n    if (items && items.length > 0) {\n      return items.map((item, index) => (\n        <Step\n          key={index}\n          isActive={index === value}\n          isCompleted={index < value}\n          label={item.label}\n          icon={item.icon}\n          completedIcon={item.completedIcon}\n          clickable={item.clickable}\n          stepNumber={showStepNumbers ? index + 1 : undefined}\n          onClick={\n            item.clickable && onStepClick ? () => onStepClick(index) : undefined\n          }\n          className={item.className}\n        />\n      ));\n    }\n\n    // If children are provided, clone them with active/completed states\n    if (children) {\n      return React.Children.map(children, (child, index) => {\n        if (React.isValidElement<StepProps>(child)) {\n          return React.cloneElement(child, {\n            isActive: index === value,\n            isCompleted: index < value,\n            stepNumber: showStepNumbers ? index + 1 : undefined,\n            onClick:\n              child.props.clickable && onStepClick\n                ? () => onStepClick(index)\n                : child.props.onClick,\n          });\n        }\n        return child;\n      });\n    }\n\n    return null;\n  };\n\n  // role=\"list\" restates the <ul>'s own role, for Safari: WebKit stops\n  // exposing a list as one once its markers are hidden, as they are here,\n  // unless the role is set explicitly.\n  return (\n    <div className={combinedClasses} {...rest}>\n      <ul className={listClasses} role=\"list\">\n        {renderSteps()}\n      </ul>\n      {hasNavigation && (\n        <div className={stepsNavigationClass}>\n          <button\n            type=\"button\"\n            className={prevButtonClass}\n            disabled={value === 0}\n            onClick={onPrev ?? (() => onStepClick?.(value - 1))}\n          >\n            {prevLabel ?? 'Previous'}\n          </button>\n          <button\n            type=\"button\"\n            className={nextButtonClass}\n            disabled={value === totalSteps - 1}\n            onClick={onNext ?? (() => onStepClick?.(value + 1))}\n          >\n            {nextLabel ?? 'Next'}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// Attach Step as static property\nexport const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');\n\nexport default Steps;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/TreeView.js

@@ -34,12 +34,14 @@ const isGiven$1 = (node) => node !== undefined &&
  * and close is `Menu`'s job. The root owns which items are open, through
  * `expanded`, `defaultExpanded` and `onExpandedChange`.
  *
- * `selectionMode` picks one of three trees. With `none`, nothing is picked.
+ * `selectionMode` picks the kind of tree. With `none`, nothing is picked.
  * With `single`, one item is, and `selected` says which. With `checkbox`,
  * each item has a box, a check reaches every enabled item under it, closed
  * branches included, and a parent with some of its items checked is mixed.
- * `selected` is read in a `single` tree only, and `checked` in a `checkbox`
- * tree only. Selection never follows focus.
+ * With `checkbox-independent`, each item has a box that checks that item
+ * alone, so a parent means only itself and is never mixed. `selected` is
+ * read in a `single` tree only, and `checked` in the two checkbox trees only.
+ * Selection never follows focus.
  *
  * Disabled items stay reachable from the keys, so a screen reader finds
  * them. The tree needs a name, from `aria-label` or `aria-labelledby`, and a
@@ -113,7 +115,7 @@ const TreeViewRoot = forwardRef(function TreeView({ children, selectionMode = 'n
     // beside the tree, since a tree holds items and groups only, and it's
     // there from the start, so a screen reader is listening to it before
     // anything is written into it.
-    return (jsxs(TreeViewContext.Provider, { value: { ...engine, announce, loadingLabel, retryLabel }, children: [jsx(BranchContext.Provider, { value: TOP, children: jsx("ul", { ...rest, ref: setRefs, className: classNames(rootClass, bulmaHelperClasses, className), role: "tree", "aria-multiselectable": engine.rendersClosed || undefined, children: children }) }), jsx(StatusRegion, { items: announcements, describe: describe })] }));
+    return (jsxs(TreeViewContext.Provider, { value: { ...engine, announce, loadingLabel, retryLabel }, children: [jsx(BranchContext.Provider, { value: TOP, children: jsx("ul", { ...rest, ref: setRefs, className: classNames(rootClass, bulmaHelperClasses, className), role: "tree", "aria-multiselectable": engine.multiselectable || undefined, children: children }) }), jsx(StatusRegion, { items: announcements, describe: describe })] }));
 });
 /**
  * One item in the tree: a row with its chevron, its box, its icon and its label, and, while it's open, a group of the items under it.
@@ -207,7 +209,7 @@ const TreeViewItem = forwardRef(function TreeViewItem({ value, label, icon, chil
     });
     if (!tree)
         return null;
-    // While it's open the children render in its group. In a checkbox tree
+    // While it's open the children render in its group. In a `checkbox` tree
     // they render while it's closed too, drawing nothing, so a check knows
     // what's under it.
     const items = (open || tree.rendersClosed) && (jsx(BranchContext.Provider, { value: childBranch, children: children }));