@serendie/ui 2.5.1 → 3.0.0-dev.202602170843

package/dist/index.js

@@ -1,121 +1,137 @@
-import { SerendiePreset as e } from "./preset.js";
-import { Accordion as a } from "./components/Accordion/Accordion.js";
-import { AccordionGroup as m } from "./components/Accordion/AccordionGroup.js";
-import { Avatar as i, AvatarStyle as n } from "./components/Avatar/Avatar.js";
-import { Badge as s, BadgeCloseButton as c, BadgeStyle as d } from "./components/Badge/Badge.js";
-import { Banner as h } from "./components/Banner/Banner.js";
-import { BottomNavigation as S } from "./components/BottomNavigation/BottomNavigation.js";
-import { BottomNavigationItem as g, BottomNavigationItemStyle as y } from "./components/BottomNavigation/BottomNavigationItem.js";
-import { Button as I, ButtonStyle as T } from "./components/Button/Button.js";
-import { SerendieChartTheme as D } from "./components/Chart/SerendieChartTheme.js";
-import { compactChartMargin as k, defaultChartMargin as v, getChartColor as M, getChartColors as w, legendChartMargin as A, spaciousChartMargin as L, useBarChartProps as N, useChartProps as R, useLineChartProps as F, usePieChartProps as G } from "./components/Chart/SerendieChartProps.js";
-import { CheckBox as W, CheckBoxStyle as j, checkboxCheckedIconCss as q, checkboxIconCss as z, checkboxUncheckedIconCss as E } from "./components/CheckBox/CheckBox.js";
-import { ChoiceBox as J, ChoiceBoxStyle as K } from "./components/ChoiceBox/ChoiceBox.js";
-import { DashboardWidget as Q } from "./components/DashboardWidget/DashboardWidget.js";
-import { DataTable as X } from "./components/DataTable/index.js";
-import { DatePicker as Z } from "./components/DatePicker/DatePicker.js";
-import { Divider as $, DividerStyle as oo } from "./components/Divider/Divider.js";
-import { Drawer as eo } from "./components/Drawer/Drawer.js";
-import { DropdownMenu as ao, DropdownMenuStyle as po } from "./components/DropdownMenu/DropdownMenu.js";
-import { IconButton as xo, IconButtonStyle as io } from "./components/IconButton/IconButton.js";
-import { List as fo } from "./components/List/List.js";
-import { ListItem as co, ListItemStyle as lo } from "./components/List/ListItem.js";
-import { ModalDialog as Co } from "./components/ModalDialog/ModalDialog.js";
-import { NotificationBadge as Bo } from "./components/NotificationBadge/NotificationBadge.js";
-import { Pagination as yo, PaginationStyle as uo } from "./components/Pagination/Pagination.js";
-import { PasswordField as To } from "./components/PasswordField/PasswordField.js";
-import { ProgressIndicator as Do } from "./components/ProgressIndicator/ProgressIndicator.js";
-import { ProgressIndicatorIndeterminate as ko } from "./components/ProgressIndicator/ProgressIndicatorIndeterminate.js";
-import { RadioButton as Mo, RadioButtonStyle as wo, radioCheckedIconCss as Ao, radioIconCss as Lo, radioUncheckedIconCss as No } from "./components/RadioButton/RadioButton.js";
-import { RadioGroup as Fo } from "./components/RadioButton/RadioGroup.js";
-import { Search as Uo, SearchStyle as Wo } from "./components/Search/Search.js";
-import { Select as qo, SelectStyle as zo } from "./components/Select/Select.js";
-import { Switch as Ho, SwitchStyle as Jo } from "./components/Switch/Switch.js";
-import { Tabs as Oo, TabsStyle as Qo } from "./components/Tabs/Tabs.js";
-import { TabItem as Xo, TabItemStyle as Yo } from "./components/Tabs/TabItem.js";
-import { TextArea as _o } from "./components/TextArea/TextArea.js";
-import { TextField as or } from "./components/TextField/TextField.js";
-import { Toast as er, ToastStyle as tr, toaster as ar } from "./components/Toast/Toast.js";
-import { Tooltip as mr } from "./components/Tooltip/Tooltip.js";
-import { TopAppBar as ir } from "./components/TopAppBar/TopAppBar.js";
-import { DataTableComponent as fr } from "./components/DataTable/DataTableComponent.js";
-import { parse as cr } from "./node_modules/@zag-js/date-picker/dist/index.js";
+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 { formatDateByLang as l, getTranslations as d, useTranslations as h } from "./i18n/index.js";
+import { Accordion as C } from "./components/Accordion/Accordion.js";
+import { AccordionGroup as B } from "./components/Accordion/AccordionGroup.js";
+import { Avatar as y, 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";
+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 So } from "./components/Drawer/Drawer.js";
+import { DropdownMenu as go, DropdownMenuStyle as Bo } from "./components/DropdownMenu/DropdownMenu.js";
+import { IconButton as yo, 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 { Switch as re, SwitchStyle as te } from "./components/Switch/Switch.js";
+import { Tabs as me, TabsStyle as pe } from "./components/Tabs/Tabs.js";
+import { TabItem as ie, TabItemStyle as ne } from "./components/Tabs/TabItem.js";
+import { TextArea as fe } from "./components/TextArea/TextArea.js";
+import { TextField as le } from "./components/TextField/TextField.js";
+import { Toast as he, ToastStyle as Se, toaster as Ce } from "./components/Toast/Toast.js";
+import { Tooltip as Be } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as ye } from "./components/TopAppBar/TopAppBar.js";
+import { LanguageProvider as Ie, SerendieProvider as Pe } from "./i18n/provider.js";
+import { DataTableComponent as be } from "./components/DataTable/DataTableComponent.js";
+import { parse as ve } from "./node_modules/@zag-js/date-picker/dist/index.js";
 export {
-  a as Accordion,
-  m as AccordionGroup,
-  i as Avatar,
-  n as AvatarStyle,
-  s as Badge,
-  c as BadgeCloseButton,
-  d as BadgeStyle,
-  h as Banner,
-  S as BottomNavigation,
-  g as BottomNavigationItem,
-  y as BottomNavigationItemStyle,
-  I as Button,
-  T as ButtonStyle,
-  W as CheckBox,
-  j as CheckBoxStyle,
-  J as ChoiceBox,
-  K as ChoiceBoxStyle,
-  Q as DashboardWidget,
-  X as DataTable,
-  fr as DataTableComponent,
-  Z as DatePicker,
-  $ as Divider,
-  oo as DividerStyle,
-  eo as Drawer,
-  ao as DropdownMenu,
-  po as DropdownMenuStyle,
-  xo as IconButton,
-  io as IconButtonStyle,
-  fo as List,
-  co as ListItem,
-  lo as ListItemStyle,
-  Co as ModalDialog,
-  Bo as NotificationBadge,
-  yo as Pagination,
-  uo as PaginationStyle,
-  To as PasswordField,
-  Do as ProgressIndicator,
-  ko as ProgressIndicatorIndeterminate,
-  Mo as RadioButton,
-  wo as RadioButtonStyle,
-  Fo as RadioGroup,
-  Uo as Search,
-  Wo as SearchStyle,
-  qo as Select,
-  zo as SelectStyle,
-  D as SerendieChartTheme,
-  e as SerendiePreset,
-  Ho as Switch,
-  Jo as SwitchStyle,
-  Xo as TabItem,
-  Yo as TabItemStyle,
-  Oo as Tabs,
-  Qo as TabsStyle,
-  _o as TextArea,
-  or as TextField,
-  er as Toast,
-  tr as ToastStyle,
-  mr as Tooltip,
-  ir as TopAppBar,
-  q as checkboxCheckedIconCss,
-  z as checkboxIconCss,
-  E as checkboxUncheckedIconCss,
-  k as compactChartMargin,
-  v as defaultChartMargin,
-  M as getChartColor,
-  w as getChartColors,
-  A as legendChartMargin,
-  cr as parseDate,
-  Ao as radioCheckedIconCss,
-  Lo as radioIconCss,
-  No as radioUncheckedIconCss,
-  L as spaciousChartMargin,
-  ar as toaster,
-  N as useBarChartProps,
-  R as useChartProps,
-  F as useLineChartProps,
-  G as usePieChartProps
+  C as Accordion,
+  B as AccordionGroup,
+  y as Avatar,
+  T as AvatarStyle,
+  P as Badge,
+  D as BadgeCloseButton,
+  b 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,
+  be as DataTableComponent,
+  so as DatePicker,
+  co as Divider,
+  lo as DividerStyle,
+  So as Drawer,
+  go as DropdownMenu,
+  Bo as DropdownMenuStyle,
+  yo as IconButton,
+  To as IconButtonStyle,
+  Ie 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 SerendiePreset,
+  Pe as SerendieProvider,
+  re as Switch,
+  te as SwitchStyle,
+  ie as TabItem,
+  ne as TabItemStyle,
+  me as Tabs,
+  pe as TabsStyle,
+  fe as TextArea,
+  le as TextField,
+  a as ThemeContext,
+  he as Toast,
+  Se as ToastStyle,
+  Be as Tooltip,
+  ye as TopAppBar,
+  $ as checkboxCheckedIconCss,
+  oo as checkboxIconCss,
+  eo as checkboxUncheckedIconCss,
+  q as compactChartMargin,
+  z as defaultChartMargin,
+  l as formatDateByLang,
+  E as getChartColor,
+  H as getChartColors,
+  f as getColorSchemeScript,
+  d as getTranslations,
+  J as legendChartMargin,
+  ve as parseDate,
+  Jo as radioCheckedIconCss,
+  Ko as radioIconCss,
+  Oo as radioUncheckedIconCss,
+  m as resolveTheme,
+  K as spaciousChartMargin,
+  Ce as toaster,
+  O as useBarChartProps,
+  Q as useChartProps,
+  V as useLineChartProps,
+  X as usePieChartProps,
+  i as useSystemColorScheme,
+  p as useThemeContext,
+  h as useTranslations
 };

package/dist/node_modules/@serendie/design-token/dist/panda-tokens.js

@@ -1736,6 +1736,316 @@ const e = {
         }
       }
     },
+    "konjo-dark": {
+      tokens: {
+        colors: {
+          sd: {
+            system: {
+              color: {
+                impression: {
+                  primary: {
+                    value: "#C0CFFD"
+                  },
+                  onPrimary: {
+                    value: "#000000"
+                  },
+                  primaryContainer: {
+                    value: "#C0CFFD"
+                  },
+                  onPrimaryContainer: {
+                    value: "#000000"
+                  },
+                  secondary: {
+                    value: "#043F81"
+                  },
+                  onSecondary: {
+                    value: "#F0F0F0"
+                  },
+                  secondaryContainer: {
+                    value: "#043F81"
+                  },
+                  onSecondaryContainer: {
+                    value: "#F0F0F0"
+                  },
+                  tertiary: {
+                    value: "#081E3F"
+                  },
+                  onTertiary: {
+                    value: "#F0F0F0"
+                  },
+                  tertiaryContainer: {
+                    value: "#081E3F"
+                  },
+                  onTertiaryContainer: {
+                    value: "#F0F0F0"
+                  },
+                  notice: {
+                    value: "#DEC400"
+                  },
+                  onNotice: {
+                    value: "#FFFFFF"
+                  },
+                  noticeContainer: {
+                    value: "#514400"
+                  },
+                  onNoticeContainer: {
+                    value: "#FFFFFF"
+                  },
+                  noticeContainerVariant: {
+                    value: "#3A3000"
+                  },
+                  onNoticeContainerVariant: {
+                    value: "#F0F0F0"
+                  },
+                  negative: {
+                    value: "#FFC0BB"
+                  },
+                  onNegative: {
+                    value: "#000000"
+                  },
+                  negativeContainer: {
+                    value: "#81001F"
+                  },
+                  onNegativeContainer: {
+                    value: "#FFFFFF"
+                  },
+                  negativeContainerVariant: {
+                    value: "#600114"
+                  },
+                  onNegativeContainerVariant: {
+                    value: "#FFDCDA"
+                  },
+                  positive: {
+                    value: "#2EAB80"
+                  },
+                  onPositive: {
+                    value: "#FFFFFF"
+                  },
+                  positiveContainer: {
+                    value: "#146348"
+                  },
+                  onPositiveContainer: {
+                    value: "#F0F0F0"
+                  },
+                  positiveContainerVariant: {
+                    value: "#12372B"
+                  },
+                  onPositiveContainerVariant: {
+                    value: "#F0F0F0"
+                  }
+                },
+                component: {
+                  surface: {
+                    value: "#141414"
+                  },
+                  onSurface: {
+                    value: "#E4E4E3"
+                  },
+                  onSurfaceVariant: {
+                    value: "#B1B0AE"
+                  },
+                  inverseSurface: {
+                    value: "#F0F0F0"
+                  },
+                  inverseOnSurface: {
+                    value: "#000000"
+                  },
+                  inversePrimary: {
+                    value: "#081E3F"
+                  },
+                  outlineBright: {
+                    value: "#424242"
+                  },
+                  outline: {
+                    value: "#575757"
+                  },
+                  outlineDim: {
+                    value: "#8C8B87"
+                  },
+                  scrim: {
+                    value: "#00000099"
+                  },
+                  surfaceDim: {
+                    value: "#141414"
+                  },
+                  surfaceBright: {
+                    value: "#3B3B3B"
+                  },
+                  surfaceContainerBright: {
+                    value: "#212121"
+                  },
+                  surfaceContainer: {
+                    value: "#2E2E2E"
+                  },
+                  surfaceContainerDim: {
+                    value: "#474747"
+                  }
+                },
+                interaction: {
+                  disabled: {
+                    value: "#31312F"
+                  },
+                  disabledOnSurface: {
+                    value: "#6F6F6F"
+                  },
+                  selected: {
+                    value: "#FFFFFF05"
+                  },
+                  selectedSurface: {
+                    value: "#043F81"
+                  },
+                  hovered: {
+                    value: "#FFFFFF33"
+                  },
+                  hoveredVariant: {
+                    value: "#FFFFFF0D"
+                  },
+                  hoveredOnPrimary: {
+                    value: "#00000099"
+                  }
+                },
+                chart: {
+                  mark: {
+                    primary: {
+                      "01": {
+                        value: "#DDE3FF"
+                      },
+                      "02": {
+                        value: "#C0CFFD"
+                      },
+                      "03": {
+                        value: "#8FAEFE"
+                      },
+                      "04": {
+                        value: "#3B86F9"
+                      },
+                      "05": {
+                        value: "#056AD8"
+                      },
+                      "06": {
+                        value: "#073165"
+                      }
+                    },
+                    positive: {
+                      "01": {
+                        value: "#BCEEDD"
+                      },
+                      "02": {
+                        value: "#90E4C7"
+                      },
+                      "03": {
+                        value: "#46D2A2"
+                      },
+                      "04": {
+                        value: "#2EAB80"
+                      },
+                      "05": {
+                        value: "#2C7C60"
+                      },
+                      "06": {
+                        value: "#12372B"
+                      }
+                    },
+                    negative: {
+                      "01": {
+                        value: "#FFDCDA"
+                      },
+                      "02": {
+                        value: "#FFC0BB"
+                      },
+                      "03": {
+                        value: "#FF8F8F"
+                      },
+                      "04": {
+                        value: "#F64157"
+                      },
+                      "05": {
+                        value: "#D00138"
+                      },
+                      "06": {
+                        value: "#600114"
+                      }
+                    },
+                    notice: {
+                      "01": {
+                        value: "#FCE998"
+                      },
+                      "02": {
+                        value: "#EDD857"
+                      },
+                      "03": {
+                        value: "#DEC400"
+                      },
+                      "04": {
+                        value: "#A78E00"
+                      },
+                      "05": {
+                        value: "#816E00"
+                      },
+                      "06": {
+                        value: "#3A3000"
+                      }
+                    },
+                    multi: {
+                      10: {
+                        value: "#AE8144"
+                      },
+                      "01": {
+                        value: "#056AD8"
+                      },
+                      "02": {
+                        value: "#46D2A2"
+                      },
+                      "03": {
+                        value: "#FF8F8F"
+                      },
+                      "04": {
+                        value: "#B36CCD"
+                      },
+                      "05": {
+                        value: "#8F3D15"
+                      },
+                      "06": {
+                        value: "#4ACBD4"
+                      },
+                      "07": {
+                        value: "#FCE998"
+                      },
+                      "08": {
+                        value: "#B54E1B"
+                      },
+                      "09": {
+                        value: "#9B2657"
+                      }
+                    }
+                  },
+                  component: {
+                    onMarkLabel: {
+                      value: "#000000"
+                    },
+                    inverseOnMarkLabel: {
+                      value: "#FFFFFF"
+                    },
+                    scalemark: {
+                      value: "#E4E4E3"
+                    },
+                    threshold: {
+                      value: "#3B86F9"
+                    },
+                    chartSurface: {
+                      value: "#FFFFFF"
+                    },
+                    onChartSurface: {
+                      value: "#6F6F6F"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     kurikawa: {
       tokens: {
         colors: {