@olympusoss/canvas 4.0.0 → 5.0.0

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

@@ -0,0 +1,483 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, alpha, shadow } from "../../style/index.js";
+import { type ButtonGroupSkin, type Size } from "./button-group.shared.js";
+
+// Co-located ButtonGroup skins, one per platform. The group is laid out per
+// segment in JS (there are no `first:`/`last:` style variants, so the joined-
+// corner and shared-border math is computed here). The BRAND survives on every
+// platform (the indigo `primary` token and the semantic tokens, never a platform
+// default), and only the native SHAPE, sizing, structure, and press feedback
+// change per OS:
+//   iOS (UISegmentedControl): a gray rounded CONTAINER (radius 8, muted fill,
+//     ~3px inset) holding segments; the SELECTED segment is a raised white pill
+//     (radius 6, small shadow) with NO visible dividers (iOS 13+ style); labels
+//     ~13pt. Press = opacity dim.
+//   Android (M3 SegmentedButton): the GROUP is a fully-rounded stadium (1dp
+//     `border` outline); segments share 1dp borders (no gap); the SELECTED
+//     segment is a tonal fill (alpha(primary, .12)) with a brand-indigo label and
+//     a leading check; press = android_ripple.
+//   Web: the established Canvas look (joined buttons; selected = solid primary
+//     fill; shared 1px borders overlapped by -1px), lifted verbatim.
+
+// --- shared size scales (brand type/sizing, identical across platforms) ------
+
+// Height + horizontal padding per size, mirroring the docs segSize scale
+// (h-8 px-3 / h-9 px-4 / h-10 px-5).
+export const sizeContainer: Record<Size, ViewStyle> = {
+  small: { height: 32, paddingHorizontal: 12 },
+  default: { height: 36, paddingHorizontal: 16 },
+  large: { height: 40, paddingHorizontal: 20 },
+};
+
+// Label type per size (text-xs for small, text-sm otherwise).
+export const sizeLabel: Record<Size, TextStyle> = {
+  small: { fontSize: 12, lineHeight: 16 },
+  default: { fontSize: 14, lineHeight: 20 },
+  large: { fontSize: 14, lineHeight: 20 },
+};
+
+// Height-only per size, for cells whose padding differs from sizeContainer
+// (the split chevron and the stepper's chevron cells: h-8 / h-9 / h-10).
+export const sizeHeight: Record<Size, number> = {
+  small: 32,
+  default: 36,
+  large: 40,
+};
+
+// Chevron glyph px per size (small gets the tighter 14px arrow).
+export const chevronSize: Record<Size, number> = {
+  small: 14,
+  default: 16,
+  large: 16,
+};
+
+// --- shared layout fragments (color-free; identical across platforms) --------
+
+// Row of a centered label inside a cell. Border width is supplied by the skin
+// (iOS segments are borderless; Android/web are 1px). Press feedback is applied
+// by the component's Pressable.
+export const segmentBase: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+// The dimmed look applied to a disabled group/segment (opacity-50).
+export const dim: ViewStyle = { opacity: 0.5 };
+
+// The split control's outer row, anchoring the (absolute) dropdown.
+export const splitContainer: ViewStyle = {
+  position: "relative",
+  flexDirection: "row",
+  alignItems: "center",
+  alignSelf: "flex-start",
+};
+
+// When the split dropdown is open, the container is lifted into its own stacking
+// context above sibling content. react-native-web gives every positioned View an
+// implicit stacking context, so the menu's own `zIndex` is scoped INSIDE the
+// `relative` container and cannot rise above a later sibling. Raising the
+// container's zIndex while open lifts the whole control — buttons and menu
+// together — above everything painted after it.
+export const splitContainerLifted: ViewStyle = { zIndex: 50 };
+
+// A split-menu dropdown row: padded, rounded; the pressed branch tints it.
+export const splitMenuItem: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  borderRadius: 2,
+  paddingHorizontal: 8,
+  paddingVertical: 6,
+};
+
+// The stepper's outer row.
+export const stepperContainer: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  alignSelf: "flex-start",
+};
+
+// A plain row of detached peers separated by a gap (gap-2).
+export const spacedContainer: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 8,
+};
+
+// The attached-segment row (no gap; segments share borders).
+export const segmentedContainer: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+};
+
+// =============================================================================
+// Web: the established Canvas look (lifted verbatim from the original file).
+// =============================================================================
+
+export const webSkin: ButtonGroupSkin = {
+  // No wrapper around segmented (the row is bare); selected lifts above its
+  // neighbors so its primary border wins on the shared edges.
+  segmentedWrap: () => null,
+  segmentBorderWidth: 1,
+  joinCorners(index, count) {
+    if (count === 1) return { borderRadius: 6 };
+    if (index === 0) return { borderTopLeftRadius: 6, borderBottomLeftRadius: 6 };
+    if (index === count - 1) return { borderTopRightRadius: 6, borderBottomRightRadius: 6 };
+    return {};
+  },
+  spacedCorners: { borderRadius: 6 },
+  // All but the leading segment overlap the previous border by 1px (-ml-px).
+  overlap: { marginLeft: -1 },
+  segmentSurface(t, selected) {
+    return selected
+      ? { zIndex: 10, borderColor: t.primary, backgroundColor: t.primary }
+      : { borderColor: t.input, backgroundColor: t.background };
+  },
+  segmentLabel(t, selected) {
+    return { fontWeight: "500", color: selected ? t["primary-foreground"] : t.foreground };
+  },
+  showSelectedCheck: false,
+
+  // --- split ---
+  splitPrimary(t) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderTopLeftRadius: 6,
+      borderBottomLeftRadius: 6,
+      backgroundColor: t.primary,
+    };
+  },
+  splitPrimaryLabel(t) {
+    return { fontWeight: "500", color: t["primary-foreground"] };
+  },
+  splitDivider(t, height) {
+    return { width: 1, height, backgroundColor: alpha(t["primary-foreground"], 0.2) };
+  },
+  splitTrigger(t, height) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderTopRightRadius: 6,
+      borderBottomRightRadius: 6,
+      backgroundColor: t.primary,
+      paddingHorizontal: 8,
+      height,
+    };
+  },
+  splitChevronColor: "primaryForeground",
+  splitMenu(t) {
+    return {
+      position: "absolute",
+      top: "100%",
+      right: 0,
+      zIndex: 50,
+      marginTop: 4,
+      minWidth: 180,
+      borderRadius: 6,
+      borderWidth: 1,
+      borderColor: t.border,
+      backgroundColor: t.popover,
+      padding: 4,
+      ...shadow("lg"),
+    };
+  },
+  splitMenuItemPressed(t) {
+    return { backgroundColor: t.accent };
+  },
+  splitMenuText(t) {
+    return { fontSize: 14, lineHeight: 20, color: t["popover-foreground"] };
+  },
+
+  // --- stepper ---
+  stepperArrow(t, height) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 1,
+      borderColor: t.input,
+      backgroundColor: t.background,
+      paddingHorizontal: 8,
+      height,
+    };
+  },
+  stepperArrowLeft: { borderTopLeftRadius: 6, borderBottomLeftRadius: 6 },
+  stepperArrowRight: { marginLeft: -1, borderTopRightRadius: 6, borderBottomRightRadius: 6 },
+  stepperMiddle(t) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 1,
+      marginLeft: -1,
+      borderColor: t.input,
+      backgroundColor: t.background,
+    };
+  },
+  stepperLabel(t) {
+    return { fontWeight: "500", color: t.foreground };
+  },
+  stepperChevronColor: "muted",
+
+  pressedOpacity: 0.9,
+};
+
+// =============================================================================
+// iOS (UISegmentedControl): gray rounded container, raised white selected pill.
+// =============================================================================
+
+const IOS_PILL_SHADOW: ViewStyle = {
+  shadowColor: "#000000",
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.18,
+  shadowRadius: 2,
+  elevation: 2,
+};
+
+export const iosSkin: ButtonGroupSkin = {
+  // The gray CAPSULE track that holds the segments (radius 9999, muted fill, a
+  // 3px inset so the selected pill floats inside). iOS 26+ (Liquid Glass) draws
+  // the segmented control as a capsule, not a rounded rectangle.
+  segmentedWrap(t) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      alignSelf: "flex-start",
+      padding: 3,
+      borderRadius: 9999,
+      backgroundColor: t.muted,
+    };
+  },
+  segmentBorderWidth: 0, // iOS 13+ has no visible dividers/borders
+  joinCorners() {
+    // Every segment is an independent CAPSULE pill (radius 9999) inside the
+    // track; the selected one floats as a raised white capsule.
+    return { borderRadius: 9999 };
+  },
+  spacedCorners: { borderRadius: 8 },
+  overlap: null, // no shared borders; the track's padding spaces them
+  segmentSurface(t, selected) {
+    return selected
+      ? { ...IOS_PILL_SHADOW, backgroundColor: t.background }
+      : { backgroundColor: "transparent" };
+  },
+  segmentLabel(t, selected) {
+    // ~13pt SF label; selected reads slightly heavier. Both stay on-foreground
+    // (the selected pill is white/elevated, not a brand fill).
+    return { fontWeight: selected ? "600" : "500", color: t.foreground };
+  },
+  showSelectedCheck: false,
+
+  // --- split (HIG: primary action + chevron, brand fill, rounded ~8) ---
+  splitPrimary(t) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderTopLeftRadius: 8,
+      borderBottomLeftRadius: 8,
+      backgroundColor: t.primary,
+    };
+  },
+  splitPrimaryLabel(t) {
+    return { fontWeight: "600", color: t["primary-foreground"] };
+  },
+  splitDivider(t, height) {
+    return { width: 1, height, backgroundColor: alpha(t["primary-foreground"], 0.2) };
+  },
+  splitTrigger(t, height) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderTopRightRadius: 8,
+      borderBottomRightRadius: 8,
+      backgroundColor: t.primary,
+      paddingHorizontal: 10,
+      height,
+    };
+  },
+  splitChevronColor: "primaryForeground",
+  splitMenu(t) {
+    return {
+      position: "absolute",
+      top: "100%",
+      right: 0,
+      zIndex: 50,
+      marginTop: 6,
+      minWidth: 200,
+      borderRadius: 12, // HIG menu sheet
+      borderWidth: 0,
+      borderColor: t.border,
+      backgroundColor: t.popover,
+      padding: 6,
+      ...shadow("lg"),
+    };
+  },
+  splitMenuItemPressed(t) {
+    return { backgroundColor: t.accent };
+  },
+  splitMenuText(t) {
+    return { fontSize: 15, lineHeight: 20, color: t["popover-foreground"] };
+  },
+
+  // --- stepper (HIG: gray-tracked prev/current/next, rounded 8) ---
+  stepperArrow(t, height) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 0,
+      backgroundColor: t.muted,
+      paddingHorizontal: 10,
+      height,
+    };
+  },
+  stepperArrowLeft: { borderTopLeftRadius: 8, borderBottomLeftRadius: 8 },
+  stepperArrowRight: { marginLeft: 1, borderTopRightRadius: 8, borderBottomRightRadius: 8 },
+  stepperMiddle(t) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 0,
+      marginLeft: 1,
+      backgroundColor: t.muted,
+    };
+  },
+  stepperLabel(t) {
+    return { fontWeight: "600", color: t.foreground };
+  },
+  stepperChevronColor: "foreground",
+
+  pressedOpacity: 0.8,
+};
+
+// =============================================================================
+// Android (Material 3 SegmentedButton): stadium group, tonal selected fill.
+// =============================================================================
+
+export const androidSkin: ButtonGroupSkin = {
+  // The group is a fully-rounded stadium outlined in 1dp `border`; the segments
+  // sit inside and supply their own shared 1dp dividers.
+  segmentedWrap(t) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      alignSelf: "flex-start",
+      borderRadius: 9999,
+      borderWidth: 1,
+      borderColor: t.border,
+      overflow: "hidden",
+    };
+  },
+  segmentBorderWidth: 0, // the wrap draws the outer outline; dividers are drawn below
+  joinCorners() {
+    // The stadium wrap clips the corners; segments themselves are square.
+    return {};
+  },
+  spacedCorners: { borderRadius: 9999 },
+  // Each segment after the first draws a 1dp leading divider in the outline color.
+  overlap: null,
+  segmentDivider: (t) => ({ borderLeftWidth: 1, borderLeftColor: t.border }),
+  segmentSurface(t, selected) {
+    // Selected = tonal fill (secondaryContainer ≈ alpha(primary, .12)).
+    return selected ? { backgroundColor: alpha(t.primary, 0.12) } : { backgroundColor: "transparent" };
+  },
+  segmentLabel(t, selected) {
+    // labelMedium; selected reads in brand indigo (onSecondaryContainer ≈ primary).
+    return { fontWeight: "500", color: selected ? t.primary : t.foreground };
+  },
+  showSelectedCheck: true,
+
+  // --- split (M3: brand-filled primary + chevron, stadium) ---
+  splitPrimary(t) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderTopLeftRadius: 9999,
+      borderBottomLeftRadius: 9999,
+      backgroundColor: t.primary,
+    };
+  },
+  splitPrimaryLabel(t) {
+    return { fontWeight: "500", color: t["primary-foreground"] };
+  },
+  splitDivider(t, height) {
+    return { width: 1, height, backgroundColor: alpha(t["primary-foreground"], 0.24) };
+  },
+  splitTrigger(t, height) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderTopRightRadius: 9999,
+      borderBottomRightRadius: 9999,
+      backgroundColor: t.primary,
+      paddingHorizontal: 10,
+      height,
+    };
+  },
+  splitChevronColor: "primaryForeground",
+  splitMenu(t) {
+    return {
+      position: "absolute",
+      top: "100%",
+      right: 0,
+      zIndex: 50,
+      marginTop: 4,
+      minWidth: 200,
+      borderRadius: 4, // M3 menu container
+      borderWidth: 0,
+      borderColor: t.border,
+      backgroundColor: t.popover,
+      paddingVertical: 8,
+      ...shadow("lg"),
+    };
+  },
+  splitMenuItemPressed(t) {
+    return { backgroundColor: alpha(t.primary, 0.12) };
+  },
+  splitMenuText(t) {
+    return { fontSize: 14, lineHeight: 20, color: t["popover-foreground"] };
+  },
+
+  // --- stepper (M3: outlined stadium prev/current/next) ---
+  stepperArrow(t, height) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 1,
+      borderColor: t.border,
+      backgroundColor: "transparent",
+      paddingHorizontal: 10,
+      height,
+    };
+  },
+  stepperArrowLeft: { borderTopLeftRadius: 9999, borderBottomLeftRadius: 9999 },
+  stepperArrowRight: { marginLeft: -1, borderTopRightRadius: 9999, borderBottomRightRadius: 9999 },
+  stepperMiddle(t) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      marginLeft: -1,
+      borderColor: t.border,
+      backgroundColor: "transparent",
+    };
+  },
+  stepperLabel(t) {
+    return { fontWeight: "500", color: t.foreground };
+  },
+  stepperChevronColor: "muted",
+
+  pressedOpacity: null, // Android uses a ripple instead
+  ripple: (t) => ({ color: alpha(t.primary, 0.12), borderless: false }),
+};

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

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

package/src/atoms/checkbox/checkbox.android.tsx

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

package/src/atoms/checkbox/checkbox.ios.tsx

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

package/src/atoms/checkbox/checkbox.md

@@ -0,0 +1,150 @@
+# Checkboxes
+
+Multi-select option, single yes/no, grouped lists.
+
+## Usage
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
+  <Checkbox checked />
+  <View style={{ gap: 2 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Email notifications</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Get notified when activity happens on your account.</Text>
+  </View>
+</View>
+```
+
+## Variants
+
+### State - unchecked
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
+  <Checkbox />
+  <View style={{ gap: 2 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Email notifications</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Get notified when activity happens on your account.</Text>
+  </View>
+</View>
+```
+
+### State - disabled
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
+  <Checkbox disabled />
+  <View style={{ gap: 2 }}>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Email notifications</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Get notified when activity happens on your account.</Text>
+  </View>
+</View>
+```
+
+## Do & Don't
+
+### Unchecked
+
+**Do** — Leave opt-in consent unchecked so agreeing is a deliberate act the user takes.
+
+```tsx
+<Checkbox>Email me product news, offers, and survey invitations.</Checkbox>
+```
+
+**Don't** — A consent box that starts checked opts users in by default; under GDPR pre-ticked consent is not consent.
+
+```tsx
+<Checkbox checked>Email me product news, offers, and survey invitations.</Checkbox>
+```
+
+### Checked
+
+**Do** — Show the parent indeterminate (a dash, not a tick) when only some children are checked.
+
+```tsx
+<View style={{ gap: 8 }}>
+  <Checkbox indeterminate>Select all</Checkbox>
+  <View style={{ marginLeft: 24, gap: 8 }}>
+    <Checkbox checked>Read</Checkbox>
+    <Checkbox>Write</Checkbox>
+    <Checkbox>Delete</Checkbox>
+  </View>
+</View>
+```
+
+**Don't** — A fully checked parent claims every child is selected when only one is, so the state reads as a lie.
+
+```tsx
+<View style={{ gap: 8 }}>
+  <Checkbox checked>Select all</Checkbox>
+  <View style={{ marginLeft: 24, gap: 8 }}>
+    <Checkbox checked>Read</Checkbox>
+    <Checkbox>Write</Checkbox>
+    <Checkbox>Delete</Checkbox>
+  </View>
+</View>
+```
+
+### Disabled
+
+**Do** — Say why it's unavailable, like a plan gate, or don't show it at all.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+  <Checkbox disabled>Export to CSV</Checkbox>
+  <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>(Pro plan)</Text>
+</View>
+```
+
+**Don't** — A disabled option with no reason leaves users stuck and guessing.
+
+```tsx
+<Checkbox disabled>Export to CSV</Checkbox>
+```
+
+### Selection
+
+**Do** — Radios for one-of-many; reserve checkboxes for independent multi-select.
+
+```tsx
+<View style={{ gap: 8 }}>
+  <Text style={{ marginBottom: 4, fontSize: 14, lineHeight: 20, fontWeight: "600", color: tokens.foreground }}>Plan</Text>
+  <Radio>Free</Radio>
+  <Radio checked>Pro</Radio>
+  <Radio>Enterprise</Radio>
+</View>
+```
+
+**Don't** — Checkboxes allow multiple selections; for a one-of choice they let users pick contradictory options.
+
+```tsx
+<View style={{ gap: 8 }}>
+  <Text style={{ marginBottom: 4, fontSize: 14, lineHeight: 20, fontWeight: "600", color: tokens.foreground }}>Plan</Text>
+  <Checkbox>Free</Checkbox>
+  <Checkbox checked>Pro</Checkbox>
+  <Checkbox>Enterprise</Checkbox>
+</View>
+```
+
+### With description
+
+**Do** — Wrap the box, label, and description in a <label> so the whole row toggles.
+
+```tsx
+<Checkbox checked>
+  <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Email notifications</Text>
+  <Text style={{ fontSize: 12, lineHeight: 16, fontWeight: "400", color: tokens["muted-foreground"] }}>
+Get notified when activity happens on your account.</Text>
+</Checkbox>
+```
+
+**Don't** — A bare div makes only the 16px box clickable; the label text does nothing.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
+  <Checkbox checked />
+  <View>
+    <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Email notifications</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Get notified when activity happens on your account.</Text>
+  </View>
+</View>
+```