@serendie/ui 3.5.1 → 3.6.0-dev.202606260532

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

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

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

@@ -2,5 +2,5 @@ import { TableOptions } from '@tanstack/react-table';
 export interface DataTableComponentProps<TData = Record<string, unknown>> extends Omit<TableOptions<TData>, "getCoreRowModel" | "getSortedRowModel"> {
     className?: string;
 }
-export declare function DataTableComponent<TData = Record<string, unknown>>({ className, enableRowSelection, onRowSelectionChange, onSortingChange, state, ...tableOptions }: DataTableComponentProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableComponent<TData = Record<string, unknown>>({ className, enableRowSelection, onRowSelectionChange, onSortingChange, state, ...tableOptions }: DataTableComponentProps<TData>): import("react").JSX.Element;
 export default DataTableComponent;

package/dist/components/DataTable/table/BodyCheckbox.d.ts

@@ -1,4 +1,4 @@
 import { ChoiceBoxProps } from '../../ChoiceBox';
 export declare const BodyCheckbox: ({ checked, onChange, value, state, ...props }: {
     state?: "enabled" | "hovered" | "selected";
-} & Omit<ChoiceBoxProps, "type">) => import("react/jsx-runtime").JSX.Element;
+} & Omit<ChoiceBoxProps, "type">) => import("react").JSX.Element;

package/dist/components/Divider/Divider.d.ts

@@ -29,5 +29,5 @@ export declare const DividerStyle: import('../../../styled-system/types').Recipe
     };
 }>;
 type DividerProps = ComponentProps<"hr"> & RecipeVariantProps<typeof DividerStyle>;
-export declare const Divider: (props: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Divider: (props: DividerProps) => import("react").JSX.Element;
 export {};

package/dist/components/List/List.d.ts

@@ -1,2 +1,2 @@
 import { ComponentProps } from 'react';
-export declare const List: ({ children, ...props }: ComponentProps<"ul">) => import("react/jsx-runtime").JSX.Element;
+export declare const List: ({ children, ...props }: ComponentProps<"ul">) => import("react").JSX.Element;

package/dist/components/List/ListItem.d.ts

@@ -1,8 +1,19 @@
-import { ComponentProps } from 'react';
-export declare const ListItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "root" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
-    isLargeLeftIcon: {
+import { default as React, ComponentProps } from 'react';
+export declare const ListItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "root" | "badge" | "wrapper" | "textGroup" | "subDescription" | "trailingElement" | "headingElement", {
+    isLargeHeadingElement: {
         true: {
-            leftIcon: {
+            headingElement: {
+                "& svg": {
+                    width: "40px";
+                    height: "40px";
+                };
+            };
+        };
+        false: {};
+    };
+    isLargeTrailingElement: {
+        true: {
+            trailingElement: {
                 "& svg": {
                     width: "40px";
                     height: "40px";
@@ -22,25 +33,44 @@ export declare const ListItemStyle: import('../../../styled-system/types').SlotR
 type ListItemBaseProps = {
     title: string;
     description?: string;
-    rightIcon?: React.ReactElement;
-    leftIcon?: React.ReactElement;
-    isLargeLeftIcon?: boolean;
+    subDescription?: string;
+    trailingElement?: React.ReactElement;
+    headingElement?: React.ReactElement;
+    isLargeHeadingElement?: boolean;
+    isLargeTrailingElement?: boolean;
     badge?: number;
     children?: React.ReactNode;
     disabled?: boolean;
     selected?: boolean;
     focusVisible?: boolean;
     size?: "small";
+    /** @deprecated `leftIcon` は廃止予定です。`headingElement` を使ってください */
+    leftIcon?: React.ReactElement;
+    /** @deprecated `rightIcon` は廃止予定です。`trailingElement` を使ってください */
+    rightIcon?: React.ReactElement;
+    /** @deprecated `isLargeLeftIcon` は廃止予定です。`isLargeHeadingElement` を使ってください */
+    isLargeLeftIcon?: boolean;
+    /** @deprecated `isLargeRightIcon` は廃止予定です。`isLargeTrailingElement` を使ってください */
+    isLargeRightIcon?: boolean;
 };
-type ExclusiveRightItemProps = ({
+type ExclusiveTrailingItemProps = ({
     badge?: number;
 } & {
+    trailingElement?: never;
+    isLargeTrailingElement?: never;
+    /** @deprecated `rightIcon` は廃止予定です。`trailingElement` を使ってください */
     rightIcon?: never;
-}) | ({
+    /** @deprecated `isLargeRightIcon` は廃止予定です。`isLargeTrailingElement` を使ってください */
+    isLargeRightIcon?: never;
+}) | {
     badge?: never;
-} & {
+    trailingElement?: React.ReactElement;
+    isLargeTrailingElement?: boolean;
+    /** @deprecated `rightIcon` は廃止予定です。`trailingElement` を使ってください */
     rightIcon?: React.ReactElement;
-});
-type ListItemProps = ComponentProps<"li"> & ListItemBaseProps & ExclusiveRightItemProps;
+    /** @deprecated `isLargeRightIcon` は廃止予定です。`isLargeTrailingElement` を使ってください */
+    isLargeRightIcon?: boolean;
+};
+type ListItemProps = ComponentProps<"li"> & ListItemBaseProps & ExclusiveTrailingItemProps;
 export declare const ListItem: React.FC<ListItemProps>;
 export {};

package/dist/components/List/ListItem.js

@@ -1,17 +1,19 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { NotificationBadge as b } from "../NotificationBadge/NotificationBadge.js";
-import { cx as o } from "../../styled-system/css/cx.js";
-import { css as c } from "../../styled-system/css/css.js";
-import { sva as v } from "../../styled-system/css/sva.js";
-const p = v({
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { useRef as D, useEffect as G } from "react";
+import { NotificationBadge as O } from "../NotificationBadge/NotificationBadge.js";
+import { cx as i } from "../../styled-system/css/cx.js";
+import { css as g } from "../../styled-system/css/css.js";
+import { sva as P } from "../../styled-system/css/sva.js";
+const E = P({
   slots: [
     "root",
     "wrapper",
     "textGroup",
     "title",
     "description",
-    "rightIcon",
-    "leftIcon",
+    "subDescription",
+    "trailingElement",
+    "headingElement",
     "badge"
   ],
   base: {
@@ -64,8 +66,6 @@ const p = v({
       }
     },
     description: {
-      display: "flex",
-      flexDirection: "column",
       textStyle: "sd.system.typography.body.extraSmall_compact",
       color: "sd.system.color.component.onSurfaceVariant",
       _expanded: {
@@ -75,7 +75,17 @@ const p = v({
         opacity: 0.3
       }
     },
-    leftIcon: {
+    subDescription: {
+      textStyle: "sd.system.typography.body.extraSmall_compact",
+      color: "sd.system.color.component.onSurfaceVariant",
+      _expanded: {
+        textStyle: "sd.system.typography.body.extraSmall_expanded"
+      },
+      _disabled: {
+        opacity: 0.3
+      }
+    },
+    headingElement: {
       flexShrink: 0,
       "& svg": {
         display: "block",
@@ -88,7 +98,7 @@ const p = v({
         opacity: 0.3
       }
     },
-    rightIcon: {
+    trailingElement: {
       flexShrink: 0,
       "& svg": {
         width: "24px",
@@ -99,17 +109,24 @@ const p = v({
       }
     },
     badge: {
-      position: "absolute",
-      right: "sd.system.dimension.spacing.medium",
-      top: "sd.system.dimension.spacing.extraSmall",
-      height: 24,
-      minW: 24
+      flexShrink: 0
     }
   },
   variants: {
-    isLargeLeftIcon: {
+    isLargeHeadingElement: {
+      true: {
+        headingElement: {
+          "& svg": {
+            width: "40px",
+            height: "40px"
+          }
+        }
+      },
+      false: {}
+    },
+    isLargeTrailingElement: {
       true: {
-        leftIcon: {
+        trailingElement: {
           "& svg": {
             width: "40px",
             height: "40px"
@@ -126,65 +143,95 @@ const p = v({
       }
     }
   }
-}), L = ({
-  leftIcon: a,
+}), Y = ({
+  headingElement: v,
+  trailingElement: b,
+  title: w,
+  description: s,
+  subDescription: a,
+  badge: n,
+  children: S,
+  disabled: _,
+  selected: L,
+  focusVisible: N,
+  className: H,
+  leftIcon: l,
   rightIcon: r,
-  title: m,
-  description: i,
-  badge: l,
-  children: d,
-  disabled: x,
-  selected: y,
-  focusVisible: g,
-  className: h,
-  ...n
+  isLargeLeftIcon: o,
+  isLargeRightIcon: d,
+  ...m
 }) => {
-  const [u, f] = p.splitVariantProps(n), e = p(u);
-  return /* @__PURE__ */ s("li", { className: o(e.root, h), ...f, children: [
-    /* @__PURE__ */ s(
-      "div",
-      {
-        tabIndex: 1,
-        className: o(
-          e.wrapper,
-          i && c({ alignItems: "flex-start" })
+  const y = D(!1);
+  G(() => {
+    y.current || process.env.NODE_ENV !== "production" && (l || r || o || d) && (y.current = !0, l && console.warn(
+      "[ListItem] `leftIcon` は廃止予定です。`headingElement` を使ってください。"
+    ), r && console.warn(
+      "[ListItem] `rightIcon` は廃止予定です。`trailingElement` を使ってください。"
+    ), o && console.warn(
+      "[ListItem] `isLargeLeftIcon` は廃止予定です。`isLargeHeadingElement` を使ってください。"
+    ), d && console.warn(
+      "[ListItem] `isLargeRightIcon` は廃止予定です。`isLargeTrailingElement` を使ってください。"
+    ));
+  }, []);
+  const x = v ?? l, h = b ?? r, c = m.isLargeHeadingElement ?? o, u = m.isLargeTrailingElement ?? d, [T, k] = E.splitVariantProps(m), e = E({
+    ...T,
+    isLargeHeadingElement: c,
+    isLargeTrailingElement: u
+  }), p = (!!s || !!a) && !(!!c && !!s && !a), I = i(
+    e.wrapper,
+    p && g({ alignItems: "flex-start" })
+  ), V = i(
+    e.headingElement,
+    p && g({ marginTop: "sd.system.dimension.spacing.twoExtraSmall" })
+  ), C = i(
+    e.trailingElement,
+    p && g({ marginTop: "sd.system.dimension.spacing.twoExtraSmall" })
+  );
+  return /* @__PURE__ */ t("li", { className: i(e.root, H), ...k, children: /* @__PURE__ */ f(
+    "div",
+    {
+      tabIndex: 1,
+      className: I,
+      "data-disabled": _ ? !0 : void 0,
+      "data-selected": L ? !0 : void 0,
+      "data-focus-visible": N ? !0 : void 0,
+      children: [
+        x && /* @__PURE__ */ t(
+          "div",
+          {
+            className: V,
+            style: c ? { padding: "0", width: "40px", height: "40px" } : { padding: "0", width: "24px", height: "24px" },
+            children: x
+          }
         ),
-        "data-disabled": x ? !0 : void 0,
-        "data-selected": y ? !0 : void 0,
-        "data-focus-visible": g ? !0 : void 0,
-        children: [
-          a && /* @__PURE__ */ t(
-            "div",
-            {
-              className: e.leftIcon,
-              style: n.isLargeLeftIcon ? { padding: "0", width: "40px", height: "40px" } : { padding: "0", width: "24px", height: "24px" },
-              children: a
-            }
-          ),
-          /* @__PURE__ */ s(
-            "div",
-            {
-              className: o(
-                e.textGroup,
-                (!!i || !!d) && c({ alignItems: "flex-start" })
-              ),
-              children: [
-                /* @__PURE__ */ t("span", { className: e.title, children: m }),
-                /* @__PURE__ */ s("div", { className: e.description, children: [
-                  i,
-                  d
-                ] })
-              ]
-            }
-          ),
-          r && /* @__PURE__ */ t("div", { className: e.rightIcon, children: r })
-        ]
-      }
-    ),
-    l && /* @__PURE__ */ t("div", { className: e.badge, children: /* @__PURE__ */ t(b, { count: l, variant: "secondary" }) })
-  ] });
+        /* @__PURE__ */ f("div", { className: e.textGroup, children: [
+          /* @__PURE__ */ t("span", { className: e.title, children: w }),
+          s && /* @__PURE__ */ t("span", { className: e.description, children: s }),
+          a && /* @__PURE__ */ t("span", { className: e.subDescription, children: a }),
+          S
+        ] }),
+        h && /* @__PURE__ */ t(
+          "div",
+          {
+            className: C,
+            style: u ? { width: "40px", height: "40px" } : { width: "24px", height: "24px" },
+            children: h
+          }
+        ),
+        n != null && n > 0 && /* @__PURE__ */ t("div", { className: e.badge, children: /* @__PURE__ */ t(
+          O,
+          {
+            count: n,
+            variant: "secondary",
+            size: "small",
+            position: "relative"
+          }
+        ) })
+      ]
+    }
+  ) });
 };
 export {
-  L as ListItem,
-  p as ListItemStyle
+  Y as ListItem,
+  E as ListItemStyle
 };

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

@@ -6,6 +6,6 @@ export interface ProgressIndicatorProps extends React.ComponentProps<"div"> {
     max?: number;
 }
 export declare const ProgressIndicator: {
-    ({ value, max, type, size, className, style, ...props }: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;
+    ({ value, max, type, size, className, style, ...props }: ProgressIndicatorProps): React.JSX.Element;
     displayName: string;
 };

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): import("react/jsx-runtime").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/dist/components/Tabs/TabItem.d.ts

@@ -18,5 +18,5 @@ type ExclusiveBadgeProps = ({
     dot?: boolean;
 });
 export type TabItemProps = TabItemBaseProps & RecipeVariantProps<typeof TabItemStyle> & ArkTabs.TriggerProps & ExclusiveBadgeProps;
-export declare const TabItem: ({ title, value, disabled, dot, badge, className, ...props }: TabItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabItem: ({ title, value, disabled, dot, badge, className, ...props }: TabItemProps) => import("react").JSX.Element;
 export {};

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 Tabs: ({ children, className, ...props }: ArkTabs.RootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ children, className, ...props }: ArkTabs.RootProps) => import("react").JSX.Element;