@allxsmith/bestax-bulma 5.49.1 → 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';
@@ -56,6 +57,7 @@ export { OrderedList } from './esm/elements/OrderedList.js';
 export { Paragraph } from './esm/elements/Paragraph.js';
 export { Pre } from './esm/elements/Pre.js';
 export { Progress } from './esm/elements/Progress.js';
+export { RingProgress } from './esm/elements/RingProgress.js';
 export { Skeleton } from './esm/elements/Skeleton.js';
 export { Span } from './esm/elements/Span.js';
 export { Strong } from './esm/elements/Strong.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/elements/RingProgress.d.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+declare const validRingProgressColors: readonly ["primary", "link", "info", "success", "warning", "danger", "black", "dark", "light", "white"];
+/** The Bulma colors an arc takes, the ones `Progress` takes. */
+export type RingProgressColor = (typeof validRingProgressColors)[number];
+declare const validRingProgressSizes: readonly ["small", "medium", "large"];
+/** One colored part of a ring drawn in sections. */
+export interface RingProgressSection {
+    /** Its size, in the same units as the ring's `max`. */
+    value: number;
+    /** Its color. Without one, it takes the ring's. */
+    color?: RingProgressColor;
+    /** What it is, such as "Photos", read in the ring's name with its share. */
+    label: string;
+}
+/**
+ * Props for the RingProgress component. The helper props, the other
+ * attributes and the `ref` land on its root `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `<div>`.
+ * @extraProp {string} [aria-labelledby] - The id of a visible heading that names the ring, in place of `label`. With `sections`, use `label`, since a name from here replaces the one that lists the values.
+ * @extraProp {string} [aria-valuetext] - What a screen reader says for the value, such as "7 of 10 tasks". Without it, the value is read as a percentage.
+ */
+export interface RingProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'role'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * How far along it is, from 0 to `max`. Values outside that range are
+     * drawn, and read, at the nearest end. Ignored with `sections`.
+     */
+    value?: number;
+    /** The value that fills the ring. */
+    max?: number;
+    /**
+     * Several values around one ring, in order clockwise from the top, each
+     * with its own color and label. The ring is then an image whose name
+     * writes them out, such as "Storage: Documents 40%, Photos 15%", since a
+     * screen reader can't take several values from one element. A total over
+     * `max` fills the ring and stops.
+     */
+    sections?: RingProgressSection[];
+    /**
+     * What it shows, such as "Upload" or "Storage". It names the ring, so it's
+     * read with the value. A development build warns when the ring has no
+     * name.
+     */
+    label?: string;
+    /**
+     * A level within a range, such as storage used or a score, rather than a
+     * task moving toward done: `role="meter"` in place of `role="progressbar"`.
+     * Ignored with `sections`.
+     */
+    isMeter?: boolean;
+    /** The arc's color, and the color of sections without one. */
+    color?: RingProgressColor;
+    /** The ring's size. */
+    size?: (typeof validRingProgressSizes)[number];
+    /** Rounds the ends of the arc. */
+    isRounded?: boolean;
+    /**
+     * What sits in the middle of the ring, such as the value as text. It's
+     * hidden from assistive tech, which reads the value from the ring itself,
+     * so the value isn't heard twice. Say anything more, such as "7 of 10
+     * tasks", in `aria-valuetext`.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle.
+ *
+ * It's a `progressbar` for a task moving toward done, or a `meter` with
+ * `isMeter` for a level within a range, named by `label`. With `sections`
+ * it draws several values around one ring and is an image whose name lists
+ * them. It has no state for work with no value: that's `Loader`.
+ *
+ * @function
+ * @param {RingProgressProps} props - Props for the RingProgress component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root `<div>`.
+ * @returns {JSX.Element} The rendered ring.
+ *
+ * @example
+ * <RingProgress value={72} label="Upload" color="success">
+ *   72%
+ * </RingProgress>
+ */
+export declare const RingProgress: React.ForwardRefExoticComponent<RingProgressProps & React.RefAttributes<HTMLDivElement>>;
+export default RingProgress;

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';
@@ -55,6 +56,7 @@ export * from './elements/OrderedList.js';
 export * from './elements/Paragraph.js';
 export * from './elements/Pre.js';
 export * from './elements/Progress.js';
+export * from './elements/RingProgress.js';
 export * from './elements/Skeleton.js';
 export * from './elements/Span.js';
 export * from './elements/Strong.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/elements/RingProgress.d.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
+declare const validRingProgressColors: readonly ["primary", "link", "info", "success", "warning", "danger", "black", "dark", "light", "white"];
+/** The Bulma colors an arc takes, the ones `Progress` takes. */
+export type RingProgressColor = (typeof validRingProgressColors)[number];
+declare const validRingProgressSizes: readonly ["small", "medium", "large"];
+/** One colored part of a ring drawn in sections. */
+export interface RingProgressSection {
+    /** Its size, in the same units as the ring's `max`. */
+    value: number;
+    /** Its color. Without one, it takes the ring's. */
+    color?: RingProgressColor;
+    /** What it is, such as "Photos", read in the ring's name with its share. */
+    label: string;
+}
+/**
+ * Props for the RingProgress component. The helper props, the other
+ * attributes and the `ref` land on its root `<div>`.
+ *
+ * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `<div>`.
+ * @extraProp {string} [aria-labelledby] - The id of a visible heading that names the ring, in place of `label`. With `sections`, use `label`, since a name from here replaces the one that lists the values.
+ * @extraProp {string} [aria-valuetext] - What a screen reader says for the value, such as "7 of 10 tasks". Without it, the value is read as a percentage.
+ */
+export interface RingProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'role'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /**
+     * How far along it is, from 0 to `max`. Values outside that range are
+     * drawn, and read, at the nearest end. Ignored with `sections`.
+     */
+    value?: number;
+    /** The value that fills the ring. */
+    max?: number;
+    /**
+     * Several values around one ring, in order clockwise from the top, each
+     * with its own color and label. The ring is then an image whose name
+     * writes them out, such as "Storage: Documents 40%, Photos 15%", since a
+     * screen reader can't take several values from one element. A total over
+     * `max` fills the ring and stops.
+     */
+    sections?: RingProgressSection[];
+    /**
+     * What it shows, such as "Upload" or "Storage". It names the ring, so it's
+     * read with the value. A development build warns when the ring has no
+     * name.
+     */
+    label?: string;
+    /**
+     * A level within a range, such as storage used or a score, rather than a
+     * task moving toward done: `role="meter"` in place of `role="progressbar"`.
+     * Ignored with `sections`.
+     */
+    isMeter?: boolean;
+    /** The arc's color, and the color of sections without one. */
+    color?: RingProgressColor;
+    /** The ring's size. */
+    size?: (typeof validRingProgressSizes)[number];
+    /** Rounds the ends of the arc. */
+    isRounded?: boolean;
+    /**
+     * What sits in the middle of the ring, such as the value as text. It's
+     * hidden from assistive tech, which reads the value from the ring itself,
+     * so the value isn't heard twice. Say anything more, such as "7 of 10
+     * tasks", in `aria-valuetext`.
+     */
+    children?: React.ReactNode;
+    /** Text color helper. */
+    textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+    /** Background color helper. */
+    bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+}
+/**
+ * The `RingProgress` component draws a value as a ring that fills as it grows, with anything you pass shown in the middle.
+ *
+ * It's a `progressbar` for a task moving toward done, or a `meter` with
+ * `isMeter` for a level within a range, named by `label`. With `sections`
+ * it draws several values around one ring and is an image whose name lists
+ * them. It has no state for work with no value: that's `Loader`.
+ *
+ * @function
+ * @param {RingProgressProps} props - Props for the RingProgress component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root `<div>`.
+ * @returns {JSX.Element} The rendered ring.
+ *
+ * @example
+ * <RingProgress value={72} label="Upload" color="success">
+ *   72%
+ * </RingProgress>
+ */
+export declare const RingProgress: React.ForwardRefExoticComponent<RingProgressProps & React.RefAttributes<HTMLDivElement>>;
+export default RingProgress;

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';
@@ -55,6 +56,7 @@ export * from './elements/OrderedList.js';
 export * from './elements/Paragraph.js';
 export * from './elements/Pre.js';
 export * from './elements/Progress.js';
+export * from './elements/RingProgress.js';
 export * from './elements/Skeleton.js';
 export * from './elements/Span.js';
 export * from './elements/Strong.js';