@hai-dev/ui-kit 1.0.5 → 1.0.6

package/dist/{CircularProgress-CscJm1An.js → CircularProgress-BCrSQadM.js}

@@ -1,54 +1,37 @@
-import * as u from "react";
-import { g as N, a as U, b as E, e as f, P as t } from "./createTheme-DSHGFfg6.js";
-import { p as V, u as j, s as k, c as z, d as D, k as I, b as F } from "./ButtonBase-CXGZ-DBC.js";
-import { jsx as y } from "react/jsx-runtime";
-let x = 0;
-function A(e) {
-  const [r, s] = u.useState(e), o = e || r;
-  return u.useEffect(() => {
-    r == null && (x += 1, s(`mui-${x}`));
-  }, [r]), o;
-}
-const G = {
-  ...u
-}, w = G.useId;
-function se(e) {
-  if (w !== void 0) {
-    const r = w();
-    return e ?? r;
-  }
-  return A(e);
-}
-const $ = {
+import * as N from "react";
+import { d as R, g as j, c as U, e as f, P as t } from "./createTheme-BfVKUMHQ.js";
+import { p as V, u as z, s as m, c as E, b as T, k as $, d as I } from "./chainPropTypes-HYSaT0L0.js";
+import { jsx as y, jsxs as F } from "react/jsx-runtime";
+const w = {
   theme: void 0
 };
-function K(e) {
-  let r, s;
+function A(e) {
+  let r, a;
   return function(i) {
-    let a = r;
-    return (a === void 0 || i.theme !== s) && ($.theme = i.theme, a = V(e($)), r = a, s = i.theme), a;
+    let o = r;
+    return (o === void 0 || i.theme !== a) && (w.theme = i.theme, o = V(e(w)), r = o, a = i.theme), o;
   };
 }
-const M = K;
-function _(e) {
+const v = A;
+function K(e) {
   return typeof e.main == "string";
 }
-function B(e, r = []) {
-  if (!_(e))
+function W(e, r = []) {
+  if (!K(e))
     return !1;
-  for (const s of r)
-    if (!e.hasOwnProperty(s) || typeof e[s] != "string")
+  for (const a of r)
+    if (!e.hasOwnProperty(a) || typeof e[a] != "string")
       return !1;
   return !0;
 }
-function W(e = []) {
-  return ([, r]) => r && B(r, e);
+function _(e = []) {
+  return ([, r]) => r && W(r, e);
 }
-function Y(e) {
-  return N("MuiCircularProgress", e);
+function B(e) {
+  return R("MuiCircularProgress", e);
 }
-U("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
-const n = 44, g = I`
+j("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "track", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
+const s = 44, k = $`
   0% {
     transform: rotate(0deg);
   }
@@ -56,7 +39,7 @@ const n = 44, g = I`
   100% {
     transform: rotate(360deg);
   }
-`, v = I`
+`, g = $`
   0% {
     stroke-dasharray: 1px, 200px;
     stroke-dashoffset: 0;
@@ -71,32 +54,33 @@ const n = 44, g = I`
     stroke-dasharray: 1px, 200px;
     stroke-dashoffset: -126px;
   }
-`, Z = typeof g != "string" ? D`
-        animation: ${g} 1.4s linear infinite;
-      ` : null, q = typeof v != "string" ? D`
-        animation: ${v} 1.4s ease-in-out infinite;
-      ` : null, H = (e) => {
+`, G = typeof k != "string" ? T`
+        animation: ${k} 1.4s linear infinite;
+      ` : null, Y = typeof g != "string" ? T`
+        animation: ${g} 1.4s ease-in-out infinite;
+      ` : null, Z = (e) => {
   const {
     classes: r,
-    variant: s,
-    color: o,
+    variant: a,
+    color: c,
     disableShrink: i
-  } = e, a = {
-    root: ["root", s, `color${f(o)}`],
+  } = e, o = {
+    root: ["root", a, `color${f(c)}`],
     svg: ["svg"],
-    circle: ["circle", `circle${f(s)}`, i && "circleDisableShrink"]
+    track: ["track"],
+    circle: ["circle", `circle${f(a)}`, i && "circleDisableShrink"]
   };
-  return z(a, Y, r);
-}, J = k("span", {
+  return E(o, B, r);
+}, q = m("span", {
   name: "MuiCircularProgress",
   slot: "Root",
   overridesResolver: (e, r) => {
     const {
-      ownerState: s
+      ownerState: a
     } = e;
-    return [r.root, r[s.variant], r[`color${f(s.color)}`]];
+    return [r.root, r[a.variant], r[`color${f(a.color)}`]];
   }
-})(M(({
+})(v(({
   theme: e
 }) => ({
   display: "inline-block",
@@ -111,10 +95,10 @@ const n = 44, g = I`
     props: {
       variant: "indeterminate"
     },
-    style: Z || {
-      animation: `${g} 1.4s linear infinite`
+    style: G || {
+      animation: `${k} 1.4s linear infinite`
     }
-  }, ...Object.entries(e.palette).filter(W()).map(([r]) => ({
+  }, ...Object.entries(e.palette).filter(_()).map(([r]) => ({
     props: {
       color: r
     },
@@ -122,22 +106,22 @@ const n = 44, g = I`
       color: (e.vars || e).palette[r].main
     }
   }))]
-}))), L = k("svg", {
+}))), H = m("svg", {
   name: "MuiCircularProgress",
   slot: "Svg"
 })({
   display: "block"
   // Keeps the progress centered
-}), Q = k("circle", {
+}), J = m("circle", {
   name: "MuiCircularProgress",
   slot: "Circle",
   overridesResolver: (e, r) => {
     const {
-      ownerState: s
+      ownerState: a
     } = e;
-    return [r.circle, r[`circle${f(s.variant)}`], s.disableShrink && r.circleDisableShrink];
+    return [r.circle, r[`circle${f(a.variant)}`], a.disableShrink && r.circleDisableShrink];
   }
-})(M(({
+})(v(({
   theme: e
 }) => ({
   stroke: "currentColor",
@@ -162,69 +146,88 @@ const n = 44, g = I`
     props: ({
       ownerState: r
     }) => r.variant === "indeterminate" && !r.disableShrink,
-    style: q || {
+    style: Y || {
       // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
-      animation: `${v} 1.4s ease-in-out infinite`
+      animation: `${g} 1.4s ease-in-out infinite`
     }
   }]
-}))), X = /* @__PURE__ */ u.forwardRef(function(r, s) {
-  const o = j({
+}))), L = m("circle", {
+  name: "MuiCircularProgress",
+  slot: "Track"
+})(v(({
+  theme: e
+}) => ({
+  stroke: "currentColor",
+  opacity: (e.vars || e).palette.action.activatedOpacity
+}))), Q = /* @__PURE__ */ N.forwardRef(function(r, a) {
+  const c = z({
     props: r,
     name: "MuiCircularProgress"
   }), {
     className: i,
-    color: a = "primary",
-    disableShrink: T = !1,
-    size: m = 40,
-    style: R,
-    thickness: c = 3.6,
+    color: o = "primary",
+    disableShrink: M = !1,
+    enableTrackSlot: S = !1,
+    size: p = 40,
+    style: D,
+    thickness: n = 3.6,
     value: d = 0,
     variant: b = "indeterminate",
     ...O
-  } = o, l = {
-    ...o,
-    color: a,
-    disableShrink: T,
-    size: m,
-    thickness: c,
+  } = c, l = {
+    ...c,
+    color: o,
+    disableShrink: M,
+    size: p,
+    thickness: n,
     value: d,
-    variant: b
-  }, p = H(l), h = {}, S = {}, C = {};
+    variant: b,
+    enableTrackSlot: S
+  }, u = Z(l), h = {}, C = {}, P = {};
   if (b === "determinate") {
-    const P = 2 * Math.PI * ((n - c) / 2);
-    h.strokeDasharray = P.toFixed(3), C["aria-valuenow"] = Math.round(d), h.strokeDashoffset = `${((100 - d) / 100 * P).toFixed(3)}px`, S.transform = "rotate(-90deg)";
+    const x = 2 * Math.PI * ((s - n) / 2);
+    h.strokeDasharray = x.toFixed(3), P["aria-valuenow"] = Math.round(d), h.strokeDashoffset = `${((100 - d) / 100 * x).toFixed(3)}px`, C.transform = "rotate(-90deg)";
   }
-  return /* @__PURE__ */ y(J, {
-    className: E(p.root, i),
+  return /* @__PURE__ */ y(q, {
+    className: U(u.root, i),
     style: {
-      width: m,
-      height: m,
-      ...S,
-      ...R
+      width: p,
+      height: p,
+      ...C,
+      ...D
     },
     ownerState: l,
-    ref: s,
+    ref: a,
     role: "progressbar",
-    ...C,
+    ...P,
     ...O,
-    children: /* @__PURE__ */ y(L, {
-      className: p.svg,
+    children: /* @__PURE__ */ F(H, {
+      className: u.svg,
       ownerState: l,
-      viewBox: `${n / 2} ${n / 2} ${n} ${n}`,
-      children: /* @__PURE__ */ y(Q, {
-        className: p.circle,
+      viewBox: `${s / 2} ${s / 2} ${s} ${s}`,
+      children: [S ? /* @__PURE__ */ y(L, {
+        className: u.track,
+        ownerState: l,
+        cx: s,
+        cy: s,
+        r: (s - n) / 2,
+        fill: "none",
+        strokeWidth: n,
+        "aria-hidden": "true"
+      }) : null, /* @__PURE__ */ y(J, {
+        className: u.circle,
         style: h,
         ownerState: l,
-        cx: n,
-        cy: n,
-        r: (n - c) / 2,
+        cx: s,
+        cy: s,
+        r: (s - n) / 2,
         fill: "none",
-        strokeWidth: c
-      })
+        strokeWidth: n
+      })]
     })
   });
 });
-process.env.NODE_ENV !== "production" && (X.propTypes = {
+process.env.NODE_ENV !== "production" && (Q.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -249,7 +252,13 @@ process.env.NODE_ENV !== "production" && (X.propTypes = {
    * This only works if variant is `indeterminate`.
    * @default false
    */
-  disableShrink: F(t.bool, (e) => e.disableShrink && e.variant && e.variant !== "indeterminate" ? new Error("MUI: You have provided the `disableShrink` prop with a variant other than `indeterminate`. This will have no effect.") : null),
+  disableShrink: I(t.bool, (e) => e.disableShrink && e.variant && e.variant !== "indeterminate" ? new Error("MUI: You have provided the `disableShrink` prop with a variant other than `indeterminate`. This will have no effect.") : null),
+  /**
+   * If `true`, a track circle slot is mounted to show a subtle background for the progress.
+   * The `size` and `thickness` apply to the track slot to be consistent with the progress circle.
+   * @default false
+   */
+  enableTrackSlot: t.bool,
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
@@ -284,8 +293,7 @@ process.env.NODE_ENV !== "production" && (X.propTypes = {
   variant: t.oneOf(["determinate", "indeterminate"])
 });
 export {
-  X as C,
-  W as c,
-  M as m,
-  se as u
+  Q as C,
+  _ as c,
+  v as m
 };