@simplysm/solid 13.0.72 → 13.0.74

package/src/components/features/shared-data/SharedDataSelect.tsx

@@ -1,20 +1,79 @@
-import { createMemo, type JSX, mergeProps, splitProps } from "solid-js";
-import { IconEdit, IconSearch } from "@tabler/icons-solidjs";
+import {
+  children as resolveChildren,
+  type Component,
+  createMemo,
+  For,
+  type JSX,
+  mergeProps,
+  splitProps,
+} from "solid-js";
+import { IconSearch } from "@tabler/icons-solidjs";
 import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
 import { Select, type SelectProps } from "../../form-control/select/Select";
 import { Icon } from "../../display/Icon";
 import { useDialog } from "../../disclosure/DialogContext";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import { type ComponentSize } from "../../../styles/tokens.styles";
+import {
+  type DataSelectDialogResult,
+  type DialogConfig,
+} from "../data-select-button/DataSelectButton";
+
+// -- Slot detection --
+const ITEM_TEMPLATE_BRAND = Symbol("SharedDataSelect.ItemTemplate");
+const ACTION_BRAND = Symbol("SharedDataSelect.Action");
+
+interface ItemTemplateDef {
+  __brand: typeof ITEM_TEMPLATE_BRAND;
+  children: (item: any, index: number, depth: number) => JSX.Element;
+}
+
+interface ActionDef {
+  __brand: typeof ACTION_BRAND;
+  children: JSX.Element;
+  onClick?: (e: MouseEvent) => void;
+}
+
+function isItemTemplateDef(v: unknown): v is ItemTemplateDef {
+  return v != null && typeof v === "object" && "__brand" in v && (v as any).__brand === ITEM_TEMPLATE_BRAND;
+}
+
+function isActionDef(v: unknown): v is ActionDef {
+  return v != null && typeof v === "object" && "__brand" in v && (v as any).__brand === ACTION_BRAND;
+}
+
+// -- Compound components --
+const ItemTemplate: Component<{
+  children: (item: any, index: number, depth: number) => JSX.Element;
+}> = (props) => {
+  // eslint-disable-next-line solid/reactivity -- factory function, not reactive JSX
+  return (() => ({
+    __brand: ITEM_TEMPLATE_BRAND,
+    children: props.children,
+  })) as unknown as JSX.Element;
+};
+
+const Action: Component<{
+  children?: JSX.Element;
+  onClick?: (e: MouseEvent) => void;
+}> = (props) => {
+  // eslint-disable-next-line solid/reactivity -- factory function, not reactive JSX
+  return (() => ({
+    __brand: ACTION_BRAND,
+    children: props.children,
+    onClick: props.onClick,
+  })) as unknown as JSX.Element;
+};
 
 /** SharedDataSelect Props */
 export interface SharedDataSelectProps<TItem> {
   /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
 
-  /** Currently selected value */
+  /** Currently selected key value (translated to item internally) */
   value?: unknown;
-  /** Value change callback */
+  /** Value change callback (receives key, not item) */
   onValueChange?: (value: unknown) => void;
   /** Multiple selection mode */
   multiple?: boolean;
@@ -29,21 +88,37 @@ export interface SharedDataSelectProps<TItem> {
 
   /** Item filter function */
   filterFn?: (item: TItem, index: number) => boolean;
-  /** Selection modal component factory */
-  modal?: () => JSX.Element;
-  /** Edit modal component factory */
-  editModal?: () => JSX.Element;
+  /** Selection dialog configuration */
+  dialog?: DialogConfig;
+
+  /** Compound children: ItemTemplate, Action */
+  children: JSX.Element;
+}
 
-  /** Item rendering function */
-  children: (item: TItem, index: number, depth: number) => JSX.Element;
+interface SharedDataSelectComponent {
+  <TItem>(props: SharedDataSelectProps<TItem>): JSX.Element;
+  ItemTemplate: typeof ItemTemplate;
+  Action: typeof Action;
 }
 
-export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JSX.Element {
-  const [local, rest] = splitProps(props, ["data", "filterFn", "modal", "editModal", "children"]);
+const SharedDataSelectBase = <TItem,>(props: SharedDataSelectProps<TItem>): JSX.Element => {
+  const [local, rest] = splitProps(props, [
+    "data", "filterFn", "dialog", "children",
+  ]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const dialog = useDialog();
 
+  // Resolve compound children
+  const resolved = resolveChildren(() => local.children);
+  const defs = createMemo(() => {
+    const arr = resolved.toArray();
+    return {
+      itemTemplate: arr.find(isItemTemplateDef) as unknown as ItemTemplateDef | undefined,
+      actions: arr.filter(isActionDef) as unknown as ActionDef[],
+    };
+  });
+
   // Items with filterFn applied
   const items = createMemo(() => {
     const allItems = local.data.items();
@@ -51,21 +126,77 @@ export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JS
     return allItems.filter(local.filterFn);
   });
 
-  // Open modal
-  const handleOpenModal = async () => {
-    if (!local.modal) return;
-    await dialog.show(local.modal, {});
+  // Normalize value to keys array
+  const normalizeKeys = (value: unknown): (string | number)[] => {
+    if (value === undefined || value === null) return [];
+    if (Array.isArray(value)) return value;
+    return [value as string | number];
   };
 
-  // Open edit modal
-  const handleOpenEditModal = async () => {
-    if (!local.editModal) return;
-    await dialog.show(local.editModal, {});
+  // Translate key(s) to item(s) for Select's value prop
+  const keyToItem = (key: string | number): TItem | undefined => {
+    return local.data.get(key);
+  };
+
+  const valueAsItem = createMemo((): TItem | TItem[] | undefined => {
+    const key = rest.value;
+    if (key === undefined || key === null) return undefined;
+    if (Array.isArray(key)) {
+      return key.map((k) => keyToItem(k as string | number)).filter((v): v is TItem => v !== undefined);
+    }
+    return keyToItem(key as string | number);
+  });
+
+  // Translate item back to key for onValueChange callback
+  const itemToKey = (item: TItem | TItem[] | undefined): unknown => {
+    if (item === undefined || item === null) return undefined;
+    if (Array.isArray(item)) return item.map((i) => local.data.getKey(i));
+    return local.data.getKey(item);
+  };
+
+  // Open dialog and handle selection result
+  const handleOpenDialog = async () => {
+    if (!local.dialog) return;
+
+    const dialogConfig = local.dialog;
+    const result = await dialog.show<DataSelectDialogResult<string | number>>(
+      () => {
+        const instance = useDialogInstance<DataSelectDialogResult<string | number>>();
+        return (
+          <dialogConfig.component
+            {...(dialogConfig.props ?? {})}
+            selectMode={rest.multiple ? "multiple" : "single"}
+            selectedKeys={normalizeKeys(rest.value)}
+            onSelect={(r: { keys: (string | number)[] }) =>
+              instance?.close({ selectedKeys: r.keys })
+            }
+          />
+        );
+      },
+      dialogConfig.option ?? {},
+    );
+
+    if (result) {
+      const newKeys = result.selectedKeys;
+      if (rest.multiple) {
+        rest.onValueChange?.(newKeys);
+      } else {
+        rest.onValueChange?.(newKeys.length > 0 ? newKeys[0] : undefined);
+      }
+    }
   };
 
-  // Use mergeProps + as for Select's discriminated union (multiple: true | false?) and TItem → unknown conversion
-  // Wrap with getter to satisfy SolidJS reactivity lint rules
   const selectProps = mergeProps(rest, {
+    get value() {
+      return valueAsItem();
+    },
+    get onValueChange() {
+      if (!rest.onValueChange) return undefined;
+      // eslint-disable-next-line solid/reactivity -- inside getter, tracked scope
+      return (item: TItem | TItem[] | undefined) => {
+        rest.onValueChange!(itemToKey(item));
+      };
+    },
     get items() {
       return items();
     },
@@ -87,17 +218,25 @@ export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JS
 
   return (
     <Select {...selectProps}>
-      <Select.ItemTemplate>{local.children}</Select.ItemTemplate>
-      {local.modal && (
-        <Select.Action onClick={() => void handleOpenModal()} aria-label={i18n?.t("sharedDataSelect.search") ?? "Search"}>
-          <Icon icon={IconSearch} />
-        </Select.Action>
+      {defs().itemTemplate && (
+        <Select.ItemTemplate>{defs().itemTemplate!.children}</Select.ItemTemplate>
       )}
-      {local.editModal && (
-        <Select.Action onClick={() => void handleOpenEditModal()} aria-label={i18n?.t("sharedDataSelect.edit") ?? "Edit"}>
-          <Icon icon={IconEdit} />
+      {local.dialog && (
+        <Select.Action onClick={() => void handleOpenDialog()} aria-label={i18n.t("sharedDataSelect.search")}>
+          <Icon icon={IconSearch} />
         </Select.Action>
       )}
+      <For each={defs().actions}>
+        {(action) => (
+          <Select.Action onClick={action.onClick}>
+            {action.children}
+          </Select.Action>
+        )}
+      </For>
     </Select>
   );
-}
+};
+
+export const SharedDataSelect: SharedDataSelectComponent = SharedDataSelectBase as any;
+SharedDataSelect.ItemTemplate = ItemTemplate;
+SharedDataSelect.Action = Action;

package/src/components/features/shared-data/SharedDataSelectButton.tsx

@@ -3,6 +3,7 @@ import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDa
 import {
   DataSelectButton,
   type DataSelectButtonProps,
+  type DialogConfig,
 } from "../data-select-button/DataSelectButton";
 import { type ComponentSize } from "../../../styles/tokens.styles";
 
@@ -26,8 +27,8 @@ export interface SharedDataSelectButtonProps<TItem> {
   /** Borderless style */
   inset?: boolean;
 
-  /** Selection modal component factory */
-  modal: () => JSX.Element;
+  /** Selection dialog configuration */
+  dialog: DialogConfig;
   /** Item rendering function */
   children: (item: TItem) => JSX.Element;
 }

package/src/components/features/shared-data/SharedDataSelectList.tsx

@@ -5,7 +5,7 @@ import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDa
 import { List } from "../../data/list/List";
 import { Pagination } from "../../data/Pagination";
 import { TextInput } from "../../form-control/field/TextInput";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import { textMuted } from "../../../styles/tokens.styles";
 import { createSlotSignal } from "../../../hooks/createSlotSignal";
 import {
@@ -77,7 +77,7 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
     "header",
   ]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   // ─── Slot signals ──────────────────────────────────────
 
@@ -203,7 +203,7 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
             <TextInput
               value={searchText()}
               onValueChange={setSearchText}
-              placeholder={i18n?.t("sharedDataSelectList.searchPlaceholder") ?? "Search..."}
+              placeholder={i18n.t("sharedDataSelectList.searchPlaceholder")}
               class={"w-full"}
             />
           </div>
@@ -231,7 +231,7 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
               disabled={local.disabled}
               onClick={() => handleSelect(undefined)}
             >
-              <span class={textMuted}>Unspecified</span>
+              <span class={textMuted}>{i18n.t("sharedDataSelectList.unspecified")}</span>
             </List.Item>
           </Show>
 

package/src/components/feedback/notification/NotificationBanner.tsx

@@ -3,7 +3,7 @@ import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { IconX } from "@tabler/icons-solidjs";
 import { useNotification } from "./NotificationContext";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import { Icon } from "../../display/Icon";
 import { themeTokens } from "../../../styles/tokens.styles";
 
@@ -39,7 +39,7 @@ const dismissButtonClass = clsx("rounded", "p-1", "hover:bg-white/20");
 
 export const NotificationBanner: Component = () => {
   const notification = useNotification();
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   const handleDismiss = () => {
     notification.dismissBanner();
@@ -74,7 +74,7 @@ export const NotificationBanner: Component = () => {
               </Show>
               <button
                 type="button"
-                aria-label={i18n?.t("notification.close") ?? "Close notification"}
+                aria-label={i18n.t("notification.close")}
                 class={dismissButtonClass}
                 onClick={handleDismiss}
               >

package/src/components/feedback/notification/NotificationBell.tsx

@@ -7,6 +7,7 @@ import { Dropdown } from "../../disclosure/Dropdown";
 import { Icon } from "../../display/Icon";
 import { NotificationBanner } from "./NotificationBanner";
 import { iconButtonBase } from "../../../styles/patterns.styles";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 export interface NotificationBellProps {
   showBanner?: boolean;
@@ -52,6 +53,7 @@ const itemTimeClass = clsx("mt-1 text-xs", "text-base-400");
 
 export const NotificationBell: Component<NotificationBellProps> = (props) => {
   const notification = useNotification();
+  const i18n = useI18n();
   const [open, setOpen] = createSignal(false);
 
   const handleClear = () => {
@@ -78,7 +80,7 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
             type="button"
             data-notification-bell
             class={buttonClass}
-            aria-label={`${notification.unreadCount()} notifications`}
+            aria-label={i18n.t("notificationBell.unreadCount", { count: String(notification.unreadCount()) })}
             aria-haspopup="true"
             aria-expanded={open()}
           >
@@ -93,7 +95,7 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
         <Dropdown.Content>
           <div class="w-80 p-2">
             <div class={dropdownHeaderClass}>
-              <span class="font-bold">Notifications</span>
+              <span class="font-bold">{i18n.t("notificationBell.notifications")}</span>
               <Show when={notification.items().length > 0}>
                 <button
                   type="button"
@@ -101,14 +103,14 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
                   class={clearButtonClass}
                   onClick={handleClear}
                 >
-                  Clear All
+                  {i18n.t("notificationBell.clearAll")}
                 </button>
               </Show>
             </div>
 
             <Show
               when={notification.items().length > 0}
-              fallback={<div class={emptyClass}>No notifications</div>}
+              fallback={<div class={emptyClass}>{i18n.t("notificationBell.noNotifications")}</div>}
             >
               <div class={listClass}>
                 <For each={[...notification.items()].reverse()}>

package/src/components/feedback/notification/NotificationProvider.tsx

@@ -8,6 +8,7 @@ import {
   type NotificationUpdateOptions,
 } from "./NotificationContext";
 import { useLogger } from "../../../hooks/useLogger";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 const MAX_ITEMS = 50;
 
@@ -22,6 +23,7 @@ const MAX_ITEMS = 50;
  */
 export const NotificationProvider: ParentComponent = (props) => {
   const logger = useLogger();
+  const i18n = useI18n();
   const [items, setItems] = createSignal<NotificationItem[]>([]);
   const [dismissedBannerId, setDismissedBannerId] = createSignal<string | null>(null);
 
@@ -158,7 +160,7 @@ export const NotificationProvider: ParentComponent = (props) => {
       {/* Screen reader Live Region */}
       <div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
         <Show when={latestUnread()}>
-          {(item) => `Notification: ${item().title} ${item().message ?? ""}`}
+          {(item) => `${i18n.t("notificationProvider.prefix")} ${item().title} ${item().message ?? ""}`}
         </Show>
       </div>
       {props.children}

package/src/components/form-control/ThemeToggle.tsx

@@ -5,6 +5,7 @@ import { useTheme, type ThemeMode } from "../../providers/ThemeContext";
 import { Icon } from "../display/Icon";
 import { ripple } from "../../directives/ripple";
 import { iconButtonBase } from "../../styles/patterns.styles";
+import { useI18n } from "../../providers/i18n/I18nContext";
 
 void ripple;
 
@@ -18,10 +19,10 @@ const iconSizes: Record<"sm" | "lg", string> = {
   lg: "1.5em",
 };
 
-const modeLabels: Record<ThemeMode, string> = {
-  light: "Light mode",
-  system: "System settings",
-  dark: "Dark mode",
+const modeLabelKeys: Record<ThemeMode, string> = {
+  light: "themeToggle.light",
+  system: "themeToggle.system",
+  dark: "themeToggle.dark",
 };
 
 export interface ThemeToggleProps extends Omit<
@@ -54,6 +55,9 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
   const [local, rest] = splitProps(props, ["class", "size"]);
 
   const { mode, cycleMode } = useTheme();
+  const i18n = useI18n();
+
+  const modeLabel = () => i18n.t(modeLabelKeys[mode()]);
 
   const getClassName = () =>
     twMerge(iconButtonBase, "p-1.5", local.size && sizeClasses[local.size], local.class);
@@ -68,8 +72,8 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
       type="button"
       class={getClassName()}
       onClick={cycleMode}
-      title={modeLabels[mode()]}
-      aria-label={modeLabels[mode()]}
+      title={modeLabel()}
+      aria-label={modeLabel()}
     >
       <Switch>
         <Match when={mode() === "light"}>

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

@@ -4,6 +4,7 @@ import { IconCheck } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { ripple } from "../../../directives/ripple";
 import { Icon } from "../../display/Icon";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import {
   type CheckboxSize,
   checkboxBaseClass,
@@ -51,6 +52,8 @@ export const Checkbox: ParentComponent<CheckboxProps> = (props) => {
     "children",
   ]);
 
+  const i18n = useI18n();
+
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? false,
     onChange: () => local.onValueChange,
@@ -84,7 +87,7 @@ export const Checkbox: ParentComponent<CheckboxProps> = (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/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>