@allxsmith/bestax-bulma 5.51.0 → 5.53.0

package/dist/esm/form/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/form/Radio.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useRadiosGroup } from './FormContext';\n\n/**\n * The values the Radio `color` prop accepts, as a readonly tuple.\n *\n * `RadioProps['color']` is typed from it, so the two list the same values.\n * Map over it to build a color picker, or check a value that arrives at\n * runtime before passing it in: the component adds no color class for a value\n * outside the tuple.\n *\n * @example\n * import { Radio, Radios, radioColors } from '@allxsmith/bestax-bulma';\n *\n * <Radios name=\"accent\" defaultValue=\"primary\">\n *   {radioColors.map(color => (\n *     <Radio key={color} value={color} color={color}>\n *       {color}\n *     </Radio>\n *   ))}\n * </Radios>;\n */\nexport const radioColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const;\n\n/**\n * The values the Radio `size` prop accepts, as a readonly tuple.\n *\n * `RadioProps['size']` is typed from it, so the two list the same values. Use\n * it to offer a size choice or to check a value that arrives at runtime: the\n * component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { radioSizes } from '@allxsmith/bestax-bulma';\n *\n * type RadioSize = (typeof radioSizes)[number];\n */\nexport const radioSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Radio component.\n *\n * @helperProps Helper props go on the outer `<label>`, with `className`. The\n * other attributes go on the `<input>`.\n */\nexport interface RadioProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'type' | 'color'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Color of the radio button. */\n  color?: (typeof radioColors)[number];\n  /** Size of the radio button. */\n  size?: (typeof radioSizes)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /**\n   * Additional CSS classes, on the outer `<label>`. That's the element that\n   * declares the `--bulma-radio-*` variables, so a class is how to set one:\n   * `style` and the other input attributes go to the `<input>`. Name\n   * `.styled-radio` beside your class in the selector, so it beats the\n   * label's own declaration whatever order the stylesheets load in. A\n   * `color` prop declares the active color again on\n   * `.styled-radio.is-<color>`, which ties that selector, so leave `color`\n   * unset when a class sets it.\n   */\n  className?: string;\n  /** The label/content for the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.\n *\n * @function\n * @param {RadioProps} props - Props for the Radio component.\n * @returns {JSX.Element} The rendered radio element.\n *\n * @example\n * // Basic radio\n * <Radio name=\"option\">Option A</Radio>\n *\n * @example\n * // Inside a group\n * <Radios name=\"color\" defaultValue=\"red\">\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"blue\">Blue</Radio>\n * </Radios>\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      color,\n      size,\n      className,\n      children,\n      textColor,\n      disabled,\n      name,\n      value,\n      checked,\n      defaultChecked,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n\n    // Inherit name + selection state from a surrounding <Radios> group.\n    // Local props always win over the group (explicit > implicit).\n    const group = useRadiosGroup();\n    const effectiveName = name ?? group?.name;\n\n    // Group-managed checked state — only when the group is in\n    // controlled/uncontrolled mode (group.value is defined) AND this Radio\n    // has a value to compare against. Local `checked` always wins.\n    const groupManaged = group?.value !== undefined && value !== undefined;\n    const effectiveChecked =\n      checked !== undefined\n        ? checked\n        : groupManaged\n          ? group!.value === value\n          : undefined;\n    // When the group manages checked, suppress local defaultChecked to avoid\n    // the controlled/uncontrolled React warning.\n    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        // Local onChange always fires.\n        onChange?.(e);\n        // Dispatch to the group additionally — keeps group state in sync.\n        if (group?.onChange && value !== undefined) {\n          group.onChange(String(value));\n        }\n      },\n      [onChange, group, value]\n    );\n\n    const mainClass = usePrefixedClassNames('styled-radio', 'radio', {\n      [`is-${color}`]: color && radioColors.includes(color),\n      [`is-${size}`]: size && radioSizes.includes(size),\n    });\n    const radioClass = classNames(mainClass, bulmaHelperClasses, className);\n    const checkClass = usePrefixedClassNames('check');\n    const controlLabelClass = usePrefixedClassNames('control-label');\n\n    return (\n      <label className={radioClass}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          name={effectiveName}\n          value={value}\n          checked={effectiveChecked}\n          defaultChecked={effectiveDefaultChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={checkClass} />\n        {children && <span className={controlLabelClass}>{children}</span>}\n      </label>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AASA;;;;;;;;;;;;;;;;;;AAkBG;AACI,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;;AAGV;;;;;;;;;;;;AAYG;AACI,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO;AAsC/D;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,OAAO,EACP,cAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;;AAIF,IAAA,MAAM,KAAK,GAAG,cAAc,EAAE;AAC9B,IAAA,MAAM,aAAa,GAAG,IAAI,IAAI,KAAK,EAAE,IAAI;;;;IAKzC,MAAM,YAAY,GAAG,KAAK,EAAE,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS;AACtE,IAAA,MAAM,gBAAgB,GACpB,OAAO,KAAK;AACV,UAAE;AACF,UAAE;AACA,cAAE,KAAM,CAAC,KAAK,KAAK;cACjB,SAAS;;;IAGjB,MAAM,uBAAuB,GAAG,YAAY,GAAG,SAAS,GAAG,cAAc;AAEzE,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;;AAEzC,QAAA,QAAQ,GAAG,CAAC,CAAC;;QAEb,IAAI,KAAK,EAAE,QAAQ,IAAI,KAAK,KAAK,SAAS,EAAE;YAC1C,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B;IACF,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,CACzB;AAED,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,cAAc,EAAE,OAAO,EAAE;AAC/D,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK,IAAI,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;AACrD,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI,IAAI,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC;AAClD,KAAA,CAAC;IACF,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,CAAC;AACvE,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,OAAO,CAAC;AACjD,IAAA,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,eAAe,CAAC;IAEhE,QACEA,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,UAAU,EAAA,QAAA,EAAA,CAC1BC,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,aAAa,EACnB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,gBAAgB,EACzB,cAAc,EAAE,uBAAuB,EACvC,QAAQ,EAAE,YAAY,EAAA,GAClB,IAAI,EAAA,CACR,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,UAAU,EAAA,CAAI,EAC9B,QAAQ,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,iBAAiB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,CAAA,EAAA,CAC5D;AAEZ,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/form/Radio.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useFieldsetDisabled, useRadiosGroup } from './FormContext';\n\n/**\n * The values the Radio `color` prop accepts, as a readonly tuple.\n *\n * `RadioProps['color']` is typed from it, so the two list the same values.\n * Map over it to build a color picker, or check a value that arrives at\n * runtime before passing it in: the component adds no color class for a value\n * outside the tuple.\n *\n * @example\n * import { Radio, Radios, radioColors } from '@allxsmith/bestax-bulma';\n *\n * <Radios name=\"accent\" defaultValue=\"primary\">\n *   {radioColors.map(color => (\n *     <Radio key={color} value={color} color={color}>\n *       {color}\n *     </Radio>\n *   ))}\n * </Radios>;\n */\nexport const radioColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const;\n\n/**\n * The values the Radio `size` prop accepts, as a readonly tuple.\n *\n * `RadioProps['size']` is typed from it, so the two list the same values. Use\n * it to offer a size choice or to check a value that arrives at runtime: the\n * component adds no size class for a value outside the tuple. These are\n * element sizes, not the spacing scale in `validSizes`.\n *\n * @example\n * import { radioSizes } from '@allxsmith/bestax-bulma';\n *\n * type RadioSize = (typeof radioSizes)[number];\n */\nexport const radioSizes = ['small', 'normal', 'medium', 'large'] as const;\n\n/**\n * Props for the Radio component.\n *\n * @helperProps Helper props go on the outer `<label>`, with `className`. The\n * other attributes go on the `<input>`.\n */\nexport interface RadioProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'type' | 'color'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Color of the radio button. */\n  color?: (typeof radioColors)[number];\n  /** Size of the radio button. */\n  size?: (typeof radioSizes)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /**\n   * Additional CSS classes, on the outer `<label>`. That's the element that\n   * declares the `--bulma-radio-*` variables, so a class is how to set one:\n   * `style` and the other input attributes go to the `<input>`. Name\n   * `.styled-radio` beside your class in the selector, so it beats the\n   * label's own declaration whatever order the stylesheets load in. A\n   * `color` prop declares the active color again on\n   * `.styled-radio.is-<color>`, which ties that selector, so leave `color`\n   * unset when a class sets it.\n   */\n  className?: string;\n  /** The label/content for the radio. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.\n *\n * @function\n * @param {RadioProps} props - Props for the Radio component.\n * @returns {JSX.Element} The rendered radio element.\n *\n * @example\n * // Basic radio\n * <Radio name=\"option\">Option A</Radio>\n *\n * @example\n * // Inside a group\n * <Radios name=\"color\" defaultValue=\"red\">\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"blue\">Blue</Radio>\n * </Radios>\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      color,\n      size,\n      className,\n      children,\n      textColor,\n      disabled: disabledProp,\n      name,\n      value,\n      checked,\n      defaultChecked,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n\n    // Inherit name + selection state from a surrounding <Radios> group.\n    // Local props always win over the group (explicit > implicit).\n    const group = useRadiosGroup();\n    const effectiveName = name ?? group?.name;\n\n    // Group-managed checked state — only when the group is in\n    // controlled/uncontrolled mode (group.value is defined) AND this Radio\n    // has a value to compare against. Local `checked` always wins.\n    const groupManaged = group?.value !== undefined && value !== undefined;\n    const effectiveChecked =\n      checked !== undefined\n        ? checked\n        : groupManaged\n          ? group!.value === value\n          : undefined;\n    // When the group manages checked, suppress local defaultChecked to avoid\n    // the controlled/uncontrolled React warning.\n    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        // Local onChange always fires.\n        onChange?.(e);\n        // Dispatch to the group additionally — keeps group state in sync.\n        if (group?.onChange && value !== undefined) {\n          group.onChange(String(value));\n        }\n      },\n      [onChange, group, value]\n    );\n\n    const mainClass = usePrefixedClassNames('styled-radio', 'radio', {\n      [`is-${color}`]: color && radioColors.includes(color),\n      [`is-${size}`]: size && radioSizes.includes(size),\n    });\n    const radioClass = classNames(mainClass, bulmaHelperClasses, className);\n    const checkClass = usePrefixedClassNames('check');\n    const controlLabelClass = usePrefixedClassNames('control-label');\n\n    return (\n      <label className={radioClass}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          name={effectiveName}\n          value={value}\n          checked={effectiveChecked}\n          defaultChecked={effectiveDefaultChecked}\n          onChange={handleChange}\n          {...rest}\n        />\n        <span className={checkClass} />\n        {children && <span className={controlLabelClass}>{children}</span>}\n      </label>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/form/RadioCard.js

@@ -0,0 +1,86 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useCallback, useId } from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useFieldsetDisabled, useRadiosGroup } from './FormContext.js';
+
+// The colors `Radio` takes, as `radioColors` lists them. Declared here as
+// well, so the API page can read them off this module, and a type test holds
+// the two lists to each other.
+const radioCardColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+];
+/**
+ * The `RadioCard` component is a radio button drawn as a card, with a title and a description, picked wherever you click it.
+ *
+ * It's a `<label>` around a real radio, so it sends its `value` with a form,
+ * and the cards that share a `name` are one choice the arrow keys move
+ * through. The title names the radio and the description describes it.
+ * Inside `Radios` it takes the group's name and selection, as `Radio` does.
+ *
+ * @function
+ * @param {RadioCardProps} props - Props for the RadioCard component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The rendered card.
+ *
+ * @example
+ * <Radios label="Shipping" name="shipping" defaultValue="standard">
+ *   <RadioCard value="standard" title="Standard" description="Arrives in 4 to 6 days." />
+ *   <RadioCard value="express" title="Express" description="Arrives tomorrow." />
+ * </Radios>
+ */
+const RadioCard = forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled: disabledProp, name, value, checked, defaultChecked, onChange, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        ...props,
+    });
+    // A surrounding <Radios> hands down its name and, when it manages the
+    // selection, whether this card is the one picked. The card's own props
+    // win, as they do on Radio.
+    const group = useRadiosGroup();
+    const effectiveName = name ?? group?.name;
+    const groupManaged = group?.value !== undefined && value !== undefined;
+    const effectiveChecked = checked !== undefined
+        ? checked
+        : groupManaged
+            ? group.value === value
+            : undefined;
+    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
+    const handleChange = useCallback((e) => {
+        onChange?.(e);
+        if (group?.onChange && value !== undefined) {
+            group.onChange(String(value));
+        }
+    }, [onChange, group, value]);
+    // The title names the input and the description describes it. A name
+    // passed in wins, and without one of either the label's own text names
+    // the input, description included, so it isn't described again.
+    const titleId = useId();
+    const descriptionId = useId();
+    const ariaLabel = rest['aria-label'];
+    const ariaLabelledBy = rest['aria-labelledby'] || (!ariaLabel && title ? titleId : undefined);
+    const ariaDescribedBy = rest['aria-describedby'] ||
+        (description && (ariaLabel || ariaLabelledBy)
+            ? descriptionId
+            : undefined);
+    const cardClass = usePrefixedClassNames('radio-card', 'card', {
+        [`is-${color}`]: color && radioCardColors.includes(color),
+    });
+    const contentClass = usePrefixedClassNames('card-content', 'radio-card-content');
+    const checkClass = usePrefixedClassNames('radio-card-check');
+    const bodyClass = usePrefixedClassNames('radio-card-body');
+    const titleClass = usePrefixedClassNames('radio-card-title');
+    const descriptionClass = usePrefixedClassNames('radio-card-description');
+    return (jsxs("label", { className: classNames(cardClass, bulmaHelperClasses, className), children: [jsx("input", { ref: ref, type: "radio", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }), jsxs("span", { className: contentClass, children: [hasIndicator && jsx("span", { className: checkClass }), jsxs("span", { className: bodyClass, children: [title ? (jsx("span", { id: titleId, className: titleClass, children: title })) : null, description ? (jsx("span", { id: descriptionId, className: descriptionClass, children: description })) : null, children] })] })] }));
+});
+RadioCard.displayName = 'RadioCard';
+
+export { RadioCard };
+//# sourceMappingURL=RadioCard.js.map

package/dist/esm/form/RadioCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCard.js","sources":["../../../src/form/RadioCard.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useId } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useFieldsetDisabled, useRadiosGroup } from './FormContext';\n\n// The colors `Radio` takes, as `radioColors` lists them. Declared here as\n// well, so the API page can read them off this module, and a type test holds\n// the two lists to each other.\nconst radioCardColors = [\n  'primary',\n  'link',\n  'info',\n  'success',\n  'warning',\n  'danger',\n] as const;\n\n/**\n * Props for the RadioCard component.\n *\n * @helperProps Helper props go on the outer `<label>`, the `.card`, with\n * `className`. The other attributes go on the `<input>`.\n * @extraProp {string} [name] - The form field name, which the cards of one choice share, so the arrow keys move between them. Inside `Radios`, the group's `name` when this is unset.\n * @extraProp {string} [value] - What a form sends when this card is the one picked. Inside a `Radios` group that takes `value`, `defaultValue` or `onChange`, the card is checked while the group's value is this.\n */\nexport interface RadioCardProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'size' | 'type' | 'color' | 'title'\n    >,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /**\n   * What the option is, such as \"Express\". It names the radio, so a screen\n   * reader says it with the state and its place in the group. Without it,\n   * the card's whole text names the radio, as a label's text does.\n   */\n  title?: React.ReactNode;\n  /**\n   * A line or two about the option, read after the name and the state. It's\n   * the radio's description when `title`, `aria-label` or `aria-labelledby`\n   * names it. Without one of those it's part of the name already, so it\n   * isn't read twice.\n   */\n  description?: React.ReactNode;\n  /**\n   * Anything else in the card, after the description, such as a price. A\n   * label holds phrasing content only, so spans, images and links: a link\n   * works and doesn't pick the card, but a button or another input can't go\n   * inside a label at all. It isn't read when the radio takes focus, so put\n   * what a screen reader should hear in `title` and `description`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Shows the radio at the start of the card. Without it, the card's edge\n   * alone shows the selection, and it's thicker when picked, so the\n   * selection never rests on color.\n   */\n  hasIndicator?: boolean;\n  /** The color of the radio and of a picked card's edge. */\n  color?: (typeof radioCardColors)[number];\n  /**\n   * Text color helper, on the card. The title and the children take it, and\n   * the description keeps its own color.\n   */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Whether the card is disabled. A disabled card dims, takes no clicks, and the arrow keys skip it. */\n  disabled?: boolean;\n  /**\n   * Additional CSS classes, on the outer `<label>`, the card. That's the\n   * element that declares the `--bulma-radio-card-*` variables, and Bulma's\n   * `--bulma-card-*` ones, so a class is how to set one: `style` and the\n   * other input attributes go to the `<input>`. Name `.radio-card` beside\n   * your class in the selector, so it beats the card's own declaration\n   * whatever order the stylesheets load in. A `color` prop declares the\n   * active color again on `.radio-card.is-<color>`, which ties that\n   * selector, so leave `color` unset when a class sets it.\n   */\n  className?: string;\n}\n\n/**\n * The `RadioCard` component is a radio button drawn as a card, with a title and a description, picked wherever you click it.\n *\n * It's a `<label>` around a real radio, so it sends its `value` with a form,\n * and the cards that share a `name` are one choice the arrow keys move\n * through. The title names the radio and the description describes it.\n * Inside `Radios` it takes the group's name and selection, as `Radio` does.\n *\n * @function\n * @param {RadioCardProps} props - Props for the RadioCard component.\n * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.\n * @returns {JSX.Element} The rendered card.\n *\n * @example\n * <Radios label=\"Shipping\" name=\"shipping\" defaultValue=\"standard\">\n *   <RadioCard value=\"standard\" title=\"Standard\" description=\"Arrives in 4 to 6 days.\" />\n *   <RadioCard value=\"express\" title=\"Express\" description=\"Arrives tomorrow.\" />\n * </Radios>\n */\nexport const RadioCard = forwardRef<HTMLInputElement, RadioCardProps>(\n  (\n    {\n      title,\n      description,\n      children,\n      hasIndicator = true,\n      color,\n      className,\n      textColor,\n      disabled: disabledProp,\n      name,\n      value,\n      checked,\n      defaultChecked,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: textColor,\n      ...props,\n    });\n\n    // A surrounding <Radios> hands down its name and, when it manages the\n    // selection, whether this card is the one picked. The card's own props\n    // win, as they do on Radio.\n    const group = useRadiosGroup();\n    const effectiveName = name ?? group?.name;\n    const groupManaged = group?.value !== undefined && value !== undefined;\n    const effectiveChecked =\n      checked !== undefined\n        ? checked\n        : groupManaged\n          ? group!.value === value\n          : undefined;\n    const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(e);\n        if (group?.onChange && value !== undefined) {\n          group.onChange(String(value));\n        }\n      },\n      [onChange, group, value]\n    );\n\n    // The title names the input and the description describes it. A name\n    // passed in wins, and without one of either the label's own text names\n    // the input, description included, so it isn't described again.\n    const titleId = useId();\n    const descriptionId = useId();\n    const ariaLabel = rest['aria-label'];\n    const ariaLabelledBy =\n      rest['aria-labelledby'] || (!ariaLabel && title ? titleId : undefined);\n    const ariaDescribedBy =\n      rest['aria-describedby'] ||\n      (description && (ariaLabel || ariaLabelledBy)\n        ? descriptionId\n        : undefined);\n\n    const cardClass = usePrefixedClassNames('radio-card', 'card', {\n      [`is-${color}`]: color && radioCardColors.includes(color),\n    });\n    const contentClass = usePrefixedClassNames(\n      'card-content',\n      'radio-card-content'\n    );\n    const checkClass = usePrefixedClassNames('radio-card-check');\n    const bodyClass = usePrefixedClassNames('radio-card-body');\n    const titleClass = usePrefixedClassNames('radio-card-title');\n    const descriptionClass = usePrefixedClassNames('radio-card-description');\n\n    return (\n      <label className={classNames(cardClass, bulmaHelperClasses, className)}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          disabled={disabled}\n          name={effectiveName}\n          value={value}\n          checked={effectiveChecked}\n          defaultChecked={effectiveDefaultChecked}\n          onChange={handleChange}\n          {...rest}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n        />\n        <span className={contentClass}>\n          {hasIndicator && <span className={checkClass} />}\n          <span className={bodyClass}>\n            {title ? (\n              <span id={titleId} className={titleClass}>\n                {title}\n              </span>\n            ) : null}\n            {description ? (\n              <span id={descriptionId} className={descriptionClass}>\n                {description}\n              </span>\n            ) : null}\n            {children}\n          </span>\n        </span>\n      </label>\n    );\n  }\n);\n\nRadioCard.displayName = 'RadioCard';\n\nexport default RadioCard;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/form/Radios.js

@@ -9,6 +9,7 @@ import { Field } from './Field.js';
 import { Control } from './Control.js';
 import { useAutoLabelledBy } from './useAutoLabelId.js';
 import { Radio } from './Radio.js';
+import { GroupFieldset } from './groupFieldset.js';
 
 /**
  * The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.
@@ -34,7 +35,7 @@ import { Radio } from './Radio.js';
  *   <Radio value="green">Green</Radio>
  * </Radios>
  */
-const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
+const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, as, ...props }) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Radios', {
@@ -45,10 +46,14 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
         horizontal,
         fieldClassName,
     });
+    // As a fieldset with a Field of its own, the group's label is its legend,
+    // which names it with no id, so nothing points `aria-labelledby` at it.
+    const asFieldset = as === 'fieldset';
+    const fieldsetField = asFieldset && ownField;
     const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
         label,
         labelProps,
-        rendersLabel: ownField,
+        rendersLabel: ownField && !fieldsetField,
         callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -76,11 +81,17 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
         name,
         ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),
     }), [name, groupActive, currentValue, handleChange]);
-    const radiosElement = (jsx("div", { className: wrapperClass, role: "radiogroup", "aria-labelledby": ariaLabelledBy, ...rest, children: jsx(RadiosProvider, { value: ctx, children: children }) }));
+    const choices = jsx(RadiosProvider, { value: ctx, children: children });
+    // ARIA in HTML allows `radiogroup` on a fieldset, so it keeps the role.
+    const Group = asFieldset ? 'fieldset' : 'div';
+    const radiosElement = fieldsetField ? (jsx("div", { className: wrapperClass, children: choices })) : (jsx(Group, { className: wrapperClass, role: "radiogroup", "aria-labelledby": ariaLabelledBy, ...rest, children: choices }));
     let content = radiosElement;
     if (rendersOwnControl('Radios', { insideControl })) {
         content = jsx(Control, { children: content });
     }
+    if (fieldsetField) {
+        return (jsx(GroupFieldset, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, fieldClassName: fieldClassName, role: "radiogroup", attributes: rest, message: messageEl, children: content }));
+    }
     if (ownField) {
         return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }

package/dist/esm/form/Radios.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radios.js","sources":["../../../src/form/Radios.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n  RadiosProvider,\n  RadiosGroupContextValue,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelledBy } from './useAutoLabelId';\nimport { Radio } from './Radio';\n\n/**\n * Props for the Radios component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n */\nexport interface RadiosProps\n  extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {\n  /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role=\"radiogroup\"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Form field name shared by every Radio in the group (via context). */\n  name?: string;\n  /** Currently-selected value (controlled mode). */\n  value?: string;\n  /** Initial selected value (uncontrolled mode). */\n  defaultValue?: string;\n  /** Fires when the selection changes. */\n  onChange?: (value: string) => void;\n  /** Radio elements to render in the group. */\n  children: React.ReactNode;\n}\n\n/**\n * The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.\n *\n * @function\n * @param {RadiosProps} props - Props for the Radios component.\n * @returns {JSX.Element} The rendered radios group.\n * @see {@link https://bulma.io/documentation/form/radio/#grouped-radios | Bulma Radios documentation}\n *\n * @example\n * // Controlled\n * const [color, setColor] = useState('red');\n * <Radios name=\"color\" value={color} onChange={setColor}>\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"green\">Green</Radio>\n *   <Radio value=\"blue\">Blue</Radio>\n * </Radios>\n *\n * @example\n * // Uncontrolled\n * <Radios name=\"color\" defaultValue=\"red\" onChange={v => console.log(v)}>\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"green\">Green</Radio>\n * </Radios>\n */\nconst RadiosComponent: React.FC<RadiosProps> = ({\n  label,\n  labelSize,\n  labelProps,\n  horizontal,\n  message,\n  messageColor,\n  fieldClassName,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  children,\n  className,\n  ...props\n}) => {\n  const insideField = useInsideField();\n  const insideControl = useInsideControl();\n  const ownField = rendersOwnField('Radios', {\n    insideField,\n    insideControl,\n    label,\n    message,\n    horizontal,\n    fieldClassName,\n  });\n  const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({\n    label,\n    labelProps,\n    rendersLabel: ownField,\n    callerProps: props,\n  });\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('radios');\n  const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);\n\n  const helpClass = usePrefixedClassNames('help', {\n    [`is-${messageColor}`]: !!messageColor,\n  });\n  const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n  // The group is \"active\" (manages child selection) when the user opted in by\n  // passing value, defaultValue, or onChange. Otherwise it's name-only and\n  // children manage their own checked state (Stage 1 behavior).\n  const groupActive =\n    value !== undefined || defaultValue !== undefined || onChange !== undefined;\n\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue\n  );\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalValue;\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (!isControlled) setInternalValue(newValue);\n      onChange?.(newValue);\n    },\n    [isControlled, onChange]\n  );\n\n  const ctx = useMemo<RadiosGroupContextValue>(\n    () => ({\n      name,\n      ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),\n    }),\n    [name, groupActive, currentValue, handleChange]\n  );\n\n  const radiosElement = (\n    <div\n      className={wrapperClass}\n      role=\"radiogroup\"\n      aria-labelledby={ariaLabelledBy}\n      {...rest}\n    >\n      <RadiosProvider value={ctx}>{children}</RadiosProvider>\n    </div>\n  );\n\n  let content = radiosElement;\n\n  if (rendersOwnControl('Radios', { insideControl })) {\n    content = <Control>{content}</Control>;\n  }\n\n  if (ownField) {\n    return (\n      <Field\n        label={label}\n        labelSize={labelSize}\n        labelProps={fieldLabelProps}\n        horizontal={horizontal}\n        className={fieldClassName}\n      >\n        {content}\n        {messageEl}\n      </Field>\n    );\n  }\n\n  return (\n    <>\n      {content}\n      {messageEl}\n    </>\n  );\n};\n\nexport const Radios = withSubComponents(RadiosComponent, { Radio }, 'Radios');\n\nexport default Radios;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Radios.js","sources":["../../../src/form/Radios.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n  RadiosProvider,\n  RadiosGroupContextValue,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelledBy } from './useAutoLabelId';\nimport { Radio } from './Radio';\nimport { GroupFieldset } from './groupFieldset';\n\n/**\n * Props for the Radios component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n */\nexport interface RadiosProps\n  extends Omit<BulmaClassesProps, 'color'>, FormFieldProps {\n  /** Field label naming the whole group. Automatically associated via `aria-labelledby` on the `role=\"radiogroup\"` wrapper — uses your `labelProps.id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Form field name shared by every Radio in the group (via context). */\n  name?: string;\n  /** Currently-selected value (controlled mode). */\n  value?: string;\n  /** Initial selected value (uncontrolled mode). */\n  defaultValue?: string;\n  /** Fires when the selection changes. */\n  onChange?: (value: string) => void;\n  /** Radio elements to render in the group. */\n  children: React.ReactNode;\n  /**\n   * The element the group renders as. With `fieldset` it's a native\n   * `<fieldset>` that keeps `role=\"radiogroup\"`. Where the group renders a\n   * `Field` of its own, that `Field` is the `<fieldset>` and the `label` is\n   * its `<legend>`, in the label column when `horizontal`, so the legend names\n   * the group with no ids to wire. Your other attributes then go on the\n   * `<fieldset>`, while `className` and the helper props stay on the box that\n   * lays out the radios. Inside an outer `Field` there's no legend: the group\n   * element itself is the `<fieldset>`, named by that `Field`'s label as\n   * before. `div`, the default, renders the group as it always has.\n   * @defaultValue 'div'\n   */\n  as?: 'div' | 'fieldset';\n}\n\n/**\n * The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.\n *\n * @function\n * @param {RadiosProps} props - Props for the Radios component.\n * @returns {JSX.Element} The rendered radios group.\n * @see {@link https://bulma.io/documentation/form/radio/#grouped-radios | Bulma Radios documentation}\n *\n * @example\n * // Controlled\n * const [color, setColor] = useState('red');\n * <Radios name=\"color\" value={color} onChange={setColor}>\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"green\">Green</Radio>\n *   <Radio value=\"blue\">Blue</Radio>\n * </Radios>\n *\n * @example\n * // Uncontrolled\n * <Radios name=\"color\" defaultValue=\"red\" onChange={v => console.log(v)}>\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"green\">Green</Radio>\n * </Radios>\n */\nconst RadiosComponent: React.FC<RadiosProps> = ({\n  label,\n  labelSize,\n  labelProps,\n  horizontal,\n  message,\n  messageColor,\n  fieldClassName,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  children,\n  className,\n  as,\n  ...props\n}) => {\n  const insideField = useInsideField();\n  const insideControl = useInsideControl();\n  const ownField = rendersOwnField('Radios', {\n    insideField,\n    insideControl,\n    label,\n    message,\n    horizontal,\n    fieldClassName,\n  });\n  // As a fieldset with a Field of its own, the group's label is its legend,\n  // which names it with no id, so nothing points `aria-labelledby` at it.\n  const asFieldset = as === 'fieldset';\n  const fieldsetField = asFieldset && ownField;\n  const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({\n    label,\n    labelProps,\n    rendersLabel: ownField && !fieldsetField,\n    callerProps: props,\n  });\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('radios');\n  const wrapperClass = classNames(mainClass, bulmaHelperClasses, className);\n\n  const helpClass = usePrefixedClassNames('help', {\n    [`is-${messageColor}`]: !!messageColor,\n  });\n  const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n  // The group is \"active\" (manages child selection) when the user opted in by\n  // passing value, defaultValue, or onChange. Otherwise it's name-only and\n  // children manage their own checked state (Stage 1 behavior).\n  const groupActive =\n    value !== undefined || defaultValue !== undefined || onChange !== undefined;\n\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue\n  );\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalValue;\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (!isControlled) setInternalValue(newValue);\n      onChange?.(newValue);\n    },\n    [isControlled, onChange]\n  );\n\n  const ctx = useMemo<RadiosGroupContextValue>(\n    () => ({\n      name,\n      ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),\n    }),\n    [name, groupActive, currentValue, handleChange]\n  );\n\n  const choices = <RadiosProvider value={ctx}>{children}</RadiosProvider>;\n  // ARIA in HTML allows `radiogroup` on a fieldset, so it keeps the role.\n  const Group = asFieldset ? 'fieldset' : 'div';\n  const radiosElement = fieldsetField ? (\n    <div className={wrapperClass}>{choices}</div>\n  ) : (\n    <Group\n      className={wrapperClass}\n      role=\"radiogroup\"\n      aria-labelledby={ariaLabelledBy}\n      {...rest}\n    >\n      {choices}\n    </Group>\n  );\n\n  let content = radiosElement;\n\n  if (rendersOwnControl('Radios', { insideControl })) {\n    content = <Control>{content}</Control>;\n  }\n\n  if (fieldsetField) {\n    return (\n      <GroupFieldset\n        label={label}\n        labelSize={labelSize}\n        labelProps={labelProps}\n        horizontal={horizontal}\n        fieldClassName={fieldClassName}\n        role=\"radiogroup\"\n        attributes={rest}\n        message={messageEl}\n      >\n        {content}\n      </GroupFieldset>\n    );\n  }\n\n  if (ownField) {\n    return (\n      <Field\n        label={label}\n        labelSize={labelSize}\n        labelProps={fieldLabelProps}\n        horizontal={horizontal}\n        className={fieldClassName}\n      >\n        {content}\n        {messageEl}\n      </Field>\n    );\n  }\n\n  return (\n    <>\n      {content}\n      {messageEl}\n    </>\n  );\n};\n\nexport const Radios = withSubComponents(RadiosComponent, { Radio }, 'Radios');\n\nexport default Radios;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/form/Rate.js

@@ -5,7 +5,7 @@ import { usePrefixedClassNames, classNames, prefixedClassNames } from '../helper
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
 import { Icon } from '../elements/Icon.js';
 import { useIconLibrary, useClassPrefix } from '../helpers/Config.js';
-import { useInsideField, useInsideControl, rendersOwnField, rendersOwnControl } from './FormContext.js';
+import { useFieldsetDisabled, useInsideField, useInsideControl, rendersOwnField, rendersOwnControl } from './FormContext.js';
 import { Field } from './Field.js';
 import { Control } from './Control.js';
 import { useAutoLabelledBy } from './useAutoLabelId.js';
@@ -46,7 +46,8 @@ function getFillPercent(iconIndex, value) {
  * // With Font Awesome icons
  * <Rate iconName="star" iconLibrary="fa" iconVariant="solid" />
  */
-const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = 0, max = 5, size, disabled = false, showScore = false, showText = false, texts, onChange, customIcon, spaced = false, rtl = false, iconName, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, precision = 1, customText, name, form, className, ...props }, ref) => {
+const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = 0, max = 5, size, disabled: disabledProp, showScore = false, showText = false, texts, onChange, customIcon, spaced = false, rtl = false, iconName, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, precision = 1, customText, name, form, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Rate', {

package/dist/esm/form/Rate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rate.js","sources":["../../../src/form/Rate.tsx"],"sourcesContent":["import React, { forwardRef, useState, useCallback, useId } from 'react';\nimport {\n  classNames,\n  prefixedClassNames,\n  usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { Icon } from '../elements/Icon';\nimport { useClassPrefix, useIconLibrary } from '../helpers/Config';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelledBy } from './useAutoLabelId';\n\n/** Available size modifiers for the Rate component. */\nexport type RateSize = 'small' | 'medium' | 'large';\ntype IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\ntype BulmaColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Props for individual rate icons.\n */\nexport interface RateIconProps {\n  /** The index of this icon (0-based) */\n  index: number;\n  /** Whether this icon is currently active (filled) */\n  isActive: boolean;\n  /** Whether this icon is currently hovered */\n  isHovered: boolean;\n  /** The current value */\n  value: number;\n  /** Fill percentage for partial icons (0-100). Used with precision < 1. */\n  fillPercent: number;\n}\n\n/**\n * Props for the Rate component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the container element.\n */\nexport interface RateProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>,\n    Omit<BulmaClassesProps, 'size'>,\n    FormFieldProps {\n  /** Field label naming the rating group. Automatically associated via `aria-labelledby` on the `role=\"radiogroup\"` container — uses your `labelProps.id` when provided, otherwise a generated one; it also replaces the default `aria-label=\"Rating\"`. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`), and replaces the `aria-label=\"Rating\"` fallback too. An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own, and leaves the `\"Rating\"` fallback. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Form field name. When set, a hidden input is rendered. */\n  name?: string;\n  /** Optional id of the form this hidden input belongs to (use when the input lives outside the form element). */\n  form?: string;\n  /** Controlled value (0 to max). */\n  value?: number;\n  /** Default value for uncontrolled usage. */\n  defaultValue?: number;\n  /** Maximum rating value. */\n  max?: number;\n  /** Size variant. */\n  size?: RateSize;\n  /** Whether the rating is disabled. */\n  disabled?: boolean;\n  /** Show the numeric score next to stars. */\n  showScore?: boolean;\n  /** Show custom text based on value. */\n  showText?: boolean;\n  /** Array of text labels for each rating value. */\n  texts?: string[];\n  /** Callback when rating changes. */\n  onChange?: (value: number) => void;\n  /** Custom icon renderer. */\n  customIcon?: (props: RateIconProps) => React.ReactNode;\n  /** Add spacing between icons. */\n  spaced?: boolean;\n  /** Right-to-left direction. */\n  rtl?: boolean;\n  /** Custom icon name for the rating stars. */\n  iconName?: string;\n  /** Icon library to use (defaults to ConfigProvider value or 'fa'). */\n  iconLibrary?: IconLibrary;\n  /** Icon style variant (e.g., 'solid', 'outlined'). */\n  iconVariant?: string;\n  /** Additional icon modifiers. */\n  iconFeatures?: string | string[];\n  /** Color of the active rating icons. */\n  color?: BulmaColor;\n  /** Rating precision (e.g., `0.5` for half stars). */\n  precision?: number;\n  /** Custom text displayed next to the rating. */\n  customText?: string;\n}\n\n/**\n * Default star icon component.\n */\nconst StarIcon: React.FC<{ filled: boolean }> = ({ filled }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill={filled ? 'currentColor' : 'none'}\n    stroke=\"currentColor\"\n    strokeWidth={filled ? 0 : 2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"\n    />\n  </svg>\n);\n\n/** Snap a value to the nearest precision step. */\nfunction snapToPrecision(val: number, precision: number): number {\n  return Math.round(val / precision) * precision;\n}\n\n/** Get fill percentage for a given icon index based on current value. */\nfunction getFillPercent(iconIndex: number, value: number): number {\n  if (value >= iconIndex + 1) return 100;\n  if (value <= iconIndex) return 0;\n  return Math.round((value - iconIndex) * 100);\n}\n\n/**\n * The `Rate` component provides a star/icon-based rating system.\n *\n * @function\n * @param {RateProps} props - Props for the Rate component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the container element.\n * @returns {JSX.Element} The rendered rating component.\n *\n * @example\n * // Basic 5-star rating\n * <Rate defaultValue={3} />\n *\n * @example\n * // With color and precision\n * <Rate defaultValue={3.5} color=\"warning\" precision={0.5} showScore />\n *\n * @example\n * // With Font Awesome icons\n * <Rate iconName=\"star\" iconLibrary=\"fa\" iconVariant=\"solid\" />\n */\nexport const Rate = forwardRef<HTMLDivElement, RateProps>(\n  (\n    {\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      value: controlledValue,\n      defaultValue = 0,\n      max = 5,\n      size,\n      disabled = false,\n      showScore = false,\n      showText = false,\n      texts,\n      onChange,\n      customIcon,\n      spaced = false,\n      rtl = false,\n      iconName,\n      iconLibrary: iconLibraryProp,\n      iconVariant,\n      iconFeatures,\n      color,\n      precision = 1,\n      customText,\n      name,\n      form,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const insideField = useInsideField();\n    const insideControl = useInsideControl();\n    const ownField = rendersOwnField('Rate', {\n      insideField,\n      insideControl,\n      label,\n      message,\n      horizontal,\n      fieldClassName,\n    });\n    const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({\n      label,\n      labelProps,\n      rendersLabel: ownField,\n      callerProps: props,\n    });\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const starBaseId = useId();\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n\n    const defaultIconLibrary = useIconLibrary();\n    const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';\n\n    // Determine if controlled\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const displayValue = hoverValue !== null ? hoverValue : currentValue;\n\n    // Update value\n    const updateValue = useCallback(\n      (newValue: number) => {\n        if (disabled) return;\n\n        // Allow clicking same value to deselect (set to 0)\n        const finalValue = newValue === currentValue ? 0 : newValue;\n\n        if (!isControlled) {\n          setInternalValue(finalValue);\n        }\n        onChange?.(finalValue);\n      },\n      [isControlled, currentValue, disabled, onChange]\n    );\n\n    // Handle click with precision support\n    const handleClick = useCallback(\n      (iconIndex: number, e: React.MouseEvent<HTMLSpanElement>) => {\n        if (disabled) return;\n\n        if (precision < 1) {\n          const rect = e.currentTarget.getBoundingClientRect();\n          let relativeX = (e.clientX - rect.left) / rect.width;\n          if (rtl) relativeX = 1 - relativeX;\n          const rawValue = iconIndex + relativeX;\n          const snapped = snapToPrecision(rawValue, precision);\n          const clamped = Math.max(precision, Math.min(snapped, max));\n          updateValue(clamped);\n        } else {\n          updateValue(iconIndex + 1);\n        }\n      },\n      [disabled, precision, rtl, max, updateValue]\n    );\n\n    // Handle mouse enter on icon\n    const handleMouseEnter = useCallback(\n      (iconIndex: number) => {\n        if (disabled) return;\n        setHoverValue(iconIndex + 1);\n      },\n      [disabled]\n    );\n\n    // Handle mouse move with precision support\n    const handleMouseMove = useCallback(\n      (iconIndex: number, e: React.MouseEvent<HTMLSpanElement>) => {\n        if (disabled || precision >= 1) return;\n        const rect = e.currentTarget.getBoundingClientRect();\n        let relativeX = (e.clientX - rect.left) / rect.width;\n        if (rtl) relativeX = 1 - relativeX;\n        const rawValue = iconIndex + relativeX;\n        const snapped = snapToPrecision(rawValue, precision);\n        const clamped = Math.max(precision, Math.min(snapped, max));\n        setHoverValue(clamped);\n      },\n      [disabled, precision, rtl, max]\n    );\n\n    // Handle mouse leave\n    const handleMouseLeave = useCallback(() => {\n      setHoverValue(null);\n    }, []);\n\n    // Handle keyboard\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (disabled) return;\n\n        let newValue = currentValue;\n        const step = precision < 1 ? precision : 1;\n\n        if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n          e.preventDefault();\n          newValue = Math.min(currentValue + step, max);\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n          e.preventDefault();\n          newValue = Math.max(currentValue - step, 0);\n        } else if (e.key === 'Home') {\n          e.preventDefault();\n          newValue = 0;\n        } else if (e.key === 'End') {\n          e.preventDefault();\n          newValue = max;\n        }\n\n        // Round to avoid floating point issues\n        newValue = Math.round(newValue * 1000) / 1000;\n\n        if (newValue !== currentValue) {\n          if (!isControlled) {\n            setInternalValue(newValue);\n          }\n          onChange?.(newValue);\n        }\n      },\n      [currentValue, max, precision, disabled, isControlled, onChange]\n    );\n\n    // Get text for current value\n    const getText = () => {\n      if (!showText || !texts) return null;\n      const wholeIndex = Math.ceil(displayValue) - 1;\n      const baseText = texts[wholeIndex] || null;\n      if (!baseText) return null;\n      // For fractional hover values with precision < 1, append \"+\"\n      if (precision < 1 && hoverValue !== null && hoverValue % 1 !== 0) {\n        return `${baseText}+`;\n      }\n      return baseText;\n    };\n\n    // Format score display\n    const getScoreDisplay = () => {\n      if (precision < 1 && currentValue % 1 !== 0) {\n        return currentValue.toFixed(1);\n      }\n      return currentValue;\n    };\n\n    // Generate classes\n    const classPrefix = useClassPrefix();\n    const rateClasses = usePrefixedClassNames('rate', {\n      [`is-${size}`]: size,\n      'is-disabled': disabled,\n      'is-spaced': spaced,\n      'is-rtl': rtl,\n      [`is-${color}`]: color,\n    });\n\n    const combinedClasses = classNames(\n      rateClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    // Render a single icon based on priority: customIcon > iconName > default SVG\n    const renderIcon = (\n      iconIndex: number,\n      isActive: boolean,\n      fillPercent: number\n    ) => {\n      const iconProps: RateIconProps = {\n        index: iconIndex,\n        isActive,\n        isHovered: hoverValue !== null && iconIndex < hoverValue,\n        value: displayValue,\n        fillPercent,\n      };\n\n      if (customIcon) {\n        return customIcon(iconProps);\n      }\n\n      if (iconName) {\n        return (\n          <Icon\n            name={iconName}\n            library={resolvedLibrary}\n            variant={iconVariant}\n            features={iconFeatures}\n          />\n        );\n      }\n\n      return <StarIcon filled={isActive} />;\n    };\n\n    // Render partial icon with layered approach\n    const renderPartialIcon = (iconIndex: number, fillPercent: number) => {\n      if (customIcon) {\n        // For custom icons, pass fillPercent and let consumer handle it\n        const iconProps: RateIconProps = {\n          index: iconIndex,\n          isActive: fillPercent > 0,\n          isHovered: hoverValue !== null && iconIndex < (hoverValue ?? 0),\n          value: displayValue,\n          fillPercent,\n        };\n        return customIcon(iconProps);\n      }\n\n      if (iconName) {\n        return (\n          <span\n            className={prefixedClassNames(classPrefix, 'rate-icon-partial')}\n            style={\n              {\n                '--rate-fill-percent': `${fillPercent}%`,\n              } as React.CSSProperties\n            }\n          >\n            <span className={prefixedClassNames(classPrefix, 'rate-icon-bg')}>\n              <Icon\n                name={iconName}\n                library={resolvedLibrary}\n                variant={iconVariant}\n                features={iconFeatures}\n              />\n            </span>\n            <span className={prefixedClassNames(classPrefix, 'rate-icon-fg')}>\n              <Icon\n                name={iconName}\n                library={resolvedLibrary}\n                variant={iconVariant}\n                features={iconFeatures}\n              />\n            </span>\n          </span>\n        );\n      }\n\n      // Default SVG with clipPath for partial fill\n      const clipId = `rate-clip-${iconIndex}`;\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <defs>\n            <clipPath id={clipId}>\n              <rect\n                x=\"0\"\n                y=\"0\"\n                width={`${(fillPercent / 100) * 24}`}\n                height=\"24\"\n              />\n            </clipPath>\n          </defs>\n          {/* Background: empty star */}\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"\n          />\n          {/* Foreground: filled portion */}\n          <path\n            clipPath={`url(#${clipId})`}\n            fill=\"currentColor\"\n            d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"\n          />\n        </svg>\n      );\n    };\n\n    // The star the value falls in is the checked radio, and it carries the\n    // value: a radiogroup takes no aria-value* of its own. A fractional value\n    // names that star by the value itself (\"3.5 stars\"). Both go by the value\n    // as that name writes it, to hundredths, so a value a hair over a whole\n    // number checks that number's star under its own name, and no two stars\n    // share a name.\n    const shownValue = Number(currentValue.toFixed(2));\n    const checkedIndex =\n      shownValue > 0 ? Math.min(Math.ceil(shownValue), max) - 1 : -1;\n\n    // Render icons\n    const renderIcons = () => {\n      const icons = [];\n\n      for (let i = 0; i < max; i++) {\n        const iconIndex = rtl ? max - 1 - i : i;\n        const fillPercent = getFillPercent(iconIndex, displayValue);\n        const isActive = fillPercent === 100;\n        const isHovered = hoverValue !== null && iconIndex < hoverValue;\n        const isPartial = fillPercent > 0 && fillPercent < 100;\n\n        const icon = isPartial\n          ? renderPartialIcon(iconIndex, fillPercent)\n          : renderIcon(iconIndex, isActive, fillPercent);\n\n        icons.push(\n          <span\n            key={iconIndex}\n            className={prefixedClassNames(classPrefix, 'rate-item', {\n              'is-active': isActive,\n              'is-hovered': isHovered,\n            })}\n            onClick={e => handleClick(iconIndex, e)}\n            onMouseEnter={() => handleMouseEnter(iconIndex)}\n            onMouseMove={e => handleMouseMove(iconIndex, e)}\n            onMouseLeave={handleMouseLeave}\n            id={`${starBaseId}-${iconIndex}`}\n            role=\"radio\"\n            aria-checked={iconIndex === checkedIndex}\n            aria-label={\n              iconIndex === checkedIndex && shownValue % 1 !== 0\n                ? `${shownValue} stars`\n                : `${iconIndex + 1} star${iconIndex === 0 ? '' : 's'}`\n            }\n            tabIndex={-1}\n          >\n            {icon}\n          </span>\n        );\n      }\n\n      return icons;\n    };\n\n    const text = getText();\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    const rateItemsClass = usePrefixedClassNames('rate-items');\n    const rateScoreClass = usePrefixedClassNames('rate-score');\n    const rateTextClass = usePrefixedClassNames('rate-text');\n    const rateCustomTextClass = usePrefixedClassNames('rate-custom-text');\n\n    const rateElement = (\n      <div\n        ref={ref}\n        className={combinedClasses}\n        role=\"radiogroup\"\n        // Fallback name only: a wired label names the group via labelledby.\n        aria-label={ariaLabelledBy ? undefined : 'Rating'}\n        aria-labelledby={ariaLabelledBy}\n        // Focus stays on the group, so point it at the checked star for\n        // assistive technology to announce as the value changes.\n        aria-activedescendant={\n          checkedIndex >= 0 ? `${starBaseId}-${checkedIndex}` : undefined\n        }\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        <div className={rateItemsClass}>{renderIcons()}</div>\n        {showScore && (\n          <span className={rateScoreClass}>{getScoreDisplay()}</span>\n        )}\n        {text && <span className={rateTextClass}>{text}</span>}\n        {customText && (\n          <span className={rateCustomTextClass}>{customText}</span>\n        )}\n        {name && (\n          <input type=\"hidden\" name={name} value={currentValue} form={form} />\n        )}\n      </div>\n    );\n\n    let content = rateElement;\n\n    if (rendersOwnControl('Rate', { insideControl })) {\n      content = <Control>{content}</Control>;\n    }\n\n    if (ownField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {content}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {content}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nRate.displayName = 'Rate';\n\nexport default Rate;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;AA6GA;;AAEG;AACH,MAAM,QAAQ,GAAkC,CAAC,EAAE,MAAM,EAAE,MACzDA,GAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,MAAM,EACtC,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,iBACf,MAAM,EAAA,QAAA,EAElBA,GAAA,CAAA,MAAA,EAAA,EACE,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,yWAAyW,EAAA,CAC3W,EAAA,CACE,CACP;AAED;AACA,SAAS,eAAe,CAAC,GAAW,EAAE,SAAiB,EAAA;IACrD,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,SAAS;AAChD;AAEA;AACA,SAAS,cAAc,CAAC,SAAiB,EAAE,KAAa,EAAA;AACtD,IAAA,IAAI,KAAK,IAAI,SAAS,GAAG,CAAC;AAAE,QAAA,OAAO,GAAG;IACtC,IAAI,KAAK,IAAI,SAAS;AAAE,QAAA,OAAO,CAAC;AAChC,IAAA,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,SAAS,IAAI,GAAG,CAAC;AAC9C;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;MACU,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,OAAO,EACP,YAAY,EACZ,cAAc,EACd,KAAK,EAAE,eAAe,EACtB,YAAY,GAAG,CAAC,EAChB,GAAG,GAAG,CAAC,EACP,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,MAAM,GAAG,KAAK,EACd,GAAG,GAAG,KAAK,EACX,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,WAAW,EACX,YAAY,EACZ,KAAK,EACL,SAAS,GAAG,CAAC,EACb,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,WAAW,GAAG,cAAc,EAAE;AACpC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;AACxC,IAAA,MAAM,QAAQ,GAAG,eAAe,CAAC,MAAM,EAAE;QACvC,WAAW;QACX,aAAa;QACb,KAAK;QACL,OAAO;QACP,UAAU;QACV,cAAc;AACf,KAAA,CAAC;AACF,IAAA,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,iBAAiB,CAAC;QAC5D,KAAK;QACL,UAAU;AACV,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,WAAW,EAAE,KAAK;AACnB,KAAA,CAAC;IACF,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,UAAU,GAAG,KAAK,EAAE;IAC1B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC;IAChE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC;AAEjE,IAAA,MAAM,kBAAkB,GAAG,cAAc,EAAE;AAC3C,IAAA,MAAM,eAAe,GAAG,eAAe,IAAI,kBAAkB,IAAI,IAAI;;AAGrE,IAAA,MAAM,YAAY,GAAG,eAAe,KAAK,SAAS;IAClD,MAAM,YAAY,GAAG,YAAY,GAAG,eAAe,GAAG,aAAa;AACnE,IAAA,MAAM,YAAY,GAAG,UAAU,KAAK,IAAI,GAAG,UAAU,GAAG,YAAY;;AAGpE,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,QAAgB,KAAI;AACnB,QAAA,IAAI,QAAQ;YAAE;;AAGd,QAAA,MAAM,UAAU,GAAG,QAAQ,KAAK,YAAY,GAAG,CAAC,GAAG,QAAQ;QAE3D,IAAI,CAAC,YAAY,EAAE;YACjB,gBAAgB,CAAC,UAAU,CAAC;QAC9B;AACA,QAAA,QAAQ,GAAG,UAAU,CAAC;IACxB,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,CACjD;;IAGD,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,SAAiB,EAAE,CAAoC,KAAI;AAC1D,QAAA,IAAI,QAAQ;YAAE;AAEd,QAAA,IAAI,SAAS,GAAG,CAAC,EAAE;YACjB,MAAM,IAAI,GAAG,CAAC,CAAC,aAAa,CAAC,qBAAqB,EAAE;AACpD,YAAA,IAAI,SAAS,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK;AACpD,YAAA,IAAI,GAAG;AAAE,gBAAA,SAAS,GAAG,CAAC,GAAG,SAAS;AAClC,YAAA,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS;YACtC,MAAM,OAAO,GAAG,eAAe,CAAC,QAAQ,EAAE,SAAS,CAAC;AACpD,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;YAC3D,WAAW,CAAC,OAAO,CAAC;QACtB;aAAO;AACL,YAAA,WAAW,CAAC,SAAS,GAAG,CAAC,CAAC;QAC5B;AACF,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC,CAC7C;;AAGD,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,SAAiB,KAAI;AACpB,QAAA,IAAI,QAAQ;YAAE;AACd,QAAA,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC;AAC9B,IAAA,CAAC,EACD,CAAC,QAAQ,CAAC,CACX;;IAGD,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,SAAiB,EAAE,CAAoC,KAAI;AAC1D,QAAA,IAAI,QAAQ,IAAI,SAAS,IAAI,CAAC;YAAE;QAChC,MAAM,IAAI,GAAG,CAAC,CAAC,aAAa,CAAC,qBAAqB,EAAE;AACpD,QAAA,IAAI,SAAS,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK;AACpD,QAAA,IAAI,GAAG;AAAE,YAAA,SAAS,GAAG,CAAC,GAAG,SAAS;AAClC,QAAA,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS;QACtC,MAAM,OAAO,GAAG,eAAe,CAAC,QAAQ,EAAE,SAAS,CAAC;AACpD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAC3D,aAAa,CAAC,OAAO,CAAC;IACxB,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,CAChC;;AAGD,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAK;QACxC,aAAa,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC;;AAGN,IAAA,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAsB,KAAI;AACzB,QAAA,IAAI,QAAQ;YAAE;QAEd,IAAI,QAAQ,GAAG,YAAY;AAC3B,QAAA,MAAM,IAAI,GAAG,SAAS,GAAG,CAAC,GAAG,SAAS,GAAG,CAAC;AAE1C,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE;YACjD,CAAC,CAAC,cAAc,EAAE;YAClB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,IAAI,EAAE,GAAG,CAAC;QAC/C;AAAO,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YACzD,CAAC,CAAC,cAAc,EAAE;YAClB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,IAAI,EAAE,CAAC,CAAC;QAC7C;AAAO,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,EAAE;YAC3B,CAAC,CAAC,cAAc,EAAE;YAClB,QAAQ,GAAG,CAAC;QACd;AAAO,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YAC1B,CAAC,CAAC,cAAc,EAAE;YAClB,QAAQ,GAAG,GAAG;QAChB;;QAGA,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,IAAI;AAE7C,QAAA,IAAI,QAAQ,KAAK,YAAY,EAAE;YAC7B,IAAI,CAAC,YAAY,EAAE;gBACjB,gBAAgB,CAAC,QAAQ,CAAC;YAC5B;AACA,YAAA,QAAQ,GAAG,QAAQ,CAAC;QACtB;AACF,IAAA,CAAC,EACD,CAAC,YAAY,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC,CACjE;;IAGD,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,IAAI;QACpC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC;QAC9C,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,IAAI;AAC1C,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,IAAI;;AAE1B,QAAA,IAAI,SAAS,GAAG,CAAC,IAAI,UAAU,KAAK,IAAI,IAAI,UAAU,GAAG,CAAC,KAAK,CAAC,EAAE;YAChE,OAAO,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAG;QACvB;AACA,QAAA,OAAO,QAAQ;AACjB,IAAA,CAAC;;IAGD,MAAM,eAAe,GAAG,MAAK;QAC3B,IAAI,SAAS,GAAG,CAAC,IAAI,YAAY,GAAG,CAAC,KAAK,CAAC,EAAE;AAC3C,YAAA,OAAO,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;QAChC;AACA,QAAA,OAAO,YAAY;AACrB,IAAA,CAAC;;AAGD,IAAA,MAAM,WAAW,GAAG,cAAc,EAAE;AACpC,IAAA,MAAM,WAAW,GAAG,qBAAqB,CAAC,MAAM,EAAE;AAChD,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI;AACpB,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,WAAW,EAAE,MAAM;AACnB,QAAA,QAAQ,EAAE,GAAG;AACb,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK;AACvB,KAAA,CAAC;IAEF,MAAM,eAAe,GAAG,UAAU,CAChC,WAAW,EACX,kBAAkB,EAClB,SAAS,CACV;;IAGD,MAAM,UAAU,GAAG,CACjB,SAAiB,EACjB,QAAiB,EACjB,WAAmB,KACjB;AACF,QAAA,MAAM,SAAS,GAAkB;AAC/B,YAAA,KAAK,EAAE,SAAS;YAChB,QAAQ;AACR,YAAA,SAAS,EAAE,UAAU,KAAK,IAAI,IAAI,SAAS,GAAG,UAAU;AACxD,YAAA,KAAK,EAAE,YAAY;YACnB,WAAW;SACZ;QAED,IAAI,UAAU,EAAE;AACd,YAAA,OAAO,UAAU,CAAC,SAAS,CAAC;QAC9B;QAEA,IAAI,QAAQ,EAAE;YACZ,QACEA,IAAC,IAAI,EAAA,EACH,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EAAA,CACtB;QAEN;AAEA,QAAA,OAAOA,IAAC,QAAQ,EAAA,EAAC,MAAM,EAAE,QAAQ,GAAI;AACvC,IAAA,CAAC;;AAGD,IAAA,MAAM,iBAAiB,GAAG,CAAC,SAAiB,EAAE,WAAmB,KAAI;QACnE,IAAI,UAAU,EAAE;;AAEd,YAAA,MAAM,SAAS,GAAkB;AAC/B,gBAAA,KAAK,EAAE,SAAS;gBAChB,QAAQ,EAAE,WAAW,GAAG,CAAC;gBACzB,SAAS,EAAE,UAAU,KAAK,IAAI,IAAI,SAAS,IAAI,UAAU,IAAI,CAAC,CAAC;AAC/D,gBAAA,KAAK,EAAE,YAAY;gBACnB,WAAW;aACZ;AACD,YAAA,OAAO,UAAU,CAAC,SAAS,CAAC;QAC9B;QAEA,IAAI,QAAQ,EAAE;AACZ,YAAA,QACEC,IAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,mBAAmB,CAAC,EAC/D,KAAK,EACH;oBACE,qBAAqB,EAAE,CAAA,EAAG,WAAW,CAAA,CAAA,CAAG;AAClB,iBAAA,EAAA,QAAA,EAAA,CAG1BD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,cAAc,CAAC,EAAA,QAAA,EAC9DA,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,GACtB,EAAA,CACG,EACPA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,cAAc,CAAC,EAAA,QAAA,EAC9DA,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EAAA,CACtB,EAAA,CACG,CAAA,EAAA,CACF;QAEX;;AAGA,QAAA,MAAM,MAAM,GAAG,CAAA,UAAA,EAAa,SAAS,EAAE;AACvC,QAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,iBACP,MAAM,EAAA,QAAA,EAAA,CAElBD,wBACEA,GAAA,CAAA,UAAA,EAAA,EAAU,EAAE,EAAE,MAAM,EAAA,QAAA,EAClBA,cACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAE,GAAG,CAAC,WAAW,GAAG,GAAG,IAAI,EAAE,CAAA,CAAE,EACpC,MAAM,EAAC,IAAI,EAAA,CACX,EAAA,CACO,EAAA,CACN,EAEPA,cACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,yWAAyW,GAC3W,EAEFA,GAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAE,CAAA,KAAA,EAAQ,MAAM,CAAA,CAAA,CAAG,EAC3B,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,yWAAyW,EAAA,CAC3W,CAAA,EAAA,CACE;AAEV,IAAA,CAAC;;;;;;;IAQD,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClD,IAAA,MAAM,YAAY,GAChB,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE;;IAGhE,MAAM,WAAW,GAAG,MAAK;QACvB,MAAM,KAAK,GAAG,EAAE;AAEhB,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE;AAC5B,YAAA,MAAM,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;YACvC,MAAM,WAAW,GAAG,cAAc,CAAC,SAAS,EAAE,YAAY,CAAC;AAC3D,YAAA,MAAM,QAAQ,GAAG,WAAW,KAAK,GAAG;YACpC,MAAM,SAAS,GAAG,UAAU,KAAK,IAAI,IAAI,SAAS,GAAG,UAAU;YAC/D,MAAM,SAAS,GAAG,WAAW,GAAG,CAAC,IAAI,WAAW,GAAG,GAAG;YAEtD,MAAM,IAAI,GAAG;AACX,kBAAE,iBAAiB,CAAC,SAAS,EAAE,WAAW;kBACxC,UAAU,CAAC,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAC;YAEhD,KAAK,CAAC,IAAI,CACRA,GAAA,CAAA,MAAA,EAAA,EAEE,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,WAAW,EAAE;AACtD,oBAAA,WAAW,EAAE,QAAQ;AACrB,oBAAA,YAAY,EAAE,SAAS;AACxB,iBAAA,CAAC,EACF,OAAO,EAAE,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,EACvC,YAAY,EAAE,MAAM,gBAAgB,CAAC,SAAS,CAAC,EAC/C,WAAW,EAAE,CAAC,IAAI,eAAe,CAAC,SAAS,EAAE,CAAC,CAAC,EAC/C,YAAY,EAAE,gBAAgB,EAC9B,EAAE,EAAE,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,EAChC,IAAI,EAAC,OAAO,EAAA,cAAA,EACE,SAAS,KAAK,YAAY,EAAA,YAAA,EAEtC,SAAS,KAAK,YAAY,IAAI,UAAU,GAAG,CAAC,KAAK;sBAC7C,CAAA,EAAG,UAAU,CAAA,MAAA;AACf,sBAAE,CAAA,EAAG,SAAS,GAAG,CAAC,CAAA,KAAA,EAAQ,SAAS,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,CAAA,CAAE,EAE1D,QAAQ,EAAE,EAAE,EAAA,QAAA,EAEX,IAAI,EAAA,EAnBA,SAAS,CAoBT,CACR;QACH;AAEA,QAAA,OAAO,KAAK;AACd,IAAA,CAAC;AAED,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AAEtB,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,EAAE;AAC9C,QAAA,CAAC,MAAM,YAAY,CAAA,CAAE,GAAG,CAAC,CAAC,YAAY;AACvC,KAAA,CAAC;AACF,IAAA,MAAM,SAAS,GAAG,OAAO,GAAGA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,SAAS,YAAG,OAAO,EAAA,CAAK,GAAG,IAAI;AAEzE,IAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,YAAY,CAAC;AAC1D,IAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,YAAY,CAAC;AAC1D,IAAA,MAAM,aAAa,GAAG,qBAAqB,CAAC,WAAW,CAAC;AACxD,IAAA,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,kBAAkB,CAAC;AAErE,IAAA,MAAM,WAAW,IACfC,IAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAC,YAAY,EAAA,YAAA,EAEL,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAA,iBAAA,EAChC,cAAc,EAAA,uBAAA,EAI7B,YAAY,IAAI,CAAC,GAAG,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,YAAY,CAAA,CAAE,GAAG,SAAS,EAEjE,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,CAAC,EAC3B,SAAS,EAAE,aAAa,EAAA,GACpB,IAAI,aAERD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,cAAc,EAAA,QAAA,EAAG,WAAW,EAAE,EAAA,CAAO,EACpD,SAAS,KACRA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,cAAc,EAAA,QAAA,EAAG,eAAe,EAAE,EAAA,CAAQ,CAC5D,EACA,IAAI,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,aAAa,EAAA,QAAA,EAAG,IAAI,EAAA,CAAQ,EACrD,UAAU,KACTA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,mBAAmB,EAAA,QAAA,EAAG,UAAU,EAAA,CAAQ,CAC1D,EACA,IAAI,KACHA,GAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAA,CAAI,CACrE,CAAA,EAAA,CACG,CACP;IAED,IAAI,OAAO,GAAG,WAAW;IAEzB,IAAI,iBAAiB,CAAC,MAAM,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;AAChD,QAAA,OAAO,GAAGA,GAAA,CAAC,OAAO,EAAA,EAAA,QAAA,EAAE,OAAO,GAAW;IACxC;IAEA,IAAI,QAAQ,EAAE;AACZ,QAAA,QACEC,IAAA,CAAC,KAAK,EAAA,EACJ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,cAAc,EAAA,QAAA,EAAA,CAExB,OAAO,EACP,SAAS,CAAA,EAAA,CACJ;IAEZ;AAEA,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,OAAO,EACP,SAAS,CAAA,EAAA,CACT;AAEP,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;"}
+{"version":3,"file":"Rate.js","sources":["../../../src/form/Rate.tsx"],"sourcesContent":["import React, { forwardRef, useState, useCallback, useId } from 'react';\nimport {\n  classNames,\n  prefixedClassNames,\n  usePrefixedClassNames,\n} from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { Icon } from '../elements/Icon';\nimport { useClassPrefix, useIconLibrary } from '../helpers/Config';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n  useFieldsetDisabled,\n} from './FormContext';\nimport { Field } from './Field';\nimport { Control } from './Control';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelledBy } from './useAutoLabelId';\n\n/** Available size modifiers for the Rate component. */\nexport type RateSize = 'small' | 'medium' | 'large';\ntype IconLibrary = 'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols';\ntype BulmaColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Props for individual rate icons.\n */\nexport interface RateIconProps {\n  /** The index of this icon (0-based) */\n  index: number;\n  /** Whether this icon is currently active (filled) */\n  isActive: boolean;\n  /** Whether this icon is currently hovered */\n  isHovered: boolean;\n  /** The current value */\n  value: number;\n  /** Fill percentage for partial icons (0-100). Used with precision < 1. */\n  fillPercent: number;\n}\n\n/**\n * Props for the Rate component.\n * Inside an existing `Control` it renders no `Control` of its own. Inside an\n * outer `Field`, or a `Control` with no `Field` around it, it renders no\n * `Field` of its own either. The exception is `label`, `message`, `horizontal`\n * or `fieldClassName` in that bare `Control`: it keeps a `Field` for them,\n * nested in the `.control`, and warns in development. Wrap the `Control` in a\n * `Field` instead, and set the `label`, `horizontal` and class name on that\n * `Field`.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the container element.\n */\nexport interface RateProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'>,\n    Omit<BulmaClassesProps, 'size'>,\n    FormFieldProps {\n  /** Field label naming the rating group. Automatically associated via `aria-labelledby` on the `role=\"radiogroup\"` container — uses your `labelProps.id` when provided, otherwise a generated one; it also replaces the default `aria-label=\"Rating\"`. Dropped inside an outer `Field`, whose own label names the group instead through `aria-labelledby` when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`), and replaces the `aria-label=\"Rating\"` fallback too. An `aria-label` or `aria-labelledby` you set on the group wins over either label, which still renders but no longer names it. An `aria-labelledby` key counts even when undefined, since it is spread over the group's own, and leaves the `\"Rating\"` fallback. */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `id` here is used as the `aria-labelledby` target instead of a generated one; any `htmlFor` is ignored (a group label names the group, never a single control). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Form field name. When set, a hidden input is rendered. */\n  name?: string;\n  /** Optional id of the form this hidden input belongs to (use when the input lives outside the form element). */\n  form?: string;\n  /** Controlled value (0 to max). */\n  value?: number;\n  /** Default value for uncontrolled usage. */\n  defaultValue?: number;\n  /** Maximum rating value. */\n  max?: number;\n  /** Size variant. */\n  size?: RateSize;\n  /** Whether the rating is disabled. */\n  disabled?: boolean;\n  /** Show the numeric score next to stars. */\n  showScore?: boolean;\n  /** Show custom text based on value. */\n  showText?: boolean;\n  /** Array of text labels for each rating value. */\n  texts?: string[];\n  /** Callback when rating changes. */\n  onChange?: (value: number) => void;\n  /** Custom icon renderer. */\n  customIcon?: (props: RateIconProps) => React.ReactNode;\n  /** Add spacing between icons. */\n  spaced?: boolean;\n  /** Right-to-left direction. */\n  rtl?: boolean;\n  /** Custom icon name for the rating stars. */\n  iconName?: string;\n  /** Icon library to use (defaults to ConfigProvider value or 'fa'). */\n  iconLibrary?: IconLibrary;\n  /** Icon style variant (e.g., 'solid', 'outlined'). */\n  iconVariant?: string;\n  /** Additional icon modifiers. */\n  iconFeatures?: string | string[];\n  /** Color of the active rating icons. */\n  color?: BulmaColor;\n  /** Rating precision (e.g., `0.5` for half stars). */\n  precision?: number;\n  /** Custom text displayed next to the rating. */\n  customText?: string;\n}\n\n/**\n * Default star icon component.\n */\nconst StarIcon: React.FC<{ filled: boolean }> = ({ filled }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill={filled ? 'currentColor' : 'none'}\n    stroke=\"currentColor\"\n    strokeWidth={filled ? 0 : 2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"\n    />\n  </svg>\n);\n\n/** Snap a value to the nearest precision step. */\nfunction snapToPrecision(val: number, precision: number): number {\n  return Math.round(val / precision) * precision;\n}\n\n/** Get fill percentage for a given icon index based on current value. */\nfunction getFillPercent(iconIndex: number, value: number): number {\n  if (value >= iconIndex + 1) return 100;\n  if (value <= iconIndex) return 0;\n  return Math.round((value - iconIndex) * 100);\n}\n\n/**\n * The `Rate` component provides a star/icon-based rating system.\n *\n * @function\n * @param {RateProps} props - Props for the Rate component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the container element.\n * @returns {JSX.Element} The rendered rating component.\n *\n * @example\n * // Basic 5-star rating\n * <Rate defaultValue={3} />\n *\n * @example\n * // With color and precision\n * <Rate defaultValue={3.5} color=\"warning\" precision={0.5} showScore />\n *\n * @example\n * // With Font Awesome icons\n * <Rate iconName=\"star\" iconLibrary=\"fa\" iconVariant=\"solid\" />\n */\nexport const Rate = forwardRef<HTMLDivElement, RateProps>(\n  (\n    {\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      value: controlledValue,\n      defaultValue = 0,\n      max = 5,\n      size,\n      disabled: disabledProp,\n      showScore = false,\n      showText = false,\n      texts,\n      onChange,\n      customIcon,\n      spaced = false,\n      rtl = false,\n      iconName,\n      iconLibrary: iconLibraryProp,\n      iconVariant,\n      iconFeatures,\n      color,\n      precision = 1,\n      customText,\n      name,\n      form,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const insideField = useInsideField();\n    const insideControl = useInsideControl();\n    const ownField = rendersOwnField('Rate', {\n      insideField,\n      insideControl,\n      label,\n      message,\n      horizontal,\n      fieldClassName,\n    });\n    const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({\n      label,\n      labelProps,\n      rendersLabel: ownField,\n      callerProps: props,\n    });\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const starBaseId = useId();\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n\n    const defaultIconLibrary = useIconLibrary();\n    const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';\n\n    // Determine if controlled\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const displayValue = hoverValue !== null ? hoverValue : currentValue;\n\n    // Update value\n    const updateValue = useCallback(\n      (newValue: number) => {\n        if (disabled) return;\n\n        // Allow clicking same value to deselect (set to 0)\n        const finalValue = newValue === currentValue ? 0 : newValue;\n\n        if (!isControlled) {\n          setInternalValue(finalValue);\n        }\n        onChange?.(finalValue);\n      },\n      [isControlled, currentValue, disabled, onChange]\n    );\n\n    // Handle click with precision support\n    const handleClick = useCallback(\n      (iconIndex: number, e: React.MouseEvent<HTMLSpanElement>) => {\n        if (disabled) return;\n\n        if (precision < 1) {\n          const rect = e.currentTarget.getBoundingClientRect();\n          let relativeX = (e.clientX - rect.left) / rect.width;\n          if (rtl) relativeX = 1 - relativeX;\n          const rawValue = iconIndex + relativeX;\n          const snapped = snapToPrecision(rawValue, precision);\n          const clamped = Math.max(precision, Math.min(snapped, max));\n          updateValue(clamped);\n        } else {\n          updateValue(iconIndex + 1);\n        }\n      },\n      [disabled, precision, rtl, max, updateValue]\n    );\n\n    // Handle mouse enter on icon\n    const handleMouseEnter = useCallback(\n      (iconIndex: number) => {\n        if (disabled) return;\n        setHoverValue(iconIndex + 1);\n      },\n      [disabled]\n    );\n\n    // Handle mouse move with precision support\n    const handleMouseMove = useCallback(\n      (iconIndex: number, e: React.MouseEvent<HTMLSpanElement>) => {\n        if (disabled || precision >= 1) return;\n        const rect = e.currentTarget.getBoundingClientRect();\n        let relativeX = (e.clientX - rect.left) / rect.width;\n        if (rtl) relativeX = 1 - relativeX;\n        const rawValue = iconIndex + relativeX;\n        const snapped = snapToPrecision(rawValue, precision);\n        const clamped = Math.max(precision, Math.min(snapped, max));\n        setHoverValue(clamped);\n      },\n      [disabled, precision, rtl, max]\n    );\n\n    // Handle mouse leave\n    const handleMouseLeave = useCallback(() => {\n      setHoverValue(null);\n    }, []);\n\n    // Handle keyboard\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (disabled) return;\n\n        let newValue = currentValue;\n        const step = precision < 1 ? precision : 1;\n\n        if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n          e.preventDefault();\n          newValue = Math.min(currentValue + step, max);\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n          e.preventDefault();\n          newValue = Math.max(currentValue - step, 0);\n        } else if (e.key === 'Home') {\n          e.preventDefault();\n          newValue = 0;\n        } else if (e.key === 'End') {\n          e.preventDefault();\n          newValue = max;\n        }\n\n        // Round to avoid floating point issues\n        newValue = Math.round(newValue * 1000) / 1000;\n\n        if (newValue !== currentValue) {\n          if (!isControlled) {\n            setInternalValue(newValue);\n          }\n          onChange?.(newValue);\n        }\n      },\n      [currentValue, max, precision, disabled, isControlled, onChange]\n    );\n\n    // Get text for current value\n    const getText = () => {\n      if (!showText || !texts) return null;\n      const wholeIndex = Math.ceil(displayValue) - 1;\n      const baseText = texts[wholeIndex] || null;\n      if (!baseText) return null;\n      // For fractional hover values with precision < 1, append \"+\"\n      if (precision < 1 && hoverValue !== null && hoverValue % 1 !== 0) {\n        return `${baseText}+`;\n      }\n      return baseText;\n    };\n\n    // Format score display\n    const getScoreDisplay = () => {\n      if (precision < 1 && currentValue % 1 !== 0) {\n        return currentValue.toFixed(1);\n      }\n      return currentValue;\n    };\n\n    // Generate classes\n    const classPrefix = useClassPrefix();\n    const rateClasses = usePrefixedClassNames('rate', {\n      [`is-${size}`]: size,\n      'is-disabled': disabled,\n      'is-spaced': spaced,\n      'is-rtl': rtl,\n      [`is-${color}`]: color,\n    });\n\n    const combinedClasses = classNames(\n      rateClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    // Render a single icon based on priority: customIcon > iconName > default SVG\n    const renderIcon = (\n      iconIndex: number,\n      isActive: boolean,\n      fillPercent: number\n    ) => {\n      const iconProps: RateIconProps = {\n        index: iconIndex,\n        isActive,\n        isHovered: hoverValue !== null && iconIndex < hoverValue,\n        value: displayValue,\n        fillPercent,\n      };\n\n      if (customIcon) {\n        return customIcon(iconProps);\n      }\n\n      if (iconName) {\n        return (\n          <Icon\n            name={iconName}\n            library={resolvedLibrary}\n            variant={iconVariant}\n            features={iconFeatures}\n          />\n        );\n      }\n\n      return <StarIcon filled={isActive} />;\n    };\n\n    // Render partial icon with layered approach\n    const renderPartialIcon = (iconIndex: number, fillPercent: number) => {\n      if (customIcon) {\n        // For custom icons, pass fillPercent and let consumer handle it\n        const iconProps: RateIconProps = {\n          index: iconIndex,\n          isActive: fillPercent > 0,\n          isHovered: hoverValue !== null && iconIndex < (hoverValue ?? 0),\n          value: displayValue,\n          fillPercent,\n        };\n        return customIcon(iconProps);\n      }\n\n      if (iconName) {\n        return (\n          <span\n            className={prefixedClassNames(classPrefix, 'rate-icon-partial')}\n            style={\n              {\n                '--rate-fill-percent': `${fillPercent}%`,\n              } as React.CSSProperties\n            }\n          >\n            <span className={prefixedClassNames(classPrefix, 'rate-icon-bg')}>\n              <Icon\n                name={iconName}\n                library={resolvedLibrary}\n                variant={iconVariant}\n                features={iconFeatures}\n              />\n            </span>\n            <span className={prefixedClassNames(classPrefix, 'rate-icon-fg')}>\n              <Icon\n                name={iconName}\n                library={resolvedLibrary}\n                variant={iconVariant}\n                features={iconFeatures}\n              />\n            </span>\n          </span>\n        );\n      }\n\n      // Default SVG with clipPath for partial fill\n      const clipId = `rate-clip-${iconIndex}`;\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <defs>\n            <clipPath id={clipId}>\n              <rect\n                x=\"0\"\n                y=\"0\"\n                width={`${(fillPercent / 100) * 24}`}\n                height=\"24\"\n              />\n            </clipPath>\n          </defs>\n          {/* Background: empty star */}\n          <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"\n          />\n          {/* Foreground: filled portion */}\n          <path\n            clipPath={`url(#${clipId})`}\n            fill=\"currentColor\"\n            d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"\n          />\n        </svg>\n      );\n    };\n\n    // The star the value falls in is the checked radio, and it carries the\n    // value: a radiogroup takes no aria-value* of its own. A fractional value\n    // names that star by the value itself (\"3.5 stars\"). Both go by the value\n    // as that name writes it, to hundredths, so a value a hair over a whole\n    // number checks that number's star under its own name, and no two stars\n    // share a name.\n    const shownValue = Number(currentValue.toFixed(2));\n    const checkedIndex =\n      shownValue > 0 ? Math.min(Math.ceil(shownValue), max) - 1 : -1;\n\n    // Render icons\n    const renderIcons = () => {\n      const icons = [];\n\n      for (let i = 0; i < max; i++) {\n        const iconIndex = rtl ? max - 1 - i : i;\n        const fillPercent = getFillPercent(iconIndex, displayValue);\n        const isActive = fillPercent === 100;\n        const isHovered = hoverValue !== null && iconIndex < hoverValue;\n        const isPartial = fillPercent > 0 && fillPercent < 100;\n\n        const icon = isPartial\n          ? renderPartialIcon(iconIndex, fillPercent)\n          : renderIcon(iconIndex, isActive, fillPercent);\n\n        icons.push(\n          <span\n            key={iconIndex}\n            className={prefixedClassNames(classPrefix, 'rate-item', {\n              'is-active': isActive,\n              'is-hovered': isHovered,\n            })}\n            onClick={e => handleClick(iconIndex, e)}\n            onMouseEnter={() => handleMouseEnter(iconIndex)}\n            onMouseMove={e => handleMouseMove(iconIndex, e)}\n            onMouseLeave={handleMouseLeave}\n            id={`${starBaseId}-${iconIndex}`}\n            role=\"radio\"\n            aria-checked={iconIndex === checkedIndex}\n            aria-label={\n              iconIndex === checkedIndex && shownValue % 1 !== 0\n                ? `${shownValue} stars`\n                : `${iconIndex + 1} star${iconIndex === 0 ? '' : 's'}`\n            }\n            tabIndex={-1}\n          >\n            {icon}\n          </span>\n        );\n      }\n\n      return icons;\n    };\n\n    const text = getText();\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    const rateItemsClass = usePrefixedClassNames('rate-items');\n    const rateScoreClass = usePrefixedClassNames('rate-score');\n    const rateTextClass = usePrefixedClassNames('rate-text');\n    const rateCustomTextClass = usePrefixedClassNames('rate-custom-text');\n\n    const rateElement = (\n      <div\n        ref={ref}\n        className={combinedClasses}\n        role=\"radiogroup\"\n        // Fallback name only: a wired label names the group via labelledby.\n        aria-label={ariaLabelledBy ? undefined : 'Rating'}\n        aria-labelledby={ariaLabelledBy}\n        // Focus stays on the group, so point it at the checked star for\n        // assistive technology to announce as the value changes.\n        aria-activedescendant={\n          checkedIndex >= 0 ? `${starBaseId}-${checkedIndex}` : undefined\n        }\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        <div className={rateItemsClass}>{renderIcons()}</div>\n        {showScore && (\n          <span className={rateScoreClass}>{getScoreDisplay()}</span>\n        )}\n        {text && <span className={rateTextClass}>{text}</span>}\n        {customText && (\n          <span className={rateCustomTextClass}>{customText}</span>\n        )}\n        {name && (\n          <input type=\"hidden\" name={name} value={currentValue} form={form} />\n        )}\n      </div>\n    );\n\n    let content = rateElement;\n\n    if (rendersOwnControl('Rate', { insideControl })) {\n      content = <Control>{content}</Control>;\n    }\n\n    if (ownField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {content}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {content}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nRate.displayName = 'Rate';\n\nexport default Rate;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/form/SelectBase.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
-import { useFieldLabelTarget } from './FormContext.js';
+import { useFieldsetDisabled, useFieldLabelTarget } from './FormContext.js';
 
 /**
  * Bulma Select component with full Bulma helper class support.
@@ -13,7 +13,8 @@ import { useFieldLabelTarget } from './FormContext.js';
  * @returns {JSX.Element} The rendered select element.
  * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}
  */
-const SelectBase = forwardRef(({ color, size, isRounded, isLoading, isActive, isHovered, isFocused, isFullwidth, isFullWidth, className, disabled, children, multiple, multipleSize, ...props }, ref) => {
+const SelectBase = forwardRef(({ color, size, isRounded, isLoading, isActive, isHovered, isFocused, isFullwidth, isFullWidth, className, disabled: disabledProp, children, multiple, multipleSize, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,

package/dist/esm/form/SelectBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBase.js","sources":["../../../src/form/SelectBase.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useFieldLabelTarget } from './FormContext';\n\n/**\n * Props for the Select component.\n *\n * @helperProps Helper props go on the `.select` wrapper `<div>`, with\n * `className`. The other attributes go on the `<select>`.\n */\nexport interface SelectBaseProps\n  extends\n    Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>,\n    Omit<BulmaClassesProps, 'color'> {\n  /** Bulma color modifier for the select. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Size modifier for the select. */\n  size?: 'small' | 'medium' | 'large';\n  /** Rounded select corners. */\n  isRounded?: boolean;\n  /**\n   * Replaces the chevron with a loading spinner.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   */\n  isLoading?: boolean;\n  /** Applies Bulma's is-active modifier. */\n  isActive?: boolean;\n  /** Forces hovered state on the inner select. */\n  isHovered?: boolean;\n  /** Forces focused state on the inner select. */\n  isFocused?: boolean;\n  /** Makes the select span the full width of parent. */\n  isFullwidth?: boolean;\n  /** Makes the select span the full width of parent. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  isFullWidth?: boolean;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Disables the select. */\n  disabled?: boolean;\n  /** Allows multiple selections. */\n  multiple?: boolean;\n  /** Number of visible options in multiselect. */\n  multipleSize?: number;\n  /** `<option>` elements. */\n  children?: React.ReactNode;\n}\n\n/**\n * Bulma Select component with full Bulma helper class support.\n *\n * @function\n * @param {SelectBaseProps} props - Props for the SelectBase component.\n * @returns {JSX.Element} The rendered select element.\n * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}\n */\nexport const SelectBase = forwardRef<HTMLSelectElement, SelectBaseProps>(\n  (\n    {\n      color,\n      size,\n      isRounded,\n      isLoading,\n      isActive,\n      isHovered,\n      isFocused,\n      isFullwidth,\n      isFullWidth,\n      className,\n      disabled,\n      children,\n      multiple,\n      multipleSize,\n      ...props\n    },\n    ref\n  ) => {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color,\n      ...props,\n    });\n    // A labeled Field's generated id when no user id arrived (rest.id may be\n    // an undefined own key), reported to that Field (#1004).\n    const id = useFieldLabelTarget(rest.id);\n\n    const mainClass = usePrefixedClassNames('select', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-rounded': isRounded,\n      'is-loading': isLoading,\n      'is-active': isActive,\n      'is-multiple': !!multiple,\n      'is-fullwidth': isFullwidth ?? isFullWidth,\n    });\n    const selectClass = classNames(mainClass, bulmaHelperClasses, className);\n\n    // is-hovered / is-focused belong on the inner <select> element, not the wrapper.\n    const innerSelectClass = usePrefixedClassNames('', {\n      'is-hovered': isHovered,\n      'is-focused': isFocused,\n    });\n\n    // Only set size attribute when multiple is true and multipleSize is specified\n    const selectProps: React.SelectHTMLAttributes<HTMLSelectElement> = {\n      disabled,\n      multiple,\n      ...rest,\n    };\n\n    if (multiple && typeof multipleSize === 'number') {\n      selectProps.size = multipleSize;\n    }\n\n    return (\n      <div className={selectClass}>\n        <select\n          ref={ref}\n          className={innerSelectClass || undefined}\n          {...selectProps}\n          // After the spread, which may carry an undefined id key; the id\n          // belongs on the inner <select>.\n          id={id}\n        >\n          {children}\n        </select>\n      </div>\n    );\n  }\n);\n\nSelectBase.displayName = 'SelectBase';\n\nexport default SelectBase;\n"],"names":["_jsx"],"mappings":";;;;;;;AA2DA;;;;;;;AAOG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,KAAK,EACL,IAAI,EACJ,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACnD,KAAK;AACL,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;;IAGF,MAAM,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;AAEvC,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,QAAQ,EAAE;AAChD,QAAA,CAAC,MAAM,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,KAAK;AACxB,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI;AACtB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,WAAW,EAAE,QAAQ;QACrB,aAAa,EAAE,CAAC,CAAC,QAAQ;QACzB,cAAc,EAAE,WAAW,IAAI,WAAW;AAC3C,KAAA,CAAC;IACF,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,CAAC;;AAGxE,IAAA,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,EAAE,EAAE;AACjD,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACxB,KAAA,CAAC;;AAGF,IAAA,MAAM,WAAW,GAAkD;QACjE,QAAQ;QACR,QAAQ;AACR,QAAA,GAAG,IAAI;KACR;AAED,IAAA,IAAI,QAAQ,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE;AAChD,QAAA,WAAW,CAAC,IAAI,GAAG,YAAY;IACjC;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,WAAW,YACzBA,GAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,gBAAgB,IAAI,SAAS,KACpC,WAAW;;;AAGf,YAAA,EAAE,EAAE,EAAE,EAAA,QAAA,EAEL,QAAQ,EAAA,CACF,EAAA,CACL;AAEV,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;"}
+{"version":3,"file":"SelectBase.js","sources":["../../../src/form/SelectBase.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useFieldLabelTarget, useFieldsetDisabled } from './FormContext';\n\n/**\n * Props for the Select component.\n *\n * @helperProps Helper props go on the `.select` wrapper `<div>`, with\n * `className`. The other attributes go on the `<select>`.\n */\nexport interface SelectBaseProps\n  extends\n    Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>,\n    Omit<BulmaClassesProps, 'color'> {\n  /** Bulma color modifier for the select. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Size modifier for the select. */\n  size?: 'small' | 'medium' | 'large';\n  /** Rounded select corners. */\n  isRounded?: boolean;\n  /**\n   * Replaces the chevron with a loading spinner.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   */\n  isLoading?: boolean;\n  /** Applies Bulma's is-active modifier. */\n  isActive?: boolean;\n  /** Forces hovered state on the inner select. */\n  isHovered?: boolean;\n  /** Forces focused state on the inner select. */\n  isFocused?: boolean;\n  /** Makes the select span the full width of parent. */\n  isFullwidth?: boolean;\n  /** Makes the select span the full width of parent. @deprecated Use `isFullwidth` instead — `isFullwidth` wins if both are set. */\n  isFullWidth?: boolean;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Disables the select. */\n  disabled?: boolean;\n  /** Allows multiple selections. */\n  multiple?: boolean;\n  /** Number of visible options in multiselect. */\n  multipleSize?: number;\n  /** `<option>` elements. */\n  children?: React.ReactNode;\n}\n\n/**\n * Bulma Select component with full Bulma helper class support.\n *\n * @function\n * @param {SelectBaseProps} props - Props for the SelectBase component.\n * @returns {JSX.Element} The rendered select element.\n * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}\n */\nexport const SelectBase = forwardRef<HTMLSelectElement, SelectBaseProps>(\n  (\n    {\n      color,\n      size,\n      isRounded,\n      isLoading,\n      isActive,\n      isHovered,\n      isFocused,\n      isFullwidth,\n      isFullWidth,\n      className,\n      disabled: disabledProp,\n      children,\n      multiple,\n      multipleSize,\n      ...props\n    },\n    ref\n  ) => {\n    const disabled = useFieldsetDisabled(disabledProp);\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color,\n      ...props,\n    });\n    // A labeled Field's generated id when no user id arrived (rest.id may be\n    // an undefined own key), reported to that Field (#1004).\n    const id = useFieldLabelTarget(rest.id);\n\n    const mainClass = usePrefixedClassNames('select', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-rounded': isRounded,\n      'is-loading': isLoading,\n      'is-active': isActive,\n      'is-multiple': !!multiple,\n      'is-fullwidth': isFullwidth ?? isFullWidth,\n    });\n    const selectClass = classNames(mainClass, bulmaHelperClasses, className);\n\n    // is-hovered / is-focused belong on the inner <select> element, not the wrapper.\n    const innerSelectClass = usePrefixedClassNames('', {\n      'is-hovered': isHovered,\n      'is-focused': isFocused,\n    });\n\n    // Only set size attribute when multiple is true and multipleSize is specified\n    const selectProps: React.SelectHTMLAttributes<HTMLSelectElement> = {\n      disabled,\n      multiple,\n      ...rest,\n    };\n\n    if (multiple && typeof multipleSize === 'number') {\n      selectProps.size = multipleSize;\n    }\n\n    return (\n      <div className={selectClass}>\n        <select\n          ref={ref}\n          className={innerSelectClass || undefined}\n          {...selectProps}\n          // After the spread, which may carry an undefined id key; the id\n          // belongs on the inner <select>.\n          id={id}\n        >\n          {children}\n        </select>\n      </div>\n    );\n  }\n);\n\nSelectBase.displayName = 'SelectBase';\n\nexport default SelectBase;\n"],"names":["_jsx"],"mappings":";;;;;;;AA2DA;;;;;;;AAOG;MACU,UAAU,GAAG,UAAU,CAClC,CACE,EACE,KAAK,EACL,IAAI,EACJ,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,YAAY,CAAC;AAClD,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;QACnD,KAAK;AACL,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;;IAGF,MAAM,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;AAEvC,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,QAAQ,EAAE;AAChD,QAAA,CAAC,MAAM,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,KAAK;AACxB,QAAA,CAAC,MAAM,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI;AACtB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,WAAW,EAAE,QAAQ;QACrB,aAAa,EAAE,CAAC,CAAC,QAAQ;QACzB,cAAc,EAAE,WAAW,IAAI,WAAW;AAC3C,KAAA,CAAC;IACF,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS,EAAE,kBAAkB,EAAE,SAAS,CAAC;;AAGxE,IAAA,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,EAAE,EAAE;AACjD,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,YAAY,EAAE,SAAS;AACxB,KAAA,CAAC;;AAGF,IAAA,MAAM,WAAW,GAAkD;QACjE,QAAQ;QACR,QAAQ;AACR,QAAA,GAAG,IAAI;KACR;AAED,IAAA,IAAI,QAAQ,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE;AAChD,QAAA,WAAW,CAAC,IAAI,GAAG,YAAY;IACjC;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,WAAW,YACzBA,GAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,gBAAgB,IAAI,SAAS,KACpC,WAAW;;;AAGf,YAAA,EAAE,EAAE,EAAE,EAAA,QAAA,EAEL,QAAQ,EAAA,CACF,EAAA,CACL;AAEV,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;"}

package/dist/esm/form/Slider.js

@@ -5,7 +5,7 @@ import { usePrefixedClassNames, classNames, prefixedClassNames } from '../helper
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
 import { useClassPrefix } from '../helpers/Config.js';
 import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
-import { useInsideField, useInsideControl, rendersOwnField, rendersOwnControl } from './FormContext.js';
+import { useFieldsetDisabled, useInsideField, useInsideControl, rendersOwnField, rendersOwnControl } from './FormContext.js';
 import { Field } from './Field.js';
 import { Control } from './Control.js';
 import { useAutoLabelId } from './useAutoLabelId.js';
@@ -89,10 +89,11 @@ const Slider = forwardRef((props, ref) => {
     }
     // Destructure base / shared props from a `SliderBaseProps` view. None of
     // these fields differ between the two branches, so this view is safe.
-    const { label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, min = 0, max = 100, step = 1, size, color, isRounded = false, isCircle = false, disabled = false, showOutput = false, tooltip, ticks, marks, orientation = 'horizontal', scale, getAriaValueText, formatOutput, className, 
+    const { label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, min = 0, max = 100, step = 1, size, color, isRounded = false, isCircle = false, disabled: disabledProp, showOutput = false, tooltip, ticks, marks, orientation = 'horizontal', scale, getAriaValueText, formatOutput, className, 
     // Strip the discriminated/union fields from `restProps` so they don't
     // flow back into `useBulmaClasses` / spread onto inputs.
     range: _range, value: _value, defaultValue: _defaultValue, onChange: _onChange, ariaLabel: _ariaLabel, minDistance: _minDistance, nameLow: _nameLow, nameHigh: _nameHigh, ...restProps } = props;
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Slider', {