@allxsmith/bestax-bulma 5.50.0 → 5.51.0

package/dist/index.esm.js

@@ -41,6 +41,7 @@ export { ToggleButton } from './esm/elements/ToggleButton.js';
 export { Code } from './esm/elements/Code.js';
 export { Content } from './esm/elements/Content.js';
 export { Delete } from './esm/elements/Delete.js';
+export { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue } from './esm/elements/DescriptionList.js';
 export { Divider } from './esm/elements/Divider.js';
 export { Emphasis } from './esm/elements/Emphasis.js';
 export { Figure } from './esm/elements/Figure.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+declare const validDescriptionListOrientations: readonly ["vertical", "horizontal"];
+/** Whether each label sits above its value (`vertical`) or beside it (`horizontal`). */
+export type DescriptionListOrientation = (typeof validDescriptionListOrientations)[number];
+/**
+ * Props for the DescriptionList component. The helper props, the other
+ * attributes and the `ref` land on the `<dl>`.
+ *
+ * @extraProp {React.Ref<HTMLDListElement>} [ref] - Ref forwarded to the `<dl>`.
+ * @extraProp {string} [aria-labelledby] - The id of the heading above the list, which names it.
+ */
+export interface DescriptionListProps extends Omit<React.HTMLAttributes<HTMLDListElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** `DescriptionList.Item`s, one for each fact. */
+    children?: React.ReactNode;
+    /**
+     * Whether each label sits above its value or beside it, at every width no
+     * `orientation<Viewport>` prop covers. Those props read the way a
+     * `Column`'s `size<Viewport>` props do: `orientationMobile` applies below
+     * Bulma's tablet breakpoint, each of the others from its own breakpoint
+     * up, and where several apply the widest one wins. With none of them,
+     * labels sit above their values below the tablet breakpoint and beside
+     * them from it up. Beside, the labels share one column as wide as the
+     * longest label, up to `--bulma-description-list-label-max-width`, so the
+     * values line up.
+     */
+    orientation?: DescriptionListOrientation;
+    /**
+     * The orientation below Bulma's tablet breakpoint (769px). Falls back to
+     * `orientation`, then to `vertical`.
+     */
+    orientationMobile?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's tablet breakpoint (769px) up, until a wider
+     * viewport's prop takes over. Falls back to `orientation`, then to
+     * `horizontal`.
+     */
+    orientationTablet?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's desktop breakpoint (1024px) up, until a
+     * wider viewport's prop takes over. Falls back to `orientationTablet`, and
+     * on down.
+     */
+    orientationDesktop?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's widescreen breakpoint (1216px) up, until
+     * `orientationFullhd` takes over. Falls back to `orientationDesktop`, and
+     * on down.
+     */
+    orientationWidescreen?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's fullhd breakpoint (1408px) up. Falls back to
+     * `orientationWidescreen`, and on down.
+     */
+    orientationFullhd?: DescriptionListOrientation;
+    /**
+     * Draws a line between items, which helps the eye from a label to its
+     * value across a wide list, and shows where each item ends to someone
+     * zoomed in.
+     */
+    hasDividers?: boolean;
+    /** Text color helper. It colors the values; the labels keep their own color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Item, one fact. The helper props, the other
+ * attributes and the `ref` land on its `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the `<div>`.
+ */
+export interface DescriptionListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The label, such as "Order", as a `DescriptionList.Label` before the
+     * children.
+     */
+    label?: React.ReactNode;
+    /**
+     * The value, such as "#1234", as a `DescriptionList.Value` after the
+     * children. Text, a link, a `Tag`: anything that renders. `undefined`,
+     * `null` and `''` render nothing, so when a value is missing, say so in
+     * words, such as "Not given", rather than leave a label with nothing after
+     * it.
+     */
+    value?: React.ReactNode;
+    /**
+     * `DescriptionList.Label`s and `DescriptionList.Value`s, for what `label`
+     * and `value` don't cover, such as a label with an info tip or several
+     * values. They render between the two, so a `Label` here reads before
+     * `value`, and a `Value` here after `label`.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Label. The helper props, the other attributes and
+ * the `ref` land on its `<dt>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<dt>`.
+ */
+export interface DescriptionListLabelProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The label. A button may sit in it, such as one that opens a `Popover`
+     * about the label, but not a heading, which HTML doesn't allow here.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Value. The helper props, the other attributes and
+ * the `ref` land on its `<dd>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<dd>`.
+ */
+export interface DescriptionListValueProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** The value. Anything goes, a list or a paragraph included. */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * A label, the name of a fact: a `<dt>`, in the weaker text color.
+ *
+ * @function
+ * @param {DescriptionListLabelProps} props - Props for DescriptionList.Label.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dt>`.
+ * @returns {JSX.Element} The rendered label.
+ *
+ * @example
+ * <DescriptionList.Label>Placed on</DescriptionList.Label>
+ */
+export declare const DescriptionListLabel: React.ForwardRefExoticComponent<DescriptionListLabelProps & React.RefAttributes<HTMLElement>>;
+/**
+ * A value, what the label says about the thing: a `<dd>`. An item may have several.
+ *
+ * @function
+ * @param {DescriptionListValueProps} props - Props for DescriptionList.Value.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dd>`.
+ * @returns {JSX.Element} The rendered value.
+ *
+ * @example
+ * <DescriptionList.Value>14 October 2026</DescriptionList.Value>
+ */
+export declare const DescriptionListValue: React.ForwardRefExoticComponent<DescriptionListValueProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One fact: its label and its value, in a `<div>`, from the `label` and `value` props or from `Label` and `Value` children.
+ *
+ * @function
+ * @param {DescriptionListItemProps} props - Props for DescriptionList.Item.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns {JSX.Element} The rendered item.
+ *
+ * @example
+ * <DescriptionList.Item label="Order" value="#1234" />
+ *
+ * @example
+ * <DescriptionList.Item label="Tags">
+ *   <DescriptionList.Value>Gift</DescriptionList.Value>
+ *   <DescriptionList.Value>Priority</DescriptionList.Value>
+ * </DescriptionList.Item>
+ */
+export declare const DescriptionListItem: React.ForwardRefExoticComponent<DescriptionListItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DescriptionList: React.ForwardRefExoticComponent<DescriptionListProps & React.RefAttributes<HTMLDListElement>> & {
+    Item: React.ForwardRefExoticComponent<DescriptionListItemProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<DescriptionListLabelProps & React.RefAttributes<HTMLElement>>;
+    Value: React.ForwardRefExoticComponent<DescriptionListValueProps & React.RefAttributes<HTMLElement>>;
+};
+export default DescriptionList;

package/dist/types/index.d.ts

@@ -40,6 +40,7 @@ export * from './elements/ToggleButton.js';
 export * from './elements/Code.js';
 export * from './elements/Content.js';
 export * from './elements/Delete.js';
+export * from './elements/DescriptionList.js';
 export * from './elements/Divider.js';
 export * from './elements/Emphasis.js';
 export * from './elements/Figure.js';

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+declare const validDescriptionListOrientations: readonly ["vertical", "horizontal"];
+/** Whether each label sits above its value (`vertical`) or beside it (`horizontal`). */
+export type DescriptionListOrientation = (typeof validDescriptionListOrientations)[number];
+/**
+ * Props for the DescriptionList component. The helper props, the other
+ * attributes and the `ref` land on the `<dl>`.
+ *
+ * @extraProp {React.Ref<HTMLDListElement>} [ref] - Ref forwarded to the `<dl>`.
+ * @extraProp {string} [aria-labelledby] - The id of the heading above the list, which names it.
+ */
+export interface DescriptionListProps extends Omit<React.HTMLAttributes<HTMLDListElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** `DescriptionList.Item`s, one for each fact. */
+    children?: React.ReactNode;
+    /**
+     * Whether each label sits above its value or beside it, at every width no
+     * `orientation<Viewport>` prop covers. Those props read the way a
+     * `Column`'s `size<Viewport>` props do: `orientationMobile` applies below
+     * Bulma's tablet breakpoint, each of the others from its own breakpoint
+     * up, and where several apply the widest one wins. With none of them,
+     * labels sit above their values below the tablet breakpoint and beside
+     * them from it up. Beside, the labels share one column as wide as the
+     * longest label, up to `--bulma-description-list-label-max-width`, so the
+     * values line up.
+     */
+    orientation?: DescriptionListOrientation;
+    /**
+     * The orientation below Bulma's tablet breakpoint (769px). Falls back to
+     * `orientation`, then to `vertical`.
+     */
+    orientationMobile?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's tablet breakpoint (769px) up, until a wider
+     * viewport's prop takes over. Falls back to `orientation`, then to
+     * `horizontal`.
+     */
+    orientationTablet?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's desktop breakpoint (1024px) up, until a
+     * wider viewport's prop takes over. Falls back to `orientationTablet`, and
+     * on down.
+     */
+    orientationDesktop?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's widescreen breakpoint (1216px) up, until
+     * `orientationFullhd` takes over. Falls back to `orientationDesktop`, and
+     * on down.
+     */
+    orientationWidescreen?: DescriptionListOrientation;
+    /**
+     * The orientation from Bulma's fullhd breakpoint (1408px) up. Falls back to
+     * `orientationWidescreen`, and on down.
+     */
+    orientationFullhd?: DescriptionListOrientation;
+    /**
+     * Draws a line between items, which helps the eye from a label to its
+     * value across a wide list, and shows where each item ends to someone
+     * zoomed in.
+     */
+    hasDividers?: boolean;
+    /** Text color helper. It colors the values; the labels keep their own color. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Item, one fact. The helper props, the other
+ * attributes and the `ref` land on its `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the `<div>`.
+ */
+export interface DescriptionListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The label, such as "Order", as a `DescriptionList.Label` before the
+     * children.
+     */
+    label?: React.ReactNode;
+    /**
+     * The value, such as "#1234", as a `DescriptionList.Value` after the
+     * children. Text, a link, a `Tag`: anything that renders. `undefined`,
+     * `null` and `''` render nothing, so when a value is missing, say so in
+     * words, such as "Not given", rather than leave a label with nothing after
+     * it.
+     */
+    value?: React.ReactNode;
+    /**
+     * `DescriptionList.Label`s and `DescriptionList.Value`s, for what `label`
+     * and `value` don't cover, such as a label with an info tip or several
+     * values. They render between the two, so a `Label` here reads before
+     * `value`, and a `Value` here after `label`.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Label. The helper props, the other attributes and
+ * the `ref` land on its `<dt>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<dt>`.
+ */
+export interface DescriptionListLabelProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * The label. A button may sit in it, such as one that opens a `Popover`
+     * about the label, but not a heading, which HTML doesn't allow here.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * Props for DescriptionList.Value. The helper props, the other attributes and
+ * the `ref` land on its `<dd>`.
+ *
+ * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the `<dd>`.
+ */
+export interface DescriptionListValueProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** The value. Anything goes, a list or a paragraph included. */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * A label, the name of a fact: a `<dt>`, in the weaker text color.
+ *
+ * @function
+ * @param {DescriptionListLabelProps} props - Props for DescriptionList.Label.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dt>`.
+ * @returns {JSX.Element} The rendered label.
+ *
+ * @example
+ * <DescriptionList.Label>Placed on</DescriptionList.Label>
+ */
+export declare const DescriptionListLabel: React.ForwardRefExoticComponent<DescriptionListLabelProps & React.RefAttributes<HTMLElement>>;
+/**
+ * A value, what the label says about the thing: a `<dd>`. An item may have several.
+ *
+ * @function
+ * @param {DescriptionListValueProps} props - Props for DescriptionList.Value.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<dd>`.
+ * @returns {JSX.Element} The rendered value.
+ *
+ * @example
+ * <DescriptionList.Value>14 October 2026</DescriptionList.Value>
+ */
+export declare const DescriptionListValue: React.ForwardRefExoticComponent<DescriptionListValueProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One fact: its label and its value, in a `<div>`, from the `label` and `value` props or from `Label` and `Value` children.
+ *
+ * @function
+ * @param {DescriptionListItemProps} props - Props for DescriptionList.Item.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns {JSX.Element} The rendered item.
+ *
+ * @example
+ * <DescriptionList.Item label="Order" value="#1234" />
+ *
+ * @example
+ * <DescriptionList.Item label="Tags">
+ *   <DescriptionList.Value>Gift</DescriptionList.Value>
+ *   <DescriptionList.Value>Priority</DescriptionList.Value>
+ * </DescriptionList.Item>
+ */
+export declare const DescriptionListItem: React.ForwardRefExoticComponent<DescriptionListItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DescriptionList: React.ForwardRefExoticComponent<DescriptionListProps & React.RefAttributes<HTMLDListElement>> & {
+    Item: React.ForwardRefExoticComponent<DescriptionListItemProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<DescriptionListLabelProps & React.RefAttributes<HTMLElement>>;
+    Value: React.ForwardRefExoticComponent<DescriptionListValueProps & React.RefAttributes<HTMLElement>>;
+};
+export default DescriptionList;

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

@@ -40,6 +40,7 @@ export * from './elements/ToggleButton.js';
 export * from './elements/Code.js';
 export * from './elements/Content.js';
 export * from './elements/Delete.js';
+export * from './elements/DescriptionList.js';
 export * from './elements/Divider.js';
 export * from './elements/Emphasis.js';
 export * from './elements/Figure.js';