@serendie/ui 2.5.1 → 3.0.0-dev.202602170843

package/dist/components/CheckBox/CheckBox.js

@@ -40,9 +40,9 @@ const v = {
 }, N = {
   width: 24,
   height: 24,
-  color: "sd.system.color.component.outline",
+  color: "sd.system.color.component.outlineDim",
   _disabled: {
-    color: "color-mix(in srgb, {colors.sd.system.color.component.outline}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
+    color: "color-mix(in srgb, {colors.sd.system.color.component.outlineDim}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
 }, n = b({
   slots: [
@@ -93,7 +93,7 @@ const v = {
       }
     }
   }
-}), H = ({
+}), F = ({
   value: m,
   label: l,
   helperText: s,
@@ -122,7 +122,7 @@ const v = {
   );
 };
 export {
-  H as CheckBox,
+  F as CheckBox,
   n as CheckBoxStyle,
   _ as checkboxCheckedIconCss,
   v as checkboxIconCss,

package/dist/components/DatePicker/styles.js

@@ -21,7 +21,7 @@ const o = e({
       zIndex: "sd.system.elevation.zIndex.dropdown"
     },
     content: {
-      background: "sd.system.color.component.surface",
+      background: "sd.system.color.component.surfaceContainerBright",
       borderRadius: "sd.system.dimension.radius.medium",
       boxShadow: "sd.system.elevation.shadow.level1",
       flexDirection: "column",

package/dist/components/Divider/Divider.d.ts

@@ -3,10 +3,10 @@ import { RecipeVariantProps } from '../../../styled-system/css';
 export declare const DividerStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
     color: {
         light: {
-            borderColor: "sd.reference.color.scale.gray.200";
+            borderColor: "sd.system.color.component.outlineBright";
         };
         normal: {
-            borderColor: "sd.reference.color.scale.gray.300";
+            borderColor: "sd.system.color.component.outline";
         };
         dark: {
             borderColor: "sd.system.color.component.outlineDim";

package/dist/components/Divider/Divider.js

@@ -1,17 +1,17 @@
-import { jsx as d } from "react/jsx-runtime";
-import { cva as n } from "../../styled-system/css/cva.js";
-import { cx as l } from "../../styled-system/css/cx.js";
-const r = n({
+import { jsx as n } from "react/jsx-runtime";
+import { cva as d } from "../../styled-system/css/cva.js";
+import { cx as m } from "../../styled-system/css/cx.js";
+const o = d({
   base: {
     border: "none"
   },
   variants: {
     color: {
       light: {
-        borderColor: "sd.reference.color.scale.gray.200"
+        borderColor: "sd.system.color.component.outlineBright"
       },
       normal: {
-        borderColor: "sd.reference.color.scale.gray.300"
+        borderColor: "sd.system.color.component.outline"
       },
       dark: {
         borderColor: "sd.system.color.component.outlineDim"
@@ -37,11 +37,11 @@ const r = n({
     color: "normal",
     type: "horizontal"
   }
-}), h = (e) => {
-  const [o, s] = r.splitVariantProps(e), { className: t, ...i } = s;
-  return /* @__PURE__ */ d("hr", { className: l(r(o), t), ...i });
+}), p = (e) => {
+  const [r, t] = o.splitVariantProps(e), { className: s, ...i } = t;
+  return /* @__PURE__ */ n("hr", { className: m(o(r), s), ...i });
 };
 export {
-  h as Divider,
-  r as DividerStyle
+  p as Divider,
+  o as DividerStyle
 };

package/dist/components/Drawer/Drawer.js

@@ -25,7 +25,7 @@ const n = h({
       maxWidth: "375px",
       height: "100vh",
       gap: "sd.system.dimension.spacing.twoExtraLarge",
-      backgroundColor: "sd.system.color.component.surface",
+      backgroundColor: "sd.system.color.component.surfaceContainerBright",
       boxShadow: "sd.system.elevation.shadow.level5",
       zIndex: "sd.system.elevation.zIndex.modal"
     },
@@ -68,7 +68,7 @@ const n = h({
   defaultVariants: {
     type: "right"
   }
-}), W = ({
+}), N = ({
   isOpen: r,
   children: i,
   contentClassName: a,
@@ -92,5 +92,5 @@ const n = h({
   ] }) });
 };
 export {
-  W as Drawer
+  N as Drawer
 };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -8,16 +8,16 @@ import { sva as b } from "../../styled-system/css/sva.js";
 import { MenuRoot as S } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-root.js";
 import { MenuTrigger as I } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-trigger.js";
 import { MenuPositioner as v } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-positioner.js";
-import { MenuContent as _ } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
-import { MenuItemGroup as C } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
+import { MenuContent as C } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
+import { MenuItemGroup as _ } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
 import { MenuItem as M } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item.js";
 const w = b({
   slots: ["content", "itemGroup", "item", "itemIcon", "button", "buttonIcon"],
   base: {
     content: {
-      bgColor: "sd.system.color.component.surface",
+      bgColor: "sd.system.color.component.surfaceContainerBright",
       borderRadius: "sd.system.dimension.radius.medium",
-      bg: "sd.system.color.component.surface",
+      bg: "sd.system.color.component.surfaceContainerBright",
       boxShadow: "sd.system.elevation.shadow.level1",
       outline: "none",
       zIndex: "sd.system.elevation.zIndex.dropdown"
@@ -126,7 +126,7 @@ const w = b({
             children: n
           }
         ) }),
-        /* @__PURE__ */ e(x, { disabled: !i, container: p, children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(_, { className: o.content, children: /* @__PURE__ */ e(C, { className: o.itemGroup, children: a.map((t) => /* @__PURE__ */ m(
+        /* @__PURE__ */ e(x, { disabled: !i, container: p, children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(C, { className: o.content, children: /* @__PURE__ */ e(_, { className: o.itemGroup, children: a.map((t) => /* @__PURE__ */ m(
           M,
           {
             value: t.value,

package/dist/components/IconButton/IconButton.d.ts

@@ -27,7 +27,6 @@ export declare const IconButtonStyle: import('../../../styled-system/types').Rec
         };
         outlined: {
             outlineColor: "sd.system.color.component.outline";
-            bgColor: "sd.system.color.component.surface";
             _enabled: {
                 _hover: {
                     bgColor: "sd.system.color.interaction.hoveredVariant";

package/dist/components/IconButton/IconButton.js

@@ -52,7 +52,6 @@ const e = a({
       },
       outlined: {
         outlineColor: "sd.system.color.component.outline",
-        bgColor: "sd.system.color.component.surface",
         _enabled: {
           _hover: {
             bgColor: "sd.system.color.interaction.hoveredVariant"

package/dist/components/ModalDialog/ModalDialog.js

@@ -44,7 +44,7 @@ const N = f({
       paddingRight: "sd.system.dimension.spacing.extraLarge",
       paddingBottom: "sd.system.dimension.spacing.large",
       paddingLeft: "sd.system.dimension.spacing.extraLarge",
-      backgroundColor: "sd.system.color.component.surface",
+      backgroundColor: "sd.system.color.component.surfaceContainerBright",
       boxShadow: "sd.system.elevation.shadow.level5",
       borderRadius: "sd.system.dimension.radius.medium",
       zIndex: "sd.system.elevation.zIndex.modal"

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -2,8 +2,8 @@ import { jsx as a, jsxs as f } from "react/jsx-runtime";
 import { useMemo as v } from "react";
 import { describeArc as b } from "./util.js";
 import { cx as h } from "../../styled-system/css/cx.js";
-import { cva as c } from "../../styled-system/css/cva.js";
-const u = c({
+import { cva as n } from "../../styled-system/css/cva.js";
+const u = n({
   base: {
     position: "relative",
     display: "flex",
@@ -74,10 +74,10 @@ const u = c({
     type: "linear",
     size: "medium"
   }
-}), p = c({
+}), p = n({
   base: {
     position: "absolute",
-    backgroundColor: "sd.reference.color.scale.gray.100",
+    backgroundColor: "sd.system.color.component.surfaceContainerDim",
     overflow: "hidden"
   },
   variants: {
@@ -101,7 +101,7 @@ const u = c({
     }
   },
   compoundVariants: []
-}), g = c({
+}), g = n({
   base: {
     position: "absolute",
     backgroundColor: "sd.system.color.impression.primary"
@@ -138,7 +138,7 @@ const u = c({
   max: o = 1,
   type: i = "linear",
   size: s = "medium",
-  className: n,
+  className: c,
   style: d,
   ...m
 }) => {
@@ -157,7 +157,7 @@ const u = c({
     return /* @__PURE__ */ a(
       "div",
       {
-        className: h(u({ type: i, size: s }), n),
+        className: h(u({ type: i, size: s }), c),
         role: "progressbar",
         "aria-valuenow": t,
         "aria-valuemin": 0,
@@ -177,7 +177,7 @@ const u = c({
                   cy: r + e,
                   r,
                   className: p({ type: i, size: s }),
-                  stroke: "var(--colors-sd-reference-color-scale-gray-100)",
+                  stroke: "var(--colors-sd-system-color-component-surface-container-dim)",
                   strokeWidth: e
                 }
               ),
@@ -198,7 +198,7 @@ const u = c({
   return /* @__PURE__ */ a(
     "div",
     {
-      className: h(u({ type: i, size: s }), n),
+      className: h(u({ type: i, size: s }), c),
       role: "progressbar",
       "aria-valuenow": t,
       "aria-valuemin": 0,

package/dist/components/Search/Search.js

@@ -64,7 +64,7 @@ const h = M({
       }
     },
     combobox: {
-      bgColor: "sd.system.color.component.surface",
+      bgColor: "sd.system.color.component.surfaceContainerBright",
       borderRadius: "sd.system.dimension.radius.medium",
       boxShadow: "sd.system.elevation.shadow.level1",
       zIndex: "sd.system.elevation.zIndex.dropdown",
@@ -157,10 +157,10 @@ const h = M({
     () => !!(e.inputValue || e.defaultInputValue)
   ), m = l.useRef(null), R = l.useMemo(() => a ? r.filter(
     (o) => o.toLowerCase().includes(a.toLowerCase())
-  ) : r, [r, a]), f = j({ items: R }), _ = (o) => {
+  ) : r, [r, a]), f = j({ items: R }), B = (o) => {
     var n;
     d || g(o.inputValue), c(o.inputValue.length > 0), (n = e.onInputValueChange) == null || n.call(e, o);
-  }, B = (o) => {
+  }, _ = (o) => {
     var n;
     o.value.length > 0 && (i == null || i(o.value[0])), (n = e.onValueChange) == null || n.call(e, o);
   }, N = (o) => {
@@ -180,8 +180,8 @@ const h = M({
       collection: f,
       openOnClick: !0,
       allowCustomValue: x,
-      onInputValueChange: _,
-      onValueChange: B,
+      onInputValueChange: B,
+      onValueChange: _,
       onHighlightChange: N,
       lazyMount: !0,
       unmountOnExit: !0,

package/dist/components/Select/Select.js

@@ -6,8 +6,8 @@ import { useAutoPortalContainer as R } from "../../hooks/useAutoPortalContainer.
 import { useTranslations as z } from "../../i18n/index.js";
 import { createListCollection as P } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
 import { Portal as V } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { sva as L } from "../../styled-system/css/sva.js";
-import { SelectRoot as B } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
+import { sva as B } from "../../styled-system/css/sva.js";
+import { SelectRoot as L } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
 import { cx as I } from "../../styled-system/css/cx.js";
 import { SelectLabel as A } from "../../node_modules/@ark-ui/react/dist/components/select/select-label.js";
 import { css as r } from "../../styled-system/css/css.js";
@@ -17,7 +17,7 @@ import { SelectValueText as W } from "../../node_modules/@ark-ui/react/dist/comp
 import { SelectPositioner as E } from "../../node_modules/@ark-ui/react/dist/components/select/select-positioner.js";
 import { SelectContent as k } from "../../node_modules/@ark-ui/react/dist/components/select/select-content.js";
 import { SelectItem as q } from "../../node_modules/@ark-ui/react/dist/components/select/select-item.js";
-const c = L({
+const c = B({
   slots: ["root", "valueText", "trigger", "content", "item", "iconBox"],
   base: {
     root: {
@@ -82,7 +82,7 @@ const c = L({
       }
     },
     content: {
-      bgColor: "sd.system.color.component.surface",
+      bgColor: "sd.system.color.component.surfaceContainerBright",
       borderRadius: "sd.system.dimension.radius.medium",
       boxShadow: "sd.system.elevation.shadow.level1",
       zIndex: "sd.system.elevation.zIndex.dropdown",
@@ -164,19 +164,19 @@ const c = L({
   required: y,
   requiredLabel: g,
   invalid: d,
-  invalidMessage: m,
+  invalidMessage: n,
   className: u,
-  items: x = [],
-  portalled: n = !0,
-  ...h
+  items: h = [],
+  portalled: m = !0,
+  ...x
 }) => {
-  const b = z(), [t, f] = c.splitVariantProps(h), o = c(t), { collection: D, ...S } = f, { triggerRef: v, portalContainerRef: w } = R(n), l = P({
-    items: x,
+  const b = z(), [t, f] = c.splitVariantProps(x), o = c(t), { collection: D, ...S } = f, { triggerRef: v, portalContainerRef: w } = R(m), l = P({
+    items: h,
     itemToString: (s) => s.label,
     itemToValue: (s) => s.value
   });
   return /* @__PURE__ */ i(
-    B,
+    L,
     {
       ...S,
       collection: l,
@@ -225,7 +225,7 @@ const c = L({
           ),
           /* @__PURE__ */ e(C, { className: o.iconBox })
         ] }) }),
-        d && m && /* @__PURE__ */ e(
+        d && n && /* @__PURE__ */ e(
           "div",
           {
             className: r({
@@ -235,10 +235,10 @@ const c = L({
               },
               color: "sd.system.color.impression.negative"
             }),
-            children: m
+            children: n
           }
         ),
-        /* @__PURE__ */ e(V, { disabled: !n, container: w, children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(k, { className: o.content, children: /* @__PURE__ */ e(T, { children: l.items.map((s, _) => /* @__PURE__ */ e(q, { item: s, children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(V, { disabled: !m, container: w, children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(k, { className: o.content, children: /* @__PURE__ */ e(T, { children: l.items.map((s, _) => /* @__PURE__ */ e(q, { item: s, children: /* @__PURE__ */ e(
           N,
           {
             title: s.label,

package/dist/components/Switch/Switch.js

@@ -35,8 +35,8 @@ const n = u({
       transitionProperty: "background, borderColor",
       transitionTimingFunction: "cubic-bezier(.2, 0, 0, 1)",
       _checked: {
-        backgroundColor: "sd.system.color.impression.primary",
-        borderColor: "sd.system.color.impression.primary",
+        backgroundColor: "sd.system.color.impression.primaryContainer",
+        borderColor: "sd.system.color.impression.primaryContainer",
         _disabled: {
           backgroundColor: "color-mix(in srgb, {colors.sd.system.color.impression.primary}, {colors.sd.system.color.interaction.hoveredOnPrimary});",
           borderColor: "transparent"
@@ -97,7 +97,7 @@ const n = u({
     }
   }
 }), F = y(
-  ({ label: d, helperText: s, className: a, ...l }, m) => {
+  ({ label: a, helperText: s, className: d, ...l }, m) => {
     const [c, p] = n.splitVariantProps(l), o = n(c);
     return /* @__PURE__ */ e(
       b,
@@ -107,12 +107,12 @@ const n = u({
           "group",
           o.root,
           s && x({ alignItems: "flex-start" }),
-          a
+          d
         ),
         ...p,
         children: [
           /* @__PURE__ */ e("div", { className: o.textGroup, children: [
-            /* @__PURE__ */ r(i, { className: o.label, children: d }),
+            /* @__PURE__ */ r(i, { className: o.label, children: a }),
             s && /* @__PURE__ */ r(i, { className: o.helperText, children: s })
           ] }),
           /* @__PURE__ */ r(h, { className: t("control", o.control), children: /* @__PURE__ */ r(g, { className: o.thumb }) }),

package/dist/components/Toast/Toast.d.ts

@@ -3,20 +3,18 @@ export declare const ToastStyle: import('../../../styled-system/types').SlotReci
     variant: {
         default: {
             root: {
-                background: "sd.system.color.component.inverseSurface";
+                background: "sd.system.color.impression.positiveContainer";
             };
             text: {
-                color: "sd.system.color.component.inverseOnSurface";
+                color: "sd.system.color.impression.onPositiveContainer";
             };
             icon: {
-                color: "sd.system.color.impression.positive";
+                color: "sd.system.color.impression.onPositiveContainer";
             };
         };
         error: {
             root: {
                 background: "sd.system.color.impression.negativeContainer";
-                borderColor: "sd.system.color.impression.negative";
-                borderWidth: number;
             };
             text: {
                 color: "sd.system.color.impression.negative";

package/dist/components/Toast/Toast.js

@@ -35,20 +35,18 @@ const x = d({
     variant: {
       default: {
         root: {
-          background: "sd.system.color.component.inverseSurface"
+          background: "sd.system.color.impression.positiveContainer"
         },
         text: {
-          color: "sd.system.color.component.inverseOnSurface"
+          color: "sd.system.color.impression.onPositiveContainer"
         },
         icon: {
-          color: "sd.system.color.impression.positive"
+          color: "sd.system.color.impression.onPositiveContainer"
         }
       },
       error: {
         root: {
-          background: "sd.system.color.impression.negativeContainer",
-          borderColor: "sd.system.color.impression.negative",
-          borderWidth: 1
+          background: "sd.system.color.impression.negativeContainer"
         },
         text: {
           color: "sd.system.color.impression.negative"
@@ -62,9 +60,9 @@ const x = d({
   defaultVariants: {
     variant: "default"
   }
-}), T = m({
+}), C = m({
   placement: "bottom"
-}), C = ({ toaster: r }) => /* @__PURE__ */ o(c, { toaster: r, children: (t) => {
+}), T = ({ toaster: r }) => /* @__PURE__ */ o(c, { toaster: r, children: (t) => {
   const s = t.type === "error" ? "error" : "default", e = x({ variant: s }), i = s === "error" ? /* @__PURE__ */ o(n, { className: e.icon }) : /* @__PURE__ */ o(l, { className: e.icon });
   return /* @__PURE__ */ o(p, { className: e.root, children: /* @__PURE__ */ a("div", { className: e.textGroup, children: [
     i,
@@ -72,7 +70,7 @@ const x = d({
   ] }) }, t.id);
 } });
 export {
-  C as Toast,
+  T as Toast,
   x as ToastStyle,
-  T as toaster
+  C as toaster
 };

package/dist/i18n/index.d.ts

@@ -1,6 +1,6 @@
 import { dictionary } from './dictionary';
 import { Language } from './provider';
-export { SerendieProvider, LanguageProvider, type Language } from './provider';
+export { SerendieProvider, LanguageProvider, type Language, type SerendieProviderProps, } from './provider';
 export type TranslationKey = keyof typeof dictionary.ja;
 /**
  * 翻訳関数を生成するヘルパー

package/dist/i18n/provider.d.ts

@@ -1,13 +1,38 @@
+import { ColorMode, ColorTheme } from '../theme/ThemeContext';
 export type Language = "ja" | "en";
 export declare const LanguageContext: import('react').Context<Language | undefined>;
+export interface SerendieProviderProps {
+    /** 言語設定 */
+    lang: Language;
+    /** カラーテーマ（デフォルト: 'konjo'） */
+    colorTheme?: ColorTheme;
+    /** カラーモード（デフォルト: undefined = ライトモード） */
+    colorMode?: ColorMode;
+    children: React.ReactNode;
+}
 /**
  * Serendie UIの設定を提供するProvider
  * アプリケーションのルートで使用してください
+ *
+ * @example
+ * ```tsx
+ * // 基本的な使い方（言語のみ）
+ * <SerendieProvider lang="ja">
+ *   <App />
+ * </SerendieProvider>
+ *
+ * // カラーモードを指定（OSの設定に従う）
+ * <SerendieProvider lang="ja" colorMode="system">
+ *   <App />
+ * </SerendieProvider>
+ *
+ * // カラーテーマとモードを指定
+ * <SerendieProvider lang="ja" colorTheme="asagi" colorMode="system">
+ *   <App />
+ * </SerendieProvider>
+ * ```
  */
-export declare function SerendieProvider({ lang, children, }: {
-    lang: Language;
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function SerendieProvider({ lang, colorTheme, colorMode, children, }: SerendieProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * @deprecated LanguageProvider は SerendieProvider にリネームされました
  */

package/dist/i18n/provider.js

@@ -1,15 +1,35 @@
-import { jsx as o } from "react/jsx-runtime";
-import { createContext as t } from "react";
-const n = t(void 0);
-function i({
-  lang: e,
-  children: r
+import { jsx as s } from "react/jsx-runtime";
+import { useMemo as m, useEffect as u, createContext as f } from "react";
+import { resolveTheme as c, ThemeContext as v } from "../theme/ThemeContext.js";
+import { useSystemColorScheme as h } from "../theme/useSystemColorScheme.js";
+const l = f(void 0);
+function p({
+  lang: d,
+  colorTheme: t = "konjo",
+  colorMode: o,
+  children: i
 }) {
-  return /* @__PURE__ */ o(n.Provider, { value: e, children: r });
+  const r = h() === "dark", e = m(() => c(t, o ?? "light", r), [t, o, r]);
+  u(() => {
+    if (typeof document > "u") return;
+    const n = document.documentElement;
+    return e ? n.dataset.pandaTheme = e : delete n.dataset.pandaTheme, () => {
+    };
+  }, [e]);
+  const a = m(
+    () => ({
+      colorTheme: t,
+      colorMode: o ?? "light",
+      resolvedTheme: e,
+      systemPrefersDark: r
+    }),
+    [t, o, e, r]
+  );
+  return /* @__PURE__ */ s(l.Provider, { value: d, children: /* @__PURE__ */ s(v.Provider, { value: a, children: i }) });
 }
-const u = i;
+const S = p;
 export {
-  n as LanguageContext,
-  u as LanguageProvider,
-  i as SerendieProvider
+  l as LanguageContext,
+  S as LanguageProvider,
+  p as SerendieProvider
 };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { SerendiePreset } from './preset';
+export { ThemeContext, useThemeContext, useSystemColorScheme, resolveTheme, getColorSchemeScript, ColorSchemeScript, type ColorMode, type ColorTheme, type ThemeContextValue, type ColorSchemeScriptOptions, } from './theme/index';
+export { SerendieProvider, LanguageProvider, useTranslations, getTranslations, formatDateByLang, type Language, type SerendieProviderProps, } from './i18n/index';
 export * from './components/Accordion/index.ts';
 export * from './components/Avatar/index.ts';
 export * from './components/Badge/index.ts';