@allxsmith/bestax-bulma 5.58.0 → 5.60.0

package/dist/types-cjs/layout/Flex.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import type { ConstrainedPolymorphicComponent } from '../helpers/polymorphic.js';
+import { type LayoutElement, type LayoutOwnProps } from '../helpers/stackLayout.js';
+import type { BulmaGapStep, validAlignContents, validAlignItems, validFlexDirections, validFlexWraps, validJustifyContents } from '../helpers/useBulmaClasses.js';
+/**
+ * The Flex component's own props, beside the attributes of the element `as`
+ * renders.
+ */
+export interface FlexOwnProps extends LayoutOwnProps {
+    /**
+     * The main axis. `row-reverse` and `column-reverse` change only what's seen:
+     * reading and Tab order still follow the children's order (WCAG 1.3.2 and
+     * 2.4.3). Needs Bulma's helper classes: under `bestax-no-helpers.css` the
+     * default stays.
+     * @defaultValue 'row'
+     */
+    flexDirection?: (typeof validFlexDirections)[number];
+    /**
+     * Whether children move to a new line when they don't fit. Needs Bulma's
+     * helper classes: under `bestax-no-helpers.css` the default stays.
+     * @defaultValue 'nowrap'
+     */
+    flexWrap?: (typeof validFlexWraps)[number];
+    /**
+     * How each child sits across the main axis. Needs Bulma's helper classes:
+     * under `bestax-no-helpers.css` the default stays.
+     * @defaultValue 'stretch'
+     */
+    alignItems?: (typeof validAlignItems)[number];
+    /**
+     * Where the children sit along the main axis. Needs Bulma's helper classes:
+     * under `bestax-no-helpers.css` the default stays.
+     */
+    justifyContent?: (typeof validJustifyContents)[number];
+    /**
+     * How wrapped lines share the space across the main axis. Needs Bulma's
+     * helper classes: under `bestax-no-helpers.css` the default stays.
+     */
+    alignContent?: (typeof validAlignContents)[number];
+    /**
+     * Space between children, a step of Bulma's gap scale. None by default. Needs
+     * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.
+     */
+    gap?: BulmaGapStep;
+    /**
+     * Space between wrapped lines, when it differs from `gap`. Needs Bulma's
+     * helper classes: under `bestax-no-helpers.css` the default stays.
+     */
+    rowGap?: BulmaGapStep;
+    /**
+     * Space between children along a row, when it differs from `gap`. Needs
+     * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.
+     */
+    columnGap?: BulmaGapStep;
+}
+/**
+ * Props for the Flex component. The attributes and the `ref` follow `as`, so
+ * `as="form"` takes `action` and `as="fieldset"` takes `disabled`.
+ *
+ * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.
+ */
+export type FlexProps<T extends LayoutElement = LayoutElement> = FlexOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof FlexOwnProps | 'as'> & {
+    /**
+     * The element to render. With `ul` or `ol`, give it `li` children: it
+     * restates `role="list"`, which Bulma's list reset takes away in Safari.
+     * @defaultValue 'div'
+     */
+    as?: T;
+};
+/**
+ * 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>
+ */
+export declare const Flex: ConstrainedPolymorphicComponent<FlexOwnProps, LayoutElement, "div">;
+export default Flex;

package/dist/types-cjs/layout/Group.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import type { ConstrainedPolymorphicComponent } from '../helpers/polymorphic.js';
+import { type LayoutElement, type LayoutOwnProps } from '../helpers/stackLayout.js';
+import type { BulmaGapStep, validAlignItems, validFlexWraps, validJustifyContents } from '../helpers/useBulmaClasses.js';
+import type { ContainerBreakpoint } from './Container.js';
+/**
+ * The Group component's own props, beside the attributes of the element `as`
+ * renders.
+ */
+export interface GroupOwnProps extends LayoutOwnProps {
+    /**
+     * Space between children, a step of Bulma's gap scale. Unset, it's
+     * `--bulma-stack-horizontal-gap`, half of Bulma's block spacing. Needs
+     * Bulma's helper classes: under `bestax-no-helpers.css` the default stays.
+     */
+    gap?: BulmaGapStep;
+    /**
+     * How each child sits across the row. While `breakpoint` stacks them, it's
+     * where each sits across the column. Needs Bulma's helper classes: under
+     * `bestax-no-helpers.css` the default stays.
+     * @defaultValue 'center'
+     */
+    alignItems?: (typeof validAlignItems)[number];
+    /**
+     * Where the children sit along the row: `'space-between'` pushes the ends
+     * apart. Needs Bulma's helper classes: under `bestax-no-helpers.css` the
+     * default stays.
+     */
+    justifyContent?: (typeof validJustifyContents)[number];
+    /**
+     * Whether children move to a new row when they don't fit. Needs Bulma's
+     * helper classes: under `bestax-no-helpers.css` the default stays.
+     * @defaultValue 'wrap'
+     */
+    flexWrap?: (typeof validFlexWraps)[number];
+    /**
+     * The children share the row equally, and fill the column while
+     * `breakpoint` stacks them (Bulma's `is-fullwidth`).
+     */
+    isFullwidth?: boolean;
+    /**
+     * Stacks the children below this Bulma breakpoint and sets them in a row
+     * from it up, the breakpoints Container's `breakpoint` takes. Unset, a row
+     * at every width. It's the job Columns and Level do with booleans:
+     * `'tablet'` is where they turn into a row by default, `'desktop'` is
+     * Columns' `isDesktop`, and leaving it unset is their `isMobile`.
+     */
+    breakpoint?: ContainerBreakpoint;
+}
+/**
+ * Props for the Group component. The attributes and the `ref` follow `as`, so
+ * `as="form"` takes `action` and `as="fieldset"` takes `disabled`.
+ *
+ * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.
+ */
+export type GroupProps<T extends LayoutElement = LayoutElement> = GroupOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof GroupOwnProps | 'as'> & {
+    /**
+     * The element to render. With `ul` or `ol`, give it `li` children: it
+     * restates `role="list"`, which Bulma's list reset takes away in Safari.
+     * @defaultValue 'div'
+     */
+    as?: T;
+};
+/**
+ * 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>
+ */
+export declare const Group: ConstrainedPolymorphicComponent<GroupOwnProps, LayoutElement, "div">;
+export default Group;

package/dist/types-cjs/layout/Stack.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { ConstrainedPolymorphicComponent } from '../helpers/polymorphic.js';
+import { type LayoutElement, type LayoutOwnProps } from '../helpers/stackLayout.js';
+import type { BulmaGapStep, validAlignItems, validJustifyContents } from '../helpers/useBulmaClasses.js';
+/**
+ * The Stack component's own props, beside the attributes of the element `as`
+ * renders.
+ */
+export interface StackOwnProps extends LayoutOwnProps {
+    /**
+     * Space between children, a step of Bulma's gap scale (`'2'` is 1rem). Unset,
+     * it's `--bulma-stack-gap`, Bulma's block spacing. Needs Bulma's helper
+     * classes: under `bestax-no-helpers.css` the default stays.
+     */
+    gap?: BulmaGapStep;
+    /**
+     * How each child sits across the column. `'stretch'` makes each as wide as
+     * the Stack. Needs Bulma's helper classes: under `bestax-no-helpers.css` the
+     * default stays.
+     * @defaultValue 'stretch'
+     */
+    alignItems?: (typeof validAlignItems)[number];
+    /**
+     * Where the children sit down the column, when it's taller than they are.
+     * Needs Bulma's helper classes: under `bestax-no-helpers.css` the default
+     * stays.
+     */
+    justifyContent?: (typeof validJustifyContents)[number];
+}
+/**
+ * Props for the Stack component. The attributes and the `ref` follow `as`, so
+ * `as="form"` takes `action` and `as="fieldset"` takes `disabled`.
+ *
+ * @extraProp {PolymorphicRef<LayoutElement>} [ref] - Ref forwarded to the element `as` renders.
+ */
+export type StackProps<T extends LayoutElement = LayoutElement> = StackOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof StackOwnProps | 'as'> & {
+    /**
+     * The element to render. With `ul` or `ol`, give it `li` children: it
+     * restates `role="list"`, which Bulma's list reset takes away in Safari.
+     * @defaultValue 'div'
+     */
+    as?: T;
+};
+/**
+ * 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>
+ */
+export declare const Stack: ConstrainedPolymorphicComponent<StackOwnProps, LayoutElement, "div">;
+export default Stack;