@olympusoss/canvas 4.0.0 → 5.0.0

package/src/molecules/card/card.styles.ts

@@ -0,0 +1,67 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, shadow } from "../../style/index.js";
+
+// Co-located Card styles. Layout-only parts are static objects; anything that
+// reads a color is a function of the active tokens (so the surface follows
+// light/dark, and reads as glass when the ThemeProvider's surface is "glass",
+// since tokens.card is swapped translucent at the theming level).
+
+export type Elevation = "raised" | "flat" | "default";
+export type Density = "compact" | "comfortable" | "default";
+
+export const cardBase: ViewStyle = { borderRadius: 8, borderWidth: 1 };
+
+// The card surface fill + border. tokens.card goes translucent under glass.
+export function cardSurface(tokens: ColorTokens): ViewStyle {
+  return { borderColor: tokens.border, backgroundColor: tokens.card };
+}
+
+// Elevation: raised lifts the shadow, flat drops it, default is the soft shadow.
+export function elevation(e: Elevation): ViewStyle {
+  return e === "raised" ? shadow("md") : e === "flat" ? shadow("none") : shadow("sm");
+}
+
+// Density sets the card's own content padding and the gap between flat children.
+export const density: Record<Density, ViewStyle> = {
+  compact: { padding: 16, gap: 12 },
+  comfortable: { padding: 32, gap: 24 },
+  default: {},
+};
+
+// The standard inset applied by `padded` when no density is set.
+export const padded: ViewStyle = { padding: 24 };
+
+// --- subcomponent styles ----------------------------------------------------
+
+export const header: ViewStyle = { gap: 6, paddingHorizontal: 20, paddingBottom: 16, paddingTop: 20 };
+
+export function title(tokens: ColorTokens): TextStyle {
+  return { fontSize: 20, lineHeight: 28, fontWeight: "600", letterSpacing: -0.4, color: tokens["card-foreground"] };
+}
+
+export function description(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] };
+}
+
+export const content: ViewStyle = { paddingHorizontal: 20, paddingVertical: 20 };
+
+export const footer: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 8,
+  paddingHorizontal: 20,
+  paddingBottom: 20,
+  paddingTop: 16,
+};
+
+export function separator(tokens: ColorTokens): ViewStyle {
+  return { height: 1, width: "100%", backgroundColor: tokens.border };
+}
+
+export function bodyText(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, color: tokens["card-foreground"] };
+}
+
+export function footerText(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] };
+}

package/src/molecules/card/card.tsx

@@ -0,0 +1,176 @@
+import { type ReactNode } from "react";
+import { View, Pressable, Text, useTheme, type StyleProp, type ViewStyle, type TextStyle } from "../../style/index.js";
+import * as s from "./card.styles.js";
+import { type Elevation, type Density } from "./card.styles.js";
+
+// Card: a surface container. The base surface gives you the border, radius, and
+// shadow; you bring the content. Structure is composed from the subcomponents
+// (CardHeader, CardTitle, CardDescription, CardContent, CardFooter), with a
+// hairline CardSeparator anchoring a header above a body.
+//
+// Boolean-prop API: one boolean per option, grouped by axis, first-match
+// precedence within an axis (mirrors Button's intentOf). Axes:
+//
+// - Elevation (pick one): `raised` > `flat` > default (shadow-sm). `flat`
+//   drops the shadow; `raised` lifts it to shadow-md.
+// - Interaction: `interactive` (with onPress) gives a pressed affordance, for a
+//   card that behaves like a control.
+// - Padding: `padded` pads the surface itself (good for a single block of
+//   content); omit when you compose CardHeader/CardContent, which carry their
+//   own padding.
+// - Density (pick one): `compact` > `comfortable`. Sets the card's own content
+//   padding and the gap between flat children, tight (compact) or roomy
+//   (comfortable). A density prop pads the surface on its own, so it needs no
+//   `padded`, and it wins over `padded` when both are set.
+//
+// For the docs playground, which maps plain state to props (no JSX children),
+// Card also accepts simple string props (title, description, body, footer):
+// when no children are passed it renders the header/body/footer structure from
+// those strings, so a representative card can be produced from flat state.
+
+export interface CardProps {
+  children?: ReactNode;
+  // Simple content props for the children-less / data-driven case.
+  title?: string;
+  description?: string;
+  body?: string;
+  footer?: string;
+  // Elevation (pick one; default is a soft shadow-sm).
+  raised?: boolean;
+  flat?: boolean;
+  // Interaction and padding (orthogonal booleans).
+  interactive?: boolean;
+  padded?: boolean;
+  /** When set, the whole card becomes pressable (a card that behaves as a control). */
+  onPress?: () => void;
+  // Density (pick one; default is the standard inset). Scales the card's own
+  // content padding and the gap between flat children.
+  compact?: boolean;
+  comfortable?: boolean;
+  /** Escape hatch for layout/positioning composition (width, margins). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Elevation precedence when more than one is passed: first match wins.
+function elevationOf(p: CardProps): Elevation {
+  if (p.raised) return "raised";
+  if (p.flat) return "flat";
+  return "default";
+}
+
+// Density precedence when more than one is passed: first match wins.
+function densityOf(p: CardProps): Density {
+  if (p.compact) return "compact";
+  if (p.comfortable) return "comfortable";
+  return "default";
+}
+
+export function Card(props: CardProps) {
+  const { children, title, description, body, footer, padded, onPress, style } = props;
+  const { tokens } = useTheme();
+  const elev = elevationOf(props);
+  const dens = densityOf(props);
+
+  const container: StyleProp<ViewStyle> = [
+    s.cardBase,
+    s.cardSurface(tokens),
+    s.elevation(elev),
+    // Density pads + gaps on its own and wins over `padded`; otherwise `padded`
+    // applies the standard inset, and a bare card stays unpadded for composition.
+    dens !== "default" ? s.density[dens] : padded ? s.padded : null,
+    style,
+  ];
+
+  // Children win: when composed, render exactly what the caller passed.
+  // Otherwise build a representative structure from the simple string props.
+  let inner: ReactNode;
+  if (children != null) {
+    inner = children;
+  } else {
+    const hasHeader = title != null || description != null;
+    inner = (
+      <>
+        {hasHeader ? (
+          <CardHeader>
+            {title != null ? <CardTitle>{title}</CardTitle> : null}
+            {description != null ? <CardDescription>{description}</CardDescription> : null}
+          </CardHeader>
+        ) : null}
+        {hasHeader && body != null ? <CardSeparator /> : null}
+        {body != null ? (
+          <CardContent>
+            <Text style={s.bodyText(tokens)}>{body}</Text>
+          </CardContent>
+        ) : null}
+        {footer != null ? (
+          <>
+            <CardSeparator />
+            <CardFooter>
+              <Text style={s.footerText(tokens)}>{footer}</Text>
+            </CardFooter>
+          </>
+        ) : null}
+      </>
+    );
+  }
+
+  // A pressable card swaps View for Pressable, adding the pressed affordance.
+  if (onPress) {
+    return (
+      <Pressable
+        accessibilityRole="button"
+        onPress={onPress}
+        style={({ pressed }) => [container, pressed ? { opacity: 0.9 } : null]}
+      >
+        {inner}
+      </Pressable>
+    );
+  }
+  return <View style={container}>{inner}</View>;
+}
+
+export interface CardSectionProps {
+  children?: ReactNode;
+  /** Escape hatch for layout/positioning composition. */
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CardTextProps {
+  children?: ReactNode;
+  /** Escape hatch for layout/positioning composition. */
+  style?: StyleProp<TextStyle>;
+}
+
+// Header: the labeled top of the card, holding the title and description.
+export function CardHeader({ children, style }: CardSectionProps) {
+  return <View style={[s.header, style]}>{children}</View>;
+}
+
+// Title: the card's heading. Semibold, tight tracking, card foreground.
+export function CardTitle({ children, style }: CardTextProps) {
+  const { tokens } = useTheme();
+  return <Text style={[s.title(tokens), style]}>{children}</Text>;
+}
+
+// Description: the muted supporting line beneath the title.
+export function CardDescription({ children, style }: CardTextProps) {
+  const { tokens } = useTheme();
+  return <Text style={[s.description(tokens), style]}>{children}</Text>;
+}
+
+// Content: the card body region. Carries the standard surface padding.
+export function CardContent({ children, style }: CardSectionProps) {
+  return <View style={[s.content, style]}>{children}</View>;
+}
+
+// Footer: the bottom region for actions or a summary line.
+export function CardFooter({ children, style }: CardSectionProps) {
+  return <View style={[s.footer, style]}>{children}</View>;
+}
+
+// Separator: the hairline that anchors a header above a body. A card composing
+// a header and body keeps this divider between them.
+export function CardSeparator({ style }: { style?: StyleProp<ViewStyle> }) {
+  const { tokens } = useTheme();
+  return <View style={[s.separator(tokens), style]} />;
+}

package/src/molecules/code-block/code-block.md

@@ -0,0 +1,159 @@
+# Code Block
+
+Preformatted code block with monospace font and padding.
+
+## Usage
+
+```tsx
+<CodeBlock
+  code={`const theme = getTheme();
+setTheme(theme === "dark" ? "light" : "dark");`}
+  filename="theme.ts"
+  language="ts"
+/>
+```
+
+## Variants
+
+### Variant - terminal
+
+```tsx
+<CodeBlock
+  code={`const theme = getTheme();
+setTheme(theme === "dark" ? "light" : "dark");`}
+  filename="theme.ts"
+  language="ts"
+  terminal
+/>
+```
+
+### Variant - numbered
+
+```tsx
+<CodeBlock
+  code={`const theme = getTheme();
+setTheme(theme === "dark" ? "light" : "dark");`}
+  filename="theme.ts"
+  language="ts"
+  numbered
+/>
+```
+
+### Variant - inline
+
+```tsx
+<CodeBlock
+  code={`const theme = getTheme();
+setTheme(theme === "dark" ? "light" : "dark");`}
+  filename="theme.ts"
+  language="ts"
+  inline
+/>
+```
+
+### Copy button
+
+```tsx
+<CodeBlock
+  code={`const theme = getTheme();
+setTheme(theme === "dark" ? "light" : "dark");`}
+  filename="theme.ts"
+  language="ts"
+  copy
+/>
+```
+
+### Wrap long lines
+
+```tsx
+<CodeBlock
+  code={`const theme = getTheme();
+setTheme(theme === "dark" ? "light" : "dark");`}
+  filename="theme.ts"
+  language="ts"
+  wrap
+/>
+```
+
+## Do & Don't
+
+### Plain
+
+**Do** — Use a pre element so whitespace, line breaks, and indentation survive verbatim.
+
+```tsx
+<CodeBlock code={`const theme = getTheme();
+setTheme(theme === "dark" ? "light" : "dark");`} />
+```
+
+**Don't** — A paragraph collapses the line breaks and indentation, so multi-line code reads as one run-on string.
+
+```tsx
+<View style={{ maxWidth: 360 }}>
+  <Text style={{ fontSize: 13, fontFamily: "monospace" }}>const theme = getTheme(); setTheme(theme === "dark" ? "light" : "dark");</Text>
+</View>
+```
+
+### Terminal
+
+**Do** — Mark the prompt select-none so a copy yields only the command, not the shell glyph.
+
+```tsx
+<CodeBlock terminal code="npm install @olympusoss/canvas" />
+```
+
+**Don't** — Selectable prompt text means a reader who copies the line drags the $ marker into their shell.
+
+```tsx
+<View style={{ width: "100%", alignSelf: "flex-start", borderRadius: 8, backgroundColor: palette["zinc-900"], padding: 16 }}>
+  <Text style={{ fontSize: 13, color: palette["zinc-100"], fontFamily: "monospace" }}>$ npm install @olympusoss/canvas</Text>
+</View>
+```
+
+### Numbered
+
+**Do** — Keep the gutter select-none so copying the block returns clean, runnable code.
+
+```tsx
+<CodeBlock numbered code={`const theme = getTheme();
+setTheme(theme);`} />
+```
+
+**Don't** — Selectable line numbers get swept into the selection and pasted as 1 2 ahead of every line.
+
+```tsx
+<View style={{ width: "100%", alignSelf: "flex-start", flexDirection: "row", borderRadius: 8, borderWidth: 1, borderColor: tokens.border, backgroundColor: alpha(tokens.muted, 0.5), padding: 16 }}>
+  <View style={{ marginRight: 16, alignItems: "flex-end" }}>
+    <Text style={{ fontSize: 14, lineHeight: 28, color: alpha(tokens["muted-foreground"], 0.5), fontFamily: "monospace" }}>1</Text>
+    <Text style={{ fontSize: 14, lineHeight: 28, color: alpha(tokens["muted-foreground"], 0.5), fontFamily: "monospace" }}>2</Text>
+  </View>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }}>
+    <Text style={{ fontSize: 14, lineHeight: 28, color: tokens.foreground, fontFamily: "monospace" }}>const theme = getTheme();</Text>
+    <Text style={{ fontSize: 14, lineHeight: 28, color: tokens.foreground, fontFamily: "monospace" }}>setTheme(theme);</Text>
+  </View>
+</View>
+```
+
+### Inline
+
+**Do** — Reserve inline code for short tokens; move anything multi-line into a block.
+
+```tsx
+<View style={{ maxWidth: 360, gap: 6 }}>
+  <Text style={{ fontSize: 14, lineHeight: 28 }}>Run the setup command:</Text>
+  <CodeBlock code={`npm install @olympusoss/canvas
+npm run build`} />
+</View>
+```
+
+**Don't** — A long, multi-step command crammed inline wraps mid-token and offers no horizontal scroll.
+
+```tsx
+<View style={{ maxWidth: 360, flexDirection: "row", flexWrap: "wrap", alignItems: "center" }}>
+  <Text style={{ fontSize: 14, lineHeight: 28, color: tokens.foreground }}>Run </Text>
+  <View style={{ alignSelf: "flex-start", borderRadius: 4, borderWidth: 1, borderColor: tokens.border, backgroundColor: tokens.muted, paddingHorizontal: 6, paddingVertical: 2 }}>
+    <Text style={{ fontSize: 13, color: tokens.foreground, fontFamily: "monospace" }}>npm install @olympusoss/canvas && npm run build && npm run preview</Text>
+  </View>
+  <Text style={{ fontSize: 14, lineHeight: 28, color: tokens.foreground }}> to start.</Text>
+</View>
+```

package/src/molecules/code-block/code-block.styles.ts

@@ -0,0 +1,167 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, palette, shadow, alpha } from "../../style/index.js";
+
+// Co-located CodeBlock styles. Layout-only fragments are static objects; anything
+// that reads a color is a function of the active tokens, so the muted surface
+// follows light/dark and reads as glass at the theming level. The terminal
+// variant is intentionally a fixed dark window built from the Tailwind palette
+// (zinc/emerald/red/amber/green), so it stays dark in every scheme.
+
+export type Variant = "terminal" | "numbered" | "inline" | "plain";
+
+// Monospace face: requested inline since RN has no font-family utility (the same
+// approach Badge's `mono` modifier uses).
+export const MONO = { fontFamily: "monospace" } as const;
+
+// Shared code type: text-sm leading-relaxed.
+export const codeType: TextStyle = { fontSize: 14, lineHeight: 28 };
+
+// Code foreground color (text-foreground).
+export function codeText(tokens: ColorTokens): TextStyle {
+  return { color: tokens.foreground };
+}
+
+// The shared code surface: a muted, bordered, rounded card. (w-full self-start
+// rounded-lg border border-border bg-muted/50)
+export function surface(tokens: ColorTokens): ViewStyle {
+  return {
+    width: "100%",
+    alignSelf: "flex-start",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: tokens.border,
+    backgroundColor: alpha(tokens.muted, 0.5),
+  };
+}
+
+// Surface padding (p-4) added on top of `surface`.
+export const surfacePad: ViewStyle = { padding: 16 };
+
+// --- outer wrappers ---------------------------------------------------------
+
+// relative
+export const relative: ViewStyle = { position: "relative" };
+
+// --- inline variant ---------------------------------------------------------
+
+// self-start rounded border border-border bg-muted px-1.5 py-0.5
+export function inlineBox(tokens: ColorTokens): ViewStyle {
+  return {
+    alignSelf: "flex-start",
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: tokens.border,
+    backgroundColor: tokens.muted,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+  };
+}
+
+// --- terminal variant -------------------------------------------------------
+
+// relative w-full self-start overflow-hidden rounded-lg border border-border shadow-sm
+export function terminalOuter(tokens: ColorTokens): ViewStyle {
+  return {
+    position: "relative",
+    width: "100%",
+    alignSelf: "flex-start",
+    overflow: "hidden",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: tokens.border,
+    ...shadow("sm"),
+  };
+}
+
+// Chrome bar: flex-row items-center gap-1.5 border-b border-zinc-700 bg-zinc-800 px-4 py-2.5
+export const terminalChrome: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 6,
+  borderBottomWidth: 1,
+  borderColor: palette["zinc-700"],
+  backgroundColor: palette["zinc-800"],
+  paddingHorizontal: 16,
+  paddingVertical: 10,
+};
+
+// Traffic-light dot: h-3 w-3 rounded-full bg-<hue>-500.
+export function trafficDot(hue: "red" | "amber" | "green"): ViewStyle {
+  return { height: 12, width: 12, borderRadius: 9999, backgroundColor: palette[`${hue}-500`] };
+}
+
+// Chrome label: ml-2 text-xs text-zinc-400.
+export const terminalLabel: TextStyle = {
+  marginLeft: 8,
+  fontSize: 12,
+  lineHeight: 16,
+  color: palette["zinc-400"],
+};
+
+// Terminal body: bg-zinc-900 p-4.
+export const terminalBody: ViewStyle = { backgroundColor: palette["zinc-900"], padding: 16 };
+
+// A single command row: flex-row.
+export const terminalRow: ViewStyle = { flexDirection: "row" };
+
+// The non-selectable "$ " prompt: text-emerald-400.
+export const terminalPrompt: TextStyle = { color: palette["emerald-400"] };
+
+// The command line itself: flex-1 text-zinc-100.
+export const terminalLine: TextStyle = {
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: "0%",
+  color: palette["zinc-100"],
+};
+
+// --- numbered variant -------------------------------------------------------
+
+// The numbered surface row: flex-row p-4 (on top of `surface`).
+export const numberedSurface: ViewStyle = { flexDirection: "row", padding: 16 };
+
+// The line-number gutter: mr-4 items-end.
+export const numberedGutter: ViewStyle = { marginRight: 16, alignItems: "flex-end" };
+
+// Dimmed line numbers (text-muted-foreground), sharing the code type.
+export function gutterText(tokens: ColorTokens): TextStyle {
+  return { color: tokens["muted-foreground"] };
+}
+
+// The code column: flex-1.
+export const numberedCodeCol: ViewStyle = { flexGrow: 1, flexShrink: 1, flexBasis: "0%" };
+
+// --- copy affordance --------------------------------------------------------
+
+// absolute right-2 top-2 z-10 flex-row items-center self-start rounded-md border px-2.5 py-1.
+// The fill/border follows the dark branch: dark window vs light surface.
+export function copyButton(tokens: ColorTokens, dark: boolean): ViewStyle {
+  const base: ViewStyle = {
+    position: "absolute",
+    right: 8,
+    top: 8,
+    zIndex: 10,
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    borderRadius: 6,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+  };
+  // The `dark` flag here is the CopyButton's own (terminal forces it); it picks
+  // the dark zinc chip vs the light background chip with a soft shadow.
+  return dark
+    ? { ...base, borderColor: palette["zinc-700"], backgroundColor: palette["zinc-800"] }
+    : { ...base, borderColor: tokens.border, backgroundColor: tokens.background, ...shadow("sm") };
+}
+
+// Copy label: text-xs font-medium, color per dark branch.
+export function copyText(tokens: ColorTokens, dark: boolean): TextStyle {
+  return {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500",
+    color: dark ? palette["zinc-300"] : tokens["muted-foreground"],
+  };
+}