@allxsmith/bestax-bulma 5.27.0 → 5.27.1

package/dist/esm/components/Menu.js

@@ -0,0 +1,117 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { createContext, forwardRef, useContext } from 'react';
+import { classNames, usePrefixedClassNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { omitAttrs } from '../helpers/anchorAttrs.js';
+import { buttonType } from '../helpers/buttonType.js';
+import { isCustomElement } from '../helpers/polymorphic.js';
+
+// Context to track MenuList nesting level
+const MenuListLevelContext = createContext(0);
+/**
+ * The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
+ *
+ * @function
+ * @param {MenuProps} props - Props for the Menu component.
+ * @returns {JSX.Element} The rendered menu.
+ * @see {@link https://bulma.io/documentation/components/menu/ | Bulma Menu documentation}
+ */
+const MenuComponent = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('menu');
+    return (jsx("aside", { className: classNames(bulmaClasses, bulmaHelperClasses, className), ...rest, children: children }));
+};
+/**
+ * Bulma Menu label component.
+ *
+ * @function
+ * @param {MenuLabelProps} props - Props for the MenuLabel component.
+ * @returns {JSX.Element} The rendered menu label.
+ */
+const MenuLabel = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsx("p", { className: classNames(usePrefixedClassNames('menu-label'), className, bulmaHelperClasses), ...rest, children: children }));
+};
+/**
+ * MenuList applies `menu-list` class only at the top level (not for nested lists).
+ *
+ * @function
+ * @param {MenuListProps} props - Props for the MenuList component.
+ * @returns {JSX.Element} The rendered menu list.
+ */
+const MenuList = ({ className, children, ...props }) => {
+    const level = useContext(MenuListLevelContext);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const ulClass = classNames(className, bulmaHelperClasses, {
+        [usePrefixedClassNames('menu-list')]: level === 0,
+    });
+    // Increment level for nested MenuLists
+    return (jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsx("ul", { className: ulClass || undefined, ...rest, children: children }) }));
+};
+/**
+ * `href` alone — annotated so a typo is a compile error rather than a silent
+ * no-op, the way both siblings' sets are.
+ */
+const STRIP_FROM_NON_LINK = { href: true };
+/**
+ * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.
+ *
+ * @function
+ * @param {MenuItemProps} props - Props for the MenuItem component.
+ * @param {React.Ref} ref - Forwarded ref to the inner element `as` renders.
+ * @returns {JSX.Element} The rendered menu item.
+ */
+const MenuItem = forwardRef(function MenuItem(itemProps, ref) {
+    const { className, children, active, as: Component = 'a', 'data-testid': testId, style, id, title, role, tabIndex, ...rest } = itemProps;
+    const { bulmaHelperClasses, rest: forwarded } = useBulmaClasses(rest);
+    // `href` reaches an anchor or a custom component (which owns its own prop
+    // contract), but not another intrinsic tag — `<span href>` is invalid HTML.
+    // The same rule Avatar applies through `isLinkLike` and Button through its
+    // intrinsic-only strip. Before #641 `href` was an own prop re-applied only
+    // for `as="a"`; deriving it from `as` must not quietly widen that.
+    const isLinkLike = Component === 'a' ||
+        typeof Component !== 'string' ||
+        isCustomElement(Component);
+    // `href` ALONE. `Dropdown.Item` strips every anchor-only attribute except
+    // `type`; `Level.Item` strips all of them, plus `rel`.
+    //
+    // Not because nothing else can arrive: `as` here is an open `React.ElementType`,
+    // and a non-fresh spread skips excess-property checking, so a typed caller
+    // CAN deliver `target` or `download` and they are forwarded. The set stays at
+    // `href` because widening it would be wrong for an open `as` — `referrerPolicy`
+    // on `as="img"`, `target` on `as="form"` and `media` on `as="source"` are all
+    // legal, and a flat strip would delete them. Getting that right needs a
+    // per-attribute-per-element rule, which `bestax-migrate` already models in
+    // `LINK_ATTR_ELEMENTS`.
+    const linkProps = isLinkLike
+        ? forwarded
+        : omitAttrs(forwarded, STRIP_FROM_NON_LINK);
+    const itemClass = classNames({ [usePrefixedClassNames('is-active')]: active }, bulmaHelperClasses);
+    // Split children into label and nested MenuList(s)
+    const labelChildren = [];
+    const nestedMenuLists = [];
+    React.Children.forEach(children, child => {
+        if (React.isValidElement(child) && child.type === MenuList) {
+            nestedMenuLists.push(child);
+        }
+        else {
+            labelChildren.push(child);
+        }
+    });
+    return (jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsx(Component, { ref: ref, className: itemClass || undefined, ...linkProps, ...(Component === 'button'
+                    ? { type: buttonType(linkProps.type) }
+                    : {}), children: labelChildren }), nestedMenuLists] }));
+});
+MenuItem.displayName = 'MenuItem';
+// Attach static subcomponents
+const Menu = withSubComponents(MenuComponent, {
+    Label: MenuLabel,
+    List: MenuList,
+    Item: MenuItem,
+}, 'Menu');
+
+export { Menu, MenuItem, MenuLabel, MenuList };
+//# sourceMappingURL=Menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { omitAttrs } from '../helpers/anchorAttrs';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n  isCustomElement,\n  type PolymorphicComponent,\n} from '../helpers/polymorphic';\n\n// Context to track MenuList nesting level\nconst MenuListLevelContext = createContext(0);\n\n/**\n * Props for the Menu component.\n */\nexport interface MenuProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Menu content (labels, lists, items, etc). */\n  children: React.ReactNode;\n}\n\n/**\n * The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.\n *\n * @function\n * @param {MenuProps} props - Props for the Menu component.\n * @returns {JSX.Element} The rendered menu.\n * @see {@link https://bulma.io/documentation/components/menu/ | Bulma Menu documentation}\n */\nconst MenuComponent: React.FC<MenuProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('menu');\n\n  return (\n    <aside\n      className={classNames(bulmaClasses, bulmaHelperClasses, className)}\n      {...rest}\n    >\n      {children}\n    </aside>\n  );\n};\n\n/**\n * Props for the MenuLabel component.\n */\nexport interface MenuLabelProps\n  extends\n    Omit<React.HTMLAttributes<HTMLParagraphElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Label content. */\n  children: React.ReactNode;\n}\n\n/**\n * Bulma Menu label component.\n *\n * @function\n * @param {MenuLabelProps} props - Props for the MenuLabel component.\n * @returns {JSX.Element} The rendered menu label.\n */\nexport const MenuLabel: React.FC<MenuLabelProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  return (\n    <p\n      className={classNames(\n        usePrefixedClassNames('menu-label'),\n        className,\n        bulmaHelperClasses\n      )}\n      {...rest}\n    >\n      {children}\n    </p>\n  );\n};\n\n/**\n * Props for the MenuList component.\n */\nexport interface MenuListProps\n  extends\n    Omit<React.HTMLAttributes<HTMLUListElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** List items. */\n  children: React.ReactNode;\n}\n\n/**\n * MenuList applies `menu-list` class only at the top level (not for nested lists).\n *\n * @function\n * @param {MenuListProps} props - Props for the MenuList component.\n * @returns {JSX.Element} The rendered menu list.\n */\nexport const MenuList: React.FC<MenuListProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const level = useContext(MenuListLevelContext);\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  const ulClass = classNames(className, bulmaHelperClasses, {\n    [usePrefixedClassNames('menu-list')]: level === 0,\n  });\n\n  // Increment level for nested MenuLists\n  return (\n    <MenuListLevelContext.Provider value={level + 1}>\n      <ul className={ulClass || undefined} {...rest}>\n        {children}\n      </ul>\n    </MenuListLevelContext.Provider>\n  );\n};\n\n/**\n * The MenuItem component's own props.\n *\n * A menu item is two elements: a wrapping `<li>` and, inside it, the element\n * `as` names. The props here are the ones the `<li>` consumes; everything else\n * follows `as` onto the inner element.\n */\nexport interface MenuItemOwnProps extends BulmaClassesProps {\n  /** Additional CSS classes for the wrapping `<li>`. */\n  className?: string;\n  /** Item content and optional nested MenuList. */\n  children: React.ReactNode;\n  /** Highlight item as active. */\n  active?: boolean;\n  /** Inline styles for the wrapping `<li>`. */\n  style?: React.CSSProperties;\n  /** `id` for the wrapping `<li>`. */\n  id?: string;\n  /** `title` for the wrapping `<li>`. */\n  title?: string;\n  /** ARIA role for the wrapping `<li>`. */\n  role?: React.AriaRole;\n  /** Tab index for the wrapping `<li>`. */\n  tabIndex?: number;\n  /** Test id for the wrapping `<li>`. */\n  'data-testid'?: string;\n}\n\n/**\n * Props for the MenuItem component. Everything the `<li>` does not consume\n * follows `as` onto the inner element: with the default `'a'` that means `href`\n * and the other anchor attributes, and with `as={Link}` it means that\n * component's own props.\n *\n * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the inner element `as` renders, not the wrapping `<li>`, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.\n */\nexport type MenuItemProps<T extends React.ElementType = 'a'> =\n  MenuItemOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof MenuItemOwnProps | 'as'> & {\n      /**\n       * Custom link component (e.g. `Link` from router).\n       *\n       * `'button'` renders `type=\"button\"` unless you pass `type=\"submit\"` or `type=\"reset\"`, so\n       * an item inside a form does not submit it.\n       */\n      as?: T;\n    };\n\n/**\n * `href` alone — annotated so a typo is a compile error rather than a silent\n * no-op, the way both siblings' sets are.\n */\nconst STRIP_FROM_NON_LINK: Readonly<Record<'href', true>> = { href: true };\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `MenuItemProps<T>` above — the body cannot see through `T`.\n */\ntype MenuItemImplProps = MenuItemOwnProps & {\n  as?: React.ElementType;\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n};\n\n/**\n * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.\n *\n * @function\n * @param {MenuItemProps} props - Props for the MenuItem component.\n * @param {React.Ref} ref - Forwarded ref to the inner element `as` renders.\n * @returns {JSX.Element} The rendered menu item.\n */\nexport const MenuItem = forwardRef(function MenuItem(\n  itemProps: MenuItemProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const {\n    className,\n    children,\n    active,\n    as: Component = 'a',\n    'data-testid': testId,\n    style,\n    id,\n    title,\n    role,\n    tabIndex,\n    ...rest\n  } = itemProps as MenuItemImplProps;\n  const { bulmaHelperClasses, rest: forwarded } = useBulmaClasses(rest);\n  // `href` reaches an anchor or a custom component (which owns its own prop\n  // contract), but not another intrinsic tag — `<span href>` is invalid HTML.\n  // The same rule Avatar applies through `isLinkLike` and Button through its\n  // intrinsic-only strip. Before #641 `href` was an own prop re-applied only\n  // for `as=\"a\"`; deriving it from `as` must not quietly widen that.\n  const isLinkLike =\n    Component === 'a' ||\n    typeof Component !== 'string' ||\n    isCustomElement(Component);\n  // `href` ALONE. `Dropdown.Item` strips every anchor-only attribute except\n  // `type`; `Level.Item` strips all of them, plus `rel`.\n  //\n  // Not because nothing else can arrive: `as` here is an open `React.ElementType`,\n  // and a non-fresh spread skips excess-property checking, so a typed caller\n  // CAN deliver `target` or `download` and they are forwarded. The set stays at\n  // `href` because widening it would be wrong for an open `as` — `referrerPolicy`\n  // on `as=\"img\"`, `target` on `as=\"form\"` and `media` on `as=\"source\"` are all\n  // legal, and a flat strip would delete them. Getting that right needs a\n  // per-attribute-per-element rule, which `bestax-migrate` already models in\n  // `LINK_ATTR_ELEMENTS`.\n  const linkProps = isLinkLike\n    ? forwarded\n    : omitAttrs(forwarded, STRIP_FROM_NON_LINK);\n  const itemClass = classNames(\n    { [usePrefixedClassNames('is-active')]: active },\n    bulmaHelperClasses\n  );\n\n  // Split children into label and nested MenuList(s)\n  const labelChildren: React.ReactNode[] = [];\n  const nestedMenuLists: React.ReactNode[] = [];\n  React.Children.forEach(children, child => {\n    if (React.isValidElement(child) && child.type === MenuList) {\n      nestedMenuLists.push(child);\n    } else {\n      labelChildren.push(child);\n    }\n  });\n\n  return (\n    <li\n      className={className}\n      data-testid={testId}\n      style={style}\n      id={id}\n      title={title}\n      role={role}\n      tabIndex={tabIndex}\n    >\n      <Component\n        ref={ref}\n        className={itemClass || undefined}\n        {...linkProps}\n        // A menu item inside a form must not submit it, and `<button>` defaults\n        // to type=\"submit\". A sidebar menu sitting in a form is ordinary. A\n        // caller's `submit` or `reset` still wins. Anything else becomes\n        // `button`, since HTML reads a value it does not define for a button as\n        // submit too; `buttonType` says more.\n        //\n        // After `linkProps`, reading through it rather than before it: React\n        // treats `type={undefined}` as \"remove the attribute\", and a spread\n        // carrying the key with no value is how that arrives, so a default\n        // spread first would be erased by it. `Dropdown.Item` and `Avatar`\n        // apply their button type after the spread too.\n        {...(Component === 'button'\n          ? { type: buttonType(linkProps.type) }\n          : {})}\n      >\n        {labelChildren}\n      </Component>\n      {nestedMenuLists}\n    </li>\n  );\n}) as PolymorphicComponent<MenuItemOwnProps, 'a'>;\n\nMenuItem.displayName = 'MenuItem';\n\n// Attach static subcomponents\nexport const Menu = withSubComponents(\n  MenuComponent,\n  {\n    Label: MenuLabel,\n    List: MenuList,\n    Item: MenuItem,\n  },\n  'Menu'\n);\n\nexport default Menu;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/Message.js

@@ -0,0 +1,56 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { classNames, usePrefixedClassNames, prefixedClassNames } from '../helpers/classNames.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useConfig } from '../helpers/Config.js';
+
+const validMessageSizes = ['small', 'medium', 'large'];
+/**
+ * The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.
+ *
+ * @function
+ * @param {MessageProps} props - Props for the Message component.
+ * @returns {JSX.Element} The rendered message.
+ * @see {@link https://bulma.io/documentation/components/message/ | Bulma Message documentation}
+ */
+const MessageComponent = ({ className, title, textColor, color, bgColor, size, onClose, children, ...props }) => {
+    const { classPrefix } = useConfig();
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('message', {
+        [`is-${color}`]: color,
+        [`is-${size}`]: size && validMessageSizes.includes(size),
+    });
+    const deleteClass = usePrefixedClassNames('delete');
+    const messageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxs("div", { className: prefixedClassNames(classPrefix, 'message-header'), children: [title && jsx("span", { children: title }), onClose && (jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsx("div", { className: prefixedClassNames(classPrefix, 'message-body'), "data-testid": "message-body", children: children }))] }));
+};
+/**
+ * Message header compound component. Renders a `.message-header` element.
+ *
+ * @function
+ * @param {MessageHeaderProps} props - Props for the MessageHeader component.
+ * @returns {JSX.Element} The rendered message header.
+ */
+const MessageHeader = ({ className, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('message-header'), className), ...props, children: children }));
+/**
+ * Message body compound component. Renders a `.message-body` element.
+ *
+ * @function
+ * @param {MessageBodyProps} props - Props for the MessageBody component.
+ * @returns {JSX.Element} The rendered message body.
+ */
+const MessageBody = ({ className, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('message-body'), className), ...props, children: children }));
+// Attach compound components
+const Message = withSubComponents(MessageComponent, {
+    Header: MessageHeader,
+    Body: MessageBody,
+}, 'Message');
+
+export { Message };
+//# sourceMappingURL=Message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sources":["../../../src/components/Message.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\n\nconst validMessageSizes = ['small', 'medium', 'large'] as const;\n/**\n * Valid size values for the Message component (Bulma message sizes).\n */\nexport type MessageSize = (typeof validMessageSizes)[number];\n\n/**\n * Props for the Message component.\n */\nexport interface MessageProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Title string/node (renders header section). */\n  title?: React.ReactNode;\n  /** Text color for the message (Bulma helper). */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color modifier for the message. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the message (Bulma helper). */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Size of the message. */\n  size?: MessageSize;\n  /** Callback for the close (\"X\") button. */\n  onClose?: () => void;\n  /** Body content for the message. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.\n *\n * @function\n * @param {MessageProps} props - Props for the Message component.\n * @returns {JSX.Element} The rendered message.\n * @see {@link https://bulma.io/documentation/components/message/ | Bulma Message documentation}\n */\nconst MessageComponent: React.FC<MessageProps> = ({\n  className,\n  title,\n  textColor,\n  color,\n  bgColor,\n  size,\n  onClose,\n  children,\n  ...props\n}) => {\n  const { classPrefix } = useConfig();\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('message', {\n    [`is-${color}`]: color,\n    [`is-${size}`]: size && validMessageSizes.includes(size),\n  });\n  const deleteClass = usePrefixedClassNames('delete');\n\n  const messageClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  return (\n    <article className={messageClasses} {...rest} data-testid=\"message\">\n      {(title || onClose) && (\n        <div className={prefixedClassNames(classPrefix, 'message-header')}>\n          {title && <span>{title}</span>}\n          {onClose && (\n            <button\n              className={deleteClass}\n              aria-label=\"delete\"\n              onClick={onClose}\n              type=\"button\"\n              data-testid=\"message-close\"\n            />\n          )}\n        </div>\n      )}\n      {children && (\n        <div\n          className={prefixedClassNames(classPrefix, 'message-body')}\n          data-testid=\"message-body\"\n        >\n          {children}\n        </div>\n      )}\n    </article>\n  );\n};\n\n// Compound components for flexible composition\n\n/**\n * Props for the Message.Header compound component.\n */\nexport interface MessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Header content (title, close button, etc.). */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the Message.Body compound component.\n */\nexport interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Message body content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Message header compound component. Renders a `.message-header` element.\n *\n * @function\n * @param {MessageHeaderProps} props - Props for the MessageHeader component.\n * @returns {JSX.Element} The rendered message header.\n */\nconst MessageHeader: React.FC<MessageHeaderProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <div\n    className={classNames(usePrefixedClassNames('message-header'), className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Message body compound component. Renders a `.message-body` element.\n *\n * @function\n * @param {MessageBodyProps} props - Props for the MessageBody component.\n * @returns {JSX.Element} The rendered message body.\n */\nconst MessageBody: React.FC<MessageBodyProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <div\n    className={classNames(usePrefixedClassNames('message-body'), className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n// Attach compound components\nexport const Message = withSubComponents(\n  MessageComponent,\n  {\n    Header: MessageHeader,\n    Body: MessageBody,\n  },\n  'Message'\n);\n\nexport default Message;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAcA,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU;AA+B/D;;;;;;;AAOG;AACH,MAAM,gBAAgB,GAA2B,CAAC,EAChD,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AACnC,IAAA,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC;AACnD,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,eAAe,EAAE,OAAO;AACxB,QAAA,GAAG,KAAK;AACT,KAAA,CAAC;;AAGF,IAAA,MAAM,YAAY,GAAG,qBAAqB,CAAC,SAAS,EAAE;AACpD,QAAA,CAAC,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK;AACtB,QAAA,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,CAAE,GAAG,IAAI,IAAI,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC;AACzD,KAAA,CAAC;AACF,IAAA,MAAM,WAAW,GAAG,qBAAqB,CAAC,QAAQ,CAAC;IAEnD,MAAM,cAAc,GAAG,UAAU,CAC/B,YAAY,EACZ,kBAAkB,EAClB,SAAS,CACV;AAED,IAAA,QACEA,IAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAE,cAAc,KAAM,IAAI,EAAA,aAAA,EAAc,SAAS,EAAA,QAAA,EAAA,CAChE,CAAC,KAAK,IAAI,OAAO,MAChBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,CAC9D,KAAK,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,KAAK,EAAA,CAAQ,EAC7B,OAAO,KACNA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,WAAW,gBACX,QAAQ,EACnB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,iBACD,eAAe,EAAA,CAC3B,CACH,CAAA,EAAA,CACG,CACP,EACA,QAAQ,KACPA,aACE,SAAS,EAAE,kBAAkB,CAAC,WAAW,EAAE,cAAc,CAAC,EAAA,aAAA,EAC9C,cAAc,EAAA,QAAA,EAEzB,QAAQ,GACL,CACP,CAAA,EAAA,CACO;AAEd,CAAC;AAwBD;;;;;;AAMG;AACH,MAAM,aAAa,GAAiC,CAAC,EACnD,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,MACCA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,KACrE,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACL,CACP;AAED;;;;;;AAMG;AACH,MAAM,WAAW,GAA+B,CAAC,EAC/C,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,MACCA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,qBAAqB,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,KACnE,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACL,CACP;AAED;AACO,MAAM,OAAO,GAAG,iBAAiB,CACtC,gBAAgB,EAChB;AACE,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;CAClB,EACD,SAAS;;"}

package/dist/esm/components/Modal.js

@@ -0,0 +1,354 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { forwardRef, useRef, useCallback, useId, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { usePrefixedClassNames, classNames, prefixedClassNames } from '../helpers/classNames.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { buttonType } from '../helpers/buttonType.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useConfig } from '../helpers/Config.js';
+import { useScrollLock } from '../helpers/scrollLock.js';
+import { getDeepestActiveElement, getActiveElementInTree } from '../helpers/shadowDom.js';
+import { resolvePortalContainer } from '../helpers/portal.js';
+import { useIsHydrated } from '../helpers/useIsHydrated.js';
+
+/**
+ * Every currently active modal, in the order they opened. Only the last entry
+ * — the topmost modal — reacts to Escape and Tab, so one keypress can't
+ * dismiss a whole stack (e.g. a `Dialog` opened on top of a `Modal`).
+ */
+const activeModalStack = [];
+/**
+ * Controls the modal can hand focus to. Disabled and hidden controls are
+ * excluded because `focus()` on them is a no-op, which would leave focus
+ * outside the modal.
+ */
+const FOCUSABLE_SELECTOR = 'button:not(:disabled), [href], input:not(:disabled):not([type="hidden"]), select:not(:disabled), textarea:not(:disabled), [tabindex]';
+/**
+ * The modal's tab stops, in document order. The selector alone is not the
+ * tabbable set — `[href]` and `button` match regardless of `tabindex`, so an
+ * `<a href tabIndex={-1}>` would otherwise be treated as a tab stop and let
+ * Tab escape the modal when it sorts last. `el.tabIndex` is the browser's own
+ * resolved value, so filtering on it drops every negative index (not just
+ * `-1`) without a second selector to keep in sync.
+ */
+const getTabbable = (node) => Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => el.tabIndex >= 0);
+/**
+ * Modal.Background - Renders the modal background overlay.
+ *
+ * @function
+ * @param {ModalBackgroundProps} props - Component props.
+ * @returns {JSX.Element} Modal background element.
+ */
+const ModalBackground = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-background'), className);
+    return jsx("div", { className: classes, ...props });
+};
+/**
+ * Modal.Content - Renders modal content wrapper for custom content.
+ *
+ * @function
+ * @param {ModalContentProps} props - Component props.
+ * @returns {JSX.Element} Modal content element.
+ */
+const ModalContent = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-content'), className);
+    return jsx("div", { className: classes, ...props });
+};
+/**
+ * Modal.Card.Head - Renders modal card header section.
+ *
+ * @function
+ * @param {ModalCardHeadProps} props - Component props.
+ * @returns {JSX.Element} Modal card header element.
+ */
+const ModalCardHead = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-card-head'), className);
+    return jsx("header", { className: classes, ...props });
+};
+/**
+ * Modal.Card.Title - Renders modal card title.
+ *
+ * @function
+ * @param {ModalCardTitleProps} props - Component props.
+ * @returns {JSX.Element} Modal card title element.
+ */
+const ModalCardTitle = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-card-title'), className);
+    return jsx("p", { className: classes, ...props });
+};
+/**
+ * Modal.Card.Body - Renders modal card body section.
+ *
+ * @function
+ * @param {ModalCardBodyProps} props - Component props.
+ * @returns {JSX.Element} Modal card body element.
+ */
+const ModalCardBody = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-card-body'), className);
+    return jsx("section", { className: classes, ...props });
+};
+/**
+ * Modal.Card.Foot - Renders modal card footer section.
+ *
+ * @function
+ * @param {ModalCardFootProps} props - Component props.
+ * @returns {JSX.Element} Modal card footer element.
+ */
+const ModalCardFoot = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-card-foot'), className);
+    return jsx("footer", { className: classes, ...props });
+};
+/**
+ * Modal.Card - Renders modal card wrapper with compound components.
+ * Use with Modal.Card.Head, Modal.Card.Title, Modal.Card.Body, and Modal.Card.Foot.
+ *
+ * @function
+ * @param {ModalCardProps} props - Component props.
+ * @returns {JSX.Element} Modal card element.
+ */
+const ModalCardComponent = ({ className, ...props }) => {
+    const classes = classNames(usePrefixedClassNames('modal-card'), className);
+    return jsx("div", { className: classes, ...props });
+};
+const ModalCard = withSubComponents(ModalCardComponent, {
+    Head: ModalCardHead,
+    Title: ModalCardTitle,
+    Body: ModalCardBody,
+    Foot: ModalCardFoot,
+});
+/**
+ * Modal.Close - Renders modal close button with two variant styles.
+ *
+ * @function
+ * @param {ModalCloseProps} props - Component props.
+ * @returns {JSX.Element} Close button element.
+ *
+ * @remarks
+ * Supports two variants:
+ * - 'delete' (default): For use in modal card headers, renders with 'delete' class
+ * - 'floating': For floating overlay close button, renders with 'modal-close' class
+ *
+ * The size prop only applies to the 'floating' variant.
+ */
+const ModalClose = ({ className, size = 'large', variant = 'delete', ...props }) => {
+    const classes = classNames(usePrefixedClassNames(variant === 'delete' ? 'delete' : 'modal-close', variant === 'floating' && size && { [`is-${size}`]: true }), className);
+    return (jsx("button", { className: classes, ...props, "aria-label": props['aria-label'] || 'close', type: buttonType(props.type) }));
+};
+/**
+ * The `Modal` component provides an empty, accessible overlay for arbitrary content — for a ready-made confirm or alert, reach for `Dialog` instead.
+ *
+ * @function
+ * @param {ModalProps} props - Props for the Modal component.
+ * @returns {JSX.Element} The rendered modal.
+ *
+ * @example
+ * // Legacy API
+ * <Modal active={isOpen} onClose={handleClose} modalCardTitle="Title">
+ *   Content
+ * </Modal>
+ *
+ * @example
+ * // Compound Component API
+ * <Modal isActive={isOpen}>
+ *   <Modal.Background onClick={handleClose} />
+ *   <Modal.Card>
+ *     <Modal.Card.Head>
+ *       <Modal.Card.Title>Title</Modal.Card.Title>
+ *       <Modal.Close onClick={handleClose} />
+ *     </Modal.Card.Head>
+ *     <Modal.Card.Body>Content</Modal.Card.Body>
+ *   </Modal.Card>
+ * </Modal>
+ *
+ * @see {@link https://bulma.io/documentation/components/modal/ | Bulma Modal documentation}
+ */
+const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, closeOnEscape = true, lockScroll = true, portal = false, role, 'aria-modal': ariaModalProp, ...props }, ref) {
+    const { classPrefix } = useConfig();
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    // Support both active and isActive props
+    const isModalActive = active ?? isActive ?? false;
+    const modalRootRef = useRef(null);
+    // Cleanup returned by a consumer's callback ref on attach, held until detach.
+    const consumerCleanupRef = useRef(null);
+    // The forwarded ref and the internal one must both see the node: focus
+    // management, the scroll lock and the topmost-modal check all read
+    // `modalRootRef`, while consumers expect their own ref to resolve.
+    const combinedRef = useCallback((node) => {
+        modalRootRef.current =
+            node;
+        if (typeof ref === 'function') {
+            // React 19 lets a callback ref return a cleanup function and detaches
+            // by running it instead of calling the ref with `null`; React 18
+            // discards the return value entirely. Returning it from here would be
+            // a React-19-only contract, so instead we hold the cleanup and run it
+            // ourselves on detach — a consumer's cleanup ref then behaves the same
+            // on both majors of the CI matrix. Same shape as `Dropdown`.
+            if (node === null) {
+                const consumerCleanup = consumerCleanupRef.current;
+                consumerCleanupRef.current = null;
+                if (consumerCleanup) {
+                    consumerCleanup();
+                }
+                else {
+                    ref(null);
+                }
+                return;
+            }
+            const cleanup = ref(node);
+            consumerCleanupRef.current =
+                typeof cleanup === 'function' ? cleanup : null;
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const previouslyFocusedRef = useRef(null);
+    const stackTokenRef = useRef({});
+    const generatedTitleId = useId();
+    // A portal has no server-rendered counterpart, so the server render and the
+    // hydrating render have to stay inline and only move into the portal once
+    // we're past hydration.
+    const onClient = useIsHydrated();
+    // Moving into the portal remounts the modal's subtree, so any effect holding
+    // a DOM node from before the move is holding a detached one. Effects that
+    // touch the modal's nodes key on this so they re-run against the new tree.
+    const isPortaled = Boolean(portal) && onClient;
+    useScrollLock(isModalActive && lockScroll);
+    // Record open order so keyboard handling only applies to the topmost modal.
+    useEffect(() => {
+        if (!isModalActive)
+            return undefined;
+        const token = stackTokenRef.current;
+        activeModalStack.push(token);
+        return () => {
+            const index = activeModalStack.indexOf(token);
+            if (index !== -1)
+                activeModalStack.splice(index, 1);
+        };
+    }, [isModalActive]);
+    // Escape closes; Tab cycles inside the modal. Both only for the topmost one.
+    useEffect(() => {
+        if (!isModalActive)
+            return undefined;
+        const handleKeyDown = (e) => {
+            const node = modalRootRef.current;
+            if (activeModalStack[activeModalStack.length - 1] !== stackTokenRef.current) {
+                return;
+            }
+            if (e.key === 'Escape') {
+                if (closeOnEscape)
+                    onClose?.();
+                return;
+            }
+            if (e.key !== 'Tab' || !node)
+                return;
+            // Keep Tab within the modal — `aria-modal` hides the rest of the page
+            // from assistive technology, so the keyboard order has to agree.
+            const focusable = getTabbable(node);
+            const activeElement = getActiveElementInTree(node);
+            if (focusable.length === 0) {
+                e.preventDefault();
+                node.focus();
+                return;
+            }
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            const outside = !node.contains(activeElement);
+            if (e.shiftKey) {
+                if (outside || activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
+                }
+            }
+            else if (outside || activeElement === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isModalActive, closeOnEscape, onClose]);
+    // Move focus into the modal on open, restore it on close
+    useEffect(() => {
+        if (!isModalActive)
+            return undefined;
+        // The element that had focus, wherever it sits: a portaled modal renders
+        // under `document.body` while its opener can be inside a shadow root.
+        previouslyFocusedRef.current =
+            getDeepestActiveElement();
+        const node = modalRootRef.current;
+        const focusable = node ? getTabbable(node)[0] : undefined;
+        (focusable ?? node)?.focus();
+        return () => {
+            // Only hand focus back if this modal still owns it: closing a background
+            // modal must not pull focus out of one that is still open on top. A
+            // removed subtree leaves focus on <body>, which still counts as ours.
+            const activeElement = getActiveElementInTree(node);
+            if (activeElement &&
+                activeElement !== document.body &&
+                !node?.contains(activeElement)) {
+                return;
+            }
+            previouslyFocusedRef.current?.focus?.();
+        };
+        // `isPortaled` flips once when a hydrated portal modal moves out of the
+        // inline tree; re-running rebinds focus onto the remounted nodes. The
+        // cleanup above restores focus to the pre-open element first (the detached
+        // subtree has left focus on <body>), so the re-run re-records the same
+        // element and restore-on-close still lands in the right place.
+    }, [isModalActive, isPortaled]);
+    // Check if children contain compound components
+    const hasCompoundComponents = React.Children.toArray(children).some(child => React.isValidElement(child) &&
+        (child.type === ModalBackground ||
+            child.type === ModalContent ||
+            child.type === ModalCard ||
+            child.type === ModalClose));
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('modal', {
+        'is-active': isModalActive,
+    });
+    const deleteClass = usePrefixedClassNames('delete');
+    const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    const resolvedRole = role ?? (isModalActive ? 'dialog' : undefined);
+    const resolvedAriaModal = ariaModalProp ??
+        (isModalActive && resolvedRole !== 'presentation' ? 'true' : undefined);
+    // A dialog needs an accessible name: the legacy card title is wired up
+    // automatically, compound users pass their own aria-label/aria-labelledby
+    // (both arrive in `rest`, which is spread last and so wins).
+    const titleId = modalCardTitle ? generatedTitleId : undefined;
+    let modalElement;
+    // If using compound components, render children as-is
+    if (hasCompoundComponents) {
+        modalElement = (jsx("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, tabIndex: -1, ...rest, "data-testid": "modal", children: children }));
+    }
+    else {
+        // Legacy API: EXPLICIT type wins; fallback to auto detection if not provided
+        let isModalCard;
+        if (type === 'card')
+            isModalCard = true;
+        else if (type === 'content')
+            isModalCard = false;
+        else
+            isModalCard = !!modalCardTitle || !!modalCardFoot;
+        modalElement = (jsxs("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, "aria-labelledby": titleId, tabIndex: -1, ...rest, "data-testid": "modal", children: [jsx("div", { className: prefixedClassNames(classPrefix, 'modal-background'), onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxs("div", { className: prefixedClassNames(classPrefix, 'modal-card'), children: [modalCardTitle && (jsxs("header", { className: prefixedClassNames(classPrefix, 'modal-card-head'), children: [jsx("p", { id: titleId, className: prefixedClassNames(classPrefix, 'modal-card-title'), children: modalCardTitle }), onClose && (jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsx("section", { className: prefixedClassNames(classPrefix, 'modal-card-body'), "data-testid": "modal-body", children: children }), modalCardFoot && (jsx("footer", { className: prefixedClassNames(classPrefix, 'modal-card-foot'), children: modalCardFoot }))] })) : (jsx("div", { className: prefixedClassNames(classPrefix, 'modal-content'), "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsx("button", { className: prefixedClassNames(classPrefix, 'modal-close', 'is-large'), "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
+    }
+    if (isPortaled) {
+        const target = resolvePortalContainer(typeof portal === 'boolean' ? undefined : portal);
+        return createPortal(modalElement, target);
+    }
+    return modalElement;
+});
+const Modal = withSubComponents(ModalRoot, {
+    Background: ModalBackground,
+    Content: ModalContent,
+    Card: ModalCard,
+    Close: ModalClose,
+}, 'Modal');
+
+export { Modal };
+//# sourceMappingURL=Modal.js.map