@simplysm/solid 13.0.71 → 13.0.74

package/src/components/form-control/checkbox/CheckboxGroup.tsx

@@ -31,7 +31,7 @@ const { Group } = createSelectionGroup({
   mode: "multiple",
   contextName: "CheckboxGroup",
   ItemComponent: Checkbox,
-  emptyErrorMsg: "Please select an item",
+  emptyErrorMsgKey: "validation.selectItem",
 });
 
 export const CheckboxGroup = Group as unknown as CheckboxGroupComponent;

package/src/components/form-control/checkbox/Radio.tsx

@@ -3,6 +3,7 @@ import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { ripple } from "../../../directives/ripple";
 import clsx from "clsx";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import {
   type CheckboxSize,
   checkboxBaseClass,
@@ -52,6 +53,8 @@ export const Radio: ParentComponent<RadioProps> = (props) => {
     "children",
   ]);
 
+  const i18n = useI18n();
+
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? false,
     onChange: () => local.onValueChange,
@@ -85,7 +88,7 @@ export const Radio: ParentComponent<RadioProps> = (props) => {
 
   const errorMsg = createMemo(() => {
     const v = local.value ?? false;
-    if (local.required && !v) return "This is a required selection";
+    if (local.required && !v) return i18n.t("validation.requiredSelection");
     return local.validate?.(v);
   });
 

package/src/components/form-control/checkbox/RadioGroup.tsx

@@ -31,7 +31,7 @@ const { Group } = createSelectionGroup({
   mode: "single",
   contextName: "RadioGroup",
   ItemComponent: Radio,
-  emptyErrorMsg: "Please select an item",
+  emptyErrorMsgKey: "validation.selectItem",
 });
 
 export const RadioGroup = Group as unknown as RadioGroupComponent;

package/src/components/form-control/color-picker/ColorPicker.tsx

@@ -4,6 +4,7 @@ import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { Invalid } from "../Invalid";
 import { type ComponentSize } from "../../../styles/tokens.styles";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 // Base style
 const baseClass = clsx(
@@ -94,6 +95,8 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
     "style",
   ]);
 
+  const i18n = useI18n();
+
   const [value, setValue] = createControllableSignal({
     value: () => local.value,
     onChange: () => local.onValueChange,
@@ -113,7 +116,7 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
 
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && (v === undefined || v === "")) return "This field is required";
+    if (local.required && (v === undefined || v === "")) return i18n.t("validation.required");
     return local.validate?.(v);
   });
 

package/src/components/form-control/combobox/Combobox.tsx

@@ -12,6 +12,7 @@ import { createControllableSignal } from "../../../hooks/createControllableSigna
 import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
 import { Invalid } from "../Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 void ripple;
 
@@ -149,6 +150,8 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     "touchMode",
   ]);
 
+  const i18n = useI18n();
+
   // State
   const [open, setOpen] = createSignal(false);
   const [query, setQuery] = createSignal("");
@@ -259,7 +262,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   const errorMsg = createMemo(() => {
     const v = getValue();
     if (local.required && (v === undefined || v === null || v === ""))
-      return "This field is required";
+      return i18n.t("validation.required");
     return local.validate?.(v);
   });
 
@@ -310,12 +313,12 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
 
     // Loading
     if (busyCount() > 0) {
-      return <div class={noResultsClass}>Searching...</div>;
+      return <div class={noResultsClass}>{i18n.t("combobox.searching")}</div>;
     }
 
     // Items empty
     if (items().length === 0) {
-      return <div class={noResultsClass}>No results found</div>;
+      return <div class={noResultsClass}>{i18n.t("combobox.noResults")}</div>;
     }
 
     // ItemTemplate approach

package/src/components/form-control/date-range-picker/DateRangePicker.tsx

@@ -6,7 +6,7 @@ import { createControllableSignal } from "../../../hooks/createControllableSigna
 import { type FieldSize } from "../field/Field.styles";
 import { DatePicker } from "../field/DatePicker";
 import { Select } from "../select/Select";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 export type DateRangePeriodType = "day" | "month" | "range";
 
@@ -78,7 +78,7 @@ function getLastDayOfMonth(date: DateOnly): DateOnly {
  * ```
  */
 export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   const [local, rest] = splitProps(props, [
     "periodType",
@@ -163,9 +163,9 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
         onValueChange={handlePeriodTypeChange}
         renderValue={(v: DateRangePeriodType) => {
           const labels = {
-            day: i18n?.t("dateRangePicker.day") ?? "Day",
-            month: i18n?.t("dateRangePicker.month") ?? "Month",
-            range: i18n?.t("dateRangePicker.range") ?? "Range"
+            day: i18n.t("dateRangePicker.day"),
+            month: i18n.t("dateRangePicker.month"),
+            range: i18n.t("dateRangePicker.range"),
           };
           return <>{labels[v]}</>;
         }}
@@ -175,13 +175,13 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
         inset
       >
         <Select.Item value={"day" as DateRangePeriodType}>
-          {i18n?.t("dateRangePicker.day") ?? "Day"}
+          {i18n.t("dateRangePicker.day")}
         </Select.Item>
         <Select.Item value={"month" as DateRangePeriodType}>
-          {i18n?.t("dateRangePicker.month") ?? "Month"}
+          {i18n.t("dateRangePicker.month")}
         </Select.Item>
         <Select.Item value={"range" as DateRangePeriodType}>
-          {i18n?.t("dateRangePicker.range") ?? "Range"}
+          {i18n.t("dateRangePicker.range")}
         </Select.Item>
       </Select>
 

package/src/components/form-control/editor/EditorToolbar.tsx

@@ -26,7 +26,7 @@ import {
   IconClearFormatting,
 } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 export interface EditorToolbarProps {
   editor: Editor;
@@ -63,7 +63,7 @@ const colorIndicatorClass = clsx("absolute inset-x-1 bottom-0.5", "h-0.5 rounded
 
 export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
   const e = () => props.editor;
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   // Track active state reactively with createEditorTransaction
   const isBold = createEditorTransaction(e, (editor) => editor.isActive("bold"));
@@ -131,7 +131,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isH1)}
-        title={i18n?.t("editorToolbar.heading1") ?? "Heading 1"}
+        title={i18n.t("editorToolbar.heading1")}
         onClick={() => props.editor.chain().focus().toggleHeading({ level: 1 }).run()}
       >
         <Icon icon={IconH1} size="1em" />
@@ -139,7 +139,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isH2)}
-        title={i18n?.t("editorToolbar.heading2") ?? "Heading 2"}
+        title={i18n.t("editorToolbar.heading2")}
         onClick={() => props.editor.chain().focus().toggleHeading({ level: 2 }).run()}
       >
         <Icon icon={IconH2} size="1em" />
@@ -152,7 +152,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isBold)}
-        title={i18n?.t("editorToolbar.bold") ?? "Bold"}
+        title={i18n.t("editorToolbar.bold")}
         onClick={() => props.editor.chain().focus().toggleBold().run()}
       >
         <Icon icon={IconBold} size="1em" />
@@ -160,7 +160,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isItalic)}
-        title={i18n?.t("editorToolbar.italic") ?? "Italic"}
+        title={i18n.t("editorToolbar.italic")}
         onClick={() => props.editor.chain().focus().toggleItalic().run()}
       >
         <Icon icon={IconItalic} size="1em" />
@@ -168,7 +168,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isUnderline)}
-        title={i18n?.t("editorToolbar.underline") ?? "Underline"}
+        title={i18n.t("editorToolbar.underline")}
         onClick={() => props.editor.chain().focus().toggleUnderline().run()}
       >
         <Icon icon={IconUnderline} size="1em" />
@@ -176,7 +176,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isStrike)}
-        title={i18n?.t("editorToolbar.strikethrough") ?? "Strikethrough"}
+        title={i18n.t("editorToolbar.strikethrough")}
         onClick={() => props.editor.chain().focus().toggleStrike().run()}
       >
         <Icon icon={IconStrikethrough} size="1em" />
@@ -186,7 +186,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <div class={separatorClass} />
 
       {/* 5. Text color + background color (using input[type=color]) */}
-      <label class={colorLabelClass} title={i18n?.t("editorToolbar.textColor") ?? "Text color"}>
+      <label class={colorLabelClass} title={i18n.t("editorToolbar.textColor")}>
         <span class={clsx("text-sm font-bold")}>A</span>
         <div class={colorIndicatorClass} style={{ "background-color": currentColor() }} />
         <input
@@ -196,7 +196,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
           onInput={(ev) => props.editor.chain().focus().setColor(ev.currentTarget.value).run()}
         />
       </label>
-      <label class={colorLabelClass} title={i18n?.t("editorToolbar.bgColor") ?? "Background color"}>
+      <label class={colorLabelClass} title={i18n.t("editorToolbar.bgColor")}>
         <span
           class={clsx("rounded px-0.5 text-sm font-bold")}
           style={{ "background-color": currentHighlight() }}
@@ -220,7 +220,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isBulletList)}
-        title={i18n?.t("editorToolbar.bulletList") ?? "Bullet list"}
+        title={i18n.t("editorToolbar.bulletList")}
         onClick={() => props.editor.chain().focus().toggleBulletList().run()}
       >
         <Icon icon={IconList} size="1em" />
@@ -228,7 +228,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isOrderedList)}
-        title={i18n?.t("editorToolbar.numberedList") ?? "Numbered list"}
+        title={i18n.t("editorToolbar.numberedList")}
         onClick={() => props.editor.chain().focus().toggleOrderedList().run()}
       >
         <Icon icon={IconListNumbers} size="1em" />
@@ -241,7 +241,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={toolbarBtnClass}
-        title={i18n?.t("editorToolbar.increaseIndent") ?? "Increase indent"}
+        title={i18n.t("editorToolbar.increaseIndent")}
         onClick={() => props.editor.chain().focus().sinkListItem("listItem").run()}
       >
         <Icon icon={IconIndentIncrease} size="1em" />
@@ -249,7 +249,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={toolbarBtnClass}
-        title={i18n?.t("editorToolbar.decreaseIndent") ?? "Decrease indent"}
+        title={i18n.t("editorToolbar.decreaseIndent")}
         onClick={() => props.editor.chain().focus().liftListItem("listItem").run()}
       >
         <Icon icon={IconIndentDecrease} size="1em" />
@@ -262,7 +262,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isBlockquote)}
-        title={i18n?.t("editorToolbar.blockquote") ?? "Blockquote"}
+        title={i18n.t("editorToolbar.blockquote")}
         onClick={() => props.editor.chain().focus().toggleBlockquote().run()}
       >
         <Icon icon={IconQuote} size="1em" />
@@ -270,7 +270,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isCodeBlock)}
-        title={i18n?.t("editorToolbar.codeBlock") ?? "Code block"}
+        title={i18n.t("editorToolbar.codeBlock")}
         onClick={() => props.editor.chain().focus().toggleCodeBlock().run()}
       >
         <Icon icon={IconCode} size="1em" />
@@ -283,7 +283,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isAlignLeft)}
-        title={i18n?.t("editorToolbar.alignLeft") ?? "Align left"}
+        title={i18n.t("editorToolbar.alignLeft")}
         onClick={() => props.editor.chain().focus().setTextAlign("left").run()}
       >
         <Icon icon={IconAlignLeft} size="1em" />
@@ -291,7 +291,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isAlignCenter)}
-        title={i18n?.t("editorToolbar.alignCenter") ?? "Align center"}
+        title={i18n.t("editorToolbar.alignCenter")}
         onClick={() => props.editor.chain().focus().setTextAlign("center").run()}
       >
         <Icon icon={IconAlignCenter} size="1em" />
@@ -299,7 +299,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isAlignRight)}
-        title={i18n?.t("editorToolbar.alignRight") ?? "Align right"}
+        title={i18n.t("editorToolbar.alignRight")}
         onClick={() => props.editor.chain().focus().setTextAlign("right").run()}
       >
         <Icon icon={IconAlignRight} size="1em" />
@@ -307,7 +307,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isAlignJustify)}
-        title={i18n?.t("editorToolbar.justify") ?? "Justify"}
+        title={i18n.t("editorToolbar.justify")}
         onClick={() => props.editor.chain().focus().setTextAlign("justify").run()}
       >
         <Icon icon={IconAlignJustified} size="1em" />
@@ -320,7 +320,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={toolbarBtnClass}
-        title={i18n?.t("editorToolbar.insertTable") ?? "Insert table"}
+        title={i18n.t("editorToolbar.insertTable")}
         onClick={() =>
           props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
         }
@@ -329,7 +329,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       </button>
 
       {/* 16. Insert image */}
-      <button type="button" class={toolbarBtnClass} title={i18n?.t("editorToolbar.insertImage") ?? "Insert image"} onClick={handleImageInsert}>
+      <button type="button" class={toolbarBtnClass} title={i18n.t("editorToolbar.insertImage")} onClick={handleImageInsert}>
         <Icon icon={IconPhoto} size="1em" />
       </button>
 
@@ -340,7 +340,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={toolbarBtnClass}
-        title={i18n?.t("editorToolbar.clearFormatting") ?? "Clear formatting"}
+        title={i18n.t("editorToolbar.clearFormatting")}
         onClick={() => props.editor.chain().focus().clearNodes().unsetAllMarks().run()}
       >
         <Icon icon={IconClearFormatting} size="1em" />

package/src/components/form-control/field/DatePicker.tsx

@@ -5,6 +5,7 @@ import { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { fieldInputClass, type FieldSize, getFieldWrapperClass } from "./Field.styles";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 type DatePickerUnit = "year" | "month" | "date";
 
@@ -155,6 +156,8 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
     "touchMode",
   ]);
 
+  const i18n = useI18n();
+
   // Default unit is date
   const fieldType = () => local.unit ?? "date";
 
@@ -190,12 +193,12 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
   // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && v === undefined) return "This field is required";
+    if (local.required && v === undefined) return i18n.t("validation.required");
     if (v !== undefined) {
       if (local.min !== undefined && v.tick < local.min.tick)
-        return `Must be greater than or equal to ${local.min}`;
+        return i18n.t("validation.minDate", { min: String(local.min) });
       if (local.max !== undefined && v.tick > local.max.tick)
-        return `Must be less than or equal to ${local.max}`;
+        return i18n.t("validation.maxDate", { max: String(local.max) });
     }
     return local.validate?.(v);
   });

package/src/components/form-control/field/DateTimePicker.tsx

@@ -5,6 +5,7 @@ import { DateTime } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 type DateTimePickerUnit = "minute" | "second";
 
@@ -150,6 +151,8 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
     "touchMode",
   ]);
 
+  const i18n = useI18n();
+
   // Default unit is minute
   const fieldType = () => local.unit ?? "minute";
 
@@ -188,12 +191,12 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
   // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && v === undefined) return "This field is required";
+    if (local.required && v === undefined) return i18n.t("validation.required");
     if (v !== undefined) {
       if (local.min !== undefined && v.tick < local.min.tick)
-        return `Must be greater than or equal to ${local.min.toFormatString("yyyy-MM-dd HH:mm:ss")}`;
+        return i18n.t("validation.minDate", { min: local.min.toFormatString("yyyy-MM-dd HH:mm:ss") });
       if (local.max !== undefined && v.tick > local.max.tick)
-        return `Must be less than or equal to ${local.max.toFormatString("yyyy-MM-dd HH:mm:ss")}`;
+        return i18n.t("validation.maxDate", { max: local.max.toFormatString("yyyy-MM-dd HH:mm:ss") });
     }
     return local.validate?.(v);
   });

package/src/components/form-control/field/NumberInput.tsx

@@ -20,6 +20,7 @@ import {
 } from "./Field.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 // NumberInput-specific input style (right-aligned + spinner hidden)
 const numberInputClass = clsx(
@@ -216,6 +217,8 @@ export const NumberInput: NumberInputComponent = (props) => {
     "children",
   ]);
 
+  const i18n = useI18n();
+
   // Internal string state to track editing state
   const [inputStr, setInputStr] = createSignal<string>("");
   const [isEditing, setIsEditing] = createSignal(false);
@@ -298,10 +301,10 @@ export const NumberInput: NumberInputComponent = (props) => {
   // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && v === undefined) return "This field is required";
+    if (local.required && v === undefined) return i18n.t("validation.required");
     if (v !== undefined) {
-      if (local.min !== undefined && v < local.min) return `Minimum value is ${local.min}`;
-      if (local.max !== undefined && v > local.max) return `Maximum value is ${local.max}`;
+      if (local.min !== undefined && v < local.min) return i18n.t("validation.minValue", { min: String(local.min) });
+      if (local.max !== undefined && v > local.max) return i18n.t("validation.maxValue", { max: String(local.max) });
     }
     return local.validate?.(v);
   });

package/src/components/form-control/field/TextInput.tsx

@@ -13,6 +13,7 @@ import {
 } from "./Field.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 interface TextInputSlotsContextValue {
   setPrefix: (content: SlotAccessor) => void;
@@ -178,6 +179,8 @@ const TextInputInner = (props: TextInputProps) => {
     "children",
   ]);
 
+  const i18n = useI18n();
+
   // Support controlled/uncontrolled pattern
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "",
@@ -253,14 +256,14 @@ const TextInputInner = (props: TextInputProps) => {
   // Validation error message (check in order, return first failure message)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && !v) return "This is a required field";
+    if (local.required && !v) return i18n.t("validation.required");
     if (v) {
       if (local.minLength != null && v.length < local.minLength)
-        return `Enter at least ${local.minLength} characters`;
+        return i18n.t("validation.minLength", { min: String(local.minLength) });
       if (local.maxLength != null && v.length > local.maxLength)
-        return `Enter up to ${local.maxLength} characters`;
+        return i18n.t("validation.maxLength", { max: String(local.maxLength) });
       if (local.pattern != null && !new RegExp(local.pattern).test(v))
-        return "The input format is invalid";
+        return i18n.t("validation.invalidFormat");
     }
     return local.validate?.(v);
   });

package/src/components/form-control/field/Textarea.tsx

@@ -6,6 +6,7 @@ import { createIMEHandler } from "../../../hooks/createIMEHandler";
 import { type FieldSize, textAreaSizeClasses, getTextareaWrapperClass } from "./Field.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 export interface TextareaProps {
   /** Input value */
@@ -98,6 +99,8 @@ export const Textarea: Component<TextareaProps> = (props) => {
     "style",
   ]);
 
+  const i18n = useI18n();
+
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "",
     onChange: () => local.onValueChange,
@@ -174,12 +177,12 @@ export const Textarea: Component<TextareaProps> = (props) => {
   // Validation error message (check in order, return first failure message)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && !v) return "This is a required field";
+    if (local.required && !v) return i18n.t("validation.required");
     if (v) {
       if (local.minLength != null && v.length < local.minLength)
-        return `Enter at least ${local.minLength} characters`;
+        return i18n.t("validation.minLength", { min: String(local.minLength) });
       if (local.maxLength != null && v.length > local.maxLength)
-        return `Enter up to ${local.maxLength} characters`;
+        return i18n.t("validation.maxLength", { max: String(local.maxLength) });
     }
     return local.validate?.(v);
   });

package/src/components/form-control/field/TimePicker.tsx

@@ -5,6 +5,7 @@ import { Time } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 type TimePickerUnit = "minute" | "second";
 
@@ -125,6 +126,8 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
     "touchMode",
   ]);
 
+  const i18n = useI18n();
+
   // Default unit is minute
   const fieldType = () => local.unit ?? "minute";
 
@@ -163,12 +166,12 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
   // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && v === undefined) return "This field is required";
+    if (local.required && v === undefined) return i18n.t("validation.required");
     if (v !== undefined) {
       if (local.min !== undefined && v.tick < local.min.tick)
-        return `Must be greater than or equal to ${local.min.toFormatString("HH:mm:ss")}`;
+        return i18n.t("validation.minDate", { min: local.min.toFormatString("HH:mm:ss") });
       if (local.max !== undefined && v.tick > local.max.tick)
-        return `Must be less than or equal to ${local.max.toFormatString("HH:mm:ss")}`;
+        return i18n.t("validation.maxDate", { max: local.max.toFormatString("HH:mm:ss") });
     }
     return local.validate?.(v);
   });

package/src/components/form-control/numpad/Numpad.tsx

@@ -7,6 +7,7 @@ import { NumberInput } from "../field/NumberInput";
 import { Icon } from "../../display/Icon";
 import { IconEraser, IconArrowLeft } from "@tabler/icons-solidjs";
 import type { ComponentSize } from "../../../styles/tokens.styles";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 export interface NumpadProps {
   /** Input value */
@@ -54,6 +55,7 @@ function valueToInputStr(value: number | undefined): string {
 }
 
 export const Numpad: Component<NumpadProps> = (props) => {
+  const i18n = useI18n();
   // Controlled/uncontrolled pattern
   const [value, setValue] = createControllableSignal({
     value: () => props.value,
@@ -151,7 +153,7 @@ export const Numpad: Component<NumpadProps> = (props) => {
           disabled={props.required && value() == null}
           onClick={handleEnter}
         >
-          ENT
+          {i18n.t("numpad.enter")}
         </Button>
       </Show>
 

package/src/components/form-control/select/Select.tsx

@@ -31,7 +31,7 @@ import { createSlotSignal } from "../../../hooks/createSlotSignal";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
 import { Invalid } from "../Invalid";
 import { TextInput } from "../field/TextInput";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 void ripple;
 
@@ -264,7 +264,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     "getIsHidden",
   ]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const [open, setOpen] = createSignal(false);
 
   // Search text signal
@@ -349,7 +349,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
   const errorMsg = createMemo(() => {
     const v = value();
     if (local.required && (v === undefined || v === null || v === ""))
-      return "This is a required field";
+      return i18n.t("validation.required");
     return local.validate?.(v);
   });
 
@@ -536,7 +536,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
               <TextInput
                 value={searchText()}
                 onValueChange={setSearchText}
-                placeholder={i18n?.t("select.searchPlaceholder") ?? "Search..."}
+                placeholder={i18n.t("select.searchPlaceholder")}
                 class={searchInputClass}
               />
             </Show>
@@ -549,7 +549,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
                   class={selectAllBtnClass}
                   onClick={handleSelectAll}
                 >
-                  {i18n?.t("select.selectAll") ?? "Select all"}
+                  {i18n.t("select.selectAll")}
                 </button>
                 <button
                   type="button"
@@ -557,7 +557,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
                   class={selectAllBtnClass}
                   onClick={handleDeselectAll}
                 >
-                  {i18n?.t("select.deselectAll") ?? "Deselect all"}
+                  {i18n.t("select.deselectAll")}
                 </button>
               </div>
             </Show>
@@ -566,7 +566,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
                 {/* Unset item */}
                 <Show when={showUnsetItem()}>
                   <SelectItem value={undefined as T}>
-                    <span class={textMuted}>{i18n?.t("select.unset") ?? "Unset"}</span>
+                    <span class={textMuted}>{i18n.t("select.unset")}</span>
                   </SelectItem>
                 </Show>
                 {renderItems(visibleItems() ?? [], 0)}