@lotics/ui 7.4.0 → 7.5.0

package/AGENTS.md

@@ -20,8 +20,8 @@ typeahead, async search, virtualization, and a11y the primitive already ships.
   per-instance `labels`/`clearLabel`/`selectAllLabel` still overrides for one-offs, and an un-wrapped
   app stays English. Wired so far: `Pagination`, `SortHeader`/`Table.sortLabels`, `OptionList`
   (+ `Select`/`Combobox` built on it), `FilterChip`, `Drawer`, `Confidence`, `RemainderMeter`,
-  `ChangeReview`/`ChangeReviewActions`, and `DateRangeFilterField`/`DateFilter` (presets + footer +
-  time-segment a11y, one `dateRange` slice). Adding a string to a wired component's `*Labels` forces
+  `ChangeReview`/`ChangeReviewActions`, `DateRangeFilterField`/`DateFilter` (presets + footer +
+  time-segment a11y, one `dateRange` slice), and `FormField` (the `optional` marker). Adding a string to a wired component's `*Labels` forces
   both packs in `locale.tsx` to fill it (compile error) — that's how the kit avoids a silent English
   leak. Not yet on the provider (pass `labels` for now): calendar/gantt, the file/preview/comment labels.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/form_field.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, useId } from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { Spacer } from "./spacer";
+import { useLoticsLocale } from "./locale";
 
 export interface FormFieldProps {
   label: string;
@@ -9,7 +10,8 @@ export interface FormFieldProps {
   description?: string;
   error?: string;
   style?: StyleProp<ViewStyle>;
-  /** Label shown next to `label` when `optional` is true. Default: "Optional". Pass a translated string from the consumer. */
+  /** Label shown next to `label` when `optional` is true. Defaults to the locale
+   *  pack's `formField.optional` ("Optional"); pass to override for one instance. */
   optionalLabel?: string;
 }
 
@@ -40,7 +42,8 @@ export function useFormField(): FormFieldBinding | null {
 }
 
 export function FormField(props: FormFieldProps & { children: React.ReactNode }) {
-  const { label, description, error, optional, style, children, optionalLabel = "Optional" } = props;
+  const { label, description, error, optional, style, children, optionalLabel } = props;
+  const resolvedOptionalLabel = optionalLabel ?? useLoticsLocale().formField.optional;
 
   const inputId = useId();
   const labelId = `${inputId}-label`;
@@ -72,7 +75,7 @@ export function FormField(props: FormFieldProps & { children: React.ReactNode })
           )}
           {!!optional && (
             <Text numberOfLines={1} size="sm" color="zinc-500">
-              {optionalLabel}
+              {resolvedOptionalLabel}
             </Text>
           )}
         </View>

package/src/locale.tsx

@@ -24,12 +24,14 @@ export interface LoticsLocale {
   /** `SortHeader` a11y prefix + asc/desc suffixes. */
   sortHeader: Required<SortHeaderLabels>;
   /** `OptionList` (and everything built on it — `Select`, `Combobox`, the
-   *  in-cell editors): the select-all/deselect-all links, the empty state, and
-   *  the `Combobox` recents header. */
-  optionList: { selectAll: string; deselectAll: string; noResults: string; recent: string };
+   *  in-cell editors): the select-all/deselect-all links, the empty state, the
+   *  internal search-field placeholder, and the `Combobox` recents header. */
+  optionList: { selectAll: string; deselectAll: string; noResults: string; recent: string; searchPlaceholder: string };
   /** `FilterChip` (and `ColumnFilter`): the generic clear affordance, used when
    *  a call site doesn't pass a dimension-specific `clearLabel`. */
   filterChip: { clear: string };
+  /** `FormField`: the "Optional" marker shown next to the label when `optional`. */
+  formField: { optional: string };
   /** `Drawer`: the record prev/next + close controls (screen-reader names). */
   drawer: { previous: string; next: string; close: string };
   /** `Confidence`: the full level phrase ("High confidence" …). */
@@ -74,8 +76,9 @@ export const en: LoticsLocale = {
     ascending: ", ascending",
     descending: ", descending",
   },
-  optionList: { selectAll: "Select all", deselectAll: "Deselect all", noResults: "No results", recent: "Recent" },
+  optionList: { selectAll: "Select all", deselectAll: "Deselect all", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
   filterChip: { clear: "Clear" },
+  formField: { optional: "Optional" },
   drawer: { previous: "Previous record", next: "Next record", close: "Close" },
   confidence: { high: "High confidence", medium: "Medium confidence", low: "Low confidence" },
   remainderMeter: {
@@ -123,8 +126,9 @@ export const vi: LoticsLocale = {
     ascending: " (tăng dần)",
     descending: " (giảm dần)",
   },
-  optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", noResults: "Không có kết quả", recent: "Gần đây" },
+  optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
   filterChip: { clear: "Xóa" },
+  formField: { optional: "Tùy chọn" },
   drawer: { previous: "Bản ghi trước", next: "Bản ghi sau", close: "Đóng" },
   confidence: { high: "Độ tin cậy cao", medium: "Độ tin cậy trung bình", low: "Độ tin cậy thấp" },
   remainderMeter: {

package/src/option_list.tsx

@@ -58,7 +58,7 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
           icon="search"
           value={list.query}
           onChangeText={list.setQuery}
-          placeholder={search.placeholder ?? "Search…"}
+          placeholder={search.placeholder ?? loc.searchPlaceholder}
           autoFocus={!small}
           autoCapitalize="none"
           autoCorrect={false}