@serendie/ui 2.2.8 → 2.3.0-dev.202512051042

package/dist/components/TextField/TextField.js

@@ -1,81 +1,82 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { SerendieSymbolAlertCircle as T, SerendieSymbolClose as W } from "@serendie/symbols";
-import q from "../../node_modules/merge-refs/dist/esm/index.js";
-import m, { forwardRef as z } from "react";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { SerendieSymbolAlertCircle as A, SerendieSymbolClose as W } from "@serendie/symbols";
+import z from "../../node_modules/merge-refs/dist/esm/index.js";
+import m, { forwardRef as B } from "react";
 import { textFieldRecipe as x } from "../../recipes/textFieldRecipe.js";
-import { cx as B } from "../../styled-system/css/cx.js";
+import { useTranslations as D } from "../../i18n/index.js";
+import { cx as E } from "../../styled-system/css/cx.js";
 import { css as b } from "../../styled-system/css/css.js";
-const M = z(
+const U = B(
   ({
     placeholder: F,
     label: d,
     description: i,
     required: u,
     requiredLabel: S,
-    invalidMessage: c,
-    invalid: a,
+    invalidMessage: n,
+    invalid: r,
     type: V = "text",
-    disabled: n,
+    disabled: c,
     onChange: h,
     value: f,
     className: w,
     leftContent: N,
     rightContent: p,
-    ...l
+    ...s
   }, y) => {
-    const o = m.useRef(null), C = q(o, y), [P, _] = x.splitVariantProps({
-      ...l
-    }), t = x(P), j = i || a && c, [I, k] = m.useState(l.defaultValue || f), v = l.id || m.useId(), A = () => {
+    const C = D(), o = m.useRef(null), P = z(o, y), [_, j] = x.splitVariantProps({
+      ...s
+    }), t = x(_), I = i || r && n, [T, k] = m.useState(s.defaultValue || f), v = s.id || m.useId(), q = () => {
       var R;
-      const s = {
+      const l = {
         target: { value: "" }
       };
-      g(s), (R = l.onReset) == null || R.call(l, s), o.current && (o.current.value = "");
-    }, g = (s) => {
-      k(s.target.value), h && h(s);
+      g(l), (R = s.onReset) == null || R.call(s, l), o.current && (o.current.value = "");
+    }, g = (l) => {
+      k(l.target.value), h && h(l);
     };
-    return /* @__PURE__ */ r("div", { className: B(t.root, w), children: [
-      d ? /* @__PURE__ */ r("label", { className: t.label, htmlFor: v, children: [
+    return /* @__PURE__ */ a("div", { className: E(t.root, w), children: [
+      d ? /* @__PURE__ */ a("label", { className: t.label, htmlFor: v, children: [
         d,
-        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: S ?? "必須" })
+        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: S ?? C("common.required") })
       ] }) : null,
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         "div",
         {
           className: t.inputWrapper,
-          "data-invalid": a ? !0 : void 0,
-          "data-disabled": n ? !0 : void 0,
+          "data-invalid": r ? !0 : void 0,
+          "data-disabled": c ? !0 : void 0,
           children: [
             N ? /* @__PURE__ */ e("div", { className: t.leftContent, children: N }) : /* @__PURE__ */ e("div", {}),
             /* @__PURE__ */ e(
               "input",
               {
-                ref: C,
+                ref: P,
                 id: v,
                 placeholder: F,
                 required: u,
-                disabled: n,
+                disabled: c,
                 value: f,
                 type: V,
                 className: t.input,
                 onChange: g,
-                ..._
+                ...j
               }
             ),
-            p ? /* @__PURE__ */ e("div", { className: t.rightContent, children: p }) : /* @__PURE__ */ e("div", { className: t.icon, children: !n && /* disabledの場合はアイコンを表示しない */
-            (a ? /* @__PURE__ */ e(
+            p ? /* @__PURE__ */ e("div", { className: t.rightContent, children: p }) : /* @__PURE__ */ e("div", { className: t.icon, children: !c && /* disabledの場合はアイコンを表示しない */
+            (r ? /* @__PURE__ */ e(
               "span",
               {
                 className: b({
                   color: "sd.system.color.impression.negative"
                 }),
-                children: /* @__PURE__ */ e(T, { width: 20, height: 20 })
+                children: /* @__PURE__ */ e(A, { width: 20, height: 20 })
               }
-            ) : I ? /* @__PURE__ */ e(
+            ) : T ? /* @__PURE__ */ e(
               "button",
               {
                 className: b({ cursor: "pointer" }),
-                onClick: A,
+                onClick: q,
                 "aria-label": "値をクリア",
                 children: /* @__PURE__ */ e(W, { width: 20, height: 20 })
               }
@@ -83,13 +84,13 @@ const M = z(
           ]
         }
       ),
-      j && /* @__PURE__ */ r("div", { className: t.messageField, children: [
+      I && /* @__PURE__ */ a("div", { className: t.messageField, children: [
         i && /* @__PURE__ */ e("p", { className: t.description, children: i }),
-        a && c && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: c })
+        r && n && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: n })
       ] })
     ] });
   }
 );
 export {
-  M as TextField
+  U as TextField
 };

package/dist/i18n/dictionary.d.ts

@@ -0,0 +1,10 @@
+export declare const dictionary: {
+    readonly ja: {
+        readonly "common.required": "必須";
+        readonly "pagination.page": "{{page}}ページ目";
+    };
+    readonly en: {
+        readonly "common.required": "Required";
+        readonly "pagination.page": "Page {{page}}";
+    };
+};

package/dist/i18n/dictionary.js

@@ -0,0 +1,13 @@
+const e = {
+  ja: {
+    "common.required": "必須",
+    "pagination.page": "{{page}}ページ目"
+  },
+  en: {
+    "common.required": "Required",
+    "pagination.page": "Page {{page}}"
+  }
+};
+export {
+  e as dictionary
+};

package/dist/i18n/index.d.ts

@@ -0,0 +1,20 @@
+import { dictionary } from './dictionary';
+import { Language } from './provider';
+export { SerendieProvider, LanguageProvider, type Language } from './provider';
+export type TranslationKey = keyof typeof dictionary.ja;
+/**
+ * 翻訳関数を生成するヘルパー
+ * Context不要な場合や、サーバーサイドで直接使う場合に使用
+ */
+export declare function getTranslations(lang: Language): (key: TranslationKey, params?: Record<string, string | number>) => string;
+/**
+ * 翻訳関数を取得するReact Hook
+ * SerendieProviderがない場合はデフォルト言語（ja）を使用します
+ */
+export declare function useTranslations(): (key: TranslationKey, params?: Record<string, string | number>) => string;
+/**
+ * 言語に合わせて日付文字列をフォーマットする
+ * @param date ISO形式などDateが解釈できる文字列
+ * @param lang 言語
+ */
+export declare function formatDateByLang(date: string, lang: Language): string;

package/dist/i18n/index.js

@@ -0,0 +1,34 @@
+import { useContext as l } from "react";
+import { dictionary as u } from "./dictionary.js";
+import { LanguageContext as s } from "./provider.js";
+import { LanguageProvider as x, SerendieProvider as P } from "./provider.js";
+function c(e) {
+  return function(r, t) {
+    let n = u[e][r];
+    return !n && e !== "ja" && (n = u.ja[r]), n ? (t && Object.entries(t).forEach(([a, f]) => {
+      const i = `{{${a}}}`;
+      n.includes(i) || console.warn(
+        `Placeholder "${i}" not found in translation "${n}"`
+      ), n = n.replace(
+        new RegExp(`\\{\\{${a}\\}\\}`, "g"),
+        String(f)
+      );
+    }), n) : (console.warn(`Translation key "${r}" not found`), r);
+  };
+}
+function m() {
+  const e = l(s);
+  return !e && process.env.NODE_ENV === "development" && console.warn(
+    "SerendieProvider is not found. Using default language 'ja'. Consider wrapping your app with <SerendieProvider lang='ja'>"
+  ), c(e || "ja");
+}
+function j(e, o) {
+  return new Date(e).toLocaleDateString(o === "en" ? "en-US" : "ja-JP");
+}
+export {
+  x as LanguageProvider,
+  P as SerendieProvider,
+  j as formatDateByLang,
+  c as getTranslations,
+  m as useTranslations
+};

package/dist/i18n/provider.d.ts

@@ -0,0 +1,14 @@
+export type Language = "ja" | "en";
+export declare const LanguageContext: import('react').Context<Language | undefined>;
+/**
+ * Serendie UIの設定を提供するProvider
+ * アプリケーションのルートで使用してください
+ */
+export declare function SerendieProvider({ lang, children, }: {
+    lang: Language;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated LanguageProvider は SerendieProvider にリネームされました
+ */
+export declare const LanguageProvider: typeof SerendieProvider;

package/dist/i18n/provider.js

@@ -0,0 +1,15 @@
+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
+}) {
+  return /* @__PURE__ */ o(n.Provider, { value: e, children: r });
+}
+const u = i;
+export {
+  n as LanguageContext,
+  u as LanguageProvider,
+  i as SerendieProvider
+};

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export * from './components/ProgressIndicator/index.ts';
 export * from './components/RadioButton/index.ts';
 export * from './components/Search/index.ts';
 export * from './components/Select/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';

package/dist/index.js

@@ -30,16 +30,17 @@ import { RadioButton as Mo, RadioButtonStyle as wo, radioCheckedIconCss as Ao, r
 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 { Steps as Ho } from "./components/Steps/Steps.js";
+import { Switch as Ko, SwitchStyle as Oo } from "./components/Switch/Switch.js";
+import { Tabs as Vo, TabsStyle as Xo } from "./components/Tabs/Tabs.js";
+import { TabItem as Zo, TabItemStyle as _o } from "./components/Tabs/TabItem.js";
+import { TextArea as or } from "./components/TextArea/TextArea.js";
+import { TextField as er } from "./components/TextField/TextField.js";
+import { Toast as ar, ToastStyle as pr, toaster as mr } from "./components/Toast/Toast.js";
+import { Tooltip as ir } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as fr } from "./components/TopAppBar/TopAppBar.js";
+import { DataTableComponent as cr } from "./components/DataTable/DataTableComponent.js";
+import { parse as lr } from "./node_modules/@zag-js/date-picker/dist/index.js";
 export {
   a as Accordion,
   m as AccordionGroup,
@@ -60,7 +61,7 @@ export {
   K as ChoiceBoxStyle,
   Q as DashboardWidget,
   X as DataTable,
-  fr as DataTableComponent,
+  cr as DataTableComponent,
   Z as DatePicker,
   $ as Divider,
   oo as DividerStyle,
@@ -88,18 +89,19 @@ export {
   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,
+  Ho as Steps,
+  Ko as Switch,
+  Oo as SwitchStyle,
+  Zo as TabItem,
+  _o as TabItemStyle,
+  Vo as Tabs,
+  Xo as TabsStyle,
+  or as TextArea,
+  er as TextField,
+  ar as Toast,
+  pr as ToastStyle,
+  ir as Tooltip,
+  fr as TopAppBar,
   q as checkboxCheckedIconCss,
   z as checkboxIconCss,
   E as checkboxUncheckedIconCss,
@@ -108,12 +110,12 @@ export {
   M as getChartColor,
   w as getChartColors,
   A as legendChartMargin,
-  cr as parseDate,
+  lr as parseDate,
   Ao as radioCheckedIconCss,
   Lo as radioIconCss,
   No as radioUncheckedIconCss,
   L as spaciousChartMargin,
-  ar as toaster,
+  mr as toaster,
   N as useBarChartProps,
   R as useChartProps,
   F as useLineChartProps,