@serendie/ui 2.1.3-dev.202509030422 → 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

@@ -1,14 +1,14 @@
 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 x, AvatarStyle as n } from "./components/Avatar/Avatar.js";
-import { Badge as c, BadgeCloseButton as s, BadgeStyle as l } from "./components/Badge/Badge.js";
+import { Avatar as i, AvatarStyle as n } from "./components/Avatar/Avatar.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";
 import { Button as I, ButtonStyle as T } from "./components/Button/Button.js";
-import { SerendieChartTheme as b } from "./components/Chart/SerendieChartTheme.js";
-import { compactChartMargin as D, defaultChartMargin as v, getChartColor as M, getChartColors as w, legendChartMargin as A, spaciousChartMargin as L, useBarChartProps as N, useChartProps as R, useLineChartProps as F, usePieChartProps as G } from "./components/Chart/SerendieChartProps.js";
+import { SerendieChartTheme as D } from "./components/Chart/SerendieChartTheme.js";
+import { compactChartMargin as k, defaultChartMargin as v, getChartColor as M, getChartColors as w, legendChartMargin as A, spaciousChartMargin as L, useBarChartProps as N, useChartProps as R, useLineChartProps as F, usePieChartProps as G } from "./components/Chart/SerendieChartProps.js";
 import { CheckBox as W, CheckBoxStyle as j, checkboxCheckedIconCss as q, checkboxIconCss as z, checkboxUncheckedIconCss as E } from "./components/CheckBox/CheckBox.js";
 import { ChoiceBox as J, ChoiceBoxStyle as K } from "./components/ChoiceBox/ChoiceBox.js";
 import { DashboardWidget as Q } from "./components/DashboardWidget/DashboardWidget.js";
@@ -17,35 +17,37 @@ import { DatePicker as Z } from "./components/DatePicker/DatePicker.js";
 import { Divider as $, DividerStyle as oo } from "./components/Divider/Divider.js";
 import { Drawer as eo } from "./components/Drawer/Drawer.js";
 import { DropdownMenu as ao, DropdownMenuStyle as po } from "./components/DropdownMenu/DropdownMenu.js";
-import { IconButton as io, IconButtonStyle as xo } from "./components/IconButton/IconButton.js";
+import { IconButton as xo, IconButtonStyle as io } from "./components/IconButton/IconButton.js";
 import { List as fo } from "./components/List/List.js";
-import { ListItem as so, ListItemStyle as lo } from "./components/List/ListItem.js";
+import { ListItem as co, ListItemStyle as lo } from "./components/List/ListItem.js";
 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 bo, ProgressIndicatorStyle as ko } 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 { 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 nr } from "./components/DataTable/DataTableComponent.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,
-  x as Avatar,
+  i as Avatar,
   n as AvatarStyle,
-  c as Badge,
-  s as BadgeCloseButton,
-  l as BadgeStyle,
+  s as Badge,
+  c as BadgeCloseButton,
+  d as BadgeStyle,
   h as Banner,
   S as BottomNavigation,
   g as BottomNavigationItem,
@@ -58,59 +60,60 @@ export {
   K as ChoiceBoxStyle,
   Q as DashboardWidget,
   X as DataTable,
-  nr as DataTableComponent,
+  fr as DataTableComponent,
   Z as DatePicker,
   $ as Divider,
   oo as DividerStyle,
   eo as Drawer,
   ao as DropdownMenu,
   po as DropdownMenuStyle,
-  io as IconButton,
-  xo as IconButtonStyle,
+  xo as IconButton,
+  io as IconButtonStyle,
   fo as List,
-  so as ListItem,
+  co as ListItem,
   lo as ListItemStyle,
   Co as ModalDialog,
   Bo as NotificationBadge,
   yo as Pagination,
   uo as PaginationStyle,
   To as PasswordField,
-  bo as ProgressIndicator,
-  ko as ProgressIndicatorStyle,
-  vo as RadioButton,
-  Mo as RadioButtonStyle,
-  Ro as RadioGroup,
-  Go as Search,
-  Uo as SearchStyle,
-  jo as Select,
-  qo as SelectStyle,
-  b as SerendieChartTheme,
+  Do as ProgressIndicator,
+  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,
+  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,
-  D as compactChartMargin,
+  k as compactChartMargin,
   v as defaultChartMargin,
   M as getChartColor,
   w as getChartColors,
   A as legendChartMargin,
-  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/node_modules/@internationalized/date/dist/conversion.js

@@ -1,10 +1,10 @@
-import { CalendarDate as C, CalendarDateTime as U, ZonedDateTime as b } from "./CalendarDate.js";
+import { CalendarDateTime as C, CalendarDate as U, ZonedDateTime as b } from "./CalendarDate.js";
 import { constrain as M } from "./manipulation.js";
-import { GregorianCalendar as h, getExtendedYear as p } from "./GregorianCalendar.js";
-import { isEqualCalendar as v, getLocalTimeZone as y } from "./queries.js";
+import { getExtendedYear as h, GregorianCalendar as p } from "./GregorianCalendar.js";
+import { getLocalTimeZone as y, isEqualCalendar as v } from "./queries.js";
 function u(e) {
-  e = $(e, new h());
-  let t = p(e.era, e.year);
+  e = $(e, new p());
+  let t = h(e.era, e.year);
   return T(t, e.month, e.day, e.hour, e.minute, e.second, e.millisecond);
 }
 function T(e, t, n, r, o, a, c) {
@@ -60,8 +60,8 @@ function D(e, t, n = "compatible") {
   let r = B(e);
   if (t === "UTC") return u(r);
   if (t === y() && n === "compatible") {
-    r = $(r, new h());
-    let l = /* @__PURE__ */ new Date(), s = p(r.era, r.year);
+    r = $(r, new p());
+    let l = /* @__PURE__ */ new Date(), s = h(r.era, r.year);
     return l.setFullYear(s, r.month - 1, r.day), l.setHours(r.hour, r.minute, r.second, r.millisecond), l.getTime();
   }
   let o = u(r), a = i(o - d, t), c = i(o + d, t), f = F(r, t, o - a, o - c);
@@ -93,13 +93,13 @@ function g(e, t) {
   return new b(o < 1 ? "BC" : "AD", o < 1 ? -o + 1 : o, a, c, t, n, f, l, s, w);
 }
 function S(e) {
-  return new C(e.calendar, e.era, e.year, e.month, e.day);
+  return new U(e.calendar, e.era, e.year, e.month, e.day);
 }
 function B(e, t) {
   let n = 0, r = 0, o = 0, a = 0;
   if ("timeZone" in e) ({ hour: n, minute: r, second: o, millisecond: a } = e);
   else if ("hour" in e && !t) return e;
-  return t && ({ hour: n, minute: r, second: o, millisecond: a } = t), new U(e.calendar, e.era, e.year, e.month, e.day, n, r, o, a);
+  return t && ({ hour: n, minute: r, second: o, millisecond: a } = t), new C(e.calendar, e.era, e.year, e.month, e.day, n, r, o, a);
 }
 function $(e, t) {
   if (v(e.calendar, t)) return e;

package/dist/node_modules/@internationalized/date/dist/string.js

@@ -1,27 +1,41 @@
-import { toCalendar as n } from "./conversion.js";
-import { GregorianCalendar as $ } from "./GregorianCalendar.js";
+import { CalendarDate as $ } from "./CalendarDate.js";
+import { toCalendar as o } from "./conversion.js";
+import { GregorianCalendar as c } from "./GregorianCalendar.js";
+const f = /^([+-]\d{6}|\d{4})-(\d{2})-(\d{2})$/;
+function u(a) {
+  let r = a.match(f);
+  if (!r) throw new Error("Invalid ISO 8601 date string: " + a);
+  let t = new $(n(r[1], 0, 9999), n(r[2], 1, 12), 1);
+  return t.day = n(r[3], 1, t.calendar.getDaysInMonth(t)), t;
+}
+function n(a, r, t) {
+  let e = Number(a);
+  if (e < r || e > t) throw new RangeError(`Value out of range: ${r} <= ${e} <= ${t}`);
+  return e;
+}
 function i(a) {
   return `${String(a.hour).padStart(2, "0")}:${String(a.minute).padStart(2, "0")}:${String(a.second).padStart(2, "0")}${a.millisecond ? String(a.millisecond / 1e3).slice(1) : ""}`;
 }
-function o(a) {
-  let t = n(a, new $()), r;
-  return t.era === "BC" ? r = t.year === 1 ? "0000" : "-" + String(Math.abs(1 - t.year)).padStart(6, "00") : r = String(t.year).padStart(4, "0"), `${r}-${String(t.month).padStart(2, "0")}-${String(t.day).padStart(2, "0")}`;
+function d(a) {
+  let r = o(a, new c()), t;
+  return r.era === "BC" ? t = r.year === 1 ? "0000" : "-" + String(Math.abs(1 - r.year)).padStart(6, "00") : t = String(r.year).padStart(4, "0"), `${t}-${String(r.month).padStart(2, "0")}-${String(r.day).padStart(2, "0")}`;
 }
-function f(a) {
-  return `${o(a)}T${i(a)}`;
+function S(a) {
+  return `${d(a)}T${i(a)}`;
 }
-function c(a) {
-  let t = Math.sign(a) < 0 ? "-" : "+";
+function g(a) {
+  let r = Math.sign(a) < 0 ? "-" : "+";
   a = Math.abs(a);
-  let r = Math.floor(a / 36e5), e = a % 36e5 / 6e4;
-  return `${t}${String(r).padStart(2, "0")}:${String(e).padStart(2, "0")}`;
+  let t = Math.floor(a / 36e5), e = a % 36e5 / 6e4;
+  return `${r}${String(t).padStart(2, "0")}:${String(e).padStart(2, "0")}`;
 }
-function g(a) {
-  return `${f(a)}${c(a.offset)}[${a.timeZone}]`;
+function b(a) {
+  return `${S(a)}${g(a.offset)}[${a.timeZone}]`;
 }
 export {
-  f as dateTimeToString,
-  o as dateToString,
+  S as dateTimeToString,
+  d as dateToString,
+  u as parseDate,
   i as timeToString,
-  g as zonedDateTimeToString
+  b as zonedDateTimeToString
 };