@serendie/ui 3.5.1 → 3.6.0-dev.202606260532

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

@@ -32,7 +32,7 @@ export interface SerendieProviderProps {
  * </SerendieProvider>
  * ```
  */
-export declare function SerendieProvider({ lang, colorTheme, colorMode, children, }: SerendieProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SerendieProvider({ lang, colorTheme, colorMode, children, }: SerendieProviderProps): import("react").JSX.Element;
 /**
  * @deprecated LanguageProvider は SerendieProvider にリネームされました
  */

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

package/dist/index.js

@@ -1,142 +1,146 @@
 import { SerendiePreset as r } from "./preset.js";
 import { ThemeContext as a, resolveTheme as m, useThemeContext as p } from "./theme/ThemeContext.js";
 import { useSystemColorScheme as i } from "./theme/useSystemColorScheme.js";
-import { ColorSchemeScript as s, getColorSchemeScript as f } from "./theme/initColorScheme.js";
+import { ColorSchemeScript as n, getColorSchemeScript as f } from "./theme/initColorScheme.js";
 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 y } from "./components/Accordion/AccordionGroup.js";
-import { Avatar as u, AvatarStyle as T } from "./components/Avatar/Avatar.js";
-import { Badge as P, BadgeCloseButton as D, BadgeStyle as b } from "./components/Badge/Badge.js";
+import { AccordionGroup as u } from "./components/Accordion/AccordionGroup.js";
+import { Avatar as y, AvatarStyle as I } from "./components/Avatar/Avatar.js";
+import { Badge as b, BadgeCloseButton as P, BadgeStyle as D } from "./components/Badge/Badge.js";
 import { Banner as v } from "./components/Banner/Banner.js";
-import { BottomNavigation as w } from "./components/BottomNavigation/BottomNavigation.js";
-import { BottomNavigationItem as L, BottomNavigationItemStyle as N } from "./components/BottomNavigation/BottomNavigationItem.js";
-import { Button as F, ButtonStyle as G } from "./components/Button/Button.js";
-import { SerendieChartTheme as W } from "./components/Chart/SerendieChartTheme.js";
-import { compactChartMargin as q, defaultChartMargin as z, getChartColor as E, getChartColors as H, legendChartMargin as J, spaciousChartMargin as K, useBarChartProps as O, useChartProps as Q, useLineChartProps as V, usePieChartProps as X } from "./components/Chart/SerendieChartProps.js";
-import { CheckBox as Z, CheckBoxStyle as _, checkboxCheckedIconCss as $, checkboxIconCss as oo, checkboxUncheckedIconCss as eo } from "./components/CheckBox/CheckBox.js";
-import { ChoiceBox as to, ChoiceBoxStyle as ao } from "./components/ChoiceBox/ChoiceBox.js";
-import { DashboardWidget as po } from "./components/DashboardWidget/DashboardWidget.js";
-import { DataTable as io } from "./components/DataTable/index.js";
-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 yo } from "./components/DropdownMenu/DropdownMenu.js";
-import { IconButton as uo, 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";
-import { NotificationBadge as Ao } from "./components/NotificationBadge/NotificationBadge.js";
-import { Pagination as No, PaginationStyle as Ro } from "./components/Pagination/Pagination.js";
-import { PasswordField as Go } from "./components/PasswordField/PasswordField.js";
-import { ProgressIndicator as Wo } from "./components/ProgressIndicator/ProgressIndicator.js";
-import { ProgressIndicatorIndeterminate as qo } from "./components/ProgressIndicator/ProgressIndicatorIndeterminate.js";
-import { RadioButton as Eo, RadioButtonStyle as Ho, radioCheckedIconCss as Jo, radioIconCss as Ko, radioUncheckedIconCss as Oo } from "./components/RadioButton/RadioButton.js";
-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 { Steps as me, stepsStyles as pe } from "./components/Steps/Steps.js";
-import { Switch as ie, 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 ye } from "./components/TextField/TextField.js";
-import { Toast as ue, 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";
+import { BreadcrumbItem as w, Breadcrumbs as A, breadcrumbsStyle as L } from "./components/Breadcrumbs/Breadcrumbs.js";
+import { BottomNavigation as R } from "./components/BottomNavigation/BottomNavigation.js";
+import { BottomNavigationItem as G, BottomNavigationItemStyle as U } from "./components/BottomNavigation/BottomNavigationItem.js";
+import { Button as j, ButtonStyle as q } from "./components/Button/Button.js";
+import { SerendieChartTheme as E } from "./components/Chart/SerendieChartTheme.js";
+import { compactChartMargin as J, defaultChartMargin as K, getChartColor as O, getChartColors as Q, legendChartMargin as V, spaciousChartMargin as X, useBarChartProps as Y, useChartProps as Z, useLineChartProps as _, usePieChartProps as $ } from "./components/Chart/SerendieChartProps.js";
+import { CheckBox as eo, CheckBoxStyle as ro, checkboxCheckedIconCss as to, checkboxIconCss as ao, checkboxUncheckedIconCss as mo } from "./components/CheckBox/CheckBox.js";
+import { ChoiceBox as xo, ChoiceBoxStyle as io } from "./components/ChoiceBox/ChoiceBox.js";
+import { DashboardWidget as no } from "./components/DashboardWidget/DashboardWidget.js";
+import { DataTable as co } from "./components/DataTable/index.js";
+import { DatePicker as So } from "./components/DatePicker/DatePicker.js";
+import { Divider as Co, DividerStyle as go } from "./components/Divider/Divider.js";
+import { Drawer as Bo } from "./components/Drawer/Drawer.js";
+import { DropdownMenu as Io, DropdownMenuStyle as To } from "./components/DropdownMenu/DropdownMenu.js";
+import { IconButton as Po, IconButtonStyle as Do } from "./components/IconButton/IconButton.js";
+import { List as vo } from "./components/List/List.js";
+import { ListItem as wo, ListItemStyle as Ao } from "./components/List/ListItem.js";
+import { ModalDialog as No } from "./components/ModalDialog/ModalDialog.js";
+import { NotificationBadge as Fo } from "./components/NotificationBadge/NotificationBadge.js";
+import { Pagination as Uo, PaginationStyle as Wo } from "./components/Pagination/Pagination.js";
+import { PasswordField as qo } from "./components/PasswordField/PasswordField.js";
+import { ProgressIndicator as Eo } from "./components/ProgressIndicator/ProgressIndicator.js";
+import { ProgressIndicatorIndeterminate as Jo } from "./components/ProgressIndicator/ProgressIndicatorIndeterminate.js";
+import { RadioButton as Oo, RadioButtonStyle as Qo, radioCheckedIconCss as Vo, radioIconCss as Xo, radioUncheckedIconCss as Yo } from "./components/RadioButton/RadioButton.js";
+import { RadioGroup as _o } from "./components/RadioButton/RadioGroup.js";
+import { Search as oe, SearchStyle as ee } from "./components/Search/Search.js";
+import { Select as te, SelectStyle as ae } from "./components/Select/Select.js";
+import { Slider as pe, SliderStyle as xe } from "./components/Slider/Slider.js";
+import { Steps as se, stepsStyles as ne } from "./components/Steps/Steps.js";
+import { Switch as ce, SwitchStyle as le } from "./components/Switch/Switch.js";
+import { Tabs as Se, TabsStyle as he } from "./components/Tabs/Tabs.js";
+import { TabItem as ge, TabItemStyle as ue } from "./components/Tabs/TabItem.js";
+import { TextArea as ye } from "./components/TextArea/TextArea.js";
+import { TextField as Te } from "./components/TextField/TextField.js";
+import { Toast as Pe, ToastStyle as De, toaster as ke } from "./components/Toast/Toast.js";
+import { Tooltip as Me } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as Ae } from "./components/TopAppBar/TopAppBar.js";
+import { DataTableComponent as Ne } from "./components/DataTable/DataTableComponent.js";
+import { LanguageProvider as Fe, SerendieProvider as Ge } from "./i18n/provider.js";
+import { parse as We } from "./node_modules/@zag-js/date-picker/dist/date-picker.parse.js";
 export {
   C as Accordion,
-  y as AccordionGroup,
-  u as Avatar,
-  T as AvatarStyle,
-  P as Badge,
-  D as BadgeCloseButton,
-  b as BadgeStyle,
+  u as AccordionGroup,
+  y as Avatar,
+  I as AvatarStyle,
+  b as Badge,
+  P as BadgeCloseButton,
+  D as BadgeStyle,
   v as Banner,
-  w as BottomNavigation,
-  L as BottomNavigationItem,
-  N as BottomNavigationItemStyle,
-  F as Button,
-  G as ButtonStyle,
-  Z as CheckBox,
-  _ as CheckBoxStyle,
-  to as ChoiceBox,
-  ao as ChoiceBoxStyle,
-  s as ColorSchemeScript,
-  po as DashboardWidget,
-  io as DataTable,
-  Me as DataTableComponent,
-  so as DatePicker,
-  co as Divider,
-  lo as DividerStyle,
-  ho as Drawer,
-  go as DropdownMenu,
-  yo as DropdownMenuStyle,
-  uo as IconButton,
-  To as IconButtonStyle,
-  Ae as LanguageProvider,
-  Po as List,
-  bo as ListItem,
-  ko as ListItemStyle,
-  Mo as ModalDialog,
-  Ao as NotificationBadge,
-  No as Pagination,
-  Ro as PaginationStyle,
-  Go as PasswordField,
-  Wo as ProgressIndicator,
-  qo as ProgressIndicatorIndeterminate,
-  Eo as RadioButton,
-  Ho as RadioButtonStyle,
-  Vo as RadioGroup,
-  Yo as Search,
-  Zo as SearchStyle,
-  $o as Select,
-  oe as SelectStyle,
-  W as SerendieChartTheme,
+  R as BottomNavigation,
+  G as BottomNavigationItem,
+  U as BottomNavigationItemStyle,
+  w as BreadcrumbItem,
+  A as Breadcrumbs,
+  j as Button,
+  q as ButtonStyle,
+  eo as CheckBox,
+  ro as CheckBoxStyle,
+  xo as ChoiceBox,
+  io as ChoiceBoxStyle,
+  n as ColorSchemeScript,
+  no as DashboardWidget,
+  co as DataTable,
+  Ne as DataTableComponent,
+  So as DatePicker,
+  Co as Divider,
+  go as DividerStyle,
+  Bo as Drawer,
+  Io as DropdownMenu,
+  To as DropdownMenuStyle,
+  Po as IconButton,
+  Do as IconButtonStyle,
+  Fe as LanguageProvider,
+  vo as List,
+  wo as ListItem,
+  Ao as ListItemStyle,
+  No as ModalDialog,
+  Fo as NotificationBadge,
+  Uo as Pagination,
+  Wo as PaginationStyle,
+  qo as PasswordField,
+  Eo as ProgressIndicator,
+  Jo as ProgressIndicatorIndeterminate,
+  Oo as RadioButton,
+  Qo as RadioButtonStyle,
+  _o as RadioGroup,
+  oe as Search,
+  ee as SearchStyle,
+  te as Select,
+  ae as SelectStyle,
+  E as SerendieChartTheme,
   r as SerendiePreset,
-  Le as SerendieProvider,
-  re as Slider,
-  te as SliderStyle,
-  me as Steps,
-  ie as Switch,
-  ne as SwitchStyle,
-  de as TabItem,
-  Se as TabItemStyle,
-  fe as Tabs,
-  ce as TabsStyle,
-  Ce as TextArea,
-  ye as TextField,
+  Ge as SerendieProvider,
+  pe as Slider,
+  xe as SliderStyle,
+  se as Steps,
+  ce as Switch,
+  le as SwitchStyle,
+  ge as TabItem,
+  ue as TabItemStyle,
+  Se as Tabs,
+  he as TabsStyle,
+  ye as TextArea,
+  Te as TextField,
   a as ThemeContext,
-  ue as Toast,
-  Te as ToastStyle,
-  De as Tooltip,
-  ke as TopAppBar,
-  $ as checkboxCheckedIconCss,
-  oo as checkboxIconCss,
-  eo as checkboxUncheckedIconCss,
-  q as compactChartMargin,
-  z as defaultChartMargin,
+  Pe as Toast,
+  De as ToastStyle,
+  Me as Tooltip,
+  Ae as TopAppBar,
+  L as breadcrumbsStyle,
+  to as checkboxCheckedIconCss,
+  ao as checkboxIconCss,
+  mo as checkboxUncheckedIconCss,
+  J as compactChartMargin,
+  K as defaultChartMargin,
   l as formatDateByLang,
-  E as getChartColor,
-  H as getChartColors,
+  O as getChartColor,
+  Q as getChartColors,
   f as getColorSchemeScript,
   d as getTranslations,
-  J as legendChartMargin,
-  Re as parseDate,
-  Jo as radioCheckedIconCss,
-  Ko as radioIconCss,
-  Oo as radioUncheckedIconCss,
+  V as legendChartMargin,
+  We as parseDate,
+  Vo as radioCheckedIconCss,
+  Xo as radioIconCss,
+  Yo as radioUncheckedIconCss,
   m as resolveTheme,
-  K as spaciousChartMargin,
-  pe as stepsStyles,
-  Ie as toaster,
-  O as useBarChartProps,
-  Q as useChartProps,
-  V as useLineChartProps,
-  X as usePieChartProps,
+  X as spaciousChartMargin,
+  ne as stepsStyles,
+  ke as toaster,
+  Y as useBarChartProps,
+  Z as useChartProps,
+  _ as useLineChartProps,
+  $ as usePieChartProps,
   i as useSystemColorScheme,
   p as useThemeContext,
   S as useTranslations

package/dist/node_modules/@zag-js/accordion/dist/accordion.connect.js

@@ -1,15 +1,15 @@
 import { getEventKey as G } from "../../dom-query/dist/event.js";
 import { isSafari as E } from "../../dom-query/dist/platform.js";
-import { dataAttr as r } from "../../dom-query/dist/shared.js";
-import { parts as u } from "./accordion.anatomy.js";
+import { dataAttr as i } from "../../dom-query/dist/shared.js";
+import { parts as l } from "./accordion.anatomy.js";
 import { getRootId as I, getItemContentId as f, getItemTriggerId as v, getItemId as S } from "./accordion.dom.js";
-function H(T, s) {
-  const { send: d, context: p, prop: a, scope: i, computed: c } = T, m = p.get("focusedValue"), g = p.get("value"), y = a("multiple");
+function H(T, u) {
+  const { send: o, context: p, prop: a, scope: d, computed: c } = T, m = p.get("focusedValue"), g = p.get("value"), y = a("multiple");
   function O(t) {
     let e = t;
-    !y && e.length > 1 && (e = [e[0]]), d({ type: "VALUE.SET", value: e });
+    !y && e.length > 1 && (e = [e[0]]), o({ type: "VALUE.SET", value: e });
   }
-  function l(t) {
+  function s(t) {
     return {
       expanded: g.includes(t.value),
       focused: m === t.value,
@@ -20,99 +20,98 @@ function H(T, s) {
     focusedValue: m,
     value: g,
     setValue: O,
-    getItemState: l,
+    getItemState: s,
     getRootProps() {
-      return s.element({
-        ...u.root.attrs,
+      return u.element({
+        ...l.root.attrs,
         dir: a("dir"),
-        id: I(i),
+        id: I(d),
         "data-orientation": a("orientation")
       });
     },
     getItemProps(t) {
-      const e = l(t);
-      return s.element({
-        ...u.item.attrs,
+      const e = s(t);
+      return u.element({
+        ...l.item.attrs,
         dir: a("dir"),
-        id: S(i, t.value),
+        id: S(d, t.value),
         "data-state": e.expanded ? "open" : "closed",
-        "data-focus": r(e.focused),
-        "data-disabled": r(e.disabled),
+        "data-focus": i(e.focused),
+        "data-disabled": i(e.disabled),
         "data-orientation": a("orientation")
       });
     },
     getItemContentProps(t) {
-      const e = l(t);
-      return s.element({
-        ...u.itemContent.attrs,
+      const e = s(t);
+      return u.element({
+        ...l.itemContent.attrs,
         dir: a("dir"),
         role: "region",
-        id: f(i, t.value),
-        "aria-labelledby": v(i, t.value),
+        id: f(d, t.value),
+        "aria-labelledby": v(d, t.value),
         hidden: !e.expanded,
         "data-state": e.expanded ? "open" : "closed",
-        "data-disabled": r(e.disabled),
-        "data-focus": r(e.focused),
+        "data-disabled": i(e.disabled),
+        "data-focus": i(e.focused),
         "data-orientation": a("orientation")
       });
     },
     getItemIndicatorProps(t) {
-      const e = l(t);
-      return s.element({
-        ...u.itemIndicator.attrs,
+      const e = s(t);
+      return u.element({
+        ...l.itemIndicator.attrs,
         dir: a("dir"),
         "aria-hidden": !0,
         "data-state": e.expanded ? "open" : "closed",
-        "data-disabled": r(e.disabled),
-        "data-focus": r(e.focused),
+        "data-disabled": i(e.disabled),
+        "data-focus": i(e.focused),
         "data-orientation": a("orientation")
       });
     },
     getItemTriggerProps(t) {
-      const { value: e } = t, o = l(t);
-      return s.button({
-        ...u.itemTrigger.attrs,
+      const { value: e } = t, r = s(t);
+      return u.button({
+        ...l.itemTrigger.attrs,
         type: "button",
         dir: a("dir"),
-        id: v(i, e),
-        "aria-controls": f(i, e),
-        "data-controls": f(i, e),
-        "aria-expanded": o.expanded,
-        disabled: o.disabled,
+        id: v(d, e),
+        "aria-controls": f(d, e),
+        "data-controls": f(d, e),
+        "aria-expanded": r.expanded,
+        disabled: r.disabled,
         "data-orientation": a("orientation"),
-        "aria-disabled": o.disabled,
-        "data-state": o.expanded ? "open" : "closed",
-        "data-focus": r(o.focused),
-        "data-ownedby": I(i),
+        "data-state": r.expanded ? "open" : "closed",
+        "data-focus": i(r.focused),
+        "data-ownedby": I(d),
         onFocus() {
-          o.disabled || d({ type: "TRIGGER.FOCUS", value: e });
+          r.disabled || o({ type: "TRIGGER.FOCUS", value: e });
         },
         onBlur() {
-          o.disabled || d({ type: "TRIGGER.BLUR" });
+          r.disabled || o({ type: "TRIGGER.BLUR" });
         },
         onClick(n) {
-          o.disabled || (E() && n.currentTarget.focus(), d({ type: "TRIGGER.CLICK", value: e }));
+          r.disabled || (E() && n.currentTarget.focus(), o({ type: "TRIGGER.CLICK", value: e }));
         },
         onKeyDown(n) {
-          if (n.defaultPrevented || o.disabled) return;
+          if (n.defaultPrevented || r.disabled) return;
           const R = {
             ArrowDown() {
-              c("isHorizontal") || d({ type: "GOTO.NEXT", value: e });
+              c("isHorizontal") || o({ type: "GOTO.NEXT", value: e });
             },
             ArrowUp() {
-              c("isHorizontal") || d({ type: "GOTO.PREV", value: e });
+              c("isHorizontal") || o({ type: "GOTO.PREV", value: e });
             },
             ArrowRight() {
-              c("isHorizontal") && d({ type: "GOTO.NEXT", value: e });
+              c("isHorizontal") && o({ type: "GOTO.NEXT", value: e });
             },
             ArrowLeft() {
-              c("isHorizontal") && d({ type: "GOTO.PREV", value: e });
+              c("isHorizontal") && o({ type: "GOTO.PREV", value: e });
             },
             Home() {
-              d({ type: "GOTO.FIRST", value: e });
+              o({ type: "GOTO.FIRST", value: e });
             },
             End() {
-              d({ type: "GOTO.LAST", value: e });
+              o({ type: "GOTO.LAST", value: e });
             }
           }, x = G(n, {
             dir: a("dir"),