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

package/dist/client.js

@@ -3,10 +3,10 @@ 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 f, 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";
+import { BottomNavigationItem as g, BottomNavigationItemStyle as u } from "./components/BottomNavigation/BottomNavigationItem.js";
 import { Button as I, ButtonStyle as T } from "./components/Button/Button.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";
@@ -19,39 +19,40 @@ import { Divider as $, DividerStyle as oo } from "./components/Divider/Divider.j
 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 { List as so } from "./components/List/List.js";
+import { List as fo } from "./components/List/List.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 { Pagination as uo, PaginationStyle as yo } 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 ir } from "./components/TopAppBar/TopAppBar.js";
-import { DataTableComponent as nr } from "./components/DataTable/DataTableComponent.js";
-import { parse as fr } 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 xr } 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,
   x as Avatar,
   n as AvatarStyle,
-  f as Badge,
+  s as Badge,
   c as BadgeCloseButton,
-  l as BadgeStyle,
+  d as BadgeStyle,
   h as Banner,
   S as BottomNavigation,
   g as BottomNavigationItem,
-  y as BottomNavigationItemStyle,
+  u as BottomNavigationItemStyle,
   I as Button,
   T as ButtonStyle,
   W as CheckBox,
@@ -60,7 +61,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,
@@ -69,37 +70,37 @@ export {
   po as DropdownMenuStyle,
   io as IconButton,
   xo as IconButtonStyle,
-  so as List,
+  fo as List,
   co as ListItem,
   lo as ListItemStyle,
   Co as ModalDialog,
   Bo as NotificationBadge,
-  yo as Pagination,
-  uo as PaginationStyle,
+  uo as Pagination,
+  yo 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,
-  ir 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,
+  xr as TopAppBar,
   q as checkboxCheckedIconCss,
   z as checkboxIconCss,
   E as checkboxUncheckedIconCss,
@@ -108,12 +109,12 @@ export {
   M as getChartColor,
   w as getChartColors,
   A as legendChartMargin,
-  fr 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/components/Button/Button.js

@@ -1,11 +1,11 @@
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
 import b from "react";
-import { ProgressIndicator as f } from "../ProgressIndicator/ProgressIndicator.js";
+import { ProgressIndicatorIndeterminate as f } from "../ProgressIndicator/ProgressIndicatorIndeterminate.js";
 import { cva as h } from "../../styled-system/css/cva.js";
 import { css as x } from "../../styled-system/css/css.js";
 import { cx as _ } from "../../styled-system/css/cx.js";
 import { styled as v } from "../../styled-system/jsx/factory.js";
-const r = {
+const d = {
   color: "sd.system.color.component.onSurface",
   outlineWidth: "sd.system.dimension.border.medium",
   outlineStyle: "solid",
@@ -25,7 +25,7 @@ const r = {
     color: "sd.system.color.interaction.disabledOnSurface",
     outline: "none"
   }
-}, l = h({
+}, a = h({
   base: {
     borderRadius: "sd.system.dimension.radius.full",
     position: "relative",
@@ -87,9 +87,9 @@ const r = {
           color: "sd.system.color.interaction.disabledOnSurface"
         }
       },
-      outlined: r,
+      outlined: d,
       rectangle: {
-        ...r,
+        ...d,
         borderRadius: "sd.system.dimension.radius.medium"
       }
     },
@@ -118,18 +118,18 @@ const r = {
     styleType: "filled",
     size: "medium"
   }
-}), n = v("span", {
+}), i = v("span", {
   base: {
     position: "relative",
     zIndex: "sd.system.elevation.zIndex.base"
   }
-}), P = b.forwardRef(
-  (o, a) => {
+}), R = b.forwardRef(
+  (n, l) => {
     const [
-      d,
+      r,
       { children: m, leftIcon: e, rightIcon: s, isLoading: t, className: c, ...y }
-    ] = l.splitVariantProps(o), p = l(d), u = x(
-      e || s ? o.size === "medium" ? {
+    ] = a.splitVariantProps(n), p = a(r), u = x(
+      e || s ? n.size === "medium" ? {
         //アイコンがある側 `spacing.medium`、無い側は`spacing.extraLarge`
         paddingLeft: e ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge",
         paddingRight: s ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge"
@@ -142,26 +142,27 @@ const r = {
     return /* @__PURE__ */ g(
       "button",
       {
-        ref: a,
+        ref: l,
         className: _(p, u, c),
         ...y,
         children: [
-          t && /* @__PURE__ */ i(
+          t && /* @__PURE__ */ o(
             f,
             {
-              size: d.size,
-              color: o.styleType === void 0 || o.styleType === "filled" ? "white" : "gray"
+              type: "circular",
+              size: r.size || "medium",
+              color: "subtle"
             }
           ),
-          !t && e && /* @__PURE__ */ i(n, { p: "2px", children: e }),
-          /* @__PURE__ */ i(n, { children: m }),
-          !t && s && /* @__PURE__ */ i(n, { p: "2px", children: s })
+          !t && e && /* @__PURE__ */ o(i, { p: "2px", children: e }),
+          /* @__PURE__ */ o(i, { children: m }),
+          !t && s && /* @__PURE__ */ o(i, { p: "2px", children: s })
         ]
       }
     );
   }
 );
 export {
-  P as Button,
-  l as ButtonStyle
+  R as Button,
+  a as ButtonStyle
 };

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export declare const AnimatedArc: React.FC<{
+    className?: string;
+    radius: number;
+    width: number;
+}>;

package/dist/components/ProgressIndicator/AnimatedArc.js

@@ -0,0 +1,46 @@
+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);
+    };
+    return a.current = requestAnimationFrame(e), () => {
+      a.current != null && cancelAnimationFrame(a.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(
+    "path",
+    {
+      d: l,
+      transform: `rotate(${d})`,
+      strokeLinecap: "butt",
+      stroke: "currentColor",
+      strokeWidth: c,
+      fill: "none",
+      className: f
+    }
+  );
+};
+export {
+  S as AnimatedArc
+};

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

@@ -1,29 +1,11 @@
-import { ComponentProps } from 'react';
-import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const ProgressIndicatorStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
-    size: {
-        small: {
-            width: "16px";
-            height: "16px";
-        };
-        medium: {
-            width: "24px";
-            height: "24px";
-        };
-        large: {
-            width: "96px";
-            height: "96px";
-        };
-    };
-    color: {
-        gray: {
-            stroke: "sd.reference.color.scale.gray.400";
-        };
-        white: {
-            stroke: "sd.reference.color.scale.white.1000";
-        };
-    };
-}>;
-type ProgressIndicatorProps = ComponentProps<"svg"> & RecipeVariantProps<typeof ProgressIndicatorStyle>;
-export declare const ProgressIndicator: ({ className, ...props }: ProgressIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { default as React } from 'react';
+export interface ProgressIndicatorProps extends React.ComponentProps<"div"> {
+    type?: "linear" | "circular";
+    size?: "small" | "medium" | "large";
+    value?: number;
+    max?: number;
+}
+export declare const ProgressIndicator: {
+    ({ value, max, type, size, className, style, ...props }: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -1,65 +1,223 @@
-import { jsx as e } from "react/jsx-runtime";
-import { cva as n } from "../../styled-system/css/cva.js";
-import { cx as l } from "../../styled-system/css/cx.js";
-const r = n({
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import { useMemo as v } from "react";
+import { describeArc as b } from "./util.js";
+import { cx as h } from "../../styled-system/css/cx.js";
+import { cva as c } from "../../styled-system/css/cva.js";
+const u = c({
   base: {
-    animation: "1s linear infinite spin",
-    stroke: "sd.reference.color.scale.gray.400"
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
   },
   variants: {
+    type: {
+      linear: {
+        width: "100%"
+      },
+      circular: {}
+    },
     size: {
-      small: {
+      small: {},
+      medium: {},
+      large: {}
+    }
+  },
+  compoundVariants: [
+    {
+      type: "linear",
+      size: "small",
+      css: {
+        height: "4px"
+      }
+    },
+    {
+      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"
+  }
+}), p = c({
+  base: {
+    position: "absolute",
+    backgroundColor: "sd.reference.color.scale.gray.100",
+    overflow: "hidden"
+  },
+  variants: {
+    type: {
+      linear: {
+        width: "calc(100% - 4px)",
+        height: "100%",
+        borderRadius: "sd.system.dimension.radius.full"
       },
-      medium: {
-        width: "24px",
-        height: "24px"
-      },
-      large: {
-        width: "96px",
-        height: "96px"
+      circular: {
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        fill: "none"
       }
     },
-    color: {
-      gray: {
-        stroke: "sd.reference.color.scale.gray.400"
+    size: {
+      small: {},
+      medium: {},
+      large: {}
+    }
+  },
+  compoundVariants: []
+}), g = c({
+  base: {
+    position: "absolute",
+    backgroundColor: "sd.system.color.impression.primary"
+  },
+  variants: {
+    type: {
+      linear: {
+        left: "0px",
+        height: "100%",
+        borderRadius: "0"
       },
-      white: {
-        stroke: "sd.reference.color.scale.white.1000"
+      circular: {
+        width: "100%",
+        height: "100%",
+        fill: "none",
+        stroke: "sd.system.color.impression.primary",
+        strokeLinecap: "butt",
+        transformOrigin: "center"
       }
+    },
+    size: {
+      small: {},
+      medium: {},
+      large: {}
     }
   },
-  defaultVariants: {
-    size: "medium",
-    color: "gray"
-  }
-}), d = ({
-  className: t,
-  ...s
+  compoundVariants: []
+}), w = (t) => ({
+  small: { radius: 8, strokeWidth: 2 },
+  medium: { radius: 12, strokeWidth: 4 },
+  large: { radius: 24, strokeWidth: 4 }
+})[t], k = ({
+  value: t = 0,
+  max: o = 1,
+  type: i = "linear",
+  size: s = "medium",
+  className: n,
+  style: d,
+  ...m
 }) => {
-  const [o, i] = r.splitVariantProps(s), a = r(o);
-  return /* @__PURE__ */ e(
-    "svg",
+  const l = Math.min(Math.max(t / o * 100, 0), 100);
+  if (i === "circular") {
+    const { radius: r, strokeWidth: e } = w(s), x = v(() => {
+      const y = l / 100 * 360 - 1e-5;
+      return b(
+        r + e,
+        r + e,
+        r,
+        0,
+        y
+      );
+    }, [l, r, e]);
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        className: h(u({ type: i, size: s }), n),
+        role: "progressbar",
+        "aria-valuenow": t,
+        "aria-valuemin": 0,
+        "aria-valuemax": o,
+        style: d,
+        ...m,
+        children: /* @__PURE__ */ f(
+          "svg",
+          {
+            viewBox: `0 0 ${r * 2 + e * 2} ${r * 2 + e * 2}`,
+            style: { width: "100%", height: "100%" },
+            children: [
+              /* @__PURE__ */ a(
+                "circle",
+                {
+                  cx: r + e,
+                  cy: r + e,
+                  r,
+                  className: p({ type: i, size: s }),
+                  stroke: "var(--colors-sd-reference-color-scale-gray-100)",
+                  strokeWidth: e
+                }
+              ),
+              l > 0 && /* @__PURE__ */ a(
+                "path",
+                {
+                  d: x,
+                  className: g({ type: i, size: s }),
+                  strokeWidth: e * 2
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ a(
+    "div",
     {
-      width: "48",
-      height: "48",
-      viewBox: "0 0 48 48",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: l(a, t),
-      ...i,
-      children: /* @__PURE__ */ e(
-        "path",
+      className: h(u({ type: i, size: s }), n),
+      role: "progressbar",
+      "aria-valuenow": t,
+      "aria-valuemin": 0,
+      "aria-valuemax": o,
+      style: d,
+      ...m,
+      children: /* @__PURE__ */ a("div", { className: p({ type: i, size: s }), children: /* @__PURE__ */ a(
+        "div",
         {
-          d: "M24 44C27.9556 44 31.8224 42.827 35.1114 40.6294C38.4004 38.4318 40.9638 35.3082 42.4776 31.6537C43.9913 27.9992 44.3874 23.9778 43.6157 20.0982C42.844 16.2186 40.9392 12.6549 38.1421 9.85786C35.3451 7.06082 31.7814 5.156 27.9018 4.38429C24.0222 3.61259 20.0008 4.00866 16.3463 5.52241C12.6918 7.03616 9.56821 9.59962 7.37059 12.8886C5.17297 16.1776 3.99998 20.0444 3.99998 24",
-          strokeWidth: "4"
+          className: g({ type: i, size: s }),
+          style: {
+            width: `${l}%`
+          }
         }
-      )
+      ) })
     }
   );
 };
+k.displayName = "ProgressIndicator";
 export {
-  d as ProgressIndicator,
-  r as ProgressIndicatorStyle
+  k as ProgressIndicator
 };

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface ProgressIndicatorIndeterminateProps extends React.ComponentProps<"div"> {
+    type?: "linear" | "circular";
+    size?: "small" | "medium" | "large";
+    color?: "primary" | "subtle";
+}
+export declare const ProgressIndicatorIndeterminate: {
+    ({ type, size, color, className, style, ...props }: ProgressIndicatorIndeterminateProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};