@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/feedback/ErrorSummary/ErrorSummary.cjs.js

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../Alert/Alert.cjs.js"),r=require("../../navigation/Link/Link.cjs.js"),i=require("./ErrorSummary.module.css.cjs.js");let a=require("react/jsx-runtime");function o({errors:o,title:s,headingLevel:c=2,className:l,...u}){let d=e.useMessages();if(o.length===0)return null;let f=e=>t=>{if(e.focus){t.preventDefault(),e.focus();return}let n=e.id?document.getElementById(e.id):null;n&&(t.preventDefault(),n.focus())};return(0,a.jsx)(n.Alert,{tabIndex:-1,...u,tone:`danger`,headingLevel:c,title:s??d.validation.summaryTitle(o.length),className:t.cx(i.default.root,l),children:(0,a.jsx)(`ul`,{className:i.default.list,children:o.map(e=>(0,a.jsx)(`li`,{children:(0,a.jsx)(r.Link,{href:`#${e.id??e.name}`,tone:`danger`,onClick:f(e),children:e.message})},e.name))})})}exports.ErrorSummary=o;

package/dist/components/feedback/ErrorSummary/ErrorSummary.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { FormErrorItem } from '../../../hooks/useFormValidation';
+import { AlertProps } from '../Alert';
+/** One entry: the field's message and how to reach it. */
+export type ErrorSummaryItem = Pick<FormErrorItem, "name" | "message"> & {
+    /** Id of the field's control, for the `#id` link. */
+    id?: string;
+    /** Moves focus to the field (otherwise the element with `id` is focused). */
+    focus?: () => void;
+};
+export interface ErrorSummaryProps extends Omit<AlertProps, "tone" | "title" | "children" | "dismissible" | "onDismiss"> {
+    /** The errors, in page order: `useFormValidation`'s `errorList`, or your own. Renders nothing when empty. */
+    errors: readonly ErrorSummaryItem[];
+    /** Heading. @default "There is 1 problem" / "There are 3 problems", in the current language */
+    title?: ReactNode;
+}
+/**
+ * The list of a form's errors, shown above it after a failed submit: a danger
+ * `Alert` whose items link to their fields (activating one moves focus to the
+ * field). It's focusable (`tabIndex={-1}`): give `useFormValidation`'s
+ * `summaryRef` as `ref` and a failed submit moves focus here, so screen
+ * readers announce the heading and the list. The title is a real heading
+ * (`h2` by default; set `headingLevel` to fit the page outline).
+ *
+ * ```tsx
+ * <ErrorSummary ref={form.summaryRef} errors={form.errorList} />
+ * ```
+ */
+export declare function ErrorSummary({ errors, title, headingLevel, className, ...rest }: ErrorSummaryProps): import("react").JSX.Element | null;

package/dist/components/feedback/ErrorSummary/ErrorSummary.mjs

@@ -0,0 +1,38 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { Alert as n } from "../Alert/Alert.mjs";
+import { Link as r } from "../../navigation/Link/Link.mjs";
+import i from "./ErrorSummary.module.css.mjs";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/feedback/ErrorSummary/ErrorSummary.tsx
+function o({ errors: o, title: s, headingLevel: c = 2, className: l, ...u }) {
+	let d = e();
+	if (o.length === 0) return null;
+	let f = (e) => (t) => {
+		if (e.focus) {
+			t.preventDefault(), e.focus();
+			return;
+		}
+		let n = e.id ? document.getElementById(e.id) : null;
+		n && (t.preventDefault(), n.focus());
+	};
+	return /* @__PURE__ */ a(n, {
+		tabIndex: -1,
+		...u,
+		tone: "danger",
+		headingLevel: c,
+		title: s ?? d.validation.summaryTitle(o.length),
+		className: t(i.root, l),
+		children: /* @__PURE__ */ a("ul", {
+			className: i.list,
+			children: o.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(r, {
+				href: `#${e.id ?? e.name}`,
+				tone: "danger",
+				onClick: f(e),
+				children: e.message
+			}) }, e.name))
+		})
+	});
+}
+//#endregion
+export { o as ErrorSummary };

package/dist/components/feedback/ErrorSummary/ErrorSummary.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_e770i_4`,t=`_list_e770i_9`,n={root:e,list:t};exports.default=n,exports.list=t,exports.root=e;

package/dist/components/feedback/ErrorSummary/ErrorSummary.module.css.mjs

@@ -0,0 +1,7 @@
+//#region src/components/feedback/ErrorSummary/ErrorSummary.module.css
+var e = "_root_e770i_4", t = "_list_e770i_9", n = {
+	root: e,
+	list: t
+};
+//#endregion
+export { n as default, t as list, e as root };

package/dist/components/feedback/ErrorSummary/index.d.ts

@@ -0,0 +1 @@
+export * from './ErrorSummary';

package/dist/components/feedback/Progress/Progress.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("./Progress.module.css.cjs.js");let n=require("react"),r=require("react/jsx-runtime");var i=globalThis.process?.env?.NODE_ENV!==`production`;function a(e,...t){let r=t.some(e=>e!=null&&e!==``&&e!==!1);(0,n.useEffect)(()=>{i&&!r&&console.warn(`[`+e+`] Give it a name: label, aria-label, or aria-labelledby.`)},[e,r])}var o=(e,t,n)=>Math.min(n,Math.max(t,e)),s=(e,t,n)=>n>t?(o(e,t,n)-t)/(n-t)*100:0,c=(e,t,n)=>`${Math.round(s(e,n,t))}%`,l=e=>e==null||Number.isNaN(e),u={neutral:t.default.toneNeutral,primary:t.default.tonePrimary,accent:t.default.toneAccent,success:t.default.toneSuccess,warning:t.default.toneWarning,danger:t.default.toneDanger,info:t.default.toneInfo},d={none:t.default.radiusNone,xs:t.default.radiusXs,sm:t.default.radiusSm,md:t.default.radiusMd,lg:t.default.radiusLg,xl:t.default.radiusXl,"2xl":t.default.radius2xl,pill:t.default.radiusPill},f={sm:t.default.barSm,md:t.default.barMd,lg:t.default.barLg};function p({value:e,min:t,max:n,semantic:r,valueText:i,formatValue:a,showValue:u}){let d=l(e),f=d?void 0:o(e,t,n),p=f===void 0?0:s(f,t,n),m=u&&f!==void 0?(a??c)(f,n,t):void 0,h=i??(a&&f!==void 0?a(f,n,t):void 0);return{indeterminate:d,now:f,percent:p,displayValue:m,rangeProps:{role:d?`progressbar`:r,"aria-valuemin":t,"aria-valuemax":n,"aria-valuenow":f,"aria-valuetext":h}}}function m({value:i,min:o=0,max:c=100,tone:l=`primary`,size:m=`md`,radius:h=`pill`,striped:g=!1,animated:_=!1,label:v,showValue:y=!1,formatValue:b,valueText:x,semantic:S=`progressbar`,buffer:C,className:w,"aria-labelledby":T,...E}){a(`Progress`,v,E[`aria-label`],T);let D=(0,n.useId)(),{indeterminate:O,percent:k,displayValue:A,rangeProps:j}=p({value:i,min:o,max:c,semantic:S,valueText:x,formatValue:b,showValue:y}),M=C===void 0||O?void 0:s(C,o,c),N=!!v||A!==void 0;return(0,r.jsxs)(`div`,{...E,...j,"aria-labelledby":T??(v?D:void 0),"data-indeterminate":O||void 0,className:e.cx(t.default.bar,u[l],f[m],d[h],O&&t.default.indeterminate,(g||_)&&t.default.striped,_&&t.default.animated,w),children:[N&&(0,r.jsxs)(`div`,{className:t.default.header,children:[v&&(0,r.jsx)(`span`,{id:D,className:t.default.label,children:v}),A!==void 0&&(0,r.jsx)(`span`,{className:t.default.value,children:A})]}),(0,r.jsxs)(`div`,{className:t.default.track,children:[M!==void 0&&(0,r.jsx)(`div`,{className:t.default.buffer,style:{inlineSize:`${M}%`}}),(0,r.jsx)(`div`,{className:t.default.fill,style:O?void 0:{inlineSize:`${k}%`}})]})]})}var h=[`primary`,`warning`,`success`,`danger`,`neutral`,`accent`,`info`];function g({segments:i,max:s=100,label:l,showValue:p=!1,formatValue:m=c,valueText:g,semantic:_=`meter`,size:v=`md`,radius:y=`pill`,showLegend:b=!0,className:x,"aria-label":S,"aria-labelledby":C,"aria-describedby":w,...T}){a(`ProgressSegments`,l,S,C);let E=(0,n.useId)(),D=(0,n.useId)(),O=Math.max(0,s),k=i.map((e,t)=>{let n=o(e.value,0,O);return O-=n,{...e,amount:n,percent:s>0?n/s*100:0,tone:e.tone??h[t%h.length]}}),A=k.reduce((e,t)=>e+t.amount,0),j=g??[k.map(e=>`${e.label} ${m(e.amount,s,0)}`).join(`, `),`${m(A,s,0)} total`].filter(Boolean).join(`; `),M=!!l||p;return(0,r.jsxs)(`div`,{...T,className:e.cx(t.default.segments,f[v],d[y],x),children:[M&&(0,r.jsxs)(`div`,{className:t.default.header,children:[l&&(0,r.jsx)(`span`,{id:E,className:t.default.label,children:l}),p&&(0,r.jsx)(`span`,{className:t.default.value,children:m(A,s,0)})]}),(0,r.jsx)(`div`,{role:_,"aria-valuemin":0,"aria-valuemax":s,"aria-valuenow":A,"aria-valuetext":j,"aria-label":S,"aria-labelledby":C??(l?E:void 0),"aria-describedby":e.cx(w,b&&D)||void 0,className:e.cx(t.default.track,t.default.segmentTrack),children:k.map((n,i)=>n.percent>0?(0,r.jsx)(`div`,{className:e.cx(t.default.segment,u[n.tone]),style:{inlineSize:`${n.percent}%`}},`${n.label}-${i}`):null)}),b&&(0,r.jsx)(`ul`,{id:D,role:`list`,className:t.default.legend,children:k.map((n,i)=>(0,r.jsxs)(`li`,{className:t.default.legendItem,children:[(0,r.jsx)(`span`,{"aria-hidden":`true`,className:e.cx(t.default.swatch,u[n.tone])}),(0,r.jsx)(`span`,{className:t.default.legendLabel,children:n.label}),(0,r.jsx)(`span`,{className:t.default.legendValue,children:m(n.amount,s,0)})]},`${n.label}-${i}`))})]})}var _={sm:32,md:48,lg:64,xl:96},v={sm:t.default.ringSm,md:t.default.ringMd,lg:t.default.ringLg,xl:t.default.ringXl},y={sm:4,md:5,lg:6,xl:8};function b({value:i,min:o=0,max:s=100,tone:c=`primary`,size:l=`md`,thickness:d,label:f,showValue:m=!1,formatValue:h,valueText:g,semantic:b=`progressbar`,children:x,className:S,style:C,"aria-labelledby":w,...T}){a(`CircularProgress`,f,T[`aria-label`],w);let E=(0,n.useId)(),{indeterminate:D,percent:O,displayValue:k,rangeProps:A}=p({value:i,min:o,max:s,semantic:b,valueText:g,formatValue:h,showValue:m&&l!==`sm`}),j=typeof l==`number`,M=j?l:_[l],N=Math.min(M/2,d??(j?Math.max(3,Math.round(l/10)):y[l])),P=M/2,F=(M-N)/2,I=x??k;return(0,r.jsxs)(`div`,{...T,...A,"aria-labelledby":w??(f?E:void 0),"data-indeterminate":D||void 0,className:e.cx(t.default.circular,u[c],!j&&v[l],D&&t.default.indeterminate,S),style:j?{"--pg-ring-size":`${l}px`,...C}:C,children:[(0,r.jsxs)(`div`,{className:t.default.ring,children:[(0,r.jsxs)(`svg`,{className:t.default.ringSvg,viewBox:`0 0 ${M} ${M}`,"aria-hidden":`true`,focusable:`false`,children:[(0,r.jsx)(`circle`,{className:t.default.ringTrack,cx:P,cy:P,r:F,strokeWidth:N}),(0,r.jsx)(`circle`,{className:e.cx(t.default.ringFill,!D&&O===0&&t.default.ringEmpty),cx:P,cy:P,r:F,strokeWidth:N,pathLength:100,strokeDasharray:`100 100`,transform:`rotate(-90 ${P} ${P})`,style:{strokeDashoffset:D?72:100-O}})]}),I!=null&&(0,r.jsx)(`div`,{className:t.default.ringCenter,children:I})]}),f&&(0,r.jsx)(`span`,{id:E,className:t.default.ringLabel,children:f})]})}exports.CircularProgress=b,exports.Progress=m,exports.ProgressSegments=g,exports.formatProgressPercent=c;

package/dist/components/feedback/Progress/Progress.d.ts

@@ -0,0 +1,150 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Radius, Size, Tone } from '../../../types/common';
+/**
+ * ARIA semantics of the indicator.
+ * - `progressbar`: progress of a task that is moving toward completion
+ *   (uploads, installs, steps). Supports the indeterminate state.
+ * - `meter`: a static measurement within a known range (disk usage, battery,
+ *   a score). Requires a value; an indeterminate meter falls back to
+ *   `progressbar`, since a measurement cannot be "unknown but in progress".
+ */
+export type ProgressSemantic = "progressbar" | "meter";
+/**
+ * Formats a value for display and for `aria-valuetext`.
+ * Receives the clamped value, the max, and the min.
+ */
+export type ProgressFormatValue = (value: number, max: number, min: number) => string;
+/** Default formatter: a whole-number percentage of the range, e.g. `"42%"`. */
+export declare const formatProgressPercent: ProgressFormatValue;
+/** Props shared by `Progress` and `CircularProgress`. */
+interface ProgressValueProps {
+    /**
+     * Current value. Leave `undefined` or pass `null` for the indeterminate
+     * state (an animated sweep; a calm pulse under `prefers-reduced-motion`).
+     * Values outside `min`..`max` are clamped.
+     */
+    value?: number | null;
+    /** Lower bound of the range. */
+    min?: number;
+    /** Upper bound of the range. */
+    max?: number;
+    /**
+     * Semantic color of the fill. Color never carries meaning alone: pair
+     * `danger`/`warning` with a `label` and `showValue` (or `valueText`).
+     */
+    tone?: Tone;
+    /**
+     * Visible label. Becomes the accessible name through `aria-labelledby`.
+     * Without it, pass `aria-label` (or `aria-labelledby`).
+     */
+    label?: ReactNode;
+    /** Show the formatted value (a percentage by default, see `formatValue`). */
+    showValue?: boolean;
+    /**
+     * Custom value formatter, e.g. `(v, max) => \`${v} of ${max} MB\``. Its
+     * result is shown with `showValue` and also used as `aria-valuetext`.
+     */
+    formatValue?: ProgressFormatValue;
+    /**
+     * Overrides `aria-valuetext`, the text screen readers announce instead of
+     * the raw number (e.g. `"Step 2 of 5: Shipping"`). Also usable while
+     * indeterminate (e.g. `"Preparing upload"`).
+     */
+    valueText?: string;
+    /** ARIA role: `progressbar` for tasks (default), `meter` for static measurements. */
+    semantic?: ProgressSemantic;
+}
+export interface ProgressProps extends ProgressValueProps, Omit<ComponentPropsWithRef<"div">, "role" | "children"> {
+    /** Bar thickness: `sm` 4px, `md` 8px, `lg` 12px. */
+    size?: Size;
+    /** Corner rounding of the track and fill. */
+    radius?: Radius;
+    /** Diagonal stripes on the fill, for an energetic look. */
+    striped?: boolean;
+    /** Move the stripes (implies `striped`). Stops under `prefers-reduced-motion`. */
+    animated?: boolean;
+    /**
+     * Secondary, lighter fill behind the main one, in the same units as
+     * `value` (e.g. how much of a video has buffered). Visual only: it is not
+     * exposed to assistive technology, so describe it in `valueText` if it matters.
+     */
+    buffer?: number;
+}
+/**
+ * Linear progress bar. Shows determinate progress with a smooth transition,
+ * or an indeterminate sweep when `value` is not set. The root carries
+ * `role="progressbar"` (or `meter`) with the ARIA range attributes.
+ */
+export declare function Progress({ value, min, max, tone, size, radius, striped, animated, label, showValue, formatValue, valueText, semantic, buffer, className, "aria-labelledby": ariaLabelledBy, ...rest }: ProgressProps): import("react").JSX.Element;
+/** One part of a `ProgressSegments` bar. */
+export interface ProgressSegment {
+    /** Amount this segment takes up, in the same units as `max`. */
+    value: number;
+    /** Name shown in the legend and announced to screen readers. */
+    label: string;
+    /** Fill color. Defaults to a rotating set of tones. */
+    tone?: Tone;
+}
+export interface ProgressSegmentsProps extends Omit<ComponentPropsWithRef<"div">, "role" | "children"> {
+    /** The parts, in order from the start of the bar. Their sum is clamped to `max`. */
+    segments: ProgressSegment[];
+    /** Total capacity (e.g. 256 for 256 GB). */
+    max?: number;
+    /** Visible label; the accessible name of the bar. Otherwise pass `aria-label`. */
+    label?: ReactNode;
+    /** Show the formatted total next to the label. */
+    showValue?: boolean;
+    /**
+     * Formats segment values and the total, e.g. `(v) => \`${v} GB\``.
+     * Defaults to a percentage of `max`.
+     */
+    formatValue?: ProgressFormatValue;
+    /** Overrides the generated `aria-valuetext` summary. */
+    valueText?: string;
+    /** ARIA role of the bar. Defaults to `meter`, since stacked usage is usually a measurement. */
+    semantic?: ProgressSemantic;
+    /** Bar thickness: `sm` 4px, `md` 8px, `lg` 12px. */
+    size?: Size;
+    /** Corner rounding of the track. */
+    radius?: Radius;
+    /** Show the legend (label and value for every segment). */
+    showLegend?: boolean;
+}
+/**
+ * Stacked bar made of labeled parts, with a legend (e.g. storage usage).
+ *
+ * Accessibility: the bar is a single `meter` (or `progressbar`) whose value
+ * is the total, and whose `aria-valuetext` lists every segment
+ * ("Photos 42 GB, Apps 30 GB; 72 GB total"). The visual segments are hidden
+ * from assistive technology; the legend is a real list with text for every
+ * part, so the breakdown never depends on color.
+ */
+export declare function ProgressSegments({ segments, max, label, showValue, formatValue, valueText, semantic, size, radius, showLegend, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ProgressSegmentsProps): import("react").JSX.Element;
+/** Ring size: `sm` 32px, `md` 48px, `lg` 64px, `xl` 96px, or a number of pixels. */
+export type CircularProgressSize = Size | "xl" | number;
+export interface CircularProgressProps extends ProgressValueProps, Omit<ComponentPropsWithRef<"div">, "role"> {
+    /** Ring diameter: `sm` 32px, `md` 48px, `lg` 64px, `xl` 96px, or a number of pixels. */
+    size?: CircularProgressSize;
+    /** Stroke width in pixels. Defaults scale with `size`. */
+    thickness?: number;
+    /**
+     * Content in the center of the ring, e.g. an icon or custom text. Overrides
+     * the `showValue` percentage. Presentational: it is part of the
+     * progressbar, so put anything screen readers must hear in `valueText`.
+     */
+    children?: ReactNode;
+    /**
+     * Show the formatted value in the center, in bold display type. Not
+     * rendered at `size="sm"` (too small to read); use `label` there instead.
+     */
+    showValue?: boolean;
+    /** Visible caption under the ring; the accessible name. Otherwise pass `aria-label`. */
+    label?: ReactNode;
+}
+/**
+ * Ring-shaped progress indicator with rounded caps and an optional center
+ * slot. Determinate when `value` is set, spinning otherwise (a calm pulse
+ * under `prefers-reduced-motion`).
+ */
+export declare function CircularProgress({ value, min, max, tone, size, thickness, label, showValue, formatValue, valueText, semantic, children, className, style, "aria-labelledby": ariaLabelledBy, ...rest }: CircularProgressProps): import("react").JSX.Element;
+export {};

package/dist/components/feedback/Progress/Progress.mjs

@@ -0,0 +1,238 @@
+import { cx as e } from "../../../utils/cx.mjs";
+import t from "./Progress.module.css.mjs";
+import { useEffect as n, useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/feedback/Progress/Progress.tsx
+var o = globalThis.process?.env?.NODE_ENV !== "production";
+function s(e, ...t) {
+	let r = t.some((e) => e != null && e !== "" && e !== !1);
+	n(() => {
+		o && !r && console.warn("[" + e + "] Give it a name: label, aria-label, or aria-labelledby.");
+	}, [e, r]);
+}
+var c = (e, t, n) => Math.min(n, Math.max(t, e)), l = (e, t, n) => n > t ? (c(e, t, n) - t) / (n - t) * 100 : 0, u = (e, t, n) => `${Math.round(l(e, n, t))}%`, d = (e) => e == null || Number.isNaN(e), f = {
+	neutral: t.toneNeutral,
+	primary: t.tonePrimary,
+	accent: t.toneAccent,
+	success: t.toneSuccess,
+	warning: t.toneWarning,
+	danger: t.toneDanger,
+	info: t.toneInfo
+}, p = {
+	none: t.radiusNone,
+	xs: t.radiusXs,
+	sm: t.radiusSm,
+	md: t.radiusMd,
+	lg: t.radiusLg,
+	xl: t.radiusXl,
+	"2xl": t.radius2xl,
+	pill: t.radiusPill
+}, m = {
+	sm: t.barSm,
+	md: t.barMd,
+	lg: t.barLg
+};
+function h({ value: e, min: t, max: n, semantic: r, valueText: i, formatValue: a, showValue: o }) {
+	let s = d(e), f = s ? void 0 : c(e, t, n), p = f === void 0 ? 0 : l(f, t, n), m = o && f !== void 0 ? (a ?? u)(f, n, t) : void 0, h = i ?? (a && f !== void 0 ? a(f, n, t) : void 0);
+	return {
+		indeterminate: s,
+		now: f,
+		percent: p,
+		displayValue: m,
+		rangeProps: {
+			role: s ? "progressbar" : r,
+			"aria-valuemin": t,
+			"aria-valuemax": n,
+			"aria-valuenow": f,
+			"aria-valuetext": h
+		}
+	};
+}
+function g({ value: n, min: o = 0, max: c = 100, tone: u = "primary", size: d = "md", radius: g = "pill", striped: _ = !1, animated: v = !1, label: y, showValue: b = !1, formatValue: x, valueText: S, semantic: C = "progressbar", buffer: w, className: T, "aria-labelledby": E, ...D }) {
+	s("Progress", y, D["aria-label"], E);
+	let O = r(), { indeterminate: k, percent: A, displayValue: j, rangeProps: M } = h({
+		value: n,
+		min: o,
+		max: c,
+		semantic: C,
+		valueText: S,
+		formatValue: x,
+		showValue: b
+	}), N = w === void 0 || k ? void 0 : l(w, o, c), P = !!y || j !== void 0;
+	return /* @__PURE__ */ a("div", {
+		...D,
+		...M,
+		"aria-labelledby": E ?? (y ? O : void 0),
+		"data-indeterminate": k || void 0,
+		className: e(t.bar, f[u], m[d], p[g], k && t.indeterminate, (_ || v) && t.striped, v && t.animated, T),
+		children: [P && /* @__PURE__ */ a("div", {
+			className: t.header,
+			children: [y && /* @__PURE__ */ i("span", {
+				id: O,
+				className: t.label,
+				children: y
+			}), j !== void 0 && /* @__PURE__ */ i("span", {
+				className: t.value,
+				children: j
+			})]
+		}), /* @__PURE__ */ a("div", {
+			className: t.track,
+			children: [N !== void 0 && /* @__PURE__ */ i("div", {
+				className: t.buffer,
+				style: { inlineSize: `${N}%` }
+			}), /* @__PURE__ */ i("div", {
+				className: t.fill,
+				style: k ? void 0 : { inlineSize: `${A}%` }
+			})]
+		})]
+	});
+}
+var _ = [
+	"primary",
+	"warning",
+	"success",
+	"danger",
+	"neutral",
+	"accent",
+	"info"
+];
+function v({ segments: n, max: o = 100, label: l, showValue: d = !1, formatValue: h = u, valueText: g, semantic: v = "meter", size: y = "md", radius: b = "pill", showLegend: x = !0, className: S, "aria-label": C, "aria-labelledby": w, "aria-describedby": T, ...E }) {
+	s("ProgressSegments", l, C, w);
+	let D = r(), O = r(), k = Math.max(0, o), A = n.map((e, t) => {
+		let n = c(e.value, 0, k);
+		return k -= n, {
+			...e,
+			amount: n,
+			percent: o > 0 ? n / o * 100 : 0,
+			tone: e.tone ?? _[t % _.length]
+		};
+	}), j = A.reduce((e, t) => e + t.amount, 0), M = g ?? [A.map((e) => `${e.label} ${h(e.amount, o, 0)}`).join(", "), `${h(j, o, 0)} total`].filter(Boolean).join("; "), N = !!l || d;
+	return /* @__PURE__ */ a("div", {
+		...E,
+		className: e(t.segments, m[y], p[b], S),
+		children: [
+			N && /* @__PURE__ */ a("div", {
+				className: t.header,
+				children: [l && /* @__PURE__ */ i("span", {
+					id: D,
+					className: t.label,
+					children: l
+				}), d && /* @__PURE__ */ i("span", {
+					className: t.value,
+					children: h(j, o, 0)
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				role: v,
+				"aria-valuemin": 0,
+				"aria-valuemax": o,
+				"aria-valuenow": j,
+				"aria-valuetext": M,
+				"aria-label": C,
+				"aria-labelledby": w ?? (l ? D : void 0),
+				"aria-describedby": e(T, x && O) || void 0,
+				className: e(t.track, t.segmentTrack),
+				children: A.map((n, r) => n.percent > 0 ? /* @__PURE__ */ i("div", {
+					className: e(t.segment, f[n.tone]),
+					style: { inlineSize: `${n.percent}%` }
+				}, `${n.label}-${r}`) : null)
+			}),
+			x && /* @__PURE__ */ i("ul", {
+				id: O,
+				role: "list",
+				className: t.legend,
+				children: A.map((n, r) => /* @__PURE__ */ a("li", {
+					className: t.legendItem,
+					children: [
+						/* @__PURE__ */ i("span", {
+							"aria-hidden": "true",
+							className: e(t.swatch, f[n.tone])
+						}),
+						/* @__PURE__ */ i("span", {
+							className: t.legendLabel,
+							children: n.label
+						}),
+						/* @__PURE__ */ i("span", {
+							className: t.legendValue,
+							children: h(n.amount, o, 0)
+						})
+					]
+				}, `${n.label}-${r}`))
+			})
+		]
+	});
+}
+var y = {
+	sm: 32,
+	md: 48,
+	lg: 64,
+	xl: 96
+}, b = {
+	sm: t.ringSm,
+	md: t.ringMd,
+	lg: t.ringLg,
+	xl: t.ringXl
+}, x = {
+	sm: 4,
+	md: 5,
+	lg: 6,
+	xl: 8
+};
+function S({ value: n, min: o = 0, max: c = 100, tone: l = "primary", size: u = "md", thickness: d, label: p, showValue: m = !1, formatValue: g, valueText: _, semantic: v = "progressbar", children: S, className: C, style: w, "aria-labelledby": T, ...E }) {
+	s("CircularProgress", p, E["aria-label"], T);
+	let D = r(), { indeterminate: O, percent: k, displayValue: A, rangeProps: j } = h({
+		value: n,
+		min: o,
+		max: c,
+		semantic: v,
+		valueText: _,
+		formatValue: g,
+		showValue: m && u !== "sm"
+	}), M = typeof u == "number", N = M ? u : y[u], P = Math.min(N / 2, d ?? (M ? Math.max(3, Math.round(u / 10)) : x[u])), F = N / 2, I = (N - P) / 2, L = S ?? A;
+	return /* @__PURE__ */ a("div", {
+		...E,
+		...j,
+		"aria-labelledby": T ?? (p ? D : void 0),
+		"data-indeterminate": O || void 0,
+		className: e(t.circular, f[l], !M && b[u], O && t.indeterminate, C),
+		style: M ? {
+			"--pg-ring-size": `${u}px`,
+			...w
+		} : w,
+		children: [/* @__PURE__ */ a("div", {
+			className: t.ring,
+			children: [/* @__PURE__ */ a("svg", {
+				className: t.ringSvg,
+				viewBox: `0 0 ${N} ${N}`,
+				"aria-hidden": "true",
+				focusable: "false",
+				children: [/* @__PURE__ */ i("circle", {
+					className: t.ringTrack,
+					cx: F,
+					cy: F,
+					r: I,
+					strokeWidth: P
+				}), /* @__PURE__ */ i("circle", {
+					className: e(t.ringFill, !O && k === 0 && t.ringEmpty),
+					cx: F,
+					cy: F,
+					r: I,
+					strokeWidth: P,
+					pathLength: 100,
+					strokeDasharray: "100 100",
+					transform: `rotate(-90 ${F} ${F})`,
+					style: { strokeDashoffset: O ? 72 : 100 - k }
+				})]
+			}), L != null && /* @__PURE__ */ i("div", {
+				className: t.ringCenter,
+				children: L
+			})]
+		}), p && /* @__PURE__ */ i("span", {
+			id: D,
+			className: t.ringLabel,
+			children: p
+		})]
+	});
+}
+//#endregion
+export { S as CircularProgress, g as Progress, v as ProgressSegments, u as formatProgressPercent };

package/dist/components/feedback/Progress/Progress.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_tonePrimary_1mn5i_23`,t=`_toneNeutral_1mn5i_35`,n=`_toneAccent_1mn5i_49`,r=`_toneSuccess_1mn5i_61`,i=`_toneWarning_1mn5i_73`,a=`_toneDanger_1mn5i_85`,o=`_toneInfo_1mn5i_97`,s=`_radiusNone_1mn5i_117`,c=`_radiusXs_1mn5i_119`,l=`_radiusSm_1mn5i_121`,u=`_radiusMd_1mn5i_123`,d=`_radiusLg_1mn5i_125`,f=`_radiusXl_1mn5i_127`,p=`_radius2xl_1mn5i_129`,m=`_radiusPill_1mn5i_131`,h=`_barSm_1mn5i_143`,g=`_barMd_1mn5i_145`,_=`_barLg_1mn5i_147`,v=`_bar_1mn5i_143`,y=`_segments_1mn5i_161`,b=`_header_1mn5i_179`,x=`_label_1mn5i_193`,S=`_value_1mn5i_209`,C=`_track_1mn5i_231`,w=`_fill_1mn5i_251`,T=`_buffer_1mn5i_253`,E=`_striped_1mn5i_291`,D=`_animated_1mn5i_319`,O=`_stripes_1mn5i_1`,k=`_indeterminate_1mn5i_349`,A=`_sweep_1mn5i_1`,j=`_segmentTrack_1mn5i_413`,M=`_segment_1mn5i_161`,N=`_legend_1mn5i_449`,P=`_legendItem_1mn5i_467`,F=`_swatch_1mn5i_483`,I=`_legendLabel_1mn5i_523`,L=`_legendValue_1mn5i_531`,R=`_ringSm_1mn5i_553`,z=`_ringMd_1mn5i_555`,B=`_ringLg_1mn5i_557`,V=`_ringXl_1mn5i_559`,H=`_circular_1mn5i_563`,U=`_ring_1mn5i_553`,W=`_ringSvg_1mn5i_599`,G=`_ringTrack_1mn5i_615`,K=`_ringFill_1mn5i_625`,q=`_ringEmpty_1mn5i_641`,J=`_ringCenter_1mn5i_649`,Y=`_ringLabel_1mn5i_687`,X=`_spin_1mn5i_1`,Z=`_pulse_1mn5i_1`,Q={tonePrimary:e,toneNeutral:t,toneAccent:n,toneSuccess:r,toneWarning:i,toneDanger:a,toneInfo:o,radiusNone:s,radiusXs:c,radiusSm:l,radiusMd:u,radiusLg:d,radiusXl:f,radius2xl:p,radiusPill:m,barSm:h,barMd:g,barLg:_,bar:v,segments:y,header:b,label:x,value:S,track:C,fill:w,buffer:T,striped:E,animated:D,stripes:O,indeterminate:k,sweep:A,segmentTrack:j,segment:M,legend:N,legendItem:P,swatch:F,legendLabel:I,legendValue:L,ringSm:R,ringMd:z,ringLg:B,ringXl:V,circular:H,ring:U,ringSvg:W,ringTrack:G,ringFill:K,ringEmpty:q,ringCenter:J,ringLabel:Y,spin:X,pulse:Z};exports.animated=D,exports.bar=v,exports.barLg=_,exports.barMd=g,exports.barSm=h,exports.buffer=T,exports.circular=H,exports.default=Q,exports.fill=w,exports.header=b,exports.indeterminate=k,exports.label=x,exports.legend=N,exports.legendItem=P,exports.legendLabel=I,exports.legendValue=L,exports.pulse=Z,exports.radius2xl=p,exports.radiusLg=d,exports.radiusMd=u,exports.radiusNone=s,exports.radiusPill=m,exports.radiusSm=l,exports.radiusXl=f,exports.radiusXs=c,exports.ring=U,exports.ringCenter=J,exports.ringEmpty=q,exports.ringFill=K,exports.ringLabel=Y,exports.ringLg=B,exports.ringMd=z,exports.ringSm=R,exports.ringSvg=W,exports.ringTrack=G,exports.ringXl=V,exports.segment=M,exports.segmentTrack=j,exports.segments=y,exports.spin=X,exports.striped=E,exports.stripes=O,exports.swatch=F,exports.sweep=A,exports.toneAccent=n,exports.toneDanger=a,exports.toneInfo=o,exports.toneNeutral=t,exports.tonePrimary=e,exports.toneSuccess=r,exports.toneWarning=i,exports.track=C,exports.value=S;

package/dist/components/feedback/Progress/Progress.module.css.mjs

@@ -0,0 +1,57 @@
+//#region src/components/feedback/Progress/Progress.module.css
+var e = "_tonePrimary_1mn5i_23", t = "_toneNeutral_1mn5i_35", n = "_toneAccent_1mn5i_49", r = "_toneSuccess_1mn5i_61", i = "_toneWarning_1mn5i_73", a = "_toneDanger_1mn5i_85", o = "_toneInfo_1mn5i_97", s = "_radiusNone_1mn5i_117", c = "_radiusXs_1mn5i_119", l = "_radiusSm_1mn5i_121", u = "_radiusMd_1mn5i_123", d = "_radiusLg_1mn5i_125", f = "_radiusXl_1mn5i_127", p = "_radius2xl_1mn5i_129", m = "_radiusPill_1mn5i_131", h = "_barSm_1mn5i_143", g = "_barMd_1mn5i_145", _ = "_barLg_1mn5i_147", v = "_bar_1mn5i_143", y = "_segments_1mn5i_161", b = "_header_1mn5i_179", x = "_label_1mn5i_193", S = "_value_1mn5i_209", C = "_track_1mn5i_231", w = "_fill_1mn5i_251", T = "_buffer_1mn5i_253", E = "_striped_1mn5i_291", D = "_animated_1mn5i_319", O = "_stripes_1mn5i_1", k = "_indeterminate_1mn5i_349", A = "_sweep_1mn5i_1", j = "_segmentTrack_1mn5i_413", M = "_segment_1mn5i_161", N = "_legend_1mn5i_449", P = "_legendItem_1mn5i_467", F = "_swatch_1mn5i_483", I = "_legendLabel_1mn5i_523", L = "_legendValue_1mn5i_531", R = "_ringSm_1mn5i_553", z = "_ringMd_1mn5i_555", B = "_ringLg_1mn5i_557", V = "_ringXl_1mn5i_559", H = "_circular_1mn5i_563", U = "_ring_1mn5i_553", W = "_ringSvg_1mn5i_599", G = "_ringTrack_1mn5i_615", K = "_ringFill_1mn5i_625", q = "_ringEmpty_1mn5i_641", J = "_ringCenter_1mn5i_649", Y = "_ringLabel_1mn5i_687", X = "_spin_1mn5i_1", Z = "_pulse_1mn5i_1", Q = {
+	tonePrimary: e,
+	toneNeutral: t,
+	toneAccent: n,
+	toneSuccess: r,
+	toneWarning: i,
+	toneDanger: a,
+	toneInfo: o,
+	radiusNone: s,
+	radiusXs: c,
+	radiusSm: l,
+	radiusMd: u,
+	radiusLg: d,
+	radiusXl: f,
+	radius2xl: p,
+	radiusPill: m,
+	barSm: h,
+	barMd: g,
+	barLg: _,
+	bar: v,
+	segments: y,
+	header: b,
+	label: x,
+	value: S,
+	track: C,
+	fill: w,
+	buffer: T,
+	striped: E,
+	animated: D,
+	stripes: O,
+	indeterminate: k,
+	sweep: A,
+	segmentTrack: j,
+	segment: M,
+	legend: N,
+	legendItem: P,
+	swatch: F,
+	legendLabel: I,
+	legendValue: L,
+	ringSm: R,
+	ringMd: z,
+	ringLg: B,
+	ringXl: V,
+	circular: H,
+	ring: U,
+	ringSvg: W,
+	ringTrack: G,
+	ringFill: K,
+	ringEmpty: q,
+	ringCenter: J,
+	ringLabel: Y,
+	spin: X,
+	pulse: Z
+};
+//#endregion
+export { D as animated, v as bar, _ as barLg, g as barMd, h as barSm, T as buffer, H as circular, Q as default, w as fill, b as header, k as indeterminate, x as label, N as legend, P as legendItem, I as legendLabel, L as legendValue, Z as pulse, p as radius2xl, d as radiusLg, u as radiusMd, s as radiusNone, m as radiusPill, l as radiusSm, f as radiusXl, c as radiusXs, U as ring, J as ringCenter, q as ringEmpty, K as ringFill, Y as ringLabel, B as ringLg, z as ringMd, R as ringSm, W as ringSvg, G as ringTrack, V as ringXl, M as segment, j as segmentTrack, y as segments, X as spin, E as striped, O as stripes, F as swatch, A as sweep, n as toneAccent, a as toneDanger, o as toneInfo, t as toneNeutral, e as tonePrimary, r as toneSuccess, i as toneWarning, C as track, S as value };

package/dist/components/feedback/Progress/index.d.ts

@@ -0,0 +1 @@
+export * from './Progress';

package/dist/components/feedback/Skeleton/Skeleton.cjs.js

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),r=require("./Skeleton.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o={rect:r.default.rect,text:r.default.text,circle:r.default.circle,pill:r.default.pill},s={pulse:r.default.pulse,shimmer:r.default.shimmer,none:``},c={none:r.default.radiusNone,xs:r.default.radiusXs,sm:r.default.radiusSm,md:r.default.radiusMd,lg:r.default.radiusLg,xl:r.default.radiusXl,"2xl":r.default.radius2xl,pill:r.default.radiusPill},l=e=>e===void 0?void 0:typeof e==`number`?`${e}px`:e,u=(e,t)=>{let n={},r=l(e),i=l(t);return r!==void 0&&(n[`--_skeleton-width`]=r),i!==void 0&&(n[`--_skeleton-height`]=i),n},d=(e,t,n)=>{let[r,a]=(0,i.useState)(``);return(0,i.useEffect)(()=>{if(!e){a(n??``);return}a(``);let r=window.setTimeout(()=>a(t),150);return()=>window.clearTimeout(r)},[e,t,n]),r},f=({message:e})=>(0,a.jsx)(n.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:e}),p=({variant:e=`rect`,width:n,height:i,radius:l,animation:p=`pulse`,loading:m=!0,inline:h=!1,loadingLabel:g,loadedLabel:_,children:v,className:y,style:b,ref:x,...S})=>{let C=v!=null&&v!==!1,w=C&&g!==void 0,T=d(w&&m,g??``,w?_:void 0);if(!C)return m?(0,a.jsx)(`span`,{"aria-hidden":`true`,...S,ref:x,className:t.cx(r.default.root,o[e],s[p],l&&c[l],y),style:{...u(n,i),...b},"data-variant":e}):null;let E=(0,a.jsxs)(`div`,{"aria-busy":m||void 0,...S,ref:x,className:t.cx(r.default.wrapper,h&&r.default.wrapperInline,m&&r.default.wrapperLoading,y),style:{...u(n,i),...b},"data-loading":m?``:void 0,children:[(0,a.jsx)(`div`,{className:t.cx(r.default.content,m&&r.default.hiddenContent),inert:m,"aria-hidden":m||void 0,children:v}),m&&(0,a.jsx)(`span`,{"aria-hidden":`true`,className:t.cx(r.default.root,r.default.overlay,e===`circle`&&r.default.radiusRound,e===`pill`&&r.default.radiusPill,s[p],l&&c[l])})]});return w?(0,a.jsxs)(a.Fragment,{children:[E,(0,a.jsx)(f,{message:T})]}):E},m={xs:r.default.sizeXs,sm:r.default.sizeSm,md:r.default.sizeMd,lg:r.default.sizeLg,xl:r.default.sizeXl,"2xl":r.default.size2xl,"3xl":r.default.size3xl,"4xl":r.default.size4xl,"5xl":r.default.size5xl,"6xl":r.default.size6xl},h={tight:r.default.leadingTight,snug:r.default.leadingSnug,normal:r.default.leadingNormal,relaxed:r.default.leadingRelaxed},g={0:r.default.gap0,1:r.default.gap1,2:r.default.gap2,3:r.default.gap3,4:r.default.gap4,5:r.default.gap5,6:r.default.gap6,8:r.default.gap8,10:r.default.gap10,12:r.default.gap12,16:r.default.gap16,20:r.default.gap20,24:r.default.gap24},_=({lines:e=3,lastLineWidth:n,width:i,size:o=`md`,leading:s=`normal`,gap:c=0,animation:l=`pulse`,className:d,style:f,..._})=>{let v=Math.max(1,Math.floor(e)),y=n??(v>1?`60%`:void 0);return(0,a.jsx)(`span`,{"aria-hidden":`true`,..._,className:t.cx(r.default.textBlock,m[o],h[s],g[c],d),style:{...u(i,void 0),...f},children:Array.from({length:v},(e,t)=>(0,a.jsx)(p,{variant:`text`,animation:l,width:t===v-1?y:void 0,"aria-hidden":void 0},t))})},v={xs:r.default.avatarXs,sm:r.default.avatarSm,md:r.default.avatarMd,lg:r.default.avatarLg,xl:r.default.avatarXl,"2xl":r.default.avatar2xl},y={circle:r.default.radiusRound,rounded:r.default.radiusMd,square:r.default.radiusSm},b=({size:e=`md`,shape:n=`circle`,animation:i=`pulse`,className:o,...c})=>(0,a.jsx)(`span`,{"aria-hidden":`true`,...c,className:t.cx(r.default.root,r.default.avatar,v[e],y[n],s[i],o)}),x=e=>(0,a.jsx)(b,{...e,shape:`circle`}),S=({loading:t=!0,label:n,loadedLabel:r,children:i,...o})=>{let s=e.useMessages(),c=d(t,n??s.skeleton.loading,r);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`div`,{"aria-busy":t||void 0,...o,children:i}),(0,a.jsx)(f,{message:c})]})};exports.Skeleton=p,exports.SkeletonAvatar=b,exports.SkeletonCircle=x,exports.SkeletonGroup=S,exports.SkeletonText=_;