@olympusoss/canvas 4.0.0 → 5.0.0

package/src/molecules/action-panels/action-panels.tsx

@@ -0,0 +1,113 @@
+import { View, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import { Card } from "../card/card.js";
+import { Button } from "../../atoms/button/button.js";
+import { Switch } from "../../atoms/switch/switch.js";
+import * as s from "./action-panels.styles.js";
+import { type Tone, type Layout } from "./action-panels.styles.js";
+
+// An action panel is a settings card: a headline and a line of consequence copy
+// on one side, and a single action (a Button) that acts on it. It surfaces one
+// decision at a time, the safe-default version always pairing the action with the
+// copy that explains the stakes.
+//
+// Boolean-prop API, grouped by axis, first-match precedence within an axis
+// (mirrors Button's intentOf):
+//
+// - Tone: `destructive` paints the headline red and renders a destructive
+//   (red) Button; omit for the neutral tone, where the action is a primary
+//   Button. This is the "danger zone" switch.
+// - Layout (pick one): `inline` floats the action to the right of the copy, the
+//   two reading as one side-by-side row; omit for the default, where the action
+//   sits on its own line below the copy.
+// - Affordance: `toggle` makes the action an on/off Switch (its state is
+//   `checked`) instead of a Button; the panel reads as a setting row, always
+//   laid out inline with the Switch pinned to the right. Omit for the default
+//   Button action.
+//
+// The axes are orthogonal: `<ActionPanel destructive inline />` is a red
+// action sitting to the right of its danger copy, and `<ActionPanel toggle
+// checked title="..." description="..." />` is a settings row whose switch is on.
+
+export interface ActionPanelProps {
+  /** The headline: what the action acts on. */
+  title?: string;
+  /** The consequence copy beneath the title: what happens when the action fires. */
+  description?: string;
+  /** The action button label. */
+  actionLabel?: string;
+  /** Fired when the action button is pressed. */
+  onAction?: () => void;
+  // Tone (omit for the neutral, primary-action default).
+  destructive?: boolean;
+  // Layout (pick one; default stacks the action below the copy).
+  inline?: boolean;
+  // Affordance: render the action as an on/off Switch instead of a Button. The
+  // panel always lays out inline in this mode.
+  toggle?: boolean;
+  /** The Switch on/off state when `toggle` is set. */
+  checked?: boolean;
+  /** Fired with the next checked value when the toggle Switch is flipped. */
+  onToggle?: (next: boolean) => void;
+  /** Escape hatch for layout/positioning composition (mainly width). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Tone precedence when more than one flag is passed: first match wins.
+function toneOf(p: ActionPanelProps): Tone {
+  if (p.destructive) return "destructive";
+  return "neutral";
+}
+
+// Layout precedence when more than one flag is passed: first match wins.
+function layoutOf(p: ActionPanelProps): Layout {
+  if (p.inline) return "inline";
+  return "stacked";
+}
+
+export function ActionPanel(props: ActionPanelProps) {
+  const { title, description, actionLabel, onAction, toggle, checked, onToggle, style } = props;
+  const { tokens, dark } = useTheme();
+  const tone = toneOf(props);
+  // The toggle affordance always reads as an inline settings row.
+  const layout = toggle ? "inline" : layoutOf(props);
+
+  // The copy block: title above its consequence line. In the inline layout it
+  // grows to push the action to the right; stacked, it sits above the action.
+  const copy = (
+    <View style={[s.copyBlock, layout === "inline" ? s.copyGrow : null]}>
+      {title != null ? <Text style={s.titleText(tokens, dark, tone)}>{title}</Text> : null}
+      {description != null ? <Text style={s.descriptionText(tokens)}>{description}</Text> : null}
+    </View>
+  );
+
+  // The action. In toggle mode it is an on/off Switch pinned to the right;
+  // otherwise a destructive (red) Button in the danger zone or a primary Button
+  // otherwise, small to sit comfortably inside the panel.
+  const action = toggle ? (
+    <View style={s.actionPinned}>
+      <Switch checked={checked} onValueChange={onToggle} />
+    </View>
+  ) : actionLabel != null ? (
+    <View style={layout === "inline" ? s.actionPinned : s.actionStacked}>
+      <Button small destructive={tone === "destructive"} primary={tone !== "destructive"} onPress={onAction}>
+        {actionLabel}
+      </Button>
+    </View>
+  ) : null;
+
+  return (
+    <Card padded style={[s.cardWidth, style]}>
+      {layout === "inline" ? (
+        <View style={s.inlineBody}>
+          {copy}
+          {action}
+        </View>
+      ) : (
+        <View style={s.stackedBody}>
+          {copy}
+          {action}
+        </View>
+      )}
+    </Card>
+  );
+}

package/src/molecules/alert/alert.md

@@ -0,0 +1,119 @@
+# Alerts
+
+Inline notification banners: info, success, warning, and error, plus a full-width announcement bar. For a blocking confirmation prompt, see Alert Dialog.
+
+## Usage
+
+```tsx
+<Alert
+  info
+  icon="ℹ"
+  title="Heads up"
+  description="Maintenance window scheduled for Sunday 2:00 UTC."
+  dismissible
+/>
+```
+
+## Variants
+
+### Variant - success
+
+```tsx
+<Alert
+  success
+  icon="✓"
+  title="All set"
+  description="Your changes have been saved successfully."
+  dismissible
+/>
+```
+
+### Variant - warning
+
+```tsx
+<Alert
+  warning
+  icon="⚠"
+  title="Action required"
+  description="Your trial expires in 3 days."
+  dismissible
+/>
+```
+
+### Variant - destructive
+
+```tsx
+<Alert
+  error
+  icon="✕"
+  title="Something went wrong"
+  description="Could not save your changes. Please try again."
+  dismissible
+/>
+```
+
+## Do & Don't
+
+### info
+
+**Do** — Reserve info for passive, non-urgent context (notices, tips); escalate to warning or destructive when action is required.
+
+```tsx
+<Alert info icon="ℹ" title="Heads up" description="Maintenance window scheduled for Sunday 2:00 UTC." />
+```
+
+**Don't** — Dressing an act-now message in the neutral info tone hides the urgency; users skim past it like an FYI.
+
+```tsx
+<Alert info icon="ℹ" title="Trial expires today" description="Upgrade now or you'll lose access to your projects." />
+```
+
+### success
+
+**Do** — Make confirmations transient: auto-dismiss or give a Dismiss control so the success state clears once acknowledged.
+
+```tsx
+<Alert success icon="✓" title="Saved" description="Your changes have been saved successfully.">
+  <View style={{ marginTop: 12, flexDirection: "row", gap: 8 }}>
+    <Button ghost small>Dismiss</Button>
+  </View>
+</Alert>
+```
+
+**Don't** — A success banner pinned with no way to dismiss it lingers as visual noise long after the action is done.
+
+```tsx
+<Alert success icon="✓" title="Saved" description="Your changes have been saved successfully." />
+```
+
+### warning
+
+**Do** — State the consequence, the deadline, and the action: name what's wrong and give a button to resolve it.
+
+```tsx
+<Alert warning icon="⚠" title="Action required" description="Your trial expires in 3 days. Upgrade to keep your projects.">
+  <View style={{ marginTop: 12, flexDirection: "row", gap: 8 }}>
+    <Button primary small>Upgrade plan</Button>
+  </View>
+</Alert>
+```
+
+**Don't** — A warning with no specifics or next step leaves the user guessing what to fix and by when.
+
+```tsx
+<Alert warning icon="⚠" title="Action required" description="Something needs your attention." />
+```
+
+### destructive
+
+**Do** — Match the variant to the severity: reserve destructive for genuine failures, success for confirmations.
+
+```tsx
+<Alert error icon="✕" title="Something went wrong" description="Could not save your changes. Please try again." />
+```
+
+**Don't** — Using the destructive variant for non-errors cries wolf; users learn to tune out red and miss real failures.
+
+```tsx
+<Alert error icon="✕" title="Saved" description="Your changes have been saved successfully." />
+```

package/src/molecules/alert/alert.styles.ts

@@ -0,0 +1,88 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, palette } from "../../style/index.js";
+
+// Co-located Alert styles. The toned alerts (info / success / warning / error)
+// draw from the Tailwind palette: a soft 50/200 surface with a 600/700/800 type
+// ramp in light mode, flipping to a 950/800 surface with a 200/300/400 ramp in
+// dark mode (the old dark: variant, resolved by branching on `dark`). The neutral
+// default rides the semantic card / border / foreground tokens so it follows the
+// theme (including glass) on its own.
+
+export type Tone = "info" | "success" | "warning" | "error" | "neutral";
+
+// flex-row items-start gap-3 rounded-lg border px-4 py-3
+export const alertBase: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "flex-start",
+  gap: 12,
+  borderRadius: 8,
+  borderWidth: 1,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+};
+
+// flex-1 gap-1 — the content column beside the icon.
+export const content: ViewStyle = { flexGrow: 1, flexShrink: 1, flexBasis: "0%", gap: 4 };
+
+// text-base leading-5 — the leading glyph.
+export const iconType: TextStyle = { fontSize: 16, lineHeight: 20 };
+
+// text-sm font-semibold — the title.
+export const titleType: TextStyle = { fontSize: 14, lineHeight: 20, fontWeight: "600" };
+
+// text-sm — the description / body.
+export const bodyType: TextStyle = { fontSize: 14, lineHeight: 20 };
+
+// -mr-1 -mt-0.5 h-6 w-6 items-center justify-center rounded-md
+// (active:opacity-70 is applied by the component's Pressable).
+export const dismissButton: ViewStyle = {
+  marginRight: -4,
+  marginTop: -2,
+  height: 24,
+  width: 24,
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 6,
+};
+
+// text-base leading-none — the dismiss glyph.
+export const dismissType: TextStyle = { fontSize: 16, lineHeight: 16 };
+
+// The palette hue per toned alert (neutral rides the semantic tokens).
+const TONE_HUE: Record<Exclude<Tone, "neutral">, string> = {
+  info: "blue",
+  success: "green",
+  warning: "amber",
+  error: "red",
+};
+
+// Container border + fill. Light: 200 border / 50 surface; dark: 800 / 950.
+// Neutral: semantic card surface with the border token.
+export function container(tokens: ColorTokens, dark: boolean, tone: Tone): ViewStyle {
+  if (tone === "neutral") return { borderColor: tokens.border, backgroundColor: tokens.card };
+  const hue = TONE_HUE[tone];
+  return dark
+    ? { borderColor: palette[`${hue}-800`], backgroundColor: palette[`${hue}-950`] }
+    : { borderColor: palette[`${hue}-200`], backgroundColor: palette[`${hue}-50`] };
+}
+
+// Icon color. Light: 600; dark: 400. Neutral: muted-foreground.
+export function iconColor(tokens: ColorTokens, dark: boolean, tone: Tone): TextStyle {
+  if (tone === "neutral") return { color: tokens["muted-foreground"] };
+  const hue = TONE_HUE[tone];
+  return { color: dark ? palette[`${hue}-400`] : palette[`${hue}-600`] };
+}
+
+// Title color. Light: 800; dark: 200. Neutral: foreground.
+export function titleColor(tokens: ColorTokens, dark: boolean, tone: Tone): TextStyle {
+  if (tone === "neutral") return { color: tokens.foreground };
+  const hue = TONE_HUE[tone];
+  return { color: dark ? palette[`${hue}-200`] : palette[`${hue}-800`] };
+}
+
+// Body color. Light: 700; dark: 300. Neutral: muted-foreground.
+export function bodyColor(tokens: ColorTokens, dark: boolean, tone: Tone): TextStyle {
+  if (tone === "neutral") return { color: tokens["muted-foreground"] };
+  const hue = TONE_HUE[tone];
+  return { color: dark ? palette[`${hue}-300`] : palette[`${hue}-700`] };
+}

package/src/molecules/alert/alert.tsx

@@ -0,0 +1,74 @@
+import { type ReactNode } from "react";
+import { View, Pressable, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import * as s from "./alert.styles.js";
+import { type Tone } from "./alert.styles.js";
+
+// A bordered banner that surfaces an inline notification: a leading icon glyph,
+// a bold title, and a description. Configured by a tone axis (info / success /
+// warning / error, plus a neutral default), and an optional `icon` glyph.
+//
+// Boolean-prop API: one boolean per tone, first-match precedence within the
+// axis (mirrors Button's intentOf / Badge's statusOf). Each tone is theme-aware:
+// a soft 50/200 surface with a 600/700/800 type ramp in light mode, and a
+// 950/800 surface with a 200/300/400 ramp in dark mode (branching on the active
+// scheme). The neutral default uses the semantic card / border / foreground tokens.
+
+export interface AlertProps {
+  // Content.
+  title?: string;
+  description?: string;
+  // A leading glyph (a single Text character; the foundation has no icon set).
+  icon?: ReactNode;
+  // Tone (pick one; omit for the neutral default).
+  info?: boolean;
+  success?: boolean;
+  warning?: boolean;
+  error?: boolean;
+  /** Shows a trailing dismiss control. */
+  dismissible?: boolean;
+  /** Fired when the dismiss control is pressed. */
+  onDismiss?: () => void;
+  children?: ReactNode;
+  /** Escape hatch for layout/positioning composition (width, margins). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Tone precedence when more than one is passed: first match wins.
+function toneOf(p: AlertProps): Tone {
+  if (p.error) return "error";
+  if (p.warning) return "warning";
+  if (p.success) return "success";
+  if (p.info) return "info";
+  return "neutral";
+}
+
+export function Alert(props: AlertProps) {
+  const { title, description, icon, children, dismissible, onDismiss, style } = props;
+  const { tokens, dark } = useTheme();
+  const tone = toneOf(props);
+
+  return (
+    <View style={[s.alertBase, s.container(tokens, dark, tone), style]}>
+      {icon != null ? <Text style={[s.iconType, s.iconColor(tokens, dark, tone)]}>{icon}</Text> : null}
+      <View style={s.content}>
+        {title != null && title !== "" ? (
+          <Text style={[s.titleType, s.titleColor(tokens, dark, tone)]}>{title}</Text>
+        ) : null}
+        {description != null && description !== "" ? (
+          <Text style={[s.bodyType, s.bodyColor(tokens, dark, tone)]}>{description}</Text>
+        ) : null}
+        {children}
+      </View>
+      {dismissible ? (
+        <Pressable
+          onPress={onDismiss}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+          style={({ pressed }) => [s.dismissButton, pressed ? { opacity: 0.7 } : null]}
+        >
+          <Text style={[s.dismissType, s.iconColor(tokens, dark, tone)]}>×</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/src/molecules/alert-dialog/alert-dialog.android.tsx

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

package/src/molecules/alert-dialog/alert-dialog.ios.tsx

@@ -0,0 +1,6 @@
+import { createAlertDialog } from "./alert-dialog.shared.js";
+import { iosSkin } from "./alert-dialog.styles.js";
+
+// iOS (iOS 27 / Liquid Glass alert) AlertDialog. Metro resolves this file on iOS; the docs import it for preview.
+export const AlertDialog = createAlertDialog(iosSkin);
+export type { AlertDialogProps } from "./alert-dialog.shared.js";

package/src/molecules/alert-dialog/alert-dialog.md

@@ -0,0 +1,177 @@
+# Alert Dialog
+
+Catalyst-style confirmation dialog: a centered panel over a dimmed, blurred backdrop, with a title, description, optional body, and action buttons. Reserve it for decisions that must block the rest of the app.
+
+## Usage
+
+```tsx
+<AlertDialog
+  title="Delete this identity?"
+  description="This permanently removes the identity and revokes any active sessions. This action cannot be undone."
+  confirmLabel="Delete"
+  destructive
+  trigger="Delete identity…"
+/>
+```
+
+## Variants
+
+### Size - xs
+
+```tsx
+<AlertDialog
+  title="Delete this identity?"
+  description="This permanently removes the identity and revokes any active sessions. This action cannot be undone."
+  confirmLabel="Delete"
+  destructive
+  narrow
+  trigger="Delete identity…"
+/>
+```
+
+### Size - sm
+
+```tsx
+<AlertDialog
+  title="Delete this identity?"
+  description="This permanently removes the identity and revokes any active sessions. This action cannot be undone."
+  confirmLabel="Delete"
+  destructive
+  small
+  trigger="Delete identity…"
+/>
+```
+
+### Size - lg
+
+```tsx
+<AlertDialog
+  title="Delete this identity?"
+  description="This permanently removes the identity and revokes any active sessions. This action cannot be undone."
+  confirmLabel="Delete"
+  destructive
+  large
+  trigger="Delete identity…"
+/>
+```
+
+### Body field
+
+```tsx
+<AlertDialog
+  title="Delete this identity?"
+  description="This permanently removes the identity and revokes any active sessions. This action cannot be undone."
+  confirmLabel="Delete"
+  destructive
+  withInput
+  trigger="Delete identity…"
+/>
+```
+
+## Do & Don't
+
+### Reserve the dialog for blocking decisions
+
+**Do** — Use an inline banner or toast for passive feedback; reserve the dialog for decisions that must be confirmed.
+
+```tsx
+<Alert success title="Saved" description="Your changes have been saved." />
+```
+
+**Don't** — A blocking alert dialog for passive confirmation interrupts the user for no reason.
+
+```tsx
+<AlertDialog open small title="Saved" description="Your changes have been saved." confirmLabel="OK" />
+```
+
+### Name the action on the confirm button
+
+**Do** — Label the confirm button with the verb it performs (Delete, Archive, Sign out).
+
+```tsx
+<AlertDialog open small destructive title="Delete this identity?" cancelLabel="Cancel" confirmLabel="Delete" />
+```
+
+**Don't** — Generic Yes / No forces the user to re-read the title to know what they are confirming.
+
+```tsx
+<AlertDialog open small destructive title="Delete this identity?" cancelLabel="No" confirmLabel="Yes" />
+```
+
+### xs
+
+**Do** — Reserve xs for a terse one-line question with short button labels and no body content.
+
+```tsx
+<AlertDialog open narrow destructive title="Remove device?" cancelLabel="Cancel" confirmLabel="Remove" />
+```
+
+**Don't** — A long title, multi-line description, and wordy buttons get cramped in the xs width and wrap awkwardly.
+
+```tsx
+<AlertDialog open narrow destructive title="Remove this trusted device?" description="It will need to re-authenticate, and any pending background syncs from it will be cancelled the next time it connects." cancelLabel="Cancel" confirmLabel="Remove device" />
+```
+
+### sm
+
+**Do** — Use sm for a single short confirmation with a one-line description; move real forms to a full dialog.
+
+```tsx
+<AlertDialog open small title="Transfer ownership?" description="You will lose admin access to this workspace." cancelLabel="Cancel" confirmLabel="Transfer" />
+```
+
+**Don't** — Packing a multi-field form into sm makes it feel like a form crammed into a confirmation popup.
+
+```tsx
+<View style={{ alignItems: "center", justifyContent: "center", borderRadius: 8, backgroundColor: alpha("#000000", 0.5), padding: 32, minHeight: 200 }}>
+  <View style={{ width: "100%", maxWidth: 384, borderRadius: 8, borderWidth: 1, borderColor: tokens.border, backgroundColor: tokens.popover, padding: 24, ...shadow("xl") }}>
+    <Text style={{ fontSize: 16, lineHeight: 24, fontWeight: "600", color: tokens["popover-foreground"] }}>Transfer ownership</Text>
+    <View style={{ marginTop: 16, gap: 16 }}>
+      <View>
+        <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6 }}>New owner email</Text>
+        <Input placeholder="owner@example.com" />
+      </View>
+      <View>
+        <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6 }}>Reason</Text>
+        <Input placeholder="Optional note" />
+      </View>
+      <View>
+        <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, marginBottom: 6 }}>Type TRANSFER to confirm</Text>
+        <Input placeholder="TRANSFER" />
+      </View>
+    </View>
+    <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 24 }}>
+      <Button outline small>Cancel</Button>
+      <Button primary small>Transfer</Button>
+    </View>
+  </View>
+</View>
+```
+
+### md
+
+**Do** — md is the default home for a typical destructive confirm with a sentence or two of description.
+
+```tsx
+<AlertDialog open destructive title="Delete this identity?" description="This permanently removes the identity and revokes any active sessions. This action cannot be undone." cancelLabel="Cancel" confirmLabel="Delete" />
+```
+
+**Don't** — Squeezing a description-carrying confirm into a smaller width crowds the copy against the edges.
+
+```tsx
+<AlertDialog open narrow destructive title="Delete this identity?" description="This permanently removes the identity and revokes any active sessions. This action cannot be undone." cancelLabel="Cancel" confirmLabel="Delete" />
+```
+
+### lg
+
+**Do** — Reserve lg for dialogs that earn the width: a body field or a longer explanation to read.
+
+```tsx
+<AlertDialog open large destructive withInput title="Delete this identity?" description="This permanently removes the identity and revokes any active sessions. This action cannot be undone." cancelLabel="Cancel" confirmLabel="Delete" />
+```
+
+**Don't** — A bare yes/no in lg leaves a wide, empty panel that reads as heavier than the trivial decision it asks for.
+
+```tsx
+<AlertDialog open large title="Sign out?" cancelLabel="Cancel" confirmLabel="Sign out" />
+```