@lotics/ui 2.4.1 → 2.5.0

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();
+  });
+}

package/src/filter_pill.tsx

@@ -0,0 +1,106 @@
+import { type ReactNode } from "react";
+import { StyleSheet } from "react-native";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { colors } from "./colors";
+import { LinkButton } from "./link_button";
+import { PillButton } from "./pill_button";
+import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
+import type { PopoverSide, PopoverAlign } from "./popover";
+
+export interface FilterPillProps {
+  /** The dimension name — shown alone when inactive ("Owner"), prefixed when
+   *  active ("Owner: Maria, James"). */
+  label: string;
+  /** A short human summary of the active selection ("Maria, James", "≥ 10").
+   *  Empty / undefined renders the inactive pill (label + chevron, no clear).
+   *  Build it with `rangeSummary` / `selectSummary` for a consistent preview. */
+  summary?: string;
+  /** Clears the dimension — renders the × on the pill AND a Clear in the popover
+   *  footer whenever a summary is present. */
+  onClear?: () => void;
+  /** Label for the clear affordances (pass a translated string). */
+  clearLabel?: string;
+  /** The editor revealed on press — a premium primitive (`RangeSlider`,
+   *  `Counter`, `PickerMenu` multi) or any composed control. `FilterPill` owns
+   *  the pill + popover chrome; the consumer owns the value and applies it. */
+  children: ReactNode;
+  side?: PopoverSide;
+  align?: PopoverAlign;
+  /** Optional controlled popover state — for an editor that closes on Save. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** A custom popover footer (e.g. Cancel / Save) — replaces the baked Clear.
+   *  Lets a non-filter VALUE pill (a setting gate) reuse the same shell. */
+  footer?: ReactNode;
+}
+
+/**
+ * A short summary of a multi-select for a `FilterPill` preview — "Maria, James"
+ * up to `max` labels, else "N selected", and `undefined` when nothing is
+ * chosen. The select sibling of `rangeSummary`.
+ */
+export function selectSummary(
+  selected: string[],
+  options: { value: string; label: string }[],
+  opts?: { max?: number },
+): string | undefined {
+  if (selected.length === 0) return undefined;
+  const max = opts?.max ?? 2;
+  if (selected.length > max) return `${selected.length} selected`;
+  return selected.map((v) => options.find((o) => o.value === v)?.label ?? v).join(", ");
+}
+
+/**
+ * A toolbar filter pill — the compact, popover-backed control for a SECONDARY
+ * filter dimension, the sibling of `ChipGroup` (which lays ONE hot dimension's
+ * options out inline). Many dimensions stay scannable because each collapses to
+ * a single pill: inactive reads "Label ⌄", active reads "Label: summary" with an
+ * × to clear. `FilterPill` bakes the consistent chrome — the preview pill, a
+ * padded popover body for the composed editor, and a Clear footer when active —
+ * so every filter looks and behaves the same. Drop a premium primitive inside
+ * (`RangeSlider`, `Counter`, `PickerMenu` multi). With `footer` (+ controlled
+ * `open`/`onOpenChange`) the same shell wraps a non-filter VALUE pill — a
+ * setting gate with Cancel/Save — keeping it on the one pill surface. The table
+ * toolbar's `ColumnFilter` is this pill plus its query-condition mapping.
+ */
+export function FilterPill(props: FilterPillProps) {
+  const { label, summary, onClear, clearLabel = "Clear", children, side = "bottom", align = "start", open, onOpenChange, footer } = props;
+  const active = summary != null && summary.length > 0;
+  // The clear × / Clear footer only when there's a clearable selection AND no
+  // custom footer — a valued, non-clearable pill ("Target: 20") keeps its chevron.
+  const showClear = active && !!onClear && !footer;
+
+  return (
+    <Popover side={side} align={align} open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger>
+        <PillButton onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
+          <Text size="sm" weight="medium" color={active ? "zinc-900" : "zinc-700"} numberOfLines={1}>
+            {active ? `${label}: ${summary}` : label}
+          </Text>
+          {!showClear ? <Icon name="chevron-down" size={14} color={colors.zinc["400"]} /> : null}
+        </PillButton>
+      </PopoverTrigger>
+      <PopoverContent style={styles.body} disableBodyScroll>
+        {children}
+        {footer ? (
+          <PopoverFooter>{footer}</PopoverFooter>
+        ) : showClear ? (
+          <PopoverFooter align="start">
+            <LinkButton title={clearLabel} onPress={onClear} />
+          </PopoverFooter>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const styles = StyleSheet.create({
+  // The popover hugs its content — a wide control (e.g. RangeSlider) sets its
+  // OWN fixed width; the shell never forces one. No extra padding: the editor and
+  // the Clear footer then share the popover's own 8px inset, so a multi-select's
+  // options, its select-all, and the Clear all line up on one left edge.
+  body: {
+    gap: 8,
+  },
+});

package/src/floating_action_bar.tsx

@@ -0,0 +1,57 @@
+import { ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { Button } from "./button";
+import { Card } from "./card";
+import { Text } from "./text";
+
+export interface FloatingActionBarProps {
+  /** How many rows are selected — the bar shows only while > 0. */
+  count: number;
+  /** The noun after the count — "leads selected", "in-policy requests". */
+  label: string;
+  /** Clears the selection — the always-present escape. */
+  onClear: () => void;
+  clearLabel?: string;
+  /** The bulk action(s) — a primary `Button` or an "Assign to…" `Popover`. */
+  children: ReactNode;
+}
+
+/**
+ * The floating action bar — pinned bottom-center while ≥1 row is selected across a
+ * checkbox-select register, showing the count + Clear + the bulk action(s), with
+ * the primary action kept RIGHTMOST (Clear is the secondary escape to its left).
+ * The shared surface for assign/reassign (a CRM pile), bulk-approve, batch-build,
+ * etc. Lift the selection `Set` into the host; this is presentation only. The
+ * `box-none` wrapper lets clicks fall through everywhere except the bar.
+ */
+export function FloatingActionBar(props: FloatingActionBarProps) {
+  const { count, label, onClear, clearLabel = "Clear", children } = props;
+  if (count <= 0) return null;
+  return (
+    <View pointerEvents="box-none" style={styles.wrap}>
+      <Card style={styles.bar}>
+        <Text size="sm" weight="semibold" tabular>{`${count} ${label}`}</Text>
+        <Button title={clearLabel} color="secondary" onPress={onClear} />
+        {children}
+      </Card>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    position: "absolute",
+    bottom: 20,
+    left: 0,
+    right: 0,
+    alignItems: "center",
+    zIndex: 20,
+  },
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+  },
+});