@ngrok/mantle 0.1.32 → 0.1.33

package/dist/progress.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+import { W as WithStyleProps } from './with-style-props-VnLWm0Yd.js';
+
+type RemValue = `${number}rem`;
+type StrokeWidth = number | RemValue;
+type SvgAttributes = Omit<HTMLAttributes<SVGElement>, "viewBox" | "role" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow">;
+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.
+     *
+     * @default 0
+     */
+    value?: number | undefined;
+};
+/**
+ * A simple circular progress bar.
+ */
+declare const ProgressDonut: ({ children, className, max: _max, strokeWidth: _strokeWidth, style, value: _value, ...props }: Props) => react_jsx_runtime.JSX.Element;
+/**
+ * The indicator for the circular progress bar.
+ */
+declare const ProgressDonutIndicator: ({ className, style }: WithStyleProps) => react_jsx_runtime.JSX.Element;
+
+export { ProgressDonut, ProgressDonutIndicator };

package/dist/progress.js

@@ -0,0 +1,2 @@
+import{a as l}from"./chunk-A5H52ODC.js";import P from"clsx";import{createContext as h,useContext as V,useMemo as W}from"react";import{jsx as a,jsxs as A}from"react/jsx-runtime";var b=100,n=32,g=h({max:b,radius:16,strokeWidth:"0.25rem",value:0}),S=({children:e,className:r,max:t=b,strokeWidth:s=4,style:i,value:d,...k})=>{let o=$(t)?t:b,u=D(d,o)?d:0,m=M(s),p=v(m),c=C(m),f=x(u)?u:void 0,y=W(()=>({max:o,radius:c,strokeWidth:p,value:u}),[o,c,p,u]);return a(g.Provider,{value:y,children:A("svg",{"aria-valuemax":o,"aria-valuemin":0,"aria-valuenow":f,className:P("-rotate-90 transform-gpu",l("size-6 text-gray-200",r)),"data-max":o,"data-min":0,"data-value":f,role:"progressbar",viewBox:`0 0 ${n} ${n}`,...k,children:[a("circle",{cx:n/2,cy:n/2,fill:"transparent",r:c,stroke:"currentColor",strokeWidth:v(m)}),e]})})},w=({className:e,style:r})=>{let t=V(g),s=t.value/t.max,i=R(t.radius);return a("g",{className:l("text-accent-600",e),style:r,children:a("circle",{cx:n/2,cy:n/2,fill:"transparent",r:t.radius,stroke:"currentColor",strokeDasharray:i,strokeDashoffset:`${(1-s)*i}px`,strokeLinecap:"round",strokeWidth:t.strokeWidth})})};function C(e){let r=Number.isNaN(e)?4:e,t=N(r,{min:1,max:16});return(n-t)/2}function N(e,{min:r,max:t}){return Math.min(t,Math.max(r,e))}function v(e){return`${e/16}rem`}function M(e){let r=4;if(e==null)return r;typeof e=="number"?r=e:e.endsWith("rem")?r=Number(e.replace("rem",""))*16:r=Number(e);let t=Number.isNaN(r)?4:r;return N(t,{min:1,max:12})}function R(e){return 2*Math.PI*e}function x(e){return typeof e=="number"}function D(e,r){return x(e)&&!Number.isNaN(e)&&e<=r&&e>=0}function $(e){return x(e)&&!Number.isNaN(e)&&e>0}export{S as ProgressDonut,w as ProgressDonutIndicator};
+//# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/progress/src/progress-donut.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../cx\";\nimport type { WithStyleProps } from \"../../types\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t\"viewBox\" | \"role\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\"\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 *\n\t * @default 0\n\t */\n\tvalue?: number | undefined; // | null; // in the future we'll support null for `indeterminate` state\n};\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\n/**\n * The size of the viewbox for the progress bar svg.\n */\nconst viewboxSize = 32;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tradius: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: number;\n};\n\nconst ProgressContext = createContext<ProgressContextValue>({\n\tmax: defaultMax,\n\tradius: 16,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n});\n\n/**\n * A simple circular progress bar.\n */\nconst ProgressDonut = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tstyle,\n\tvalue: _value,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = isValidValueNumber(_value, max) ? _value : 0; // in the future we'll support `null` for `indeterminate` state\n\tconst strokeWidthPx = deriveStrokeWidthPx(_strokeWidth);\n\tconst strokeWidthRem = pxToRem(strokeWidthPx);\n\tconst radius = circleRadius(strokeWidthPx);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tradius,\n\t\t\tstrokeWidth: strokeWidthRem,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, radius, strokeWidthRem, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\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(\"-rotate-90 transform-gpu\", cx(\"size-6 text-gray-200\", className))}\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\trole=\"progressbar\"\n\t\t\t\tviewBox={`0 0 ${viewboxSize} ${viewboxSize}`}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tcx={viewboxSize / 2}\n\t\t\t\t\tcy={viewboxSize / 2}\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tr={radius}\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={pxToRem(strokeWidthPx)}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\n\n/**\n * The indicator for the circular progress bar.\n */\nconst ProgressDonutIndicator = ({ className, style }: WithStyleProps) => {\n\tconst ctx = useContext(ProgressContext);\n\tconst progressValue = ctx.value / ctx.max;\n\tconst circumferenceValue = circumference(ctx.radius);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} style={style}>\n\t\t\t<circle\n\t\t\t\tcx={viewboxSize / 2}\n\t\t\t\tcy={viewboxSize / 2}\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tr={ctx.radius}\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeDasharray={circumferenceValue}\n\t\t\t\tstrokeDashoffset={`${(1 - progressValue) * circumferenceValue}px`}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={ctx.strokeWidth}\n\t\t\t/>\n\t\t</g>\n\t);\n};\n\nexport {\n\t//,\n\tProgressDonut,\n\tProgressDonutIndicator,\n};\n\n/**\n * Calculate the radius of a circle given the stroke width.\n * The radius is calculated as half the viewbox size minus half the stroke width\n * so that the stroke doesn't clamp within the viewbox.\n */\nfunction circleRadius(strokeWidth: number): number {\n\tconst value = Number.isNaN(strokeWidth) ? 4 : strokeWidth;\n\t// clamp the stroke width to a minimum of 1 and max of 16 non-inclusive on both sides\n\tconst clampedStrokeWidth = clamp(value, { min: 1, max: 16 });\n\treturn (viewboxSize - clampedStrokeWidth) / 2;\n}\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 * Convert a pixel value to a rem value.\n */\nfunction pxToRem(value: number): RemValue {\n\treturn `${value / 16}rem` as RemValue;\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 */\nexport function deriveStrokeWidthPx(strokeWidth: number | string | undefined): 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 circumference of a circle given its radius.\n * C = 2πr\n */\nfunction circumference(radius: number) {\n\treturn 2 * Math.PI * radius;\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"],"mappings":"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","names":["clsx","createContext","useContext","useMemo","jsx","jsxs","defaultMax","viewboxSize","ProgressContext","createContext","ProgressDonut","children","className","_max","_strokeWidth","style","_value","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","strokeWidthRem","pxToRem","radius","circleRadius","valueNow","isNumber","ctx","useMemo","clsx","cx","ProgressDonutIndicator","useContext","progressValue","circumferenceValue","circumference","circleRadius","strokeWidth","value","clampedStrokeWidth","clamp","viewboxSize","min","max","pxToRem","deriveStrokeWidthPx","stroke","circumference","radius","isNumber","isValidValueNumber","isValidMaxNumber"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -183,6 +183,10 @@
       "import": "./dist/popover.js",
       "types": "./dist/popover.d.ts"
     },
+    "./progress": {
+      "import": "./dist/progress.js",
+      "types": "./dist/progress.d.ts"
+    },
     "./radio-group": {
       "import": "./dist/radio-group.js",
       "types": "./dist/radio-group.d.ts"