npm - @serendie/ui - Versions diffs - 3.3.0 → 3.4.0-dev.202605201157 - Mend

@serendie/ui 3.3.0 → 3.4.0-dev.202605201157

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/README.md CHANGED Viewed

@@ -15,12 +15,18 @@
 </div>
 <br/>
-[Serendie Design System](https://serendie.design/)は、多様な事業と人々をつなぎ、新たな価値を生み出すための三菱電機によるオープンなデザインシステムです。<br/>
-[デザイントークン](https://github.com/serendie/design-token)や[Serendie Symbols](https://github.com/serendie/serendie-symbols)など複数のリポジトリから構成され、本リポジトリはSerendie UIを扱います。
+[Serendie Design System](https://serendie.design/)は三菱電機によるオープンなデザインシステムです。<br/>
+[デザイントークン](https://github.com/serendie/design-token)や[Serendie Symbols](https://github.com/serendie/serendie-symbols)など複数のリポジトリから構成されています。本リポジトリはSerendie UIを扱います。
 # Serendie UI
-[Serendie UI Kit (Figma)](https://www.figma.com/community/file/1433690846108785966)と対となるReactベースのUIコンポーネント集です。Figma Code Connectにも対応しており、Storybookと同等の内容が[Figma Devモードでも確認](https://serendie.design/get-started/dev/#section-1)できます。
+次のような特徴を持つ、ReactベースのUIコンポーネントライブラリです。
+- 🎨デザイントークンやUIコンポーネントは[Serendie UI Kit (Figma)](https://www.figma.com/community/file/1433690846108785966)に対応し、デザインと開発でSingle Source of Truthを実現
+- 🌈5つの組み込み[カラーテーマ](https://github.com/serendie/serendie?tab=readme-ov-file#%E3%83%86%E3%83%BC%E3%83%9E%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88)や[カスタムテーミング](https://github.com/serendie/serendie?tab=readme-ov-file#%E3%82%B5%E3%83%96%E3%83%96%E3%83%A9%E3%83%B3%E3%83%89%E5%AF%BE%E5%BF%9C)に対応
+- 🌙ダークモード対応
+- 🌐多言語対応(日英)
+- 🤖[MCPサーバー](https://serendie.design/ai/mcp-server)や[Agent Skills](https://serendie.design/ai/agent-skills)を提供
 ## 使い方
@@ -108,7 +114,11 @@ SSR環境（Next.jsなど）では、ページ読み込み時にテーマが一
 // Next.js App Router: app/layout.tsx
 import { SerendieProvider, ColorSchemeScript } from "@serendie/ui";
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <SerendieProvider lang="ja" colorTheme="konjo" colorMode="system">
       <html suppressHydrationWarning>

package/dist/client.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { ColorSchemeScript as s, getColorSchemeScript as f } from "./theme/initC
 import { formatDateByLang as l, getTranslations as d, useTranslations as S } from "./i18n/index.js";
 import { Accordion as C } from "./components/Accordion/Accordion.js";
 import { AccordionGroup as u } from "./components/Accordion/AccordionGroup.js";
-import { Avatar as y, AvatarStyle as T } from "./components/Avatar/Avatar.js";
+import { Avatar as B, AvatarStyle as T } from "./components/Avatar/Avatar.js";
 import { Badge as P, BadgeCloseButton as D, BadgeStyle as b } from "./components/Badge/Badge.js";
 import { Banner as v } from "./components/Banner/Banner.js";
 import { BottomNavigation as w } from "./components/BottomNavigation/BottomNavigation.js";
@@ -22,7 +22,7 @@ import { DatePicker as so } from "./components/DatePicker/DatePicker.js";
 import { Divider as co, DividerStyle as lo } from "./components/Divider/Divider.js";
 import { Drawer as ho } from "./components/Drawer/Drawer.js";
 import { DropdownMenu as go, DropdownMenuStyle as uo } from "./components/DropdownMenu/DropdownMenu.js";
-import { IconButton as yo, IconButtonStyle as To } from "./components/IconButton/IconButton.js";
+import { IconButton as Bo, IconButtonStyle as To } from "./components/IconButton/IconButton.js";
 import { List as Po } from "./components/List/List.js";
 import { ListItem as bo, ListItemStyle as ko } from "./components/List/ListItem.js";
 import { ModalDialog as Mo } from "./components/ModalDialog/ModalDialog.js";
@@ -36,21 +36,22 @@ import { RadioGroup as Vo } from "./components/RadioButton/RadioGroup.js";
 import { Search as Yo, SearchStyle as Zo } from "./components/Search/Search.js";
 import { Select as $o, SelectStyle as oe } from "./components/Select/Select.js";
 import { Slider as re, SliderStyle as te } from "./components/Slider/Slider.js";
-import { Switch as me, SwitchStyle as pe } from "./components/Switch/Switch.js";
-import { Tabs as xe, TabsStyle as ne } from "./components/Tabs/Tabs.js";
-import { TabItem as fe, TabItemStyle as ce } from "./components/Tabs/TabItem.js";
-import { TextArea as de } from "./components/TextArea/TextArea.js";
-import { TextField as he } from "./components/TextField/TextField.js";
-import { Toast as ge, ToastStyle as ue, toaster as Be } from "./components/Toast/Toast.js";
-import { Tooltip as Te } from "./components/Tooltip/Tooltip.js";
-import { TopAppBar as Pe } from "./components/TopAppBar/TopAppBar.js";
-import { DataTableComponent as be } from "./components/DataTable/DataTableComponent.js";
-import { LanguageProvider as ve, SerendieProvider as Me } from "./i18n/provider.js";
-import { parse as Ae } from "./node_modules/@zag-js/date-picker/dist/date-picker.parse.js";
+import { Steps as me, stepsStyles as pe } from "./components/Steps/Steps.js";
+import { Switch as xe, SwitchStyle as ne } from "./components/Switch/Switch.js";
+import { Tabs as fe, TabsStyle as ce } from "./components/Tabs/Tabs.js";
+import { TabItem as de, TabItemStyle as Se } from "./components/Tabs/TabItem.js";
+import { TextArea as Ce } from "./components/TextArea/TextArea.js";
+import { TextField as ue } from "./components/TextField/TextField.js";
+import { Toast as Be, ToastStyle as Te, toaster as Ie } from "./components/Toast/Toast.js";
+import { Tooltip as De } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as ke } from "./components/TopAppBar/TopAppBar.js";
+import { DataTableComponent as Me } from "./components/DataTable/DataTableComponent.js";
+import { LanguageProvider as Ae, SerendieProvider as Le } from "./i18n/provider.js";
+import { parse as Re } from "./node_modules/@zag-js/date-picker/dist/date-picker.parse.js";
 export {
   C as Accordion,
   u as AccordionGroup,
-  y as Avatar,
+  B as Avatar,
   T as AvatarStyle,
   P as Badge,
   D as BadgeCloseButton,
@@ -68,16 +69,16 @@ export {
   s as ColorSchemeScript,
   po as DashboardWidget,
   xo as DataTable,
-  be as DataTableComponent,
+  Me as DataTableComponent,
   so as DatePicker,
   co as Divider,
   lo as DividerStyle,
   ho as Drawer,
   go as DropdownMenu,
   uo as DropdownMenuStyle,
-  yo as IconButton,
+  Bo as IconButton,
   To as IconButtonStyle,
-  ve as LanguageProvider,
+  Ae as LanguageProvider,
   Po as List,
   bo as ListItem,
   ko as ListItemStyle,
@@ -97,22 +98,23 @@ export {
   oe as SelectStyle,
   W as SerendieChartTheme,
   r as SerendiePreset,
-  Me as SerendieProvider,
+  Le as SerendieProvider,
   re as Slider,
   te as SliderStyle,
-  me as Switch,
-  pe as SwitchStyle,
-  fe as TabItem,
-  ce as TabItemStyle,
-  xe as Tabs,
-  ne as TabsStyle,
-  de as TextArea,
-  he as TextField,
+  me as Steps,
+  xe as Switch,
+  ne as SwitchStyle,
+  de as TabItem,
+  Se as TabItemStyle,
+  fe as Tabs,
+  ce as TabsStyle,
+  Ce as TextArea,
+  ue as TextField,
   a as ThemeContext,
-  ge as Toast,
-  ue as ToastStyle,
-  Te as Tooltip,
-  Pe as TopAppBar,
+  Be as Toast,
+  Te as ToastStyle,
+  De as Tooltip,
+  ke as TopAppBar,
   $ as checkboxCheckedIconCss,
   oo as checkboxIconCss,
   eo as checkboxUncheckedIconCss,
@@ -124,13 +126,14 @@ export {
   f as getColorSchemeScript,
   d as getTranslations,
   J as legendChartMargin,
-  Ae as parseDate,
+  Re as parseDate,
   Jo as radioCheckedIconCss,
   Ko as radioIconCss,
   Oo as radioUncheckedIconCss,
   m as resolveTheme,
   K as spaciousChartMargin,
-  Be as toaster,
+  pe as stepsStyles,
+  Ie as toaster,
   O as useBarChartProps,
   Q as useChartProps,
   V as useLineChartProps,

package/dist/components/Steps/Steps.d.ts ADDED Viewed

@@ -0,0 +1,128 @@
+import { default as React } from 'react';
+import { StepsRootProps } from '@ark-ui/react/steps';
+import { RecipeVariantProps } from '../../../styled-system/css';
+export declare const stepsStyles: import('../../../styled-system/types').SlotRecipeRuntimeFn<"number" | "item" | "title" | "description" | "list" | "separator" | "root" | "trigger" | "indicator" | "indicatorInner" | "checkIcon" | "textContent", {
+    orientation: {
+        horizontal: {
+            root: {
+                flexDirection: "row";
+            };
+            list: {
+                flexDirection: "row";
+                width: "100%";
+            };
+            separator: {
+                height: "sd.reference.dimension.scale.1";
+            };
+            item: {
+                flexDirection: "column";
+                alignItems: "center";
+            };
+            trigger: {
+                flexDirection: "column";
+            };
+            title: {
+                textAlign: "center";
+            };
+            description: {
+                textStyle: "sd.system.typography.label.small_compact";
+                textAlign: "center";
+            };
+        };
+        vertical: {
+            root: {
+                flexDirection: "column";
+            };
+            list: {
+                flexDirection: "column";
+            };
+            separator: {
+                width: "sd.reference.dimension.scale.1";
+            };
+            item: {
+                flexDirection: "column";
+            };
+            trigger: {
+                flexDirection: "row";
+            };
+            textContent: {
+                alignItems: "flex-start";
+            };
+            title: {
+                textStyle: "sd.system.typography.label.large_compact";
+                textAlign: "left";
+            };
+            description: {
+                textStyle: "sd.system.typography.label.small_compact";
+                textAlign: "left";
+            };
+        };
+    };
+    size: {
+        large: {
+            indicator: {
+                width: "sd.system.dimension.spacing.extraLarge";
+                height: "sd.system.dimension.spacing.extraLarge";
+            };
+            number: {
+                textStyle: "sd.system.typography.label.medium_compact";
+            };
+        };
+        small: {
+            indicator: {
+                width: "sd.system.dimension.spacing.small";
+                height: "sd.system.dimension.spacing.small";
+            };
+            number: {
+                textStyle: "sd.system.typography.label.small_compact";
+            };
+            title: {
+                textStyle: "sd.system.typography.label.medium_compact";
+            };
+            description: {
+                textStyle: "sd.system.typography.label.small_compact";
+            };
+        };
+    };
+    type: {
+        default: {
+            indicator: {
+                backgroundColor: "sd.system.color.interaction.disabled";
+                color: "sd.system.color.interaction.disabledOnSurface";
+                "&[data-complete]": {
+                    backgroundColor: "sd.system.color.impression.secondary";
+                    color: "sd.system.color.impression.onSecondary";
+                };
+                "&[data-current]": {
+                    backgroundColor: "sd.system.color.impression.primary";
+                    color: "sd.system.color.impression.onPrimary";
+                };
+            };
+        };
+        subtle: {
+            indicator: {
+                backgroundColor: "sd.system.color.interaction.disabledOnSurface";
+                "&[data-complete]": {
+                    backgroundColor: "sd.system.color.impression.primary";
+                };
+                "&[data-current]": {
+                    backgroundColor: "sd.system.color.component.surface";
+                    borderWidth: "sd.system.dimension.border.thick";
+                    borderStyle: "solid";
+                    borderColor: "sd.system.color.impression.primary";
+                };
+            };
+        };
+    };
+}>;
+export interface StepsItemProps {
+    title: string;
+    description?: string;
+}
+type StepsStyleProps = RecipeVariantProps<typeof stepsStyles>;
+export interface StepsProps extends Omit<StepsRootProps, "orientation">, Omit<NonNullable<StepsStyleProps>, "orientation" | "size"> {
+    items: StepsItemProps[];
+    direction?: "horizontal" | "vertical";
+}
+export declare const Steps: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Steps/Steps.js ADDED Viewed

@@ -0,0 +1,335 @@
+import { jsx as s, jsxs as r } from "react/jsx-runtime";
+import x from "react";
+import { steps_exports as t } from "../../node_modules/@ark-ui/react/dist/components/steps/steps.js";
+import { SerendieSymbolCheck as u } from "@serendie/symbols";
+import { cx as h } from "../../styled-system/css/cx.js";
+import { sva as b } from "../../styled-system/css/sva.js";
+const S = b({
+  slots: [
+    "root",
+    "list",
+    "item",
+    "trigger",
+    "indicator",
+    "indicatorInner",
+    "checkIcon",
+    "number",
+    "separator",
+    "textContent",
+    "title",
+    "description"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      gap: "sd.system.dimension.spacing.none"
+    },
+    list: {
+      display: "flex",
+      gap: "sd.system.dimension.spacing.none"
+    },
+    separator: {
+      position: "absolute",
+      backgroundColor: "sd.system.color.component.outlineDim",
+      zIndex: 1,
+      "&[data-complete]": {
+        backgroundColor: "sd.system.color.impression.primary"
+      }
+    },
+    item: {
+      display: "flex",
+      position: "relative",
+      flex: "1"
+    },
+    trigger: {
+      display: "flex",
+      alignItems: "center",
+      gap: "sd.system.dimension.spacing.small",
+      background: "none",
+      border: "none",
+      cursor: "default",
+      padding: "sd.system.dimension.spacing.none",
+      position: "relative",
+      zIndex: 2
+    },
+    indicator: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "sd.system.dimension.radius.full",
+      flexShrink: 0,
+      position: "relative",
+      zIndex: 3,
+      backgroundColor: "sd.system.color.component.surface"
+    },
+    indicatorInner: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      height: "100%",
+      borderRadius: "sd.system.dimension.radius.full",
+      color: "inherit"
+    },
+    checkIcon: {
+      width: "sd.system.dimension.spacing.medium",
+      height: "sd.system.dimension.spacing.medium"
+    },
+    number: {
+      fontWeight: "500"
+    },
+    textContent: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sd.system.dimension.spacing.extraSmall",
+      zIndex: 1
+    },
+    title: {
+      textStyle: "sd.system.typography.label.large_compact",
+      color: "sd.system.color.component.onSurface",
+      "[data-incomplete] &": {
+        color: "sd.system.color.interaction.disabledOnSurface"
+      }
+    },
+    description: {
+      textStyle: "sd.system.typography.label.small_compact",
+      color: "sd.system.color.component.onSurfaceVariant",
+      "[data-incomplete] &": {
+        color: "sd.system.color.interaction.disabledOnSurface"
+      }
+    }
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: {
+          flexDirection: "row"
+        },
+        list: {
+          flexDirection: "row",
+          width: "100%"
+        },
+        separator: {
+          height: "sd.reference.dimension.scale.1"
+        },
+        item: {
+          flexDirection: "column",
+          alignItems: "center"
+        },
+        trigger: {
+          flexDirection: "column"
+        },
+        title: {
+          textAlign: "center"
+        },
+        description: {
+          textStyle: "sd.system.typography.label.small_compact",
+          textAlign: "center"
+        }
+      },
+      vertical: {
+        root: {
+          flexDirection: "column"
+        },
+        list: {
+          flexDirection: "column"
+        },
+        separator: {
+          width: "sd.reference.dimension.scale.1"
+        },
+        item: {
+          flexDirection: "column"
+        },
+        trigger: {
+          flexDirection: "row"
+        },
+        textContent: {
+          alignItems: "flex-start"
+        },
+        title: {
+          textStyle: "sd.system.typography.label.large_compact",
+          textAlign: "left"
+        },
+        description: {
+          textStyle: "sd.system.typography.label.small_compact",
+          textAlign: "left"
+        }
+      }
+    },
+    size: {
+      large: {
+        indicator: {
+          width: "sd.system.dimension.spacing.extraLarge",
+          height: "sd.system.dimension.spacing.extraLarge"
+        },
+        number: {
+          textStyle: "sd.system.typography.label.medium_compact"
+        }
+      },
+      small: {
+        indicator: {
+          width: "sd.system.dimension.spacing.small",
+          height: "sd.system.dimension.spacing.small"
+        },
+        number: {
+          textStyle: "sd.system.typography.label.small_compact"
+        },
+        title: {
+          textStyle: "sd.system.typography.label.medium_compact"
+        },
+        description: {
+          textStyle: "sd.system.typography.label.small_compact"
+        }
+      }
+    },
+    type: {
+      default: {
+        indicator: {
+          backgroundColor: "sd.system.color.interaction.disabled",
+          color: "sd.system.color.interaction.disabledOnSurface",
+          "&[data-complete]": {
+            backgroundColor: "sd.system.color.impression.secondary",
+            color: "sd.system.color.impression.onSecondary"
+          },
+          "&[data-current]": {
+            backgroundColor: "sd.system.color.impression.primary",
+            color: "sd.system.color.impression.onPrimary"
+          }
+        }
+      },
+      subtle: {
+        indicator: {
+          backgroundColor: "sd.system.color.interaction.disabledOnSurface",
+          "&[data-complete]": {
+            backgroundColor: "sd.system.color.impression.primary"
+          },
+          "&[data-current]": {
+            backgroundColor: "sd.system.color.component.surface",
+            borderWidth: "sd.system.dimension.border.thick",
+            borderStyle: "solid",
+            borderColor: "sd.system.color.impression.primary"
+          }
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      size: "large",
+      css: {
+        separator: {
+          top: "sd.system.dimension.spacing.small",
+          left: "calc(50% + var(--spacing-sd-system-dimension-spacing-small))",
+          right: "calc(-50% + var(--spacing-sd-system-dimension-spacing-small))"
+        }
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "small",
+      css: {
+        separator: {
+          top: "calc(var(--spacing-sd-system-dimension-spacing-small) / 2 - var(--spacing-sd-reference-dimension-scale-1))",
+          left: "calc(50% + var(--spacing-sd-system-dimension-spacing-small) / 2)",
+          right: "calc(-50% + var(--spacing-sd-system-dimension-spacing-small) / 2)"
+        }
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "large",
+      css: {
+        item: {
+          paddingBottom: "sd.system.dimension.spacing.twoExtraLarge"
+        },
+        trigger: {
+          alignItems: "flex-start",
+          gap: "sd.system.dimension.spacing.extraSmall"
+        },
+        textContent: {
+          paddingTop: "sd.system.dimension.spacing.twoExtraSmall"
+        },
+        separator: {
+          left: "calc(var(--spacing-sd-system-dimension-spacing-small) - 0.5px)",
+          top: "sd.system.dimension.spacing.small",
+          bottom: "-sd.system.dimension.spacing.large"
+        },
+        title: {
+          textStyle: "sd.system.typography.label.large_compact"
+        }
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "small",
+      css: {
+        item: {
+          paddingBottom: "sd.system.dimension.spacing.extraLarge",
+          "--steps-indicator-size": "var(--spacing-sd-system-dimension-spacing-small)",
+          "--steps-indicator-offset": "var(--spacing-sd-system-dimension-spacing-large)"
+        },
+        trigger: {
+          alignItems: "flex-start",
+          gap: "sd.system.dimension.spacing.large"
+        },
+        indicator: {
+          marginTop: "var(--steps-indicator-offset)"
+        },
+        textContent: {
+          marginTop: "calc(var(--spacing-sd-system-dimension-spacing-large) + var(--spacing-sd-reference-dimension-scale-2))"
+        },
+        separator: {
+          left: "calc(var(--steps-indicator-size) / 2 - 0.5px)",
+          top: "calc(var(--steps-indicator-offset) + var(--steps-indicator-size) + var(--spacing-sd-system-dimension-spacing-twoExtraSmall))",
+          bottom: "calc(-1 * var(--steps-indicator-offset) + var(--spacing-sd-system-dimension-spacing-twoExtraSmall))"
+        },
+        title: {
+          textStyle: "sd.system.typography.label.large_compact"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    type: "default",
+    size: "large"
+  }
+}), v = x.forwardRef(
+  ({ items: o, direction: c = "horizontal", type: a = "default", className: d, ...m }, p) => {
+    const g = a === "subtle" ? "small" : "large", l = c, e = S({ orientation: l, size: g, type: a });
+    return /* @__PURE__ */ s(
+      t.Root,
+      {
+        ref: p,
+        ...m,
+        count: o.length,
+        orientation: l,
+        className: h(e.root, d),
+        children: /* @__PURE__ */ s(t.List, { className: e.list, children: o.map((n, i) => {
+          const y = i === o.length - 1;
+          return /* @__PURE__ */ r(t.Item, { index: i, className: e.item, children: [
+            /* @__PURE__ */ r(t.Trigger, { className: e.trigger, children: [
+              /* @__PURE__ */ s(t.Indicator, { className: e.indicator, children: /* @__PURE__ */ s("div", { className: e.indicatorInner, children: a !== "subtle" && /* @__PURE__ */ s(t.ItemContext, { children: (f) => f.completed ? /* @__PURE__ */ s(
+                u,
+                {
+                  className: e.checkIcon
+                }
+              ) : /* @__PURE__ */ s("span", { className: e.number, children: i + 1 }) }) }) }),
+              /* @__PURE__ */ r("div", { className: e.textContent, children: [
+                /* @__PURE__ */ s("div", { className: e.title, children: n.title }),
+                n.description && /* @__PURE__ */ s("div", { className: e.description, children: n.description })
+              ] })
+            ] }),
+            !y && /* @__PURE__ */ s(t.Separator, { className: e.separator })
+          ] }, i);
+        }) })
+      }
+    );
+  }
+);
+v.displayName = "Steps";
+export {
+  v as Steps,
+  S as stepsStyles
+};

package/dist/components/Steps/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Steps, stepsStyles } from './Steps';
2	+ export type { StepsProps, StepsItemProps } from './Steps';

package/dist/components/Steps/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { Steps as t, stepsStyles as p } from "./Steps.js";
+export {
+  t as Steps,
+  p as stepsStyles
+};

package/dist/index.d.ts CHANGED Viewed

@@ -27,6 +27,7 @@ export * from './components/RadioButton/index.ts';
 export * from './components/Search/index.ts';
 export * from './components/Select/index.ts';
 export * from './components/Slider/index.ts';
+export * from './components/Steps/index.ts';
 export * from './components/Switch/index.ts';
 export * from './components/Tabs/index.ts';
 export * from './components/TextArea/index.ts';