@ngrok/mantle 0.52.1 → 0.52.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/progress.d.ts +10 -1
- package/dist/progress.js +1 -1
- package/dist/progress.js.map +1 -1
- package/package.json +2 -2
package/dist/progress.d.ts
CHANGED
|
@@ -33,6 +33,15 @@ type Props = SvgAttributes & {
|
|
|
33
33
|
* @default 0
|
|
34
34
|
*/
|
|
35
35
|
value?: ValueType | undefined;
|
|
36
|
+
/**
|
|
37
|
+
* Controls the rotation speed of the indeterminate spinner state.
|
|
38
|
+
*
|
|
39
|
+
* Accepts a Tailwind `animation-duration-*` utility (e.g. `animation-duration-[2s]`).
|
|
40
|
+
*
|
|
41
|
+
* This prop is applied in addition to `animate-spin` to control the speed of the indeterminate spinner.
|
|
42
|
+
* @default `animation-duration-[15s]`
|
|
43
|
+
*/
|
|
44
|
+
indeterminateRotationSpeed?: `animation-duration-${string}`;
|
|
36
45
|
};
|
|
37
46
|
type ProgressDonutIndicatorProps = Omit<ComponentProps<"g">, "children">;
|
|
38
47
|
/**
|
|
@@ -75,7 +84,7 @@ declare const ProgressDonut: {
|
|
|
75
84
|
* ```
|
|
76
85
|
*/
|
|
77
86
|
readonly Root: {
|
|
78
|
-
({ children, className, max: _max, strokeWidth: _strokeWidth, value: _value, ...props }: Props): react_jsx_runtime.JSX.Element;
|
|
87
|
+
({ children, className, max: _max, strokeWidth: _strokeWidth, value: _value, indeterminateRotationSpeed, ...props }: Props): react_jsx_runtime.JSX.Element;
|
|
79
88
|
displayName: string;
|
|
80
89
|
};
|
|
81
90
|
/**
|
package/dist/progress.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as m}from"./chunk-AZ56JGNY.js";import
|
|
1
|
+
import{a as m}from"./chunk-AZ56JGNY.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};
|
|
2
2
|
//# sourceMappingURL=progress.js.map
|
package/dist/progress.js.map
CHANGED
|
@@ -1 +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 {\n\tclamp,\n\tisNumber,\n\tisValidMaxNumber,\n\tisValidValueNumber,\n} 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 =\n\tcreateContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t| \"viewBox\"\n\t| \"role\"\n\t| \"aria-valuemax\"\n\t| \"aria-valuemin\"\n\t| \"aria-valuenow\"\n\t| \"width\"\n\t| \"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};\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\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(\n\t\t_strokeWidth ?? defaultContextValue.strokeWidth,\n\t);\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={clsx(\n\t\t\t\t\tvalue === \"indeterminate\" && \"animation-duration-[15s] animate-spin\",\n\t\t\t\t\tcx(\"size-6 text-gray-200 dark:text-gray-300\", className),\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\"\n\t\t\t? indeterminateTailPercent\n\t\t\t: 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={\n\t\t\t\t\tctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"\n\t\t\t\t}\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(\n\tstrokeWidth: number | string | undefined | null,\n): 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(\n\tvalue: number,\n\t{ min, max }: { min: number; max: number },\n): 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 =\n\tcreateContext<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({\n\tclassName,\n\tchildren,\n\tmax: _max = defaultMax,\n\tvalue: _value,\n\t...props\n}: RootProps) {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"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(\n\t\t\t\t\"bg-accent-600 h-full w-full flex-1 transition-all\",\n\t\t\t\tclassName,\n\t\t\t)}\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","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","valueNow","isNumber","radius","calcRadius","ctx","useMemo","clsx","cx","indeterminateTailPercent","Indicator","gradientId","useId","useContext","percentage","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"]}
|
|
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 {\n\tclamp,\n\tisNumber,\n\tisValidMaxNumber,\n\tisValidValueNumber,\n} 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 =\n\tcreateContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t| \"viewBox\"\n\t| \"role\"\n\t| \"aria-valuemax\"\n\t| \"aria-valuemin\"\n\t| \"aria-valuenow\"\n\t| \"width\"\n\t| \"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)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(\n\t\t_strokeWidth ?? defaultContextValue.strokeWidth,\n\t);\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\"\n\t\t\t? indeterminateTailPercent\n\t\t\t: 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={\n\t\t\t\t\tctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"\n\t\t\t\t}\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(\n\tstrokeWidth: number | string | undefined | null,\n): 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(\n\tvalue: number,\n\t{ min, max }: { min: number; max: number },\n): 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 =\n\tcreateContext<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({\n\tclassName,\n\tchildren,\n\tmax: _max = defaultMax,\n\tvalue: _value,\n\t...props\n}: RootProps) {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"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(\n\t\t\t\t\"bg-accent-600 h-full w-full flex-1 transition-all\",\n\t\t\t\tclassName,\n\t\t\t)}\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"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "mantle is ngrok's UI library and design system.",
|
|
4
4
|
"author": "ngrok",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "0.52.
|
|
6
|
+
"version": "0.52.2",
|
|
7
7
|
"homepage": "https://mantle.ngrok.com",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"@types/prismjs": "1.26.5",
|
|
59
59
|
"@types/react": "18.3.24",
|
|
60
60
|
"@types/react-dom": "18.3.7",
|
|
61
|
-
"browserslist": "4.25.
|
|
61
|
+
"browserslist": "4.25.4",
|
|
62
62
|
"date-fns": "4.1.0",
|
|
63
63
|
"jsdom": "26.1.0",
|
|
64
64
|
"react": "18.3.1",
|