@ngrok/mantle 0.66.0 → 0.66.2

package/dist/progress.d.ts

@@ -1,47 +1,49 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { HTMLAttributes, ComponentProps } from 'react';
-import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { ComponentProps, HTMLAttributes } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
 
+//#region src/components/progress/types.d.ts
 type ValueType = number | "indeterminate";
-
+//#endregion
+//#region src/components/progress/progress-donut.d.ts
 type RemValue = `${number}rem`;
 type StrokeWidth = number | RemValue;
 type SvgAttributes = Omit<HTMLAttributes<SVGElement>, "viewBox" | "role" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "width" | "height">;
 type Props = SvgAttributes & {
-    /**
-     * The maximum value of the progress bar.
-     * This attribute describes how much work the task indicated by the progress element requires.
-     * The max attribute, if present, must have a value greater than 0. The default value is 100.
-     *
-     * @default 100
-     */
-    max?: number | undefined;
-    /**
-     * The width of the progress bar stroke.
-     * Note, we clamp the stroke width to a minimum of 1px and max of 12px since
-     * it is proportional to the viewbox size (0 0 32 32).
-     *
-     * @default 0.25rem (4px)
-     */
-    strokeWidth?: StrokeWidth;
-    /**
-     * The current value of the progress bar.
-     * This attribute specifies how much of the task that has been completed.
-     * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.
-     * If set to `"indeterminate"`, the progress bar is considered indeterminate.
-     *
-     * @default 0
-     */
-    value?: ValueType | undefined;
-    /**
-     * Controls the rotation speed of the indeterminate spinner state.
-     *
-     * Accepts a Tailwind `animation-duration-*` utility (e.g. `animation-duration-[2s]`).
-     *
-     * This prop is applied in addition to `animate-spin` to control the speed of the indeterminate spinner.
-     * @default `animation-duration-[15s]`
-     */
-    indeterminateRotationSpeed?: `animation-duration-${string}`;
+  /**
+   * The maximum value of the progress bar.
+   * This attribute describes how much work the task indicated by the progress element requires.
+   * The max attribute, if present, must have a value greater than 0. The default value is 100.
+   *
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * The width of the progress bar stroke.
+   * Note, we clamp the stroke width to a minimum of 1px and max of 12px since
+   * it is proportional to the viewbox size (0 0 32 32).
+   *
+   * @default 0.25rem (4px)
+   */
+  strokeWidth?: StrokeWidth;
+  /**
+   * The current value of the progress bar.
+   * This attribute specifies how much of the task that has been completed.
+   * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.
+   * If set to `"indeterminate"`, the progress bar is considered indeterminate.
+   *
+   * @default 0
+   */
+  value?: ValueType | undefined;
+  /**
+   * Controls the rotation speed of the indeterminate spinner state.
+   *
+   * Accepts a Tailwind `animation-duration-*` utility (e.g. `animation-duration-[2s]`).
+   *
+   * This prop is applied in addition to `animate-spin` to control the speed of the indeterminate spinner.
+   * @default `animation-duration-[15s]`
+   */
+  indeterminateRotationSpeed?: `animation-duration-${string}`;
 };
 type ProgressDonutIndicatorProps = Omit<ComponentProps<"g">, "children">;
 /**
@@ -64,69 +66,81 @@ type ProgressDonutIndicatorProps = Omit<ComponentProps<"g">, "children">;
  * ```
  */
 declare const ProgressDonut: {
-    /**
-     * A simple circular progress bar which shows the completion progress of a task.
-     *
-     * The indicator color is inherited via `currentColor`. Override the default
-     * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.
-     *
-     * @see https://mantle.ngrok.com/components/progress#api-progress-donut-root
-     *
-     * @example
-     * ```tsx
-     * <ProgressDonut.Root value={60}>
-     *   <ProgressDonut.Indicator />
-     * </ProgressDonut.Root>
-     *
-     * <ProgressDonut.Root value={60}>
-     *   <ProgressDonut.Indicator color="text-danger-600" />
-     * </ProgressDonut.Root>
-     * ```
-     */
-    readonly Root: {
-        ({ children, className, max: _max, strokeWidth: _strokeWidth, value: _value, indeterminateRotationSpeed, ...props }: Props): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-    /**
-     * The indicator for the circular progress bar.
-     *
-     * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator
-     *
-     * @example
-     * ```tsx
-     * <ProgressDonut.Root value={60}>
-     *   <ProgressDonut.Indicator />
-     * </ProgressDonut.Root>
-     *
-     * <ProgressDonut.Root value={60}>
-     *   <ProgressDonut.Indicator color="text-danger-600" />
-     * </ProgressDonut.Root>
-     * ```
-     */
-    readonly Indicator: {
-        ({ className, ...props }: ProgressDonutIndicatorProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
+  /**
+   * A simple circular progress bar which shows the completion progress of a task.
+   *
+   * The indicator color is inherited via `currentColor`. Override the default
+   * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.
+   *
+   * @see https://mantle.ngrok.com/components/progress#api-progress-donut-root
+   *
+   * @example
+   * ```tsx
+   * <ProgressDonut.Root value={60}>
+   *   <ProgressDonut.Indicator />
+   * </ProgressDonut.Root>
+   *
+   * <ProgressDonut.Root value={60}>
+   *   <ProgressDonut.Indicator color="text-danger-600" />
+   * </ProgressDonut.Root>
+   * ```
+   */
+  readonly Root: {
+    ({
+      children,
+      className,
+      max: _max,
+      strokeWidth: _strokeWidth,
+      value: _value,
+      indeterminateRotationSpeed,
+      ...props
+    }: Props): react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  /**
+   * The indicator for the circular progress bar.
+   *
+   * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator
+   *
+   * @example
+   * ```tsx
+   * <ProgressDonut.Root value={60}>
+   *   <ProgressDonut.Indicator />
+   * </ProgressDonut.Root>
+   *
+   * <ProgressDonut.Root value={60}>
+   *   <ProgressDonut.Indicator color="text-danger-600" />
+   * </ProgressDonut.Root>
+   * ```
+   */
+  readonly Indicator: {
+    ({
+      className,
+      ...props
+    }: ProgressDonutIndicatorProps): react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
 };
-
+//#endregion
+//#region src/components/progress/progress-bar.d.ts
 type RootProps = ComponentProps<"div"> & {
-    /**
-     * The maximum value of the progress bar.
-     * This attribute describes how much work the task indicated by the progress element requires.
-     * The max attribute, if present, must have a value greater than 0. The default value is 100.
-     *
-     * @default 100
-     */
-    max?: number | undefined;
-    /**
-     * The current value of the progress bar.
-     * This attribute specifies how much of the task that has been completed.
-     * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.
-     * If set to `"indeterminate"`, the progress bar is considered indeterminate. (for now there is no visual difference than 0)
-     *
-     * @default 0
-     */
-    value?: ValueType | undefined;
+  /**
+   * The maximum value of the progress bar.
+   * This attribute describes how much work the task indicated by the progress element requires.
+   * The max attribute, if present, must have a value greater than 0. The default value is 100.
+   *
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * The current value of the progress bar.
+   * This attribute specifies how much of the task that has been completed.
+   * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.
+   * If set to `"indeterminate"`, the progress bar is considered indeterminate. (for now there is no visual difference than 0)
+   *
+   * @default 0
+   */
+  value?: ValueType | undefined;
 };
 /**
  * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
@@ -152,9 +166,15 @@ type RootProps = ComponentProps<"div"> & {
  * </ProgressBar.Root>
  * ```
  */
-declare function Root({ className, children, max: _max, value: _value, ...props }: RootProps): react_jsx_runtime.JSX.Element;
+declare function Root({
+  className,
+  children,
+  max: _max,
+  value: _value,
+  ...props
+}: RootProps): react_jsx_runtime0.JSX.Element;
 declare namespace Root {
-    var displayName: string;
+  var displayName: string;
 }
 type IndicatorProps = ComponentProps<typeof ProgressPrimitive.Indicator>;
 /**
@@ -177,9 +197,13 @@ type IndicatorProps = ComponentProps<typeof ProgressPrimitive.Indicator>;
  * </ProgressBar.Root>
  * ```
  */
-declare function Indicator({ className, style, ...props }: IndicatorProps): react_jsx_runtime.JSX.Element;
+declare function Indicator({
+  className,
+  style,
+  ...props
+}: IndicatorProps): react_jsx_runtime0.JSX.Element;
 declare namespace Indicator {
-    var displayName: string;
+  var displayName: string;
 }
 /**
  * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
@@ -206,52 +230,53 @@ declare namespace Indicator {
  * ```
  */
 declare const ProgressBar: {
-    /**
-     * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
-     *
-     * A horizontal progress bar that shows the completion progress of a task.
-     * Use this component for linear progress indication.
-     *
-     * @see https://mantle.ngrok.com/components/progress#api-progress-bar
-     *
-     * @example
-     * ```tsx
-     * <ProgressBar.Root value={60}>
-     *   <ProgressBar.Indicator />
-     * </ProgressBar.Root>
-     *
-     * <ProgressBar.Root value={75} max={100}>
-     *   <ProgressBar.Indicator />
-     * </ProgressBar.Root>
-     *
-     * // Indeterminate progress
-     * <ProgressBar.Root value="indeterminate">
-     *   <ProgressBar.Indicator />
-     * </ProgressBar.Root>
-     * ```
-     */
-    readonly Root: typeof Root;
-    /**
-     * Displays the progress indicator, which visually represents the completion progress of a task.
-     *
-     * The visual indicator that shows the actual progress within the progress bar.
-     * This component should be used inside a ProgressBar.Root component.
-     *
-     * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator
-     *
-     * @example
-     * ```tsx
-     * <ProgressBar.Root value={60}>
-     *   <ProgressBar.Indicator />
-     * </ProgressBar.Root>
-     *
-     * // Custom styled indicator
-     * <ProgressBar.Root value={60}>
-     *   <ProgressBar.Indicator className="bg-success-600" />
-     * </ProgressBar.Root>
-     * ```
-     */
-    readonly Indicator: typeof Indicator;
+  /**
+   * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+   *
+   * A horizontal progress bar that shows the completion progress of a task.
+   * Use this component for linear progress indication.
+   *
+   * @see https://mantle.ngrok.com/components/progress#api-progress-bar
+   *
+   * @example
+   * ```tsx
+   * <ProgressBar.Root value={60}>
+   *   <ProgressBar.Indicator />
+   * </ProgressBar.Root>
+   *
+   * <ProgressBar.Root value={75} max={100}>
+   *   <ProgressBar.Indicator />
+   * </ProgressBar.Root>
+   *
+   * // Indeterminate progress
+   * <ProgressBar.Root value="indeterminate">
+   *   <ProgressBar.Indicator />
+   * </ProgressBar.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * Displays the progress indicator, which visually represents the completion progress of a task.
+   *
+   * The visual indicator that shows the actual progress within the progress bar.
+   * This component should be used inside a ProgressBar.Root component.
+   *
+   * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator
+   *
+   * @example
+   * ```tsx
+   * <ProgressBar.Root value={60}>
+   *   <ProgressBar.Indicator />
+   * </ProgressBar.Root>
+   *
+   * // Custom styled indicator
+   * <ProgressBar.Root value={60}>
+   *   <ProgressBar.Indicator className="bg-success-600" />
+   * </ProgressBar.Root>
+   * ```
+   */
+  readonly Indicator: typeof Indicator;
 };
-
+//#endregion
 export { ProgressBar, ProgressDonut };
+//# sourceMappingURL=progress.d.ts.map

package/dist/progress.js

@@ -1,2 +1,2 @@
-import{a as m}from"./chunk-PFXFESEN.js";import D from"clsx";import{createContext as $,useContext as A,useId as G,useMemo as L}from"react";function h(e,{min:t,max:o}){return Math.min(o,Math.max(t,e))}function l(e){return typeof e=="number"}function p(e,t){return l(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function x(e){return l(e)&&!Number.isNaN(e)&&e>0}import{jsx as c,jsxs as g}from"react/jsx-runtime";var P=100,b={max:P,strokeWidth:"0.25rem",value:0},V=$(b),C=({children:e,className:t,max:o=P,strokeWidth:r=4,value:a,indeterminateRotationSpeed:s,...n})=>{let i=x(o)?o:P,u=p(a,i)?a:a==null?0:"indeterminate",d=w(r??b.strokeWidth),N=l(u)?u:void 0,M=S(d),W=L(()=>({max:i,strokeWidth:d,value:u}),[i,d,u]);return c(V.Provider,{value:W,children:g("svg",{"aria-valuemax":i,"aria-valuemin":0,"aria-valuenow":N,className:m("size-6 text-gray-200 dark:text-gray-300",u==="indeterminate"&&["animate-spin",s??"animation-duration-[15s]"],t),"data-max":i,"data-min":0,"data-value":N,height:"100%",role:"progressbar",width:"100%",...n,children:[c("circle",{className:"[r:var(--radius)]",cx:"50%",cy:"50%",fill:"transparent",stroke:"currentColor",strokeWidth:d,style:{"--radius":M}}),e]})})};C.displayName="ProgressDonut";var B=.6,k=({className:e,...t})=>{let o=G(),r=A(V)??b,a=(r.value==="indeterminate"?B:r.value/r.max)*100,s=w(r.strokeWidth),n=S(s);return g("g",{className:m("text-accent-600",e),...t,children:[r.value==="indeterminate"&&c("defs",{children:g("linearGradient",{id:o,children:[c("stop",{className:"stop-opacity-100 stop-color-current",offset:"0%"}),c("stop",{className:"stop-opacity-0 stop-color-current",offset:"95%"})]})}),c("circle",{className:D("[r:var(--radius)]","origin-center"),cx:"50%",cy:"50%",fill:"transparent",pathLength:100,stroke:r.value==="indeterminate"?`url(#${o})`:"currentColor",strokeDasharray:100,strokeDashoffset:100-a,strokeLinecap:"round",strokeWidth:s,style:{"--radius":n},transform:"rotate(-90)"})]})};k.displayName="ProgressDonutIndicator";var E={Root:C,Indicator:k};function w(e){let t=4;if(e==null)return t;typeof e=="number"?t=e:e.endsWith("rem")?t=Number(e.replace("rem",""))*16:t=Number(e);let o=Number.isNaN(t)?4:t;return h(o,{min:1,max:12})}function S(e){return`calc(50% - ${e/2}px)`}import*as f from"@radix-ui/react-progress";import{createContext as H,useContext as O,useMemo as z}from"react";import{jsx as y}from"react/jsx-runtime";var v=100,X={max:v,value:0},I=H(X);function R({className:e,children:t,max:o=v,value:r,...a}){let s=x(o)?o:v,n=p(r,s)?r:r==null?0:"indeterminate",i=l(n)?n:void 0,u=z(()=>({max:s,value:n}),[s,n]);return y(I.Provider,{value:u,children:y(f.Root,{"data-slot":"progress",className:m("bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md",e),value:i,max:s,...a,children:t})})}R.displayName="Root";function T({className:e,style:t,...o}){let r=O(I),{max:a}=r,s=r.value==="indeterminate"?0:r.value,n=(a-s)/a*100;return y(f.Indicator,{"data-slot":"progress-indicator",className:m("bg-accent-600 h-full w-full flex-1 transition-all",e),style:{...t,transform:`translateX(-${n}%)`},...o})}T.displayName="Indicator";var j={Root:R,Indicator:T};export{j as ProgressBar,E as ProgressDonut};
+import{t as e}from"./cx-bKromGBh.js";import{createContext as t,useContext as n,useId as r,useMemo as i}from"react";import a from"clsx";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"@radix-ui/react-progress";function l(e,{min:t,max:n}){return Math.min(n,Math.max(t,e))}function u(e){return typeof e==`number`}function d(e,t){return u(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function f(e){return u(e)&&!Number.isNaN(e)&&e>0}const p={max:100,strokeWidth:`0.25rem`,value:0},m=t(p),h=({children:t,className:n,max:r=100,strokeWidth:a=4,value:c,indeterminateRotationSpeed:l,...h})=>{let g=f(r)?r:100,_=d(c,g)?c:c==null?0:`indeterminate`,b=v(a??p.strokeWidth),x=u(_)?_:void 0,S=y(b),C=i(()=>({max:g,strokeWidth:b,value:_}),[g,b,_]);return o(m.Provider,{value:C,children:s(`svg`,{"aria-valuemax":g,"aria-valuemin":0,"aria-valuenow":x,className:e(`size-6 text-gray-200 dark:text-gray-300`,_===`indeterminate`&&[`animate-spin`,l??`animation-duration-[15s]`],n),"data-max":g,"data-min":0,"data-value":x,height:`100%`,role:`progressbar`,width:`100%`,...h,children:[o(`circle`,{className:`[r:var(--radius)]`,cx:`50%`,cy:`50%`,fill:`transparent`,stroke:`currentColor`,strokeWidth:b,style:{"--radius":S}}),t]})})};h.displayName=`ProgressDonut`;const g=({className:t,...i})=>{let c=r(),l=n(m)??p,u=(l.value===`indeterminate`?.6:l.value/l.max)*100,d=v(l.strokeWidth),f=y(d);return s(`g`,{className:e(`text-accent-600`,t),...i,children:[l.value===`indeterminate`&&o(`defs`,{children:s(`linearGradient`,{id:c,children:[o(`stop`,{className:`stop-opacity-100 stop-color-current`,offset:`0%`}),o(`stop`,{className:`stop-opacity-0 stop-color-current`,offset:`95%`})]})}),o(`circle`,{className:a(`[r:var(--radius)]`,`origin-center`),cx:`50%`,cy:`50%`,fill:`transparent`,pathLength:100,stroke:l.value===`indeterminate`?`url(#${c})`:`currentColor`,strokeDasharray:100,strokeDashoffset:100-u,strokeLinecap:`round`,strokeWidth:d,style:{"--radius":f},transform:`rotate(-90)`})]})};g.displayName=`ProgressDonutIndicator`;const _={Root:h,Indicator:g};function v(e){let t=4;return e==null?t:(t=typeof e==`number`?e:e.endsWith(`rem`)?Number(e.replace(`rem`,``))*16:Number(e),l(Number.isNaN(t)?4:t,{min:1,max:12}))}function y(e){return`calc(50% - ${e/2}px)`}const b=t({max:100,value:0});function x({className:t,children:n,max:r=100,value:a,...s}){let l=f(r)?r:100,p=d(a,l)?a:a==null?0:`indeterminate`,m=u(p)?p:void 0,h=i(()=>({max:l,value:p}),[l,p]);return o(b.Provider,{value:h,children:o(c.Root,{"data-slot":`progress`,className:e(`bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md`,t),value:m,max:l,...s,children:n})})}x.displayName=`Root`;function S({className:t,style:r,...i}){let a=n(b),{max:s}=a,l=(s-(a.value===`indeterminate`?0:a.value))/s*100;return o(c.Indicator,{"data-slot":`progress-indicator`,className:e(`bg-accent-600 h-full w-full flex-1 transition-all`,t),style:{...r,transform:`translateX(-${l}%)`},...i})}S.displayName=`Indicator`;const C={Root:x,Indicator:S};export{C as ProgressBar,_ as ProgressDonut};
 //# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/progress/progress-donut.tsx","../src/components/progress/math.ts","../src/components/progress/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useContext, useId, useMemo } from \"react\";\nimport type { CSSProperties, ComponentProps, HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { clamp, isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext = createContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t\"viewBox\" | \"role\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\" | \"width\" | \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t *\n\t * @default 0.25rem (4px)\n\t */\n\tstrokeWidth?: StrokeWidth;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n\t/**\n\t * Controls the rotation speed of the indeterminate spinner state.\n\t *\n\t * Accepts a Tailwind `animation-duration-*` utility (e.g. `animation-duration-[2s]`).\n\t *\n\t * This prop is applied in addition to `animate-spin` to control the speed of the indeterminate spinner.\n\t * @default `animation-duration-[15s]`\n\t */\n\tindeterminateRotationSpeed?: `animation-duration-${string}`;\n};\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Root = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\tindeterminateRotationSpeed,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(_strokeWidth ?? defaultContextValue.strokeWidth);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\tconst radius = calcRadius(strokeWidthPx);\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t{/* biome-ignore lint/a11y/useFocusableInteractive: progress bars don't need to be focusable */}\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-6 text-gray-200 dark:text-gray-300\",\n\t\t\t\t\tvalue === \"indeterminate\" && [\n\t\t\t\t\t\t\"animate-spin\",\n\t\t\t\t\t\t// Default duration only if consumer hasn't set one.\n\t\t\t\t\t\t// Without this guard, both our `[15s]` and consumer overrides (e.g. `[2s]`)\n\t\t\t\t\t\t// end up in the DOM. Since tw-animate-css utilities aren't currently deduped by\n\t\t\t\t\t\t// tailwind-merge, whichever class Tailwind happened to emit last wins,\n\t\t\t\t\t\t// which isn't reliable.\n\t\t\t\t\t\tindeterminateRotationSpeed ?? \"animation-duration-[15s]\",\n\t\t\t\t\t],\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: this is a radial progress bar, which is possible by SVG\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tclassName=\"[r:var(--radius)]\"\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\nRoot.displayName = \"ProgressDonut\";\n\n/**\n * Length (value) of the progress indicator tail when the progress bar is indeterminate.\n */\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/**\n * The indicator for the circular progress bar.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Indicator = ({ className, ...props }: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useId();\n\tconst ctx = useContext(ProgressContext) ?? defaultContextValue;\n\tconst percentage =\n\t\t(ctx.value === \"indeterminate\" ? indeterminateTailPercent : ctx.value / ctx.max) * 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\tconst radius = calcRadius(strokeWidthPx);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value === \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"[r:var(--radius)]\", // set the circle radius to be the value of the calc'd CSS variable set on the style\n\t\t\t\t\t\"origin-center\",\n\t\t\t\t)}\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tstroke={ctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\nIndicator.displayName = \"ProgressDonutIndicator\";\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst ProgressDonut = {\n\t/**\n\t * A simple circular progress bar which shows the completion progress of a task.\n\t *\n\t * The indicator color is inherited via `currentColor`. Override the default\n\t * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The indicator for the circular progress bar.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressDonut,\n};\n\n/**\n * Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n *\n * @example\n * ```tsx\n * const strokeWidth1 = deriveStrokeWidthPx(8);\n * // Returns: 8\n *\n * const strokeWidth2 = deriveStrokeWidthPx(\"0.5rem\");\n * // Returns: 8 (0.5 * 16)\n *\n * const strokeWidth3 = deriveStrokeWidthPx(20);\n * // Returns: 12 (clamped to maximum)\n * ```\n */\nexport function deriveStrokeWidthPx(strokeWidth: number | string | undefined | null): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) * 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/**\n * Calculate the radius of the progress donut and indicator based on the stroke\n * width in pixels.\n */\nfunction calcRadius(strokeWidthPx: number) {\n\treturn `calc(50% - ${strokeWidthPx / 2}px)` as const;\n}\n","/**\n * Clamp a value between a minimum and maximum value.\n */\nfunction clamp(value: number, { min, max }: { min: number; max: number }): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/**\n * Check if a value is a number.\n */\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/**\n * Check if a value is a valid number within the range of 0 to `max`.\n */\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/**\n * Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n\nexport {\n\t//,\n\tclamp,\n\tisNumber,\n\tisValidValueNumber,\n\tisValidMaxNumber,\n};\n","\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { type ComponentProps, createContext, useContext, useMemo } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext = createContext<ProgressContextValue>(defaultContextValue);\n\ntype RootProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate. (for now there is no visual difference than 0)\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nfunction Root({ className, children, max: _max = defaultMax, value: _value, ...props }: RootProps) {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\"\n\t) satisfies ValueType;\n\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t<ProgressPrimitive.Root\n\t\t\t\tdata-slot=\"progress\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tvalue={valueNow}\n\t\t\t\tmax={max}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</ProgressPrimitive.Root>\n\t\t</ProgressContext.Provider>\n\t);\n}\nRoot.displayName = \"Root\";\n\ntype IndicatorProps = ComponentProps<typeof ProgressPrimitive.Indicator>;\n\n/**\n * Displays the progress indicator, which visually represents the completion progress of a task.\n *\n * The visual indicator that shows the actual progress within the progress bar.\n * This component should be used inside a ProgressBar.Root component.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Custom styled indicator\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator className=\"bg-success-600\" />\n * </ProgressBar.Root>\n * ```\n */\nfunction Indicator({ className, style, ...props }: IndicatorProps) {\n\tconst ctx = useContext(ProgressContext);\n\tconst { max } = ctx;\n\tconst value = ctx.value === \"indeterminate\" ? 0 : ctx.value;\n\tconst translatePercent = ((max - value) / max) * 100;\n\n\treturn (\n\t\t<ProgressPrimitive.Indicator\n\t\t\tdata-slot=\"progress-indicator\"\n\t\t\tclassName={cx(\"bg-accent-600 h-full w-full flex-1 transition-all\", className)}\n\t\t\tstyle={{ ...style, transform: `translateX(-${translatePercent}%)` }}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nIndicator.displayName = \"Indicator\";\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nconst ProgressBar = {\n\t/**\n\t * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n\t *\n\t * A horizontal progress bar that shows the completion progress of a task.\n\t * Use this component for linear progress indication.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * <ProgressBar.Root value={75} max={100}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Indeterminate progress\n\t * <ProgressBar.Root value=\"indeterminate\">\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Displays the progress indicator, which visually represents the completion progress of a task.\n\t *\n\t * The visual indicator that shows the actual progress within the progress bar.\n\t * This component should be used inside a ProgressBar.Root component.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Custom styled indicator\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator className=\"bg-success-600\" />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressBar,\n};\n"],"mappings":"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","names":["clsx","createContext","useContext","useId","useMemo","clamp","value","min","max","isNumber","isValidValueNumber","isValidMaxNumber","jsx","jsxs","defaultMax","defaultContextValue","ProgressContext","createContext","Root","children","className","_max","_strokeWidth","_value","indeterminateRotationSpeed","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","valueNow","isNumber","radius","calcRadius","ctx","useMemo","cx","indeterminateTailPercent","Indicator","gradientId","useId","useContext","percentage","clsx","ProgressDonut","deriveStrokeWidthPx","strokeWidth","value","stroke","clamp","calcRadius","strokeWidthPx","ProgressPrimitive","createContext","useContext","useMemo","jsx","defaultMax","defaultContextValue","ProgressContext","createContext","Root","className","children","_max","_value","props","max","isValidMaxNumber","value","isValidValueNumber","valueNow","isNumber","ctx","useMemo","cx","Indicator","style","useContext","translatePercent","ProgressBar"]}
+{"version":3,"file":"progress.js","names":["defaultMax","ProgressContext","Root","Indicator","clsx"],"sources":["../src/components/progress/math.ts","../src/components/progress/progress-donut.tsx","../src/components/progress/progress-bar.tsx"],"sourcesContent":["/**\n * Clamp a value between a minimum and maximum value.\n */\nfunction clamp(value: number, { min, max }: { min: number; max: number }): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/**\n * Check if a value is a number.\n */\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/**\n * Check if a value is a valid number within the range of 0 to `max`.\n */\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/**\n * Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n\nexport {\n\t//,\n\tclamp,\n\tisNumber,\n\tisValidValueNumber,\n\tisValidMaxNumber,\n};\n","import clsx from \"clsx\";\nimport { createContext, useContext, useId, useMemo } from \"react\";\nimport type { CSSProperties, ComponentProps, HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { clamp, isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext = createContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t\"viewBox\" | \"role\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\" | \"width\" | \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t *\n\t * @default 0.25rem (4px)\n\t */\n\tstrokeWidth?: StrokeWidth;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n\t/**\n\t * Controls the rotation speed of the indeterminate spinner state.\n\t *\n\t * Accepts a Tailwind `animation-duration-*` utility (e.g. `animation-duration-[2s]`).\n\t *\n\t * This prop is applied in addition to `animate-spin` to control the speed of the indeterminate spinner.\n\t * @default `animation-duration-[15s]`\n\t */\n\tindeterminateRotationSpeed?: `animation-duration-${string}`;\n};\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Root = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\tindeterminateRotationSpeed,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(_strokeWidth ?? defaultContextValue.strokeWidth);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\tconst radius = calcRadius(strokeWidthPx);\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t{/* biome-ignore lint/a11y/useFocusableInteractive: progress bars don't need to be focusable */}\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-6 text-gray-200 dark:text-gray-300\",\n\t\t\t\t\tvalue === \"indeterminate\" && [\n\t\t\t\t\t\t\"animate-spin\",\n\t\t\t\t\t\t// Default duration only if consumer hasn't set one.\n\t\t\t\t\t\t// Without this guard, both our `[15s]` and consumer overrides (e.g. `[2s]`)\n\t\t\t\t\t\t// end up in the DOM. Since tw-animate-css utilities aren't currently deduped by\n\t\t\t\t\t\t// tailwind-merge, whichever class Tailwind happened to emit last wins,\n\t\t\t\t\t\t// which isn't reliable.\n\t\t\t\t\t\tindeterminateRotationSpeed ?? \"animation-duration-[15s]\",\n\t\t\t\t\t],\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: this is a radial progress bar, which is possible by SVG\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tclassName=\"[r:var(--radius)]\"\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\nRoot.displayName = \"ProgressDonut\";\n\n/**\n * Length (value) of the progress indicator tail when the progress bar is indeterminate.\n */\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/**\n * The indicator for the circular progress bar.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Indicator = ({ className, ...props }: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useId();\n\tconst ctx = useContext(ProgressContext) ?? defaultContextValue;\n\tconst percentage =\n\t\t(ctx.value === \"indeterminate\" ? indeterminateTailPercent : ctx.value / ctx.max) * 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\tconst radius = calcRadius(strokeWidthPx);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value === \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"[r:var(--radius)]\", // set the circle radius to be the value of the calc'd CSS variable set on the style\n\t\t\t\t\t\"origin-center\",\n\t\t\t\t)}\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tstroke={ctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\nIndicator.displayName = \"ProgressDonutIndicator\";\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst ProgressDonut = {\n\t/**\n\t * A simple circular progress bar which shows the completion progress of a task.\n\t *\n\t * The indicator color is inherited via `currentColor`. Override the default\n\t * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The indicator for the circular progress bar.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressDonut,\n};\n\n/**\n * Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n *\n * @example\n * ```tsx\n * const strokeWidth1 = deriveStrokeWidthPx(8);\n * // Returns: 8\n *\n * const strokeWidth2 = deriveStrokeWidthPx(\"0.5rem\");\n * // Returns: 8 (0.5 * 16)\n *\n * const strokeWidth3 = deriveStrokeWidthPx(20);\n * // Returns: 12 (clamped to maximum)\n * ```\n */\nexport function deriveStrokeWidthPx(strokeWidth: number | string | undefined | null): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) * 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/**\n * Calculate the radius of the progress donut and indicator based on the stroke\n * width in pixels.\n */\nfunction calcRadius(strokeWidthPx: number) {\n\treturn `calc(50% - ${strokeWidthPx / 2}px)` as const;\n}\n","\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { type ComponentProps, createContext, useContext, useMemo } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext = createContext<ProgressContextValue>(defaultContextValue);\n\ntype RootProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate. (for now there is no visual difference than 0)\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nfunction Root({ className, children, max: _max = defaultMax, value: _value, ...props }: RootProps) {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\"\n\t) satisfies ValueType;\n\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t<ProgressPrimitive.Root\n\t\t\t\tdata-slot=\"progress\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tvalue={valueNow}\n\t\t\t\tmax={max}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</ProgressPrimitive.Root>\n\t\t</ProgressContext.Provider>\n\t);\n}\nRoot.displayName = \"Root\";\n\ntype IndicatorProps = ComponentProps<typeof ProgressPrimitive.Indicator>;\n\n/**\n * Displays the progress indicator, which visually represents the completion progress of a task.\n *\n * The visual indicator that shows the actual progress within the progress bar.\n * This component should be used inside a ProgressBar.Root component.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Custom styled indicator\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator className=\"bg-success-600\" />\n * </ProgressBar.Root>\n * ```\n */\nfunction Indicator({ className, style, ...props }: IndicatorProps) {\n\tconst ctx = useContext(ProgressContext);\n\tconst { max } = ctx;\n\tconst value = ctx.value === \"indeterminate\" ? 0 : ctx.value;\n\tconst translatePercent = ((max - value) / max) * 100;\n\n\treturn (\n\t\t<ProgressPrimitive.Indicator\n\t\t\tdata-slot=\"progress-indicator\"\n\t\t\tclassName={cx(\"bg-accent-600 h-full w-full flex-1 transition-all\", className)}\n\t\t\tstyle={{ ...style, transform: `translateX(-${translatePercent}%)` }}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nIndicator.displayName = \"Indicator\";\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nconst ProgressBar = {\n\t/**\n\t * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n\t *\n\t * A horizontal progress bar that shows the completion progress of a task.\n\t * Use this component for linear progress indication.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * <ProgressBar.Root value={75} max={100}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Indeterminate progress\n\t * <ProgressBar.Root value=\"indeterminate\">\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Displays the progress indicator, which visually represents the completion progress of a task.\n\t *\n\t * The visual indicator that shows the actual progress within the progress bar.\n\t * This component should be used inside a ProgressBar.Root component.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Custom styled indicator\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator className=\"bg-success-600\" />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressBar,\n};\n"],"mappings":"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"}