melta-app 0.1.0

package/src/components/Toggle.tsx

@@ -0,0 +1,94 @@
+/**
+ * Toggle — ON/OFF スイッチ（contract: toggle）。custom track+thumb 実装。
+ *
+ * - RN Switch は token 制御（track/thumb 色 + サイズ段階）が弱いため使わない
+ *   （recipe description の規約）。Pressable の track + 内側 thumb で組む。
+ * - variant（off/on = variantModeledStates）は value:boolean から暗黙決定する。
+ * - thumb 位置: track に padding=thumbOffset を持たせ、value で justifyContent
+ *   flex-start / flex-end を切り替える（アニメは Phase 外）。
+ * - disabled: recipe states.disabled の opacity + accessibilityState.disabled + onPress 無効。
+ * - a11y: accessibilityRole="switch" + accessibilityState.checked。label があれば右に表示し、
+ *   Pressable 全体がタップ領域 + accessibilityLabel になる。
+ * - 色・寸法の決定は pure resolver（toggle.styles.ts）に分離。
+ *   recipes/app/toggle.recipe.json との機械照合は scripts/lib/toggle-conformance.test.ts が行う。
+ */
+
+import { useMemo } from "react";
+import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
+import { Text } from "../primitives/Text";
+import { useTheme } from "../theme";
+import { CONTRACTS } from "../contracts/contract-types";
+import {
+  resolveToggleStyle,
+  TOGGLE_DISABLED_OPACITY,
+  type ToggleSize,
+  type ToggleVariant,
+} from "./toggle.styles";
+
+interface ToggleProps {
+  /** 現在値（true=on / false=off。variant はここから暗黙決定）。 */
+  value: boolean;
+  onValueChange?: (value: boolean) => void;
+  /** あれば track の右にラベル表示（Pressable 全体がタップ領域）。 */
+  label?: string;
+  size?: ToggleSize;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function Toggle({
+  value,
+  onValueChange,
+  label,
+  size = "medium",
+  disabled = false,
+  style,
+  testID,
+}: ToggleProps) {
+  const { theme, mode } = useTheme();
+
+  const variant: ToggleVariant = value ? "on" : "off";
+  const resolved = useMemo(
+    () => resolveToggleStyle(theme, mode, { variant, size }),
+    [theme, mode, variant, size],
+  );
+
+  return (
+    <Pressable
+      onPress={() => onValueChange?.(!value)}
+      disabled={disabled}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: value, disabled }}
+      accessibilityLabel={label}
+      testID={testID}
+      style={[
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          alignSelf: "flex-start",
+          gap: theme.spacing["2"],
+          opacity: disabled ? TOGGLE_DISABLED_OPACITY : 1,
+        },
+        style,
+      ]}
+    >
+      <View
+        style={[
+          resolved.track,
+          {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: value ? "flex-end" : "flex-start",
+          },
+        ]}
+      >
+        <View style={resolved.thumb} />
+      </View>
+      {label != null && <Text>{label}</Text>}
+    </Pressable>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Toggle.__contract = CONTRACTS.toggle;

package/src/components/action-sheet.styles.ts

@@ -0,0 +1,102 @@
+/**
+ * action-sheet.styles — ActionSheet の pure style resolver（styleRefs conformance 対応で
+ * ActionSheet.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/action-sheet.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/action-sheet-conformance.test.ts が行う。
+ *
+ * - actions は縦積み（区切り線 border-default）、cancel は下に分離した独立ブロック。
+ * - destructive アクションは actionTextStyle の色を destructiveColor（status.danger.base）に
+ *   差し替える（destructiveTextStyle）。
+ * - overlay の黒 50% は token 外の literal（modal と同じ）。
+ * - sheet の下余白（SafeArea）は実装（ActionSheet.tsx）が SafeAreaView で加算する。
+ */
+
+import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+
+/** overlay の黒 50%（token 外 literal。modal と同値）。 */
+// eslint-disable-next-line melta/no-raw-color -- overlay の黒 50% は契約上 token 外の literal（recipe description / web の bg-black/50 と同値）
+export const ACTION_SHEET_OVERLAY_COLOR = "rgba(0,0,0,0.5)";
+
+export interface ActionSheetStyle {
+  overlayStyle: {
+    flex: 1;
+    backgroundColor: string;
+    justifyContent: "flex-end";
+    padding: number;
+  };
+  sheetStyle: { backgroundColor: string; borderRadius: number; overflow: "hidden" };
+  titleStyle: {
+    fontSize: number;
+    color: string;
+    textAlign: "center";
+    paddingVertical: number;
+  };
+  actionStyle: {
+    paddingVertical: number;
+    alignItems: "center";
+    borderTopWidth: 1;
+    borderTopColor: string;
+  };
+  actionTextStyle: { fontSize: number; color: string };
+  destructiveTextStyle: { fontSize: number; color: string };
+  cancelStyle: {
+    backgroundColor: string;
+    borderRadius: number;
+    marginTop: number;
+    paddingVertical: number;
+    alignItems: "center";
+  };
+  cancelTextStyle: { fontSize: number; fontWeight: FontWeightValue; color: string };
+}
+
+/** mode → ActionSheet style の解決（action-sheet.recipe styleRefs の 1:1 写像）。 */
+export function resolveActionSheetStyle(theme: NativeTheme, mode: ThemeMode): ActionSheetStyle {
+  const semantic = theme.color.semantic[mode];
+  return {
+    overlayStyle: {
+      flex: 1,
+      backgroundColor: ACTION_SHEET_OVERLAY_COLOR,
+      justifyContent: "flex-end",
+      padding: theme.spacing["2"],
+    },
+    sheetStyle: {
+      backgroundColor: semantic["bg-surface"],
+      borderRadius: theme.radius.lg,
+      overflow: "hidden",
+    },
+    titleStyle: {
+      fontSize: theme.typography.fontSize.sm.fontSize,
+      color: semantic["text-muted"],
+      textAlign: "center",
+      paddingVertical: theme.spacing["3"],
+    },
+    actionStyle: {
+      paddingVertical: theme.spacing["4"],
+      alignItems: "center",
+      borderTopWidth: 1,
+      borderTopColor: semantic["border-default"],
+    },
+    actionTextStyle: {
+      fontSize: theme.typography.fontSize.lg.fontSize,
+      color: theme.color.primary["500"],
+    },
+    destructiveTextStyle: {
+      fontSize: theme.typography.fontSize.lg.fontSize,
+      color: theme.color.status.danger.base,
+    },
+    cancelStyle: {
+      backgroundColor: semantic["bg-surface"],
+      borderRadius: theme.radius.lg,
+      marginTop: theme.spacing["2"],
+      paddingVertical: theme.spacing["4"],
+      alignItems: "center",
+    },
+    cancelTextStyle: {
+      fontSize: theme.typography.fontSize.lg.fontSize,
+      fontWeight: theme.typography.fontWeight.semibold,
+      color: theme.color.primary["500"],
+    },
+  };
+}

package/src/components/alert.styles.ts

@@ -0,0 +1,115 @@
+/**
+ * alert.styles — Alert の pure style resolver（styleRefs conformance 対応で Alert.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/alert.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/alert-conformance.test.ts が行う。
+ *
+ * - RN では border を持たず bg subtle + text 色で表現する（status token に border 用の中間色が
+ *   無いため。COLOR_ONLY_FORBIDDEN は title/message のテキストと icon slot で担保、recipe description）。
+ * - dark mode は status.*.subtleDark / textDark 側を解決する。info variant のみ primary 固定
+ *   （dark token が無い既知の割り切り、web と同じ）。
+ */
+
+import type {
+  FontSizeKey,
+  FontWeightKey,
+  FontWeightValue,
+  NativeTheme,
+  RadiusKey,
+  SpacingKey,
+  ThemeMode,
+} from "../theme";
+
+export type AlertVariant = "info" | "success" | "warning" | "error";
+
+/**
+ * 構成キー（token キー）。component は Text にこのキーをそのまま渡し、resolver は同じキーから
+ * style 値を解決する（component と resolver が別々のキーを持って drift する事故を防ぐ SSOT）。
+ */
+export const ALERT_SPEC = {
+  padding: "4",
+  gap: "3",
+  radius: "md",
+  titleFont: "base",
+  titleWeight: "medium",
+  messageFont: "sm",
+} as const satisfies {
+  padding: SpacingKey;
+  gap: SpacingKey;
+  radius: RadiusKey;
+  titleFont: FontSizeKey;
+  titleWeight: FontWeightKey;
+  messageFont: FontSizeKey;
+};
+
+/** slot 構成（alert.recipe 各 variant の containerStyle / titleStyle / messageStyle と 1:1）。 */
+export interface AlertStyles {
+  containerStyle: {
+    backgroundColor: string;
+    borderRadius: number;
+    padding: number;
+    flexDirection: "row";
+    alignItems: "flex-start";
+    gap: number;
+  };
+  /** compose する Text primitive（title）へ渡す値の解決結果 */
+  titleStyle: {
+    color: string;
+    fontSize: number;
+    fontWeight: FontWeightValue;
+  };
+  /** compose する Text primitive（message）へ渡す値の解決結果 */
+  messageStyle: {
+    color: string;
+    fontSize: number;
+  };
+}
+
+/**
+ * variant → bg / text 色の解決。
+ * - info: primary.50 / primary.800 固定（mode 非依存）。
+ * - success / warning / error: status token（error は status キー上は danger）。
+ *   light は subtleLight / textLight、dark は subtleDark / textDark（recipe description の写像）。
+ */
+export function resolveAlertColors(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  variant: AlertVariant,
+): { bg: string; text: string } {
+  if (variant === "info") {
+    return { bg: theme.color.primary["50"], text: theme.color.primary["800"] };
+  }
+  const status = theme.color.status[variant === "error" ? "danger" : variant];
+  return mode === "dark"
+    ? { bg: status.subtleDark, text: status.textDark }
+    : { bg: status.subtleLight, text: status.textLight };
+}
+
+/** variant → 全 slot の style 解決（alert.recipe styleRefs の 1:1 写像）。 */
+export function resolveAlertStyles(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  variant: AlertVariant,
+): AlertStyles {
+  const { bg, text } = resolveAlertColors(theme, mode, variant);
+  return {
+    containerStyle: {
+      backgroundColor: bg,
+      borderRadius: theme.radius[ALERT_SPEC.radius],
+      padding: theme.spacing[ALERT_SPEC.padding],
+      flexDirection: "row",
+      alignItems: "flex-start",
+      gap: theme.spacing[ALERT_SPEC.gap],
+    },
+    titleStyle: {
+      color: text,
+      fontSize: theme.typography.fontSize[ALERT_SPEC.titleFont].fontSize,
+      fontWeight: theme.typography.fontWeight[ALERT_SPEC.titleWeight],
+    },
+    messageStyle: {
+      color: text,
+      fontSize: theme.typography.fontSize[ALERT_SPEC.messageFont].fontSize,
+    },
+  };
+}

package/src/components/avatar.styles.ts

@@ -0,0 +1,110 @@
+/**
+ * avatar.styles — Avatar の pure style resolver（styleRefs conformance 対応で Avatar.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/avatar.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/avatar-conformance.test.ts が行う。
+ */
+
+import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+
+export type AvatarSize = "small" | "medium" | "large";
+export type AvatarStatus = "online" | "away" | "offline";
+
+/** サイズ軸（contract sizes の height と 1:1。recipe sizes の width/height/dotSize/fontSize に対応）。 */
+const SIZE_TABLE = {
+  small: { box: 32, dot: 8, fontSize: "xs" },
+  medium: { box: 40, dot: 10, fontSize: "sm" },
+  large: { box: 48, dot: 12, fontSize: "base" },
+} as const;
+
+/** group の重なり（-spacing.2 相当。負値 token が無いため recipe と同じ literal）。 */
+export const AVATAR_GROUP_OVERLAP = -8;
+
+/**
+ * group variant（avatar.recipe の group.style / group.overlapStyle の 1:1 写像）。
+ * container は横並び、2枚目以降の子に overlap（負 margin）を適用する。
+ */
+export function resolveAvatarGroupStyle(): {
+  container: { flexDirection: "row" };
+  overlap: { marginLeft: number };
+} {
+  return {
+    container: { flexDirection: "row" },
+    overlap: { marginLeft: AVATAR_GROUP_OVERLAP },
+  };
+}
+
+export interface AvatarStyleResult {
+  /** 円形コンテナ（image は overflow clip / initials は bg + 中央寄せ）。 */
+  container: {
+    width: number;
+    height: number;
+    borderRadius: number;
+    overflow?: "hidden";
+    backgroundColor?: string;
+    alignItems?: "center";
+    justifyContent?: "center";
+  };
+  /** initials 文字（image variant では未使用）。 */
+  text: { color: string; fontWeight: FontWeightValue; fontSize: number };
+  /** statusDot（status 指定時のみ使用。右下配置は Avatar.tsx 側の絶対配置で行う）。 */
+  dot: { width: number; height: number; borderRadius: number; borderWidth: 2; borderColor: string };
+}
+
+/**
+ * variant / size → Avatar style の解決（avatar.recipe styleRefs の 1:1 写像）。
+ */
+export function resolveAvatarStyle(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  variant: "image" | "initials",
+  size: AvatarSize,
+): AvatarStyleResult {
+  const s = SIZE_TABLE[size];
+  return {
+    container: {
+      width: s.box,
+      height: s.box,
+      borderRadius: theme.radius.full,
+      ...(variant === "image"
+        ? { overflow: "hidden" as const }
+        : {
+            backgroundColor: theme.color.primary["50"],
+            alignItems: "center" as const,
+            justifyContent: "center" as const,
+          }),
+    },
+    text: {
+      color: theme.color.primary["500"],
+      fontWeight: theme.typography.fontWeight.medium,
+      fontSize: theme.typography.fontSize[s.fontSize].fontSize,
+    },
+    dot: {
+      width: s.dot,
+      height: s.dot,
+      borderRadius: theme.radius.full,
+      borderWidth: 2,
+      borderColor: theme.color.semantic[mode]["bg-surface"],
+    },
+  };
+}
+
+/**
+ * status → statusDot の背景色（avatar.recipe states の 1:1 写像）。
+ * online=success / away=warning / offline=ニュートラル（border-strong）。
+ */
+export function resolveAvatarStatusColor(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  status: AvatarStatus,
+): string {
+  switch (status) {
+    case "online":
+      return theme.color.status.success.base;
+    case "away":
+      return theme.color.status.warning.base;
+    case "offline":
+      return theme.color.semantic[mode]["border-strong"];
+  }
+}

package/src/components/bottom-sheet.styles.ts

@@ -0,0 +1,78 @@
+/**
+ * bottom-sheet.styles — BottomSheet の pure style resolver（styleRefs conformance 対応で
+ * BottomSheet.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/bottom-sheet.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/bottom-sheet-conformance.test.ts が行う。
+ *
+ * - sheet は上角のみ radius（下端密着のため）。grabber は装飾バー（a11y ツリーから除外は
+ *   実装側の importantForAccessibility / accessibilityElementsHidden が担う）。
+ * - content は自由 slot で padding のみ供給。
+ * - overlay の黒 50% は token 外の literal（modal と同じ）。
+ * - sheet の下余白（SafeArea）は実装（BottomSheet.tsx）が SafeAreaView で加算する。
+ */
+
+import type { FontWeightValue, NativeTheme, ThemeMode } from "../theme";
+
+/** overlay の黒 50%（token 外 literal。modal と同値）。 */
+// eslint-disable-next-line melta/no-raw-color -- overlay の黒 50% は契約上 token 外の literal（recipe description / web の bg-black/50 と同値）
+export const BOTTOM_SHEET_OVERLAY_COLOR = "rgba(0,0,0,0.5)";
+
+export interface BottomSheetStyle {
+  overlayStyle: { flex: 1; backgroundColor: string; justifyContent: "flex-end" };
+  sheetStyle: {
+    backgroundColor: string;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+  };
+  grabberStyle: {
+    width: 36;
+    height: 4;
+    borderRadius: number;
+    backgroundColor: string;
+    alignSelf: "center";
+    marginTop: number;
+  };
+  titleStyle: {
+    fontSize: number;
+    fontWeight: FontWeightValue;
+    color: string;
+    paddingHorizontal: number;
+    paddingTop: number;
+  };
+  contentStyle: { padding: number };
+}
+
+/** mode → BottomSheet style の解決（bottom-sheet.recipe styleRefs の 1:1 写像）。 */
+export function resolveBottomSheetStyle(theme: NativeTheme, mode: ThemeMode): BottomSheetStyle {
+  const semantic = theme.color.semantic[mode];
+  return {
+    overlayStyle: {
+      flex: 1,
+      backgroundColor: BOTTOM_SHEET_OVERLAY_COLOR,
+      justifyContent: "flex-end",
+    },
+    sheetStyle: {
+      backgroundColor: semantic["bg-surface"],
+      borderTopLeftRadius: theme.radius.lg,
+      borderTopRightRadius: theme.radius.lg,
+    },
+    grabberStyle: {
+      width: 36,
+      height: 4,
+      borderRadius: theme.radius.full,
+      backgroundColor: semantic["border-strong"],
+      alignSelf: "center",
+      marginTop: theme.spacing["2"],
+    },
+    titleStyle: {
+      fontSize: theme.typography.fontSize.lg.fontSize,
+      fontWeight: theme.typography.fontWeight.bold,
+      color: semantic["text-heading"],
+      paddingHorizontal: theme.spacing["4"],
+      paddingTop: theme.spacing["4"],
+    },
+    contentStyle: { padding: theme.spacing["4"] },
+  };
+}

package/src/components/card.styles.ts

@@ -0,0 +1,56 @@
+/**
+ * card.styles — Card の pure style resolver（styleRefs conformance 対応で Card.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュール（型 import のみ）にすることで node テスト
+ * （tsx --test）から直接実行できる。recipes/app/card.recipe.json（melta-contracts の styleRefs）
+ * との機械照合は scripts/lib/card-conformance.test.ts が行う。
+ */
+
+import type { ViewStyle } from "react-native";
+import type { NativeTheme, ThemeMode, ElevationKey } from "../theme";
+
+export type CardVariant = "basic" | "media" | "action" | "link";
+
+/** variant → インタラクティブ（Pressable）か。action/link のみ true（recipe pressedStyle の有無と対応）。 */
+export const CARD_INTERACTIVE: Record<CardVariant, boolean> = {
+  basic: false,
+  media: false,
+  action: true,
+  link: true,
+};
+
+/**
+ * Card の外枠 style を一元生成（card.recipe variants.style の 1:1 写像、
+ * 非インタラクティブ View / インタラクティブ Pressable の両分岐で共有）。
+ *
+ * - pressed は action/link のみ elevation sm→md（recipe pressedStyle、contract hover→pressed mapping）。
+ * - 注: overflow:hidden は付けない。iOS は shadow(elevation) と overflow:hidden が同居すると影が
+ *   消えるため（contract は media でも elevation.sm 要求）。media のクリップは内側の clip View で行う。
+ * - media は内側 clip View が padding を持つ（resolveCardBodyStyle / recipe bodyStyle）ので外枠は padding なし。
+ */
+export function resolveCardShape(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  variant: CardVariant,
+  pressed = false,
+): ViewStyle {
+  const sem = theme.color.semantic[mode];
+  const elevation: ElevationKey = pressed && CARD_INTERACTIVE[variant] ? "md" : "sm";
+  return {
+    backgroundColor: sem["bg-surface"],
+    borderRadius: theme.radius.lg,
+    borderWidth: 1,
+    borderColor: sem["border-default"],
+    // media は内側 clip View が padding を持つので外枠は padding なし。
+    ...(variant === "media" ? null : { padding: theme.spacing["6"] }),
+    ...theme.elevation[elevation],
+  };
+}
+
+/** media の body padding（内側 clip View 側が持つ。recipe bodyStyle の写像）。media 以外は undefined。 */
+export function resolveCardBodyStyle(
+  theme: NativeTheme,
+  variant: CardVariant,
+): { padding: number } | undefined {
+  return variant === "media" ? { padding: theme.spacing["6"] } : undefined;
+}

package/src/components/checkbox.styles.ts

@@ -0,0 +1,83 @@
+/**
+ * checkbox.styles — Checkbox の pure style resolver（styleRefs conformance 対応で Checkbox.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/checkbox.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/checkbox-conformance.test.ts が行う。
+ */
+
+import type { NativeTheme, ThemeMode } from "../theme";
+
+/**
+ * recipe 由来の literal 値テーブル（token 化されていない数値。conformance が recipe と照合する）。
+ * - box は 20px（web の 16px より大きいのはタッチ前提、recipe description）
+ * - hitSlop は (44 - box 20) / 2 = 12。行全体 Pressable に足して実タッチ領域 44pt を確保
+ */
+export const CHECKBOX_SPEC = {
+  boxSize: 20,
+  boxBorderWidth: 2,
+  disabledOpacity: 0.5,
+  hitSlop: 12,
+} as const;
+
+/** 見た目（色）に効く状態入力。disabled は opacity のみで色を変えないため含めない。 */
+export interface CheckboxStateInput {
+  checked: boolean;
+  /** true で variant "indeterminate"。box の塗りは checked と同じ、mark が横棒になる。 */
+  indeterminate?: boolean;
+  /** true で states.error の borderColor 差分。checked より優先（選択済みでもエラーなら赤枠）。 */
+  error?: boolean;
+}
+
+export interface CheckboxResolved {
+  /** box（20px の四角）。recipe の boxStyle スロットと 1:1。 */
+  boxStyle: {
+    width: number;
+    height: number;
+    borderWidth: number;
+    borderColor: string;
+    borderRadius: number;
+    backgroundColor: string;
+  };
+  /** label（recipe の labelStyle スロットと 1:1。実装は Text primitive の base/text-default で同値）。 */
+  labelStyle: { fontSize: number; color: string };
+  /** box と label の間隔。 */
+  gap: number;
+  /** checkmark（L 字 border）/ indeterminate 横棒の色（states.checked.markColor）。 */
+  markColor: string;
+}
+
+/**
+ * 状態 → 最終 style 値の解決（checkbox.recipe styleRefs の 1:1 写像）。
+ * - 塗り（bg/border = primary.500）は checked / indeterminate 共通（recipe の variants.indeterminate
+ *   boxStyle と states.checked boxStyle が同値であることは conformance が recipe 側で担保）。
+ * - error は borderColor のみ上書き（states.error）。
+ */
+export function resolveCheckboxStyle(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  { checked, indeterminate = false, error = false }: CheckboxStateInput,
+): CheckboxResolved {
+  const sem = theme.color.semantic[mode];
+  const filled = checked || indeterminate;
+  return {
+    boxStyle: {
+      width: CHECKBOX_SPEC.boxSize,
+      height: CHECKBOX_SPEC.boxSize,
+      borderWidth: CHECKBOX_SPEC.boxBorderWidth,
+      borderColor: error
+        ? theme.color.status.danger.base
+        : filled
+          ? theme.color.primary["500"]
+          : sem["border-strong"],
+      borderRadius: theme.radius.sm,
+      backgroundColor: filled ? theme.color.primary["500"] : sem["input-bg"],
+    },
+    labelStyle: {
+      fontSize: theme.typography.fontSize.base.fontSize,
+      color: sem["text-default"],
+    },
+    gap: theme.spacing["2"],
+    markColor: sem["text-on-accent"],
+  };
+}