@serendie/ui 3.5.1-dev.202606160617 → 3.5.1-dev.202606240117

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

@@ -14,6 +14,8 @@ export declare const dictionary: {
         readonly "pagination.nextPage": "次のページへ";
         readonly "pagination.goToPage": "ページ{{page}}へ移動";
         readonly "modalDialog.close": "閉じる";
+        readonly "breadcrumbs.label": "パンくずリスト";
+        readonly "breadcrumbs.showMore": "折りたたまれた項目を表示";
     };
     readonly en: {
         readonly "common.required": "Required";
@@ -30,5 +32,7 @@ export declare const dictionary: {
         readonly "pagination.nextPage": "Go to next page";
         readonly "pagination.goToPage": "Go to page {{page}}";
         readonly "modalDialog.close": "Close";
+        readonly "breadcrumbs.label": "Breadcrumb";
+        readonly "breadcrumbs.showMore": "Show more breadcrumbs";
     };
 };

package/dist/i18n/dictionary.js

@@ -1,4 +1,4 @@
-const a = {
+const e = {
   ja: {
     "common.required": "必須",
     "textField.clearValue": "値をクリア",
@@ -13,7 +13,9 @@ const a = {
     "pagination.lastPage": "最後のページです",
     "pagination.nextPage": "次のページへ",
     "pagination.goToPage": "ページ{{page}}へ移動",
-    "modalDialog.close": "閉じる"
+    "modalDialog.close": "閉じる",
+    "breadcrumbs.label": "パンくずリスト",
+    "breadcrumbs.showMore": "折りたたまれた項目を表示"
   },
   en: {
     "common.required": "Required",
@@ -29,9 +31,11 @@ const a = {
     "pagination.lastPage": "This is the last page",
     "pagination.nextPage": "Go to next page",
     "pagination.goToPage": "Go to page {{page}}",
-    "modalDialog.close": "Close"
+    "modalDialog.close": "Close",
+    "breadcrumbs.label": "Breadcrumb",
+    "breadcrumbs.showMore": "Show more breadcrumbs"
   }
 };
 export {
-  a as dictionary
+  e as dictionary
 };

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './components/Accordion/index.ts';
 export * from './components/Avatar/index.ts';
 export * from './components/Badge/index.ts';
 export * from './components/Banner/index.ts';
+export * from './components/Breadcrumbs/index.ts';
 export * from './components/BottomNavigation/index.ts';
 export * from './components/Button/index.ts';
 export * from './components/Chart/index.ts';