@12min/ds 0.1.0 → 1.0.0

package/dist/index.native.js

@@ -20,88 +20,716 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // index.native.ts
 var index_native_exports = {};
 __export(index_native_exports, {
+  ActionItem: () => ActionItem,
+  Alert: () => Alert,
+  Button: () => Button,
+  Checkbox: () => Checkbox,
+  Chip: () => Chip,
+  DSThemeProvider: () => DSThemeProvider,
+  Input: () => Input,
+  ProgressBar: () => ProgressBar,
+  RadioGroup: () => RadioGroup,
+  RadioItem: () => RadioItem,
+  RatingScale: () => RatingScale,
+  Stepper: () => Stepper,
   colors: () => colors,
   darkTheme: () => darkTheme,
-  lightTheme: () => lightTheme
+  lightTheme: () => lightTheme,
+  typography: () => typography,
+  useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_native_exports);
 
 // src/tokens/colors.ts
 var colors = {
-  brand: {
-    primary: "#FF6B35",
-    secondary: "#1A1A2E"
+  marianBlue: {
+    50: "#FAFBFF",
+    100: "#F1F4FE",
+    200: "#E1E7FF",
+    300: "#C3CCF7",
+    400: "#94A5F2",
+    500: "#697DD6",
+    600: "#475CBB",
+    700: "#31428B",
+    800: "#25326A",
+    900: "#131937"
   },
-  neutral: {
-    0: "#FFFFFF",
-    50: "#FAFAFA",
-    100: "#F5F5F5",
-    200: "#E5E5E5",
-    300: "#D4D4D4",
-    400: "#A3A3A3",
-    500: "#737373",
-    600: "#525252",
-    700: "#404040",
-    800: "#262626",
-    900: "#121212"
+  midnight: {
+    50: "#707070",
+    100: "#5C5C5C",
+    200: "#525252",
+    300: "#474747",
+    400: "#3D3D3D",
+    500: "#333333",
+    600: "#1E1E1E",
+    700: "#161616",
+    800: "#141414",
+    900: "#0A0A0A"
   },
-  success: {
-    light: "#4ADE80",
-    default: "#22C55E",
-    dark: "#16A34A"
+  gray: {
+    50: "#B1B5BE",
+    100: "#A6ABB5",
+    200: "#9BA0AB",
+    300: "#9095A2",
+    400: "#858B99",
+    500: "#7A8190",
+    600: "#6F7685",
+    700: "#5E6471",
+    800: "#5D636F",
+    900: "#545964"
   },
-  error: {
-    light: "#F87171",
-    default: "#EF4444",
-    dark: "#DC2626"
+  mustard: {
+    50: "#FFF2D6",
+    100: "#FFECC2",
+    200: "#FFE5AD",
+    300: "#FFDF99",
+    400: "#FFD885",
+    500: "#FFD270",
+    600: "#FFCB5C",
+    700: "#FFC140",
+    800: "#FFBE33",
+    900: "#FFB81F"
   },
-  warning: {
-    light: "#FCD34D",
-    default: "#F59E0B",
-    dark: "#D97706"
+  ketchup: {
+    50: "#FFD6D6",
+    100: "#FFC2C2",
+    200: "#FFADAD",
+    300: "#FF9999",
+    400: "#FF8585",
+    500: "#FF7070",
+    600: "#FF5C5C",
+    700: "#FF4040",
+    800: "#FF3333",
+    900: "#FF1F1F"
   },
-  info: {
-    light: "#60A5FA",
-    default: "#3B82F6",
-    dark: "#2563EB"
-  }
+  mint: {
+    50: "#A7F1B7",
+    100: "#96EEA9",
+    200: "#84EB9A",
+    300: "#73E88C",
+    400: "#61E57E",
+    500: "#50E26F",
+    600: "#3EE061",
+    700: "#24DC4C",
+    800: "#22D348",
+    900: "#1FC142"
+  },
+  white: "#FFFFFF",
+  successBg: "#E5FBE9"
+};
+
+// src/tokens/typography.ts
+var typography = {
+  display: { fontSize: 32, fontWeight: "700", lineHeight: 1.2, fontFamily: "Poppins" },
+  h1: { fontSize: 24, fontWeight: "700", lineHeight: 1.3, fontFamily: "Poppins" },
+  h2: { fontSize: 20, fontWeight: "600", lineHeight: 1.3, fontFamily: "Poppins" },
+  h3: { fontSize: 18, fontWeight: "600", lineHeight: 1.4, fontFamily: "Poppins" },
+  bodyLarge: { fontSize: 16, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
+  bodyDefault: { fontSize: 14, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
+  bodySmall: { fontSize: 12, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
+  labelLarge: { fontSize: 16, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  labelDefault: { fontSize: 14, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  labelSmall: { fontSize: 12, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  caption: { fontSize: 12, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  overline: { fontSize: 10, fontWeight: "600", lineHeight: 1, fontFamily: "Inter" },
+  buttonLarge: { fontSize: 16, fontWeight: "600", lineHeight: 1.5, fontFamily: "Inter" },
+  buttonDefault: { fontSize: 14, fontWeight: "600", lineHeight: 1.5, fontFamily: "Inter" }
 };
 
 // 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
+  background: colors.marianBlue[50],
+  surface: colors.marianBlue[100],
+  border: colors.marianBlue[200],
+  onBackground: colors.midnight[900],
+  onSurface: colors.midnight[700],
+  muted: colors.gray[500],
+  primary: colors.marianBlue[600],
+  secondary: colors.midnight[900],
+  success: colors.mint[800],
+  error: colors.ketchup[600],
+  warning: colors.mustard[500],
+  info: colors.marianBlue[500],
+  surfaceDisabled: colors.gray[50],
+  successBg: colors.successBg,
+  textSecondary: colors.gray[700],
+  textTertiary: colors.gray[500],
+  textInverse: colors.white,
+  borderStrong: colors.marianBlue[600],
+  borderSubtle: colors.marianBlue[200],
+  interactivePressed: colors.marianBlue[800]
 };
 
 // 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
+  background: colors.midnight[900],
+  surface: colors.midnight[700],
+  border: colors.midnight[500],
+  onBackground: colors.marianBlue[50],
+  onSurface: colors.gray[50],
+  muted: colors.gray[600],
+  primary: colors.marianBlue[400],
+  secondary: colors.marianBlue[50],
+  success: colors.mint[400],
+  error: colors.ketchup[400],
+  warning: colors.mustard[400],
+  info: colors.marianBlue[300],
+  surfaceDisabled: colors.midnight[600],
+  successBg: colors.midnight[800],
+  textSecondary: colors.gray[400],
+  textTertiary: colors.gray[500],
+  textInverse: colors.midnight[900],
+  borderStrong: colors.marianBlue[400],
+  borderSubtle: colors.midnight[600],
+  interactivePressed: colors.marianBlue[300]
+};
+
+// 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: 36, paddingHorizontal: 14, fontSize: 14 },
+    md: { height: 48, paddingHorizontal: 16, fontSize: 16 },
+    lg: { height: 56, paddingHorizontal: 24, fontSize: 18 }
+  },
+  borderRadius: 9999
+};
+
+// src/components/Button/Button.native.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Button({ variant = "primary", size = "md", disabled = false, children, onPress }) {
+  const { theme } = useTheme();
+  const { sizes, borderRadius } = buttonTokens;
+  const sizeStyle = sizes[size];
+  const bgColor = disabled ? theme.surfaceDisabled : variant === "primary" ? theme.primary : variant === "secondary" ? theme.surface : "transparent";
+  const textColor = variant === "primary" ? theme.textInverse : variant === "secondary" ? theme.onBackground : theme.primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native.Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      style: ({ pressed }) => [
+        styles.base,
+        {
+          height: sizeStyle.height,
+          paddingHorizontal: sizeStyle.paddingHorizontal,
+          borderRadius,
+          backgroundColor: bgColor,
+          opacity: disabled ? 0.5 : pressed ? 0.85 : 1
+        }
+      ],
+      accessibilityRole: "button",
+      accessibilityState: { disabled },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: [styles.label, { fontSize: sizeStyle.fontSize, color: textColor }], children })
+    }
+  );
+}
+var styles = import_react_native.StyleSheet.create({
+  base: { flexDirection: "row", alignItems: "center", justifyContent: "center" },
+  label: { fontWeight: "600" }
+});
+
+// src/components/Chip/Chip.native.tsx
+var import_react_native2 = require("react-native");
+
+// src/components/Chip/Chip.styles.ts
+var chipTokens = {
+  size: { height: 48, paddingHorizontal: 16, fontSize: 14 },
+  borderRadius: 56
+};
+
+// src/components/Chip/Chip.native.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Chip({ children, checked = false, onPress, style }) {
+  const { theme } = useTheme();
+  const { size, borderRadius } = chipTokens;
+  const bg = checked ? theme.primary : theme.surface;
+  const textColor = checked ? theme.textInverse : theme.onBackground;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native2.Pressable,
+    {
+      onPress,
+      style: ({ pressed }) => [
+        styles2.base,
+        { height: size.height, paddingHorizontal: size.paddingHorizontal, borderRadius, backgroundColor: bg, opacity: pressed ? 0.85 : 1 },
+        style
+      ],
+      accessibilityRole: "button",
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Text, { style: { fontSize: size.fontSize, color: textColor, fontWeight: checked ? "600" : "500" }, children })
+    }
+  );
+}
+var styles2 = import_react_native2.StyleSheet.create({
+  base: { flexDirection: "row", alignItems: "center", justifyContent: "center" }
+});
+
+// src/components/Alert/Alert.native.tsx
+var import_react_native3 = require("react-native");
+
+// src/components/Alert/Alert.styles.ts
+var alertTokens = {
+  padding: 20,
+  borderRadius: 32
+};
+
+// src/components/Alert/Alert.native.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Alert({ variant = "info", title, description }) {
+  const { theme } = useTheme();
+  const { padding, borderRadius } = alertTokens;
+  const bg = variant === "success" ? theme.successBg : theme.surface;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native3.View, { style: [styles3.container, { backgroundColor: bg, padding, borderColor: theme.border }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.Text, { style: [styles3.title, { color: theme.onBackground }], children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.Text, { style: [styles3.description, { color: theme.muted }], children: description })
+  ] });
+}
+var styles3 = import_react_native3.StyleSheet.create({
+  container: {
+    width: "100%",
+    borderWidth: 1,
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+    borderBottomRightRadius: 32,
+    borderBottomLeftRadius: 0
+  },
+  title: { fontWeight: "600", fontSize: 16, lineHeight: 22 },
+  description: { fontWeight: "500", fontSize: 14, lineHeight: 21, marginTop: 12 }
+});
+
+// src/components/ProgressBar/ProgressBar.native.tsx
+var import_react_native4 = require("react-native");
+
+// src/components/ProgressBar/ProgressBar.styles.ts
+var progressBarTokens = {
+  height: 8,
+  borderRadius: 999,
+  fillBorderRadius: 24
+};
+
+// src/components/ProgressBar/ProgressBar.native.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ProgressBar({ value }) {
+  const { theme } = useTheme();
+  const { height, borderRadius, fillBorderRadius } = progressBarTokens;
+  const pct = Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_native4.View,
+    {
+      style: [styles4.track, { height, borderRadius, backgroundColor: theme.border }],
+      accessibilityRole: "progressbar",
+      accessibilityValue: { min: 0, max: 100, now: pct },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: { height, width: `${pct}%`, borderRadius: fillBorderRadius, backgroundColor: theme.primary } })
+    }
+  );
+}
+var styles4 = import_react_native4.StyleSheet.create({
+  track: { width: "100%", overflow: "hidden" }
+});
+
+// src/components/Input/Input.native.tsx
+var import_react2 = require("react");
+var import_react_native5 = require("react-native");
+
+// src/components/Input/Input.styles.ts
+var inputTokens = {
+  height: 48,
+  padding: 12,
+  gap: 8,
+  borderRadius: 12,
+  fontSize: 14
+};
+
+// src/components/Input/Input.native.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Input({ value, placeholder = "exemplo@email.com", state = "default", leadingIcon, onChangeText, onFocus, onBlur, style }) {
+  const { theme } = useTheme();
+  const { height, padding, gap, borderRadius, fontSize } = 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.background : theme.surface;
+  const borderColor = isDisabled ? theme.muted : isError ? theme.error : isFocused ? theme.primary : theme.border;
+  const borderWidth = isFocused ? 2 : 1;
+  const textColor = isDisabled ? theme.muted : isError ? theme.error : isFilled || isFocused ? theme.onBackground : theme.muted;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: [styles5.container, { height, padding, gap, borderRadius, backgroundColor: bg, borderColor, borderWidth }, style], children: [
+    leadingIcon,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native5.TextInput,
+      {
+        value,
+        placeholder,
+        placeholderTextColor: textColor,
+        editable: !isDisabled,
+        onChangeText,
+        onFocus: () => {
+          setIsFocused(true);
+          onFocus?.();
+        },
+        onBlur: () => {
+          setIsFocused(false);
+          onBlur?.();
+        },
+        style: [styles5.input, { fontSize, color: textColor }]
+      }
+    )
+  ] });
+}
+var styles5 = import_react_native5.StyleSheet.create({
+  container: { flexDirection: "row", alignItems: "center", borderStyle: "solid" },
+  input: { flex: 1, fontWeight: "500", padding: 0 }
+});
+
+// src/components/Checkbox/Checkbox.native.tsx
+var import_react_native6 = require("react-native");
+
+// src/components/Checkbox/Checkbox.styles.ts
+var checkboxTokens = {
+  size: 20,
+  borderRadius: 6
 };
+
+// src/components/Checkbox/Checkbox.native.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Checkbox({ checked = false, onChange, disabled = false }) {
+  const { theme } = useTheme();
+  const { size, borderRadius } = checkboxTokens;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_native6.Pressable,
+    {
+      onPress: disabled ? void 0 : () => onChange?.(!checked),
+      style: ({ pressed }) => [
+        styles6.base,
+        {
+          width: size,
+          height: size,
+          borderRadius,
+          backgroundColor: checked ? theme.primary : "transparent",
+          borderWidth: checked ? 0 : 1,
+          borderColor: theme.primary,
+          opacity: disabled ? 0.5 : pressed ? 0.85 : 1
+        }
+      ],
+      accessibilityRole: "checkbox",
+      accessibilityState: { checked, disabled },
+      children: checked && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.checkmark, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: [styles6.checkLine, { borderColor: theme.textInverse }] }) })
+    }
+  );
+}
+var styles6 = import_react_native6.StyleSheet.create({
+  base: { alignItems: "center", justifyContent: "center" },
+  checkmark: { width: 10, height: 8, alignItems: "center", justifyContent: "center" },
+  checkLine: { width: 10, height: 8, borderLeftWidth: 1.5, borderBottomWidth: 1.5, transform: [{ rotate: "-45deg" }, { translateY: -2 }] }
+});
+
+// src/components/RadioItem/RadioItem.native.tsx
+var import_react_native7 = require("react-native");
+
+// src/components/RadioItem/RadioItem.styles.ts
+var radioItemTokens = {
+  height: 48,
+  padding: 16,
+  gap: 12,
+  borderRadius: 16,
+  radioSize: 20,
+  fontSize: 14
+};
+
+// src/components/RadioItem/RadioItem.native.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function RadioItem({ label, description, selected = false, icon, onPress, style }) {
+  const { theme } = useTheme();
+  const { height, padding, gap, borderRadius, radioSize, fontSize } = radioItemTokens;
+  const bg = selected ? theme.primary : theme.surface;
+  const textColor = selected ? theme.textInverse : theme.onBackground;
+  const descColor = selected ? theme.textInverse : theme.textSecondary;
+  const descOpacity = selected ? 0.8 : 1;
+  const radioBorderColor = selected ? theme.textInverse : theme.onBackground;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_react_native7.Pressable,
+    {
+      onPress,
+      style: ({ pressed }) => [
+        styles7.container,
+        { height, paddingHorizontal: padding, gap, borderRadius, backgroundColor: bg, opacity: pressed ? 0.9 : 1 },
+        style
+      ],
+      accessibilityRole: "radio",
+      accessibilityState: { selected },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: styles7.left, children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: styles7.icon, children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: styles7.textContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles7.label, { fontSize, color: textColor, fontWeight: selected ? "700" : "500" }], children: label }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles7.description, { color: descColor, opacity: descOpacity }], children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: [styles7.radio, { width: radioSize, height: radioSize, borderRadius: radioSize / 2, borderColor: radioBorderColor }] })
+      ]
+    }
+  );
+}
+var styles7 = import_react_native7.StyleSheet.create({
+  container: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+  left: { flexDirection: "row", alignItems: "center", gap: 12 },
+  icon: { width: 20, height: 20 },
+  textContainer: { flexDirection: "column", gap: 2 },
+  label: { lineHeight: 21 },
+  description: { fontSize: 12, fontWeight: "400", lineHeight: 18, letterSpacing: 0.024 },
+  radio: { borderWidth: 1 }
+});
+
+// src/components/RadioGroup/RadioGroup.native.tsx
+var import_react_native8 = require("react-native");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function RadioGroup({ children, label, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.View, { accessibilityRole: "radiogroup", accessibilityLabel: label, style: [{ gap: 8 }, style], children });
+}
+
+// src/components/ActionItem/ActionItem.native.tsx
+var import_react_native9 = require("react-native");
+
+// src/components/ActionItem/ActionItem.styles.ts
+var actionItemTokens = {
+  height: 56,
+  padding: 16,
+  gap: 20,
+  innerGap: 16,
+  borderRadius: 16,
+  fontSize: 14
+};
+
+// src/components/ActionItem/ActionItem.native.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ActionItem({ label, description, selected = false, icon, onPress, style }) {
+  const { theme } = useTheme();
+  const { height, padding, gap, innerGap, borderRadius, fontSize } = actionItemTokens;
+  const bg = selected ? theme.border : theme.surface;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_react_native9.Pressable,
+    {
+      onPress,
+      style: ({ pressed }) => [
+        styles8.container,
+        {
+          height,
+          paddingHorizontal: padding,
+          gap,
+          borderRadius,
+          backgroundColor: bg,
+          borderWidth: selected ? 2 : 0,
+          borderColor: selected ? theme.primary : "transparent",
+          opacity: pressed ? 0.9 : 1
+        },
+        style
+      ],
+      accessibilityRole: "button",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: [styles8.content, { gap: innerGap }], children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { style: styles8.icon, children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles8.textContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.Text, { style: [styles8.label, { fontSize, color: theme.onBackground }], numberOfLines: 1, children: label }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.Text, { style: [styles8.description, { color: theme.textSecondary }], numberOfLines: 1, children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { style: styles8.chevron, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.Text, { style: [styles8.chevronText, { color: theme.onBackground }], children: "\u203A" }) })
+      ]
+    }
+  );
+}
+var styles8 = import_react_native9.StyleSheet.create({
+  container: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+  content: { flex: 1, flexDirection: "row", alignItems: "center", minWidth: 0 },
+  icon: { width: 24, height: 24, overflow: "hidden", flexShrink: 0 },
+  textContainer: { flex: 1, flexDirection: "column", gap: 4, minWidth: 0 },
+  label: { fontWeight: "500", lineHeight: 21 },
+  description: { fontSize: 12, fontWeight: "400", lineHeight: 18, letterSpacing: 0.024 },
+  chevron: { width: 24, height: 24, alignItems: "center", justifyContent: "center", flexShrink: 0 },
+  chevronText: { fontSize: 20 }
+});
+
+// src/components/Stepper/Stepper.native.tsx
+var import_react_native10 = require("react-native");
+
+// src/components/Stepper/Stepper.styles.ts
+var stepperTokens = {
+  trackHeight: 4,
+  trackRadius: 8,
+  dotSize: 4,
+  labelFontSize: 10,
+  gap: 4
+};
+
+// src/components/Stepper/Stepper.native.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Stepper({ steps, currentStep, style }) {
+  const { theme } = useTheme();
+  const { trackHeight, trackRadius, dotSize, labelFontSize, gap } = stepperTokens;
+  const getState = (i) => i < currentStep ? "completed" : i === currentStep ? "active" : "upcoming";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: [styles9.container, { gap }, style], children: steps.map((step, i) => {
+    const state = getState(i);
+    const isLast = i === steps.length - 1;
+    const trackBg = state === "completed" ? theme.primary : theme.border;
+    const dotBg = state === "completed" ? theme.primary : theme.border;
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: { flexDirection: "row", alignItems: "flex-end", flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles9.stepItem, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: styles9.labelRow, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_react_native10.Text,
+          {
+            style: [styles9.label, { fontSize: labelFontSize, color: theme.onBackground, opacity: state === "active" ? 1 : 0 }],
+            numberOfLines: 1,
+            children: step.label
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: [styles9.track, { height: trackHeight, borderRadius: trackRadius, backgroundColor: trackBg }], children: state === "active" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_react_native10.View,
+          {
+            style: [styles9.trackFill, { height: trackHeight, borderRadius: trackRadius, backgroundColor: theme.onBackground, right: 12 }]
+          }
+        ) })
+      ] }),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: [styles9.dot, { width: dotSize, height: dotSize, borderRadius: dotSize / 2, backgroundColor: dotBg }] })
+    ] }, step.label);
+  }) });
+}
+var styles9 = import_react_native10.StyleSheet.create({
+  container: { width: "100%", flexDirection: "row", alignItems: "flex-end" },
+  stepItem: { flex: 1, flexDirection: "column", gap: 4 },
+  labelRow: { height: 12, justifyContent: "flex-end" },
+  label: { fontWeight: "600", letterSpacing: 0.8, textTransform: "uppercase" },
+  track: { overflow: "hidden", position: "relative" },
+  trackFill: { position: "absolute", left: 0 },
+  dot: { alignSelf: "flex-end" }
+});
+
+// src/components/RatingScale/RatingScale.native.tsx
+var import_react_native11 = require("react-native");
+
+// src/components/RatingScale/RatingScale.styles.ts
+var ratingScaleTokens = {
+  itemWidth: 60,
+  circleSize: 60,
+  circlePadding: 8,
+  circleRadius: 30,
+  emojiFontSize: 38,
+  emojiLineHeight: 44,
+  labelFontSize: 12,
+  numberFontSize: 10,
+  itemGap: 8,
+  labelNumberGap: 11
+};
+var DEFAULT_OPTIONS = [
+  { emoji: "\u{1F61E}", label: "Nada\na ver" },
+  { emoji: "\u{1F641}", label: "Pouco\na ver" },
+  { emoji: "\u{1F610}", label: "Mais ou\nmenos" },
+  { emoji: "\u{1F642}", label: "Tem\na ver" },
+  { emoji: "\u{1F60A}", label: "Totalmente\neu" }
+];
+
+// src/components/RatingScale/RatingScale.native.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, style }) {
+  const { theme } = useTheme();
+  const { itemWidth, circleSize, circlePadding, circleRadius, emojiFontSize, emojiLineHeight, labelFontSize, numberFontSize, labelNumberGap } = ratingScaleTokens;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { style: [styles10.container, style], children: options.map((option, index) => {
+    const itemValue = index + 1;
+    const selected = value === itemValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      import_react_native11.Pressable,
+      {
+        onPress: () => onChange?.(itemValue),
+        style: styles10.item,
+        accessibilityRole: "button",
+        accessibilityState: { selected },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_react_native11.View,
+            {
+              style: [
+                styles10.circle,
+                {
+                  width: circleSize,
+                  height: circleSize,
+                  borderRadius: circleRadius,
+                  padding: circlePadding,
+                  backgroundColor: selected ? theme.primary : theme.surface,
+                  borderWidth: selected ? 0 : 1,
+                  borderColor: theme.border
+                }
+              ],
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Text, { style: [styles10.emoji, { fontSize: emojiFontSize, lineHeight: emojiLineHeight }], children: option.emoji })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native11.View, { style: [styles10.labelContainer, { gap: labelNumberGap }], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              import_react_native11.Text,
+              {
+                style: [
+                  styles10.label,
+                  {
+                    fontSize: labelFontSize,
+                    color: selected ? theme.primary : theme.onBackground,
+                    fontWeight: selected ? "700" : "500",
+                    width: itemWidth
+                  }
+                ],
+                children: option.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Text, { style: [styles10.number, { fontSize: numberFontSize, color: theme.textTertiary }], children: itemValue })
+          ] })
+        ]
+      },
+      itemValue
+    );
+  }) });
+}
+var styles10 = import_react_native11.StyleSheet.create({
+  container: { flexDirection: "row", justifyContent: "space-between" },
+  item: { alignItems: "center", gap: 8 },
+  circle: { alignItems: "center", justifyContent: "center", overflow: "hidden" },
+  emoji: { textAlign: "center" },
+  labelContainer: { alignItems: "center" },
+  label: { textAlign: "center", lineHeight: 16 },
+  number: { fontWeight: "600", letterSpacing: 0.8, textAlign: "center", lineHeight: 10 }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActionItem,
+  Alert,
+  Button,
+  Checkbox,
+  Chip,
+  DSThemeProvider,
+  Input,
+  ProgressBar,
+  RadioGroup,
+  RadioItem,
+  RatingScale,
+  Stepper,
   colors,
   darkTheme,
-  lightTheme
+  lightTheme,
+  typography,
+  useTheme
 });
 //# sourceMappingURL=index.native.js.map