@allxsmith/bestax-bulma 5.49.1 → 5.50.0

package/dist/index.esm.js

@@ -56,6 +56,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/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

@@ -55,6 +55,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/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

@@ -55,6 +55,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';