@lotics/ui 1.12.0 → 1.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -86,6 +86,8 @@
     "./stack": "./src/stack.tsx",
     "./status_badge": "./src/status_badge.tsx",
     "./card": "./src/card.tsx",
+    "./accordion": "./src/accordion.tsx",
+    "./stepper": "./src/stepper.tsx",
     "./tabs": "./src/tabs.tsx",
     "./table": "./src/table.tsx",
     "./auto_sizer": "./src/auto_sizer.tsx",
@@ -95,8 +97,9 @@
     "./page_header": "./src/page_header.tsx",
     "./pager_view": "./src/pager_view.tsx",
     "./date_picker": "./src/date_picker.tsx",
-    "./datetime_picker": "./src/datetime_picker.tsx",
     "./time_picker": "./src/time_picker.tsx",
+    "./time_field": "./src/time_field.tsx",
+    "./date_calendar": "./src/date_calendar.tsx",
     "./dialog": "./src/dialog.tsx",
     "./screen_router": "./src/screen_router.tsx",
     "./route_matching": "./src/route_matching.ts",
@@ -148,15 +151,15 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-native": ">=0.76.0",
-    "react-native-web": ">=0.20.0",
-    "lucide-react-native": ">=0.460.0",
+    "@react-native-picker/picker": ">=2.0.0",
+    "expo-image": ">=3.0.0",
     "lucide-react": ">=0.460.0",
+    "lucide-react-native": ">=0.460.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-native": ">=0.85.0",
     "react-native-svg": ">=15.0.0",
-    "expo-image": ">=3.0.0",
-    "@react-native-picker/picker": ">=2.0.0",
+    "react-native-web": ">=0.20.0",
     "recharts": ">=3.0.0"
   },
   "peerDependenciesMeta": {
@@ -180,5 +183,8 @@
     "typecheck": "tsgo --noEmit",
     "lint": "oxlint",
     "test": "vitest run"
+  },
+  "devDependencies": {
+    "recharts": "^3.8.1"
   }
 }

package/src/accordion.tsx

@@ -0,0 +1,97 @@
+import { ReactNode, useState } from "react";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { AnimationFadeIn } from "./animation_fade_in";
+import { colors } from "./colors";
+import { Icon } from "./icon";
+import { PressableHighlight } from "./pressable_highlight";
+
+export interface AccordionProps {
+  /** Content of the clickable header (the main area); a chevron is appended. */
+  header: ReactNode;
+  /** Collapsible body, revealed when expanded. */
+  children: ReactNode;
+  /** Rendered after the chevron, OUTSIDE the toggle — e.g. an action button
+   *  that must stay clickable without expanding the panel. */
+  headerRight?: ReactNode;
+  /** Uncontrolled initial state. Ignored when `expanded` is provided. */
+  defaultExpanded?: boolean;
+  /** Controlled open state — provide together with `onToggle`. */
+  expanded?: boolean;
+  onToggle?: (expanded: boolean) => void;
+  /** Container style, always applied. */
+  style?: StyleProp<ViewStyle>;
+  /** Merged onto the container while open — e.g. an accent border. */
+  expandedStyle?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+/**
+ * A single expand/collapse disclosure. The header is a caller-supplied node
+ * (so it can be as rich as a row of metrics), the chevron is added
+ * automatically, and `headerRight` holds an action that stays clickable
+ * without toggling. Controlled via `expanded`/`onToggle`, or uncontrolled via
+ * `defaultExpanded`. Compose several to build an accordion list.
+ */
+export function Accordion(props: AccordionProps) {
+  const {
+    header,
+    children,
+    headerRight,
+    defaultExpanded = false,
+    expanded: controlled,
+    onToggle,
+    style,
+    expandedStyle,
+    accessibilityLabel,
+  } = props;
+  const [internal, setInternal] = useState(defaultExpanded);
+  const expanded = controlled ?? internal;
+
+  const toggle = () => {
+    const next = !expanded;
+    if (controlled === undefined) setInternal(next);
+    onToggle?.(next);
+  };
+
+  return (
+    <View style={[styles.container, style, expanded ? expandedStyle : null]}>
+      <View style={styles.headerRow}>
+        <PressableHighlight
+          onPress={toggle}
+          accessibilityRole="button"
+          accessibilityState={{ expanded }}
+          accessibilityLabel={accessibilityLabel}
+          style={styles.trigger}
+        >
+          <View style={styles.headerContent}>{header}</View>
+          <Icon name={expanded ? "chevron-up" : "chevron-down"} size={18} color={colors.zinc[400]} />
+        </PressableHighlight>
+        {headerRight}
+      </View>
+      {expanded ? <AnimationFadeIn style={styles.body}>{children}</AnimationFadeIn> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  trigger: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  headerContent: {
+    flex: 1,
+  },
+  body: {
+    marginTop: 12,
+  },
+});

package/src/button.tsx

@@ -104,7 +104,7 @@ export function Button(props: ButtonProps) {
         (typeof tooltip === "string" ? tooltip : tooltip?.text) ||
         undefined
       }
-      accessibilityState={{ disabled: disabledOrLoading, busy: loading }}
+      aria-disabled={disabledOrLoading || undefined} aria-busy={loading || undefined}
       disabled={disabledOrLoading}
       // @ts-ignore hovered is a react-native-web extension not in base RN types
       style={({ pressed, hovered }) => {

package/src/cell_date_format.test.ts

@@ -0,0 +1,32 @@
+// 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

@@ -8,6 +8,31 @@ export interface DateFormatOptions {
   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
@@ -19,8 +44,8 @@ export function formatDateValue(
 ): string | null {
   if (!value) return "";
 
-  const date = new Date(value);
-  if (isNaN(date.getTime())) return null;
+  const date = parseWallClock(value);
+  if (!date) return null;
 
   const locale = options.locale ?? "en-US";
   const { format = "date", dateStyle = "short", timeStyle = "short" } = options;
@@ -43,6 +68,6 @@ export function formatDateValue(
   try {
     return new Intl.DateTimeFormat(locale, intlOptions).format(date);
   } catch {
-    return includeTime ? date.toISOString() : value;
+    return value;
   }
 }

package/src/checkbox_input.tsx

@@ -29,9 +29,14 @@ export function CheckboxInput(props: CheckboxInputProps) {
       onPress={handlePress}
       disabled={disabled}
       style={{ opacity: disabled ? 0.5 : 1 }}
-      accessibilityRole="checkbox"
-      accessibilityLabel={accessibilityLabel}
-      accessibilityState={{ checked: indeterminate ? "mixed" : checked, disabled: !!disabled }}
+      // Use the W3C ARIA props directly: RN-web 0.21 no longer maps
+      // `accessibilityState={{ checked }}` to `aria-checked`, which dropped the
+      // checked state from the accessibility tree (a role="checkbox" with no
+      // aria-checked). `role`/`aria-*` map correctly on both web and native.
+      role="checkbox"
+      aria-label={accessibilityLabel}
+      aria-checked={indeterminate ? "mixed" : checked}
+      aria-disabled={disabled || undefined}
     >
       <Checkbox checked={checked} indeterminate={indeterminate} />
     </Pressable>