npm - @serendie/ui - Versions diffs - 3.3.0-dev.202605191319 → 3.3.0-dev.202605200751 - Mend

@serendie/ui 3.3.0-dev.202605191319 → 3.3.0-dev.202605200751

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 (34) hide show

package/README.md CHANGED Viewed

@@ -114,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';