@allxsmith/bestax-bulma 5.26.6 → 5.27.1

package/dist/esm/elements/Notification.js

@@ -0,0 +1,316 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useSyncExternalStore, useMemo, useRef, useCallback, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { warnUnstyledColor } from '../helpers/colorDeprecations.js';
+import { groupIntoPositionStacks } from '../helpers/positionStacks.js';
+import { useIsHydrated } from '../helpers/useIsHydrated.js';
+import { spokenText, StatusRegion } from '../helpers/statusRegion.js';
+import { validColors } from '../helpers/bulmaClassHelpers.js';
+
+/**
+ * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
+ *
+ * @function
+ * @param {NotificationProps} props - Props for the Notification component.
+ * @returns {JSX.Element} The rendered notification element.
+ * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}
+ */
+const Notification = ({ className, color, textColor, isLight, hasDelete, onDelete, children, ...props }) => {
+    warnUnstyledColor('Notification', color);
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames('notification', {
+        [`is-${color}`]: color && validColors.includes(color),
+        'is-light': isLight,
+    });
+    const deleteClasses = usePrefixedClassNames('delete');
+    const notificationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsx("button", { type: "button", className: deleteClasses, onClick: onDelete, "aria-label": "Close notification" })), children] }));
+};
+let notificationId = 0;
+const notificationListeners = new Set();
+let notifications = [];
+// Queue support
+let queuedNotifications = [];
+let currentQueuedNotification = null;
+// The server has nowhere to portal a notification to, and its copy of this
+// module is shared by every request, so server rendering reads an empty list.
+// Hydration reads it too, which keeps the first client render matching the
+// server's.
+const noNotifications = [];
+const getServerNotifications = () => noNotifications;
+// What a container shows right now: the stacked notifications, then the queued
+// one on screen. NotificationContainer renders from this rather than from
+// updates alone, so notifications raised before it mounted still appear. It is
+// replaced rather than mutated, and only when listeners are notified, because
+// useSyncExternalStore needs the same array back between changes. An empty
+// list is `noNotifications` itself, so an empty store reads the same snapshot
+// on the client as on the server, and a notify that leaves nothing showing
+// when nothing was showing doesn't render the container again.
+let visibleNotifications = noNotifications;
+const getVisibleNotifications = () => visibleNotifications;
+const notifyNotificationListeners = () => {
+    const allVisible = [...notifications];
+    if (currentQueuedNotification) {
+        allVisible.push(currentQueuedNotification);
+    }
+    visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;
+    notificationListeners.forEach(listener => listener([...allVisible]));
+};
+const processQueuedNotification = () => {
+    if (currentQueuedNotification || queuedNotifications.length === 0)
+        return;
+    currentQueuedNotification = queuedNotifications.shift();
+    notifyNotificationListeners();
+};
+/**
+ * Programmatic notification API for showing, closing, and managing notifications.
+ *
+ * @example
+ * notification.success('File saved successfully');
+ * notification.danger('Something went wrong', { duration: 5000 });
+ */
+const notification = {
+    /**
+     * Show a notification with the given options.
+     * @param {NotificationOptions} options - Notification configuration.
+     * @returns {string} The unique ID of the created notification.
+     */
+    show: (options) => {
+        const id = `notification-${++notificationId}`;
+        const instance = { id, options };
+        if (options.queue) {
+            queuedNotifications.push(instance);
+            processQueuedNotification();
+        }
+        else {
+            notifications.push(instance);
+            notifyNotificationListeners();
+        }
+        return id;
+    },
+    /**
+     * Show a success notification.
+     * @param {string|React.ReactNode} message - The message to display.
+     * @param {Partial<NotificationOptions>} [options] - Additional options.
+     * @returns {string} The notification ID.
+     */
+    success: (message, options) => {
+        return notification.show({ message, color: 'success', ...options });
+    },
+    /**
+     * Show a danger notification.
+     * @param {string|React.ReactNode} message - The message to display.
+     * @param {Partial<NotificationOptions>} [options] - Additional options.
+     * @returns {string} The notification ID.
+     */
+    danger: (message, options) => {
+        return notification.show({ message, color: 'danger', ...options });
+    },
+    /**
+     * Show a warning notification.
+     * @param {string|React.ReactNode} message - The message to display.
+     * @param {Partial<NotificationOptions>} [options] - Additional options.
+     * @returns {string} The notification ID.
+     */
+    warning: (message, options) => {
+        return notification.show({ message, color: 'warning', ...options });
+    },
+    /**
+     * Show an info notification.
+     * @param {string|React.ReactNode} message - The message to display.
+     * @param {Partial<NotificationOptions>} [options] - Additional options.
+     * @returns {string} The notification ID.
+     */
+    info: (message, options) => {
+        return notification.show({ message, color: 'info', ...options });
+    },
+    /**
+     * Close a specific notification by ID.
+     * @param {string} id - The notification ID to close.
+     */
+    close: (id) => {
+        if (currentQueuedNotification && currentQueuedNotification.id === id) {
+            currentQueuedNotification = null;
+            processQueuedNotification();
+        }
+        else {
+            queuedNotifications = queuedNotifications.filter(n => n.id !== id);
+            notifications = notifications.filter(n => n.id !== id);
+        }
+        notifyNotificationListeners();
+    },
+    /** Close all notifications and clear the queue. */
+    closeAll: () => {
+        notifications = [];
+        queuedNotifications = [];
+        currentQueuedNotification = null;
+        notifyNotificationListeners();
+    },
+    /**
+     * Subscribe to notification state changes.
+     * @param {(items: NotificationInstance[]) => void} listener - Callback invoked on changes.
+     * @returns {() => void} Unsubscribe function.
+     */
+    subscribe: (listener) => {
+        notificationListeners.add(listener);
+        return () => notificationListeners.delete(listener);
+    },
+};
+/**
+ * Whether a notification of this color announces itself as an alert, rather
+ * than politely through NotificationContainer's status region.
+ *
+ * @function isUrgentColor
+ * @param {NotificationOptions['color']} color - The notification's color.
+ * @returns {boolean} True for `danger` and `warning`.
+ */
+const isUrgentColor = (color) => color === 'danger' || color === 'warning';
+/**
+ * Single auto-dismissing notification item used by NotificationContainer.
+ *
+ * @function
+ * @param {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.
+ * @returns {JSX.Element} The rendered notification item.
+ */
+const NotificationItem = ({ instance, onClose, registerMessage }) => {
+    const { message, color, isLight, duration = 3000, hasDelete = true, indefinite = false, pauseOnHover = true, } = instance.options;
+    const [isPaused, setIsPaused] = useState(false);
+    const urgent = isUrgentColor(color);
+    const handleClose = useCallback(() => {
+        onClose(instance.id);
+    }, [onClose, instance.id]);
+    const messageRef = useCallback((node) => {
+        registerMessage(instance.id, node);
+    }, [registerMessage, instance.id]);
+    // Auto-close timer
+    useEffect(() => {
+        if (indefinite || duration === 0 || isPaused)
+            return undefined;
+        const timer = setTimeout(handleClose, duration);
+        return () => clearTimeout(timer);
+    }, [duration, indefinite, isPaused, handleClose]);
+    const handleMouseEnter = useCallback(() => {
+        if (pauseOnHover)
+            setIsPaused(true);
+    }, [pauseOnHover]);
+    const handleMouseLeave = useCallback(() => {
+        if (pauseOnHover)
+            setIsPaused(false);
+    }, [pauseOnHover]);
+    return (jsx(Notification, { color: color, isLight: isLight, hasDelete: hasDelete, onDelete: handleClose, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { pointerEvents: 'auto' }, children: urgent ? (jsx("span", { role: "alert", "aria-live": "assertive", children: message })) : (jsx("span", { ref: messageRef, children: message })) }));
+};
+// The order NotificationContainer renders its stacks in: across the top of the
+// screen, then across the bottom.
+const notificationStackOrder = [
+    'top-left',
+    'top',
+    'top-right',
+    'bottom-left',
+    'bottom',
+    'bottom-right',
+];
+/**
+ * Inline style that fixes a stack of notifications to its place on the screen.
+ *
+ * @function
+ * @param {NotificationPosition} position - Where the stack sits.
+ * @returns {React.CSSProperties} The stack's style.
+ */
+const notificationStackStyle = (position) => {
+    const isBottom = position.startsWith('bottom');
+    const isCenter = position === 'top' || position === 'bottom';
+    const isRight = position.endsWith('right');
+    return {
+        position: 'fixed',
+        zIndex: 100,
+        display: 'flex',
+        flexDirection: isBottom ? 'column-reverse' : 'column',
+        gap: '0.75rem',
+        padding: '1rem',
+        pointerEvents: 'none',
+        maxWidth: '100%',
+        ...(isBottom ? { bottom: 0 } : { top: 0 }),
+        ...(isCenter
+            ? { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }
+            : isRight
+                ? { right: 0, alignItems: 'flex-end' }
+                : { left: 0, alignItems: 'flex-start' }),
+    };
+};
+/**
+ * Container component for rendering programmatic notifications.
+ * Place once at your app root to enable the notification API. A notification
+ * shown with a `position` appears there, and one shown without goes to the
+ * container's `position`, so the container renders a stack for each position
+ * in use.
+ *
+ * It keeps a visually hidden `role="status"` live region in the page from the
+ * moment it mounts, even while nothing is showing, and announces every
+ * notification other than `danger` and `warning` through it, a moment after
+ * the notification appears. Those notifications carry no `role="status"` of
+ * their own, so `getByRole('status')` finds the region, not the notification.
+ * The text stays in the region briefly, even if the notification closes in
+ * the meantime, and while both are up the page holds two copies of it. A
+ * polite notification that closes before its announcement is written, a
+ * moment after it appears, isn't announced at all. `danger` and `warning`
+ * notifications announce themselves as assertive alerts. The region is hidden
+ * with inline styles, so it needs no stylesheet.
+ *
+ * @function
+ * @param {{ position?: NotificationPosition }} props - Container props.
+ * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.
+ */
+const NotificationContainer = ({ position = 'top-right' }) => {
+    // Starts from the notifications already showing instead of an empty list,
+    // then follows changes.
+    const items = useSyncExternalStore(notification.subscribe, getVisibleNotifications, getServerNotifications);
+    // A portal needs a document, and it has no server-rendered counterpart, so
+    // the server render and the hydrating one render nothing, and the container
+    // portals in from the render after hydration.
+    const isHydrated = useIsHydrated();
+    // The notifications the status region announces. Danger and warning
+    // announce themselves.
+    const politeItems = useMemo(() => items.filter(item => !isUrgentColor(item.options.color)), [items]);
+    // Each polite notification's message element, so the text the region
+    // announces is the text on screen, whatever the message renders.
+    const messageNodesRef = useRef(new Map());
+    const registerMessage = useCallback((id, node) => {
+        if (node) {
+            messageNodesRef.current.set(id, node);
+        }
+        else {
+            messageNodesRef.current.delete(id);
+        }
+    }, []);
+    // StatusRegion only describes polite notifications that are on screen, and
+    // each of those registered its message element when it mounted. The
+    // fallback is for a notification announced without being rendered, should
+    // the container ever render fewer than it announces: a plain-text message
+    // still says itself, and anything else is skipped.
+    const describe = useCallback((item) => {
+        const node = messageNodesRef.current.get(item.id);
+        /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */
+        if (!node) {
+            const { message } = item.options;
+            return typeof message === 'string' ? message : null;
+        }
+        return spokenText(node);
+    }, []);
+    if (typeof document === 'undefined' || !isHydrated) {
+        return null;
+    }
+    const stacks = groupIntoPositionStacks(items, item => item.options.position, position, notificationStackOrder);
+    return createPortal(jsxs(Fragment, { children: [stacks.map(stack => (jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsx(NotificationItem, { instance: item, onClose: notification.close, registerMessage: registerMessage }, item.id))) }, stack.key))), jsx(StatusRegion, { items: politeItems, describe: describe })] }), document.body);
+};
+
+export { Notification, NotificationContainer, notification };
+//# sourceMappingURL=Notification.js.map

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

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

package/dist/esm/elements/OrderedList.js

@@ -0,0 +1,31 @@
+/* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { ListItem } from './ListItem.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+
+/**
+ * The `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration.
+ *
+ * @function
+ * @param {OrderedListProps} props - Props for the OrderedList component.
+ * @returns {JSX.Element} The rendered ol element.
+ */
+const OrderedListComponent = ({ className, textColor, bgColor, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const listClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsx("ol", { className: listClasses || undefined, ...rest, children: children }));
+};
+const OrderedList = withSubComponents(OrderedListComponent, { Item: ListItem }, 'OrderedList');
+
+export { OrderedList };
+//# sourceMappingURL=OrderedList.js.map

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

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

package/dist/esm/elements/Paragraph.js

@@ -0,0 +1,28 @@
+/* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+
+/**
+ * The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {ParagraphProps} props - Props for the Paragraph component.
+ * @returns {JSX.Element} The rendered paragraph element.
+ */
+const Paragraph = ({ className, textColor, bgColor, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const paragraphClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsx("p", { className: paragraphClasses || undefined, ...rest, children: children }));
+};
+
+export { Paragraph };
+//# sourceMappingURL=Paragraph.js.map

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

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

package/dist/esm/elements/Pre.js

@@ -0,0 +1,25 @@
+/* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+
+/**
+ * The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {PreProps} props - Props for the Pre component.
+ * @returns {JSX.Element} The rendered pre element.
+ */
+const Pre = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const preClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsx("pre", { className: preClasses || undefined, ...rest, children: children }));
+};
+
+export { Pre };
+//# sourceMappingURL=Pre.js.map

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

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

package/dist/esm/elements/Progress.js

@@ -0,0 +1,33 @@
+/* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { warnUnstyledColor } from '../helpers/colorDeprecations.js';
+import { validColors } from '../helpers/bulmaClassHelpers.js';
+
+/**
+ * The `Progress` component displays a Bulma-styled progress bar.
+ *
+ * @function
+ * @param {ProgressProps} props - Props for the Progress component.
+ * @returns {JSX.Element} The rendered progress bar element.
+ * @see {@link https://bulma.io/documentation/elements/progress/ | Bulma Progress documentation}
+ */
+const Progress = ({ className, color, size, value, max, children, ...props }) => {
+    warnUnstyledColor('Progress', color);
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames('progress', {
+        [`is-${color}`]: color && validColors.includes(color),
+        [`is-${size}`]: size,
+    });
+    const progressClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsx("progress", { className: progressClasses, value: value, max: max, ...rest, children: children }));
+};
+
+export { Progress };
+//# sourceMappingURL=Progress.js.map

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

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

package/dist/esm/elements/Skeleton.js

@@ -0,0 +1,30 @@
+/* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+
+/**
+ * The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
+ *
+ * @function
+ * @param {SkeletonProps} props - Props for the Skeleton component.
+ * @returns {JSX.Element} The rendered skeleton element.
+ *
+ * @example
+ * // Block skeleton
+ * <Skeleton />
+ *
+ * @example
+ * // Multi-line skeleton
+ * <Skeleton variant="lines" lines={5} />
+ */
+const Skeleton = ({ className, variant = 'block', lines = 3, children, ...props }) => {
+    const linesClass = usePrefixedClassNames('skeleton-lines');
+    const blockClass = usePrefixedClassNames('skeleton-block');
+    if (variant === 'lines') {
+        return (jsx("div", { className: classNames(linesClass, className), ...props, children: Array.from({ length: lines }).map((_, i) => (jsx("div", {}, i))) }));
+    }
+    return (jsx("div", { className: classNames(blockClass, className), ...props, children: children }));
+};
+
+export { Skeleton };
+//# sourceMappingURL=Skeleton.js.map

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

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

package/dist/esm/elements/Span.js

@@ -0,0 +1,28 @@
+/* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+
+/**
+ * The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {SpanProps} props - Props for the Span component.
+ * @returns {JSX.Element} The rendered span element.
+ */
+const Span = ({ className, textColor, bgColor, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const spanClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsx("span", { className: spanClasses || undefined, ...rest, children: children }));
+};
+
+export { Span };
+//# sourceMappingURL=Span.js.map

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

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

package/dist/esm/elements/Strong.js

@@ -0,0 +1,25 @@
+/* @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 { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+
+/**
+ * The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {StrongProps} props - Props for the Strong component.
+ * @returns {JSX.Element} The rendered strong element.
+ */
+const Strong = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const strongClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsx("strong", { className: strongClasses || undefined, ...rest, children: children }));
+};
+
+export { Strong };
+//# sourceMappingURL=Strong.js.map