create-du-app 0.1.2 → 0.1.4

package/templates/mobile/expo/src/core/components/ui/components.registry.json

@@ -0,0 +1,313 @@
+{
+  "$schema": "./components.registry.schema.json",
+  "description": "Catalog of design-system UI components (Life-Master-Design). The create-UI / create-component skill MUST check this registry first: if a component exists with status 'active', reuse it instead of creating a new one.",
+  "themePolicy": "All components are theme-aware (light/dark). NEVER import the static `Colors` from @src/core/utils in a component. Read colors via `useTheme().colors.*` (inline JSX/prop colors) or via a `makeStyles(c: ThemeColors)` factory + `useThemedStyles` hook (StyleSheet). Token keys are identical across light & dark; missing tokens go into both light.theme.ts and dark.theme.ts. See src/core/theme.",
+  "designFile": "https://www.figma.com/design/ZQACuYkbsoGBaOQkYamjVt/Life-Master-Design",
+  "basePath": "src/core/components/ui",
+  "components": [
+    {
+      "name": "Button",
+      "status": "active",
+      "path": "src/core/components/ui/button",
+      "import": "import { Button } from '@src/core';",
+      "figmaNodeId": "2067:27704",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "ButtonPrimary (src/core/components/button/button-primary.tsx — deprecated)",
+      "props": {
+        "label": "string (required)",
+        "variant": "'solid' | 'outline' | 'faded' (default 'solid')",
+        "colorScheme": "'primary' | 'secondary' | 'neutral' (default 'primary')",
+        "size": "'md' (44px) | 'lg' (56px) (default 'lg'). Heights are fixed px (not screen-scaled).",
+        "disabled": "boolean",
+        "loading": "boolean",
+        "fullWidth": "boolean",
+        "IconLeft": "React.FC<SvgProps>",
+        "IconRight": "React.FC<SvgProps>",
+        "style": "StyleProp<ViewStyle>",
+        "labelStyle": "StyleProp<TextStyle>"
+      },
+      "states": ["default", "disabled", "loading"],
+      "showcase": "ComponentShowcase screen → 'Button' tab"
+    },
+    {
+      "name": "IconButton",
+      "status": "active",
+      "path": "src/core/components/ui/icon-button",
+      "import": "import { IconButton } from '@src/core';",
+      "figmaNodeId": "2067:30151",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "ButtonIcon (src/core/components/button/button-icon.tsx — legacy, keep until migrated)",
+      "reuses": "Button.resolveColors (same variant × colorScheme color matrix)",
+      "props": {
+        "Icon": "React.FC<SvgProps> (required)",
+        "accessibilityLabel": "string (required)",
+        "variant": "'solid' | 'outline' | 'faded' (default 'solid')",
+        "colorScheme": "'primary' | 'secondary' | 'neutral' (default 'primary')",
+        "size": "'md' | 'lg' (default 'lg' — 44px / 56px square)",
+        "disabled": "boolean",
+        "loading": "boolean",
+        "style": "StyleProp<ViewStyle>"
+      },
+      "states": ["default", "disabled", "loading"],
+      "showcase": "ComponentShowcase screen → 'IconButton' tab"
+    },
+    {
+      "name": "Checkbox",
+      "status": "active",
+      "path": "src/core/components/ui/checkbox",
+      "import": "import { Checkbox } from '@src/core';",
+      "figmaNodeId": "2067:27907",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "UICheckBox (src/core/components/element/ui-checkbox.tsx — legacy, keep until migrated)",
+      "props": {
+        "checked": "boolean",
+        "indeterminate": "boolean",
+        "onChange": "(checked: boolean) => void",
+        "label": "string",
+        "caption": "string",
+        "error": "boolean",
+        "disabled": "boolean",
+        "style": "StyleProp<ViewStyle>",
+        "accessibilityLabel": "string"
+      },
+      "states": ["unchecked", "checked", "indeterminate", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'Checkbox' tab"
+    },
+    {
+      "name": "Radio",
+      "status": "active",
+      "path": "src/core/components/ui/radio",
+      "import": "import { Radio } from '@src/core';",
+      "figmaNodeId": "2067:27907",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "UIRadioBoxV1/V2 (src/core/components/element/ui-radiobox-*.tsx — legacy, keep until migrated)",
+      "props": {
+        "selected": "boolean",
+        "onSelect": "() => void",
+        "label": "string",
+        "caption": "string",
+        "error": "boolean",
+        "disabled": "boolean",
+        "style": "StyleProp<ViewStyle>",
+        "accessibilityLabel": "string"
+      },
+      "states": ["unselected", "selected", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'Radio' tab"
+    },
+    {
+      "name": "Toggle",
+      "status": "active",
+      "path": "src/core/components/ui/toggle",
+      "import": "import { Toggle } from '@src/core';",
+      "figmaNodeId": "2067:30809",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "UISwitch (src/core/components/element/ui-switch.tsx — legacy, keep until migrated)",
+      "props": {
+        "value": "boolean",
+        "onValueChange": "(value: boolean) => void",
+        "size": "'sm' | 'lg' (default 'sm' — 48×24 / 60×32)",
+        "disabled": "boolean",
+        "style": "StyleProp<ViewStyle>",
+        "accessibilityLabel": "string"
+      },
+      "states": ["off", "on", "disabled"],
+      "showcase": "ComponentShowcase screen → 'Toggle' tab"
+    },
+    {
+      "name": "TextField",
+      "status": "active",
+      "path": "src/core/components/ui/text-field",
+      "import": "import { TextField } from '@src/core';",
+      "figmaNodeId": "2067:28944",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "HFTextInput (src/core/components/forms/hf-text-input.tsx — legacy RHF-bound, keep until migrated)",
+      "props": {
+        "label": "string",
+        "message": "string",
+        "error": "boolean",
+        "disabled": "boolean",
+        "IconTrailing": "React.FC<SvgProps>",
+        "onTrailingPress": "() => void",
+        "...": "all TextInputProps (value, onChangeText, placeholder, secureTextEntry, keyboardType...)"
+      },
+      "states": ["default", "focus", "filled", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'TextField' tab"
+    },
+    {
+      "name": "TextArea",
+      "status": "active",
+      "path": "src/core/components/ui/text-area",
+      "import": "import { TextArea } from '@src/core';",
+      "figmaNodeId": "2067:28944",
+      "ticket": "LIFEMASTER-75",
+      "reuses": "field/FieldFrame + resolveFieldBorderColor (shared with TextField)",
+      "props": {
+        "label": "string",
+        "message": "string",
+        "error": "boolean",
+        "disabled": "boolean",
+        "minHeight": "number (default 140)",
+        "maxHeight": "number (default 240 — scrolls beyond this instead of growing)",
+        "...": "all TextInputProps except multiline"
+      },
+      "states": ["default", "focus", "filled", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'TextArea' tab"
+    },
+    {
+      "name": "OtpInput",
+      "status": "active",
+      "path": "src/core/components/ui/otp-input",
+      "import": "import { OtpInput } from '@src/core';",
+      "figmaNodeId": "2067:28944",
+      "ticket": "LIFEMASTER-75",
+      "replaces": "code-field (src/modules/auth/components/code-field.tsx — legacy, keep until migrated)",
+      "props": {
+        "length": "number (default 6)",
+        "value": "string",
+        "onChange": "(code: string) => void",
+        "onComplete": "(code: string) => void",
+        "error": "boolean",
+        "disabled": "boolean",
+        "autoFocus": "boolean"
+      },
+      "states": ["default", "focus", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'OtpInput' tab"
+    },
+    {
+      "name": "TagInput",
+      "status": "active",
+      "path": "src/core/components/ui/tag-input",
+      "import": "import { TagInput } from '@src/core';",
+      "figmaNodeId": "2067:28944",
+      "ticket": "LIFEMASTER-75",
+      "reuses": "field/FieldFrame + resolveFieldBorderColor (shared with TextField)",
+      "props": {
+        "label": "string",
+        "message": "string",
+        "tags": "string[] (required)",
+        "onChangeTags": "(tags: string[]) => void (required)",
+        "placeholder": "string",
+        "error": "boolean",
+        "disabled": "boolean"
+      },
+      "states": ["default", "focus", "error", "disabled"],
+      "showcase": "ComponentShowcase screen → 'TagInput' tab"
+    },
+    {
+      "name": "SearchBox",
+      "status": "active",
+      "path": "src/core/components/ui/search-box",
+      "import": "import { SearchBox } from '@src/core';",
+      "figmaNodeId": "2067:29936",
+      "ticket": "LIFEMASTER-75",
+      "props": {
+        "value": "string",
+        "onChangeText": "(text: string) => void",
+        "onClear": "() => void",
+        "placeholder": "string (default 'Type to search')",
+        "disabled": "boolean",
+        "...": "all TextInputProps"
+      },
+      "states": ["default", "focus", "typing", "filled"],
+      "showcase": "ComponentShowcase screen → 'SearchBox' tab"
+    },
+    {
+      "name": "Tabs",
+      "status": "active",
+      "path": "src/core/components/ui/tabs",
+      "import": "import { Tabs } from '@src/core';",
+      "figmaNodeId": "2067:30514",
+      "ticket": "LIFEMASTER-75",
+      "props": {
+        "items": "TabItem[] ({ key, label }) (required)",
+        "activeKey": "string (required)",
+        "onChange": "(key: string) => void (required)",
+        "scrollable": "boolean (default true)"
+      },
+      "states": ["active", "inactive"],
+      "showcase": "ComponentShowcase screen → 'Tabs' tab"
+    },
+    {
+      "name": "SegmentedControl",
+      "status": "active",
+      "path": "src/core/components/ui/segmented-control",
+      "import": "import { SegmentedControl } from '@src/core';",
+      "figmaNodeId": "2067:30514",
+      "ticket": "LIFEMASTER-75",
+      "props": {
+        "items": "SegmentItem[] ({ key, label, leading? }) (required)",
+        "selectedKey": "string (required)",
+        "onChange": "(key: string) => void (required)"
+      },
+      "states": ["selected", "unselected"],
+      "showcase": "ComponentShowcase screen → 'Segmented' tab"
+    },
+    {
+      "name": "Header",
+      "status": "active",
+      "path": "src/core/components/ui/header",
+      "import": "import { Header } from '@src/core';",
+      "figmaNodeId": "2067:29754",
+      "ticket": "LIFEMASTER-75",
+      "props": {
+        "variant": "'welcome' | 'default' | 'back' | 'step' (default 'default')",
+        "title": "string",
+        "subtitle": "string",
+        "left": "ReactNode (e.g. back IconButton)",
+        "right": "ReactNode (e.g. avatar / skip / next)",
+        "onBackPress": "() => void (back variant)",
+        "backLabel": "string (back variant)"
+      },
+      "states": ["welcome", "default", "back", "step"],
+      "showcase": "ComponentShowcase screen → 'Header' tab"
+    },
+    {
+      "name": "AudioCard",
+      "status": "active",
+      "path": "src/core/components/ui/audio-card",
+      "import": "import { AudioCard } from '@src/core';",
+      "figmaNodeId": "2067:29606",
+      "ticket": "LIFEMASTER-75",
+      "note": "Feature card (list layout): cover + premium crown + title + category badge + meta (duration/tag) + favorite.",
+      "props": {
+        "cover": "ImageSourcePropType (required)",
+        "title": "string (required)",
+        "category": "string",
+        "duration": "string",
+        "tag": "string",
+        "premium": "boolean",
+        "favorite": "boolean",
+        "onToggleFavorite": "() => void",
+        "onPress": "() => void",
+        "IconDuration": "React.FC<SvgProps>",
+        "IconTag": "React.FC<SvgProps>"
+      },
+      "states": ["default", "premium", "favorited"],
+      "showcase": "ComponentShowcase screen → 'AudioCard' tab"
+    },
+    {
+      "name": "ScreenContainer",
+      "status": "active",
+      "path": "src/core/components/screen/screen-container.tsx",
+      "import": "import { ScreenContainer } from '@src/core';",
+      "figmaNodeId": "209:1291",
+      "ticket": "LIFEMASTER-75",
+      "note": "DS dark screen scaffold: aura gradient background + safe area + DS Header + scroll body + fixed bottom slot. Replaces the legacy imoni light container (prop API kept backwards-compatible).",
+      "props": {
+        "title": "string",
+        "subtitle": "string",
+        "headerVariant": "'welcome' | 'default' | 'back' | 'step' (default 'default')",
+        "onBackPress": "() => void",
+        "backLabel": "string",
+        "headerLeft": "ReactNode",
+        "headerRightNode": "ReactNode",
+        "showHeader": "boolean (default true)",
+        "isForm": "boolean — keyboard-aware scroll (default true)",
+        "renderBottom": "() => ReactNode — fixed bottom area",
+        "paddingBottom": "boolean (default true)"
+      },
+      "reuses": "ui/header Header, ui/screen ScreenAura (gradient + blur background)",
+      "showcase": "Reachable via navigation (Screen.OtpVerification sample) — not a showcase tab"
+    }
+  ]
+}

package/templates/mobile/expo/src/core/components/ui/field/field-frame.tsx

@@ -0,0 +1,62 @@
+import { Font, fontSize, Spacing } from '@src/core/utils';
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import React, { ReactNode } from 'react';
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
+
+interface FieldFrameProps {
+  /** Top label (optional). */
+  label?: string;
+  /** Bottom helper / error message (optional). */
+  message?: string;
+  /** Show the message in the error color. */
+  error?: boolean;
+  /** Dim the label (disabled state). */
+  disabled?: boolean;
+  /** The input control (box) rendered between label and message. */
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Shared layout for text-field controls: Label → control → Message.
+ * Used by {@link TextField} and {@link TextArea} to avoid duplication.
+ */
+const FieldFrame = ({ label, message, error, disabled, children, style }: FieldFrameProps) => {
+  const styles = useThemedStyles(makeStyles);
+
+  return (
+    <View style={[styles.container, style]}>
+      {label ? <Text style={[styles.label, disabled && styles.labelDisabled]}>{label}</Text> : null}
+      {children}
+      {message ? <Text style={[styles.message, error && styles.messageError]}>{message}</Text> : null}
+    </View>
+  );
+};
+
+export default FieldFrame;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    container: {
+      gap: Spacing.spacing_xs, // 4
+      alignSelf: 'stretch',
+    },
+    label: {
+      fontFamily: Font.dmSansMedium,
+      fontSize: fontSize(14),
+      lineHeight: 20,
+      color: c.fg_neutral_normal,
+    },
+    labelDisabled: {
+      color: c.fg_neutral_faded,
+    },
+    message: {
+      fontFamily: Font.dmSansRegular,
+      fontSize: fontSize(12),
+      lineHeight: 18,
+      color: c.fg_neutral_faded,
+    },
+    messageError: {
+      color: c.bd_danger_normal,
+    },
+  });

package/templates/mobile/expo/src/core/components/ui/field/field.shared.ts

@@ -0,0 +1,31 @@
+import { Stroke } from '@src/core/utils';
+import { ThemeColors } from '@src/core/theme';
+
+/**
+ * Resolve the border color for a text-field-like control based on its state.
+ * Priority: disabled → error → focused → default.
+ *
+ * Takes the active theme `colors` so the border reads correctly in both light
+ * and dark mode — callers pass `useTheme().colors`.
+ */
+export const resolveFieldBorderColor = (
+  colors: ThemeColors,
+  opts: {
+    focused: boolean;
+    error: boolean;
+    disabled: boolean;
+  },
+): string => {
+  if (opts.disabled) {
+    return colors.bd_neutral_faded;
+  }
+  if (opts.error) {
+    return colors.bd_danger_normal;
+  }
+  if (opts.focused) {
+    return colors.bd_primary_normal;
+  }
+  return colors.bd_neutral_faded;
+};
+
+export const FIELD_BORDER_WIDTH = Stroke.stroke_s; // 1

package/templates/mobile/expo/src/core/components/ui/header/header.tsx

@@ -0,0 +1,196 @@
+import { IconArrowLeft, IconArrowRight } from '@src/assets/svgs';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import { Font, fontSize, horizontalScale, Spacing } from '@src/core/utils';
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { HeaderProps } from './header.type';
+
+/**
+ * Design-system Header (Life-Master-Design) — navigation/section header.
+ *
+ * Variants:
+ * - `welcome` — large title + subtitle (left), optional right slot (avatar)
+ * - `default` — centered title + subtitle, optional left/right slots (arrows)
+ * - `back` — back link (icon + label)
+ * - `step` — left + right slots spread apart (e.g. back arrow + "Skip")
+ *
+ * Use `left` / `right` slots to drop in IconButtons, avatars, etc.
+ *
+ * @example
+ * <Header variant="welcome" title="Bonjour, Anna" subtitle="…" right={<Avatar />} />
+ * <Header variant="default" title="L'Architecte de Soi" subtitle="Créer" left={<Back/>} right={<Next/>} />
+ * <Header variant="back" backLabel="Retour à l'inscription" onBackPress={goBack} />
+ */
+const Header = (props: HeaderProps) => {
+  const {
+    variant = 'default',
+    title,
+    subtitle,
+    left,
+    right,
+    onBackPress,
+    backLabel = 'Back',
+    style,
+  } = props;
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+
+  if (variant === 'welcome') {
+    return (
+      <View style={[styles.welcome, style]}>
+        <View style={styles.welcomeText}>
+          {title ? <Text style={styles.titleLg}>{title}</Text> : null}
+          {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+        </View>
+        {right}
+      </View>
+    );
+  }
+
+  if (variant === 'back') {
+    return (
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={backLabel}
+        activeOpacity={0.7}
+        onPress={onBackPress}
+        style={[styles.backRow, style]}
+      >
+        <IconArrowRight
+          width={horizontalScale(16)}
+          height={horizontalScale(16)}
+          color={colors.fg_neutral_normal}
+          style={styles.flip}
+        />
+        <Text style={styles.backLabel}>{backLabel}</Text>
+      </TouchableOpacity>
+    );
+  }
+
+  if (variant === 'step') {
+    return (
+      <View style={[styles.rowBetween, style]}>
+        <View style={styles.side}>{left}</View>
+        <View style={styles.sideEnd}>{right}</View>
+      </View>
+    );
+  }
+
+  // default — centered title + subtitle with optional side slots. When no
+  // `left` slot is given but `onBackPress` is set, render a plain back arrow so
+  // detail screens get a back affordance without repeating the markup.
+  const autoBack = !left && !!onBackPress;
+  const leftSlot = left ?? (
+    autoBack ? (
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={backLabel}
+        hitSlop={8}
+        onPress={onBackPress}
+        style={styles.back}
+      >
+        <IconArrowLeft
+          width={horizontalScale(24)}
+          height={horizontalScale(24)}
+          color={colors.fg_neutral_normal}
+        />
+      </TouchableOpacity>
+    ) : null
+  );
+
+  return (
+    <View style={[styles.rowBetween, style]}>
+      <View style={styles.side}>{leftSlot}</View>
+      <View style={styles.centerText}>
+        {title ? <Text style={styles.titleMd}>{title}</Text> : null}
+        {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+      </View>
+      <View style={styles.sideEnd}>
+        {/* When the back arrow is auto-rendered with no real right slot, keep a
+            same-width spacer so the title stays optically centered. */}
+        {right ?? (autoBack ? <View style={styles.backSpacer} /> : null)}
+      </View>
+    </View>
+  );
+};
+
+export default Header;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    welcome: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      alignSelf: 'stretch',
+      gap: Spacing.spacing_base, // 16
+    },
+    welcomeText: {
+      flex: 1,
+      gap: Spacing.spacing_2xs, // 2
+    },
+    rowBetween: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      alignSelf: 'stretch',
+      gap: Spacing.spacing_md, // 12
+    },
+    side: {
+      minWidth: horizontalScale(24),
+      alignItems: 'flex-start',
+    },
+    // Plain back affordance (no surface) auto-rendered in the `default` variant.
+    back: {
+      padding: Spacing.spacing_m_nudge, // 10
+      marginLeft: -Spacing.spacing_m_nudge, // align the icon to the edge
+    },
+    // Same width as the back arrow so the centered title stays balanced.
+    backSpacer: {
+      width: horizontalScale(24),
+      height: horizontalScale(24),
+    },
+    sideEnd: {
+      minWidth: horizontalScale(24),
+      alignItems: 'flex-end',
+    },
+    centerText: {
+      flex: 1,
+      alignItems: 'center',
+      gap: Spacing.spacing_2xs, // 2
+    },
+    titleLg: {
+      fontFamily: Font.dmSansSemiBold,
+      fontSize: fontSize(24),
+      lineHeight: 32,
+      letterSpacing: 0.5,
+      color: c.hFFFFFF,
+    },
+    titleMd: {
+      fontFamily: Font.dmSansSemiBold,
+      fontSize: fontSize(20),
+      lineHeight: 28,
+      color: c.hFFFFFF,
+      textAlign: 'center',
+    },
+    subtitle: {
+      fontFamily: Font.dmSansRegular,
+      fontSize: fontSize(12),
+      lineHeight: 18,
+      color: c.fg_neutral_faded,
+    },
+    backRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Spacing.spacing_sm, // 8
+    },
+    flip: {
+      transform: [{ scaleX: -1 }],
+    },
+    backLabel: {
+      fontFamily: Font.dmSansMedium,
+      fontSize: fontSize(14),
+      lineHeight: 20,
+      color: c.fg_neutral_normal,
+    },
+  });

package/templates/mobile/expo/src/core/components/ui/header/header.type.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export type HeaderVariant = 'welcome' | 'default' | 'back' | 'step';
+
+export interface HeaderProps {
+  /**
+   * Layout preset:
+   * - `welcome` — big title + subtitle on the left, optional right slot (e.g. avatar)
+   * - `default` — centered title + subtitle, optional left/right slots (e.g. arrows)
+   * - `back` — a back link row (icon + label)
+   * - `step` — left slot + right slot spread apart (e.g. back arrow + "Skip")
+   * @default 'default'
+   */
+  variant?: HeaderVariant;
+  /** Main title. */
+  title?: string;
+  /** Secondary text under the title. */
+  subtitle?: string;
+  /** Left slot (e.g. a back IconButton). */
+  left?: ReactNode;
+  /** Right slot (e.g. an avatar / skip button / forward arrow). */
+  right?: ReactNode;
+  /** Press handler for the `back` variant. */
+  onBackPress?: () => void;
+  /** Label for the `back` variant. @default 'Back' */
+  backLabel?: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}

package/templates/mobile/expo/src/core/components/ui/header/index.ts

@@ -0,0 +1,2 @@
+export { default as Header } from './header';
+export * from './header.type';

package/templates/mobile/expo/src/core/components/ui/icon-button/icon-button.style.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import { horizontalScale, Radius } from '@src/core/utils';
+import { IconButtonSize } from './icon-button.type';
+
+/** Square dimensions + icon size per size token (from Figma). */
+export const ICON_SIZE_TOKENS: Record<
+  IconButtonSize,
+  { box: number; iconSize: number }
+> = {
+  // `box` is a fixed square (matches Button height) — not horizontalScale'd, so
+  // the control keeps its 44/56 spec height across screen widths.
+  md: { box: 44, iconSize: horizontalScale(24) },
+  lg: { box: 56, iconSize: horizontalScale(30) },
+};
+
+export const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: Radius.radius_lg, // 12
+    overflow: 'hidden',
+  },
+});