@lotics/ui 2.6.1 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "2.6.1",
+  "version": "3.1.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -33,7 +33,6 @@
     "./empty_state": "./src/empty_state.tsx",
     "./format_date": "./src/format_date.ts",
     "./format_money": "./src/format_money.ts",
-    "./kanban": "./src/kanban/index.ts",
     "./calendar": "./src/calendar/index.ts",
     "./gantt": "./src/gantt/index.ts",
     "./ring_gauge": "./src/ring_gauge.tsx",
@@ -128,6 +127,7 @@
     "./stepper": "./src/stepper.tsx",
     "./step_progress": "./src/step_progress.tsx",
     "./tabs": "./src/tabs.tsx",
+    "./segmented_control": "./src/segmented_control.tsx",
     "./auto_sizer": "./src/auto_sizer.tsx",
     "./animation_horizontal_slide": "./src/animation_horizontal_slide.tsx",
     "./group_avatar": "./src/group_avatar.tsx",
@@ -165,19 +165,6 @@
     "./landmark": "./src/landmark.tsx",
     "./skip_link": "./src/skip_link.tsx",
     "./text_utils": "./src/text_utils.ts",
-    "./cell_text": "./src/cell_text.tsx",
-    "./cell_number": "./src/cell_number.tsx",
-    "./cell_number_format": "./src/cell_number_format.ts",
-    "./cell_date": "./src/cell_date.tsx",
-    "./cell_date_format": "./src/cell_date_format.ts",
-    "./cell_select": "./src/cell_select.tsx",
-    "./grid/engine": "./src/grid/engine.tsx",
-    "./grid/layout": "./src/grid/layout.ts",
-    "./grid/use_virtual_grid": "./src/grid/use_virtual_grid.ts",
-    "./grid/skeleton_row": "./src/grid/skeleton_row.tsx",
-    "./grid/data_grid": "./src/grid/data_grid.tsx",
-    "./grid/data_grid_context": "./src/grid/data_grid_context.ts",
-    "./grid/search_highlight": "./src/grid/search_highlight.ts",
     "./column_filter": "./src/column_filter.tsx",
     "./chip_group": "./src/chip_group.tsx"
   },

package/src/react_native.d.ts

@@ -2,9 +2,9 @@ import "react-native";
 
 // Augments react-native's types with the web-only fields @lotics/ui consumes:
 // Pressable's `hovered` callback state, plus web-only ViewStyle / TextStyle
-// properties (cursor, outline, boxShadow, etc.) used by the grid + primitives.
+// properties (cursor, outline, boxShadow, etc.) used by its primitives.
 //
-// Each consumer (frontend, iframe_runtime, container-invoices, future iframe
+// Each consumer (frontend, container-invoices, future iframe
 // apps) ships its own copy of this file in its `src/`. TypeScript doesn't
 // auto-pick-up `.d.ts` files inside node_modules dependencies; the augmentation
 // has to be visible in the consumer's `include`. The CLI starter template

package/src/segmented_control.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useRef } from "react";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { PressableHighlight } from "./pressable_highlight";
+import { Text } from "./text";
+import { colors, withAlpha } from "./colors";
+
+export interface SegmentOption<T extends string> {
+  label: string;
+  value: T;
+  testID?: string;
+}
+
+interface SegmentedControlProps<T extends string> {
+  /** Accessible name of the group (it renders no visible label of its own). */
+  accessibilityLabel: string;
+  /** 2–4 mutually-exclusive peers. Above ~4, use Picker — segments stop fitting. */
+  options: SegmentOption<T>[];
+  value: T;
+  onValueChange: (value: T) => void;
+  /** Disables the whole control (e.g. while a mode-specific action runs). */
+  disabled?: boolean;
+  /** The track hugs its content by default (`alignSelf: flex-start`); pass
+   *  `{ alignSelf: "stretch" }` to fill the parent's width. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A segmented control: 2–4 visible peer segments in an inset track, the
+ * selected one raised as a white card. Semantically a **radiogroup** — a
+ * single choice among peers, all visible — NOT a tablist (no panels) and not
+ * a Switch (not on/off). Reach for it on a binary/few-way *mode* switch where
+ * both options should be one-tap and on screen (a generator mode, a list/grid
+ * view, a day/week/month range). Above ~4 options, use `Picker`.
+ *
+ * Keyboard follows the WAI-ARIA radio pattern: roving tabindex (only the
+ * selected segment is a tab stop), arrows move focus AND select (wrapping),
+ * Space/Enter select the focused segment.
+ */
+export function SegmentedControl<T extends string>(props: SegmentedControlProps<T>) {
+  const { accessibilityLabel, options, value, onValueChange, disabled = false, style } = props;
+  const segmentRefs = useRef<Array<View | null>>([]);
+
+  const select = useCallback(
+    (index: number) => {
+      const option = options[index];
+      if (!option || option.value === value) return;
+      onValueChange(option.value);
+    },
+    [options, value, onValueChange],
+  );
+
+  // Arrows wrap and select per the radio pattern; Space/Enter select the
+  // focused segment. Focus follows selection so the new segment stays reachable.
+  const handleKeyDown = useCallback(
+    (event: { key: string; preventDefault?: () => void }, index: number) => {
+      if (disabled) return;
+      const last = options.length - 1;
+      let next = index;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          next = index === last ? 0 : index + 1;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          next = index === 0 ? last : index - 1;
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault?.();
+          select(index);
+          return;
+        default:
+          return;
+      }
+      event.preventDefault?.();
+      onValueChange(options[next].value);
+      segmentRefs.current[next]?.focus();
+    },
+    [disabled, options, onValueChange, select],
+  );
+
+  // Roving tabindex: the selected segment is the tab stop. When `value` matches
+  // no option, the first segment is the fallback so the group stays reachable.
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
+
+  return (
+    <View
+      style={[styles.track, disabled && styles.trackDisabled, style]}
+      accessibilityRole="radiogroup"
+      aria-label={accessibilityLabel}
+      aria-disabled={disabled}
+    >
+      {options.map((option, index) => (
+        <Segment
+          ref={(node: View | null) => {
+            segmentRefs.current[index] = node;
+          }}
+          key={option.value}
+          option={option}
+          selected={option.value === value}
+          isTabStop={index === tabStopIndex}
+          disabled={disabled}
+          onPress={() => select(index)}
+          onKeyDown={(event) => handleKeyDown(event, index)}
+        />
+      ))}
+    </View>
+  );
+}
+
+interface SegmentProps<T extends string> {
+  ref: (node: View | null) => void;
+  option: SegmentOption<T>;
+  selected: boolean;
+  isTabStop: boolean;
+  disabled: boolean;
+  onPress: () => void;
+  onKeyDown: (event: { key: string; preventDefault?: () => void }) => void;
+}
+
+function Segment<T extends string>(props: SegmentProps<T>) {
+  const { ref, option, selected, isTabStop, disabled, onPress, onKeyDown } = props;
+
+  return (
+    <PressableHighlight
+      ref={ref}
+      // Own the per-state background: the track is zinc-100, so an unselected
+      // segment hovering must lift TOWARD the selected white (a half-white wash),
+      // not to PressableHighlight's default zinc-100 (invisible on the track).
+      style={(state) => {
+        const hovered = (state as { hovered?: boolean }).hovered;
+        return [
+          styles.segment,
+          selected
+            ? styles.segmentSelected
+            : {
+                backgroundColor: state.pressed
+                  ? colors.white
+                  : hovered
+                    ? withAlpha(colors.white, 0.5)
+                    : "transparent",
+              },
+        ];
+      }}
+      onPress={disabled ? undefined : onPress}
+      onKeyDown={onKeyDown}
+      testID={option.testID}
+      accessibilityRole="radio"
+      accessibilityLabel={option.label}
+      aria-checked={selected}
+      aria-disabled={disabled}
+      // Roving tabindex: only the selected segment (or the fallback) is a tab
+      // stop; the rest are reached with arrow keys.
+      focusable={isTabStop && !disabled}
+    >
+      {(state) => {
+        const hovered = (state as { hovered?: boolean }).hovered;
+        return (
+          <Text
+            size="sm"
+            weight={selected ? "medium" : "regular"}
+            color={selected || hovered ? "zinc-900" : "zinc-700"}
+            numberOfLines={1}
+            userSelect="none"
+          >
+            {option.label}
+          </Text>
+        );
+      }}
+    </PressableHighlight>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    flexDirection: "row",
+    alignSelf: "flex-start",
+    gap: 2,
+    padding: 3,
+    borderRadius: 10,
+    backgroundColor: colors.zinc["100"],
+  },
+  trackDisabled: {
+    opacity: 0.55,
+  },
+  segment: {
+    flex: 1,
+    minHeight: 30,
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 7,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  segmentSelected: {
+    backgroundColor: colors.white,
+    boxShadow: colors.border_shadow,
+  },
+});

package/src/cell_date.tsx

@@ -1,30 +0,0 @@
-import { memo, useMemo } from "react";
-import { Text } from "./text";
-import { DateFormatOptions, formatDateValue } from "./cell_date_format";
-
-export interface CellDateProps extends DateFormatOptions {
-  value: string | null | undefined;
-  /** Label to render when the value parses as Invalid Date. Defaults to "Invalid date". */
-  invalidLabel?: string;
-  userSelect?: "none" | "auto";
-}
-
-/**
- * Pure-presentational date cell. Renders an empty Text for null/empty values,
- * a danger-coloured Text for unparseable values, and a locale-formatted Text
- * otherwise. Locale and format are explicit so iframe apps don't need to wire
- * a translation layer.
- */
-export const CellDate = memo(function CellDate(props: CellDateProps) {
-  const { value, format, locale, dateStyle, timeStyle, invalidLabel = "Invalid date", userSelect } = props;
-
-  const content = useMemo(() => {
-    const formatted = formatDateValue(value, { format, locale, dateStyle, timeStyle });
-    if (formatted === null) {
-      return <Text color="danger">{invalidLabel}</Text>;
-    }
-    return formatted;
-  }, [value, format, locale, dateStyle, timeStyle, invalidLabel]);
-
-  return <Text userSelect={userSelect}>{content}</Text>;
-});

package/src/cell_date_format.test.ts

@@ -1,32 +0,0 @@
-// Force a positive-offset zone (UTC+7) before importing the formatter: the old
-// `new Date("2024-03-15")` UTC-parse would surface a phantom "07:00" here, and a
-// negative-offset zone would shift the date a day. The wall-clock parse must keep
-// the value naive so output is timezone-independent.
-process.env.TZ = "Asia/Ho_Chi_Minh";
-
-import { describe, it, expect } from "vitest";
-import { formatDateValue } from "./cell_date_format";
-
-describe("formatDateValue — wall-clock (no timezone shift)", () => {
-  it("renders a date-only value as midnight, not the zone offset", () => {
-    const out = formatDateValue("2024-03-15", { format: "datetime", locale: "en-US" });
-    expect(out).toMatch(/3\/15\/2024/);
-    expect(out).toMatch(/12:00\s?AM/i); // midnight — not 7:00 AM
-  });
-
-  it("keeps the same calendar day for a date field in any zone", () => {
-    expect(formatDateValue("2024-03-15", { format: "date", locale: "en-US" })).toBe("3/15/2024");
-  });
-
-  it("renders a datetime value at its literal wall-clock time", () => {
-    expect(formatDateValue("2024-03-15T09:30", { format: "datetime", locale: "en-US" })).toMatch(
-      /9:30\s?AM/i,
-    );
-  });
-
-  it("returns '' for empty and null (sentinel) for unparseable input", () => {
-    expect(formatDateValue("")).toBe("");
-    expect(formatDateValue(null)).toBe("");
-    expect(formatDateValue("not-a-date")).toBeNull();
-  });
-});

package/src/cell_date_format.ts

@@ -1,73 +0,0 @@
-export type DateCellFormat = "date" | "datetime";
-
-export interface DateFormatOptions {
-  format?: DateCellFormat;
-  /** BCP-47 locale tag for Intl.DateTimeFormat. Defaults to "en-US". */
-  locale?: string;
-  dateStyle?: "full" | "long" | "medium" | "short";
-  timeStyle?: "full" | "long" | "medium" | "short";
-}
-
-const ISO_DATE_TIME = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?$/;
-
-/**
- * Parse a canonical, timezone-naive ISO value as wall-clock time in the local zone.
- * `new Date("2024-03-15")` parses date-only strings as **UTC** midnight, which then
- * shifts under Intl's local formatting — a phantom time on date-only values and an
- * off-by-one date in negative-offset zones. Building the Date from its parts keeps
- * it naive, matching how the picker reads the same value. Non-ISO input falls back
- * to the native parser.
- */
-function parseWallClock(value: string): Date | null {
-  const m = ISO_DATE_TIME.exec(value.trim());
-  const date = m
-    ? new Date(
-        Number(m[1]),
-        Number(m[2]) - 1,
-        Number(m[3]),
-        Number(m[4] ?? 0),
-        Number(m[5] ?? 0),
-        Number(m[6] ?? 0),
-      )
-    : new Date(value);
-  return isNaN(date.getTime()) ? null : date;
-}
-
-/**
- * Format an ISO date string to a localized display string.
- * Returns "" for null/empty input. Returns null (sentinel) for unparseable input
- * so callers can render an error state.
- */
-export function formatDateValue(
-  value: string | null | undefined,
-  options: DateFormatOptions = {},
-): string | null {
-  if (!value) return "";
-
-  const date = parseWallClock(value);
-  if (!date) return null;
-
-  const locale = options.locale ?? "en-US";
-  const { format = "date", dateStyle = "short", timeStyle = "short" } = options;
-  const includeTime = format === "datetime";
-
-  // Intl's `dateStyle: "short"` yields a 2-digit year in many locales (en-US: "5/22/26",
-  // vi-VN: "22/05/26"); for data cells we want a compact numeric format with the full year.
-  // When we override to explicit date parts, the time parts must also be explicit — Intl
-  // forbids mixing `dateStyle`/`timeStyle` with `year`/`month`/`day`/`hour`/`minute`/etc.
-  const intlOptions: Intl.DateTimeFormatOptions =
-    dateStyle === "short"
-      ? {
-          year: "numeric",
-          month: "numeric",
-          day: "numeric",
-          ...(includeTime ? { hour: "numeric", minute: "numeric" } : {}),
-        }
-      : { dateStyle, ...(includeTime ? { timeStyle } : {}) };
-
-  try {
-    return new Intl.DateTimeFormat(locale, intlOptions).format(date);
-  } catch {
-    return value;
-  }
-}

package/src/cell_number.test.ts

@@ -1,42 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { formatNumberValue } from "./cell_number_format";
-
-describe("formatNumberValue", () => {
-  it("returns empty string for null", () => {
-    expect(formatNumberValue(null, { format: "number" })).toBe("");
-  });
-
-  it("returns empty string for undefined", () => {
-    expect(formatNumberValue(undefined, { format: "number" })).toBe("");
-  });
-
-  it("formats plain number as toString", () => {
-    expect(formatNumberValue(42, { format: "number" })).toBe("42");
-    expect(formatNumberValue(3.14, {})).toBe("3.14");
-  });
-
-  it("formats percentage with % suffix", () => {
-    expect(formatNumberValue(75, { format: "percentage" })).toBe("75%");
-    expect(formatNumberValue(0, { format: "percentage" })).toBe("0%");
-  });
-
-  it("formats currency with explicit currency code", () => {
-    const result = formatNumberValue(1000, { format: "currency", currency: "USD" });
-    expect(result).toContain("US");
-  });
-
-  it("defaults to VND when currency format has no currency code", () => {
-    const result = formatNumberValue(1000, { format: "currency" });
-    expect(result).toBeTruthy();
-    expect(result.length).toBeGreaterThan(0);
-  });
-
-  it("respects an explicit locale override", () => {
-    const result = formatNumberValue(1000, {
-      format: "currency",
-      currency: "USD",
-      locale: "en-US",
-    });
-    expect(result).toMatch(/^\$/);
-  });
-});

package/src/cell_number.tsx

@@ -1,25 +0,0 @@
-import { memo } from "react";
-import { Text } from "./text";
-import { formatNumberValue, NumberFormatOptions } from "./cell_number_format";
-
-export interface CellNumberProps extends NumberFormatOptions {
-  value: number | null | undefined;
-  userSelect?: "none" | "auto";
-  align?: "left" | "right" | "center";
-}
-
-/**
- * Pure-presentational number cell. Format and locale are explicit, so iframe
- * apps consuming `@lotics/ui` without `@lotics/shared` can render numbers the
- * same way the records grid does.
- */
-export const CellNumber = memo(function CellNumber(props: CellNumberProps) {
-  const { value, format, currency, locale, userSelect, align } = props;
-  const text = formatNumberValue(value, { format, currency, locale });
-
-  return (
-    <Text numberOfLines={1} userSelect={userSelect} align={align}>
-      {text}
-    </Text>
-  );
-});

package/src/cell_number_format.ts

@@ -1,42 +0,0 @@
-export type NumberCellFormat = "number" | "currency" | "percentage";
-
-export const NUMERIC_FORMATS: ReadonlySet<string> = new Set<NumberCellFormat>([
-  "number",
-  "currency",
-  "percentage",
-]);
-
-export function isNumericFormat(value: string | undefined): value is NumberCellFormat {
-  return value !== undefined && NUMERIC_FORMATS.has(value);
-}
-
-export interface NumberFormatOptions {
-  format?: NumberCellFormat;
-  currency?: string;
-  /** BCP-47 locale tag passed to Number.prototype.toLocaleString. Defaults to "vi-VN". */
-  locale?: string;
-}
-
-export function formatNumberValue(
-  value: number | null | undefined,
-  options: NumberFormatOptions,
-): string {
-  if (value === null || value === undefined) {
-    return "";
-  }
-
-  const locale = options.locale ?? "vi-VN";
-
-  if (options.format === "currency") {
-    return value.toLocaleString(locale, {
-      style: "currency",
-      currency: options.currency || "VND",
-    });
-  }
-
-  if (options.format === "percentage") {
-    return `${value}%`;
-  }
-
-  return String(value);
-}

package/src/cell_select.tsx

@@ -1,68 +0,0 @@
-import { memo, useMemo } from "react";
-import { type ColorName } from "./colors";
-import { View } from "react-native";
-import { Badge } from "./badge";
-
-export interface SelectCellOption {
-  key: string;
-  name: string;
-  color?: ColorName;
-}
-
-export interface CellSelectProps {
-  /**
-   * Selected key(s). Accepts a single string, an array of keys, or null/undefined.
-   * Unknown keys are silently dropped (no matching option = nothing rendered).
-   */
-  value: string | string[] | null | undefined;
-  options: ReadonlyArray<SelectCellOption>;
-  /** Multi-select renders every selected key. Single-select renders only the first. */
-  multi?: boolean;
-  /** Force multi-select rendering even for single-select fields (filter previews). */
-  showAll?: boolean;
-  userSelect?: "none" | "auto";
-}
-
-/**
- * Pure-presentational select cell. Maps selected keys against the supplied
- * options[] to produce coloured Badges. Iframe apps that already have an
- * options table can render the same Lotics select-badge UI without depending
- * on `@lotics/shared` field schemas.
- */
-export const CellSelect = memo(function CellSelect(props: CellSelectProps) {
-  const { value, options, multi = false, showAll = false, userSelect = "none" } = props;
-
-  const content = useMemo(() => {
-    const selected: string[] =
-      value === null || value === undefined
-        ? []
-        : Array.isArray(value)
-          ? value
-          : [value];
-
-    const renderBadge = (key: string) => {
-      const option = options.find((o) => o.key === key);
-      if (!option) return null;
-      return <Badge key={key} color={option.color} label={option.name} userSelect={userSelect} />;
-    };
-
-    if (multi || showAll) {
-      return selected.map(renderBadge).filter(Boolean);
-    }
-
-    const first = selected[0];
-    return first === undefined ? null : renderBadge(first);
-  }, [value, options, multi, showAll, userSelect]);
-
-  return (
-    <View
-      style={{
-        flexDirection: "row",
-        gap: 4,
-        alignItems: "center",
-      }}
-    >
-      {content}
-    </View>
-  );
-});

package/src/cell_text.tsx

@@ -1,45 +0,0 @@
-import { memo } from "react";
-import { Platform } from "react-native";
-import { Text } from "./text";
-import { colors } from "./colors";
-
-export type TextCellFormat = "text" | "link";
-
-export interface CellTextProps {
-  value: string | null | undefined;
-  format?: TextCellFormat;
-  userSelect?: "none" | "auto";
-}
-
-/**
- * Pure-presentational text cell. `format: "link"` renders as a clickable
- * anchor on web (preserving right-click / middle-click behavior); on native
- * it falls through to plain Text — link navigation is the caller's job there.
- */
-export const CellText = memo(function CellText(props: CellTextProps) {
-  const { value, format = "text", userSelect } = props;
-
-  if (format === "link" && value && Platform.OS === "web") {
-    const href = /^https?:\/\//i.test(value) ? value : `https://${value}`;
-    return (
-      <a
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        <Text numberOfLines={1} style={{ color: colors.blue["600"] }} userSelect={userSelect}>
-          {value}
-        </Text>
-      </a>
-    );
-  }
-
-  return (
-    <Text numberOfLines={1} userSelect={userSelect}>
-      {value}
-    </Text>
-  );
-});