@allxsmith/bestax-bulma 5.19.0 → 5.20.0

package/dist/types/elements/Button.d.ts

@@ -21,7 +21,11 @@ export interface ButtonOwnProps extends Omit<BulmaClassesProps, 'color' | 'backg
     isLight?: boolean;
     /** Makes the button rounded. */
     isRounded?: boolean;
-    /** Displays a loading spinner. */
+    /**
+     * Displays a loading spinner.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Makes the button non-interactive. */
     isStatic?: boolean;

package/dist/types/elements/Loader.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Loader component.
+ *
+ * There is no color prop, and the text and background color helpers are left
+ * out on purpose: Bulma draws the ring in `--bulma-border`, so a text color
+ * never reaches it. For a colored spinner over a region, use `Loading`.
+ *
+ * @extraProp {React.Ref<HTMLSpanElement>} [ref] - Ref forwarded to the loader element.
+ */
+export interface LoaderProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'children'>, Omit<BulmaClassesProps, 'color' | 'colorShade' | 'backgroundColor' | 'backgroundColorShade'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * Accessible name of the progress indicator. Name what is loading
+     * (`"Saving row"`) when more than one loader can be on screen at once.
+     */
+    ariaLabel?: string;
+}
+/**
+ * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
+ *
+ * The ring is `1em` square, so `textSize` scales it. It is exposed as an
+ * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning
+ * under `prefers-reduced-motion: reduce` while staying drawn.
+ *
+ * @function
+ * @param {LoaderProps} props - Props for the Loader component.
+ * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the loader element.
+ * @returns {JSX.Element} The rendered loader element.
+ *
+ * @example
+ * <Loader />
+ *
+ * @example
+ * <Loader textSize="3" ariaLabel="Saving" />
+ */
+export declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/form/Autocomplete.d.ts

@@ -51,7 +51,11 @@ export interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElem
     maxHeight?: number;
     /** Render as dropdown style. */
     dropdown?: boolean;
-    /** Show loading state. */
+    /**
+     * Show a loading spinner in the input.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     loading?: boolean;
     /** Whether the input is disabled. */
     disabled?: boolean;

package/dist/types/form/Control.d.ts

@@ -9,7 +9,11 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
     hasIconsLeft?: boolean;
     /** Adds right icon container. */
     hasIconsRight?: boolean;
-    /** Shows loading indicator. */
+    /**
+     * Shows a loading spinner inside the control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Makes the control expand to fill available space. */
     isExpanded?: boolean;

package/dist/types/form/DateInput.d.ts

@@ -34,7 +34,11 @@ export interface DateInputProps extends DateInputBaseProps {
     hasIconsLeft?: boolean;
     /** Force the right icon container. */
     hasIconsRight?: boolean;
-    /** Show a loading indicator on the control. */
+    /**
+     * Show a loading spinner on the control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Expand the control to fill its container. */
     isExpanded?: boolean;

package/dist/types/form/DateTimeInput.d.ts

@@ -32,7 +32,11 @@ export interface DateTimeInputProps extends DateTimeInputBaseProps {
     hasIconsLeft?: boolean;
     /** Force the right icon container. */
     hasIconsRight?: boolean;
-    /** Show a loading indicator on the control. */
+    /**
+     * Show a loading spinner on the control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Expand the control to fill its container. */
     isExpanded?: boolean;

package/dist/types/form/Input.d.ts

@@ -34,7 +34,11 @@ export interface InputProps extends InputBaseProps {
     hasIconsLeft?: boolean;
     /** Force right icon container. */
     hasIconsRight?: boolean;
-    /** Shows loading indicator. */
+    /**
+     * Shows a loading spinner on the wrapping Control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Expand the control. */
     isExpanded?: boolean;

package/dist/types/form/Numberinput.d.ts

@@ -53,7 +53,11 @@ export interface NumberinputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     disabled?: boolean;
     /** Whether the input can be typed in. */
     editable?: boolean;
-    /** Shows a loading state. */
+    /**
+     * Shows a loading spinner on the input's control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Enables exponential step increments when holding buttons. */
     exponential?: boolean;

package/dist/types/form/Select.d.ts

@@ -26,7 +26,11 @@ export interface SelectProps extends SelectBaseProps {
     iconLeftSize?: ControlBaseProps['iconLeftSize'];
     /** Force left icon container. */
     hasIconsLeft?: boolean;
-    /** Shows loading indicator. */
+    /**
+     * Replaces the chevron with a loading spinner.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Expand the control. */
     isExpanded?: boolean;

package/dist/types/form/SelectBase.d.ts

@@ -10,7 +10,11 @@ export interface SelectBaseProps extends Omit<React.SelectHTMLAttributes<HTMLSel
     size?: 'small' | 'medium' | 'large';
     /** Rounded select corners. */
     isRounded?: boolean;
-    /** Shows loading indicator. */
+    /**
+     * Replaces the chevron with a loading spinner.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Applies Bulma's is-active modifier. */
     isActive?: boolean;

package/dist/types/form/Taginput.d.ts

@@ -76,7 +76,11 @@ export interface TaginputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     keepFirst?: boolean;
     /** Keeps the autocomplete dropdown open after selection. */
     keepOpen?: boolean;
-    /** Shows a loading indicator. */
+    /**
+     * Shows a loading spinner in the input.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     loading?: boolean;
     /** ARIA label for tag close buttons. */
     ariaCloseLabel?: string;

package/dist/types/form/TextArea.d.ts

@@ -18,7 +18,11 @@ export interface TextAreaProps extends TextAreaBaseProps {
     labelProps?: FieldProps['labelProps'];
     /** Horizontal field layout. */
     horizontal?: boolean;
-    /** Shows loading indicator on the wrapping Control. */
+    /**
+     * Shows a loading spinner on the wrapping Control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Control size. */
     controlSize?: ControlBaseProps['size'];

package/dist/types/form/TimeInput.d.ts

@@ -34,7 +34,11 @@ export interface TimeInputProps extends TimeInputBaseProps {
     hasIconsLeft?: boolean;
     /** Force the right icon container. */
     hasIconsRight?: boolean;
-    /** Show a loading indicator on the control. */
+    /**
+     * Show a loading spinner on the control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Expand the control to fill its container. */
     isExpanded?: boolean;

package/dist/types/index.d.ts

@@ -38,6 +38,7 @@ export * from './elements/IconText.js';
 export * from './elements/Image.js';
 export * from './elements/Link.js';
 export * from './elements/ListItem.js';
+export * from './elements/Loader.js';
 export * from './elements/Notification.js';
 export * from './elements/OrderedList.js';
 export * from './elements/Paragraph.js';

package/dist/types-cjs/elements/Button.d.ts

@@ -21,7 +21,11 @@ export interface ButtonOwnProps extends Omit<BulmaClassesProps, 'color' | 'backg
     isLight?: boolean;
     /** Makes the button rounded. */
     isRounded?: boolean;
-    /** Displays a loading spinner. */
+    /**
+     * Displays a loading spinner.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Makes the button non-interactive. */
     isStatic?: boolean;

package/dist/types-cjs/elements/Loader.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
+/**
+ * Props for the Loader component.
+ *
+ * There is no color prop, and the text and background color helpers are left
+ * out on purpose: Bulma draws the ring in `--bulma-border`, so a text color
+ * never reaches it. For a colored spinner over a region, use `Loading`.
+ *
+ * @extraProp {React.Ref<HTMLSpanElement>} [ref] - Ref forwarded to the loader element.
+ */
+export interface LoaderProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'children'>, Omit<BulmaClassesProps, 'color' | 'colorShade' | 'backgroundColor' | 'backgroundColorShade'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * Accessible name of the progress indicator. Name what is loading
+     * (`"Saving row"`) when more than one loader can be on screen at once.
+     */
+    ariaLabel?: string;
+}
+/**
+ * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
+ *
+ * The ring is `1em` square, so `textSize` scales it. It is exposed as an
+ * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning
+ * under `prefers-reduced-motion: reduce` while staying drawn.
+ *
+ * @function
+ * @param {LoaderProps} props - Props for the Loader component.
+ * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the loader element.
+ * @returns {JSX.Element} The rendered loader element.
+ *
+ * @example
+ * <Loader />
+ *
+ * @example
+ * <Loader textSize="3" ariaLabel="Saving" />
+ */
+export declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/types-cjs/form/Autocomplete.d.ts

@@ -51,7 +51,11 @@ export interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElem
     maxHeight?: number;
     /** Render as dropdown style. */
     dropdown?: boolean;
-    /** Show loading state. */
+    /**
+     * Show a loading spinner in the input.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     loading?: boolean;
     /** Whether the input is disabled. */
     disabled?: boolean;

package/dist/types-cjs/form/Control.d.ts

@@ -9,7 +9,11 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
     hasIconsLeft?: boolean;
     /** Adds right icon container. */
     hasIconsRight?: boolean;
-    /** Shows loading indicator. */
+    /**
+     * Shows a loading spinner inside the control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Makes the control expand to fill available space. */
     isExpanded?: boolean;

package/dist/types-cjs/form/DateInput.d.ts

@@ -34,7 +34,11 @@ export interface DateInputProps extends DateInputBaseProps {
     hasIconsLeft?: boolean;
     /** Force the right icon container. */
     hasIconsRight?: boolean;
-    /** Show a loading indicator on the control. */
+    /**
+     * Show a loading spinner on the control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Expand the control to fill its container. */
     isExpanded?: boolean;

package/dist/types-cjs/form/DateTimeInput.d.ts

@@ -32,7 +32,11 @@ export interface DateTimeInputProps extends DateTimeInputBaseProps {
     hasIconsLeft?: boolean;
     /** Force the right icon container. */
     hasIconsRight?: boolean;
-    /** Show a loading indicator on the control. */
+    /**
+     * Show a loading spinner on the control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Expand the control to fill its container. */
     isExpanded?: boolean;

package/dist/types-cjs/form/Input.d.ts

@@ -34,7 +34,11 @@ export interface InputProps extends InputBaseProps {
     hasIconsLeft?: boolean;
     /** Force right icon container. */
     hasIconsRight?: boolean;
-    /** Shows loading indicator. */
+    /**
+     * Shows a loading spinner on the wrapping Control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Expand the control. */
     isExpanded?: boolean;

package/dist/types-cjs/form/Numberinput.d.ts

@@ -53,7 +53,11 @@ export interface NumberinputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     disabled?: boolean;
     /** Whether the input can be typed in. */
     editable?: boolean;
-    /** Shows a loading state. */
+    /**
+     * Shows a loading spinner on the input's control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Enables exponential step increments when holding buttons. */
     exponential?: boolean;

package/dist/types-cjs/form/Select.d.ts

@@ -26,7 +26,11 @@ export interface SelectProps extends SelectBaseProps {
     iconLeftSize?: ControlBaseProps['iconLeftSize'];
     /** Force left icon container. */
     hasIconsLeft?: boolean;
-    /** Shows loading indicator. */
+    /**
+     * Replaces the chevron with a loading spinner.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Expand the control. */
     isExpanded?: boolean;

package/dist/types-cjs/form/SelectBase.d.ts

@@ -10,7 +10,11 @@ export interface SelectBaseProps extends Omit<React.SelectHTMLAttributes<HTMLSel
     size?: 'small' | 'medium' | 'large';
     /** Rounded select corners. */
     isRounded?: boolean;
-    /** Shows loading indicator. */
+    /**
+     * Replaces the chevron with a loading spinner.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Applies Bulma's is-active modifier. */
     isActive?: boolean;

package/dist/types-cjs/form/Taginput.d.ts

@@ -76,7 +76,11 @@ export interface TaginputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     keepFirst?: boolean;
     /** Keeps the autocomplete dropdown open after selection. */
     keepOpen?: boolean;
-    /** Shows a loading indicator. */
+    /**
+     * Shows a loading spinner in the input.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     loading?: boolean;
     /** ARIA label for tag close buttons. */
     ariaCloseLabel?: string;

package/dist/types-cjs/form/TextArea.d.ts

@@ -18,7 +18,11 @@ export interface TextAreaProps extends TextAreaBaseProps {
     labelProps?: FieldProps['labelProps'];
     /** Horizontal field layout. */
     horizontal?: boolean;
-    /** Shows loading indicator on the wrapping Control. */
+    /**
+     * Shows a loading spinner on the wrapping Control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Control size. */
     controlSize?: ControlBaseProps['size'];

package/dist/types-cjs/form/TimeInput.d.ts

@@ -34,7 +34,11 @@ export interface TimeInputProps extends TimeInputBaseProps {
     hasIconsLeft?: boolean;
     /** Force the right icon container. */
     hasIconsRight?: boolean;
-    /** Show a loading indicator on the control. */
+    /**
+     * Show a loading spinner on the control.
+     * Under `prefers-reduced-motion: reduce` the spinner stops and stays
+     * drawn (with bestax's CSS loaded).
+     */
     isLoading?: boolean;
     /** Expand the control to fill its container. */
     isExpanded?: boolean;

package/dist/types-cjs/index.d.ts

@@ -38,6 +38,7 @@ export * from './elements/IconText.js';
 export * from './elements/Image.js';
 export * from './elements/Link.js';
 export * from './elements/ListItem.js';
+export * from './elements/Loader.js';
 export * from './elements/Notification.js';
 export * from './elements/OrderedList.js';
 export * from './elements/Paragraph.js';