@allxsmith/bestax-bulma 5.58.0 → 5.59.0

package/dist/esm/layout/Flex.js

@@ -0,0 +1,34 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { StackLayout } from '../helpers/stackLayout.js';
+
+/**
+ * The `Flex` component is a flex container with CSS's own defaults, taking the flex container's properties as props.
+ *
+ * It's a row that doesn't wrap, with its children stretched across it and no
+ * gap, until you set otherwise. Use it for a layout of your own, such as a
+ * fixed side beside a growing one, with `flexGrow` and `flexShrink` on the
+ * children. Its children's own block margins are zeroed, so the gap is the
+ * only space. For a column of blocks or a row of controls with Bulma's
+ * spacing already in place, `Stack` and `Group` start closer.
+ *
+ * @function
+ * @param {FlexProps} props - Props for the Flex component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered flex container.
+ *
+ * @example
+ * <Flex gap="4" alignItems="flex-start">
+ *   <Box flexShrink="0">…</Box>
+ *   <Box flexGrow="1">…</Box>
+ * </Flex>
+ */
+const Flex = forwardRef(function Flex(props, ref) {
+    return jsx(StackLayout, { ref: ref, ...props });
+});
+Flex.displayName = 'Flex';
+
+export { Flex };
+//# sourceMappingURL=Flex.js.map

package/dist/esm/layout/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../../src/layout/Flex.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { ConstrainedPolymorphicComponent } from '../helpers/polymorphic';\nimport {\n  StackLayout,\n  type LayoutElement,\n  type LayoutOwnProps,\n  type StackLayoutProps,\n} from '../helpers/stackLayout';\nimport type {\n  BulmaGapStep,\n  validAlignContents,\n  validAlignItems,\n  validFlexDirections,\n  validFlexWraps,\n  validJustifyContents,\n} from '../helpers/useBulmaClasses';\n\n/**\n * The Flex component's own props, beside the attributes of the element `as`\n * renders.\n */\nexport interface FlexOwnProps extends LayoutOwnProps {\n  /**\n   * The main axis. `row-reverse` and `column-reverse` change only what's seen:\n   * reading and Tab order still follow the children's order (WCAG 1.3.2 and\n   * 2.4.3). Needs Bulma's helper classes: under `bestax-no-helpers.css` the\n   * default stays.\n   * @defaultValue 'row'\n   */\n  flexDirection?: (typeof validFlexDirections)[number];\n  /**\n   * Whether children move to a new line when they don't fit. Needs Bulma's\n   * helper classes: under `bestax-no-helpers.css` the default stays.\n   * @defaultValue 'nowrap'\n   */\n  flexWrap?: (typeof validFlexWraps)[number];\n  /**\n   * How each child sits across the main axis. Needs Bulma's helper classes:\n   * under `bestax-no-helpers.css` the default stays.\n   * @defaultValue 'stretch'\n   */\n  alignItems?: (typeof validAlignItems)[number];\n  /**\n   * Where the children sit along the main axis. Needs Bulma's helper classes:\n   * under `bestax-no-helpers.css` the default stays.\n   */\n  justifyContent?: (typeof validJustifyContents)[number];\n  /**\n   * How wrapped lines share the space across the main axis. Needs Bulma's\n   * helper classes: under `bestax-no-helpers.css` the default stays.\n   */\n  alignContent?: (typeof validAlignContents)[number];\n  /**\n   * Space between children, a step of Bulma's gap scale. None by default. Needs\n   * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.\n   */\n  gap?: BulmaGapStep;\n  /**\n   * Space between wrapped lines, when it differs from `gap`. Needs Bulma's\n   * helper classes: under `bestax-no-helpers.css` the default stays.\n   */\n  rowGap?: BulmaGapStep;\n  /**\n   * Space between children along a row, when it differs from `gap`. Needs\n   * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.\n   */\n  columnGap?: BulmaGapStep;\n}\n\n/**\n * Props for the Flex component. The attributes and the `ref` follow `as`, so\n * `as=\"form\"` takes `action` and `as=\"fieldset\"` takes `disabled`.\n *\n * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.\n */\nexport type FlexProps<T extends LayoutElement = LayoutElement> = FlexOwnProps &\n  Omit<React.ComponentPropsWithoutRef<T>, keyof FlexOwnProps | 'as'> & {\n    /**\n     * The element to render. With `ul` or `ol`, give it `li` children: it\n     * restates `role=\"list\"`, which Bulma's list reset takes away in Safari.\n     * @defaultValue 'div'\n     */\n    as?: T;\n  };\n\n/**\n * The `Flex` component is a flex container with CSS's own defaults, taking the flex container's properties as props.\n *\n * It's a row that doesn't wrap, with its children stretched across it and no\n * gap, until you set otherwise. Use it for a layout of your own, such as a\n * fixed side beside a growing one, with `flexGrow` and `flexShrink` on the\n * children. Its children's own block margins are zeroed, so the gap is the\n * only space. For a column of blocks or a row of controls with Bulma's\n * spacing already in place, `Stack` and `Group` start closer.\n *\n * @function\n * @param {FlexProps} props - Props for the Flex component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered flex container.\n *\n * @example\n * <Flex gap=\"4\" alignItems=\"flex-start\">\n *   <Box flexShrink=\"0\">…</Box>\n *   <Box flexGrow=\"1\">…</Box>\n * </Flex>\n */\nexport const Flex = forwardRef(function Flex(\n  props: FlexProps,\n  ref: React.Ref<HTMLElement>\n) {\n  return <StackLayout ref={ref} {...(props as StackLayoutProps)} />;\n}) as ConstrainedPolymorphicComponent<FlexOwnProps, LayoutElement, 'div'>;\n\nFlex.displayName = 'Flex';\n\nexport default Flex;\n"],"names":["_jsx"],"mappings":";;;;;;AAqFA;;;;;;;;;;;;;;;;;;;;AAoBG;AACI,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,IAAI,CAC1C,KAAgB,EAChB,GAA2B,EAAA;IAE3B,OAAOA,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAO,KAA0B,EAAA,CAAI;AACnE,CAAC;AAED,IAAI,CAAC,WAAW,GAAG,MAAM;;"}

package/dist/esm/layout/Group.js

@@ -0,0 +1,43 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { StackLayout } from '../helpers/stackLayout.js';
+import { CONTAINER_BREAKPOINTS } from '../helpers/containerBreakpoints.js';
+
+/**
+ * The `Group` component lays its children out in a row that wraps, centered on each other, with half of Bulma's block spacing between them.
+ *
+ * Use it for a row of buttons, tags or avatars beside some text, or a toolbar
+ * with `justifyContent="space-between"` pushing its ends apart. The children's
+ * own block margins are zeroed, so the gap is the only space. With
+ * `breakpoint`, it's a column on narrow screens and a row from that
+ * breakpoint up. For controls joined into one, with no gap and shared
+ * borders, use `hasAddons` on Field or Buttons instead.
+ *
+ * @function
+ * @param {GroupProps} props - Props for the Group component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered group.
+ *
+ * @example
+ * <Group justifyContent="space-between">
+ *   <Title as="h2" size="4">Invoices</Title>
+ *   <Button color="primary">New invoice</Button>
+ * </Group>
+ */
+const Group = forwardRef(function Group(props, ref) {
+    const { isFullwidth, breakpoint, ...rest } = props;
+    return (jsx(StackLayout, { ref: ref, ...rest, 
+        // A row always, or a column below `breakpoint`: never reversed, so
+        // reading and Tab order follow what's seen.
+        flexDirection: undefined, modifiers: {
+            'is-horizontal': true,
+            'is-fullwidth': isFullwidth,
+            [`is-${breakpoint}`]: !!breakpoint && CONTAINER_BREAKPOINTS.includes(breakpoint),
+        } }));
+});
+Group.displayName = 'Group';
+
+export { Group };
+//# sourceMappingURL=Group.js.map

package/dist/esm/layout/Group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sources":["../../../src/layout/Group.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { ConstrainedPolymorphicComponent } from '../helpers/polymorphic';\nimport {\n  StackLayout,\n  type LayoutElement,\n  type LayoutOwnProps,\n  type StackLayoutProps,\n} from '../helpers/stackLayout';\nimport type {\n  BulmaGapStep,\n  validAlignItems,\n  validFlexWraps,\n  validJustifyContents,\n} from '../helpers/useBulmaClasses';\nimport type { ContainerBreakpoint } from './Container';\nimport { CONTAINER_BREAKPOINTS } from '../helpers/containerBreakpoints';\n\n/**\n * The Group component's own props, beside the attributes of the element `as`\n * renders.\n */\nexport interface GroupOwnProps extends LayoutOwnProps {\n  /**\n   * Space between children, a step of Bulma's gap scale. Unset, it's\n   * `--bulma-stack-horizontal-gap`, half of Bulma's block spacing. Needs\n   * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.\n   */\n  gap?: BulmaGapStep;\n  /**\n   * How each child sits across the row. While `breakpoint` stacks them, it's\n   * where each sits across the column. Needs Bulma's helper classes: under\n   * `bestax-no-helpers.css` the default stays.\n   * @defaultValue 'center'\n   */\n  alignItems?: (typeof validAlignItems)[number];\n  /**\n   * Where the children sit along the row: `'space-between'` pushes the ends\n   * apart. Needs Bulma's helper classes: under `bestax-no-helpers.css` the\n   * default stays.\n   */\n  justifyContent?: (typeof validJustifyContents)[number];\n  /**\n   * Whether children move to a new row when they don't fit. Needs Bulma's\n   * helper classes: under `bestax-no-helpers.css` the default stays.\n   * @defaultValue 'wrap'\n   */\n  flexWrap?: (typeof validFlexWraps)[number];\n  /**\n   * The children share the row equally, and fill the column while\n   * `breakpoint` stacks them (Bulma's `is-fullwidth`).\n   */\n  isFullwidth?: boolean;\n  /**\n   * Stacks the children below this Bulma breakpoint and sets them in a row\n   * from it up, the breakpoints Container's `breakpoint` takes. Unset, a row\n   * at every width. It's the job Columns and Level do with booleans:\n   * `'tablet'` is where they turn into a row by default, `'desktop'` is\n   * Columns' `isDesktop`, and leaving it unset is their `isMobile`.\n   */\n  breakpoint?: ContainerBreakpoint;\n}\n\n/**\n * Props for the Group component. The attributes and the `ref` follow `as`, so\n * `as=\"form\"` takes `action` and `as=\"fieldset\"` takes `disabled`.\n *\n * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.\n */\nexport type GroupProps<T extends LayoutElement = LayoutElement> =\n  GroupOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof GroupOwnProps | 'as'> & {\n      /**\n       * The element to render. With `ul` or `ol`, give it `li` children: it\n       * restates `role=\"list\"`, which Bulma's list reset takes away in Safari.\n       * @defaultValue 'div'\n       */\n      as?: T;\n    };\n\n/**\n * The `Group` component lays its children out in a row that wraps, centered on each other, with half of Bulma's block spacing between them.\n *\n * Use it for a row of buttons, tags or avatars beside some text, or a toolbar\n * with `justifyContent=\"space-between\"` pushing its ends apart. The children's\n * own block margins are zeroed, so the gap is the only space. With\n * `breakpoint`, it's a column on narrow screens and a row from that\n * breakpoint up. For controls joined into one, with no gap and shared\n * borders, use `hasAddons` on Field or Buttons instead.\n *\n * @function\n * @param {GroupProps} props - Props for the Group component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered group.\n *\n * @example\n * <Group justifyContent=\"space-between\">\n *   <Title as=\"h2\" size=\"4\">Invoices</Title>\n *   <Button color=\"primary\">New invoice</Button>\n * </Group>\n */\nexport const Group = forwardRef(function Group(\n  props: GroupProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const { isFullwidth, breakpoint, ...rest } = props as GroupOwnProps &\n    StackLayoutProps;\n  return (\n    <StackLayout\n      ref={ref}\n      {...rest}\n      // A row always, or a column below `breakpoint`: never reversed, so\n      // reading and Tab order follow what's seen.\n      flexDirection={undefined}\n      modifiers={{\n        'is-horizontal': true,\n        'is-fullwidth': isFullwidth,\n        [`is-${breakpoint}`]:\n          !!breakpoint && CONTAINER_BREAKPOINTS.includes(breakpoint),\n      }}\n    />\n  );\n}) as ConstrainedPolymorphicComponent<GroupOwnProps, LayoutElement, 'div'>;\n\nGroup.displayName = 'Group';\n\nexport default Group;\n"],"names":["_jsx"],"mappings":";;;;;;;AA+EA;;;;;;;;;;;;;;;;;;;;AAoBG;AACI,MAAM,KAAK,GAAG,UAAU,CAAC,SAAS,KAAK,CAC5C,KAAiB,EACjB,GAA2B,EAAA;IAE3B,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,GAAG,KAC3B;IAClB,QACEA,IAAC,WAAW,EAAA,EACV,GAAG,EAAE,GAAG,KACJ,IAAI;;;AAGR,QAAA,aAAa,EAAE,SAAS,EACxB,SAAS,EAAE;AACT,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,cAAc,EAAE,WAAW;AAC3B,YAAA,CAAC,CAAA,GAAA,EAAM,UAAU,CAAA,CAAE,GACjB,CAAC,CAAC,UAAU,IAAI,qBAAqB,CAAC,QAAQ,CAAC,UAAU,CAAC;AAC7D,SAAA,EAAA,CACD;AAEN,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO;;"}

package/dist/esm/layout/Stack.js

@@ -0,0 +1,34 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { StackLayout } from '../helpers/stackLayout.js';
+
+/**
+ * The `Stack` component lays its children out in a column, with Bulma's block spacing between them and the margins Bulma gives them zeroed.
+ *
+ * A Stack of Boxes, Cards or Notifications looks like Bulma's own stacked
+ * blocks, spaced by the gap alone, so there are no margins to undo. A `gap`
+ * step replaces the default spacing. It's always a column, top to bottom.
+ *
+ * @function
+ * @param {StackProps} props - Props for the Stack component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered stack.
+ *
+ * @example
+ * <Stack>
+ *   <Notification color="info">Your changes are saved.</Notification>
+ *   <Box>…</Box>
+ * </Stack>
+ */
+const Stack = forwardRef(function Stack(props, ref) {
+    return (jsx(StackLayout, { ref: ref, ...props, 
+        // A column always: reading and Tab order follow the children's order,
+        // and a reversed column would show them in another.
+        flexDirection: undefined, modifiers: { 'is-vertical': true } }));
+});
+Stack.displayName = 'Stack';
+
+export { Stack };
+//# sourceMappingURL=Stack.js.map

package/dist/esm/layout/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sources":["../../../src/layout/Stack.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { ConstrainedPolymorphicComponent } from '../helpers/polymorphic';\nimport {\n  StackLayout,\n  type LayoutElement,\n  type LayoutOwnProps,\n  type StackLayoutProps,\n} from '../helpers/stackLayout';\nimport type {\n  BulmaGapStep,\n  validAlignItems,\n  validJustifyContents,\n} from '../helpers/useBulmaClasses';\n\n/**\n * The Stack component's own props, beside the attributes of the element `as`\n * renders.\n */\nexport interface StackOwnProps extends LayoutOwnProps {\n  /**\n   * Space between children, a step of Bulma's gap scale (`'2'` is 1rem). Unset,\n   * it's `--bulma-stack-gap`, Bulma's block spacing. Needs Bulma's helper\n   * classes: under `bestax-no-helpers.css` the default stays.\n   */\n  gap?: BulmaGapStep;\n  /**\n   * How each child sits across the column. `'stretch'` makes each as wide as\n   * the Stack. Needs Bulma's helper classes: under `bestax-no-helpers.css` the\n   * default stays.\n   * @defaultValue 'stretch'\n   */\n  alignItems?: (typeof validAlignItems)[number];\n  /**\n   * Where the children sit down the column, when it's taller than they are.\n   * Needs Bulma's helper classes: under `bestax-no-helpers.css` the default\n   * stays.\n   */\n  justifyContent?: (typeof validJustifyContents)[number];\n}\n\n/**\n * Props for the Stack component. The attributes and the `ref` follow `as`, so\n * `as=\"form\"` takes `action` and `as=\"fieldset\"` takes `disabled`.\n *\n * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.\n */\nexport type StackProps<T extends LayoutElement = LayoutElement> =\n  StackOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof StackOwnProps | 'as'> & {\n      /**\n       * The element to render. With `ul` or `ol`, give it `li` children: it\n       * restates `role=\"list\"`, which Bulma's list reset takes away in Safari.\n       * @defaultValue 'div'\n       */\n      as?: T;\n    };\n\n/**\n * The `Stack` component lays its children out in a column, with Bulma's block spacing between them and the margins Bulma gives them zeroed.\n *\n * A Stack of Boxes, Cards or Notifications looks like Bulma's own stacked\n * blocks, spaced by the gap alone, so there are no margins to undo. A `gap`\n * step replaces the default spacing. It's always a column, top to bottom.\n *\n * @function\n * @param {StackProps} props - Props for the Stack component.\n * @param {React.Ref} ref - Forwarded ref to the element `as` renders.\n * @returns {JSX.Element} The rendered stack.\n *\n * @example\n * <Stack>\n *   <Notification color=\"info\">Your changes are saved.</Notification>\n *   <Box>…</Box>\n * </Stack>\n */\nexport const Stack = forwardRef(function Stack(\n  props: StackProps,\n  ref: React.Ref<HTMLElement>\n) {\n  return (\n    <StackLayout\n      ref={ref}\n      {...(props as StackLayoutProps)}\n      // A column always: reading and Tab order follow the children's order,\n      // and a reversed column would show them in another.\n      flexDirection={undefined}\n      modifiers={{ 'is-vertical': true }}\n    />\n  );\n}) as ConstrainedPolymorphicComponent<StackOwnProps, LayoutElement, 'div'>;\n\nStack.displayName = 'Stack';\n\nexport default Stack;\n"],"names":["_jsx"],"mappings":";;;;;;AAyDA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,KAAK,GAAG,UAAU,CAAC,SAAS,KAAK,CAC5C,KAAiB,EACjB,GAA2B,EAAA;IAE3B,QACEA,IAAC,WAAW,EAAA,EACV,GAAG,EAAE,GAAG,KACH,KAA0B;;;AAG/B,QAAA,aAAa,EAAE,SAAS,EACxB,SAAS,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,EAAA,CAClC;AAEN,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO;;"}