@nucleux/md3-progress 0.5.0 → 0.7.0
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/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -44,7 +44,7 @@ var Md3LinearProgress = React__namespace.forwardRef(
|
|
|
44
44
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
45
45
|
"div",
|
|
46
46
|
{
|
|
47
|
-
className: utils.cn("h-full rounded-full bg-md-primary transition-[width]", indeterminate && "animate-pulse"),
|
|
47
|
+
className: utils.cn("h-full rounded-full bg-md-primary transition-[width]", indeterminate && "animate-pulse motion-reduce:animate-none"),
|
|
48
48
|
style: { width: `${pct}%` }
|
|
49
49
|
}
|
|
50
50
|
)
|
|
@@ -69,7 +69,7 @@ var Md3CircularProgress = React__namespace.forwardRef(
|
|
|
69
69
|
"aria-valuenow": indeterminate ? void 0 : pct,
|
|
70
70
|
"aria-valuemin": indeterminate ? void 0 : 0,
|
|
71
71
|
"aria-valuemax": indeterminate ? void 0 : 100,
|
|
72
|
-
className: utils.cn("inline-flex", indeterminate && "animate-spin", className),
|
|
72
|
+
className: utils.cn("inline-flex", indeterminate && "animate-spin motion-reduce:animate-none", className),
|
|
73
73
|
style: { width: size, height: size },
|
|
74
74
|
...props,
|
|
75
75
|
children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,IAAM,iBAAA,GAA0BA,gBAAA,CAAA,UAAA;AAAA,EACrC,CAAC,EAAE,KAAA,EAAO,SAAA,EAAW,YAAA,EAAc,YAAY,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC5E,IAAA,MAAM,gBAAgB,KAAA,KAAU,MAAA;AAChC,IAAA,MAAM,GAAA,GAAM,aAAA,GAAgB,EAAA,GAAK,IAAA,CAAK,GAAA,CAAI,KAAK,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAC,CAAA;AACjE,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,aAAA;AAAA,QACL,YAAA,EAAY,SAAA;AAAA,QACZ,eAAA,EAAe,gBAAgB,MAAA,GAAY,GAAA;AAAA,QAC3C,eAAA,EAAe,gBAAgB,MAAA,GAAY,CAAA;AAAA,QAC3C,eAAA,EAAe,gBAAgB,MAAA,GAAY,GAAA;AAAA,QAC3C,SAAA,EAAWC,QAAA,CAAG,+DAAA,EAAiE,SAAS,CAAA;AAAA,QACvF,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWC,QAAA,CAAG,sDAAA,EAAwD,aAAA,IAAiB,
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,IAAM,iBAAA,GAA0BA,gBAAA,CAAA,UAAA;AAAA,EACrC,CAAC,EAAE,KAAA,EAAO,SAAA,EAAW,YAAA,EAAc,YAAY,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC5E,IAAA,MAAM,gBAAgB,KAAA,KAAU,MAAA;AAChC,IAAA,MAAM,GAAA,GAAM,aAAA,GAAgB,EAAA,GAAK,IAAA,CAAK,GAAA,CAAI,KAAK,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAC,CAAA;AACjE,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,aAAA;AAAA,QACL,YAAA,EAAY,SAAA;AAAA,QACZ,eAAA,EAAe,gBAAgB,MAAA,GAAY,GAAA;AAAA,QAC3C,eAAA,EAAe,gBAAgB,MAAA,GAAY,CAAA;AAAA,QAC3C,eAAA,EAAe,gBAAgB,MAAA,GAAY,GAAA;AAAA,QAC3C,SAAA,EAAWC,QAAA,CAAG,+DAAA,EAAiE,SAAS,CAAA;AAAA,QACvF,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWC,QAAA,CAAG,sDAAA,EAAwD,aAAA,IAAiB,0CAA0C,CAAA;AAAA,YACjI,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA;AAAI;AAAA;AAC5B;AAAA,KACF;AAAA,EAEJ;AACF;AACA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;AAYzB,IAAM,mBAAA,GAA4BF,gBAAA,CAAA,UAAA;AAAA,EACvC,CAAC,EAAE,KAAA,EAAO,IAAA,GAAO,IAAI,WAAA,GAAc,CAAA,EAAG,SAAA,EAAW,YAAA,EAAc,SAAA,GAAY,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AACxG,IAAA,MAAM,gBAAgB,KAAA,KAAU,MAAA;AAChC,IAAA,MAAM,CAAA,GAAA,CAAK,OAAO,WAAA,IAAe,CAAA;AACjC,IAAA,MAAM,CAAA,GAAI,CAAA,GAAI,IAAA,CAAK,EAAA,GAAK,CAAA;AACxB,IAAA,MAAM,GAAA,GAAM,aAAA,GAAgB,EAAA,GAAK,IAAA,CAAK,GAAA,CAAI,KAAK,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAC,CAAA;AACjE,IAAA,MAAM,MAAA,GAAS,CAAA,GAAK,GAAA,GAAM,GAAA,GAAO,CAAA;AAEjC,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,aAAA;AAAA,QACL,YAAA,EAAY,SAAA;AAAA,QACZ,eAAA,EAAe,gBAAgB,MAAA,GAAY,GAAA;AAAA,QAC3C,eAAA,EAAe,gBAAgB,MAAA,GAAY,CAAA;AAAA,QAC3C,eAAA,EAAe,gBAAgB,MAAA,GAAY,GAAA;AAAA,QAC3C,SAAA,EAAWC,QAAA,CAAG,aAAA,EAAe,aAAA,IAAiB,2CAA2C,SAAS,CAAA;AAAA,QAClG,KAAA,EAAO,EAAE,KAAA,EAAO,IAAA,EAAM,QAAQ,IAAA,EAAK;AAAA,QAClC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,IAAA,EAAM,MAAA,EAAQ,IAAA,EAAM,OAAA,EAAS,CAAA,IAAA,EAAO,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAC1D,QAAA,EAAA;AAAA,0BAAAF,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,CAAA;AAAA,cACA,IAAA,EAAK,MAAA;AAAA,cACL,MAAA,EAAO,mCAAA;AAAA,cACP;AAAA;AAAA,WACF;AAAA,0BACAA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,IAAI,IAAA,GAAO,CAAA;AAAA,cACX,CAAA;AAAA,cACA,IAAA,EAAK,MAAA;AAAA,cACL,MAAA,EAAO,2BAAA;AAAA,cACP,WAAA;AAAA,cACA,aAAA,EAAc,OAAA;AAAA,cACd,eAAA,EAAiB,CAAA;AAAA,cACjB,gBAAA,EAAkB,MAAA;AAAA,cAClB,WAAW,CAAA,WAAA,EAAc,IAAA,GAAO,CAAC,CAAA,CAAA,EAAI,OAAO,CAAC,CAAA,CAAA;AAAA;AAAA;AAC/C,SAAA,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,mBAAA,CAAoB,WAAA,GAAc,qBAAA","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport interface Md3LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n /** 0–100. Omit for an indeterminate indicator. */\n value?: number;\n \"aria-label\"?: string;\n}\n\n/** A Material Design 3 linear progress indicator (determinate or indeterminate). */\nexport const Md3LinearProgress = React.forwardRef<HTMLDivElement, Md3LinearProgressProps>(\n ({ value, className, \"aria-label\": ariaLabel = \"Loading\", ...props }, ref) => {\n const indeterminate = value === undefined;\n const pct = indeterminate ? 40 : Math.min(100, Math.max(0, value));\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuenow={indeterminate ? undefined : pct}\n aria-valuemin={indeterminate ? undefined : 0}\n aria-valuemax={indeterminate ? undefined : 100}\n className={cn(\"h-1 w-full overflow-hidden rounded-full bg-md-surface-variant\", className)}\n {...props}\n >\n <div\n className={cn(\"h-full rounded-full bg-md-primary transition-[width]\", indeterminate && \"animate-pulse motion-reduce:animate-none\")}\n style={{ width: `${pct}%` }}\n />\n </div>\n );\n },\n);\nMd3LinearProgress.displayName = \"Md3LinearProgress\";\n\nexport interface Md3CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n /** 0–100. Omit for an indeterminate spinner. */\n value?: number;\n /** Diameter in px. */\n size?: number;\n strokeWidth?: number;\n \"aria-label\"?: string;\n}\n\n/** A Material Design 3 circular progress indicator (determinate or indeterminate). */\nexport const Md3CircularProgress = React.forwardRef<HTMLDivElement, Md3CircularProgressProps>(\n ({ value, size = 48, strokeWidth = 4, className, \"aria-label\": ariaLabel = \"Loading\", ...props }, ref) => {\n const indeterminate = value === undefined;\n const r = (size - strokeWidth) / 2;\n const c = 2 * Math.PI * r;\n const pct = indeterminate ? 25 : Math.min(100, Math.max(0, value));\n const offset = c - (pct / 100) * c;\n\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuenow={indeterminate ? undefined : pct}\n aria-valuemin={indeterminate ? undefined : 0}\n aria-valuemax={indeterminate ? undefined : 100}\n className={cn(\"inline-flex\", indeterminate && \"animate-spin motion-reduce:animate-none\", className)}\n style={{ width: size, height: size }}\n {...props}\n >\n <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n <circle\n cx={size / 2}\n cy={size / 2}\n r={r}\n fill=\"none\"\n stroke=\"hsl(var(--nx-md-surface-variant))\"\n strokeWidth={strokeWidth}\n />\n <circle\n cx={size / 2}\n cy={size / 2}\n r={r}\n fill=\"none\"\n stroke=\"hsl(var(--nx-md-primary))\"\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={c}\n strokeDashoffset={offset}\n transform={`rotate(-90 ${size / 2} ${size / 2})`}\n />\n </svg>\n </div>\n );\n },\n);\nMd3CircularProgress.displayName = \"Md3CircularProgress\";\n"]}
|
package/dist/index.js
CHANGED
|
@@ -22,7 +22,7 @@ var Md3LinearProgress = React.forwardRef(
|
|
|
22
22
|
children: /* @__PURE__ */ jsx(
|
|
23
23
|
"div",
|
|
24
24
|
{
|
|
25
|
-
className: cn("h-full rounded-full bg-md-primary transition-[width]", indeterminate && "animate-pulse"),
|
|
25
|
+
className: cn("h-full rounded-full bg-md-primary transition-[width]", indeterminate && "animate-pulse motion-reduce:animate-none"),
|
|
26
26
|
style: { width: `${pct}%` }
|
|
27
27
|
}
|
|
28
28
|
)
|
|
@@ -47,7 +47,7 @@ var Md3CircularProgress = React.forwardRef(
|
|
|
47
47
|
"aria-valuenow": indeterminate ? void 0 : pct,
|
|
48
48
|
"aria-valuemin": indeterminate ? void 0 : 0,
|
|
49
49
|
"aria-valuemax": indeterminate ? void 0 : 100,
|
|
50
|
-
className: cn("inline-flex", indeterminate && "animate-spin", className),
|
|
50
|
+
className: cn("inline-flex", indeterminate && "animate-spin motion-reduce:animate-none", className),
|
|
51
51
|
style: { width: size, height: size },
|
|
52
52
|
...props,
|
|
53
53
|
children: /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;AAUO,IAAM,iBAAA,GAA0B,KAAA,CAAA,UAAA;AAAA,EACrC,CAAC,EAAE,KAAA,EAAO,SAAA,EAAW,YAAA,EAAc,YAAY,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC5E,IAAA,MAAM,gBAAgB,KAAA,KAAU,MAAA;AAChC,IAAA,MAAM,GAAA,GAAM,aAAA,GAAgB,EAAA,GAAK,IAAA,CAAK,GAAA,CAAI,KAAK,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAC,CAAA;AACjE,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,aAAA;AAAA,QACL,YAAA,EAAY,SAAA;AAAA,QACZ,eAAA,EAAe,gBAAgB,MAAA,GAAY,GAAA;AAAA,QAC3C,eAAA,EAAe,gBAAgB,MAAA,GAAY,CAAA;AAAA,QAC3C,eAAA,EAAe,gBAAgB,MAAA,GAAY,GAAA;AAAA,QAC3C,SAAA,EAAW,EAAA,CAAG,+DAAA,EAAiE,SAAS,CAAA;AAAA,QACvF,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA,CAAG,sDAAA,EAAwD,aAAA,IAAiB,
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport interface Md3LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n /** 0–100. Omit for an indeterminate indicator. */\n value?: number;\n \"aria-label\"?: string;\n}\n\n/** A Material Design 3 linear progress indicator (determinate or indeterminate). */\nexport const Md3LinearProgress = React.forwardRef<HTMLDivElement, Md3LinearProgressProps>(\n ({ value, className, \"aria-label\": ariaLabel = \"Loading\", ...props }, ref) => {\n const indeterminate = value === undefined;\n const pct = indeterminate ? 40 : Math.min(100, Math.max(0, value));\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuenow={indeterminate ? undefined : pct}\n aria-valuemin={indeterminate ? undefined : 0}\n aria-valuemax={indeterminate ? undefined : 100}\n className={cn(\"h-1 w-full overflow-hidden rounded-full bg-md-surface-variant\", className)}\n {...props}\n >\n <div\n className={cn(\"h-full rounded-full bg-md-primary transition-[width]\", indeterminate && \"animate-pulse motion-reduce:animate-none\")}\n style={{ width: `${pct}%` }}\n />\n </div>\n );\n },\n);\nMd3LinearProgress.displayName = \"Md3LinearProgress\";\n\nexport interface Md3CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n /** 0–100. Omit for an indeterminate spinner. */\n value?: number;\n /** Diameter in px. */\n size?: number;\n strokeWidth?: number;\n \"aria-label\"?: string;\n}\n\n/** A Material Design 3 circular progress indicator (determinate or indeterminate). */\nexport const Md3CircularProgress = React.forwardRef<HTMLDivElement, Md3CircularProgressProps>(\n ({ value, size = 48, strokeWidth = 4, className, \"aria-label\": ariaLabel = \"Loading\", ...props }, ref) => {\n const indeterminate = value === undefined;\n const r = (size - strokeWidth) / 2;\n const c = 2 * Math.PI * r;\n const pct = indeterminate ? 25 : Math.min(100, Math.max(0, value));\n const offset = c - (pct / 100) * c;\n\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuenow={indeterminate ? undefined : pct}\n aria-valuemin={indeterminate ? undefined : 0}\n aria-valuemax={indeterminate ? undefined : 100}\n className={cn(\"inline-flex\", indeterminate && \"animate-spin motion-reduce:animate-none\", className)}\n style={{ width: size, height: size }}\n {...props}\n >\n <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n <circle\n cx={size / 2}\n cy={size / 2}\n r={r}\n fill=\"none\"\n stroke=\"hsl(var(--nx-md-surface-variant))\"\n strokeWidth={strokeWidth}\n />\n <circle\n cx={size / 2}\n cy={size / 2}\n r={r}\n fill=\"none\"\n stroke=\"hsl(var(--nx-md-primary))\"\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={c}\n strokeDashoffset={offset}\n transform={`rotate(-90 ${size / 2} ${size / 2})`}\n />\n </svg>\n </div>\n );\n },\n);\nMd3CircularProgress.displayName = \"Md3CircularProgress\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nucleux/md3-progress",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"description": "Material 3 progress indicators (linear, circular) — Nucleux agentic UI for React.",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"react-dom": ">=18"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@nucleux/utils": "0.
|
|
36
|
+
"@nucleux/utils": "0.7.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"tsup": "^8.3.5",
|