@serendie/ui 2.1.3-dev.202509040333 → 2.1.3-dev.202509170003

package/dist/components/ProgressIndicator/ProgressIndicatorIndeterminate.js

@@ -0,0 +1,215 @@
+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({
+  base: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  variants: {
+    type: {
+      linear: {
+        width: "100%",
+        borderRadius: "sd.system.dimension.radius.full"
+      },
+      circular: {}
+    },
+    size: {
+      small: {},
+      medium: {},
+      large: {}
+    },
+    color: {
+      primary: {},
+      subtle: {}
+    }
+  },
+  compoundVariants: [
+    {
+      type: "linear",
+      size: "small",
+      css: {
+        height: "2px"
+      }
+    },
+    {
+      type: "linear",
+      size: "medium",
+      css: {
+        height: "4px"
+      }
+    },
+    {
+      type: "linear",
+      size: "large",
+      css: {
+        height: "8px"
+      }
+    },
+    {
+      type: "circular",
+      size: "small",
+      css: {
+        width: "12px",
+        height: "12px"
+      }
+    },
+    {
+      type: "circular",
+      size: "medium",
+      css: {
+        width: "16px",
+        height: "16px"
+      }
+    },
+    {
+      type: "circular",
+      size: "large",
+      css: {
+        width: "40px",
+        height: "40px"
+      }
+    }
+  ],
+  defaultVariants: {
+    type: "linear",
+    size: "medium",
+    color: "primary"
+  }
+}), g = o({
+  base: {
+    position: "absolute",
+    backgroundColor: "sd.reference.color.scale.gray.100"
+  },
+  variants: {
+    type: {
+      linear: {
+        width: "calc(100% - 4px)",
+        height: "100%",
+        borderRadius: "sd.system.dimension.radius.full"
+      },
+      circular: {
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        fill: "none"
+      }
+    },
+    size: {
+      small: {},
+      medium: {},
+      large: {}
+    }
+  },
+  compoundVariants: []
+}), u = o({
+  base: {
+    position: "absolute"
+  },
+  variants: {
+    type: {
+      linear: {
+        width: "50%",
+        height: "100%",
+        animation: "progressIndicatorSlide 1.7s cubic-bezier(0.65, 0.05, 0.36, 1) infinite"
+      },
+      circular: {
+        fill: "none",
+        strokeLinecap: "butt",
+        transformOrigin: "center"
+      }
+    },
+    size: {
+      small: {},
+      medium: {},
+      large: {}
+    },
+    color: {
+      primary: {
+        backgroundColor: "sd.system.color.impression.primary",
+        stroke: "sd.system.color.impression.primary"
+      },
+      subtle: {
+        backgroundColor: "sd.reference.color.scale.gray.300",
+        stroke: "sd.reference.color.scale.gray.300"
+      }
+    }
+  },
+  compoundVariants: []
+}), y = (e) => ({
+  small: {
+    radius: 6,
+    strokeWidth: 2
+  },
+  medium: {
+    radius: 8,
+    strokeWidth: 6
+  },
+  large: {
+    radius: 20,
+    strokeWidth: 8
+  }
+})[e], f = ({
+  type: e = "linear",
+  size: r = "medium",
+  color: s = "primary",
+  className: l,
+  style: n,
+  ...d
+}) => {
+  if (e === "circular") {
+    const { radius: a, strokeWidth: t } = y(r);
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        className: c(
+          m({ type: e, size: r, color: s }),
+          l
+        ),
+        role: "progressbar",
+        "aria-valuetext": "Loading",
+        style: n,
+        ...d,
+        children: /* @__PURE__ */ i(
+          "svg",
+          {
+            viewBox: `0 0 ${a * 2 + t * 2} ${a * 2 + t * 2}`,
+            children: /* @__PURE__ */ i(
+              h,
+              {
+                className: u({ type: e, size: r, color: s }),
+                radius: a,
+                width: t
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: c(
+        m({ type: e, size: r, color: s }),
+        l
+      ),
+      role: "progressbar",
+      "aria-valuetext": "Loading",
+      style: n,
+      ...d,
+      children: [
+        /* @__PURE__ */ i("div", { className: g({ type: e, size: r }) }),
+        /* @__PURE__ */ i("div", { className: u({ type: e, size: r, color: s }) })
+      ]
+    }
+  );
+};
+f.displayName = "ProgressIndicatorIndeterminate";
+export {
+  f as ProgressIndicatorIndeterminate
+};

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

@@ -1 +1,4 @@
-export * from './ProgressIndicator.tsx';
+export { ProgressIndicator } from './ProgressIndicator';
+export type { ProgressIndicatorProps } from './ProgressIndicator';
+export { ProgressIndicatorIndeterminate } from './ProgressIndicatorIndeterminate';
+export type { ProgressIndicatorIndeterminateProps } from './ProgressIndicatorIndeterminate';

package/dist/components/ProgressIndicator/index.js

@@ -1,5 +1,6 @@
-import { ProgressIndicator as e, ProgressIndicatorStyle as s } from "./ProgressIndicator.js";
+import { ProgressIndicator as e } from "./ProgressIndicator.js";
+import { ProgressIndicatorIndeterminate as n } from "./ProgressIndicatorIndeterminate.js";
 export {
   e as ProgressIndicator,
-  s as ProgressIndicatorStyle
+  n as ProgressIndicatorIndeterminate
 };

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

@@ -0,0 +1 @@
+export declare const describeArc: (cx: number, cy: number, radius: number, startAngle: number, endAngle: number) => string;

package/dist/components/ProgressIndicator/util.js

@@ -0,0 +1,13 @@
+const A = (n, e, t, o, s) => {
+  const a = (l, p, $, g) => {
+    const M = (g - 90) * Math.PI / 180;
+    return {
+      x: l + $ * Math.cos(M),
+      y: p + $ * Math.sin(M)
+    };
+  }, c = a(n, e, t, s), r = a(n, e, t, o), h = Math.abs((s - o) % 360) <= 180 ? "0" : "1";
+  return `M ${c.x} ${c.y} A ${t} ${t} 0 ${h} 0 ${r.x} ${r.y}`;
+};
+export {
+  A as describeArc
+};

package/dist/index.js

@@ -2,7 +2,7 @@ import { SerendiePreset as e } from "./preset.js";
 import { Accordion as a } from "./components/Accordion/Accordion.js";
 import { AccordionGroup as m } from "./components/Accordion/AccordionGroup.js";
 import { Avatar as i, AvatarStyle as n } from "./components/Avatar/Avatar.js";
-import { Badge as s, BadgeCloseButton as c, BadgeStyle as l } from "./components/Badge/Badge.js";
+import { Badge as s, BadgeCloseButton as c, BadgeStyle as d } from "./components/Badge/Badge.js";
 import { Banner as h } from "./components/Banner/Banner.js";
 import { BottomNavigation as S } from "./components/BottomNavigation/BottomNavigation.js";
 import { BottomNavigationItem as g, BottomNavigationItemStyle as y } from "./components/BottomNavigation/BottomNavigationItem.js";
@@ -24,21 +24,22 @@ import { ModalDialog as Co } from "./components/ModalDialog/ModalDialog.js";
 import { NotificationBadge as Bo } from "./components/NotificationBadge/NotificationBadge.js";
 import { Pagination as yo, PaginationStyle as uo } from "./components/Pagination/Pagination.js";
 import { PasswordField as To } from "./components/PasswordField/PasswordField.js";
-import { ProgressIndicator as Do, ProgressIndicatorStyle as bo } from "./components/ProgressIndicator/ProgressIndicator.js";
-import { RadioButton as vo, RadioButtonStyle as Mo, radioCheckedIconCss as wo, radioIconCss as Ao, radioUncheckedIconCss as Lo } from "./components/RadioButton/RadioButton.js";
-import { RadioGroup as Ro } from "./components/RadioButton/RadioGroup.js";
-import { Search as Go, SearchStyle as Uo } from "./components/Search/Search.js";
-import { Select as jo, SelectStyle as qo } from "./components/Select/Select.js";
-import { Switch as Eo, SwitchStyle as Ho } from "./components/Switch/Switch.js";
-import { Tabs as Ko, TabsStyle as Oo } from "./components/Tabs/Tabs.js";
-import { TabItem as Vo, TabItemStyle as Xo } from "./components/Tabs/TabItem.js";
-import { TextArea as Zo } from "./components/TextArea/TextArea.js";
-import { TextField as $o } from "./components/TextField/TextField.js";
-import { Toast as rr, ToastStyle as er, toaster as tr } from "./components/Toast/Toast.js";
-import { Tooltip as pr } from "./components/Tooltip/Tooltip.js";
-import { TopAppBar as xr } from "./components/TopAppBar/TopAppBar.js";
-import { DataTableComponent as nr } from "./components/DataTable/DataTableComponent.js";
-import { parse as sr } from "./node_modules/@zag-js/date-picker/dist/index.js";
+import { ProgressIndicator as Do } from "./components/ProgressIndicator/ProgressIndicator.js";
+import { ProgressIndicatorIndeterminate as ko } from "./components/ProgressIndicator/ProgressIndicatorIndeterminate.js";
+import { RadioButton as Mo, RadioButtonStyle as wo, radioCheckedIconCss as Ao, radioIconCss as Lo, radioUncheckedIconCss as No } from "./components/RadioButton/RadioButton.js";
+import { RadioGroup as Fo } from "./components/RadioButton/RadioGroup.js";
+import { Search as Uo, SearchStyle as Wo } from "./components/Search/Search.js";
+import { Select as qo, SelectStyle as zo } from "./components/Select/Select.js";
+import { Switch as Ho, SwitchStyle as Jo } from "./components/Switch/Switch.js";
+import { Tabs as Oo, TabsStyle as Qo } from "./components/Tabs/Tabs.js";
+import { TabItem as Xo, TabItemStyle as Yo } from "./components/Tabs/TabItem.js";
+import { TextArea as _o } from "./components/TextArea/TextArea.js";
+import { TextField as or } from "./components/TextField/TextField.js";
+import { Toast as er, ToastStyle as tr, toaster as ar } from "./components/Toast/Toast.js";
+import { Tooltip as mr } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as ir } from "./components/TopAppBar/TopAppBar.js";
+import { DataTableComponent as fr } from "./components/DataTable/DataTableComponent.js";
+import { parse as cr } from "./node_modules/@zag-js/date-picker/dist/index.js";
 export {
   a as Accordion,
   m as AccordionGroup,
@@ -46,7 +47,7 @@ export {
   n as AvatarStyle,
   s as Badge,
   c as BadgeCloseButton,
-  l as BadgeStyle,
+  d as BadgeStyle,
   h as Banner,
   S as BottomNavigation,
   g as BottomNavigationItem,
@@ -59,7 +60,7 @@ export {
   K as ChoiceBoxStyle,
   Q as DashboardWidget,
   X as DataTable,
-  nr as DataTableComponent,
+  fr as DataTableComponent,
   Z as DatePicker,
   $ as Divider,
   oo as DividerStyle,
@@ -77,28 +78,28 @@ export {
   uo as PaginationStyle,
   To as PasswordField,
   Do as ProgressIndicator,
-  bo as ProgressIndicatorStyle,
-  vo as RadioButton,
-  Mo as RadioButtonStyle,
-  Ro as RadioGroup,
-  Go as Search,
-  Uo as SearchStyle,
-  jo as Select,
-  qo as SelectStyle,
+  ko as ProgressIndicatorIndeterminate,
+  Mo as RadioButton,
+  wo as RadioButtonStyle,
+  Fo as RadioGroup,
+  Uo as Search,
+  Wo as SearchStyle,
+  qo as Select,
+  zo as SelectStyle,
   D as SerendieChartTheme,
   e as SerendiePreset,
-  Eo as Switch,
-  Ho as SwitchStyle,
-  Vo as TabItem,
-  Xo as TabItemStyle,
-  Ko as Tabs,
-  Oo as TabsStyle,
-  Zo as TextArea,
-  $o as TextField,
-  rr as Toast,
-  er as ToastStyle,
-  pr as Tooltip,
-  xr as TopAppBar,
+  Ho as Switch,
+  Jo as SwitchStyle,
+  Xo as TabItem,
+  Yo as TabItemStyle,
+  Oo as Tabs,
+  Qo as TabsStyle,
+  _o as TextArea,
+  or as TextField,
+  er as Toast,
+  tr as ToastStyle,
+  mr as Tooltip,
+  ir as TopAppBar,
   q as checkboxCheckedIconCss,
   z as checkboxIconCss,
   E as checkboxUncheckedIconCss,
@@ -107,12 +108,12 @@ export {
   M as getChartColor,
   w as getChartColors,
   A as legendChartMargin,
-  sr as parseDate,
-  wo as radioCheckedIconCss,
-  Ao as radioIconCss,
-  Lo as radioUncheckedIconCss,
+  cr as parseDate,
+  Ao as radioCheckedIconCss,
+  Lo as radioIconCss,
+  No as radioUncheckedIconCss,
   L as spaciousChartMargin,
-  tr as toaster,
+  ar as toaster,
   N as useBarChartProps,
   R as useChartProps,
   F as useLineChartProps,

package/dist/preset.d.ts

@@ -2663,6 +2663,14 @@ export declare const SerendiePreset: {
                         transform: string;
                     };
                 };
+                progressIndicatorSlide: {
+                    from: {
+                        transform: string;
+                    };
+                    to: {
+                        transform: string;
+                    };
+                };
             };
         };
     };