@serendie/ui 3.5.1 → 3.6.0-dev.202607070300

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/DataTableComponent.js

@@ -1,53 +1,57 @@
-import { jsxs as M, jsx as l } from "react/jsx-runtime";
-import { useReactTable as T } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { useState as w } from "react";
+import { jsxs as p, jsx as l } from "react/jsx-runtime";
+import { useReactTable as M } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { useState as f } from "react";
 import { DataTable as r } from "./index.js";
-import { getSortedRowModel as S, getCoreRowModel as u } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
-function y({
+import { getSortedRowModel as T, getCoreRowModel as S } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+function g({
   className: s,
-  enableRowSelection: m = !0,
-  onRowSelectionChange: i,
-  onSortingChange: t,
+  enableRowSelection: t = !0,
+  onRowSelectionChange: d,
+  onSortingChange: i,
   state: e,
-  ...R
+  ...c
 }) {
-  const [b, f] = w({}), [p, n] = w([]), d = T({
-    getCoreRowModel: u(),
-    getSortedRowModel: S(),
-    enableRowSelection: m,
-    ...R,
+  const [R, n] = f({}), [u, b] = f([]), m = M({
+    getCoreRowModel: S(),
+    getSortedRowModel: T(),
+    enableRowSelection: t,
+    ...c,
+    defaultColumn: {
+      size: void 0,
+      ...c.defaultColumn
+    },
     state: {
-      rowSelection: (e == null ? void 0 : e.rowSelection) ?? b,
-      sorting: (e == null ? void 0 : e.sorting) ?? p,
+      rowSelection: (e == null ? void 0 : e.rowSelection) ?? R,
+      sorting: (e == null ? void 0 : e.sorting) ?? u,
       ...e
     },
     onRowSelectionChange: (o) => {
-      f(o), i == null || i(o);
+      n(o), d == null || d(o);
     },
     onSortingChange: (o) => {
-      n(o), t == null || t(o);
+      b(o), i == null || i(o);
     }
-  }), c = m !== !1;
-  return /* @__PURE__ */ M(r.Root, { className: s, children: [
-    /* @__PURE__ */ l(r.Thead, { children: d.getHeaderGroups().map((o) => /* @__PURE__ */ l(
+  }), w = t !== !1;
+  return /* @__PURE__ */ p(r.Root, { className: s, children: [
+    /* @__PURE__ */ l(r.Thead, { children: m.getHeaderGroups().map((o) => /* @__PURE__ */ l(
       r.HeaderRow,
       {
         headerGroup: o,
-        enableRowSelection: c,
-        table: d
+        enableRowSelection: w,
+        table: m
       },
       o.id
     )) }),
-    /* @__PURE__ */ l(r.Tbody, { children: d.getRowModel().rows.map((o) => /* @__PURE__ */ l(
+    /* @__PURE__ */ l(r.Tbody, { children: m.getRowModel().rows.map((o) => /* @__PURE__ */ l(
       r.Row,
       {
         row: o,
-        enableRowSelection: c
+        enableRowSelection: w
       },
       o.id
     )) })
   ] });
 }
 export {
-  y as DataTableComponent
+  g as 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/DataTable/table/HeaderCell.js

@@ -1,10 +1,10 @@
-import { jsx as l, jsxs as p } from "react/jsx-runtime";
-import f from "react";
+import { jsx as l, jsxs as f } from "react/jsx-runtime";
+import y from "react";
 import { SerendieSymbol as a } from "@serendie/symbols";
-import { css as y } from "../../../styled-system/css/css.js";
-import { cx as u } from "../../../styled-system/css/cx.js";
-import { cva as g } from "../../../styled-system/css/cva.js";
-const h = g({
+import { css as u } from "../../../styled-system/css/css.js";
+import { cx as g } from "../../../styled-system/css/cx.js";
+import { cva as h } from "../../../styled-system/css/cva.js";
+const x = h({
   base: {
     borderBottomWidth: "1px",
     borderBottomStyle: "solid",
@@ -22,7 +22,7 @@ const h = g({
     whiteSpace: "nowrap"
   },
   defaultVariants: {}
-}), A = f.forwardRef(
+}), B = y.forwardRef(
   ({
     children: s,
     size: r = "medium",
@@ -31,11 +31,12 @@ const h = g({
     sortDirection: n,
     onSort: o,
     className: i,
-    ...m
-  }, c) => /* @__PURE__ */ l(
+    style: m,
+    ...c
+  }, p) => /* @__PURE__ */ l(
     "th",
     {
-      ref: c,
+      ref: p,
       role: "columnheader",
       "aria-sort": n === "asc" ? "ascending" : n === "desc" ? "descending" : e ? "none" : void 0,
       tabIndex: e ? 0 : void 0,
@@ -43,16 +44,17 @@ const h = g({
       onKeyDown: (t) => {
         e && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o == null || o());
       },
-      className: u(h({ size: r, state: d }), i),
+      className: g(x({ size: r, state: d }), i),
       style: {
         cursor: e ? "pointer" : "default",
-        userSelect: "none"
+        userSelect: "none",
+        ...m
       },
-      ...m,
-      children: /* @__PURE__ */ p(
+      ...c,
+      children: /* @__PURE__ */ f(
         "span",
         {
-          className: y({
+          className: u({
             display: "inline-flex",
             alignItems: "center",
             verticalAlign: "middle"
@@ -85,5 +87,5 @@ const h = g({
   )
 );
 export {
-  A as HeaderCell
+  B as HeaderCell
 };

package/dist/components/DataTable/table/HeaderRow.js

@@ -1,42 +1,43 @@
-import { jsx as n, jsxs as g } from "react/jsx-runtime";
-import f from "react";
-import { flexRender as u } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import u from "react";
+import { flexRender as f } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
 import { DataTable as t } from "../index.js";
-import { css as R } from "../../../styled-system/css/css.js";
-const w = ({
-  headerGroup: r,
-  enableRowSelection: d,
+import { css as w } from "../../../styled-system/css/css.js";
+const R = ({
+  headerGroup: l,
+  enableRowSelection: m,
   table: o,
-  children: l,
+  children: n,
   className: c
-}, s) => l ? /* @__PURE__ */ n(t.Tr, { ref: s, className: c, children: l }) : !r || !o ? null : /* @__PURE__ */ g(t.Tr, { ref: s, className: c, children: [
-  d && /* @__PURE__ */ n(
+}, s) => n ? /* @__PURE__ */ r(t.Tr, { ref: s, className: c, children: n }) : !l || !o ? null : /* @__PURE__ */ g(t.Tr, { ref: s, className: c, children: [
+  m && /* @__PURE__ */ r(
     t.HeaderCheckbox,
     {
       checked: o.getIsSomeRowsSelected() ? "indeterminate" : !!o.getIsAllRowsSelected(),
       onChange: o.getToggleAllRowsSelectedHandler(),
       value: "select-all",
-      className: R({
+      className: w({
         verticalAlign: "middle"
       })
     }
   ),
-  r.headers.map((e) => {
-    const i = e.column.getCanSort(), a = e.column.getIsSorted();
-    return /* @__PURE__ */ n(
+  l.headers.map((e) => {
+    const d = e.column.getCanSort(), a = e.column.getIsSorted();
+    return /* @__PURE__ */ r(
       t.HeaderCell,
       {
-        sortable: i,
+        sortable: d,
         sortDirection: a,
         onSort: () => e.column.toggleSorting(),
-        children: u(e.column.columnDef.header, e.getContext())
+        style: e.column.columnDef.size != null ? { width: e.getSize() } : void 0,
+        children: f(e.column.columnDef.header, e.getContext())
       },
       e.id
     );
   })
-] }, r.id), m = f.forwardRef(w);
-m.displayName = "HeaderRow";
-const T = m;
+] }, l.id), i = u.forwardRef(R);
+i.displayName = "HeaderRow";
+const D = i;
 export {
-  T as HeaderRow
+  D as HeaderRow
 };

package/dist/components/DataTable/table/Row.js

@@ -1,10 +1,10 @@
-import { jsx as n, jsxs as f } from "react/jsx-runtime";
-import u from "react";
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
+import f from "react";
 import { flexRender as y } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
 import { DataTable as o } from "../index.js";
-import { cx as l } from "../../../styled-system/css/cx.js";
+import { cx as m } from "../../../styled-system/css/cx.js";
 import { cva as g } from "../../../styled-system/css/cva.js";
-const m = g({
+const l = g({
   base: {
     _hover: {
       _after: {
@@ -58,18 +58,18 @@ const m = g({
   o.Tr,
   {
     ref: i,
-    className: l(
-      m({ state: d ? "selected" : void 0 }),
+    className: m(
+      l({ state: d ? "selected" : void 0 }),
       s
     ),
     children: r
   }
-) : e ? /* @__PURE__ */ f(
+) : e ? /* @__PURE__ */ p(
   o.Tr,
   {
     ref: i,
-    className: l(
-      m({
+    className: m(
+      l({
         state: e.getIsSelected() ? "selected" : void 0
       }),
       s
@@ -84,17 +84,25 @@ const m = g({
         }
       ),
       e.getVisibleCells().map((t) => {
-        const p = x(t);
-        return /* @__PURE__ */ n(o.BodyCell, { type: p, children: y(t.column.columnDef.cell, t.getContext()) }, t.id);
+        const u = x(t);
+        return /* @__PURE__ */ n(
+          o.BodyCell,
+          {
+            type: u,
+            style: t.column.columnDef.size != null ? { width: t.column.getSize() } : void 0,
+            children: y(t.column.columnDef.cell, t.getContext())
+          },
+          t.id
+        );
       })
     ]
   }
-) : null, a = u.forwardRef(v);
+) : null, a = f.forwardRef(v);
 a.displayName = "Row";
-const w = a;
+const R = a;
 function x(e) {
   return e.column.columnDef.meta && "getType" in e.column.columnDef.meta && typeof e.column.columnDef.meta.getType == "function" ? e.column.columnDef.meta.getType(e.row.original) : "default";
 }
 export {
-  w as Row
+  R as Row
 };

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