@serendie/ui 2.1.3 → 2.2.0-dev.202509240917

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;
+};

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/components/Search/Search.d.ts

@@ -1,6 +1,6 @@
 import { ComboboxRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "input" | "combobox" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
+export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"input" | "icon" | "combobox" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
     size: {
         medium: {
             iconBox: {

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { SelectRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "item" | "root" | "valueText" | "iconBox" | "trigger", {
+export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "item" | "valueText" | "iconBox" | "trigger", {
     size: {
         medium: {
             root: {

package/dist/components/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 import { Switch as ArkSwitch, SwitchRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SwitchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "root" | "helperText" | "textGroup" | "control" | "thumb", import('../../../styled-system/types').SlotRecipeVariantRecord<"label" | "root" | "helperText" | "textGroup" | "control" | "thumb">>;
+export declare const SwitchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "label" | "helperText" | "textGroup" | "control" | "thumb", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "label" | "helperText" | "textGroup" | "control" | "thumb">>;
 type SwitchItemProps = {
     label: string;
     helperText?: string;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,3 +1,3 @@
 import { Tabs as ArkTabs } from '@ark-ui/react';
-export declare const TabsStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root", import('../../../styled-system/types').SlotRecipeVariantRecord<"list" | "root">>;
+export declare const TabsStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "list", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "list">>;
 export declare const Tabs: ({ children, className, ...props }: ArkTabs.RootProps) => import("react/jsx-runtime").JSX.Element;