@serendie/ui 3.5.1-dev.202606091509 → 3.5.1-dev.202606160617

package/dist/components/DataTable/DataTable.sampleData.d.ts

@@ -0,0 +1,12 @@
+export type DataRow = {
+    id: number;
+    area: string;
+    time: string;
+    status: string;
+    connections: number;
+    households: number;
+    coverage: string;
+    errorRate: string;
+    process: string;
+};
+export declare function createDataTableRows(seed?: number): DataRow[];

package/dist/components/DataTable/DataTable.sampleData.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ProgressIndicator/AnimatedArc.d.ts

@@ -3,4 +3,5 @@ export declare const AnimatedArc: React.FC<{
     className?: string;
     radius: number;
     width: number;
+    progress?: number;
 }>;

package/dist/components/ProgressIndicator/AnimatedArc.js

@@ -1,46 +1,43 @@
-import { jsx as A } from "react/jsx-runtime";
-import n from "react";
-import { describeArc as R } from "./util.js";
-const h = 2.5, S = ({ className: f, radius: o, width: c }) => {
-  const [t, i] = n.useState(0), s = n.useRef(null), a = n.useRef(null);
-  n.useEffect(() => {
-    const e = (r) => {
-      s.current == null && (s.current = r);
-      const u = (r - s.current) / 1e3;
-      s.current = r;
-      const m = u / h;
-      i((p) => (p + m) % 1), a.current = requestAnimationFrame(e);
+import { jsx as R } from "react/jsx-runtime";
+import e from "react";
+import { getAnimatedArcProps as P } from "./animatedArcProps.js";
+const F = 2.5, E = ({ className: l, radius: u, width: o, progress: t }) => {
+  const [s, m] = e.useState(0), r = e.useRef(null), n = e.useRef(null);
+  e.useEffect(() => {
+    if (t != null)
+      return;
+    const a = (c) => {
+      r.current == null && (r.current = c);
+      const d = (c - r.current) / 1e3;
+      r.current = c;
+      const A = d / F;
+      m((p) => (p + A) % 1), n.current = requestAnimationFrame(a);
     };
-    return a.current = requestAnimationFrame(e), () => {
-      a.current != null && cancelAnimationFrame(a.current);
+    return n.current = requestAnimationFrame(a), () => {
+      n.current != null && cancelAnimationFrame(n.current);
     };
-  }, []);
-  const { d: l, rotationDeg: d } = n.useMemo(() => {
-    const e = t * Math.PI * 2, r = 180 + 40 * Math.sin(-e) + 40, u = 90 * Math.sin(e) + 90;
-    return { d: R(
-      o + c,
-      // cx
-      o + c,
-      // cy
-      o,
-      // r
-      t * 360 + u,
-      t * 360 + r
-    ), rotationDeg: t * 360 };
-  }, [t, o, c]);
-  return /* @__PURE__ */ A(
+  }, [t]);
+  const { d: f, rotationDeg: i } = e.useMemo(
+    () => P({
+      progress: t ?? s,
+      radius: u,
+      width: o
+    }),
+    [t, s, u, o]
+  );
+  return /* @__PURE__ */ R(
     "path",
     {
-      d: l,
-      transform: `rotate(${d})`,
+      d: f,
+      transform: `rotate(${i})`,
       strokeLinecap: "butt",
       stroke: "currentColor",
-      strokeWidth: c,
+      strokeWidth: o,
       fill: "none",
-      className: f
+      className: l
     }
   );
 };
 export {
-  S as AnimatedArc
+  E as AnimatedArc
 };

package/dist/components/ProgressIndicator/AnimatedArc.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ProgressIndicator/ProgressIndicatorIndeterminate.d.ts

@@ -3,8 +3,9 @@ export interface ProgressIndicatorIndeterminateProps extends React.ComponentProp
     type?: "linear" | "circular";
     size?: "small" | "medium" | "large";
     color?: "primary" | "subtle";
+    animationProgress?: number;
 }
 export declare const ProgressIndicatorIndeterminate: {
-    ({ type, size, color, className, style, ...props }: ProgressIndicatorIndeterminateProps): React.JSX.Element;
+    ({ type, size, color, animationProgress, className, style, ...props }: ProgressIndicatorIndeterminateProps): React.JSX.Element;
     displayName: string;
 };

package/dist/components/ProgressIndicator/ProgressIndicatorIndeterminate.js

@@ -1,8 +1,9 @@
-import { jsx as i, jsxs as p } from "react/jsx-runtime";
-import { AnimatedArc as h } from "./AnimatedArc.js";
-import { cx as c } from "../../styled-system/css/cx.js";
-import { cva as o } from "../../styled-system/css/cva.js";
-const m = o({
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import { AnimatedArc as y } from "./AnimatedArc.js";
+import { normalizeProgress as f } from "./animatedArcProps.js";
+import { cx as u } from "../../styled-system/css/cx.js";
+import { cva as l } from "../../styled-system/css/cva.js";
+const p = l({
   base: {
     position: "relative",
     display: "flex",
@@ -80,7 +81,7 @@ const m = o({
     size: "medium",
     color: "primary"
   }
-}), g = o({
+}), b = l({
   base: {
     position: "absolute",
     backgroundColor: "sd.reference.color.scale.gray.100"
@@ -106,7 +107,7 @@ const m = o({
     }
   },
   compoundVariants: []
-}), u = o({
+}), g = l({
   base: {
     position: "absolute"
   },
@@ -140,7 +141,7 @@ const m = o({
     }
   },
   compoundVariants: []
-}), y = (e) => ({
+}), x = (r) => ({
   small: {
     radius: 6,
     strokeWidth: 2
@@ -153,37 +154,40 @@ const m = o({
     radius: 20,
     strokeWidth: 8
   }
-})[e], f = ({
-  type: e = "linear",
-  size: r = "medium",
+})[r], v = ({
+  type: r = "linear",
+  size: e = "medium",
   color: s = "primary",
-  className: l,
-  style: n,
-  ...d
+  animationProgress: n,
+  className: d,
+  style: c,
+  ...m
 }) => {
-  if (e === "circular") {
-    const { radius: a, strokeWidth: t } = y(r);
+  const a = n == null ? void 0 : f(n);
+  if (r === "circular") {
+    const { radius: t, strokeWidth: o } = x(e);
     return /* @__PURE__ */ i(
       "div",
       {
-        className: c(
-          m({ type: e, size: r, color: s }),
-          l
+        className: u(
+          p({ type: r, size: e, color: s }),
+          d
         ),
         role: "progressbar",
         "aria-valuetext": "Loading",
-        style: n,
-        ...d,
+        style: c,
+        ...m,
         children: /* @__PURE__ */ i(
           "svg",
           {
-            viewBox: `0 0 ${a * 2 + t * 2} ${a * 2 + t * 2}`,
+            viewBox: `0 0 ${t * 2 + o * 2} ${t * 2 + o * 2}`,
             children: /* @__PURE__ */ i(
-              h,
+              y,
               {
-                className: u({ type: e, size: r, color: s }),
-                radius: a,
-                width: t
+                className: g({ type: r, size: e, color: s }),
+                radius: t,
+                width: o,
+                progress: a
               }
             )
           }
@@ -191,25 +195,34 @@ const m = o({
       }
     );
   }
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ h(
     "div",
     {
-      className: c(
-        m({ type: e, size: r, color: s }),
-        l
+      className: u(
+        p({ type: r, size: e, color: s }),
+        d
       ),
       role: "progressbar",
       "aria-valuetext": "Loading",
-      style: n,
-      ...d,
+      style: c,
+      ...m,
       children: [
-        /* @__PURE__ */ i("div", { className: g({ type: e, size: r }) }),
-        /* @__PURE__ */ i("div", { className: u({ type: e, size: r, color: s }) })
+        /* @__PURE__ */ i("div", { className: b({ type: r, size: e }) }),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: g({ type: r, size: e, color: s }),
+            style: a == null ? void 0 : {
+              animation: "none",
+              transform: `translateX(${a * 300 - 150}%)`
+            }
+          }
+        )
       ]
     }
   );
 };
-f.displayName = "ProgressIndicatorIndeterminate";
+v.displayName = "ProgressIndicatorIndeterminate";
 export {
-  f as ProgressIndicatorIndeterminate
+  v as ProgressIndicatorIndeterminate
 };

package/dist/components/ProgressIndicator/animatedArcProps.d.ts

@@ -0,0 +1,11 @@
+type AnimatedArcProps = {
+    progress: number;
+    radius: number;
+    width: number;
+};
+export declare const normalizeProgress: (progress: number) => number;
+export declare const getAnimatedArcProps: ({ progress, radius, width, }: AnimatedArcProps) => {
+    d: string;
+    rotationDeg: number;
+};
+export {};

package/dist/components/ProgressIndicator/animatedArcProps.js

@@ -0,0 +1,19 @@
+import { describeArc as a } from "./util.js";
+const i = (n) => (n % 1 + 1) % 1, h = ({
+  progress: n,
+  radius: o,
+  width: r
+}) => {
+  const t = i(n), e = t * Math.PI * 2, s = 180 + 40 * Math.sin(-e) + 40, c = 90 * Math.sin(e) + 90;
+  return { d: a(
+    o + r,
+    o + r,
+    o,
+    t * 360 + c,
+    t * 360 + s
+  ), rotationDeg: t * 360 };
+};
+export {
+  h as getAnimatedArcProps,
+  i as normalizeProgress
+};

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.5.1-dev.202606091509",
+  "version": "3.5.1-dev.202606160617",
   "type": "module",
   "types": "./dist/index.d.ts",
   "sideEffects": [