@olympusoss/canvas 3.2.1 → 5.0.0

package/src/atoms/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,130 @@
+import { type ReactNode } from "react";
+import { type GestureResponderEvent } from "react-native";
+import { View, Pressable, Text, useTheme, type StyleProp, type ViewStyle, type TextStyle } from "../../style/index.js";
+import { Icon } from "../icon/icon.js";
+import * as s from "./breadcrumb.styles.js";
+
+// A breadcrumb is a horizontal trail of links separated by a divider glyph, with
+// the last item current (non-link, emphasized). Ancestors are muted links; the
+// page you are on is plain foreground text at the end of the trail.
+//
+// Boolean-prop API, one axis: the separator style. Pick one of `chevron`
+// (default), `slash`, or `dot`; first match wins (mirrors Button's intentOf). The
+// foundation has no SVG utility here, so the chevron is a reading-direction glyph
+// (the single-guillemet "›") rather than an icon, keeping every separator a Text
+// glyph pointing in the reading direction.
+
+export interface BreadcrumbProps {
+  /**
+   * The trail, ancestor-first. The last entry renders as the current page (plain
+   * emphasized text); the rest render as muted links.
+   */
+  items?: string[];
+  // Separator style (pick one; default is the chevron glyph).
+  chevron?: boolean;
+  slash?: boolean;
+  dot?: boolean;
+  /**
+   * Leading affordance: prepend a muted home-icon crumb (aria-labelled "Home")
+   * before the trail, followed by the separator. Off by default.
+   */
+  homeIcon?: boolean;
+  /** Fired with the crumb label and its index when a link (non-last) is pressed. */
+  onItemPress?: (item: string, index: number) => void;
+  /** Escape hatch for layout/positioning composition. */
+  style?: StyleProp<ViewStyle>;
+}
+
+type Separator = "chevron" | "slash" | "dot";
+
+// Separator precedence when more than one flag is passed: first match wins.
+function separatorOf(p: BreadcrumbProps): Separator {
+  if (p.chevron) return "chevron";
+  if (p.slash) return "slash";
+  if (p.dot) return "dot";
+  return "chevron";
+}
+
+// The divider glyph per style. A centered middot for `dot`, a forward slash for
+// `slash`, and a reading-direction single guillemet for `chevron` (stands in for
+// the SVG chevron not rendered here).
+const SEPARATOR_GLYPH: Record<Separator, string> = {
+  chevron: "›",
+  slash: "/",
+  dot: "·",
+};
+
+export interface BreadcrumbItemProps {
+  children?: ReactNode;
+  /** Render as the current page: emphasized foreground text, non-interactive. */
+  current?: boolean;
+  onPress?: (event: GestureResponderEvent) => void;
+  /** Escape hatch for layout/positioning composition. */
+  style?: StyleProp<TextStyle>;
+}
+
+// A single crumb. Current crumbs are plain emphasized text; ancestors are muted,
+// pressable links.
+export function BreadcrumbItem(props: BreadcrumbItemProps) {
+  const { children, current, onPress, style } = props;
+  const { tokens } = useTheme();
+  if (children == null) return null;
+  if (current) {
+    return <Text style={[s.current(tokens), style]} accessibilityRole="text">{children}</Text>;
+  }
+  return (
+    <Pressable onPress={onPress} accessibilityRole="link">
+      {({ pressed }) => (
+        <Text style={[s.link(tokens), pressed ? { opacity: 0.7 } : null, style]}>{children}</Text>
+      )}
+    </Pressable>
+  );
+}
+
+export function Breadcrumb(props: BreadcrumbProps) {
+  const { items, homeIcon, onItemPress, style } = props;
+  const { tokens } = useTheme();
+  const trail = items ?? [];
+  const separator = separatorOf(props);
+  const glyph = SEPARATOR_GLYPH[separator];
+
+  return (
+    <View style={[s.nav, style]} accessibilityRole="header">
+      {homeIcon ? (
+        <View style={s.crumb}>
+          <Pressable
+            onPress={() => onItemPress?.("Home", 0)}
+            accessibilityRole="link"
+            accessibilityLabel="Home"
+            style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}
+          >
+            <Icon home muted size={14} />
+          </Pressable>
+          {trail.length === 0 ? null : (
+            <Text style={s.separator(tokens)} accessibilityElementsHidden>
+              {glyph}
+            </Text>
+          )}
+        </View>
+      ) : null}
+      {trail.map((item, index) => {
+        const last = index === trail.length - 1;
+        return (
+          <View key={`${index}-${item}`} style={s.crumb}>
+            <BreadcrumbItem
+              current={last}
+              onPress={last ? undefined : () => onItemPress?.(item, index)}
+            >
+              {item}
+            </BreadcrumbItem>
+            {last ? null : (
+              <Text style={s.separator(tokens)} accessibilityElementsHidden>
+                {glyph}
+              </Text>
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/atoms/button/button.android.tsx

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

package/src/atoms/button/button.ios.tsx

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

package/src/atoms/button/button.md

@@ -0,0 +1,184 @@
+# Buttons
+
+Six variants × four sizes × disabled / focus / hover states. Always semantic: variant communicates intent (default = primary action, destructive = irreversible, ghost = chrome).
+
+## Usage
+
+```tsx
+<Button primary>Save changes</Button>
+```
+
+## Variants
+
+### Variant - outline
+
+```tsx
+<Button outline>Save changes</Button>
+```
+
+### Variant - secondary
+
+```tsx
+<Button secondary>Save changes</Button>
+```
+
+### Variant - ghost
+
+```tsx
+<Button ghost>Save changes</Button>
+```
+
+### Variant - destructive
+
+```tsx
+<Button destructive>Save changes</Button>
+```
+
+### Variant - link
+
+```tsx
+<Button link>Save changes</Button>
+```
+
+### Size - sm
+
+```tsx
+<Button primary small>Save changes</Button>
+```
+
+### Size - lg
+
+```tsx
+<Button primary large>Save changes</Button>
+```
+
+### Size - icon
+
+```tsx
+<Button primary icon>+</Button>
+```
+
+### Disabled
+
+```tsx
+<Button primary disabled>Save changes</Button>
+```
+
+### With icon
+
+```tsx
+<Button primary>+  Save changes</Button>
+```
+
+## Do & Don't
+
+### Default (primary)
+
+**Do** — One clear primary action; everything else is supporting.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+  <Button primary>Save</Button>
+  <Button outline>Cancel</Button>
+</View>
+```
+
+**Don't** — Multiple primaries compete; nothing stands out.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+  <Button primary>Save</Button>
+  <Button primary>Apply</Button>
+  <Button primary>Continue</Button>
+</View>
+```
+
+### Outline
+
+**Do** — Promote the main action to default; keep the rest outline.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+  <Button primary>Publish</Button>
+  <Button outline>Save draft</Button>
+  <Button outline>Schedule</Button>
+</View>
+```
+
+**Don't** — All-outline leaves no signal which action is primary.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+  <Button outline>Save</Button>
+  <Button outline>Publish</Button>
+  <Button outline>Schedule</Button>
+</View>
+```
+
+### Secondary
+
+**Do** — Default for the primary action; secondary for the next one down.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+  <Button primary>Create account</Button>
+  <Button secondary>Import instead</Button>
+</View>
+```
+
+**Don't** — A secondary button as the main call to action under-sells it.
+
+```tsx
+<Button secondary>Create account</Button>
+```
+
+### Ghost
+
+**Do** — Use ghost for tertiary and toolbar actions; keep the CTA filled.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+  <Button ghost>Cancel</Button>
+  <Button primary>Save changes</Button>
+</View>
+```
+
+**Don't** — A ghost button is too quiet to carry the primary action.
+
+```tsx
+<Button ghost>Save changes</Button>
+```
+
+### Destructive
+
+**Do** — Reserve the destructive variant for irreversible actions like delete.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+  <Button primary>Save changes</Button>
+  <Button destructive>Delete account</Button>
+</View>
+```
+
+**Don't** — Red on a safe action cries wolf; users learn to ignore it.
+
+```tsx
+<Button destructive>Save changes</Button>
+```
+
+### Link
+
+**Do** — Link variant for inline navigation; a filled button for the submit.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+  <Button primary>Submit</Button>
+  <Button link>Learn more</Button>
+</View>
+```
+
+**Don't** — A link-styled submit doesn't look pressable and gets lost.
+
+```tsx
+<Button link>Submit form</Button>
+```

package/src/atoms/button/button.shared.tsx

@@ -0,0 +1,79 @@
+import { type ReactNode } from "react";
+import { ActivityIndicator, type GestureResponderEvent } from "react-native";
+import { Pressable, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import { type ButtonSkin, type Intent, type Size, FG_TOKEN } from "./button.styles.js";
+
+// Shared Button shell. The structure (Pressable + optional loading spinner +
+// label), the accessibility, and the intent/size precedence live here once; a
+// platform file supplies only its skin (shape, sizing, label weight, press
+// feedback) and calls createButton.
+
+export interface ButtonProps {
+  children?: ReactNode;
+  onPress?: (event: GestureResponderEvent) => void;
+  // Intent (pick one; default is the primary action).
+  primary?: boolean;
+  secondary?: boolean;
+  destructive?: boolean;
+  outline?: boolean;
+  ghost?: boolean;
+  link?: boolean;
+  // Size (pick one).
+  small?: boolean;
+  large?: boolean;
+  icon?: boolean;
+  // Layout and state.
+  block?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  /** Escape hatch for layout/positioning composition (margins, alignment). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Intent precedence when more than one is passed: first match wins.
+function intentOf(p: ButtonProps): Intent {
+  if (p.primary) return "primary";
+  if (p.destructive) return "destructive";
+  if (p.secondary) return "secondary";
+  if (p.outline) return "outline";
+  if (p.ghost) return "ghost";
+  if (p.link) return "link";
+  return "primary";
+}
+
+// Size precedence when more than one is passed: first match wins.
+function sizeOf(p: ButtonProps): Size {
+  if (p.small) return "small";
+  if (p.large) return "large";
+  return "base";
+}
+
+/** Build a Button component from a platform skin. */
+export function createButton(skin: ButtonSkin) {
+  return function Button(props: ButtonProps) {
+    const { children, onPress, loading, disabled, block, icon, style } = props;
+    const { tokens } = useTheme();
+    const intent = intentOf(props);
+    const size = sizeOf(props);
+
+    const container = skin.container(tokens, intent, size, { icon: !!icon, block: !!block, dim: !!(disabled || loading) });
+    const ripple = skin.ripple ? skin.ripple(tokens, intent) : undefined;
+
+    return (
+      <Pressable
+        onPress={onPress}
+        disabled={disabled || loading}
+        accessibilityRole="button"
+        android_ripple={ripple}
+        style={({ pressed }) => [
+          container,
+          skin.pressedOpacity != null && pressed ? { opacity: skin.pressedOpacity } : null,
+          style,
+        ]}
+      >
+        {loading ? <ActivityIndicator size="small" color={tokens[FG_TOKEN[intent]]} /> : null}
+        {children != null ? <Text style={skin.label(tokens, intent, size)}>{children}</Text> : null}
+      </Pressable>
+    );
+  };
+}

package/src/atoms/button/button.styles.ts

@@ -0,0 +1,152 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens } from "../../style/index.js";
+
+// Co-located Button skins, one per platform. The BRAND survives on every platform
+// (fills/labels use the indigo `primary` and the semantic tokens, never a platform
+// default); only the native SHAPE, sizing, label weight, and press feedback change:
+//   iOS (HIG / iOS 26+ Liquid Glass): capsule (fully rounded), semibold SF-scale label, dim-on-press.
+//   Android (Material 3): fully-rounded pill, medium label, flat, ripple.
+//   Web: the established Canvas look (rounded-md, medium label, opacity press).
+
+export type Intent = "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+export type Size = "small" | "base" | "large";
+
+export interface ButtonSkinOpts {
+  icon: boolean;
+  block: boolean;
+  /** disabled or loading: dim the control. */
+  dim: boolean;
+}
+
+export interface ButtonSkin {
+  container: (t: ColorTokens, intent: Intent, size: Size, opts: ButtonSkinOpts) => ViewStyle;
+  label: (t: ColorTokens, intent: Intent, size: Size) => TextStyle;
+  /** iOS/web dim the fill on press; Android uses a ripple instead (null). */
+  pressedOpacity: number | null;
+  ripple: ((t: ColorTokens, intent: Intent) => { color: string; borderless: boolean }) | null;
+}
+
+// --- shared brand mapping (identical across platforms) ----------------------
+
+/** Foreground token per intent: the label color and the loading-spinner color. */
+export const FG_TOKEN: Record<Intent, keyof ColorTokens> = {
+  primary: "primary-foreground",
+  secondary: "secondary-foreground",
+  destructive: "destructive-foreground",
+  outline: "foreground",
+  ghost: "foreground",
+  link: "primary",
+};
+
+const DARK_FILL = new Set<Intent>(["primary", "destructive"]);
+
+// Container fill/border per intent (brand colors, shared by all platforms).
+function fill(t: ColorTokens, intent: Intent): ViewStyle {
+  switch (intent) {
+    case "primary": return { backgroundColor: t.primary };
+    case "secondary": return { backgroundColor: t.secondary };
+    case "destructive": return { backgroundColor: t.destructive };
+    case "outline": return { backgroundColor: "transparent", borderWidth: 1, borderColor: t.input };
+    case "ghost": return { backgroundColor: "transparent" };
+    case "link": return { backgroundColor: "transparent" };
+  }
+}
+
+// Label color (+ underline for link) per intent.
+function labelColor(t: ColorTokens, intent: Intent): TextStyle {
+  switch (intent) {
+    case "primary": return { color: t["primary-foreground"] };
+    case "secondary": return { color: t["secondary-foreground"] };
+    case "destructive": return { color: t["destructive-foreground"] };
+    case "outline": return { color: t.foreground };
+    case "ghost": return { color: t.foreground };
+    case "link": return { color: t.primary, textDecorationLine: "underline" };
+  }
+}
+
+// Android ripple over a fill: a light ripple on dark fills, a dark one on light/
+// transparent fills, so the Material press feedback reads on every variant.
+function androidRipple(_t: ColorTokens, intent: Intent) {
+  return { color: DARK_FILL.has(intent) ? "rgba(255, 255, 255, 0.24)" : "rgba(0, 0, 0, 0.10)", borderless: false };
+}
+
+const ROW: ViewStyle = { flexDirection: "row", alignItems: "center", justifyContent: "center" };
+
+// ---------- Web: the established Canvas look ----------
+export const webSkin: ButtonSkin = {
+  container: (t, intent, size, o) => ({
+    ...ROW,
+    gap: 8,
+    borderRadius: 6,
+    ...(o.icon
+      ? sq(size === "small" ? 32 : size === "large" ? 48 : 40)
+      : size === "small" ? { paddingHorizontal: 12, paddingVertical: 6 }
+      : size === "large" ? { paddingHorizontal: 24, paddingVertical: 12 }
+      : { paddingHorizontal: 16, paddingVertical: 8 }),
+    ...fill(t, intent),
+    ...(o.block ? { width: "100%" } : null),
+    ...(o.dim ? { opacity: 0.5 } : null),
+  }),
+  label: (t, intent, size) => ({
+    fontWeight: "500",
+    ...(size === "large" ? FS(16, 24) : size === "small" ? FS(12, 16) : FS(14, 20)),
+    ...labelColor(t, intent),
+  }),
+  pressedOpacity: 0.9,
+  ripple: null,
+};
+
+// ---------- iOS (HIG / iOS 26+ Liquid Glass): capsule, semibold, dim on press ----------
+export const iosSkin: ButtonSkin = {
+  container: (t, intent, size, o) => ({
+    ...ROW,
+    gap: 6,
+    borderRadius: 9999, // iOS 27 prominent buttons are capsules (full pill at every size); icon = circle
+    ...(o.icon
+      ? sq(size === "small" ? 36 : size === "large" ? 52 : 44)
+      : size === "small" ? { paddingHorizontal: 14, paddingVertical: 8 }
+      : size === "large" ? { paddingHorizontal: 24, paddingVertical: 15 }
+      : { paddingHorizontal: 20, paddingVertical: 12 }),
+    ...fill(t, intent),
+    ...(o.block ? { width: "100%" } : null),
+    ...(o.dim ? { opacity: 0.5 } : null),
+  }),
+  label: (t, intent, size) => ({
+    fontWeight: "600",
+    ...(size === "small" ? FS(15, 20) : FS(17, 22)),
+    ...labelColor(t, intent),
+  }),
+  pressedOpacity: 0.8,
+  ripple: null,
+};
+
+// ---------- Android (Material 3 filled): pill, medium label, flat, ripple ----------
+export const androidSkin: ButtonSkin = {
+  container: (t, intent, size, o) => ({
+    ...ROW,
+    gap: 8,
+    borderRadius: 9999, // M3 filled button = fully rounded (stadium); icon = circle
+    ...(o.icon
+      ? sq(size === "small" ? 32 : size === "large" ? 48 : 40)
+      : size === "small" ? { paddingHorizontal: 16, paddingVertical: 6 }
+      : size === "large" ? { paddingHorizontal: 24, paddingVertical: 13 }
+      : { paddingHorizontal: 24, paddingVertical: 10 }),
+    ...fill(t, intent),
+    ...(o.block ? { width: "100%" } : null),
+    ...(o.dim ? { opacity: 0.38 } : null), // M3 disabled opacity
+  }),
+  label: (t, intent, size) => ({
+    fontWeight: "500",
+    ...(size === "small" ? FS(13, 18) : FS(14, 20)),
+    ...labelColor(t, intent),
+  }),
+  pressedOpacity: null,
+  ripple: androidRipple,
+};
+
+function sq(d: number): ViewStyle {
+  return { width: d, height: d };
+}
+function FS(fontSize: number, lineHeight: number): TextStyle {
+  return { fontSize, lineHeight };
+}

package/src/atoms/button/button.tsx

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

package/src/atoms/button-group/button-group.android.tsx

@@ -0,0 +1,6 @@
+import { createButtonGroup } from "./button-group.shared.js";
+import { androidSkin } from "./button-group.styles.js";
+
+// Material 3 SegmentedButton ButtonGroup. Metro resolves this file on Android; the docs import it for preview.
+export const ButtonGroup = createButtonGroup(androidSkin);
+export type { ButtonGroupProps } from "./button-group.shared.js";

package/src/atoms/button-group/button-group.ios.tsx

@@ -0,0 +1,6 @@
+import { createButtonGroup } from "./button-group.shared.js";
+import { iosSkin } from "./button-group.styles.js";
+
+// iOS (UISegmentedControl) ButtonGroup. Metro resolves this file on iOS; the docs import it for preview.
+export const ButtonGroup = createButtonGroup(iosSkin);
+export type { ButtonGroupProps } from "./button-group.shared.js";