@olympusoss/canvas 4.0.0 → 5.0.0

package/src/organisms/dialog/dialog.styles.ts

@@ -0,0 +1,272 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, shadow, alpha } from "../../style/index.js";
+
+// Co-located Dialog skins, one per platform, all driven by the brand tokens
+// (passed in from useTheme so they follow light/dark and read as glass when
+// tokens.popover is swapped translucent at the theming level). The BRAND
+// survives on every platform (the indigo `primary` confirm action, the
+// `destructive` red for an irreversible confirm); only the native SHAPE, sizing,
+// title alignment, body type, footer layout, and backdrop dimming change per OS:
+//   iOS (iOS 27 / Liquid Glass alert): a centered card (28 radius, `popover`
+//     fill, NO border, soft lg shadow) over a ~0.30 black backdrop; a LEFT-aligned
+//     ~20pt/700 title, a ~15pt muted LEFT body, and a side-by-side row of CAPSULE
+//     action buttons (a gray `secondary` Cancel capsule + a `primary` indigo
+//     Confirm capsule; a destructive confirm is a gray capsule with `destructive`
+//     red text), NO hairline dividers; press = opacity dim (~0.8).
+//   Android (Material 3 basic dialog): a card (28 radius, `popover` elevated
+//     surface, shadow lg) over a ~0.32 black scrim; a LEFT-aligned ~22pt title,
+//     a 14sp body, and TEXT-button actions (no fill) bottom-RIGHT in a row
+//     (Cancel then Confirm) in brand-indigo text, an android_ripple on each, and
+//     NO dividers.
+//   Web: the established Canvas look (the current dialog, lifted verbatim) — a
+//     bordered card (8 radius, `border`, `popover` fill, xl shadow) over a 0.50
+//     black backdrop; a 16pt/600 left title, a 14pt muted body, and a
+//     right-aligned action row of an outline Cancel + a primary/destructive
+//     Confirm Button.
+
+export type Size = "xs" | "small" | "medium" | "default" | "large" | "wide";
+
+// The dialog card's max width per size, narrowest to widest. The default sits
+// one step wider than `medium`, roomy enough for a short form; `xs`/`small`
+// tighten the panel for a terse message, `large`/`wide` open it up for a longer
+// form. Pixel widths mirror Tailwind's max-w-xs..2xl scale.
+export const PANEL_MAX_WIDTH: Record<Size, number> = {
+  xs: 320,
+  small: 384,
+  medium: 448,
+  default: 512,
+  large: 576,
+  wide: 672,
+};
+
+// How the footer renders its actions. The web/Android footer is a horizontal
+// row of Buttons (web) / text buttons (Android); iOS renders a side-by-side row
+// of CAPSULE buttons (the iOS 27 alert: a gray Cancel capsule + a primary
+// Confirm capsule, no dividers). The shell reads this to pick the footer
+// structure.
+export type FooterKind = "buttons" | "capsules";
+
+// The contract a platform skin fulfills. The shell renders the backdrop, the
+// centered card (shape/fill/border/shadow from the skin), the title, the body,
+// the optional data-driven form, and the footer; the skin maps each piece onto
+// the active platform's look. The footer kind picks between a Button row
+// (web/Android) and iOS's side-by-side capsule row.
+export interface DialogSkin {
+  /** The dim backdrop behind the card (full black at the per-platform opacity). */
+  backdrop: (t: ColorTokens) => ViewStyle;
+  /** The card layout box: shape, fill, border (or lack of), shadow, padding. The
+   *  shell supplies the per-size maxWidth inline. */
+  card: (t: ColorTokens) => ViewStyle;
+  /** The title type: size, weight, alignment, color. */
+  title: (t: ColorTokens) => TextStyle;
+  /** The body/description type: size, color, alignment. */
+  body: (t: ColorTokens) => TextStyle;
+  /** Whether the footer is a Button row or iOS's side-by-side capsule row. */
+  footerKind: FooterKind;
+  /** The footer container (the action row). */
+  footer: (t: ColorTokens) => ViewStyle;
+  // --- capsule (iOS) footer pieces; null on the Button-row platforms ---------
+  /** A single capsule action button's box (shape/padding); each capsule grows to
+   *  share the row evenly. `confirm` true for the primary/confirm capsule. */
+  capsule: ((t: ColorTokens, confirm: boolean, destructive: boolean) => ViewStyle) | null;
+  /** The label inside a capsule; `confirm` true for the primary confirm action
+   *  (drawn on the indigo fill), `destructive` true for an irreversible confirm
+   *  (red text on a gray capsule). */
+  capsuleLabel: ((t: ColorTokens, confirm: boolean, destructive: boolean) => TextStyle) | null;
+  /** Opacity applied to a pressed capsule (iOS dims; null elsewhere). */
+  capsulePressedOpacity: number | null;
+  // --- text-button (Android) footer pieces; null elsewhere -------------------
+  /** An Android text-button touch target (no fill, brand-indigo label). */
+  textButton: ViewStyle | null;
+  /** The Android text-button label; `destructive` reds an irreversible confirm. */
+  textButtonLabel: ((t: ColorTokens, destructive: boolean) => TextStyle) | null;
+  /** The Android ripple over a text button; null on the other platforms. */
+  textButtonRipple: ((t: ColorTokens) => { color: string; borderless: boolean }) | null;
+  // --- data-driven body form (Amount + Reason) -------------------------------
+  /** Wrapper above the form fields. */
+  formBody: ViewStyle;
+  /** A field label above an input. */
+  fieldLabel: (t: ColorTokens) => TextStyle;
+  /** Extra top inset for the second field label. */
+  fieldLabelGap: ViewStyle;
+  /** The Amount row (currency glyph + input). */
+  amountRow: ViewStyle;
+  /** The leading currency glyph. */
+  currency: (t: ColorTokens) => TextStyle;
+  /** The Amount input grows to fill the row. */
+  amountInput: ViewStyle;
+}
+
+// --- outer shell (identical across platforms) -------------------------------
+
+// The outermost wrapper shrinks to its content so the inline trigger sits flush.
+export const root: ViewStyle = { alignSelf: "flex-start" };
+
+// Inset between the trigger button and the backdrop when a trigger is rendered.
+export const backdropTriggerGap: ViewStyle = { marginTop: 12 };
+
+// The contained backdrop sizing (centered, with presence in the docs preview via
+// an explicit minHeight). The per-platform fill/radius come from the skin.
+export const backdropLayout: ViewStyle = {
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 32,
+  minHeight: 220,
+};
+
+// The card layout box (width up to its per-size cap). Shape/fill/shadow come
+// from the skin; this owns the box-model that every platform shares.
+export const cardLayout: ViewStyle = { width: "100%", padding: 24 };
+
+// Per-size max width cap.
+export function cardWidth(size: Size): ViewStyle {
+  return { maxWidth: PANEL_MAX_WIDTH[size] };
+}
+
+// ---------- Web: the established Canvas look (lifted verbatim) ----------
+// The current dialog: a card (rounded-lg border bg-popover p-6 shadow-xl) over a
+// bg-black/50 backdrop; a 16/24 600 title, a 14/20 muted-foreground body, and a
+// right-aligned action row (gap-2, mt-6) of an outline Cancel + a primary/
+// destructive Confirm Button.
+export const webSkin: DialogSkin = {
+  backdrop: () => ({ borderRadius: 8, backgroundColor: alpha("#000000", 0.5) }),
+  card: (t) => ({
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: t.border,
+    backgroundColor: t.popover,
+    ...shadow("xl"),
+  }),
+  title: (t) => ({ fontSize: 16, lineHeight: 24, fontWeight: "600", color: t["popover-foreground"] }),
+  body: (t) => ({ fontSize: 14, lineHeight: 20, color: t["muted-foreground"], marginTop: 8 }),
+  footerKind: "buttons",
+  footer: () => ({ flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 24 }),
+  capsule: null,
+  capsuleLabel: null,
+  capsulePressedOpacity: null,
+  textButton: null,
+  textButtonLabel: null,
+  textButtonRipple: null,
+  formBody: { marginTop: 20 },
+  fieldLabel: (t) => ({ fontSize: 14, lineHeight: 20, fontWeight: "500", color: t.foreground, marginBottom: 6 }),
+  fieldLabelGap: { marginTop: 16 },
+  amountRow: { flexDirection: "row", alignItems: "center" },
+  currency: (t) => ({ fontSize: 14, lineHeight: 20, color: t["muted-foreground"], marginRight: 8 }),
+  amountInput: { flexGrow: 1, flexShrink: 1, flexBasis: "0%" },
+};
+
+// ---------- iOS (iOS 27 alert): rounded card, no border, side-by-side capsules ----------
+// iOS 27 (iOS 26+ / Liquid Glass) alert: a centered card (28pt radius) over the
+// `popover` fill with NO border and a soft shadow, on a ~0.30 black backdrop; a
+// LEFT-aligned 20pt/700 title, a 15pt muted LEFT body, and a side-by-side row of
+// CAPSULE action buttons — a gray `secondary` Cancel capsule + a `primary`
+// indigo Confirm capsule, with NO hairline dividers. A destructive confirm keeps
+// the gray `secondary` capsule but draws its label in the `destructive` red. Each
+// capsule shares the row evenly; a pressed capsule dims (no ripple) at 0.8.
+const IOS_RADIUS = 28;
+const IOS_CAPSULE_RADIUS = 22;
+export const iosSkin: DialogSkin = {
+  backdrop: () => ({ borderRadius: 8, backgroundColor: alpha("#000000", 0.3) }),
+  card: (t) => ({
+    borderRadius: IOS_RADIUS,
+    backgroundColor: t.popover,
+    ...shadow("lg"),
+  }),
+  title: (t) => ({
+    fontSize: 20,
+    lineHeight: 25,
+    fontWeight: "700",
+    color: t["popover-foreground"],
+    textAlign: "left",
+  }),
+  body: (t) => ({
+    fontSize: 15,
+    lineHeight: 20,
+    color: t["muted-foreground"],
+    textAlign: "left",
+    marginTop: 8,
+  }),
+  footerKind: "capsules",
+  footer: () => ({ flexDirection: "row", gap: 12, marginTop: 20 }),
+  // A capsule sized to share the row evenly. The Confirm capsule fills with the
+  // indigo `primary`; Cancel and a destructive Confirm both fill with the gray
+  // `secondary` surface (the destructive variant only reds its label).
+  capsule: (t, confirm, destructive) => ({
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+    minHeight: 50,
+    borderRadius: IOS_CAPSULE_RADIUS,
+    backgroundColor: confirm && !destructive ? t.primary : t.secondary,
+  }),
+  capsuleLabel: (t, confirm, destructive) => ({
+    fontSize: 17,
+    lineHeight: 22,
+    fontWeight: "600",
+    color: destructive
+      ? t.destructive
+      : confirm
+        ? t["primary-foreground"]
+        : t["secondary-foreground"],
+    textAlign: "center",
+  }),
+  capsulePressedOpacity: 0.8,
+  textButton: null,
+  textButtonLabel: null,
+  textButtonRipple: null,
+  formBody: { marginTop: 16 },
+  fieldLabel: (t) => ({ fontSize: 13, lineHeight: 18, fontWeight: "500", color: t.foreground, marginBottom: 6 }),
+  fieldLabelGap: { marginTop: 14 },
+  amountRow: { flexDirection: "row", alignItems: "center" },
+  currency: (t) => ({ fontSize: 15, lineHeight: 20, color: t["muted-foreground"], marginRight: 8 }),
+  amountInput: { flexGrow: 1, flexShrink: 1, flexBasis: "0%" },
+};
+
+// ---------- Android (Material 3 basic dialog): 28 radius, left title, text-button row ----------
+// M3 basic dialog: a card (28dp radius) over the `popover` ELEVATED surface (soft
+// shadow) on a ~0.32 black scrim; a LEFT-aligned ~22sp title, a 14sp body, and
+// TEXT-button actions (no fill) bottom-RIGHT in a row — Cancel then Confirm — in
+// brand-indigo text, an android_ripple on each, and NO dividers.
+const ANDROID_RADIUS = 28;
+export const androidSkin: DialogSkin = {
+  backdrop: () => ({ borderRadius: 8, backgroundColor: alpha("#000000", 0.32) }),
+  card: (t) => ({
+    borderRadius: ANDROID_RADIUS,
+    backgroundColor: t.popover,
+    ...shadow("lg"),
+  }),
+  title: (t) => ({ fontSize: 22, lineHeight: 28, fontWeight: "500", color: t["popover-foreground"] }),
+  body: (t) => ({ fontSize: 14, lineHeight: 20, color: t["muted-foreground"], marginTop: 12 }),
+  footerKind: "buttons",
+  footer: () => ({ flexDirection: "row", justifyContent: "flex-end", alignItems: "center", gap: 8, marginTop: 24 }),
+  capsule: null,
+  capsuleLabel: null,
+  capsulePressedOpacity: null,
+  // A flat text-button: no fill, comfortable touch target, rounded for the ripple.
+  textButton: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 20,
+    minHeight: 40,
+  },
+  textButtonLabel: (t, destructive) => ({
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "500",
+    letterSpacing: 0.1,
+    color: destructive ? t.destructive : t.primary,
+  }),
+  textButtonRipple: (t) => ({ color: alpha(t.primary, 0.12), borderless: false }),
+  formBody: { marginTop: 20 },
+  fieldLabel: (t) => ({ fontSize: 14, lineHeight: 20, fontWeight: "500", color: t.foreground, marginBottom: 6 }),
+  fieldLabelGap: { marginTop: 16 },
+  amountRow: { flexDirection: "row", alignItems: "center" },
+  currency: (t) => ({ fontSize: 14, lineHeight: 20, color: t["muted-foreground"], marginRight: 8 }),
+  amountInput: { flexGrow: 1, flexShrink: 1, flexBasis: "0%" },
+};

package/src/organisms/dialog/dialog.tsx

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

package/src/organisms/filter-panel/filter-panel.md

@@ -0,0 +1,116 @@
+# Filter Panels
+
+Sidebar filter rail with chip pills for active filters.
+
+## Usage
+
+```tsx
+<FilterPanel
+  bordered
+  activeCount={2}
+  groups={[
+    { title: "Status", options: [
+      { label: "Active", checked: true, count: "128" },
+      { label: "Pending", count: "12", checked: false },
+      { label: "Archived", count: "2", checked: false }
+    ] },
+    { title: "Schema", options: [
+      { label: "Default", checked: true, count: "96" },
+      { label: "Custom", count: "46", checked: false }
+    ] },
+    { title: "MFA", options: [
+      { label: "Enabled", count: "84", checked: false },
+      { label: "Disabled", count: "58", checked: false }
+    ] }
+  ]}
+/>
+```
+
+## Do & Don't
+
+### Sidebar
+
+**Do** — Give each chip a × so a single filter can be removed in place, and keep it in sync with the sidebar checkbox.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
+  <Pressable style={{ flexDirection: "row", alignItems: "center", alignSelf: "flex-start", gap: 4, borderRadius: 9999, backgroundColor: tokens.primary, paddingHorizontal: 10, paddingVertical: 4 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens["primary-foreground"] }}>Active</Text>
+    <Icon x primaryForeground size={12} />
+  </Pressable>
+  <Pressable style={{ flexDirection: "row", alignItems: "center", alignSelf: "flex-start", gap: 4, borderRadius: 9999, backgroundColor: tokens.primary, paddingHorizontal: 10, paddingVertical: 4 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens["primary-foreground"] }}>Default</Text>
+    <Icon x primaryForeground size={12} />
+  </Pressable>
+</View>
+```
+
+**Don't** — Active-filter chips with no remove affordance leave no way to clear one filter without hunting back through the sidebar.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
+  <View style={{ flexDirection: "row", alignItems: "center", alignSelf: "flex-start", borderRadius: 9999, backgroundColor: tokens.primary, paddingHorizontal: 10, paddingVertical: 4 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens["primary-foreground"] }}>Active</Text>
+  </View>
+  <View style={{ flexDirection: "row", alignItems: "center", alignSelf: "flex-start", borderRadius: 9999, backgroundColor: tokens.primary, paddingHorizontal: 10, paddingVertical: 4 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens["primary-foreground"] }}>Default</Text>
+  </View>
+</View>
+```
+
+### Inline
+
+**Do** — Surface two or three primary filters and tuck the rest behind "+ Add filter" so the bar stays one scannable row.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8 }}>
+  <Pressable style={{ height: 32, flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 6, backgroundColor: tokens.primary, paddingHorizontal: 12 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens["primary-foreground"] }}>Status</Text>
+    <Icon chevronDown primaryForeground size={12} />
+  </Pressable>
+  <Pressable style={{ height: 32, flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 6, borderWidth: 1, borderColor: tokens.input, backgroundColor: tokens.background, paddingHorizontal: 12 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens.foreground }}>Role</Text>
+    <Icon chevronDown size={12} />
+  </Pressable>
+  <Button ghost small style={{ color: tokens.primary }}>+ Add filter</Button>
+</View>
+```
+
+**Don't** — Eight inline dropdowns wrap into a wall of buttons, which defeats the compact bar; that volume of filtering belongs in the sidebar rail.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8 }}>
+  <Pressable style={{ height: 32, flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 6, borderWidth: 1, borderColor: tokens.input, backgroundColor: tokens.background, paddingHorizontal: 12 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens.foreground }}>Status</Text>
+    <Icon chevronDown size={12} />
+  </Pressable>
+  <Pressable style={{ height: 32, flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 6, borderWidth: 1, borderColor: tokens.input, backgroundColor: tokens.background, paddingHorizontal: 12 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens.foreground }}>Role</Text>
+    <Icon chevronDown size={12} />
+  </Pressable>
+  <Pressable style={{ height: 32, flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 6, borderWidth: 1, borderColor: tokens.input, backgroundColor: tokens.background, paddingHorizontal: 12 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens.foreground }}>Schema</Text>
+    <Icon chevronDown size={12} />
+  </Pressable>
+  <Pressable style={{ height: 32, flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 6, borderWidth: 1, borderColor: tokens.input, backgroundColor: tokens.background, paddingHorizontal: 12 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens.foreground }}>MFA</Text>
+    <Icon chevronDown size={12} />
+  </Pressable>
+  <Pressable style={{ height: 32, flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 6, borderWidth: 1, borderColor: tokens.input, backgroundColor: tokens.background, paddingHorizontal: 12 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens.foreground }}>Region</Text>
+    <Icon chevronDown size={12} />
+  </Pressable>
+  <Pressable style={{ height: 32, flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 6, borderWidth: 1, borderColor: tokens.input, backgroundColor: tokens.background, paddingHorizontal: 12 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens.foreground }}>Created</Text>
+    <Icon chevronDown size={12} />
+  </Pressable>
+  <Pressable style={{ height: 32, flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 6, borderWidth: 1, borderColor: tokens.input, backgroundColor: tokens.background, paddingHorizontal: 12 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens.foreground }}>Last seen</Text>
+    <Icon chevronDown size={12} />
+  </Pressable>
+  <Pressable style={{ height: 32, flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 6, borderWidth: 1, borderColor: tokens.input, backgroundColor: tokens.background, paddingHorizontal: 12 }}>
+    <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "500", color: tokens.foreground }}>Team</Text>
+    <Icon chevronDown size={12} />
+  </Pressable>
+</View>
+```

package/src/organisms/filter-panel/filter-panel.styles.ts

@@ -0,0 +1,83 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens } from "../../style/index.js";
+
+// Co-located FilterPanel styles. Layout-only fragments (the fixed panel width,
+// the header/group/row rows, the density gaps and paddings) are static objects;
+// the surface fill + border reads the active tokens (so `bordered` follows
+// light/dark and goes translucent under glass). Density (compact vs. base) is
+// resolved by the component and selects the matching padding/gap fragment.
+
+export type Density = "compact" | "base";
+
+// --- panel surface ----------------------------------------------------------
+
+// Fixed panel width (w-[280px]) and column layout, shared by both surfaces.
+export const panelBase: ViewStyle = { width: 280, flexDirection: "column" };
+
+// `bordered` wraps the panel as a rounded card: a border on the card fill. The
+// card token goes translucent under glass, so don't hardcode its hex.
+export function borderedSurface(tokens: ColorTokens): ViewStyle {
+  return { borderRadius: 8, borderWidth: 1, borderColor: tokens.border, backgroundColor: tokens.card };
+}
+
+// Panel inset per density (p-3 compact / p-4 base).
+export const panelPad: Record<Density, ViewStyle> = {
+  compact: { padding: 12 },
+  base: { padding: 16 },
+};
+
+// Vertical rhythm between the header and groups, and between groups
+// (gap-3 compact / gap-5 base).
+export const panelStack: Record<Density, ViewStyle> = {
+  compact: { gap: 12 },
+  base: { gap: 20 },
+};
+
+// Row spacing inside a group, and between a group's title and its options
+// (gap-1.5 compact / gap-2 base). Shared by the group column and its option list.
+export const groupGap: Record<Density, ViewStyle> = {
+  compact: { gap: 6 },
+  base: { gap: 8 },
+};
+
+// --- header -----------------------------------------------------------------
+
+// Header row: title cluster on the left, the Clear action on the right.
+export const headerRow: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+};
+
+// Title + active-count cluster (a row with a small gap).
+export const titleCluster: ViewStyle = { flexDirection: "row", alignItems: "center", gap: 8 };
+
+// "Filters" heading: small, semibold, on the foreground token.
+export function titleText(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, fontWeight: "600", color: tokens.foreground };
+}
+
+// --- groups -----------------------------------------------------------------
+
+// A group column (the title above its option list).
+export const groupColumn: ViewStyle = { flexDirection: "column" };
+
+// Group heading: extra-small, medium, uppercase, wide tracking, muted.
+export function groupTitle(tokens: ColorTokens): TextStyle {
+  return {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500",
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+    color: tokens["muted-foreground"],
+  };
+}
+
+// One option row: checkbox on the left, optional count badge on the right.
+export const optionRow: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 8,
+};

package/src/organisms/filter-panel/filter-panel.tsx

@@ -0,0 +1,91 @@
+import { View, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import { Badge } from "../../atoms/badge/badge.js";
+import { Button } from "../../atoms/button/button.js";
+import { Checkbox } from "../../atoms/checkbox/checkbox.js";
+import * as s from "./filter-panel.styles.js";
+
+export interface FilterOption {
+  /** Row label, shown beside the checkbox. */
+  label: string;
+  /** Controlled checked state for this option. */
+  checked?: boolean;
+  /** Optional trailing count, rendered as a secondary badge. */
+  count?: string;
+}
+
+export interface FilterGroup {
+  /** Group heading, rendered uppercase and muted. */
+  title: string;
+  /** The checkbox options under this group. */
+  options: FilterOption[];
+}
+
+export interface FilterPanelProps {
+  /** Filter groups, each a heading plus its checkbox options. */
+  groups: FilterGroup[];
+  /** Active-filter count shown next to the "Filters" title in the header. */
+  activeCount?: number;
+  /** Fired when the header "Clear" action is pressed. */
+  onClear?: () => void;
+  /** Fired when an option row toggles, with its group/option indexes and next value. */
+  onChange?: (groupIndex: number, optionIndex: number, next: boolean) => void;
+  // Surface (pick one path): a rounded, bordered card vs. a bare panel.
+  bordered?: boolean;
+  // Density (pick one): tighten the panel's padding and row spacing.
+  compact?: boolean;
+  /** Escape hatch for layout/positioning composition (mainly width, margins). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Density precedence when more than one is passed: first match wins. There is a
+// single density flag today, so this collapses to compact vs. the default.
+function densityOf(p: FilterPanelProps): s.Density {
+  if (p.compact) return "compact";
+  return "base";
+}
+
+export function FilterPanel(props: FilterPanelProps) {
+  const { groups, activeCount, onClear, onChange, bordered, style } = props;
+  const { tokens } = useTheme();
+  const density = densityOf(props);
+
+  return (
+    <View
+      style={[
+        s.panelBase,
+        // `bordered` wraps it as a rounded card with a border and a card fill;
+        // the bare panel keeps the same width but drops the chrome.
+        bordered ? s.borderedSurface(tokens) : null,
+        s.panelPad[density],
+        s.panelStack[density],
+        style,
+      ]}
+    >
+      <View style={s.headerRow}>
+        <View style={s.titleCluster}>
+          <Text style={s.titleText(tokens)}>Filters</Text>
+          {activeCount != null ? <Badge secondary>{String(activeCount)}</Badge> : null}
+        </View>
+        <Button ghost small onPress={onClear}>
+          Clear
+        </Button>
+      </View>
+
+      {groups.map((group, gi) => (
+        <View key={gi} style={[s.groupColumn, s.groupGap[density]]}>
+          <Text style={s.groupTitle(tokens)}>{group.title}</Text>
+          <View style={[s.groupColumn, s.groupGap[density]]}>
+            {group.options.map((option, oi) => (
+              <View key={oi} style={s.optionRow}>
+                <Checkbox checked={option.checked} onChange={(next) => onChange?.(gi, oi, next)}>
+                  {option.label}
+                </Checkbox>
+                {option.count != null ? <Badge secondary>{option.count}</Badge> : null}
+              </View>
+            ))}
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/organisms/index.ts

@@ -0,0 +1,13 @@
+// Organisms: the React Native UI kit components at the organisms atomic level.
+export * from "./calendar/calendar.js";
+export * from "./charts/charts.js";
+export * from "./command/command.js";
+export * from "./data-table/data-table.js";
+export * from "./dialog/dialog.js";
+export * from "./filter-panel/filter-panel.js";
+export * from "./navbars/navbars.js";
+export * from "./overlays/overlays.js";
+export * from "./row-menu/row-menu.js";
+export * from "./sidebar/sidebar.js";
+export * from "./stepper/stepper.js";
+export * from "./tabs/tabs.js";

package/src/organisms/navbars/navbars.android.tsx

@@ -0,0 +1,6 @@
+import { createNavbar } from "./navbars.shared.js";
+import { androidSkin } from "./navbars.styles.js";
+
+// Material 3 (top app bar) Navbar. Metro resolves this file on Android; the docs import it for preview.
+export const Navbar = createNavbar(androidSkin);
+export type { NavbarProps } from "./navbars.shared.js";

package/src/organisms/navbars/navbars.ios.tsx

@@ -0,0 +1,6 @@
+import { createNavbar } from "./navbars.shared.js";
+import { iosSkin } from "./navbars.styles.js";
+
+// iOS (HIG navigation bar) Navbar. Metro resolves this file on iOS; the docs import it for preview.
+export const Navbar = createNavbar(iosSkin);
+export type { NavbarProps } from "./navbars.shared.js";