@lotics/ui 1.11.1 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.11.1",
+  "version": "1.13.0",
   "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,8 +151,8 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-native": ">=0.76.0",
     "react-native-web": ">=0.20.0",
     "lucide-react-native": ">=0.460.0",

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/calendar/calendar_view.tsx

@@ -20,6 +20,9 @@ export interface CalendarViewProps<T = unknown> {
   labels?: Partial<CalendarLabels>;
   onEventPress?: (event: CalendarEvent<T>) => void;
   onDayPress?: (day: Date) => void;
+  /** When set, month-view event chips become draggable; dropping on another day
+   *  reschedules the event (duration preserved). Receives event + new start/end. */
+  onEventDrop?: (event: CalendarEvent<T>, newStart: Date, newEnd: Date | null) => void;
 }
 
 /**
@@ -28,7 +31,7 @@ export interface CalendarViewProps<T = unknown> {
  * primitive is drop-in; the consumer only supplies events + callbacks.
  */
 export function CalendarView<T = unknown>(props: CalendarViewProps<T>) {
-  const { events, defaultView = "month", defaultDate, weekStartsOn = 1, locale, onEventPress, onDayPress } = props;
+  const { events, defaultView = "month", defaultDate, weekStartsOn = 1, locale, onEventPress, onDayPress, onEventDrop } = props;
   const L = { ...DEFAULT_CALENDAR_LABELS, ...props.labels };
   const [view, setView] = useState<CalendarViewMode>(defaultView);
   const [date, setDate] = useState<Date>(defaultDate ?? new Date());
@@ -88,6 +91,7 @@ export function CalendarView<T = unknown>(props: CalendarViewProps<T>) {
             moreLabel={L.more}
             onEventPress={onEventPress}
             onDayPress={drillToDay}
+            onEventDrop={onEventDrop}
           />
         ) : (
           <TimeGridView

package/src/calendar/month_view.tsx

@@ -1,9 +1,10 @@
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { View, Pressable, StyleSheet } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
+import { usePointerDrag } from "../use_pointer_drag";
 import { packEventLanes } from "./layout";
-import { daysInView, isSameMonth, isToday, weekdayShort } from "./dates";
+import { addDays, dayDiff, daysInView, isSameMonth, isToday, startOfDay, weekdayShort } from "./dates";
 import type { CalendarEvent, Weekday } from "./types";
 
 const LANE_H = 19;
@@ -19,15 +20,39 @@ export interface MonthViewProps<T = unknown> {
   moreLabel?: (count: number) => string;
   onEventPress?: (event: CalendarEvent<T>) => void;
   onDayPress?: (day: Date) => void;
+  /** When set, event chips become draggable; dropping on another day reschedules
+   *  the event, preserving its duration. Receives the event + new start/end. */
+  onEventDrop?: (event: CalendarEvent<T>, newStart: Date, newEnd: Date | null) => void;
 }
 
 export function MonthView<T = unknown>(props: MonthViewProps<T>) {
-  const { date, events, weekStartsOn = 1, locale, moreLabel = (n) => `+${n} more`, onEventPress, onDayPress } = props;
+  const { date, events, weekStartsOn = 1, locale, moreLabel = (n) => `+${n} more`, onEventPress, onDayPress, onEventDrop } = props;
   const days = useMemo(() => daysInView("month", date, weekStartsOn), [date, weekStartsOn]);
   const weeks = useMemo(() => Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)), [days]);
   const weekdayLabels = useMemo(() => days.slice(0, 7).map((d) => weekdayShort(d, locale)), [days, locale]);
   const now = new Date();
 
+  // Drag-to-reschedule: each week row registers its DOM rect; on drop we map the
+  // pointer to a (week, column) → day, then shift the event by whole days.
+  const eventById = useMemo(() => new Map(events.map((e) => [e.id, e])), [events]);
+  const weekNodes = useRef<Map<number, HTMLElement>>(new Map());
+  const { live, bind } = usePointerDrag((id, pointer) => {
+    const ev = eventById.get(id);
+    if (!ev || !onEventDrop) return;
+    for (const [w, el] of weekNodes.current) {
+      const r = el.getBoundingClientRect();
+      if (r.width > 0 && pointer.y >= r.top && pointer.y <= r.bottom) {
+        const col = Math.min(6, Math.max(0, Math.floor((pointer.x - r.left) / (r.width / 7))));
+        const target = days[w * 7 + col];
+        if (!target) return;
+        const shift = dayDiff(startOfDay(ev.start), target);
+        if (shift === 0) return;
+        onEventDrop(ev, addDays(ev.start, shift), ev.end ? addDays(ev.end, shift) : null);
+        return;
+      }
+    }
+  });
+
   return (
     <View style={styles.root}>
       <View style={styles.weekdayHeader}>
@@ -49,7 +74,15 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
         }
 
         return (
-          <View key={w} style={styles.weekRow}>
+          <View
+            key={w}
+            style={styles.weekRow}
+            ref={(node) => {
+              const el = node as unknown as HTMLElement | null;
+              if (el) weekNodes.current.set(w, el);
+              else weekNodes.current.delete(w);
+            }}
+          >
             {/* Date numbers */}
             <View style={styles.dateRow}>
               {weekDays.map((day) => {
@@ -89,9 +122,11 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
               {visible.map((bar) => {
                 const accent = bar.event.color || colors.teal[600];
                 const banner = bar.span > 1 || !!bar.event.allDay;
+                const drag = live && live.id === bar.event.id ? live : null;
                 return (
                   <Pressable
                     key={bar.event.id}
+                    ref={onEventDrop ? bind(bar.event.id, "grab") : undefined}
                     onPress={onEventPress ? () => onEventPress(bar.event) : undefined}
                     accessibilityRole={onEventPress ? "button" : undefined}
                     accessibilityLabel={bar.event.title}
@@ -102,6 +137,7 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
                       left: `${(bar.startCol / 7) * 100}%`,
                       width: `${(bar.span / 7) * 100}%`,
                       paddingHorizontal: 2,
+                      ...(drag ? { transform: [{ translateX: drag.dx }, { translateY: drag.dy }], zIndex: 20, opacity: 0.9 } : null),
                     }}
                   >
                     <View

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>

package/src/css_modules.d.ts

@@ -2,3 +2,5 @@ declare module "*.module.css" {
   const classes: { [key: string]: string };
   export default classes;
 }
+
+declare module "*.css";