@lotics/ui 14.1.0 → 14.3.0

package/src/file_badge_fit.ts

@@ -0,0 +1,34 @@
+/**
+ * `FileBadge` geometry — RN-free so it is unit-testable (a component file importing
+ * `react-native` cannot be loaded by Vitest).
+ *
+ * A `FileBadge`'s `size` is its WIDTH; every other dimension scales off it, so the badge
+ * has a FIXED aspect (26 × 32 at the default) and is TALLER than it is wide. A caller that
+ * owns a SQUARE slot — the thumbnail family, whose `size` is the tile side — therefore
+ * cannot pass its tile side through as a width: the badge would overflow the tile's
+ * bottom. `fileBadgeWidthForBox` converts a square slot to the width that fits it.
+ */
+
+/** The default badge width. A default badge is exactly `FILE_BADGE_BOX` tall. */
+export const FILE_BADGE_DEFAULT_WIDTH = 26;
+
+/** The height of a default-width badge — and the square slot it exactly fills. */
+export const FILE_BADGE_BOX = 32;
+
+/** The badge's height at a given width. The aspect is fixed. */
+export function fileBadgeHeight(width: number): number {
+  return Math.round((FILE_BADGE_BOX * width) / FILE_BADGE_DEFAULT_WIDTH);
+}
+
+/**
+ * The widest badge that fits inside a `box`×`box` square slot — height is the binding
+ * dimension, since the badge is taller than it is wide. `fileBadgeWidthForBox(32)` is
+ * `FILE_BADGE_DEFAULT_WIDTH`: the default badge fills the compact thumbnail slot exactly.
+ */
+export function fileBadgeWidthForBox(box: number): number {
+  let width = Math.max(1, Math.floor((box * FILE_BADGE_DEFAULT_WIDTH) / FILE_BADGE_BOX));
+  // Guard the rounding in `fileBadgeHeight`: the floored width can still round UP past
+  // the box by a pixel.
+  while (width > 1 && fileBadgeHeight(width) > box) width--;
+  return width;
+}

package/src/file_thumbnail.tsx

@@ -1,4 +1,5 @@
 import { FileBadge, resolveMime } from "./file_badge";
+import { fileBadgeWidthForBox } from "./file_badge_fit";
 import { fontFamilySemiBold } from "./text_utils";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
@@ -76,6 +77,9 @@ interface FileThumbnailProps {
   uploading?: boolean;
   /** Marks the file as a document TEMPLATE — adds a "TMPL" badge (any file type). */
   isTemplate?: boolean;
+  /** Accessible name for the tile — what pressing it DOES, when the raw filename isn't
+   *  the useful name ("Xem chứng từ"). Defaults to `file.filename`. */
+  accessibilityLabel?: string;
 }
 
 /**
@@ -84,6 +88,7 @@ interface FileThumbnailProps {
  */
 export function FileThumbnail(props: FileThumbnailProps) {
   const { file, size, onPress, onLongPress, onRemove, selected, uploading, isTemplate } = props;
+  const accessibilityLabel = props.accessibilityLabel ?? file.filename;
 
   const rootStyle =
     size !== undefined ? { width: size, height: size } : { width: "100%" as const, aspectRatio: 1 };
@@ -91,7 +96,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
   if (isImageMimeType(file.mimeType)) {
     return (
       <View style={rootStyle}>
-        <ImageThumbnail file={file} size={size} onPress={onPress} onLongPress={onLongPress} />
+        <ImageThumbnail file={file} size={size} accessibilityLabel={accessibilityLabel} onPress={onPress} onLongPress={onLongPress} />
         {uploading && <UploadingOverlay size={size} />}
         {onRemove && <RemoveButton onPress={onRemove} />}
         {selected !== undefined && <SelectionOverlay selected={selected} />}
@@ -108,7 +113,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           mimeType={file.mimeType}
           size={size}
           isTemplate={isTemplate}
-          accessibilityLabel={file.filename}
+          accessibilityLabel={accessibilityLabel}
           onPress={onPress ?? (() => Linking.openURL(file.url))}
           onLongPress={onLongPress}
         />
@@ -126,6 +131,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           filename={file.filename}
           icon={mediaIcon}
           size={size}
+          accessibilityLabel={accessibilityLabel}
           onPress={onPress ?? (() => Linking.openURL(file.url))}
           onLongPress={onLongPress}
         />
@@ -135,6 +141,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           filename={file.filename}
           size={size}
           isTemplate={isTemplate}
+          accessibilityLabel={accessibilityLabel}
           onPress={onPress ?? (() => Linking.openURL(file.url))}
           onLongPress={onLongPress}
         />
@@ -176,6 +183,9 @@ const uploadingOverlayStyles = StyleSheet.create({
 
 interface DocumentBadgeProps {
   mimeType: string;
+  /** The square SLOT side the badge fills — the same unit as `DocumentCard`/`MediaCard`
+   *  `size` and the thumbnail tile it sits in. A `FileBadge` is TALLER than it is wide,
+   *  so the slot is converted to a fitting badge width; omit for the default 32px slot. */
   size?: number;
   isTemplate?: boolean;
   onPress?: () => void;
@@ -189,7 +199,7 @@ interface DocumentBadgeProps {
  * Compact two-tone file badge with document lines and colored label.
  */
 export function DocumentBadge(props: DocumentBadgeProps) {
-  const { mimeType, isTemplate, onPress, onLongPress, accessibilityLabel } = props;
+  const { mimeType, size, isTemplate, onPress, onLongPress, accessibilityLabel } = props;
   const { focusVisible, focusProps } = useFocusRing();
 
   return (
@@ -201,7 +211,11 @@ export function DocumentBadge(props: DocumentBadgeProps) {
       {...focusProps}
       style={focusVisible ? { boxShadow: FOCUS_RING, borderRadius: 6 } : undefined}
     >
-      <FileBadge mimeType={mimeType} isTemplate={isTemplate} />
+      <FileBadge
+        mimeType={mimeType}
+        size={size !== undefined ? fileBadgeWidthForBox(size) : undefined}
+        isTemplate={isTemplate}
+      />
     </Pressable>
   );
 }
@@ -214,6 +228,8 @@ interface DocumentCardProps {
   onPress?: () => void;
   onLongPress?: () => void;
   overlay?: React.ReactNode;
+  /** Accessible name for the tile. Defaults to `filename` (which the tile also shows). */
+  accessibilityLabel?: string;
 }
 
 /**
@@ -224,6 +240,7 @@ interface DocumentCardProps {
  */
 export function DocumentCard(props: DocumentCardProps) {
   const { mimeType, filename, size, isTemplate, onPress, onLongPress, overlay } = props;
+  const a11yLabel = props.accessibilityLabel ?? filename;
 
   const sizeStyle =
     size !== undefined
@@ -246,7 +263,7 @@ export function DocumentCard(props: DocumentCardProps) {
       onPress={onPress}
       onLongPress={onLongPress}
       accessibilityRole="button"
-      accessibilityLabel={filename}
+      accessibilityLabel={a11yLabel}
       {...focusProps}
     >
       <FileBadge mimeType={mimeType} size={badgeSize} isTemplate={isTemplate} />
@@ -267,6 +284,8 @@ interface MediaCardProps {
   onPress?: () => void;
   onLongPress?: () => void;
   overlay?: React.ReactNode;
+  /** Accessible name for the tile. Defaults to `filename` (which the card also shows). */
+  accessibilityLabel?: string;
 }
 
 /**
@@ -276,6 +295,7 @@ interface MediaCardProps {
  */
 export function MediaCard(props: MediaCardProps) {
   const { mimeType, filename, size, onPress, onLongPress, overlay, icon } = props;
+  const a11yLabel = props.accessibilityLabel ?? filename;
   const { label, color } = resolveMime(mimeType);
 
   const sizeStyle =
@@ -294,7 +314,7 @@ export function MediaCard(props: MediaCardProps) {
         onPress={onPress}
         onLongPress={onLongPress}
         accessibilityRole="button"
-        accessibilityLabel={filename}
+        accessibilityLabel={a11yLabel}
         {...focusProps}
       >
         <Icon name={icon} size={iconSize} color={colors.white} />
@@ -307,7 +327,7 @@ export function MediaCard(props: MediaCardProps) {
   const backdrop = iconSize + 20;
 
   return (
-    <Pressable style={[styles.documentCard, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]} onPress={onPress} onLongPress={onLongPress} accessibilityRole="button" accessibilityLabel={filename} {...focusProps}>
+    <Pressable style={[styles.documentCard, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]} onPress={onPress} onLongPress={onLongPress} accessibilityRole="button" accessibilityLabel={a11yLabel} {...focusProps}>
       {(state) => (
         <>
           <View style={[styles.mediaCardBody, { backgroundColor: color }]}>
@@ -342,10 +362,13 @@ interface ImageThumbnailProps {
   size?: number;
   onPress?: () => void;
   onLongPress?: () => void;
+  /** Accessible name for the tile. Defaults to `file.filename`. */
+  accessibilityLabel?: string;
 }
 
 function ImageThumbnail(props: ImageThumbnailProps) {
   const { file, size, onPress, onLongPress } = props;
+  const a11yLabel = props.accessibilityLabel ?? file.filename;
   const [useFallback, setUseFallback] = useState(false);
   const { focusVisible, focusProps } = useFocusRing();
 
@@ -358,7 +381,7 @@ function ImageThumbnail(props: ImageThumbnailProps) {
       : { width: "100%" as const, height: "100%" as const };
 
   return (
-    <Pressable onPress={onPress} onLongPress={onLongPress} accessibilityRole={onPress ? "button" : "image"} accessibilityLabel={file.filename} {...focusProps} style={[styles.imageThumbnail, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]}>
+    <Pressable onPress={onPress} onLongPress={onLongPress} accessibilityRole={onPress ? "button" : "image"} accessibilityLabel={a11yLabel} {...focusProps} style={[styles.imageThumbnail, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]}>
       {(state) => (
         <>
           <Image

package/src/follow_scroll.tsx

@@ -1,5 +1,5 @@
-import { useRef, type ReactNode } from "react";
-import { ScrollView, StyleProp, ViewStyle, type NativeScrollEvent, type NativeSyntheticEvent } from "react-native";
+import { type ReactNode } from "react";
+import { FlatList, StyleProp, View, ViewStyle } from "react-native";
 
 export interface FollowScrollProps {
   children: ReactNode;
@@ -9,50 +9,45 @@ export interface FollowScrollProps {
   contentContainerStyle?: StyleProp<ViewStyle>;
 }
 
-// "At the bottom" tolerance: within this many px of the end still counts as
-// pinned, so sub-pixel scroll positions and streaming-growth rounding never
-// silently unpin the follow.
-const PIN_THRESHOLD = 40;
+const DATA = ["content"];
 
 /**
  * A scroll container that FOLLOWS its growing content — pinned to the bottom, it
  * keeps the newest content in view as children stream in (an `AgentRun` in a
- * dialog, a log feed). Scrolling up UNPINS it so the human can read history while
- * the content keeps growing; scrolling back to the bottom re-pins. Chat doesn't
- * need this (its message list is inverted, which follows by construction) — this
- * is for the plain top-down containers everywhere else: dialogs, drawers, panels.
+ * dialog, a log feed). Scrolling up releases the pin so the human can read
+ * history; scrolling back to the bottom re-pins.
+ *
+ * Implemented as a single-cell INVERTED list — the same mechanism as a chat
+ * message list — so the follow happens at LAYOUT level: the browser paints each
+ * growth already pinned (no scroll-after-paint flash, no scroll math). Short
+ * content still reads top-down (the content is end-justified in inverted
+ * coordinates); once it overflows, the newest edge stays in view natively. The
+ * inverted pattern's quirks (scrollbar thumb runs opposite, keyboard paging
+ * inverted) match the chat surface users already know.
  */
 export function FollowScroll(props: FollowScrollProps) {
   const { children, style, contentContainerStyle } = props;
-  const scrollRef = useRef<ScrollView>(null);
-  // Pinned state lives in a ref — it changes on every scroll tick and must never
-  // re-render the (streaming, already-busy) subtree.
-  const pinnedRef = useRef(true);
-
-  const followIfPinned = () => {
-    if (pinnedRef.current) scrollRef.current?.scrollToEnd({ animated: false });
-  };
-
-  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
-    const distanceFromBottom = contentSize.height - contentOffset.y - layoutMeasurement.height;
-    pinnedRef.current = distanceFromBottom < PIN_THRESHOLD;
-  };
-
   return (
-    <ScrollView
-      ref={scrollRef}
+    <FlatList
+      inverted
+      data={DATA}
+      keyExtractor={(k) => k}
+      // The consumer's content styles live on an inner wrapper INSIDE the cell —
+      // the cell renders upright (double flip), so authored padding keeps its
+      // visual orientation; the flipped outer container must not carry it.
+      renderItem={() => <View style={contentContainerStyle}>{children}</View>}
+      // Children identity changes every stream tick; without extraData the list
+      // would keep rendering the mounted cell's stale content.
+      extraData={children}
       style={style}
-      contentContainerStyle={contentContainerStyle}
-      // Content grew (a new part streamed in) or the frame resized (dialog
-      // re-measured) — both move the bottom edge, so both re-follow when pinned.
-      onContentSizeChange={followIfPinned}
-      onLayout={followIfPinned}
-      onScroll={onScroll}
-      scrollEventThrottle={16}
+      // flexGrow + flex-end top-aligns SHORT content (flex-end is the visual TOP
+      // in inverted coordinates), so a feed reads top-down until it overflows.
+      contentContainerStyle={followStyles.grow}
       nestedScrollEnabled
-    >
-      {children}
-    </ScrollView>
+    />
   );
 }
+
+const followStyles = {
+  grow: { flexGrow: 1, justifyContent: "flex-end" } as const,
+};

package/src/linked_record_box.tsx

@@ -1,11 +1,10 @@
 import { type ReactNode } from "react";
-import { View, Pressable, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { PressableRow } from "./pressable_row";
+import { PressDoor } from "./press_door";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { colors } from "./colors";
-import { useFocusRing } from "./use_focus_ring";
-import { FOCUS_RING } from "./control_surface";
 
 interface LinkedRecordBoxProps {
   /** The linked record's kind glyph (building-2 for a company, file-text for a record…). */
@@ -38,13 +37,13 @@ interface LinkedRecordBoxProps {
  *
  * The a11y contract it enforces (the error-prone part, hence a primitive): a container with
  * interactive descendants must NEVER be `role="button"` (invalid HTML). So the box is a
- * role-less `PressableRow`, an empty absolutely-positioned door sibling carries the tab stop /
- * accessible name / focus ring, and the interior verbs lift above it via `zIndex`.
+ * role-less `PressableRow`, a `PressDoor` sibling carries the tab stop / accessible name /
+ * focus ring, and the interior verbs lift above it via `zIndex`.
  */
 export function LinkedRecordBox({ icon, name, subtitle, facts, factLabelWidth = 80, doorLabel, onOpen, actions }: LinkedRecordBoxProps) {
   return (
     <PressableRow onPress={onOpen} style={styles.box}>
-      <Door label={doorLabel} onPress={onOpen} />
+      <PressDoor accessibilityLabel={doorLabel} onPress={onOpen} />
       <View style={styles.identity}>
         <View style={styles.glyph}>
           <Icon name={icon} size={17} color={colors.zinc[600]} />
@@ -75,25 +74,8 @@ export function LinkedRecordBox({ icon, name, subtitle, facts, factLabelWidth =
   );
 }
 
-// The keyboard DOOR: an empty absolutely-positioned sibling beneath the box content — a
-// button must NOT wrap the box's interactive descendants, so the door alone carries the tab
-// stop, accessible name, and focus ring; mouse presses ride the PressableRow surface.
-function Door({ label, onPress }: { label: string; onPress: () => void }) {
-  const { focusVisible, focusProps } = useFocusRing();
-  return (
-    <Pressable
-      accessibilityRole="button"
-      accessibilityLabel={label}
-      onPress={onPress}
-      {...focusProps}
-      style={[styles.door, focusVisible ? { boxShadow: FOCUS_RING } : null]}
-    />
-  );
-}
-
 const styles = StyleSheet.create({
   box: { flexDirection: "column", alignItems: "stretch", borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, paddingHorizontal: 16, paddingTop: 14, paddingBottom: 10, gap: 12 },
-  door: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0, borderRadius: 10 },
   identity: { flexDirection: "row", alignItems: "center", gap: 10 },
   glyph: { width: 34, height: 34, borderRadius: 8, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" },
   fact: { flexDirection: "row", gap: 10 },

package/src/press_door.tsx

@@ -0,0 +1,68 @@
+import { Pressable, StyleSheet } from "react-native";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
+
+export interface PressDoorProps {
+  /** Opens the thing the surface stands for — the same handler the surface presses. */
+  onPress: () => void;
+  /**
+   * REQUIRED. The door is EMPTY, so it has no text content to derive a name from —
+   * without a label it is a nameless button. Name the destination ("Open ORD-1042").
+   */
+  accessibilityLabel: string;
+  /** Focus-ring corner radius — match the surface the door spans. Default 10 (the register wash). */
+  radius?: number;
+}
+
+/**
+ * THE keyboard door: an empty, absolutely-positioned `Pressable` that carries the
+ * `role="button"` tab stop, the accessible name, and the focus ring for a pressable
+ * surface whose CONTENT can hold its own controls.
+ *
+ * A button must not contain interactive descendants — nesting `<button>` in `<button>`
+ * is invalid HTML (React hydration warning) and collapses the inner control's press and
+ * tab stop. So the door is never an ANCESTOR of the content: it is a SIBLING beneath it.
+ *
+ * Composition (the contract) — the role-less `PressableRow` takes the mouse and paints the
+ * hover wash, the door takes the keyboard, the content keeps its own controls:
+ * ```tsx
+ * <PressableRow onPress={open}>
+ *   <PressDoor onPress={open} accessibilityLabel="Open ORD-1042" />
+ *   <View style={{ zIndex: 1 }}>…cells, CTAs, overflow menus…</View>
+ * </PressableRow>
+ * ```
+ * The parent must establish the positioning context (`PressableRow` and any
+ * `position: "relative"` box do), and the in-flow content must lift above the door with
+ * `zIndex: 1` — an absolutely-positioned sibling paints AND hit-tests above in-flow
+ * content, which would otherwise swallow every nested control's press. (A negative z on
+ * the door instead would escape the row — no stacking context — and bury the focus ring
+ * under the card background.) With that, the door takes only the keyboard, the mouse
+ * rides the surface, and nested controls claim their own presses.
+ *
+ * Wrap the content in the pressable itself (`PressableHighlight`, `FileRow`'s door) ONLY
+ * when that content is non-interactive by construction.
+ *
+ * `TableRow` and `LinkedRecordBox` are the in-kit consumers.
+ */
+export function PressDoor({ onPress, accessibilityLabel, radius = 10 }: PressDoorProps) {
+  const { focusVisible, focusProps } = useFocusRing();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      onPress={onPress}
+      {...focusProps}
+      style={[styles.door, { borderRadius: radius }, focusVisible && { boxShadow: FOCUS_RING }]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  door: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+});

package/src/pressable_highlight.tsx

@@ -63,6 +63,13 @@ export interface PressableHighlightProps extends PressableProps {
 /**
  * A pressable component that highlights when hovered and pressed.
  * It will darken the `backgroundColor` prop when hovered and pressed.
+ *
+ * It IS a button and it WRAPS its children — so its content must be non-interactive by
+ * construction. A row whose content carries its own controls (a CTA, a ⋯ menu, a
+ * checkbox, a `Link`) must not be built on it: a button cannot contain interactive
+ * descendants. Compose the role-less `PressableRow` + a `PressDoor` sibling instead —
+ * the surface takes the mouse, the door takes the keyboard, the controls stay their own
+ * tab stops (`TableRow` and `LinkedRecordBox` are the references).
  */
 export function PressableHighlight(props: PressableHighlightProps) {
   const {

package/src/table.tsx

@@ -8,15 +8,14 @@ import {
   type ReactNode,
   type ReactElement,
 } from "react";
-import { StyleSheet, View, Pressable, type ViewStyle } from "react-native";
+import { StyleSheet, View, type ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { PressableRow } from "./pressable_row";
+import { PressDoor } from "./press_door";
 import { Divider } from "./divider";
 import { DetailRow } from "./detail_row";
 import { SortHeader, type SortState, type SortHeaderLabels } from "./sort_header";
-import { FOCUS_RING } from "./control_surface";
-import { useFocusRing } from "./use_focus_ring";
 import { COLUMN_GAP, ROW_GUTTER, computeTableFit, type TableFit, type TableFitColumn } from "./table_fit";
 
 /**
@@ -182,7 +181,7 @@ export type TableRowProps = {
 
 /**
  * A register row: a full-bleed `PressableRow` (its hover wash spans the whole row,
- * incl. the leading/trailing controls) holding the cells, with the door — the
+ * incl. the leading/trailing controls) holding the cells, with a `PressDoor` — the
  * keyboard-accessible `role="button"` open target — as an EMPTY absolutely-
  * positioned SIBLING beneath them, never their ancestor. A button must not
  * contain interactive descendants, and cells legitimately carry their own
@@ -209,7 +208,6 @@ export function TableRow(props: TableRowProps) {
     // the declared columns stay — same tolerance as the width mapping.
     .filter(({ column }) => ctx.stacked || column == null || ctx.visibleKeys.has(column.key))
     .map(({ cell, column }) => cloneElement(cell, { _column: column, _stacked: ctx.stacked }));
-  const { focusVisible, focusProps } = useFocusRing();
 
   const body = ctx.stacked ? (
     <View style={styles.stackedBody}>
@@ -254,18 +252,10 @@ export function TableRow(props: TableRowProps) {
   return (
     <PressableRow onPress={onPress} selected={selected} marked={marked} style={styles.row}>
       {!ctx.stacked && ctx.leading > 0 ? <View style={[styles.slot, { width: ctx.leading }]}>{leading}</View> : null}
-      {/* An absolutely-positioned sibling paints — and hit-tests — above in-flow
-          content, which would swallow every cell control's press; the slots lift
-          above it via zIndex 1 (z-index applies to flex items), so the door gets
-          only the keyboard. Negative z on the door instead would escape the row
-          (no stacking context) and bury the focus ring under the Card background. */}
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel}
-        onPress={onPress}
-        {...focusProps}
-        style={[styles.door, focusVisible && { boxShadow: FOCUS_RING }]}
-      />
+      {/* The door hit-tests above in-flow content; the cells/slots lift back above it
+          via zIndex 1 (see `PressDoor`), so the door gets only the keyboard. Radius
+          matches the register wash. */}
+      <PressDoor onPress={onPress} accessibilityLabel={accessibilityLabel} />
       {ctx.stacked ? (
         body
       ) : (
@@ -348,17 +338,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     paddingHorizontal: ROW_GUTTER,
   },
-  // The keyboard door: an empty overlay spanning the row — the tab stop + focus
-  // ring live here, the cells are its SIBLINGS (see TableRow's doc). Radius
-  // matches the register wash.
-  door: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    borderRadius: 10,
-  },
   cells: {
     flex: 1,
     flexDirection: "row",