@olympusoss/canvas 4.0.0 → 5.0.0

package/src/organisms/command/command.tsx

@@ -0,0 +1,164 @@
+import { useState } from "react";
+import { View, Text, Pressable, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import { Icon } from "../../atoms/icon/icon.js";
+import { Kbd } from "../../atoms/kbd/kbd.js";
+import * as s from "./command.styles.js";
+
+// Command: a Cmd+K style command palette rendered as a floating card. A search
+// row sits at the top (a leading magnifier glyph + a muted placeholder), then
+// one or more groups of result rows. Each group can carry an optional uppercase
+// heading; each row is a leading icon glyph + a label + an optional trailing
+// shortcut rendered as a Kbd cap. The active row (a flat index across all
+// groups) is highlighted with the accent surface.
+//
+// This is the OPEN, INLINE palette card on its own: no full-screen portal,
+// Modal, or backdrop. `open` (default true) gates whether the card renders, so
+// the docs playground can show the palette in its open state.
+//
+// Style is configured through semantic boolean props (Canvas's only styling
+// API); there are no string-enum props.
+
+export interface CommandItem {
+  /** The row's primary text. */
+  label: string;
+  /** Optional leading glyph (e.g. an emoji or single character). */
+  icon?: string;
+  /** Optional trailing keyboard shortcut, rendered in a Kbd cap. */
+  shortcut?: string;
+}
+
+export interface CommandGroup {
+  /** Optional uppercase section heading above the group's rows. */
+  heading?: string;
+  /** The rows in this group. */
+  items: CommandItem[];
+}
+
+export interface CommandProps {
+  /** Placeholder shown in the (non-editable, display-only) search row. */
+  placeholder?: string;
+  /** Grouped result rows. */
+  groups?: CommandGroup[];
+  /** Flat index of the highlighted row, counted across all groups. */
+  active?: number;
+  /** Controlled open state. Omit for uncontrolled (the search trigger toggles it). */
+  open?: boolean;
+  /** Fired when the open state changes. */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Render a collapsed full-width search trigger above the palette (a search
+   * glyph + "Search..." + a trailing kbd cap). The palette card still renders
+   * inline below the trigger (gated by `open`), mirroring how Dropdown shows
+   * its trigger plus the open menu in the docs.
+   */
+  trigger?: boolean;
+  /**
+   * Append a footer hint bar below the list (↑ ↓ to navigate, ↵ to select,
+   * esc to close).
+   */
+  footer?: boolean;
+  /** Called with the chosen item and its flat index when a row is pressed. */
+  onSelect?: (item: CommandItem, index: number) => void;
+  /** Escape hatch for layout/positioning composition (mainly width). */
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Command(props: CommandProps) {
+  const {
+    placeholder = "Type a command or search...",
+    groups = [],
+    active = 0,
+    open: openProp,
+    trigger,
+    footer,
+    onOpenChange,
+    onSelect,
+    style,
+  } = props;
+  const { tokens } = useTheme();
+
+  // Uncontrolled by default: in trigger mode the palette starts closed and the
+  // collapsed search trigger toggles it; the bare card (no trigger) starts open.
+  const [internalOpen, setInternalOpen] = useState(() => !trigger);
+  const open = openProp ?? internalOpen;
+  const setOpen = (next: boolean) => {
+    if (openProp === undefined) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  // In trigger mode the collapsed search button is always shown; the palette
+  // card below it is still gated by `open`. Otherwise the bare card is gated by
+  // `open` and renders nothing when closed.
+  if (!trigger && !open) return null;
+
+  // Walk a flat counter across every group so `active` indexes the whole list.
+  let flat = -1;
+
+  const card = open ? (
+    <View style={[s.card(tokens), trigger ? s.cardFloating : null]}>
+      <View style={s.searchRow(tokens)}>
+        <Text style={s.searchGlyph(tokens)}>🔍</Text>
+        <Text style={s.searchPlaceholder(tokens)}>{placeholder}</Text>
+      </View>
+
+      {groups.map((group, gi) => (
+        <View key={`group-${gi}`}>
+          {group.heading != null ? <Text style={s.groupHeading(tokens)}>{group.heading}</Text> : null}
+          {group.items.map((item, ii) => {
+            flat += 1;
+            const index = flat;
+            const isActive = index === active;
+            return (
+              <Pressable
+                key={`item-${gi}-${ii}`}
+                style={({ pressed }) => [
+                  s.rowBase,
+                  isActive || pressed ? s.rowAccent(tokens) : null,
+                ]}
+                onPress={() => {
+                  onSelect?.(item, index);
+                  setOpen(false);
+                }}
+              >
+                {item.icon != null ? <Text style={s.rowIcon(tokens)}>{item.icon}</Text> : null}
+                <Text style={s.rowLabel(tokens)}>{item.label}</Text>
+                {item.shortcut != null ? <Kbd>{item.shortcut}</Kbd> : null}
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+
+      {footer ? (
+        <View style={s.footerBar(tokens)}>
+          <View style={s.footerHint}>
+            <Kbd>↑</Kbd>
+            <Kbd>↓</Kbd>
+            <Text style={s.footerText(tokens)}>to navigate</Text>
+          </View>
+          <View style={s.footerHint}>
+            <Kbd>↵</Kbd>
+            <Text style={s.footerText(tokens)}>to select</Text>
+          </View>
+          <View style={s.footerHint}>
+            <Kbd>esc</Kbd>
+            <Text style={s.footerText(tokens)}>to close</Text>
+          </View>
+        </View>
+      ) : null}
+    </View>
+  ) : null;
+
+  if (!trigger) return card;
+
+  return (
+    <View style={[s.triggerWrapper, open ? s.triggerWrapperLifted : null, style]}>
+      <Pressable style={s.triggerRow(tokens)} onPress={() => setOpen(!open)}>
+        <Icon search muted size={14} />
+        <Text style={s.triggerLabel(tokens)}>Search...</Text>
+        <Kbd style={s.triggerKbd}>⌘K</Kbd>
+      </Pressable>
+      {card}
+    </View>
+  );
+}

package/src/organisms/data-table/data-table.md

@@ -0,0 +1,182 @@
+# Data Tables
+
+Every table is the same composition: bordered wrap → toolbar → scrollable table → footer. Density tweaks affect padding live.
+
+## Usage
+
+```tsx
+<DataTable
+  columns={["Name", "Email", "Role", "Status"]}
+  rows={[
+    ["Alice Johnson", "alice@example.com", "Admin", "Active"],
+    ["Bob Smith", "bob@example.com", "Editor", "Inactive"],
+    ["Rachel Chen", "rachel@example.com", "Admin", "Active"]
+  ]}
+  bordered
+/>
+```
+
+## Variants
+
+### Variant - bulk
+
+```tsx
+<DataTable
+  columns={["Name", "Email", "Role", "Status"]}
+  rows={[
+    ["Alice Johnson", "alice@example.com", "Admin", "Active"],
+    ["Bob Smith", "bob@example.com", "Editor", "Inactive"],
+    ["Rachel Chen", "rachel@example.com", "Admin", "Active"]
+  ]}
+  bordered
+  selectable
+/>
+```
+
+### Density - compact
+
+```tsx
+<DataTable
+  columns={["Name", "Email", "Role", "Status"]}
+  rows={[
+    ["Alice Johnson", "alice@example.com", "Admin", "Active"],
+    ["Bob Smith", "bob@example.com", "Editor", "Inactive"],
+    ["Rachel Chen", "rachel@example.com", "Admin", "Active"]
+  ]}
+  bordered
+  compact
+/>
+```
+
+## Do & Don't
+
+### default
+
+**Do** — Keep the count + pagination footer so the search result is always anchored to the total.
+
+```tsx
+<View style={{ overflow: "hidden", borderRadius: 8, borderWidth: 1, borderColor: tokens.border, maxWidth: 520 }}>
+  <View style={{ flexDirection: "row", alignItems: "center", gap: 8, borderBottomWidth: 1, borderColor: tokens.border, padding: 12 }}>
+    <Input small placeholder="Search users..." style={{ maxWidth: 240 }} />
+    <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }} />
+    <Button outline small>Export</Button>
+  </View>
+  <DataTable columns={["Name", "Email"]} rows={[
+    ["Alice Johnson", "alice@example.com"],
+    ["Bob Smith", "bob@example.com"],
+    ["Rachel Chen", "rachel@example.com"]
+  ]} />
+  <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", borderTopWidth: 1, borderColor: tokens.border, paddingHorizontal: 16, paddingVertical: 10 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Showing 1–3 of 142</Text>
+    <View style={{ flexDirection: "row", gap: 4 }}>
+      <Button outline small disabled>«</Button>
+      <Button outline small>»</Button>
+    </View>
+  </View>
+</View>
+```
+
+**Don't** — Wiring search but dropping the footer leaves the user with no result count or way to page through 142 rows.
+
+```tsx
+<View style={{ overflow: "hidden", borderRadius: 8, borderWidth: 1, borderColor: tokens.border, maxWidth: 520 }}>
+  <View style={{ flexDirection: "row", alignItems: "center", gap: 8, borderBottomWidth: 1, borderColor: tokens.border, padding: 12 }}>
+    <Input small placeholder="Search users..." style={{ maxWidth: 240 }} />
+    <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }} />
+    <Button outline small>Export</Button>
+  </View>
+  <DataTable columns={["Name", "Email"]} rows={[
+    ["Alice Johnson", "alice@example.com"],
+    ["Bob Smith", "bob@example.com"],
+    ["Rachel Chen", "rachel@example.com"]
+  ]} />
+</View>
+```
+
+### bulk
+
+**Do** — Lead with the non-destructive bulk action and keep Delete visually distinct on the right.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 8, borderWidth: 1, borderColor: tokens.border, padding: 12, maxWidth: 520 }}>
+  <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>3 selected</Text>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }} />
+  <Button outline small>Bulk edit</Button>
+  <Button destructive small>Delete</Button>
+</View>
+```
+
+**Don't** — Surfacing only the destructive Delete on a selection invites accidental data loss with no safer path.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 8, borderWidth: 1, borderColor: tokens.border, padding: 12, maxWidth: 520 }}>
+  <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>3 selected</Text>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }} />
+  <Button destructive small>Delete</Button>
+</View>
+```
+
+### filter
+
+**Do** — Echo the live result count next to the filter so its effect is visible.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 8, borderWidth: 1, borderColor: tokens.border, padding: 12, maxWidth: 520 }}>
+  <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Status:</Text>
+  <Select value="All" options={["All", "Active", "Inactive"]} small style={{ width: 120 }} />
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }} />
+  <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>142 results</Text>
+</View>
+```
+
+**Don't** — A filter control with no result count leaves the user guessing whether the filter narrowed anything.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 8, borderWidth: 1, borderColor: tokens.border, padding: 12, maxWidth: 520 }}>
+  <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Status:</Text>
+  <Select value="All" options={["All", "Active", "Inactive"]} small style={{ width: 120 }} />
+</View>
+```
+
+### empty
+
+**Do** — Keep the header and span a single centered message row so the structure stays intact.
+
+```tsx
+<View style={{ overflow: "hidden", borderRadius: 8, borderWidth: 1, borderColor: tokens.border, maxWidth: 520 }}>
+  <DataTable columns={["Name", "Email", "Status"]} rows={[]} />
+  <View style={{ alignItems: "center", paddingHorizontal: 16, paddingVertical: 32 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>No results found.</Text>
+  </View>
+</View>
+```
+
+**Don't** — Hiding the body entirely on no results collapses the table and looks broken.
+
+```tsx
+<DataTable bordered columns={["Name", "Email", "Status"]} rows={[]} style={{ maxWidth: 520 }} />
+```
+
+### loading
+
+**Do** — Show a spinner in a centered spanning row so the load reads as active and in place.
+
+```tsx
+<View style={{ overflow: "hidden", borderRadius: 8, borderWidth: 1, borderColor: tokens.border, maxWidth: 520 }}>
+  <DataTable columns={["Name", "Email", "Status"]} rows={[]} />
+  <View style={{ alignItems: "center", paddingHorizontal: 16, paddingVertical: 32 }}>
+    <Spinner small />
+  </View>
+</View>
+```
+
+**Don't** — A bare "Loading…" string gives no sense of progress and reads like static content.
+
+```tsx
+<View style={{ overflow: "hidden", borderRadius: 8, borderWidth: 1, borderColor: tokens.border, maxWidth: 520 }}>
+  <DataTable columns={["Name", "Email", "Status"]} rows={[]} />
+  <View style={{ alignItems: "center", paddingHorizontal: 16, paddingVertical: 32 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Loading…</Text>
+  </View>
+</View>
+```

package/src/organisms/data-table/data-table.styles.ts

@@ -0,0 +1,103 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, alpha } from "../../style/index.js";
+
+// Co-located DataTable styles. The table is laid out as flex rows of equal-width
+// flex-1 cells (there is no CSS table primitive). Layout-only fragments are
+// static objects; anything that reads a color is a function of the active brand
+// tokens (so the header tint, hairlines, stripes, and press tint follow
+// light/dark and the glass surface).
+
+export type Density = "compact" | "regular";
+
+// --- wrap (outer) -----------------------------------------------------------
+
+// The table clips its rounded corners so the header tint and bottom hairlines
+// stay inside the bordered outline.
+export const wrap: ViewStyle = { overflow: "hidden" };
+
+// The `bordered` outline: a rounded 1px border around the whole table (the
+// engine had no ring, so the outline is a border). Reads the border token.
+export function borderedOutline(tokens: ColorTokens): ViewStyle {
+  return { borderRadius: 8, borderWidth: 1, borderColor: tokens.border };
+}
+
+// --- header row -------------------------------------------------------------
+
+// The header band: a flex row on the muted surface.
+export function headerRow(tokens: ColorTokens): ViewStyle {
+  return { flexDirection: "row", backgroundColor: tokens.muted };
+}
+
+// Header vertical padding per density. Header sits a touch tighter than the body
+// so the label band reads as a header.
+export const headerPad: Record<Density, ViewStyle> = {
+  compact: { paddingHorizontal: 16, paddingVertical: 6 },
+  regular: { paddingHorizontal: 16, paddingVertical: 8 },
+};
+
+// A header column label: equal-width, small, muted, uppercase, wide-tracked.
+export function headerCell(tokens: ColorTokens): TextStyle {
+  return {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500",
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+    color: tokens["muted-foreground"],
+  };
+}
+
+// --- selection column -------------------------------------------------------
+
+// The leading checkbox column, kept narrow and fixed (flex-none) so it does not
+// eat into the flex-1 content cells.
+export const selectCol: ViewStyle = {
+  width: 40,
+  alignItems: "center",
+  justifyContent: "center",
+  flexGrow: 0,
+  flexShrink: 0,
+  flexBasis: "auto",
+};
+
+// --- data rows --------------------------------------------------------------
+
+// A data row: a flex row, vertically centered, with a hairline beneath it.
+export function dataRow(tokens: ColorTokens): ViewStyle {
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    borderBottomWidth: 1,
+    borderColor: tokens.border,
+  };
+}
+
+// The striped tint on alternating (odd-index) rows: muted at 30% opacity.
+export function stripeTint(tokens: ColorTokens): ViewStyle {
+  return { backgroundColor: alpha(tokens.muted, 0.3) };
+}
+
+// The pressed tint for a pressable row (the old `active:bg-accent`).
+export function pressTint(tokens: ColorTokens): ViewStyle {
+  return { backgroundColor: tokens.accent };
+}
+
+// Cell vertical padding per density.
+export const cellPad: Record<Density, ViewStyle> = {
+  compact: { paddingHorizontal: 16, paddingVertical: 8 },
+  regular: { paddingHorizontal: 16, paddingVertical: 12 },
+};
+
+// A content cell: equal-width column box (padding added per density).
+export const dataCell: ViewStyle = { flexGrow: 1, flexShrink: 1, flexBasis: "0%" };
+
+// The selection cell in a data row: the narrow fixed column plus row padding.
+export const selectCell: ViewStyle = { ...selectCol };
+
+// A data cell's text: small body type on the foreground color.
+export function cellText(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, color: tokens.foreground };
+}

package/src/organisms/data-table/data-table.tsx

@@ -0,0 +1,105 @@
+import { type ReactNode } from "react";
+import { View, Pressable, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import { Checkbox } from "../../atoms/checkbox/checkbox.js";
+import * as s from "./data-table.styles.js";
+import { type Density } from "./data-table.styles.js";
+
+// The data table lays a grid out as flex rows of equal-width flex-1 cells (RN
+// has no CSS table primitive; tables are flex rows/columns). A header row
+// carries small, muted, uppercase column labels on a tinted surface, and the
+// data rows sit beneath it separated by hairlines.
+//
+// Boolean-prop API: one boolean per option, grouped by axis, first-match
+// precedence within an axis (mirrors Button's intentOf). Density (`compact`)
+// retunes the vertical padding; `striped` tints alternating rows; `bordered`
+// wraps the whole table in a rounded outline; `selectable` prepends a leading
+// checkbox column to every row.
+
+export interface DataTableProps {
+  /** Column header labels, one per column. */
+  columns: string[];
+  /** Row data: an array of rows, each an array of cell strings (one per column). */
+  rows: string[][];
+  /** Tint every other data row for easier horizontal scanning. */
+  striped?: boolean;
+  /** Wrap the table in a rounded outer border. */
+  bordered?: boolean;
+  // Density (pick one; default is the regular row height).
+  /** Tighter vertical padding on header and data cells. */
+  compact?: boolean;
+  /** Prepend a leading checkbox column (header gets an empty selector cell). */
+  selectable?: boolean;
+  /** When set, each data row is pressable, reporting the row data and index. */
+  onRowPress?: (row: string[], index: number) => void;
+  /** Escape hatch for layout/positioning composition (mainly width). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Density precedence when more than one is passed: first match wins.
+function densityOf(p: DataTableProps): Density {
+  if (p.compact) return "compact";
+  return "regular";
+}
+
+export function DataTable(props: DataTableProps) {
+  const { columns, rows, striped, bordered, selectable, onRowPress, style } = props;
+  const density = densityOf(props);
+  const { tokens } = useTheme();
+
+  const wrap: StyleProp<ViewStyle> = [
+    s.wrap,
+    // RN has no ring; a rounded 1px border is the bordered outline.
+    bordered ? s.borderedOutline(tokens) : null,
+    style,
+  ];
+
+  return (
+    <View style={wrap}>
+      <View style={[s.headerRow(tokens), s.headerPad[density]]}>
+        {selectable ? <View style={s.selectCol} /> : null}
+        {columns.map((label, i) => (
+          <Text key={`h-${i}`} style={s.headerCell(tokens)}>
+            {label}
+          </Text>
+        ))}
+      </View>
+      {rows.map((row, r) => {
+        const cells = (
+          <>
+            {selectable ? (
+              <View style={[s.selectCell, s.cellPad[density]]}>
+                <Checkbox />
+              </View>
+            ) : null}
+            {columns.map((_col, c) => (
+              <View key={`c-${r}-${c}`} style={[s.dataCell, s.cellPad[density]]}>
+                <Text style={s.cellText(tokens)}>{cellOf(row, c)}</Text>
+              </View>
+            ))}
+          </>
+        );
+        // The striped tint sits on odd-index rows for either layout.
+        const stripe = striped && r % 2 === 1 ? s.stripeTint(tokens) : null;
+        return onRowPress ? (
+          <Pressable
+            key={`r-${r}`}
+            onPress={() => onRowPress(row, r)}
+            style={({ pressed }) => [s.dataRow(tokens), stripe, pressed ? s.pressTint(tokens) : null]}
+          >
+            {cells}
+          </Pressable>
+        ) : (
+          <View key={`r-${r}`} style={[s.dataRow(tokens), stripe]}>
+            {cells}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+// Read a cell, tolerating short rows (missing trailing cells render empty).
+function cellOf(row: string[], index: number): ReactNode {
+  const value = row[index];
+  return value == null ? "" : value;
+}

package/src/organisms/dialog/dialog.android.tsx

@@ -0,0 +1,6 @@
+import { createDialog } from "./dialog.shared.js";
+import { androidSkin } from "./dialog.styles.js";
+
+// Material 3 (basic dialog) Dialog. Metro resolves this file on Android; the docs import it for preview.
+export const Dialog = createDialog(androidSkin);
+export type { DialogProps } from "./dialog.shared.js";

package/src/organisms/dialog/dialog.ios.tsx

@@ -0,0 +1,6 @@
+import { createDialog } from "./dialog.shared.js";
+import { iosSkin } from "./dialog.styles.js";
+
+// iOS (HIG alert) Dialog. Metro resolves this file on iOS; the docs import it for preview.
+export const Dialog = createDialog(iosSkin);
+export type { DialogProps } from "./dialog.shared.js";