@olympusoss/canvas 4.0.0 → 5.0.0

package/src/organisms/stepper/stepper.shared.tsx

@@ -0,0 +1,158 @@
+import { type DimensionValue } from "react-native";
+import { View, Pressable, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import * as s from "./stepper.styles.js";
+import { type State, type StepperSkin } from "./stepper.styles.js";
+
+// Shared Stepper shell. The structure (the numbered/check circles joined by
+// connectors, plus the vertical and progress-bar layouts), the layout
+// precedence, the per-step state derivation, the press handlers, and the
+// accessibility all live here once; a platform file supplies only its skin (the
+// circle/connector colors, the connector cap, the current-step emphasis, and
+// the press feedback) and calls createStepper.
+//
+// Boolean-prop API: layout is a single axis with `progress` and `vertical`
+// opting out of the default horizontal layout (first-match precedence,
+// mirroring Divider). `progress` beats `vertical` beats the horizontal default.
+
+export interface Step {
+  label: string;
+  description?: string;
+}
+
+export interface StepperProps {
+  /** Ordered steps to render. Each is a label with an optional one-line note. */
+  steps: Step[];
+  /** Index of the active step. Earlier steps read completed, later ones muted. */
+  current: number;
+  // Layout (pick one; default is horizontal).
+  vertical?: boolean;
+  /** Render a labeled percentage progress bar instead of discrete steps. */
+  progress?: boolean;
+  /** Progress mode only: filled fraction, 0-100 (clamped). Defaults to 0. */
+  value?: number;
+  /** Progress mode only: caption shown left of the percentage. */
+  label?: string;
+  /** When set, each step circle is pressable, reporting the step index. */
+  onStepPress?: (index: number) => void;
+  /** Escape hatch for layout/positioning composition (width, margins). */
+  style?: StyleProp<ViewStyle>;
+}
+
+type Layout = "horizontal" | "vertical" | "progress";
+
+// First match wins when more than one layout flag is passed.
+function layoutOf(p: StepperProps): Layout {
+  if (p.progress) return "progress";
+  if (p.vertical) return "vertical";
+  return "horizontal";
+}
+
+// Each step's visual state derives from its index relative to `current`.
+function stateOf(index: number, current: number): State {
+  if (index < current) return "completed";
+  if (index === current) return "current";
+  return "upcoming";
+}
+
+/** Build a Stepper component from a platform skin. */
+export function createStepper(skin: StepperSkin) {
+  // The numbered/check disc. Pressable (and so opacity-dim / ripple) only when an
+  // onStepPress handler is supplied; otherwise a plain View.
+  function Circle({ index, state, onPress }: { index: number; state: State; onPress?: () => void }) {
+    const { tokens } = useTheme();
+    const glyph = (
+      <Text style={[s.glyphBase, skin.glyphState(tokens, state)]}>
+        {state === "completed" ? "✓" : String(index + 1)}
+      </Text>
+    );
+    if (onPress) {
+      const ripple = skin.ripple ? skin.ripple(tokens, state) : undefined;
+      return (
+        <Pressable
+          style={({ pressed }) => [
+            s.circleBase,
+            skin.circleState(tokens, state),
+            skin.pressedOpacity != null && pressed ? { opacity: skin.pressedOpacity } : null,
+          ]}
+          android_ripple={ripple}
+          onPress={onPress}
+          accessibilityRole="button"
+        >
+          {glyph}
+        </Pressable>
+      );
+    }
+    return <View style={[s.circleBase, skin.circleState(tokens, state)]}>{glyph}</View>;
+  }
+
+  return function Stepper(props: StepperProps) {
+    const { steps, current, value, label, onStepPress, style } = props;
+    const { tokens } = useTheme();
+    const layout = layoutOf(props);
+
+    if (layout === "progress") {
+      const pct = Math.max(0, Math.min(100, Math.round(value ?? 0)));
+      return (
+        <View style={[s.fullWidth, style]}>
+          <View style={s.progressHeader}>
+            <Text style={skin.progressCaption(tokens)}>{label ?? "Setup progress"}</Text>
+            <Text style={skin.progressPercent(tokens)}>{pct}%</Text>
+          </View>
+          <View style={skin.progressTrack(tokens)}>
+            <View style={[skin.progressFill(tokens), { width: `${pct}%` as DimensionValue }]} />
+          </View>
+        </View>
+      );
+    }
+
+    if (layout === "vertical") {
+      return (
+        <View style={[s.fullWidth, style]}>
+          {steps.map((step, i) => {
+            const state = stateOf(i, current);
+            const isLast = i === steps.length - 1;
+            return (
+              <View key={i} style={s.verticalRow}>
+                <View style={s.verticalRail}>
+                  <Circle index={i} state={state} onPress={onStepPress ? () => onStepPress(i) : undefined} />
+                  {!isLast ? (
+                    <View style={[s.verticalConnector, skin.connector(tokens, state === "completed")]} />
+                  ) : null}
+                </View>
+                <View style={[s.flex1, !isLast ? s.verticalContentSpacing : null]}>
+                  <Text style={[s.labelBase, skin.labelState(tokens, state)]}>{step.label}</Text>
+                  {step.description != null ? (
+                    <Text style={skin.verticalDescription(tokens)}>{step.description}</Text>
+                  ) : null}
+                </View>
+              </View>
+            );
+          })}
+        </View>
+      );
+    }
+
+    // Horizontal: a row of circle + label columns, joined by flex-filling rules.
+    return (
+      <View style={[s.horizontalRow, style]}>
+        {steps.map((step, i) => {
+          const state = stateOf(i, current);
+          const isLast = i === steps.length - 1;
+          return (
+            <View key={i} style={[s.horizontalRow, !isLast ? s.flex1 : null]}>
+              <View style={s.horizontalColumn}>
+                <Circle index={i} state={state} onPress={onStepPress ? () => onStepPress(i) : undefined} />
+                <Text style={[s.labelBaseXs, skin.labelState(tokens, state)]}>{step.label}</Text>
+              </View>
+              {!isLast ? (
+                // The connector after a step is "filled" once that step is
+                // completed (i.e. the next step has been reached).
+                <View style={[s.horizontalConnector, skin.connector(tokens, i < current)]} />
+              ) : null}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+}

package/src/organisms/stepper/stepper.styles.ts

@@ -0,0 +1,280 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, alpha } from "../../style/index.js";
+
+// Co-located Stepper skins, one per platform. The Stepper is a LIGHT treatment:
+// the same multi-step progress STRUCTURE on every platform (numbered/check
+// circles joined by connectors, plus the vertical and progress-bar layouts),
+// with only small native touches per OS. The BRAND survives everywhere (the
+// indigo `primary` token and the semantic tokens, never a platform default);
+// only the indicator shape, the connector cap, the current-step emphasis, and
+// the press feedback change per OS:
+//   iOS (HIG): circular step indicators with ROUNDED connector caps; completed =
+//     filled `primary`; current = a `primary` ring on a transparent fill (a
+//     subtle inner ring via a 1.5px `ring`-token halo); press = opacity dim.
+//   Android (M3): step indicators with FLAT (square-capped) connectors; completed
+//     = filled `primary`; current = `primary` ring; press = android_ripple on
+//     interactive step circles.
+//   Web: the established Canvas look (lifted verbatim from the original file).
+//
+// The State axis (completed / current / upcoming) maps each colored part to a
+// token set. Layout-only fragments are shared static objects (below); anything
+// reading a color is a function of the active tokens.
+
+export type State = "completed" | "current" | "upcoming";
+
+// =============================================================================
+// Shared layout fragments (color-free; identical across platforms).
+// =============================================================================
+
+// flex-1 (grow + shrink, zero basis) shared by connectors and the columns that
+// fill the remaining row width.
+export const flex1: ViewStyle = { flexGrow: 1, flexShrink: 1, flexBasis: "0%" };
+
+// h-8 w-8 shrink-0 flex-row items-center justify-center rounded-full border-2
+export const circleBase: ViewStyle = {
+  height: 32,
+  width: 32,
+  flexShrink: 0,
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 9999,
+  borderWidth: 2,
+};
+
+// text-sm font-medium (the check / number inside the circle).
+export const glyphBase: TextStyle = { fontSize: 14, lineHeight: 20, fontWeight: "500" };
+
+// text-sm font-medium (vertical layout label).
+export const labelBase: TextStyle = { fontSize: 14, lineHeight: 20, fontWeight: "500" };
+
+// text-xs font-medium (horizontal layout label), colored by labelState.
+export const labelBaseXs: TextStyle = { fontSize: 12, lineHeight: 16, fontWeight: "500" };
+
+// w-full
+export const fullWidth: ViewStyle = { width: "100%" };
+
+// mb-1.5 flex-row items-center justify-between
+export const progressHeader: ViewStyle = {
+  marginBottom: 6,
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+};
+
+// flex-row gap-3 (the row pairing the rail with the content column).
+export const verticalRow: ViewStyle = { flexDirection: "row", gap: 12 };
+
+// items-center (the left rail: circle stacked over its connector).
+export const verticalRail: ViewStyle = { alignItems: "center" };
+
+// my-1 w-px flex-1 (the vertical connector) — color/cap come from the skin.
+export const verticalConnector: ViewStyle = {
+  marginVertical: 4,
+  width: 1,
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: "0%",
+};
+
+// pb-6 (bottom inset on a content column that has a step after it).
+export const verticalContentSpacing: ViewStyle = { paddingBottom: 24 };
+
+// flex-row items-start (the outer row and each step item).
+export const horizontalRow: ViewStyle = { flexDirection: "row", alignItems: "flex-start" };
+
+// items-center gap-1.5 (the circle + label column).
+export const horizontalColumn: ViewStyle = { alignItems: "center", gap: 6 };
+
+// mx-2 mt-4 h-px flex-1 (the horizontal connector) — color/cap come from the skin.
+export const horizontalConnector: ViewStyle = {
+  marginHorizontal: 8,
+  marginTop: 16,
+  height: 1,
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: "0%",
+};
+
+// =============================================================================
+// The skin contract: only the colored, platform-varying parts.
+// =============================================================================
+
+export interface StepperSkin {
+  /** Fill + border of the numbered/check circle for a given step state. */
+  circleState: (t: ColorTokens, state: State) => ViewStyle;
+  /** Color of the glyph (check / number) inside the circle. */
+  glyphState: (t: ColorTokens, state: State) => TextStyle;
+  /** Color of the step label for a given state (shared across platforms). */
+  labelState: (t: ColorTokens, state: State) => TextStyle;
+  /** Background + line cap of a connector; `done` fills it primary. */
+  connector: (t: ColorTokens, done: boolean) => ViewStyle;
+  /** Caption left of the percentage in the progress layout. */
+  progressCaption: (t: ColorTokens) => TextStyle;
+  /** The percentage label in the progress layout. */
+  progressPercent: (t: ColorTokens) => TextStyle;
+  /** The progress track (unfilled). */
+  progressTrack: (t: ColorTokens) => ViewStyle;
+  /** The filled portion of the progress track (width set inline as %). */
+  progressFill: (t: ColorTokens) => ViewStyle;
+  /** The optional description line in the vertical layout. */
+  verticalDescription: (t: ColorTokens) => TextStyle;
+  /** iOS/web dim the circle on press; Android uses a ripple (null here). */
+  pressedOpacity: number | null;
+  /** Android ripple over a pressable circle; null on iOS/web. */
+  ripple: ((t: ColorTokens, state: State) => { color: string; borderless: boolean }) | null;
+}
+
+// --- shared brand mapping (label colors are identical across platforms) ------
+
+// Upcoming steps drop to the muted foreground; completed/current stay foreground.
+function labelState(t: ColorTokens, state: State): TextStyle {
+  switch (state) {
+    case "completed": return { color: t.foreground };
+    case "current": return { color: t.foreground };
+    case "upcoming": return { color: t["muted-foreground"] };
+  }
+}
+
+// =============================================================================
+// Web: the established Canvas look (lifted verbatim from the original file).
+// =============================================================================
+
+export const webSkin: StepperSkin = {
+  // Completed fills primary; current is outlined in primary on a transparent fill;
+  // upcoming sits on the muted token behind a border-toned ring.
+  circleState(t, state) {
+    switch (state) {
+      case "completed": return { borderColor: t.primary, backgroundColor: t.primary };
+      case "current": return { borderColor: t.primary, backgroundColor: "transparent" };
+      case "upcoming": return { borderColor: t.border, backgroundColor: t.muted };
+    }
+  },
+  glyphState(t, state) {
+    switch (state) {
+      case "completed": return { color: t["primary-foreground"] };
+      case "current": return { color: t.primary };
+      case "upcoming": return { color: t["muted-foreground"] };
+    }
+  },
+  labelState,
+  // A connector fills primary once the step it leads out of is completed, else it
+  // tracks the border token. Square caps (web rules are plain rects).
+  connector(t, done) {
+    return { backgroundColor: done ? t.primary : t.border };
+  },
+  progressCaption(t) {
+    return { fontSize: 12, lineHeight: 16, fontWeight: "500", color: t.foreground };
+  },
+  progressPercent(t) {
+    return { fontSize: 12, lineHeight: 16, color: t["muted-foreground"] };
+  },
+  progressTrack(t) {
+    return { height: 6, overflow: "hidden", borderRadius: 9999, backgroundColor: t.muted };
+  },
+  progressFill(t) {
+    return { height: "100%", borderRadius: 9999, backgroundColor: t.primary };
+  },
+  verticalDescription(t) {
+    return { fontSize: 12, lineHeight: 16, color: t["muted-foreground"] };
+  },
+  pressedOpacity: 0.9,
+  ripple: null,
+};
+
+// =============================================================================
+// iOS (HIG): circular indicators, rounded connector caps, primary ring current.
+// =============================================================================
+
+export const iosSkin: StepperSkin = {
+  circleState(t, state) {
+    switch (state) {
+      // Completed reads as a solid filled `primary` disc.
+      case "completed": return { borderColor: t.primary, backgroundColor: t.primary };
+      // Current = a clean `primary` ring on a transparent fill (no muted backing,
+      // so it reads as an open ring the way iOS step dots do).
+      case "current": return { borderColor: t.primary, backgroundColor: "transparent" };
+      // Upcoming = a soft muted disc behind a border-toned ring.
+      case "upcoming": return { borderColor: t.border, backgroundColor: t.muted };
+    }
+  },
+  glyphState(t, state) {
+    switch (state) {
+      case "completed": return { color: t["primary-foreground"] };
+      case "current": return { color: t.primary };
+      case "upcoming": return { color: t["muted-foreground"] };
+    }
+  },
+  labelState,
+  // iOS connectors get rounded caps so the rule reads as a soft rounded line.
+  connector(t, done) {
+    return { backgroundColor: done ? t.primary : t.border, borderRadius: 9999 };
+  },
+  progressCaption(t) {
+    return { fontSize: 13, lineHeight: 18, fontWeight: "600", color: t.foreground };
+  },
+  progressPercent(t) {
+    return { fontSize: 13, lineHeight: 18, color: t["muted-foreground"] };
+  },
+  progressTrack(t) {
+    return { height: 6, overflow: "hidden", borderRadius: 9999, backgroundColor: t.muted };
+  },
+  progressFill(t) {
+    return { height: "100%", borderRadius: 9999, backgroundColor: t.primary };
+  },
+  verticalDescription(t) {
+    return { fontSize: 13, lineHeight: 18, color: t["muted-foreground"] };
+  },
+  // HIG press = opacity dim.
+  pressedOpacity: 0.8,
+  ripple: null,
+};
+
+// =============================================================================
+// Android (M3): flat connector caps, filled-primary complete, primary ring current.
+// =============================================================================
+
+export const androidSkin: StepperSkin = {
+  circleState(t, state) {
+    switch (state) {
+      // Completed = filled primary.
+      case "completed": return { borderColor: t.primary, backgroundColor: t.primary };
+      // Current = a primary ring; M3 keeps a faint tonal backing so the active
+      // indicator reads against the surface (secondaryContainer ≈ alpha(primary,.12)).
+      case "current": return { borderColor: t.primary, backgroundColor: alpha(t.primary, 0.12) };
+      // Upcoming = a muted disc behind a border-toned ring.
+      case "upcoming": return { borderColor: t.border, backgroundColor: t.muted };
+    }
+  },
+  glyphState(t, state) {
+    switch (state) {
+      case "completed": return { color: t["primary-foreground"] };
+      case "current": return { color: t.primary };
+      case "upcoming": return { color: t["muted-foreground"] };
+    }
+  },
+  labelState,
+  // M3 connectors are flat (square caps) — explicit radius 0 so the rule reads
+  // as a crisp Material divider, not a rounded line.
+  connector(t, done) {
+    return { backgroundColor: done ? t.primary : t.border, borderRadius: 0 };
+  },
+  progressCaption(t) {
+    return { fontSize: 12, lineHeight: 16, fontWeight: "500", color: t.foreground };
+  },
+  progressPercent(t) {
+    return { fontSize: 12, lineHeight: 16, color: t["muted-foreground"] };
+  },
+  progressTrack(t) {
+    return { height: 4, overflow: "hidden", borderRadius: 9999, backgroundColor: t.muted };
+  },
+  progressFill(t) {
+    return { height: "100%", borderRadius: 9999, backgroundColor: t.primary };
+  },
+  verticalDescription(t) {
+    return { fontSize: 12, lineHeight: 16, color: t["muted-foreground"] };
+  },
+  // M3 press = android_ripple over the interactive circle.
+  pressedOpacity: null,
+  ripple: (t) => ({ color: alpha(t.primary, 0.12), borderless: false }),
+};

package/src/organisms/stepper/stepper.tsx

@@ -0,0 +1,6 @@
+import { createStepper } from "./stepper.shared.js";
+import { webSkin } from "./stepper.styles.js";
+
+// Web Stepper (the base; Metro falls back to it on native, web bundlers resolve it).
+export const Stepper = createStepper(webSkin);
+export type { Step, StepperProps } from "./stepper.shared.js";

package/src/organisms/tabs/tabs.android.tsx

@@ -0,0 +1,6 @@
+import { createTabs } from "./tabs.shared.js";
+import { androidSkin } from "./tabs.styles.js";
+
+// Material 3 (underline tabs) Tabs. Metro resolves this file on Android; the docs import it for preview.
+export const Tabs = createTabs(androidSkin);
+export type { TabsProps, TabItem } from "./tabs.shared.js";

package/src/organisms/tabs/tabs.ios.tsx

@@ -0,0 +1,6 @@
+import { createTabs } from "./tabs.shared.js";
+import { iosSkin } from "./tabs.styles.js";
+
+// iOS (HIG segmented tab strip) Tabs. Metro resolves this file on iOS; the docs import it for preview.
+export const Tabs = createTabs(iosSkin);
+export type { TabsProps, TabItem } from "./tabs.shared.js";

package/src/organisms/tabs/tabs.md

@@ -0,0 +1,127 @@
+# Tabs
+
+Underline, pill, vertical, with badges.
+
+## Usage
+
+```tsx
+<Tabs
+  tabs={[
+    "General",
+    "Security",
+    "Notifications",
+    "Billing",
+    "Integrations"
+  ]}
+  active={0}
+/>
+```
+
+## Variants
+
+### Variant - pill
+
+```tsx
+<Tabs pills tabs={["All", "Active", "Archived", "Deleted"]} active={0} />
+```
+
+### Variant - vertical
+
+```tsx
+<Tabs
+  vertical
+  tabs={["General", "Security", "Notifications", "API Keys", "Billing"]}
+  active={0}
+/>
+```
+
+### Badge counts
+
+```tsx
+<Tabs
+  tabs={[
+    { label: "All", badge: "142" },
+    { label: "Active", badge: "89" },
+    { label: "Pending", badge: "12" },
+    { label: "Archived", badge: "53" }
+  ]}
+  active={0}
+/>
+```
+
+## Do & Don't
+
+### Underline
+
+**Do** — Underline and foreground-color only the active tab; leave the rest muted with no rule.
+
+```tsx
+<Tabs tabs={["Overview", "Activity", "Settings"]} active={0} />
+```
+
+**Don't** — Underlining every tab erases the active indicator: there is no way to tell which view is current.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", borderBottomWidth: 1, borderColor: tokens.border, alignSelf: "flex-start" }}>
+  <Pressable style={({ pressed }) => [{ flexDirection: "row", alignItems: "center", justifyContent: "center", paddingHorizontal: 16, paddingVertical: 10 }, pressed ? { opacity: 0.9 } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Overview</Text>
+    <View style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 2, borderRadius: 9999, backgroundColor: tokens.primary }} />
+  </Pressable>
+  <Pressable style={({ pressed }) => [{ flexDirection: "row", alignItems: "center", justifyContent: "center", paddingHorizontal: 16, paddingVertical: 10 }, pressed ? { opacity: 0.9 } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Activity</Text>
+    <View style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 2, borderRadius: 9999, backgroundColor: tokens.primary }} />
+  </Pressable>
+  <Pressable style={({ pressed }) => [{ flexDirection: "row", alignItems: "center", justifyContent: "center", paddingHorizontal: 16, paddingVertical: 10 }, pressed ? { opacity: 0.9 } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Settings</Text>
+    <View style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 2, borderRadius: 9999, backgroundColor: tokens.primary }} />
+  </Pressable>
+</View>
+```
+
+### Pill
+
+**Do** — Exactly one pill gets the elevated background; the rest sit flat on the muted track.
+
+```tsx
+<Tabs tabs={["All", "Active", "Archived"]} active={0} pills />
+```
+
+**Don't** — Giving every pill the raised background makes the group read as three buttons, not one selection.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 4, alignSelf: "flex-start", borderRadius: 8, backgroundColor: tokens.muted, padding: 4 }}>
+  <Pressable style={({ pressed }) => [{ flexDirection: "row", alignItems: "center", justifyContent: "center", borderRadius: 6, backgroundColor: tokens.background, ...shadow("sm"), paddingHorizontal: 12, paddingVertical: 6 }, pressed ? { opacity: 0.9 } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>All</Text>
+  </Pressable>
+  <Pressable style={({ pressed }) => [{ flexDirection: "row", alignItems: "center", justifyContent: "center", borderRadius: 6, backgroundColor: tokens.background, ...shadow("sm"), paddingHorizontal: 12, paddingVertical: 6 }, pressed ? { opacity: 0.9 } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Active</Text>
+  </Pressable>
+  <Pressable style={({ pressed }) => [{ flexDirection: "row", alignItems: "center", justifyContent: "center", borderRadius: 6, backgroundColor: tokens.background, ...shadow("sm"), paddingHorizontal: 12, paddingVertical: 6 }, pressed ? { opacity: 0.9 } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Archived</Text>
+  </Pressable>
+</View>
+```
+
+### Vertical
+
+**Do** — Fill the active rail item with the accent background so the selected pane is unmistakable.
+
+```tsx
+<Tabs tabs={["General", "Security", "Notifications"]} active={0} vertical />
+```
+
+**Don't** — With no filled active item the rail collapses into a plain link list and loses its current selection.
+
+```tsx
+<View style={{ flexDirection: "column", alignItems: "stretch", gap: 4, width: 180 }}>
+  <Pressable style={({ pressed }) => [{ width: "100%", flexDirection: "row", alignItems: "center", borderRadius: 6, backgroundColor: "transparent", paddingHorizontal: 12, paddingVertical: 8 }, pressed ? { opacity: 0.9 } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens["muted-foreground"] }}>General</Text>
+  </Pressable>
+  <Pressable style={({ pressed }) => [{ width: "100%", flexDirection: "row", alignItems: "center", borderRadius: 6, backgroundColor: "transparent", paddingHorizontal: 12, paddingVertical: 8 }, pressed ? { opacity: 0.9 } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens["muted-foreground"] }}>Security</Text>
+  </Pressable>
+  <Pressable style={({ pressed }) => [{ width: "100%", flexDirection: "row", alignItems: "center", borderRadius: 6, backgroundColor: "transparent", paddingHorizontal: 12, paddingVertical: 8 }, pressed ? { opacity: 0.9 } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens["muted-foreground"] }}>Notifications</Text>
+  </Pressable>
+</View>
+```