@allxsmith/bestax-bulma 5.27.0 → 5.27.2

package/dist/esm/form/Rate.js

@@ -0,0 +1,280 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useId, useState, useCallback } from 'react';
+import { usePrefixedClassNames, classNames, prefixedClassNames } from '../helpers/classNames.js';
+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 { Field } from './Field.js';
+import { Control } from './Control.js';
+import { useAutoLabelledBy } from './useAutoLabelId.js';
+
+/**
+ * Default star icon component.
+ */
+const StarIcon = ({ filled }) => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: filled ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: filled ? 0 : 2, "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", 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" }) }));
+/** Snap a value to the nearest precision step. */
+function snapToPrecision(val, precision) {
+    return Math.round(val / precision) * precision;
+}
+/** Get fill percentage for a given icon index based on current value. */
+function getFillPercent(iconIndex, value) {
+    if (value >= iconIndex + 1)
+        return 100;
+    if (value <= iconIndex)
+        return 0;
+    return Math.round((value - iconIndex) * 100);
+}
+/**
+ * The `Rate` component provides a star/icon-based rating system.
+ *
+ * @function
+ * @param {RateProps} props - Props for the Rate component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the container element.
+ * @returns {JSX.Element} The rendered rating component.
+ *
+ * @example
+ * // Basic 5-star rating
+ * <Rate defaultValue={3} />
+ *
+ * @example
+ * // With color and precision
+ * <Rate defaultValue={3.5} color="warning" precision={0.5} showScore />
+ *
+ * @example
+ * // 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 insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Rate', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
+        label,
+        labelProps,
+        rendersLabel: ownField,
+        callerProps: props,
+    });
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const starBaseId = useId();
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [hoverValue, setHoverValue] = useState(null);
+    const defaultIconLibrary = useIconLibrary();
+    const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';
+    // Determine if controlled
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const displayValue = hoverValue !== null ? hoverValue : currentValue;
+    // Update value
+    const updateValue = useCallback((newValue) => {
+        if (disabled)
+            return;
+        // Allow clicking same value to deselect (set to 0)
+        const finalValue = newValue === currentValue ? 0 : newValue;
+        if (!isControlled) {
+            setInternalValue(finalValue);
+        }
+        onChange?.(finalValue);
+    }, [isControlled, currentValue, disabled, onChange]);
+    // Handle click with precision support
+    const handleClick = useCallback((iconIndex, e) => {
+        if (disabled)
+            return;
+        if (precision < 1) {
+            const rect = e.currentTarget.getBoundingClientRect();
+            let relativeX = (e.clientX - rect.left) / rect.width;
+            if (rtl)
+                relativeX = 1 - relativeX;
+            const rawValue = iconIndex + relativeX;
+            const snapped = snapToPrecision(rawValue, precision);
+            const clamped = Math.max(precision, Math.min(snapped, max));
+            updateValue(clamped);
+        }
+        else {
+            updateValue(iconIndex + 1);
+        }
+    }, [disabled, precision, rtl, max, updateValue]);
+    // Handle mouse enter on icon
+    const handleMouseEnter = useCallback((iconIndex) => {
+        if (disabled)
+            return;
+        setHoverValue(iconIndex + 1);
+    }, [disabled]);
+    // Handle mouse move with precision support
+    const handleMouseMove = useCallback((iconIndex, e) => {
+        if (disabled || precision >= 1)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        let relativeX = (e.clientX - rect.left) / rect.width;
+        if (rtl)
+            relativeX = 1 - relativeX;
+        const rawValue = iconIndex + relativeX;
+        const snapped = snapToPrecision(rawValue, precision);
+        const clamped = Math.max(precision, Math.min(snapped, max));
+        setHoverValue(clamped);
+    }, [disabled, precision, rtl, max]);
+    // Handle mouse leave
+    const handleMouseLeave = useCallback(() => {
+        setHoverValue(null);
+    }, []);
+    // Handle keyboard
+    const handleKeyDown = useCallback((e) => {
+        if (disabled)
+            return;
+        let newValue = currentValue;
+        const step = precision < 1 ? precision : 1;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            newValue = Math.min(currentValue + step, max);
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            newValue = Math.max(currentValue - step, 0);
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            newValue = 0;
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            newValue = max;
+        }
+        // Round to avoid floating point issues
+        newValue = Math.round(newValue * 1000) / 1000;
+        if (newValue !== currentValue) {
+            if (!isControlled) {
+                setInternalValue(newValue);
+            }
+            onChange?.(newValue);
+        }
+    }, [currentValue, max, precision, disabled, isControlled, onChange]);
+    // Get text for current value
+    const getText = () => {
+        if (!showText || !texts)
+            return null;
+        const wholeIndex = Math.ceil(displayValue) - 1;
+        const baseText = texts[wholeIndex] || null;
+        if (!baseText)
+            return null;
+        // For fractional hover values with precision < 1, append "+"
+        if (precision < 1 && hoverValue !== null && hoverValue % 1 !== 0) {
+            return `${baseText}+`;
+        }
+        return baseText;
+    };
+    // Format score display
+    const getScoreDisplay = () => {
+        if (precision < 1 && currentValue % 1 !== 0) {
+            return currentValue.toFixed(1);
+        }
+        return currentValue;
+    };
+    // Generate classes
+    const classPrefix = useClassPrefix();
+    const rateClasses = usePrefixedClassNames('rate', {
+        [`is-${size}`]: size,
+        'is-disabled': disabled,
+        'is-spaced': spaced,
+        'is-rtl': rtl,
+        [`is-${color}`]: color,
+    });
+    const combinedClasses = classNames(rateClasses, bulmaHelperClasses, className);
+    // Render a single icon based on priority: customIcon > iconName > default SVG
+    const renderIcon = (iconIndex, isActive, fillPercent) => {
+        const iconProps = {
+            index: iconIndex,
+            isActive,
+            isHovered: hoverValue !== null && iconIndex < hoverValue,
+            value: displayValue,
+            fillPercent,
+        };
+        if (customIcon) {
+            return customIcon(iconProps);
+        }
+        if (iconName) {
+            return (jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }));
+        }
+        return jsx(StarIcon, { filled: isActive });
+    };
+    // Render partial icon with layered approach
+    const renderPartialIcon = (iconIndex, fillPercent) => {
+        if (customIcon) {
+            // For custom icons, pass fillPercent and let consumer handle it
+            const iconProps = {
+                index: iconIndex,
+                isActive: fillPercent > 0,
+                isHovered: hoverValue !== null && iconIndex < (hoverValue ?? 0),
+                value: displayValue,
+                fillPercent,
+            };
+            return customIcon(iconProps);
+        }
+        if (iconName) {
+            return (jsxs("span", { className: prefixedClassNames(classPrefix, 'rate-icon-partial'), style: {
+                    '--rate-fill-percent': `${fillPercent}%`,
+                }, children: [jsx("span", { className: prefixedClassNames(classPrefix, 'rate-icon-bg'), children: jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }) }), jsx("span", { className: prefixedClassNames(classPrefix, 'rate-icon-fg'), children: jsx(Icon, { name: iconName, library: resolvedLibrary, variant: iconVariant, features: iconFeatures }) })] }));
+        }
+        // Default SVG with clipPath for partial fill
+        const clipId = `rate-clip-${iconIndex}`;
+        return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", "aria-hidden": "true", children: [jsx("defs", { children: jsx("clipPath", { id: clipId, children: jsx("rect", { x: "0", y: "0", width: `${(fillPercent / 100) * 24}`, height: "24" }) }) }), jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", 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" }), jsx("path", { clipPath: `url(#${clipId})`, fill: "currentColor", 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" })] }));
+    };
+    // The star the value falls in is the checked radio, and it carries the
+    // value: a radiogroup takes no aria-value* of its own. A fractional value
+    // names that star by the value itself ("3.5 stars"). Both go by the value
+    // as that name writes it, to hundredths, so a value a hair over a whole
+    // number checks that number's star under its own name, and no two stars
+    // share a name.
+    const shownValue = Number(currentValue.toFixed(2));
+    const checkedIndex = shownValue > 0 ? Math.min(Math.ceil(shownValue), max) - 1 : -1;
+    // Render icons
+    const renderIcons = () => {
+        const icons = [];
+        for (let i = 0; i < max; i++) {
+            const iconIndex = rtl ? max - 1 - i : i;
+            const fillPercent = getFillPercent(iconIndex, displayValue);
+            const isActive = fillPercent === 100;
+            const isHovered = hoverValue !== null && iconIndex < hoverValue;
+            const isPartial = fillPercent > 0 && fillPercent < 100;
+            const icon = isPartial
+                ? renderPartialIcon(iconIndex, fillPercent)
+                : renderIcon(iconIndex, isActive, fillPercent);
+            icons.push(jsx("span", { className: prefixedClassNames(classPrefix, 'rate-item', {
+                    'is-active': isActive,
+                    'is-hovered': isHovered,
+                }), onClick: e => handleClick(iconIndex, e), onMouseEnter: () => handleMouseEnter(iconIndex), onMouseMove: e => handleMouseMove(iconIndex, e), onMouseLeave: handleMouseLeave, id: `${starBaseId}-${iconIndex}`, role: "radio", "aria-checked": iconIndex === checkedIndex, "aria-label": iconIndex === checkedIndex && shownValue % 1 !== 0
+                    ? `${shownValue} stars`
+                    : `${iconIndex + 1} star${iconIndex === 0 ? '' : 's'}`, tabIndex: -1, children: icon }, iconIndex));
+        }
+        return icons;
+    };
+    const text = getText();
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
+    const rateItemsClass = usePrefixedClassNames('rate-items');
+    const rateScoreClass = usePrefixedClassNames('rate-score');
+    const rateTextClass = usePrefixedClassNames('rate-text');
+    const rateCustomTextClass = usePrefixedClassNames('rate-custom-text');
+    const rateElement = (jsxs("div", { ref: ref, className: combinedClasses, role: "radiogroup", "aria-label": ariaLabelledBy ? undefined : 'Rating', "aria-labelledby": ariaLabelledBy, "aria-activedescendant": checkedIndex >= 0 ? `${starBaseId}-${checkedIndex}` : undefined, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, ...rest, children: [jsx("div", { className: rateItemsClass, children: renderIcons() }), showScore && (jsx("span", { className: rateScoreClass, children: getScoreDisplay() })), text && jsx("span", { className: rateTextClass, children: text }), customText && (jsx("span", { className: rateCustomTextClass, children: customText })), name && (jsx("input", { type: "hidden", name: name, value: currentValue, form: form }))] }));
+    let content = rateElement;
+    if (rendersOwnControl('Rate', { insideControl })) {
+        content = jsx(Control, { children: content });
+    }
+    if (ownField) {
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+    }
+    return (jsxs(Fragment, { children: [content, messageEl] }));
+});
+Rate.displayName = 'Rate';
+
+export { Rate };
+//# sourceMappingURL=Rate.js.map

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

@@ -0,0 +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":"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"}

package/dist/esm/form/Select.js

@@ -0,0 +1,81 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { usePrefixedClassNames } from '../helpers/classNames.js';
+import { Field } from './Field.js';
+import { Control } from './Control.js';
+import { SelectBase } from './SelectBase.js';
+import { useInsideField, useInsideControl, rendersOwnField, rendersOwnControl } from './FormContext.js';
+import { useAutoLabelId } from './useAutoLabelId.js';
+
+/**
+ * The `Select` component provides a Bulma-styled dropdown for selecting one or more options.
+ *
+ * @function
+ * @param {SelectProps} props - Props for Select.
+ * @returns {JSX.Element} The composed field element.
+ *
+ * @example
+ * <Select label="Country" iconLeftName="globe">
+ *   <option>United States</option>
+ *   <option>Canada</option>
+ * </Select>
+ */
+const Select = forwardRef(({ 
+// Field props
+label, labelSize, labelProps, horizontal, 
+// Control props
+iconLeft, iconLeftName, iconLeftSize, hasIconsLeft, isExpanded, controlSize, 
+// Message props
+message, messageColor, 
+// Container class overrides
+fieldClassName, controlClassName, 
+// Everything else (including isLoading) goes to Select.
+// Note: isLoading on a select is rendered on the .select wrapper itself
+// (replacing the chevron with a spinner), not on .control — this matches
+// Bulma's documented behavior for `<div class="select is-loading">`.
+...selectProps }, ref) => {
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Select', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    // Not isLoading, which the select draws itself and so keeps in a Control.
+    const ownControl = rendersOwnControl('Select', {
+        insideControl,
+        iconLeft,
+        iconLeftName,
+        iconLeftSize,
+        hasIconsLeft,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id: selectProps.id,
+        labelProps,
+        rendersLabel: ownField,
+    });
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    let content = jsx(SelectBase, { ref: ref, ...selectProps, id: controlId });
+    if (ownControl) {
+        content = (jsx(Control, { iconLeft: iconLeft, iconLeftName: iconLeftName, iconLeftSize: iconLeftSize, hasIconsLeft: hasIconsLeft, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
+    }
+    const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
+    if (ownField) {
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+    }
+    return (jsxs(Fragment, { children: [content, messageEl] }));
+});
+Select.displayName = 'Select';
+
+export { Select };
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/form/Select.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { usePrefixedClassNames } from '../helpers/classNames';\nimport { Field, FieldProps } from './Field';\nimport { Control, ControlBaseProps } from './Control';\nimport { SelectBase, SelectBaseProps } from './SelectBase';\nimport {\n  useInsideField,\n  useInsideControl,\n  rendersOwnField,\n  rendersOwnControl,\n} from './FormContext';\nimport { useAutoLabelId } from './useAutoLabelId';\n\n/**\n * Props for the Select component.\n *\n * Composes Field, Control, and SelectBase into a single convenience component.\n * Supports all SelectBase props, plus Field-level (label, horizontal) and\n * Control-level (icons) props.\n * Inside an existing `Control` it renders no `Control` of its own, so its\n * Control-level props do nothing there and warn in development; set them on\n * that `Control` instead. Inside an outer `Field`, or a `Control` with no\n * `Field` around it, it renders no `Field` of its own either.\n * The exception is `label`, `message`, `horizontal` or `fieldClassName` in that\n * bare `Control`: it keeps a `Field` for them, nested in the `.control`, and\n * warns in development. Wrap the `Control` in a `Field` instead, and set the\n * `label`, `horizontal` and class name on that `Field`.\n */\nexport interface SelectProps extends SelectBaseProps {\n  /** Field label. Automatically associated with the select via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */\n  label?: React.ReactNode;\n  /** Size for the label. */\n  labelSize?: FieldProps['labelSize'];\n  /** Props for the label element when the component renders its own `Field`; dropped inside an outer `Field` (use that `Field`'s `labelProps` instead). An explicit `htmlFor` key — even `undefined` — overrides the automatic association and no id is generated. */\n  labelProps?: FieldProps['labelProps'];\n  /** Horizontal field layout. */\n  horizontal?: boolean;\n  /**\n   * Icon props for left icon.\n   * Bulma gives control icons `pointer-events: none`, so a clickable node here\n   * never receives a click. Put a button beside the input in its own addon `Control` instead.\n   */\n  iconLeft?: ControlBaseProps['iconLeft'];\n  /** Shortcut for left icon name. */\n  iconLeftName?: string;\n  /** Shortcut for left icon size. */\n  iconLeftSize?: ControlBaseProps['iconLeftSize'];\n  /** Force left icon container. */\n  hasIconsLeft?: 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  /** Expand the control. */\n  isExpanded?: boolean;\n  /** Control size. */\n  controlSize?: ControlBaseProps['size'];\n  /** Help/validation message below the select. */\n  message?: React.ReactNode;\n  /** Bulma color for the message. */\n  messageColor?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Additional CSS classes for the Field. */\n  fieldClassName?: string;\n  /** Additional CSS classes for the Control. */\n  controlClassName?: string;\n}\n\n/**\n * The `Select` component provides a Bulma-styled dropdown for selecting one or more options.\n *\n * @function\n * @param {SelectProps} props - Props for Select.\n * @returns {JSX.Element} The composed field element.\n *\n * @example\n * <Select label=\"Country\" iconLeftName=\"globe\">\n *   <option>United States</option>\n *   <option>Canada</option>\n * </Select>\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      // Control props\n      iconLeft,\n      iconLeftName,\n      iconLeftSize,\n      hasIconsLeft,\n      isExpanded,\n      controlSize,\n      // Message props\n      message,\n      messageColor,\n      // Container class overrides\n      fieldClassName,\n      controlClassName,\n      // Everything else (including isLoading) goes to Select.\n      // Note: isLoading on a select is rendered on the .select wrapper itself\n      // (replacing the chevron with a spinner), not on .control — this matches\n      // Bulma's documented behavior for `<div class=\"select is-loading\">`.\n      ...selectProps\n    },\n    ref\n  ) => {\n    const insideField = useInsideField();\n    const insideControl = useInsideControl();\n    const ownField = rendersOwnField('Select', {\n      insideField,\n      insideControl,\n      label,\n      message,\n      horizontal,\n      fieldClassName,\n    });\n    // Not isLoading, which the select draws itself and so keeps in a Control.\n    const ownControl = rendersOwnControl('Select', {\n      insideControl,\n      iconLeft,\n      iconLeftName,\n      iconLeftSize,\n      hasIconsLeft,\n      isExpanded,\n      controlSize,\n      controlClassName,\n    });\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id: selectProps.id,\n      labelProps,\n      rendersLabel: ownField,\n    });\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n\n    let content = <SelectBase ref={ref} {...selectProps} id={controlId} />;\n\n    if (ownControl) {\n      content = (\n        <Control\n          iconLeft={iconLeft}\n          iconLeftName={iconLeftName}\n          iconLeftSize={iconLeftSize}\n          hasIconsLeft={hasIconsLeft}\n          isExpanded={isExpanded}\n          size={controlSize}\n          className={controlClassName}\n        >\n          {content}\n        </Control>\n      );\n    }\n\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\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\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;AAqEA;;;;;;;;;;;;AAYG;AACI,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE;AACE;AACA,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU;AACV;AACA,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW;AACX;AACA,OAAO,EACP,YAAY;AACZ;AACA,cAAc,EACd,gBAAgB;AAChB;AACA;AACA;AACA;AACA,GAAG,WAAW,EACf,EACD,GAAG,KACD;AACF,IAAA,MAAM,WAAW,GAAG,cAAc,EAAE;AACpC,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;AACxC,IAAA,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,EAAE;QACzC,WAAW;QACX,aAAa;QACb,KAAK;QACL,OAAO;QACP,UAAU;QACV,cAAc;AACf,KAAA,CAAC;;AAEF,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,QAAQ,EAAE;QAC7C,aAAa;QACb,QAAQ;QACR,YAAY;QACZ,YAAY;QACZ,YAAY;QACZ,UAAU;QACV,WAAW;QACX,gBAAgB;AACjB,KAAA,CAAC;AACF,IAAA,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,cAAc,CAAC;QACpD,KAAK;QACL,EAAE,EAAE,WAAW,CAAC,EAAE;QAClB,UAAU;AACV,QAAA,YAAY,EAAE,QAAQ;AACvB,KAAA,CAAC;AACF,IAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,EAAE;AAC9C,QAAA,CAAC,MAAM,YAAY,CAAA,CAAE,GAAG,CAAC,CAAC,YAAY;AACvC,KAAA,CAAC;AAEF,IAAA,IAAI,OAAO,GAAGA,GAAA,CAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAA,GAAM,WAAW,EAAE,EAAE,EAAE,SAAS,GAAI;IAEtE,IAAI,UAAU,EAAE;AACd,QAAA,OAAO,IACLA,GAAA,CAAC,OAAO,EAAA,EACN,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,gBAAgB,EAAA,QAAA,EAE1B,OAAO,EAAA,CACA,CACX;IACH;AAEA,IAAA,MAAM,SAAS,GAAG,OAAO,GAAGA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,SAAS,YAAG,OAAO,EAAA,CAAK,GAAG,IAAI;IAEzE,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,MAAM,CAAC,WAAW,GAAG,QAAQ;;"}

package/dist/esm/form/SelectBase.js

@@ -0,0 +1,54 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useFieldLabelId } from './FormContext.js';
+
+/**
+ * Bulma Select component with full Bulma helper class support.
+ *
+ * @function
+ * @param {SelectBaseProps} props - Props for the SelectBase component.
+ * @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 { bulmaHelperClasses, rest } = useBulmaClasses({
+        color,
+        ...props,
+    });
+    const fieldLabelId = useFieldLabelId();
+    const mainClass = usePrefixedClassNames('select', {
+        [`is-${color}`]: !!color,
+        [`is-${size}`]: !!size,
+        'is-rounded': isRounded,
+        'is-loading': isLoading,
+        'is-active': isActive,
+        'is-multiple': !!multiple,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
+    });
+    const selectClass = classNames(mainClass, bulmaHelperClasses, className);
+    // is-hovered / is-focused belong on the inner <select> element, not the wrapper.
+    const innerSelectClass = usePrefixedClassNames('', {
+        'is-hovered': isHovered,
+        'is-focused': isFocused,
+    });
+    // Only set size attribute when multiple is true and multipleSize is specified
+    const selectProps = {
+        disabled,
+        multiple,
+        ...rest,
+    };
+    if (multiple && typeof multipleSize === 'number') {
+        selectProps.size = multipleSize;
+    }
+    return (jsx("div", { className: selectClass, children: jsx("select", { ref: ref, className: innerSelectClass || undefined, ...selectProps, 
+            // After the spread: a labeled Field's generated id is adopted only
+            // when no user id arrived; the id belongs on the inner <select>.
+            id: selectProps.id ?? fieldLabelId, children: children }) }));
+});
+SelectBase.displayName = 'SelectBase';
+
+export { SelectBase };
+//# sourceMappingURL=SelectBase.js.map

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

@@ -0,0 +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 { useFieldLabelId } from './FormContext';\n\n/**\n * Props for the Select component.\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    const fieldLabelId = useFieldLabelId();\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: a labeled Field's generated id is adopted only\n          // when no user id arrived; the id belongs on the inner <select>.\n          id={selectProps.id ?? fieldLabelId}\n        >\n          {children}\n        </select>\n      </div>\n    );\n  }\n);\n\nSelectBase.displayName = 'SelectBase';\n\nexport default SelectBase;\n"],"names":["_jsx"],"mappings":";;;;;;;AAwDA;;;;;;;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;AACF,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AAEtC,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;;;YAGf,EAAE,EAAE,WAAW,CAAC,EAAE,IAAI,YAAY,EAAA,QAAA,EAEjC,QAAQ,EAAA,CACF,EAAA,CACL;AAEV,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;"}