@12min/ds 0.1.0 → 3.0.0

package/dist/index.native.js

@@ -20,88 +20,1186 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.native.ts
 var index_native_exports = {};
 __export(index_native_exports, {
+  Alert: () => Alert,
+  Button: () => Button,
+  ButtonIcon: () => ButtonIcon,
+  Checkbox: () => Checkbox,
+  Chip: () => Chip,
+  ChoiceCard: () => ChoiceCard,
+  DSThemeProvider: () => DSThemeProvider,
+  DismissButton: () => DismissButton,
+  Input: () => Input,
+  InputField: () => InputField,
+  ListItem: () => ListItem,
+  ProgressBar: () => ProgressBar,
+  RadioGroup: () => RadioGroup,
+  RatingScale: () => RatingScale,
+  Stepper: () => Stepper,
+  ToggleSwitch: () => ToggleSwitch,
+  borderWidth: () => borderWidth,
   colors: () => colors,
   darkTheme: () => darkTheme,
-  lightTheme: () => lightTheme
+  grid: () => grid,
+  lightTheme: () => lightTheme,
+  opacity: () => opacity,
+  radius: () => radius,
+  shadow: () => shadow,
+  spacing: () => spacing,
+  typography: () => typography,
+  useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_native_exports);
 
 // src/tokens/colors.ts
 var colors = {
-  brand: {
-    primary: "#FF6B35",
-    secondary: "#1A1A2E"
-  },
-  neutral: {
-    0: "#FFFFFF",
-    50: "#FAFAFA",
-    100: "#F5F5F5",
-    200: "#E5E5E5",
-    300: "#D4D4D4",
-    400: "#A3A3A3",
-    500: "#737373",
-    600: "#525252",
-    700: "#404040",
-    800: "#262626",
-    900: "#121212"
-  },
-  success: {
-    light: "#4ADE80",
-    default: "#22C55E",
-    dark: "#16A34A"
-  },
-  error: {
-    light: "#F87171",
-    default: "#EF4444",
-    dark: "#DC2626"
-  },
-  warning: {
-    light: "#FCD34D",
-    default: "#F59E0B",
-    dark: "#D97706"
-  },
-  info: {
-    light: "#60A5FA",
-    default: "#3B82F6",
-    dark: "#2563EB"
+  marianBlue: {
+    50: "#FAFBFF",
+    100: "#F6F8FF",
+    200: "#E1E7FF",
+    300: "#C3CCF7",
+    400: "#94A5F2",
+    500: "#697DD6",
+    600: "#4357AD",
+    700: "#31428B",
+    800: "#25326A",
+    900: "#131937"
+  },
+  midnight: {
+    50: "#707070",
+    100: "#5C5C5C",
+    200: "#525252",
+    300: "#474747",
+    400: "#3D3D3D",
+    500: "#333333",
+    600: "#292929",
+    700: "#161616",
+    800: "#141414",
+    900: "#0A0A0A"
+  },
+  gray: {
+    15: "#F4F5F8",
+    25: "#EDEEF1",
+    35: "#DDE0E6",
+    50: "#B1B5BE",
+    100: "#A6ABB5",
+    200: "#9BA0AB",
+    300: "#9095A2",
+    400: "#858B99",
+    500: "#7A8190",
+    600: "#6F7685",
+    700: "#5E6471",
+    800: "#5D636F",
+    900: "#545964"
+  },
+  amber: {
+    50: "#FFFBEB",
+    100: "#FEF3C7",
+    200: "#FDE68A",
+    300: "#FCD34D",
+    400: "#FBBF24",
+    500: "#F59E0B",
+    600: "#D97706",
+    700: "#B45309",
+    800: "#92400E",
+    900: "#78350F",
+    text: "#BA5C0A"
+  },
+  yellow: {
+    50: "#FFF2D6",
+    100: "#FFECC2",
+    200: "#FFE5AD",
+    300: "#FFDF99",
+    400: "#FFD885",
+    500: "#FFD270",
+    600: "#FFCB5C",
+    700: "#FFC140",
+    800: "#FFBE33",
+    900: "#FFB81F"
+  },
+  ketchup: {
+    50: "#FEF2F2",
+    100: "#FEE2E2",
+    200: "#FECACA",
+    300: "#FCA5A5",
+    400: "#F87171",
+    500: "#EF4444",
+    600: "#DC2626",
+    700: "#B91C1C",
+    800: "#991B1B",
+    900: "#7F1D1D",
+    text: "#D91F3C"
+  },
+  green: {
+    50: "#F2FDF4",
+    100: "#E5FBE9",
+    200: "#C7F4D0",
+    300: "#99E5AC",
+    400: "#5FCD80",
+    500: "#36B260",
+    600: "#258F4B",
+    700: "#1B6F3B",
+    800: "#145430",
+    900: "#0E3622",
+    text: "#0E8745"
+  },
+  blue: {
+    50: "#EFF6FF",
+    100: "#DBEAFE",
+    200: "#BFDBFE",
+    300: "#93C5FD",
+    400: "#60A5FA",
+    500: "#3B82F6",
+    600: "#2563EB",
+    700: "#1D4ED8",
+    800: "#1E40AF",
+    900: "#1E3A8A",
+    text: "#1E40AF"
+  },
+  // Single brand accent green — the vibrant tone that was previously green/300
+  // before the green scale was retuned to muted values in the Figma v2 palette.
+  brandGreen: "#6DFFB4",
+  overlayBlack: {
+    5: "#0000000D",
+    8: "#00000014",
+    12: "#0000001F",
+    16: "#00000029"
+  },
+  overlayWhite: {
+    5: "#FFFFFF0D",
+    8: "#FFFFFF14",
+    12: "#FFFFFF1F",
+    16: "#FFFFFF29"
+  },
+  white: "#FFFFFF",
+  black: "#000000"
+};
+
+// src/tokens/typography.ts
+var typography = {
+  display1: { fontFamily: "Poppins", fontSize: 32, fontWeight: "700", lineHeight: 40, letterSpacing: -1, textTransform: "none" },
+  display2: { fontFamily: "Poppins", fontSize: 32, fontWeight: "700", lineHeight: 40, letterSpacing: -1, textTransform: "none" },
+  h1: { fontFamily: "Poppins", fontSize: 24, fontWeight: "700", lineHeight: 32, letterSpacing: -1, textTransform: "none" },
+  h2: { fontFamily: "Poppins", fontSize: 20, fontWeight: "700", lineHeight: 28, letterSpacing: 0, textTransform: "none" },
+  h3: { fontFamily: "Poppins", fontSize: 16, fontWeight: "600", lineHeight: 24, letterSpacing: 0, textTransform: "none" },
+  bodyLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "500", lineHeight: 24, letterSpacing: 0, textTransform: "none" },
+  bodyDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "500", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  bodySmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "400", lineHeight: 16, letterSpacing: 0.2, textTransform: "none" },
+  labelLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  labelDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  labelSmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "600", lineHeight: 16, letterSpacing: 0.2, textTransform: "none" },
+  labelTiny: { fontFamily: "Inter", fontSize: 10, fontWeight: "600", lineHeight: 14, letterSpacing: 0, textTransform: "none" },
+  caption: { fontFamily: "Inter", fontSize: 12, fontWeight: "500", lineHeight: 16, letterSpacing: 0.5, textTransform: "none" },
+  captionUppercase: { fontFamily: "Inter", fontSize: 12, fontWeight: "500", lineHeight: 16, letterSpacing: 0.5, textTransform: "uppercase" },
+  overline: { fontFamily: "Inter", fontSize: 10, fontWeight: "600", lineHeight: 16, letterSpacing: 8, textTransform: "uppercase" },
+  buttonLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  buttonDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  buttonSmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "600", lineHeight: 16, letterSpacing: 0, textTransform: "none" }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  unit: 4,
+  gap: {
+    "0.5": 2,
+    "1": 4,
+    "2": 8,
+    "3": 12,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "8": 32,
+    "10": 40,
+    "12": 48,
+    "14": 56,
+    "16": 64,
+    "18": 72,
+    "20": 80,
+    "22": 88,
+    "24": 96
+  },
+  screen: {
+    x: 16,
+    y: 24
+  }
+};
+
+// src/tokens/grid.ts
+var grid = {
+  // 8px square baseline — line-height/* steps 16/24/32/40 snap; 20 and 28 land on a half-cell
+  baseline: 8,
+  breakpoints: {
+    mobile: 0,
+    tablet: 768,
+    desktop: 1024
+  },
+  columns: {
+    mobile: 4,
+    tablet: 8,
+    desktop: 12
+  },
+  gutter: {
+    mobile: 8,
+    tablet: 16,
+    desktop: 24
+  },
+  margin: {
+    mobile: 20,
+    tablet: 24,
+    desktop: 32
   }
 };
 
+// src/tokens/radius.ts
+var radius = {
+  none: 0,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  full: 9999,
+  button: 16,
+  card: 20,
+  input: 12,
+  chip: 9999,
+  badge: 8
+};
+
+// src/tokens/borderWidth.ts
+var borderWidth = {
+  default: 1,
+  strong: 1.5,
+  heavy: 2
+};
+
+// src/tokens/shadow.ts
+var shadow = {
+  sm: { offsetX: 0, offsetY: 1, blur: 3, spread: 0, color: "#000000", opacity: { light: 0.08, dark: 0.4 } },
+  md: { offsetX: 0, offsetY: 4, blur: 12, spread: 0, color: "#000000", opacity: { light: 0.1, dark: 0.5 } },
+  lg: { offsetX: 0, offsetY: 8, blur: 24, spread: -4, color: "#000000", opacity: { light: 0.12, dark: 0.6 } }
+};
+
+// src/tokens/opacity.ts
+var opacity = {
+  disabled: 0.4,
+  hover: 0.08,
+  pressed: 0.12
+};
+
 // src/themes/lightTheme.ts
 var lightTheme = {
-  background: colors.neutral[0],
-  surface: colors.neutral[100],
-  border: colors.neutral[200],
-  onBackground: colors.neutral[900],
-  onSurface: colors.neutral[800],
-  muted: colors.neutral[500],
-  primary: colors.brand.primary,
-  secondary: colors.brand.secondary,
-  success: colors.success.default,
-  error: colors.error.default,
-  warning: colors.warning.default,
-  info: colors.info.default
+  bg: {
+    primary: colors.marianBlue[600],
+    primaryHover: colors.marianBlue[700],
+    primaryPressed: colors.marianBlue[800],
+    primarySubtle: colors.marianBlue[200],
+    primarySubtleHover: colors.marianBlue[300],
+    primarySubtlePressed: colors.marianBlue[400],
+    surface: colors.white,
+    surfaceRaised: colors.marianBlue[50],
+    surfaceHover: colors.gray[15],
+    surfacePressed: colors.gray[35],
+    overlay: colors.marianBlue[900],
+    overlaySubtle: colors.overlayBlack[8],
+    overlaySubtleHover: colors.overlayBlack[12],
+    overlaySubtlePressed: colors.overlayBlack[16],
+    success: colors.green[600],
+    successSubtle: colors.green[100],
+    error: colors.ketchup[600],
+    errorSubtle: colors.ketchup[100],
+    warning: colors.amber[500],
+    warningSubtle: colors.amber[100],
+    info: colors.blue[500],
+    infoSubtle: colors.blue[100],
+    highlight: colors.brandGreen,
+    accent: colors.amber[500],
+    accentSubtle: colors.amber[100],
+    disabled: colors.gray[25]
+  },
+  text: {
+    primary: colors.marianBlue[900],
+    secondary: colors.gray[700],
+    inverse: colors.white,
+    brand: colors.marianBlue[600],
+    link: colors.marianBlue[600],
+    placeholder: colors.gray[400],
+    success: colors.green.text,
+    error: colors.ketchup.text,
+    warning: colors.amber.text,
+    info: colors.blue.text,
+    highlight: colors.marianBlue[900],
+    accent: colors.amber.text,
+    disabled: colors.gray[400],
+    onSuccess: colors.white,
+    onError: colors.white,
+    onWarning: colors.midnight[900],
+    onHighlight: colors.midnight[900]
+  },
+  border: {
+    default: colors.marianBlue[200],
+    strong: colors.marianBlue[600],
+    subtle: colors.overlayBlack[5],
+    focus: colors.black,
+    accent: colors.amber[700],
+    success: colors.green.text,
+    error: colors.ketchup[600],
+    warning: colors.amber[700],
+    info: colors.blue[600],
+    disabled: colors.gray[50]
+  },
+  icon: {
+    primary: colors.marianBlue[900],
+    secondary: colors.gray[600],
+    inverse: colors.white,
+    brand: colors.marianBlue[600],
+    accent: colors.amber[700],
+    success: colors.green.text,
+    error: colors.ketchup[600],
+    warning: colors.amber[600],
+    info: colors.blue[600],
+    highlight: colors.marianBlue[900],
+    disabled: colors.gray[400]
+  },
+  interactive: {
+    hover: colors.overlayBlack[8],
+    pressed: colors.overlayBlack[12],
+    selected: colors.marianBlue[700],
+    selectedSubtle: colors.marianBlue[200]
+  }
 };
 
 // src/themes/darkTheme.ts
 var darkTheme = {
-  background: colors.neutral[900],
-  surface: colors.neutral[800],
-  border: colors.neutral[700],
-  onBackground: colors.neutral[0],
-  onSurface: colors.neutral[100],
-  muted: colors.neutral[400],
-  primary: colors.brand.primary,
-  secondary: colors.brand.secondary,
-  success: colors.success.light,
-  error: colors.error.light,
-  warning: colors.warning.light,
-  info: colors.info.light
+  bg: {
+    primary: colors.marianBlue[600],
+    primaryHover: colors.marianBlue[500],
+    primaryPressed: colors.marianBlue[600],
+    primarySubtle: colors.marianBlue[900],
+    primarySubtleHover: colors.marianBlue[800],
+    primarySubtlePressed: colors.marianBlue[700],
+    surface: colors.midnight[900],
+    surfaceRaised: colors.midnight[800],
+    surfaceHover: colors.midnight[800],
+    surfacePressed: colors.midnight[600],
+    overlay: colors.black,
+    overlaySubtle: colors.overlayWhite[8],
+    overlaySubtleHover: colors.overlayWhite[12],
+    overlaySubtlePressed: colors.overlayWhite[16],
+    success: colors.green[300],
+    successSubtle: colors.green[800],
+    error: colors.ketchup[900],
+    errorSubtle: colors.ketchup[800],
+    warning: colors.amber[900],
+    warningSubtle: colors.amber[800],
+    info: colors.blue[600],
+    infoSubtle: colors.blue[700],
+    highlight: colors.brandGreen,
+    accent: colors.amber[900],
+    accentSubtle: colors.amber[900],
+    disabled: colors.midnight[700]
+  },
+  text: {
+    primary: colors.white,
+    secondary: colors.gray[300],
+    inverse: colors.midnight[900],
+    brand: colors.marianBlue[300],
+    link: colors.marianBlue[300],
+    placeholder: colors.gray[400],
+    success: colors.green[500],
+    error: colors.ketchup[600],
+    warning: colors.amber[500],
+    info: colors.blue[100],
+    highlight: colors.marianBlue[900],
+    accent: colors.amber.text,
+    disabled: colors.gray[600],
+    onSuccess: colors.white,
+    onError: colors.white,
+    onWarning: colors.midnight[900],
+    onHighlight: colors.midnight[900]
+  },
+  border: {
+    default: colors.midnight[50],
+    strong: colors.marianBlue[300],
+    subtle: colors.overlayWhite[5],
+    focus: colors.white,
+    accent: colors.amber.text,
+    success: colors.green.text,
+    error: colors.ketchup[500],
+    warning: colors.amber[600],
+    info: colors.blue[500],
+    disabled: colors.midnight[700]
+  },
+  icon: {
+    primary: colors.white,
+    secondary: colors.gray[400],
+    inverse: colors.midnight[900],
+    brand: colors.marianBlue[300],
+    accent: colors.amber[700],
+    success: colors.green.text,
+    error: colors.ketchup.text,
+    warning: colors.amber[100],
+    info: colors.blue[100],
+    highlight: colors.marianBlue[900],
+    disabled: colors.gray[600]
+  },
+  interactive: {
+    hover: colors.overlayWhite[8],
+    pressed: colors.overlayWhite[12],
+    selected: colors.marianBlue[800],
+    selectedSubtle: colors.marianBlue[900]
+  }
+};
+
+// src/context/ThemeProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DSThemeContext = (0, import_react.createContext)({ theme: lightTheme, colorScheme: "light" });
+function DSThemeProvider({
+  colorScheme = "light",
+  children
+}) {
+  const value = (0, import_react.useMemo)(
+    () => ({ theme: colorScheme === "dark" ? darkTheme : lightTheme, colorScheme }),
+    [colorScheme]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DSThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  return (0, import_react.useContext)(DSThemeContext);
+}
+
+// src/components/Button/Button.native.tsx
+var import_react_native = require("react-native");
+
+// src/components/Button/Button.styles.ts
+var buttonTokens = {
+  sizes: {
+    sm: { height: 32, paddingHorizontal: 12 },
+    md: { height: 40, paddingHorizontal: 16 },
+    lg: { height: 48, paddingHorizontal: 24 }
+  },
+  borderRadius: radius.full
+};
+
+// src/components/Button/Button.native.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var textStyleBySize = {
+  sm: typography.buttonSmall,
+  md: typography.buttonDefault,
+  lg: typography.buttonLarge
+};
+function Button({ variant = "primary", size = "lg", disabled = false, children, onPress }) {
+  const { theme } = useTheme();
+  const { sizes: sizes2, borderRadius } = buttonTokens;
+  const sizeStyle = sizes2[size];
+  const textStyle = textStyleBySize[size];
+  const bgColor = disabled ? variant === "ghost" ? "transparent" : theme.bg.disabled : variant === "primary" ? theme.bg.primary : variant === "secondary" ? theme.bg.primarySubtle : "transparent";
+  const textColor = disabled ? theme.text.disabled : variant === "primary" ? theme.text.inverse : variant === "secondary" ? theme.text.primary : theme.text.brand;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native.Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      style: ({ pressed }) => [
+        styles.base,
+        {
+          height: sizeStyle.height,
+          paddingHorizontal: sizeStyle.paddingHorizontal,
+          borderRadius,
+          backgroundColor: bgColor,
+          opacity: !disabled && pressed ? 1 - opacity.pressed : 1
+        }
+      ],
+      accessibilityRole: "button",
+      accessibilityState: { disabled },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: [textStyle, { color: textColor }], children })
+    }
+  );
+}
+var styles = import_react_native.StyleSheet.create({
+  base: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8 }
+});
+
+// src/components/ButtonIcon/ButtonIcon.native.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var sizeBySize = {
+  sm: 40,
+  md: 48,
+  lg: 64
 };
+function ButtonIcon({ icon, accessibilityLabel, variant = "primary", size = "md", disabled = false, onPress }) {
+  const { theme, colorScheme } = useTheme();
+  const dimension = sizeBySize[size];
+  const bgColor = disabled ? variant === "ghost" ? "transparent" : theme.bg.disabled : variant === "primary" ? theme.bg.primary : variant === "secondary" ? theme.bg.primarySubtle : variant === "overlay" ? colorScheme === "dark" ? colors.overlayWhite[8] : colors.overlayBlack[8] : "transparent";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native2.Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      style: ({ pressed }) => [
+        styles2.base,
+        {
+          width: dimension,
+          height: dimension,
+          borderRadius: radius.full,
+          backgroundColor: bgColor,
+          opacity: !disabled && pressed ? 1 - opacity.pressed : 1
+        }
+      ],
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      children: icon
+    }
+  );
+}
+var styles2 = import_react_native2.StyleSheet.create({
+  base: { alignItems: "center", justifyContent: "center" }
+});
+
+// src/components/DismissButton/DismissButton.native.tsx
+var import_react_native3 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var containerSize = { xs: 20, sm: 32, md: 40 };
+var glyphSize = { xs: 12, sm: 16, md: 20 };
+function DismissButton({ accessibilityLabel = "Fechar", variant = "subtle", size = "sm", disabled = false, onPress }) {
+  const { theme, colorScheme } = useTheme();
+  const dimension = containerSize[size];
+  const glyph2 = glyphSize[size];
+  const bgColor = disabled ? variant === "ghost" ? "transparent" : theme.bg.disabled : variant === "subtle" ? colorScheme === "dark" ? colors.overlayWhite[8] : colors.overlayBlack[8] : "transparent";
+  const glyphColor = disabled ? theme.text.disabled : theme.icon.primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_native3.Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      style: ({ pressed }) => [
+        styles3.base,
+        {
+          width: dimension,
+          height: dimension,
+          borderRadius: radius.full,
+          backgroundColor: bgColor,
+          opacity: !disabled && pressed ? 1 - opacity.pressed : 1
+        }
+      ],
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: { width: glyph2, height: glyph2, alignItems: "center", justifyContent: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.line, { width: glyph2, backgroundColor: glyphColor, transform: [{ rotate: "45deg" }] }] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles3.line, { width: glyph2, backgroundColor: glyphColor, transform: [{ rotate: "-45deg" }] }] })
+      ] })
+    }
+  );
+}
+var styles3 = import_react_native3.StyleSheet.create({
+  base: { alignItems: "center", justifyContent: "center" },
+  line: { position: "absolute", height: 2, borderRadius: 1 }
+});
+
+// src/components/Chip/Chip.native.tsx
+var import_react_native4 = require("react-native");
+
+// src/components/Chip/Chip.styles.ts
+var chipSizes = {
+  sm: { height: 32, paddingHorizontal: 12 },
+  md: { height: 44, paddingHorizontal: 16 }
+};
+var chipRadius = radius.chip;
+
+// src/components/Chip/Chip.native.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Chip({ children, checked = false, disabled = false, size = "md", leading, trailing, onPress, style }) {
+  const { theme } = useTheme();
+  const { height, paddingHorizontal } = chipSizes[size];
+  const bg = disabled ? theme.bg.disabled : checked ? theme.interactive.selected : "transparent";
+  const borderColor = disabled ? theme.border.disabled : checked ? theme.interactive.selected : theme.border.default;
+  const textColor = disabled ? theme.text.disabled : checked ? theme.text.inverse : theme.text.primary;
+  const baseText = size === "sm" ? typography.caption : typography.bodyDefault;
+  const textStyle = { ...baseText, fontWeight: checked ? "600" : baseText.fontWeight };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_react_native4.Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      style: ({ pressed }) => [
+        styles4.base,
+        {
+          height,
+          paddingHorizontal,
+          borderRadius: chipRadius,
+          backgroundColor: bg,
+          borderColor,
+          borderWidth: borderWidth.default,
+          opacity: !disabled && pressed ? 1 - opacity.pressed : 1
+        },
+        style
+      ],
+      accessibilityRole: "button",
+      accessibilityState: { selected: checked, disabled },
+      children: [
+        leading,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: [textStyle, { color: textColor }], children }),
+        trailing
+      ]
+    }
+  );
+}
+var styles4 = import_react_native4.StyleSheet.create({
+  base: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8, borderStyle: "solid" }
+});
+
+// src/components/Alert/Alert.native.tsx
+var import_react_native5 = require("react-native");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var glyph = { success: "\u2713", info: "i", warning: "!", error: "\u2715" };
+function Alert({ variant = "info", size = "default", layout = "stacked", title, description, onDismiss }) {
+  const { theme } = useTheme();
+  const bg = { success: theme.bg.successSubtle, info: theme.bg.infoSubtle, warning: theme.bg.warningSubtle, error: theme.bg.errorSubtle }[variant];
+  const iconColor = { success: theme.icon.success, info: theme.icon.info, warning: theme.icon.warning, error: theme.icon.error }[variant];
+  const borderColor = theme.border.subtle;
+  const padding = size === "compact" ? 12 : 20;
+  const outerGap = size === "compact" ? 8 : 12;
+  const iconEl = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: [styles5.icon, { borderColor: iconColor }], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: { color: iconColor, fontSize: 13, fontWeight: "700", lineHeight: 16 }, children: glyph[variant] }) });
+  const bodyEl = description ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: [typography.bodyDefault, { color: theme.text.secondary, flex: layout === "inline" ? 1 : void 0 }], children: description }) : null;
+  const closeEl = onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Pressable, { onPress: onDismiss, accessibilityRole: "button", accessibilityLabel: "Fechar", style: styles5.close, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: { color: theme.text.primary, fontSize: 16, lineHeight: 20 }, children: "\u2715" }) }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react_native5.View,
+    {
+      style: [styles5.container, { backgroundColor: bg, borderColor, padding, gap: outerGap }],
+      accessibilityRole: variant === "error" ? "alert" : void 0,
+      accessibilityLiveRegion: variant === "error" ? "assertive" : "polite",
+      children: [
+        layout === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          iconEl,
+          bodyEl
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.content, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.header, children: [
+            iconEl,
+            title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: [typography.h3, styles5.title, { color: theme.text.primary }], children: title }) : null
+          ] }),
+          bodyEl
+        ] }),
+        closeEl
+      ]
+    }
+  );
+}
+var styles5 = import_react_native5.StyleSheet.create({
+  container: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    borderWidth: borderWidth.default,
+    borderStyle: "solid",
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    borderBottomRightRadius: 24,
+    borderBottomLeftRadius: 0
+  },
+  content: { flex: 1, flexDirection: "column", gap: 8 },
+  header: { flexDirection: "row", alignItems: "center", gap: 12 },
+  title: { flex: 1 },
+  icon: { width: 24, height: 24, borderRadius: 12, borderWidth: 2, alignItems: "center", justifyContent: "center" },
+  close: {}
+});
+
+// src/components/ProgressBar/ProgressBar.native.tsx
+var import_react_native6 = require("react-native");
+
+// src/components/ProgressBar/ProgressBar.styles.ts
+var progressBarTokens = {
+  height: 8,
+  borderRadius: radius.full,
+  fillBorderRadius: radius.full
+};
+
+// src/components/ProgressBar/ProgressBar.native.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ProgressBar({ value }) {
+  const { theme } = useTheme();
+  const { height, borderRadius, fillBorderRadius } = progressBarTokens;
+  const pct = Math.min(100, Math.max(0, value));
+  const trackColor = theme.bg.surfaceHover;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_native6.View,
+    {
+      style: [styles6.track, { height, borderRadius, backgroundColor: trackColor }],
+      accessibilityRole: "progressbar",
+      accessibilityValue: { min: 0, max: 100, now: pct },
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: { height, width: `${pct}%`, borderRadius: fillBorderRadius, backgroundColor: theme.bg.primary } })
+    }
+  );
+}
+var styles6 = import_react_native6.StyleSheet.create({
+  track: { width: "100%", overflow: "hidden" }
+});
+
+// src/components/Input/Input.native.tsx
+var import_react2 = require("react");
+var import_react_native7 = require("react-native");
+
+// src/components/Input/Input.styles.ts
+var inputTokens = {
+  height: 48,
+  padding: 12,
+  gap: 8,
+  borderRadius: radius.input
+};
+
+// src/components/Input/Input.native.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Input({ value, placeholder = "exemplo@email.com", state = "default", leadingIcon, trailingIcon, onChangeText, onFocus, onBlur, style }) {
+  const { theme } = useTheme();
+  const { height, padding, gap, borderRadius } = inputTokens;
+  const [isFocused, setIsFocused] = (0, import_react2.useState)(false);
+  const isDisabled = state === "disabled";
+  const isError = state === "error";
+  const isFilled = state === "filled";
+  const bg = isDisabled ? theme.bg.disabled : theme.bg.surface;
+  const borderColor = isDisabled ? theme.border.disabled : isError ? theme.border.error : isFocused ? theme.border.focus : theme.border.default;
+  const inputBorderWidth = isFocused ? borderWidth.heavy : borderWidth.default;
+  const textColor = isDisabled ? theme.text.disabled : isError ? theme.text.error : isFilled || isFocused ? theme.text.primary : theme.text.secondary;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: [styles7.container, { height, padding, gap, borderRadius, backgroundColor: bg, borderColor, borderWidth: inputBorderWidth }, style], children: [
+    leadingIcon,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react_native7.TextInput,
+      {
+        value,
+        placeholder,
+        placeholderTextColor: textColor,
+        editable: !isDisabled,
+        onChangeText,
+        onFocus: () => {
+          setIsFocused(true);
+          onFocus?.();
+        },
+        onBlur: () => {
+          setIsFocused(false);
+          onBlur?.();
+        },
+        style: [typography.bodyDefault, styles7.input, { color: textColor }]
+      }
+    ),
+    trailingIcon
+  ] });
+}
+var styles7 = import_react_native7.StyleSheet.create({
+  container: { flexDirection: "row", alignItems: "center", borderStyle: "solid" },
+  input: { flex: 1, padding: 0 }
+});
+
+// src/components/InputField/InputField.native.tsx
+var import_react_native8 = require("react-native");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function InputField({
+  label,
+  required,
+  helperText,
+  error,
+  value,
+  placeholder,
+  disabled,
+  leadingIcon,
+  trailingIcon,
+  onChangeText,
+  onFocus,
+  onBlur
+}) {
+  const { theme } = useTheme();
+  const state = disabled ? "disabled" : error ? "error" : "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { style: { gap: 8, width: "100%" }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.Text, { style: [typography.labelDefault, { color: theme.text.primary }], children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.Text, { style: { color: theme.text.error }, children: " *" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Input,
+      {
+        state,
+        value,
+        placeholder,
+        leadingIcon,
+        trailingIcon,
+        onChangeText,
+        onFocus,
+        onBlur
+      }
+    ),
+    helperText && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.Text, { style: [typography.caption, { color: error ? theme.text.error : theme.text.secondary }], children: helperText })
+  ] });
+}
+
+// src/components/Checkbox/Checkbox.native.tsx
+var import_react_native9 = require("react-native");
+
+// src/components/Checkbox/Checkbox.styles.ts
+var checkboxSizes = {
+  xs: { box: 16, radius: 4 },
+  sm: { box: 20, radius: 5 },
+  md: { box: 24, radius: 6 }
+};
+
+// src/components/Checkbox/Checkbox.native.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Checkbox({ checked = false, onChange, disabled = false, size = "sm" }) {
+  const { theme } = useTheme();
+  const { box, radius: radius2 } = checkboxSizes[size];
+  const boxBg = checked ? disabled ? theme.bg.disabled : theme.interactive.selected : "transparent";
+  const boxBorder = checked ? boxBg : disabled ? theme.text.disabled : theme.icon.secondary;
+  const checkColor = disabled ? theme.text.disabled : colors.white;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_native9.Pressable,
+    {
+      onPress: disabled ? void 0 : () => onChange?.(!checked),
+      disabled,
+      style: ({ pressed }) => [
+        styles8.wrapper,
+        // state layer: interactive/selected at ~12% (8-digit hex alpha).
+        { backgroundColor: !disabled && pressed ? `${theme.interactive.selected}1F` : "transparent" }
+      ],
+      accessibilityRole: "checkbox",
+      accessibilityState: { checked, disabled },
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_react_native9.View,
+        {
+          style: [
+            styles8.box,
+            {
+              width: box,
+              height: box,
+              borderRadius: radius2,
+              backgroundColor: boxBg,
+              borderColor: boxBorder,
+              borderWidth: checked ? 0 : borderWidth.heavy
+            }
+          ],
+          children: checked && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_react_native9.View,
+            {
+              style: {
+                width: box * 0.5,
+                height: box * 0.4,
+                borderLeftWidth: 1.5,
+                borderBottomWidth: 1.5,
+                borderColor: checkColor,
+                transform: [{ rotate: "-45deg" }, { translateY: -box * 0.1 }]
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var styles8 = import_react_native9.StyleSheet.create({
+  wrapper: { padding: 4, borderRadius: 9999, alignItems: "center", justifyContent: "center" },
+  box: { alignItems: "center", justifyContent: "center" }
+});
+
+// src/components/ToggleSwitch/ToggleSwitch.native.tsx
+var import_react3 = require("react");
+var import_react_native10 = require("react-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var sizes = {
+  xs: { w: 32, h: 20, knob: 16 },
+  sm: { w: 40, h: 24, knob: 20 },
+  md: { w: 52, h: 32, knob: 28 }
+};
+function ToggleSwitch({ value = false, onChange, disabled = false, size = "sm", accessibilityLabel }) {
+  const { theme } = useTheme();
+  const { w, h, knob } = sizes[size];
+  const travel = w - knob - 4;
+  const anim = (0, import_react3.useRef)(new import_react_native10.Animated.Value(value ? 1 : 0)).current;
+  (0, import_react3.useEffect)(() => {
+    import_react_native10.Animated.timing(anim, { toValue: value ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+  }, [value, anim]);
+  const translateX = anim.interpolate({ inputRange: [0, 1], outputRange: [0, travel] });
+  const trackColor = disabled ? theme.bg.disabled : value ? theme.interactive.selected : theme.bg.disabled;
+  const knobColor = disabled ? theme.text.disabled : theme.text.inverse;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_native10.Pressable,
+    {
+      onPress: disabled ? void 0 : () => onChange?.(!value),
+      disabled,
+      style: { width: w, height: h, borderRadius: radius.full, backgroundColor: trackColor, padding: 2, justifyContent: "center" },
+      accessibilityRole: "switch",
+      accessibilityState: { checked: value, disabled },
+      accessibilityLabel,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_react_native10.Animated.View,
+        {
+          style: { width: knob, height: knob, borderRadius: radius.full, backgroundColor: knobColor, transform: [{ translateX }] }
+        }
+      )
+    }
+  );
+}
+
+// src/components/RadioGroup/RadioGroup.native.tsx
+var import_react_native11 = require("react-native");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function RadioGroup({ children, label, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { accessibilityRole: "radiogroup", accessibilityLabel: label, style: [{ gap: 8 }, style], children });
+}
+
+// src/components/ChoiceCard/ChoiceCard.native.tsx
+var import_react_native12 = require("react-native");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Trailing({ type, selected, disabled }) {
+  const { theme } = useTheme();
+  const offColor = disabled ? theme.text.disabled : theme.icon.secondary;
+  const onColor = theme.interactive.selected;
+  if (type === "action") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles9.caret, { borderColor: disabled ? theme.text.disabled : theme.icon.secondary }] });
+  }
+  if (type === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles9.indicator, styles9.checkbox, { borderColor: selected ? onColor : offColor, backgroundColor: selected ? onColor : "transparent" }], children: selected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles9.check, { borderColor: colors.white }] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles9.indicator, styles9.radio, { borderColor: selected ? onColor : offColor }], children: selected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles9.dot, { backgroundColor: onColor }] }) });
+}
+function ChoiceCard({ type = "radio", label, description, selected = false, disabled = false, leading, showTrailing = true, onPress }) {
+  const { theme } = useTheme();
+  const isSelected = type === "action" ? false : selected;
+  const baseBg = disabled ? theme.bg.surface : isSelected ? theme.bg.primarySubtle : theme.bg.surface;
+  const pressedBg = isSelected ? theme.bg.primarySubtlePressed : theme.bg.surfacePressed;
+  const borderColor = disabled ? theme.border.disabled : isSelected ? theme.border.strong : theme.border.default;
+  const textColor = disabled ? theme.text.disabled : theme.text.primary;
+  const descColor = disabled ? theme.text.disabled : theme.text.secondary;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    import_react_native12.Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      accessibilityRole: type === "radio" ? "radio" : type === "checkbox" ? "checkbox" : "button",
+      accessibilityState: { selected: isSelected, checked: isSelected, disabled },
+      style: ({ pressed }) => [
+        styles9.card,
+        {
+          backgroundColor: !disabled && pressed ? pressedBg : baseBg,
+          borderColor,
+          borderWidth: isSelected ? borderWidth.heavy : borderWidth.default
+        }
+      ],
+      children: [
+        leading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: styles9.leading, children: leading }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native12.View, { style: styles9.text, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Text, { style: [description ? typography.labelDefault : typography.bodyDefault, { color: textColor }], children: label }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Text, { style: [typography.bodyDefault, { color: descColor }], children: description }) : null
+        ] }),
+        showTrailing && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Trailing, { type, selected: isSelected, disabled })
+      ]
+    }
+  );
+}
+var styles9 = import_react_native12.StyleSheet.create({
+  card: { width: "100%", flexDirection: "row", alignItems: "center", gap: 12, padding: 16, borderRadius: 20, borderStyle: "solid" },
+  leading: { width: 24, height: 24, alignItems: "center", justifyContent: "center" },
+  text: { flex: 1, flexDirection: "column", gap: 4 },
+  indicator: { width: 24, height: 24, alignItems: "center", justifyContent: "center", borderWidth: 2 },
+  checkbox: { borderRadius: 6 },
+  radio: { borderRadius: 12 },
+  dot: { width: 12, height: 12, borderRadius: 6 },
+  check: { width: 12, height: 8, borderLeftWidth: 2, borderBottomWidth: 2, transform: [{ rotate: "-45deg" }, { translateY: -1 }] },
+  caret: { width: 10, height: 10, borderTopWidth: 2, borderRightWidth: 2, transform: [{ rotate: "45deg" }] }
+});
+
+// src/components/ListItem/ListItem.native.tsx
+var import_react_native13 = require("react-native");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function TrailingVisual({ trailing, selected, disabled }) {
+  const { theme } = useTheme();
+  const offColor = disabled ? theme.text.disabled : theme.icon.secondary;
+  const onColor = theme.interactive.selected;
+  if (trailing === "action") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [styles10.caret, { borderColor: disabled ? theme.text.disabled : theme.icon.secondary }] });
+  }
+  if (trailing === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [styles10.indicator, styles10.checkbox, { borderColor: selected ? onColor : offColor, backgroundColor: selected ? onColor : "transparent" }], children: selected && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [styles10.check, { borderColor: colors.white }] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [styles10.indicator, styles10.radio, { borderColor: selected ? onColor : offColor }], children: selected && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: [styles10.dot, { backgroundColor: onColor }] }) });
+}
+function ListItem({ trailing = "none", label, description, selected = false, disabled = false, leading, switchValue = false, onSwitchChange, onPress }) {
+  const { theme } = useTheme();
+  const isSelected = trailing === "radio" || trailing === "checkbox" ? selected : false;
+  const textColor = disabled ? theme.text.disabled : theme.text.primary;
+  const descColor = disabled ? theme.text.disabled : theme.text.secondary;
+  const selectedBg = theme.bg.primarySubtle;
+  const selectedPressedBg = theme.bg.primarySubtlePressed;
+  const neutralPressedBg = theme.bg.surfacePressed;
+  const rowStyle = (pressed) => [
+    styles10.row,
+    { padding: description ? 16 : 10 },
+    isSelected ? { backgroundColor: !disabled && pressed ? selectedPressedBg : selectedBg } : { backgroundColor: !disabled && pressed ? neutralPressedBg : "transparent" }
+  ];
+  const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    leading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: styles10.leading, children: leading }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native13.View, { style: styles10.text, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.Text, { style: [description ? typography.labelDefault : typography.bodyDefault, { color: textColor }], children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.Text, { style: [typography.bodyDefault, { color: descColor }], children: description }) : null
+    ] }),
+    trailing === "switch" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToggleSwitch, { size: "sm", value: switchValue, onChange: onSwitchChange, disabled, accessibilityLabel: label }) : trailing !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TrailingVisual, { trailing, selected: isSelected, disabled }) : null
+  ] });
+  if (trailing === "switch" || trailing === "none") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: rowStyle(false), children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_native13.Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      accessibilityRole: trailing === "radio" ? "radio" : trailing === "checkbox" ? "checkbox" : "button",
+      accessibilityState: { selected: isSelected, checked: isSelected, disabled },
+      style: ({ pressed }) => rowStyle(pressed),
+      children: content
+    }
+  );
+}
+var styles10 = import_react_native13.StyleSheet.create({
+  row: { width: "100%", flexDirection: "row", alignItems: "center", gap: 12 },
+  leading: { width: 24, height: 24, alignItems: "center", justifyContent: "center" },
+  text: { flex: 1, flexDirection: "column", gap: 4 },
+  indicator: { width: 24, height: 24, alignItems: "center", justifyContent: "center", borderWidth: 2 },
+  checkbox: { borderRadius: 6 },
+  radio: { borderRadius: 12 },
+  dot: { width: 12, height: 12, borderRadius: 6 },
+  check: { width: 12, height: 8, borderLeftWidth: 2, borderBottomWidth: 2, transform: [{ rotate: "-45deg" }, { translateY: -1 }] },
+  caret: { width: 10, height: 10, borderTopWidth: 2, borderRightWidth: 2, transform: [{ rotate: "45deg" }] }
+});
+
+// src/components/Stepper/Stepper.native.tsx
+var import_react_native14 = require("react-native");
+
+// src/components/Stepper/Stepper.styles.ts
+var stepperTokens = {
+  segmentHeight: 4,
+  segmentRadius: radius.full,
+  gap: 4
+};
+
+// src/components/Stepper/Stepper.native.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Stepper({ totalSteps, currentStep, style }) {
+  const { theme } = useTheme();
+  const { segmentHeight, segmentRadius, gap } = stepperTokens;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react_native14.View,
+    {
+      style: [{ flexDirection: "row", alignItems: "flex-start", width: "100%", gap }, style],
+      accessibilityRole: "progressbar",
+      accessibilityValue: { min: 1, max: totalSteps, now: currentStep },
+      accessibilityLabel: `Etapa ${currentStep} de ${totalSteps}`,
+      children: Array.from({ length: totalSteps }, (_, i) => {
+        const color = i < currentStep - 1 ? theme.bg.primary : i === currentStep - 1 ? theme.bg.primarySubtle : theme.bg.disabled;
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native14.View, { style: { flex: 1, height: segmentHeight, borderRadius: segmentRadius, backgroundColor: color } }, i);
+      })
+    }
+  );
+}
+
+// src/components/RatingScale/RatingScale.native.tsx
+var import_react_native15 = require("react-native");
+
+// src/components/RatingScale/RatingScale.styles.ts
+var ratingScaleTokens = {
+  itemWidth: 60,
+  circleSize: 60,
+  circleRadius: 30,
+  emojiFontSize: 28,
+  emojiLineHeight: 34,
+  itemGap: 6
+};
+var DEFAULT_OPTIONS = [
+  { emoji: "\u{1F621}", label: "P\xE9ssimo" },
+  { emoji: "\u{1F615}", label: "Ruim" },
+  { emoji: "\u{1F610}", label: "Neutro" },
+  { emoji: "\u{1F60A}", label: "Bom" },
+  { emoji: "\u{1F60D}", label: "\xD3timo" }
+];
+
+// src/components/RatingScale/RatingScale.native.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, disabled = false, style }) {
+  const { theme } = useTheme();
+  const { circleSize, circleRadius, emojiFontSize, emojiLineHeight, itemGap } = ratingScaleTokens;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.View, { style: [styles11.container, style], children: options.map((option, index) => {
+    const itemValue = index + 1;
+    const selected = value === itemValue;
+    const circleBg = disabled ? theme.bg.disabled : selected ? theme.bg.primarySubtle : theme.bg.surface;
+    const circleBorderColor = disabled ? theme.border.disabled : selected ? theme.border.strong : theme.border.default;
+    const labelColor = disabled ? theme.text.disabled : theme.text.primary;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      import_react_native15.Pressable,
+      {
+        onPress: disabled ? void 0 : () => onChange?.(itemValue),
+        disabled,
+        style: [styles11.item, { gap: itemGap }],
+        accessibilityRole: "radio",
+        accessibilityState: { selected, disabled },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_react_native15.View,
+            {
+              style: [
+                styles11.circle,
+                {
+                  width: circleSize,
+                  height: circleSize,
+                  borderRadius: circleRadius,
+                  backgroundColor: circleBg,
+                  borderWidth: selected ? borderWidth.heavy : borderWidth.default,
+                  borderColor: circleBorderColor
+                }
+              ],
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.Text, { style: [styles11.emoji, { fontSize: emojiFontSize, lineHeight: emojiLineHeight, opacity: disabled ? 0.4 : 1 }], children: option.emoji })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.Text, { style: [typography.caption, styles11.label, { color: labelColor }], children: option.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.Text, { style: [styles11.number, { color: theme.text.disabled }], children: itemValue })
+        ]
+      },
+      itemValue
+    );
+  }) });
+}
+var styles11 = import_react_native15.StyleSheet.create({
+  container: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8, padding: 16 },
+  item: { flex: 1, alignItems: "center" },
+  circle: { alignItems: "center", justifyContent: "center", overflow: "hidden" },
+  emoji: { textAlign: "center" },
+  label: { textAlign: "center" },
+  number: { textAlign: "center", fontFamily: "Inter", fontSize: 10, fontWeight: "600", letterSpacing: 0.8 }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Alert,
+  Button,
+  ButtonIcon,
+  Checkbox,
+  Chip,
+  ChoiceCard,
+  DSThemeProvider,
+  DismissButton,
+  Input,
+  InputField,
+  ListItem,
+  ProgressBar,
+  RadioGroup,
+  RatingScale,
+  Stepper,
+  ToggleSwitch,
+  borderWidth,
   colors,
   darkTheme,
-  lightTheme
+  grid,
+  lightTheme,
+  opacity,
+  radius,
+  shadow,
+  spacing,
+  typography,
+  useTheme
 });
 //# sourceMappingURL=index.native.js.map