@lotics/ui 2.4.0 → 2.5.0

package/src/date_range_filter_field.tsx

@@ -56,15 +56,53 @@ function formatDate(date: Date | null, locale: string | undefined): string {
   }
 }
 
+/**
+ * Recognized whole periods display compactly — a range that IS a calendar
+ * month reads "Tháng 6 năm 2026" (sentence-cased via the locale), a whole
+ * year "2026", a single day one date. Anything else falls back to
+ * "start – end". Keeps the trigger scannable where dashboards live in
+ * period rhythm, not date pairs.
+ */
+function formatRangeDisplay(start: Date, end: Date, locale: string | undefined): string {
+  if (start.toDateString() === end.toDateString()) return formatDate(start, locale);
+
+  const wholeMonth =
+    start.getDate() === 1 &&
+    start.getMonth() === end.getMonth() &&
+    start.getFullYear() === end.getFullYear() &&
+    end.getDate() === new Date(end.getFullYear(), end.getMonth() + 1, 0).getDate();
+  if (wholeMonth) {
+    try {
+      const label = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(start);
+      return label.charAt(0).toUpperCase() + label.slice(1);
+    } catch {
+      return `${start.getMonth() + 1}/${start.getFullYear()}`;
+    }
+  }
+
+  const wholeYear =
+    start.getFullYear() === end.getFullYear() &&
+    start.getMonth() === 0 &&
+    start.getDate() === 1 &&
+    end.getMonth() === 11 &&
+    end.getDate() === 31;
+  if (wholeYear) return String(start.getFullYear());
+
+  return `${formatDate(start, locale)} – ${formatDate(end, locale)}`;
+}
+
 export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
   const { value, onValueChange, includeTime, locale, testID } = props;
   const labels = useMemo(() => ({ ...DEFAULT_FIELD_LABELS, ...props.labels }), [props.labels]);
   const [open, setOpen] = useState(false);
 
   const hasValue = Boolean(value.start.date || value.end.date);
-  const display = hasValue
-    ? `${formatDate(value.start.date, locale)} – ${formatDate(value.end.date, locale)}`
-    : labels.placeholder;
+  const display =
+    value.start.date && value.end.date
+      ? formatRangeDisplay(value.start.date, value.end.date, locale)
+      : hasValue
+        ? `${formatDate(value.start.date, locale)} – ${formatDate(value.end.date, locale)}`
+        : labels.placeholder;
 
   return (
     <Popover open={open} onOpenChange={setOpen} side="bottom" align="start">
@@ -100,15 +138,9 @@ export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
           labels={props.labels}
           locale={locale}
         />
-        <PopoverFooter>
-          <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
-            {hasValue ? (
-              <Button title={labels.clear} onPress={() => onValueChange(EMPTY_VALUE)} />
-            ) : (
-              <View />
-            )}
-            <Button title={labels.done} color="secondary" onPress={() => setOpen(false)} />
-          </View>
+        <PopoverFooter align="space-between">
+          {hasValue ? <Button title={labels.clear} onPress={() => onValueChange(EMPTY_VALUE)} /> : <View />}
+          <Button title={labels.done} color="secondary" onPress={() => setOpen(false)} />
         </PopoverFooter>
       </PopoverContent>
     </Popover>

package/src/detail_row.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { Text } from "./text";
+
+export interface DetailRowProps {
+  /** The field label — rendered `sm muted`. */
+  label: ReactNode;
+  /** The value — any node (a `Text`, a `Badge`, a stack). */
+  children: ReactNode;
+  /** Fixed label-column width (px) to align labels in a left column — for a peek
+   *  or form-like stack. Omit for a spread row: the label takes the slack and the
+   *  value sits at the right edge (the default drawer-detail look). */
+  labelWidth?: number;
+  /** Label text size — `xs` for a compact peek, `sm` (default) for a drawer. */
+  labelSize?: "xs" | "sm";
+  /** Min row height. Default 28. */
+  minHeight?: number;
+}
+
+/**
+ * One label + value line for a drawer / peek detail view — NOT a list row (that's
+ * `PressableRow` / `TableRow`). Spread by default (muted label left, value pushed
+ * to the right edge); pass `labelWidth` to align labels in a fixed left column
+ * with the values flowing immediately after instead.
+ */
+export function DetailRow(props: DetailRowProps) {
+  const { label, children, labelWidth, labelSize = "sm", minHeight = 28 } = props;
+  return (
+    <View style={[styles.row, { minHeight }]}>
+      <Text size={labelSize} color="muted" style={labelWidth != null ? { width: labelWidth } : styles.flexLabel}>
+        {label}
+      </Text>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  flexLabel: { flex: 1 },
+});

package/src/dialog.tsx

@@ -178,30 +178,6 @@ export function Dialog(props: DialogProps) {
   );
 }
 
-// ============================================================================
-// DialogTrigger
-// ============================================================================
-
-export interface DialogTriggerProps {
-  children: React.ReactElement;
-}
-
-export function DialogTrigger({ children }: DialogTriggerProps) {
-  const { open, onOpenChange } = useDialog();
-
-  const handlePress = useCallback(() => {
-    onOpenChange(!open);
-  }, [open, onOpenChange]);
-
-  return React.cloneElement(
-    children as React.ReactElement<{
-      onPress?: () => void;
-    }>,
-    {
-      onPress: handlePress,
-    },
-  );
-}
 
 // ============================================================================
 // DialogHeader Components (Composition-based)

package/src/download.ts

@@ -22,7 +22,7 @@ export async function downloadFileFromUrl(
   url: string,
   filename: string,
   opts?: { credentials?: RequestCredentials },
-): Promise<void> {
+): Promise<{ bytes: number }> {
   if (!url) throw new Error("downloadFileFromUrl: empty url");
 
   const response = await fetch(url, {
@@ -45,4 +45,5 @@ export async function downloadFileFromUrl(
   } finally {
     URL.revokeObjectURL(blobUrl);
   }
+  return { bytes: blob.size };
 }

package/src/drawer.tsx

@@ -1,9 +1,10 @@
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
 import { Modal, Pressable, StyleSheet, View } from "react-native";
 import { useScreenSize } from "@lotics/ui/use_screen_size";
 import { PortalHost } from "@lotics/ui/portal";
 import { colors } from "@lotics/ui/colors";
 import { Button } from "@lotics/ui/button";
+import { IconButton } from "@lotics/ui/icon_button";
 import { Text } from "@lotics/ui/text";
 import { useOverlayScope } from "@lotics/ui/overlay_scope";
 
@@ -14,6 +15,17 @@ export interface DrawerProps {
   title?: ReactNode;
   /** Panel width on non-small screens (number = px, or a `%` string). Full-width on small screens. */
   width?: number | `${number}%`;
+  /**
+   * Record sequencing — step to the previous/next record WITHOUT closing the
+   * drawer (the triage rhythm: open once, work the whole list). Renders
+   * ◀ ▶ chevrons in the header and binds ←/→ while the drawer is open
+   * (ignored while typing in a field). Omit on a drawer that isn't one of
+   * a list. Pass `undefined` at either end of the list to disable that side.
+   */
+  onPrev?: () => void;
+  onNext?: () => void;
+  /** Position caption between the chevrons ("3/24"). */
+  position?: string;
   /**
    * Drawer body. Fills the panel below the header as a plain flex column — lay
    * out your own scroll area and pinned footer (e.g. a thread that scrolls above
@@ -32,10 +44,37 @@ export interface DrawerProps {
  * full-width on small screens.
  */
 export function Drawer(props: DrawerProps) {
-  const { open, onOpenChange, title, width = 420, children, testID } = props;
+  const { open, onOpenChange, title, width = 420, onPrev, onNext, position, children, testID } = props;
   const screenSize = useScreenSize();
   useOverlayScope(open);
   const handleClose = () => onOpenChange(false);
+  const hasNav = onPrev !== undefined || onNext !== undefined || position !== undefined;
+
+  // ←/→ step records while the drawer is open — but never while the user is
+  // typing in a field (arrow keys belong to the caret there).
+  useEffect(() => {
+    if (!open || (!onPrev && !onNext)) return;
+    if (typeof document === "undefined") return;
+    const handler = (e: KeyboardEvent) => {
+      const t = document.activeElement;
+      if (
+        t instanceof HTMLElement &&
+        (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable)
+      ) {
+        return;
+      }
+      if (e.key === "ArrowLeft" && onPrev) {
+        e.preventDefault();
+        onPrev();
+      }
+      if (e.key === "ArrowRight" && onNext) {
+        e.preventDefault();
+        onNext();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onPrev, onNext]);
 
   return (
     <Modal visible={open} onRequestClose={handleClose} transparent>
@@ -52,6 +91,27 @@ export function Drawer(props: DrawerProps) {
               ) : (
                 <View style={{ flex: 1 }}>{title}</View>
               )}
+              {hasNav ? (
+                <View style={styles.nav}>
+                  <IconButton
+                    icon="chevron-left"
+                    accessibilityLabel="Previous record"
+                    onPress={onPrev ?? (() => {})}
+                    disabled={!onPrev}
+                  />
+                  {position ? (
+                    <Text size="xs" color="muted" tabular>
+                      {position}
+                    </Text>
+                  ) : null}
+                  <IconButton
+                    icon="chevron-right"
+                    accessibilityLabel="Next record"
+                    onPress={onNext ?? (() => {})}
+                    disabled={!onNext}
+                  />
+                </View>
+              ) : null}
               <Button icon="x" accessibilityLabel="Close" onPress={handleClose} />
             </View>
             <View testID={testID} style={styles.body}>
@@ -64,7 +124,34 @@ export function Drawer(props: DrawerProps) {
   );
 }
 
+export interface DrawerFooterProps {
+  /** The action(s) — typically right-aligned `Button`s. Prepend a
+   *  `<Text style={{ flex: 1 }}>` hint to push them right with a summary on the left. */
+  children: ReactNode;
+}
+
+/**
+ * The pinned action bar at the bottom of a `Drawer` — a hairline-topped band (the
+ * same chrome as `CardFooter` / `DialogFooter`) that commits the record's action.
+ * Render it as the LAST child of the `Drawer`, after the scroll body; the body's
+ * `flex:1` pins it to the panel bottom. Actions sit right; a leading
+ * `<Text style={{ flex: 1 }}>` hint pushes them there.
+ */
+export function DrawerFooter(props: DrawerFooterProps) {
+  return <View style={styles.footer}>{props.children}</View>;
+}
+
 const styles = StyleSheet.create({
+  footer: {
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 12,
+  },
   base: {
     height: "100%",
     width: "100%",
@@ -92,6 +179,11 @@ const styles = StyleSheet.create({
     paddingBottom: 8,
     minHeight: 56,
   },
+  nav: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+  },
   body: {
     flex: 1,
   },

package/src/empty_state.tsx

@@ -0,0 +1,37 @@
+import { View, StyleSheet } from "react-native";
+import { Text } from "./text";
+
+interface EmptyStateProps {
+  /** What's empty, in plain language ("Không có nhân viên nào khớp"). */
+  message: string;
+  /** What the user can do about it ("Thử từ khóa khác"). */
+  hint?: string;
+}
+
+/**
+ * Centered placeholder for an empty list/filter result. Generous vertical
+ * space on purpose — an empty region that collapses to nothing reads as a
+ * rendering bug, not a state.
+ */
+export function EmptyState(props: EmptyStateProps) {
+  return (
+    <View style={styles.container}>
+      <Text size="sm" color="muted">
+        {props.message}
+      </Text>
+      {props.hint ? (
+        <Text size="xs" color="muted">
+          {props.hint}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 48,
+    alignItems: "center",
+    gap: 4,
+  },
+});

package/src/file_badge.tsx

@@ -35,11 +35,15 @@ export function resolveMime(mimeType: string): { label: string; color: string }
 const DEFAULT_SIZE = 26;
 
 interface FileBadgeProps {
-  mimeType: string;
+  /** Omit only with `placeholder` — a ghost slot has no resolved type yet. */
+  mimeType?: string;
   /** Base width in pixels. Height, radii, font, and padding scale proportionally. Default: 26 */
   size?: number;
   /** Show a "TMPL" overlay to distinguish templates from regular files. */
   isTemplate?: boolean;
+  /** Render a same-footprint dashed ghost for a not-yet-uploaded slot, so a
+   *  pending row lines up pixel-for-pixel with a real badge. */
+  placeholder?: boolean;
 }
 
 /**
@@ -52,11 +56,30 @@ function getMediaIcon(mimeType: string): IconName | undefined {
   return undefined;
 }
 
-export function FileBadge({ mimeType, size = DEFAULT_SIZE, isTemplate }: FileBadgeProps) {
-  const { label, color } = resolveMime(mimeType);
+export function FileBadge({ mimeType, size = DEFAULT_SIZE, isTemplate, placeholder }: FileBadgeProps) {
   const scale = size / DEFAULT_SIZE;
   const height = Math.round(32 * scale);
   const radius = Math.round(4 * scale);
+
+  if (placeholder) {
+    return (
+      <View style={{
+        width: size,
+        height,
+        borderRadius: radius,
+        borderWidth: Math.max(1, Math.round(1.5 * scale)),
+        borderColor: "#d4d4d8",
+        borderStyle: "dashed",
+        backgroundColor: "#fafafa",
+        alignItems: "center",
+        justifyContent: "center",
+      }}>
+        <Icon name="file-text" size={Math.max(10, Math.round(14 * scale))} color="#a1a1aa" />
+      </View>
+    );
+  }
+
+  const { label, color } = resolveMime(mimeType ?? "");
   const bottomHeight = Math.round(14 * scale);
   const fontSize = Math.round(7 * scale);
   const lineHeight = Math.round(10 * scale);
@@ -68,7 +91,7 @@ export function FileBadge({ mimeType, size = DEFAULT_SIZE, isTemplate }: FileBad
   const tmplPadH = Math.round(2 * scale);
   const tmplPadV = Math.max(1, Math.round(1 * scale));
   const tmplRadius = Math.round(2 * scale);
-  const mediaIcon = getMediaIcon(mimeType);
+  const mediaIcon = getMediaIcon(mimeType ?? "");
   const mediaIconSize = Math.max(10, Math.round(14 * scale));
 
   return (

package/src/file_dropzone.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useRef, useState } from "react";
+import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { colors } from "./colors";
+import { Icon } from "./icon";
+import { Text } from "./text";
+import { pickFiles } from "./file_picker";
+
+export interface FileDropzoneProps {
+  /** Receives the picked/dropped files. Bytes/upload belong to the host —
+   * this component only captures the files. */
+  onFiles: (files: File[]) => void;
+  /** Native `accept` filter (e.g. `"application/pdf,image/*"`); also applied
+   * to dropped files. */
+  accept?: string;
+  /** Allow more than one file. Default true. */
+  multiple?: boolean;
+  /** Main line ("Kéo thả tệp vào đây"). */
+  label?: string;
+  /** Secondary line ("hoặc bấm để chọn tệp · PDF, ảnh"). */
+  hint?: string;
+  /** Main line while a drag hovers the zone ("Thả để tải lên"). */
+  dropLabel?: string;
+  /** Zone height — size it to the surface (compact 120 in a form field,
+   * 200+ as a screen's main affordance). Default 160. */
+  height?: number;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+function matchesAccept(file: File, accept: string | undefined): boolean {
+  if (!accept) return true;
+  const patterns = accept.split(",").map((p) => p.trim().toLowerCase()).filter(Boolean);
+  if (patterns.length === 0) return true;
+  const mime = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return patterns.some((p) => {
+    if (p.startsWith(".")) return name.endsWith(p);
+    if (p.endsWith("/*")) return mime.startsWith(p.slice(0, -1));
+    return mime === p;
+  });
+}
+
+/**
+ * Drag-and-drop upload zone — the capture half of the file story (display =
+ * FileThumbnailGrid/FilePreview, picking = pickFiles, which also backs this
+ * zone's click). A dashed well with an icon + invitation; while a drag
+ * hovers it, the zone lights up in the accent and the label flips to
+ * `dropLabel`. On native (no drag events) it degrades to press-to-pick.
+ */
+export function FileDropzone(props: FileDropzoneProps) {
+  const {
+    onFiles,
+    accept,
+    multiple = true,
+    label = "Drag files here",
+    hint = "or click to browse",
+    dropLabel = "Drop to upload",
+    height = 160,
+    disabled = false,
+    accessibilityLabel,
+    style,
+  } = props;
+
+  const zoneRef = useRef<View>(null);
+  const dragDepth = useRef(0);
+  const [dragging, setDragging] = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  // RN-web exposes the View's underlying HTMLElement through the ref — attach
+  // the DOM drag events there. Native platforms skip this entirely (press-to-
+  // pick still works).
+  useEffect(() => {
+    if (disabled) return;
+    if (typeof HTMLElement === "undefined") return;
+    const node = zoneRef.current;
+    if (!(node instanceof HTMLElement)) return;
+
+    const onDragEnter = (e: DragEvent) => {
+      e.preventDefault();
+      dragDepth.current += 1;
+      setDragging(true);
+    };
+    const onDragOver = (e: DragEvent) => {
+      // preventDefault is what makes the element a legal drop target.
+      e.preventDefault();
+    };
+    const onDragLeave = () => {
+      dragDepth.current = Math.max(0, dragDepth.current - 1);
+      if (dragDepth.current === 0) setDragging(false);
+    };
+    const onDrop = (e: DragEvent) => {
+      e.preventDefault();
+      dragDepth.current = 0;
+      setDragging(false);
+      const dropped = Array.from(e.dataTransfer?.files ?? []).filter((f) => matchesAccept(f, accept));
+      if (dropped.length === 0) return;
+      onFiles(multiple ? dropped : dropped.slice(0, 1));
+    };
+
+    node.addEventListener("dragenter", onDragEnter);
+    node.addEventListener("dragover", onDragOver);
+    node.addEventListener("dragleave", onDragLeave);
+    node.addEventListener("drop", onDrop);
+    return () => {
+      node.removeEventListener("dragenter", onDragEnter);
+      node.removeEventListener("dragover", onDragOver);
+      node.removeEventListener("dragleave", onDragLeave);
+      node.removeEventListener("drop", onDrop);
+    };
+  }, [accept, disabled, multiple, onFiles]);
+
+  const handlePick = async () => {
+    if (disabled) return;
+    const picked = await pickFiles({ accept, multiple });
+    if (picked.length > 0) onFiles(picked);
+  };
+
+  return (
+    <Pressable
+      ref={zoneRef}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      disabled={disabled}
+      onPress={handlePick}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      style={[
+        styles.zone,
+        { height },
+        hovered && !dragging ? styles.zoneHovered : null,
+        dragging ? styles.zoneDragging : null,
+        disabled ? styles.zoneDisabled : null,
+        style,
+      ]}
+    >
+      <View style={[styles.iconWell, dragging ? styles.iconWellDragging : null]}>
+        <Icon name="upload" size={20} color={dragging ? colors.blue[600] : colors.zinc[500]} />
+      </View>
+      <Text size="sm" weight="medium" style={dragging ? { color: colors.blue[700] } : undefined}>
+        {dragging ? dropLabel : label}
+      </Text>
+      {!dragging && hint ? (
+        <Text size="xs" color="muted">
+          {hint}
+        </Text>
+      ) : null}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  zone: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    borderRadius: 12,
+    borderWidth: 1.5,
+    borderStyle: "dashed",
+    borderColor: colors.zinc[300],
+    backgroundColor: colors.zinc[50],
+    paddingHorizontal: 20,
+  },
+  zoneHovered: {
+    borderColor: colors.zinc[400],
+    backgroundColor: colors.zinc[100],
+  },
+  // The drop invitation: accent border + tinted well — unmistakably "this is
+  // where your files land".
+  zoneDragging: {
+    borderColor: colors.blue[500],
+    backgroundColor: colors.blue[50],
+  },
+  zoneDisabled: {
+    opacity: 0.5,
+  },
+  iconWell: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: colors.zinc[100],
+  },
+  iconWellDragging: {
+    backgroundColor: colors.blue[100],
+  },
+});

package/src/file_picker.ts

@@ -0,0 +1,45 @@
+// Pure web file-pick primitive — the missing trigger half of the file story
+// (display = file_thumbnail/file_preview, bytes = the host SDK's uploader,
+// download = download.ts). Opens the browser's file dialog imperatively so
+// RN-Web consumers never have to smuggle a DOM <input type="file"> into
+// their component tree.
+//
+// The input is parked in the document (hidden) for the dialog's lifetime —
+// some browsers GC a detached input while the dialog is still open, which
+// silently drops the change event — and removed once the pick settles.
+//
+// Cancel detection uses the `cancel` event (Chrome 113+ / Safari 16.4+ /
+// Firefox 91+), resolving `[]`. On older engines the promise simply never
+// settles — callers treat a pick as fire-and-handle, so a stranded promise
+// leaks nothing.
+//
+// No React Native / @lotics/shared imports — kept pure so both the host
+// frontend and sandboxed custom-code apps can consume via the per-file
+// export without dragging the wider UI surface.
+
+export interface PickFilesOptions {
+  /** Native `accept` filter, e.g. `"application/pdf,image/*"`. */
+  accept?: string;
+  /** Allow picking more than one file. Default false. */
+  multiple?: boolean;
+}
+
+export function pickFiles(opts?: PickFilesOptions): Promise<File[]> {
+  return new Promise((resolve) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    if (opts?.accept) input.accept = opts.accept;
+    input.multiple = opts?.multiple ?? false;
+    input.style.display = "none";
+
+    const settle = (files: File[]) => {
+      input.remove();
+      resolve(files);
+    };
+    input.addEventListener("change", () => settle(Array.from(input.files ?? [])));
+    input.addEventListener("cancel", () => settle([]));
+
+    document.body.appendChild(input);
+    input.click();
+  });
+}