@asafarim/progress-bars 1.0.0

package/README.md

@@ -0,0 +1,287 @@
+# @asafarim/progress-bars
+
+A comprehensive React component library for displaying progress indicators with multiple styles and configurations. Built with TypeScript, styled with design tokens, and fully accessible.
+
+## Features
+
+- **Multiple Progress Components**: Linear, Circular, Vertical, Segmented, Step, and Spinner variants
+- **Fully Accessible**: ARIA attributes and semantic HTML for screen readers
+- **Design Token Integration**: Uses `@asafarim/design-tokens` for consistent styling
+- **TypeScript Support**: Full type safety with exported interfaces
+- **Flexible Styling**: CSS Modules with customizable sizes, tones, and animations
+- **React 18+**: Built for modern React with hooks support
+
+## Installation
+
+```bash
+npm install @asafarim/progress-bars
+```
+
+or with pnpm:
+
+```bash
+pnpm add @asafarim/progress-bars
+```
+
+## Quick Start
+
+### LinearProgress
+
+```tsx
+import { LinearProgress } from '@asafarim/progress-bars';
+import '@asafarim/progress-bars/dist/style.css';
+
+export function MyComponent() {
+  return (
+    <>
+      {/* Determinate progress */}
+      <LinearProgress value={65} />
+
+      {/* Indeterminate loading state */}
+      <LinearProgress variant="indeterminate" />
+
+      {/* With striped animation */}
+      <LinearProgress value={45} striped animated />
+    </>
+  );
+}
+```
+
+### CircularProgress
+
+```tsx
+import { CircularProgress } from '@asafarim/progress-bars';
+
+export function MyComponent() {
+  return (
+    <>
+      {/* Determinate circular progress */}
+      <CircularProgress value={75} size={80} showLabel />
+
+      {/* Indeterminate spinner */}
+      <CircularProgress size={56} />
+    </>
+  );
+}
+```
+
+## Components
+
+### LinearProgress
+
+Horizontal progress bar with determinate and indeterminate variants.
+
+**Props:**
+
+- `variant?: 'determinate' | 'indeterminate'` - Progress type (default: `'determinate'`)
+- `size?: 'sm' | 'md' | 'lg'` - Bar height (default: `'md'`)
+- `tone?: ProgressTone` - Color tone (default: `'brand'`)
+- `value?: number` - Current progress value (0-100, default: `0`)
+- `min?: number` - Minimum value (default: `0`)
+- `max?: number` - Maximum value (default: `100`)
+- `striped?: boolean` - Show striped pattern (default: `false`)
+- `animated?: boolean` - Animate stripes (default: `false`)
+- `thickness?: number` - Custom track height in pixels
+- `ariaLabel?: string` - Accessible name
+- `ariaLabelledBy?: string` - ID of labeling element
+- `ariaValueText?: string` - Text for indeterminate state (default: `'Loading'`)
+
+**Usage Example:**
+
+```tsx
+<LinearProgress
+  value={60}
+  size="lg"
+  tone="success"
+  striped
+  animated
+  ariaLabel="File upload progress"
+/>
+```
+
+### CircularProgress
+
+Circular progress indicator with optional label overlay.
+
+**Props:**
+
+- `value?: number` - Progress percentage (0-100, undefined for indeterminate)
+- `size?: number` - SVG size in pixels (default: `56`)
+- `thickness?: number` - Stroke width in pixels (default: `6`)
+- `tone?: ProgressTone` - Color tone (default: `'brand'`)
+- `label?: string` - Accessible label
+- `showLabel?: boolean` - Display percentage text (default: `false`)
+- `formatValue?: (value: number) => string` - Custom value formatter
+
+**Usage Example:**
+
+```tsx
+<CircularProgress
+  value={85}
+  size={120}
+  thickness={8}
+  tone="success"
+  showLabel
+  formatValue={(v) => `${v}%`}
+/>
+```
+
+### VerticalProgress
+
+Vertical progress bar (similar to LinearProgress but vertical orientation).
+
+**Props:** Same as LinearProgress
+
+**Example:**
+
+```tsx
+<VerticalProgress value={50} size="lg" />
+```
+
+### SegmentedProgress
+
+Progress bar divided into discrete segments.
+
+**Props:**
+
+- `value?: number` - Current progress value
+- `segments?: number` - Number of segments (default: `5`)
+- `tone?: ProgressTone` - Color tone
+- `size?: 'sm' | 'md' | 'lg'` - Bar size
+
+**Example:**
+
+```tsx
+<SegmentedProgress value={3} segments={5} />
+```
+
+### StepProgress
+
+Multi-step progress indicator showing completion status.
+
+**Props:**
+
+- `steps?: Array<{ label: string; completed?: boolean }>` - Step definitions
+- `currentStep?: number` - Current active step
+- `tone?: ProgressTone` - Color tone
+
+**Example:**
+
+```tsx
+<StepProgress
+  steps={[
+    { label: 'Step 1', completed: true },
+    { label: 'Step 2', completed: true },
+    { label: 'Step 3' }
+  ]}
+  currentStep={2}
+/>
+```
+
+### Spinner
+
+Animated loading spinner.
+
+**Props:**
+
+- `size?: number` - Size in pixels (default: `40`)
+- `tone?: ProgressTone` - Color tone
+- `ariaLabel?: string` - Accessible label
+
+**Example:**
+
+```tsx
+<Spinner size={48} tone="brand" ariaLabel="Loading" />
+```
+
+### ProgressTrack
+
+Base component for custom progress implementations.
+
+### ProgressLabel
+
+Label component for progress indicators.
+
+### ProgressLegend
+
+Legend component for displaying progress information.
+
+### ProgressStack
+
+Container for stacking multiple progress components.
+
+## Tones
+
+Available color tones (from design tokens):
+
+- `'brand'` - Primary brand color
+- `'success'` - Success/positive state
+- `'warning'` - Warning state
+- `'error'` - Error/negative state
+- `'info'` - Informational state
+
+## Styling
+
+The package uses CSS Modules and design tokens for styling. Import the styles:
+
+```tsx
+import '@asafarim/progress-bars/dist/style.css';
+```
+
+Styles are automatically scoped to components and use CSS custom properties from `@asafarim/design-tokens`.
+
+## Accessibility
+
+All components include:
+
+- Proper ARIA roles and attributes
+- Semantic HTML structure
+- Keyboard navigation support
+- Screen reader friendly labels
+- Color-independent progress indication
+
+**Example with accessibility:**
+
+```tsx
+<LinearProgress
+  value={50}
+  ariaLabel="Download progress"
+  ariaLabelledBy="progress-label"
+/>
+<div id="progress-label">Downloading file...</div>
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```tsx
+import type {
+  LinearProgressProps,
+  CircularProgressProps,
+  ProgressTone
+} from '@asafarim/progress-bars';
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT
+
+## Author
+
+Ali Safari <ali@asafarim.com>
+
+## Repository
+
+[GitHub](https://github.com/alisafari-it/progress-bars)
+
+## Homepage
+
+[Demo & Documentation](https://alisafari-it.github.io/progress-bars)

package/dist/components/CircularProgress/CircularProgress.d.ts

@@ -0,0 +1,11 @@
+import { ProgressTone } from '../ProgressTrack';
+export interface CircularProgressProps {
+    value?: number;
+    size?: number;
+    thickness?: number;
+    tone?: ProgressTone;
+    label?: string;
+    showLabel?: boolean;
+    formatValue?: (value: number) => string;
+}
+export declare function CircularProgress({ value, size, thickness, tone, label, showLabel, formatValue, }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CircularProgress/index.d.ts

@@ -0,0 +1,2 @@
+export { CircularProgress } from './CircularProgress';
+export type { CircularProgressProps } from './CircularProgress';

package/dist/components/LinearProgress/LinearProgress.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { ProgressTone } from '../ProgressTrack';
+export type LinearProgressSize = "sm" | "md" | "lg";
+export type LinearProgressVariant = "determinate" | "indeterminate";
+export interface LinearProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    variant?: LinearProgressVariant;
+    size?: LinearProgressSize;
+    tone?: ProgressTone;
+    /**
+     * Determinate only. Clamped to [min, max].
+     */
+    value?: number;
+    /**
+     * Determinate only.
+     */
+    min?: number;
+    /**
+     * Determinate only.
+     */
+    max?: number;
+    /**
+     * Show striped pattern on the progress bar.
+     */
+    striped?: boolean;
+    /**
+     * Animate the striped pattern (only if striped=true).
+     */
+    animated?: boolean;
+    /**
+     * Override track height in pixels.
+     */
+    thickness?: number;
+    /**
+     * Accessible name. Prefer ariaLabelledBy when a visible label exists.
+     */
+    ariaLabel?: string;
+    /**
+     * Accessible name via element id.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Indeterminate only. Defaults to "Loading".
+     */
+    ariaValueText?: string;
+}
+export declare const LinearProgress: React.ForwardRefExoticComponent<LinearProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/LinearProgress/index.d.ts

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

package/dist/components/ProgressLabel/ProgressLabel.d.ts

@@ -0,0 +1,9 @@
+export interface ProgressLabelProps {
+    label?: string;
+    value?: number;
+    format?: (value: number) => string;
+    showValue?: boolean;
+    srOnly?: boolean;
+    id?: string;
+}
+export declare function ProgressLabel({ label, value, format, showValue, srOnly, id, }: ProgressLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressLabel } from './ProgressLabel';
+export type { ProgressLabelProps } from './ProgressLabel';

package/dist/components/ProgressLegend/ProgressLegend.d.ts

@@ -0,0 +1,11 @@
+import { ProgressTone } from '../ProgressTrack';
+export interface ProgressLegendItem {
+    tone?: ProgressTone;
+    label: string;
+    value?: number;
+}
+export interface ProgressLegendProps {
+    items: ProgressLegendItem[];
+    layout?: 'row' | 'column';
+}
+export declare function ProgressLegend({ items, layout }: ProgressLegendProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressLegend/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressLegend } from './ProgressLegend';
+export type { ProgressLegendProps, ProgressLegendItem } from './ProgressLegend';

package/dist/components/ProgressStack/ProgressStack.d.ts

@@ -0,0 +1,12 @@
+import { ProgressTone } from '../ProgressTrack';
+export interface ProgressStackItem {
+    value: number;
+    tone?: ProgressTone;
+    label?: string;
+}
+export interface ProgressStackProps {
+    items: ProgressStackItem[];
+    height?: number;
+    label?: string;
+}
+export declare function ProgressStack({ items, height, label }: ProgressStackProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressStack/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressStack } from './ProgressStack';
+export type { ProgressStackProps, ProgressStackItem } from './ProgressStack';

package/dist/components/ProgressTrack/ProgressTrack.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+export type ProgressTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral' | 'info';
+export type ProgressVariant = 'linear' | 'circular' | 'vertical';
+export interface ProgressTrackProps {
+    className?: string;
+    style?: CSSProperties;
+    thickness?: number;
+    radius?: number;
+    variant?: ProgressVariant;
+    tone?: ProgressTone;
+    showBg?: boolean;
+    children?: ReactNode;
+}
+export declare function ProgressTrack({ className, style, thickness, radius, variant, tone, showBg, children, }: ProgressTrackProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressTrack/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressTrack } from './ProgressTrack';
+export type { ProgressTrackProps, ProgressTone, ProgressVariant } from './ProgressTrack';

package/dist/components/SegmentedProgress/SegmentedProgress.d.ts

@@ -0,0 +1,15 @@
+import { ProgressTone } from '../ProgressTrack';
+export interface SegmentedProgressSegment {
+    value: number;
+    tone?: ProgressTone;
+    label?: string;
+}
+export interface SegmentedProgressProps {
+    segments: SegmentedProgressSegment[];
+    max?: number;
+    height?: number;
+    gap?: number;
+    rounded?: boolean;
+    label?: string;
+}
+export declare function SegmentedProgress({ segments, max, height, gap, rounded, label, }: SegmentedProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SegmentedProgress/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedProgress } from './SegmentedProgress';
+export type { SegmentedProgressProps, SegmentedProgressSegment } from './SegmentedProgress';

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,8 @@
+import { ProgressTone } from '../ProgressTrack';
+export interface SpinnerProps {
+    size?: number;
+    thickness?: number;
+    tone?: ProgressTone;
+    label?: string;
+}
+export declare function Spinner({ size, thickness, tone, label, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';

package/dist/components/StepProgress/StepProgress.d.ts

@@ -0,0 +1,12 @@
+import { ProgressTone } from '../ProgressTrack';
+export interface StepProgressStep {
+    label: string;
+    tone?: ProgressTone;
+}
+export interface StepProgressProps {
+    steps: StepProgressStep[];
+    currentStep: number;
+    variant?: 'dots' | 'bars';
+    label?: string;
+}
+export declare function StepProgress({ steps, currentStep, variant, label, }: StepProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/StepProgress/index.d.ts

@@ -0,0 +1,2 @@
+export { StepProgress } from './StepProgress';
+export type { StepProgressProps, StepProgressStep } from './StepProgress';

package/dist/components/VerticalProgress/VerticalProgress.d.ts

@@ -0,0 +1,9 @@
+import { ProgressTone } from '../ProgressTrack';
+export interface VerticalProgressProps {
+    value?: number;
+    height?: number | string;
+    width?: number;
+    tone?: ProgressTone;
+    label?: string;
+}
+export declare function VerticalProgress({ value, height, width, tone, label, }: VerticalProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/VerticalProgress/index.d.ts

@@ -0,0 +1,2 @@
+export { VerticalProgress } from './VerticalProgress';
+export type { VerticalProgressProps } from './VerticalProgress';

package/dist/components/index.d.ts

@@ -0,0 +1,10 @@
+export * from './LinearProgress';
+export * from './ProgressTrack';
+export * from './ProgressLabel';
+export * from './Spinner';
+export * from './CircularProgress';
+export * from './VerticalProgress';
+export * from './SegmentedProgress';
+export * from './StepProgress';
+export * from './ProgressLegend';
+export * from './ProgressStack';

package/dist/index.cjs

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ae=require("react");var ye={exports:{}},V={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Ue;function $r(){if(Ue)return V;Ue=1;var i=ae,a=Symbol.for("react.element"),c=Symbol.for("react.fragment"),v=Object.prototype.hasOwnProperty,m=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function s(d,f,b){var h,E={},P=null,N=null;b!==void 0&&(P=""+b),f.key!==void 0&&(P=""+f.key),f.ref!==void 0&&(N=f.ref);for(h in f)v.call(f,h)&&!p.hasOwnProperty(h)&&(E[h]=f[h]);if(d&&d.defaultProps)for(h in f=d.defaultProps,f)E[h]===void 0&&(E[h]=f[h]);return{$$typeof:a,type:d,key:P,ref:N,props:E,_owner:m.current}}return V.Fragment=c,V.jsx=s,V.jsxs=s,V}var U={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Be;function wr(){return Be||(Be=1,process.env.NODE_ENV!=="production"&&function(){var i=ae,a=Symbol.for("react.element"),c=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),p=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),d=Symbol.for("react.context"),f=Symbol.for("react.forward_ref"),b=Symbol.for("react.suspense"),h=Symbol.for("react.suspense_list"),E=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),N=Symbol.for("react.offscreen"),B=Symbol.iterator,te="@@iterator";function se(e){if(e===null||typeof e!="object")return null;var r=B&&e[B]||e[te];return typeof r=="function"?r:null}var k=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function $(e){{for(var r=arguments.length,n=new Array(r>1?r-1:0),t=1;t<r;t++)n[t-1]=arguments[t];ie("error",e,n)}}function ie(e,r,n){{var t=k.ReactDebugCurrentFrame,_=t.getStackAddendum();_!==""&&(r+="%s",n=n.concat([_]));var g=n.map(function(l){return String(l)});g.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,g)}}var oe=!1,ce=!1,O=!1,S=!1,J=!1,q;q=Symbol.for("react.module.reference");function K(e){return!!(typeof e=="string"||typeof e=="function"||e===v||e===p||J||e===m||e===b||e===h||S||e===N||oe||ce||O||typeof e=="object"&&e!==null&&(e.$$typeof===P||e.$$typeof===E||e.$$typeof===s||e.$$typeof===d||e.$$typeof===f||e.$$typeof===q||e.getModuleId!==void 0))}function le(e,r,n){var t=e.displayName;if(t)return t;var _=r.displayName||r.name||"";return _!==""?n+"("+_+")":n}function $e(e){return e.displayName||"Context"}function D(e){if(e==null)return null;if(typeof e.tag=="number"&&$("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case v:return"Fragment";case c:return"Portal";case p:return"Profiler";case m:return"StrictMode";case b:return"Suspense";case h:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case d:var r=e;return $e(r)+".Consumer";case s:var n=e;return $e(n._context)+".Provider";case f:return le(e,e.render,"ForwardRef");case E:var t=e.displayName||null;return t!==null?t:D(e.type)||"Memo";case P:{var _=e,g=_._payload,l=_._init;try{return D(l(g))}catch{return null}}}return null}var F=Object.assign,L=0,we,xe,Ee,Re,je,Pe,ke;function Oe(){}Oe.__reactDisabledLog=!0;function Ke(){{if(L===0){we=console.log,xe=console.info,Ee=console.warn,Re=console.error,je=console.group,Pe=console.groupCollapsed,ke=console.groupEnd;var e={configurable:!0,enumerable:!0,value:Oe,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}L++}}function Ge(){{if(L--,L===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:F({},e,{value:we}),info:F({},e,{value:xe}),warn:F({},e,{value:Ee}),error:F({},e,{value:Re}),group:F({},e,{value:je}),groupCollapsed:F({},e,{value:Pe}),groupEnd:F({},e,{value:ke})})}L<0&&$("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var ue=k.ReactCurrentDispatcher,_e;function G(e,r,n){{if(_e===void 0)try{throw Error()}catch(_){var t=_.stack.trim().match(/\n( *(at )?)/);_e=t&&t[1]||""}return`
+`+_e+e}}var fe=!1,X;{var Xe=typeof WeakMap=="function"?WeakMap:Map;X=new Xe}function Te(e,r){if(!e||fe)return"";{var n=X.get(e);if(n!==void 0)return n}var t;fe=!0;var _=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var g;g=ue.current,ue.current=null,Ke();try{if(r){var l=function(){throw Error()};if(Object.defineProperty(l.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(l,[])}catch(R){t=R}Reflect.construct(e,[],l)}else{try{l.call()}catch(R){t=R}e.call(l.prototype)}}else{try{throw Error()}catch(R){t=R}e()}}catch(R){if(R&&t&&typeof R.stack=="string"){for(var o=R.stack.split(`
+`),x=t.stack.split(`
+`),y=o.length-1,w=x.length-1;y>=1&&w>=0&&o[y]!==x[w];)w--;for(;y>=1&&w>=0;y--,w--)if(o[y]!==x[w]){if(y!==1||w!==1)do if(y--,w--,w<0||o[y]!==x[w]){var j=`
+`+o[y].replace(" at new "," at ");return e.displayName&&j.includes("<anonymous>")&&(j=j.replace("<anonymous>",e.displayName)),typeof e=="function"&&X.set(e,j),j}while(y>=1&&w>=0);break}}}finally{fe=!1,ue.current=g,Ge(),Error.prepareStackTrace=_}var z=e?e.displayName||e.name:"",A=z?G(z):"";return typeof e=="function"&&X.set(e,A),A}function He(e,r,n){return Te(e,!1)}function Ze(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function H(e,r,n){if(e==null)return"";if(typeof e=="function")return Te(e,Ze(e));if(typeof e=="string")return G(e);switch(e){case b:return G("Suspense");case h:return G("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case f:return He(e.render);case E:return H(e.type,r,n);case P:{var t=e,_=t._payload,g=t._init;try{return H(g(_),r,n)}catch{}}}return""}var Y=Object.prototype.hasOwnProperty,Se={},Ce=k.ReactDebugCurrentFrame;function Z(e){if(e){var r=e._owner,n=H(e.type,e._source,r?r.type:null);Ce.setExtraStackFrame(n)}else Ce.setExtraStackFrame(null)}function Qe(e,r,n,t,_){{var g=Function.call.bind(Y);for(var l in e)if(g(e,l)){var o=void 0;try{if(typeof e[l]!="function"){var x=Error((t||"React class")+": "+n+" type `"+l+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[l]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw x.name="Invariant Violation",x}o=e[l](r,l,t,n,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(y){o=y}o&&!(o instanceof Error)&&(Z(_),$("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",t||"React class",n,l,typeof o),Z(null)),o instanceof Error&&!(o.message in Se)&&(Se[o.message]=!0,Z(_),$("Failed %s type: %s",n,o.message),Z(null))}}}var er=Array.isArray;function de(e){return er(e)}function rr(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,n=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n}}function nr(e){try{return Ne(e),!1}catch{return!0}}function Ne(e){return""+e}function De(e){if(nr(e))return $("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",rr(e)),Ne(e)}var Fe=k.ReactCurrentOwner,ar={key:!0,ref:!0,__self:!0,__source:!0},Ae,Ie;function tr(e){if(Y.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function sr(e){if(Y.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function ir(e,r){typeof e.ref=="string"&&Fe.current}function or(e,r){{var n=function(){Ae||(Ae=!0,$("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}}function cr(e,r){{var n=function(){Ie||(Ie=!0,$("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};n.isReactWarning=!0,Object.defineProperty(e,"ref",{get:n,configurable:!0})}}var lr=function(e,r,n,t,_,g,l){var o={$$typeof:a,type:e,key:r,ref:n,props:l,_owner:g};return o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(o,"_self",{configurable:!1,enumerable:!1,writable:!1,value:t}),Object.defineProperty(o,"_source",{configurable:!1,enumerable:!1,writable:!1,value:_}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o};function ur(e,r,n,t,_){{var g,l={},o=null,x=null;n!==void 0&&(De(n),o=""+n),sr(r)&&(De(r.key),o=""+r.key),tr(r)&&(x=r.ref,ir(r,_));for(g in r)Y.call(r,g)&&!ar.hasOwnProperty(g)&&(l[g]=r[g]);if(e&&e.defaultProps){var y=e.defaultProps;for(g in y)l[g]===void 0&&(l[g]=y[g])}if(o||x){var w=typeof e=="function"?e.displayName||e.name||"Unknown":e;o&&or(l,w),x&&cr(l,w)}return lr(e,o,x,_,t,Fe.current,l)}}var ve=k.ReactCurrentOwner,Me=k.ReactDebugCurrentFrame;function W(e){if(e){var r=e._owner,n=H(e.type,e._source,r?r.type:null);Me.setExtraStackFrame(n)}else Me.setExtraStackFrame(null)}var ge;ge=!1;function pe(e){return typeof e=="object"&&e!==null&&e.$$typeof===a}function qe(){{if(ve.current){var e=D(ve.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function _r(e){return""}var We={};function fr(e){{var r=qe();if(!r){var n=typeof e=="string"?e:e.displayName||e.name;n&&(r=`
+
+Check the top-level render call using <`+n+">.")}return r}}function ze(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var n=fr(r);if(We[n])return;We[n]=!0;var t="";e&&e._owner&&e._owner!==ve.current&&(t=" It was passed a child from "+D(e._owner.type)+"."),W(e),$('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',n,t),W(null)}}function Le(e,r){{if(typeof e!="object")return;if(de(e))for(var n=0;n<e.length;n++){var t=e[n];pe(t)&&ze(t,r)}else if(pe(e))e._store&&(e._store.validated=!0);else if(e){var _=se(e);if(typeof _=="function"&&_!==e.entries)for(var g=_.call(e),l;!(l=g.next()).done;)pe(l.value)&&ze(l.value,r)}}}function dr(e){{var r=e.type;if(r==null||typeof r=="string")return;var n;if(typeof r=="function")n=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===f||r.$$typeof===E))n=r.propTypes;else return;if(n){var t=D(r);Qe(n,e.props,"prop",t,e)}else if(r.PropTypes!==void 0&&!ge){ge=!0;var _=D(r);$("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",_||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&$("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function vr(e){{for(var r=Object.keys(e.props),n=0;n<r.length;n++){var t=r[n];if(t!=="children"&&t!=="key"){W(e),$("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",t),W(null);break}}e.ref!==null&&(W(e),$("Invalid attribute `ref` supplied to `React.Fragment`."),W(null))}}var Ye={};function Ve(e,r,n,t,_,g){{var l=K(e);if(!l){var o="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(o+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var x=_r();x?o+=x:o+=qe();var y;e===null?y="null":de(e)?y="array":e!==void 0&&e.$$typeof===a?(y="<"+(D(e.type)||"Unknown")+" />",o=" Did you accidentally export a JSX literal instead of a component?"):y=typeof e,$("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",y,o)}var w=ur(e,r,n,_,g);if(w==null)return w;if(l){var j=r.children;if(j!==void 0)if(t)if(de(j)){for(var z=0;z<j.length;z++)Le(j[z],e);Object.freeze&&Object.freeze(j)}else $("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Le(j,e)}if(Y.call(r,"key")){var A=D(e),R=Object.keys(r).filter(function(yr){return yr!=="key"}),me=R.length>0?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}";if(!Ye[A+me]){var hr=R.length>0?"{"+R.join(": ..., ")+": ...}":"{}";$(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,me,A,hr,A),Ye[A+me]=!0}}return e===v?vr(w):dr(w),w}}function gr(e,r,n){return Ve(e,r,n,!0)}function pr(e,r,n){return Ve(e,r,n,!1)}var mr=pr,br=gr;U.Fragment=v,U.jsx=mr,U.jsxs=br}()),U}process.env.NODE_ENV==="production"?ye.exports=$r():ye.exports=wr();var u=ye.exports;const xr="_root_aq7ts_1",Er="_brand_aq7ts_14",Rr="_success_aq7ts_18",jr="_warning_aq7ts_22",Pr="_danger_aq7ts_26",kr="_neutral_aq7ts_30",Or="_info_aq7ts_34",Tr="_track_aq7ts_38",Sr="_size_sm_aq7ts_49",Cr="_size_md_aq7ts_53",Nr="_size_lg_aq7ts_57",Dr="_bar_aq7ts_61",Fr="_striped_aq7ts_75",Ar="_animated_aq7ts_86",Ir="_variant_indeterminate_aq7ts_99",C={root:xr,brand:Er,success:Rr,warning:jr,danger:Pr,neutral:kr,info:Or,track:Tr,size_sm:Sr,size_md:Cr,size_lg:Nr,bar:Dr,striped:Fr,animated:Ar,"stripe-move":"_stripe-move_aq7ts_1",variant_indeterminate:Ir,"lp-indeterminate":"_lp-indeterminate_aq7ts_1"};function Je(i,a,c){return!Number.isFinite(i)||i<a?a:i>c?c:i}const Mr=ae.forwardRef(function({variant:a="determinate",size:c="md",tone:v="brand",value:m=0,min:p=0,max:s=100,striped:d=!1,animated:f=!1,thickness:b,ariaLabel:h,ariaLabelledBy:E,ariaValueText:P,className:N,style:B,...te},se){const k=a==="determinate",$=ae.useMemo(()=>{const S=Number.isFinite(p)?p:0,J=Number.isFinite(s)?s:S+100,q=J<=S?S+100:J,K=Je(Number(m),S,q),le=(K-S)/(q-S)*100;return{min:S,max:q,value:K,percent:Je(le,0,100)}},[m,p,s]),ie=[C.root,C[`size_${c}`],C[v],k?C.variant_determinate:C.variant_indeterminate,d&&C.striped,f&&C.animated,N].filter(Boolean).join(" "),oe=k?{width:`${$.percent}%`}:void 0,ce={...B,...b?{"--lp-track-height":`${b}px`}:{}},O={role:"progressbar"};return k?(O["aria-valuemin"]=$.min,O["aria-valuemax"]=$.max,O["aria-valuenow"]=$.value):O["aria-valuetext"]=P??"Loading",E?O["aria-labelledby"]=E:h?O["aria-label"]=h:O["aria-label"]="Progress",u.jsx("div",{ref:se,className:ie,style:ce,...O,...te,children:u.jsx("div",{className:C.track,style:b?{height:`${b}px`}:void 0,"aria-hidden":"true",children:u.jsx("div",{className:C.bar,style:oe})})})}),qr="_track_ddhgy_1",Wr="_linear_ddhgy_11",zr="_vertical_ddhgy_18",Lr="_circular_ddhgy_25",Yr="_noBg_ddhgy_29",Vr="_brand_ddhgy_33",Ur="_success_ddhgy_37",Br="_warning_ddhgy_41",Jr="_danger_ddhgy_45",Kr="_neutral_ddhgy_49",Gr="_info_ddhgy_53",Q={track:qr,linear:Wr,vertical:zr,circular:Lr,noBg:Yr,brand:Vr,success:Ur,warning:Br,danger:Jr,neutral:Kr,info:Gr};function Xr({className:i,style:a,thickness:c=8,radius:v,variant:m="linear",tone:p="brand",showBg:s=!0,children:d}){const f={...a,"--pb-track-thickness":`${c}px`,"--pb-track-radius":v?`${v}px`:void 0};return u.jsx("div",{className:`${Q.track} ${Q[m]} ${Q[p]} ${s?"":Q.noBg} ${i||""}`,style:f,children:d})}const Hr="_label_3ne5f_1",Zr="_text_3ne5f_10",Qr="_value_3ne5f_14",en="_srOnly_3ne5f_19",ee={label:Hr,text:Zr,value:Qr,srOnly:en};function rn({label:i,value:a,format:c=s=>`${Math.round(s)}%`,showValue:v=!0,srOnly:m=!1,id:p}){const s=a!==void 0&&v?c(a):null;return m?u.jsxs("span",{id:p,className:ee.srOnly,children:[i," ",s]}):u.jsxs("div",{id:p,className:ee.label,children:[i&&u.jsx("span",{className:ee.text,children:i}),s&&u.jsx("span",{className:ee.value,children:s})]})}const nn="_spinner_fdu71_1",an="_circle_fdu71_14",tn="_spin_fdu71_1",sn="_brand_fdu71_37",on="_success_fdu71_41",cn="_warning_fdu71_45",ln="_danger_fdu71_49",un="_neutral_fdu71_53",_n="_info_fdu71_57",be={spinner:nn,circle:an,spin:tn,brand:sn,success:on,warning:cn,danger:ln,neutral:un,info:_n};function fn({size:i=24,thickness:a=3,tone:c="brand",label:v="Loading"}){const m={"--spinner-size":`${i}px`,"--spinner-thickness":`${a}px`};return u.jsx("div",{className:`${be.spinner} ${be[c]}`,style:m,role:"status","aria-label":v,"aria-busy":"true",children:u.jsx("div",{className:be.circle})})}const dn="_container_cz85r_1",vn="_circular_cz85r_8",gn="_track_cz85r_18",pn="_progress_cz85r_23",mn="_indeterminate_cz85r_32",bn="_labelOverlay_cz85r_63",hn="_brand_cz85r_70",yn="_success_cz85r_74",$n="_warning_cz85r_78",wn="_danger_cz85r_82",xn="_neutral_cz85r_86",En="_info_cz85r_90",I={container:dn,circular:vn,track:gn,progress:pn,indeterminate:mn,"circular-rotate":"_circular-rotate_cz85r_1",labelOverlay:bn,brand:hn,success:yn,warning:$n,danger:wn,neutral:xn,info:En};function Rn({value:i,size:a=56,thickness:c=6,tone:v="brand",label:m,showLabel:p=!1,formatValue:s=d=>`${Math.round(d)}%`}){const d=i===void 0,f=(a-c)/2,b=2*Math.PI*f,h=d?0:Math.min(100,Math.max(0,i)),E=b-h/100*b,P={"--circular-size":`${a}px`,"--circular-thickness":`${c}px`,"--circular-circumference":`${b}px`,"--circular-offset":`${E}px`},N=d?{role:"status","aria-busy":"true"}:{role:"progressbar","aria-valuenow":h,"aria-valuemin":0,"aria-valuemax":100};return u.jsxs("div",{className:I.container,children:[u.jsxs("svg",{className:`${I.circular} ${I[v]} ${d?I.indeterminate:""}`,width:a,height:a,viewBox:`0 0 ${a} ${a}`,style:P,"aria-label":m,...N,children:[u.jsx("circle",{className:I.track,cx:a/2,cy:a/2,r:f,strokeWidth:c,fill:"none"}),u.jsx("circle",{className:I.progress,cx:a/2,cy:a/2,r:f,strokeWidth:c,fill:"none"})]}),p&&!d&&u.jsx("div",{className:I.labelOverlay,children:s(h)})]})}const jn="_vertical_1kj4o_1",Pn="_fill_1kj4o_16",kn="_indeterminate_1kj4o_27",On="_brand_1kj4o_58",Tn="_success_1kj4o_62",Sn="_warning_1kj4o_66",Cn="_danger_1kj4o_70",Nn="_neutral_1kj4o_74",Dn="_info_1kj4o_78",re={vertical:jn,fill:Pn,indeterminate:kn,"vertical-indeterminate":"_vertical-indeterminate_1kj4o_1",brand:On,success:Tn,warning:Sn,danger:Cn,neutral:Nn,info:Dn};function Fn({value:i,height:a=200,width:c=8,tone:v="brand",label:m}){const p=i===void 0,s=p?0:Math.min(100,Math.max(0,i)),d={"--vertical-height":typeof a=="number"?`${a}px`:a,"--vertical-width":`${c}px`,"--vertical-progress":`${s}%`},f=p?{role:"status","aria-busy":"true"}:{role:"progressbar","aria-valuenow":s,"aria-valuemin":0,"aria-valuemax":100};return u.jsx("div",{className:`${re.vertical} ${re[v]} ${p?re.indeterminate:""}`,style:d,"aria-label":m,...f,children:u.jsx("div",{className:re.fill})})}const An="_segmented_31o4i_1",In="_rounded_31o4i_13",Mn="_segment_31o4i_1",qn="_brand_31o4i_38",Wn="_success_31o4i_42",zn="_warning_31o4i_46",Ln="_danger_31o4i_50",Yn="_neutral_31o4i_54",Vn="_info_31o4i_58",ne={segmented:An,rounded:In,segment:Mn,brand:qn,success:Wn,warning:zn,danger:Ln,neutral:Yn,info:Vn};function Un({segments:i,max:a=100,height:c=10,gap:v=2,rounded:m=!0,label:p}){const s=i.reduce((b,h)=>b+h.value,0),d=i.map(b=>({...b,percentage:b.value/a*100})),f={"--segmented-height":`${c}px`,"--segmented-gap":`${v}px`};return u.jsx("div",{className:`${ne.segmented} ${m?ne.rounded:""}`,style:f,role:"progressbar","aria-label":p,"aria-valuenow":s,"aria-valuemin":0,"aria-valuemax":a,children:d.map((b,h)=>u.jsx("div",{className:`${ne.segment} ${ne[b.tone||"brand"]}`,style:{width:`${b.percentage}%`},title:b.label},h))})}const Bn="_stepProgress_huai5_1",Jn="_step_huai5_1",Kn="_indicator_huai5_16",Gn="_dots_huai5_21",Xn="_dot_huai5_21",Hn="_bars_huai5_30",Zn="_bar_huai5_30",Qn="_completed_huai5_38",ea="_current_huai5_47",ra="_label_huai5_59",na="_connector_huai5_76",aa="_brand_huai5_94",ta="_success_huai5_98",sa="_warning_huai5_102",ia="_danger_huai5_106",oa="_neutral_huai5_110",ca="_info_huai5_114",T={stepProgress:Bn,step:Jn,indicator:Kn,dots:Gn,dot:Xn,bars:Hn,bar:Zn,completed:Qn,current:ea,label:ra,connector:na,brand:aa,success:ta,warning:sa,danger:ia,neutral:oa,info:ca};function la({steps:i,currentStep:a,variant:c="dots",label:v}){var m;return u.jsx("div",{className:`${T.stepProgress} ${T[c]}`,role:"progressbar","aria-label":v,"aria-valuenow":a+1,"aria-valuemin":1,"aria-valuemax":i.length,"aria-valuetext":`Step ${a+1} of ${i.length}: ${((m=i[a])==null?void 0:m.label)||""}`,children:i.map((p,s)=>{const d=s<a?"completed":s===a?"current":"upcoming",f=p.tone||"brand";return u.jsxs("div",{className:`${T.step} ${T[d]}`,children:[u.jsxs("div",{className:`${T.indicator} ${T[f]}`,children:[c==="dots"&&u.jsx("div",{className:T.dot}),c==="bars"&&u.jsx("div",{className:T.bar})]}),u.jsx("div",{className:T.label,children:p.label}),s<i.length-1&&u.jsx("div",{className:T.connector})]},s)})})}const ua="_legend_14gfu_1",_a="_row_14gfu_6",fa="_column_14gfu_11",da="_item_14gfu_15",va="_swatch_14gfu_21",ga="_label_14gfu_28",pa="_value_14gfu_33",ma="_brand_14gfu_40",ba="_success_14gfu_44",ha="_warning_14gfu_48",ya="_danger_14gfu_52",$a="_neutral_14gfu_56",wa="_info_14gfu_60",M={legend:ua,row:_a,column:fa,item:da,swatch:va,label:ga,value:pa,brand:ma,success:ba,warning:ha,danger:ya,neutral:$a,info:wa};function xa({items:i,layout:a="row"}){return u.jsx("div",{className:`${M.legend} ${M[a]}`,children:i.map((c,v)=>u.jsxs("div",{className:M.item,children:[u.jsx("div",{className:`${M.swatch} ${M[c.tone||"brand"]}`}),u.jsx("span",{className:M.label,children:c.label}),c.value!==void 0&&u.jsxs("span",{className:M.value,children:[c.value,"%"]})]},v))})}const Ea="_stack_wk9ii_1",Ra="_item_wk9ii_12",ja="_brand_wk9ii_33",Pa="_success_wk9ii_37",ka="_warning_wk9ii_41",Oa="_danger_wk9ii_45",Ta="_neutral_wk9ii_49",Sa="_info_wk9ii_53",he={stack:Ea,item:Ra,brand:ja,success:Pa,warning:ka,danger:Oa,neutral:Ta,info:Sa};function Ca({items:i,height:a=12,label:c}){const v=i.reduce((s,d)=>s+d.value,0),m=i.map(s=>({...s,percentage:s.value/100*100})),p={"--stack-height":`${a}px`};return u.jsx("div",{className:he.stack,style:p,role:"progressbar","aria-label":c,"aria-valuenow":v,"aria-valuemin":0,"aria-valuemax":100,children:m.map((s,d)=>u.jsx("div",{className:`${he.item} ${he[s.tone||"brand"]}`,style:{width:`${s.percentage}%`},title:s.label},d))})}exports.CircularProgress=Rn;exports.LinearProgress=Mr;exports.ProgressLabel=rn;exports.ProgressLegend=xa;exports.ProgressStack=Ca;exports.ProgressTrack=Xr;exports.SegmentedProgress=Un;exports.Spinner=fn;exports.StepProgress=la;exports.VerticalProgress=Fn;

package/dist/index.d.ts

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