@12min/ds 0.1.0 → 3.0.0

package/dist/index.native.mjs

@@ -1,13 +1,750 @@
 import {
+  DEFAULT_OPTIONS,
   darkTheme,
-  lightTheme
-} from "./chunk-QIJRSFZB.mjs";
+  lightTheme,
+  ratingScaleTokens
+} from "./chunk-ZKPOS2PD.mjs";
 import {
-  colors
-} from "./chunk-E2C4G6H4.mjs";
+  borderWidth,
+  colors,
+  grid,
+  opacity,
+  radius,
+  shadow,
+  spacing,
+  typography
+} from "./chunk-ZK7NW4WW.mjs";
+
+// src/context/ThemeProvider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var DSThemeContext = createContext({ theme: lightTheme, colorScheme: "light" });
+function DSThemeProvider({
+  colorScheme = "light",
+  children
+}) {
+  const value = useMemo(
+    () => ({ theme: colorScheme === "dark" ? darkTheme : lightTheme, colorScheme }),
+    [colorScheme]
+  );
+  return /* @__PURE__ */ jsx(DSThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  return useContext(DSThemeContext);
+}
+
+// src/components/Button/Button.native.tsx
+import { Pressable, Text, StyleSheet } from "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
+import { jsx as jsx2 } from "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__ */ jsx2(
+    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__ */ jsx2(Text, { style: [textStyle, { color: textColor }], children })
+    }
+  );
+}
+var styles = StyleSheet.create({
+  base: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8 }
+});
+
+// src/components/ButtonIcon/ButtonIcon.native.tsx
+import { Pressable as Pressable2, StyleSheet as StyleSheet2 } from "react-native";
+import { jsx as jsx3 } from "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__ */ jsx3(
+    Pressable2,
+    {
+      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 = StyleSheet2.create({
+  base: { alignItems: "center", justifyContent: "center" }
+});
+
+// src/components/DismissButton/DismissButton.native.tsx
+import { Pressable as Pressable3, View, StyleSheet as StyleSheet3 } from "react-native";
+import { jsx as jsx4, jsxs } from "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__ */ jsx4(
+    Pressable3,
+    {
+      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__ */ jsxs(View, { style: { width: glyph2, height: glyph2, alignItems: "center", justifyContent: "center" }, children: [
+        /* @__PURE__ */ jsx4(View, { style: [styles3.line, { width: glyph2, backgroundColor: glyphColor, transform: [{ rotate: "45deg" }] }] }),
+        /* @__PURE__ */ jsx4(View, { style: [styles3.line, { width: glyph2, backgroundColor: glyphColor, transform: [{ rotate: "-45deg" }] }] })
+      ] })
+    }
+  );
+}
+var styles3 = StyleSheet3.create({
+  base: { alignItems: "center", justifyContent: "center" },
+  line: { position: "absolute", height: 2, borderRadius: 1 }
+});
+
+// src/components/Chip/Chip.native.tsx
+import { Pressable as Pressable4, Text as Text2, StyleSheet as StyleSheet4 } from "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
+import { jsx as jsx5, jsxs as jsxs2 } from "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__ */ jsxs2(
+    Pressable4,
+    {
+      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__ */ jsx5(Text2, { style: [textStyle, { color: textColor }], children }),
+        trailing
+      ]
+    }
+  );
+}
+var styles4 = StyleSheet4.create({
+  base: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8, borderStyle: "solid" }
+});
+
+// src/components/Alert/Alert.native.tsx
+import { Pressable as Pressable5, View as View2, Text as Text3, StyleSheet as StyleSheet5 } from "react-native";
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "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__ */ jsx6(View2, { style: [styles5.icon, { borderColor: iconColor }], children: /* @__PURE__ */ jsx6(Text3, { style: { color: iconColor, fontSize: 13, fontWeight: "700", lineHeight: 16 }, children: glyph[variant] }) });
+  const bodyEl = description ? /* @__PURE__ */ jsx6(Text3, { style: [typography.bodyDefault, { color: theme.text.secondary, flex: layout === "inline" ? 1 : void 0 }], children: description }) : null;
+  const closeEl = onDismiss ? /* @__PURE__ */ jsx6(Pressable5, { onPress: onDismiss, accessibilityRole: "button", accessibilityLabel: "Fechar", style: styles5.close, children: /* @__PURE__ */ jsx6(Text3, { style: { color: theme.text.primary, fontSize: 16, lineHeight: 20 }, children: "\u2715" }) }) : null;
+  return /* @__PURE__ */ jsxs3(
+    View2,
+    {
+      style: [styles5.container, { backgroundColor: bg, borderColor, padding, gap: outerGap }],
+      accessibilityRole: variant === "error" ? "alert" : void 0,
+      accessibilityLiveRegion: variant === "error" ? "assertive" : "polite",
+      children: [
+        layout === "inline" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          iconEl,
+          bodyEl
+        ] }) : /* @__PURE__ */ jsxs3(View2, { style: styles5.content, children: [
+          /* @__PURE__ */ jsxs3(View2, { style: styles5.header, children: [
+            iconEl,
+            title ? /* @__PURE__ */ jsx6(Text3, { style: [typography.h3, styles5.title, { color: theme.text.primary }], children: title }) : null
+          ] }),
+          bodyEl
+        ] }),
+        closeEl
+      ]
+    }
+  );
+}
+var styles5 = StyleSheet5.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
+import { View as View3, StyleSheet as StyleSheet6 } from "react-native";
+
+// src/components/ProgressBar/ProgressBar.styles.ts
+var progressBarTokens = {
+  height: 8,
+  borderRadius: radius.full,
+  fillBorderRadius: radius.full
+};
+
+// src/components/ProgressBar/ProgressBar.native.tsx
+import { jsx as jsx7 } from "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__ */ jsx7(
+    View3,
+    {
+      style: [styles6.track, { height, borderRadius, backgroundColor: trackColor }],
+      accessibilityRole: "progressbar",
+      accessibilityValue: { min: 0, max: 100, now: pct },
+      children: /* @__PURE__ */ jsx7(View3, { style: { height, width: `${pct}%`, borderRadius: fillBorderRadius, backgroundColor: theme.bg.primary } })
+    }
+  );
+}
+var styles6 = StyleSheet6.create({
+  track: { width: "100%", overflow: "hidden" }
+});
+
+// src/components/Input/Input.native.tsx
+import { useState } from "react";
+import { View as View4, TextInput, StyleSheet as StyleSheet7 } from "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
+import { jsx as jsx8, jsxs as jsxs4 } from "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] = 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__ */ jsxs4(View4, { style: [styles7.container, { height, padding, gap, borderRadius, backgroundColor: bg, borderColor, borderWidth: inputBorderWidth }, style], children: [
+    leadingIcon,
+    /* @__PURE__ */ jsx8(
+      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 = StyleSheet7.create({
+  container: { flexDirection: "row", alignItems: "center", borderStyle: "solid" },
+  input: { flex: 1, padding: 0 }
+});
+
+// src/components/InputField/InputField.native.tsx
+import { View as View5, Text as Text4 } from "react-native";
+import { jsx as jsx9, jsxs as jsxs5 } from "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__ */ jsxs5(View5, { style: { gap: 8, width: "100%" }, children: [
+    label && /* @__PURE__ */ jsxs5(Text4, { style: [typography.labelDefault, { color: theme.text.primary }], children: [
+      label,
+      required && /* @__PURE__ */ jsx9(Text4, { style: { color: theme.text.error }, children: " *" })
+    ] }),
+    /* @__PURE__ */ jsx9(
+      Input,
+      {
+        state,
+        value,
+        placeholder,
+        leadingIcon,
+        trailingIcon,
+        onChangeText,
+        onFocus,
+        onBlur
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx9(Text4, { style: [typography.caption, { color: error ? theme.text.error : theme.text.secondary }], children: helperText })
+  ] });
+}
+
+// src/components/Checkbox/Checkbox.native.tsx
+import { Pressable as Pressable6, View as View6, StyleSheet as StyleSheet8 } from "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
+import { jsx as jsx10 } from "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__ */ jsx10(
+    Pressable6,
+    {
+      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__ */ jsx10(
+        View6,
+        {
+          style: [
+            styles8.box,
+            {
+              width: box,
+              height: box,
+              borderRadius: radius2,
+              backgroundColor: boxBg,
+              borderColor: boxBorder,
+              borderWidth: checked ? 0 : borderWidth.heavy
+            }
+          ],
+          children: checked && /* @__PURE__ */ jsx10(
+            View6,
+            {
+              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 = StyleSheet8.create({
+  wrapper: { padding: 4, borderRadius: 9999, alignItems: "center", justifyContent: "center" },
+  box: { alignItems: "center", justifyContent: "center" }
+});
+
+// src/components/ToggleSwitch/ToggleSwitch.native.tsx
+import { useEffect, useRef } from "react";
+import { Pressable as Pressable7, Animated } from "react-native";
+import { jsx as jsx11 } from "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 = useRef(new Animated.Value(value ? 1 : 0)).current;
+  useEffect(() => {
+    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__ */ jsx11(
+    Pressable7,
+    {
+      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__ */ jsx11(
+        Animated.View,
+        {
+          style: { width: knob, height: knob, borderRadius: radius.full, backgroundColor: knobColor, transform: [{ translateX }] }
+        }
+      )
+    }
+  );
+}
+
+// src/components/RadioGroup/RadioGroup.native.tsx
+import { View as View7 } from "react-native";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function RadioGroup({ children, label, style }) {
+  return /* @__PURE__ */ jsx12(View7, { accessibilityRole: "radiogroup", accessibilityLabel: label, style: [{ gap: 8 }, style], children });
+}
+
+// src/components/ChoiceCard/ChoiceCard.native.tsx
+import { Pressable as Pressable8, View as View8, Text as Text5, StyleSheet as StyleSheet9 } from "react-native";
+import { jsx as jsx13, jsxs as jsxs6 } from "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__ */ jsx13(View8, { style: [styles9.caret, { borderColor: disabled ? theme.text.disabled : theme.icon.secondary }] });
+  }
+  if (type === "checkbox") {
+    return /* @__PURE__ */ jsx13(View8, { style: [styles9.indicator, styles9.checkbox, { borderColor: selected ? onColor : offColor, backgroundColor: selected ? onColor : "transparent" }], children: selected && /* @__PURE__ */ jsx13(View8, { style: [styles9.check, { borderColor: colors.white }] }) });
+  }
+  return /* @__PURE__ */ jsx13(View8, { style: [styles9.indicator, styles9.radio, { borderColor: selected ? onColor : offColor }], children: selected && /* @__PURE__ */ jsx13(View8, { 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__ */ jsxs6(
+    Pressable8,
+    {
+      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__ */ jsx13(View8, { style: styles9.leading, children: leading }),
+        /* @__PURE__ */ jsxs6(View8, { style: styles9.text, children: [
+          /* @__PURE__ */ jsx13(Text5, { style: [description ? typography.labelDefault : typography.bodyDefault, { color: textColor }], children: label }),
+          description ? /* @__PURE__ */ jsx13(Text5, { style: [typography.bodyDefault, { color: descColor }], children: description }) : null
+        ] }),
+        showTrailing && /* @__PURE__ */ jsx13(Trailing, { type, selected: isSelected, disabled })
+      ]
+    }
+  );
+}
+var styles9 = StyleSheet9.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
+import { Pressable as Pressable9, View as View9, Text as Text6, StyleSheet as StyleSheet10 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs7 } from "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__ */ jsx14(View9, { style: [styles10.caret, { borderColor: disabled ? theme.text.disabled : theme.icon.secondary }] });
+  }
+  if (trailing === "checkbox") {
+    return /* @__PURE__ */ jsx14(View9, { style: [styles10.indicator, styles10.checkbox, { borderColor: selected ? onColor : offColor, backgroundColor: selected ? onColor : "transparent" }], children: selected && /* @__PURE__ */ jsx14(View9, { style: [styles10.check, { borderColor: colors.white }] }) });
+  }
+  return /* @__PURE__ */ jsx14(View9, { style: [styles10.indicator, styles10.radio, { borderColor: selected ? onColor : offColor }], children: selected && /* @__PURE__ */ jsx14(View9, { 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__ */ jsxs7(Fragment2, { children: [
+    leading && /* @__PURE__ */ jsx14(View9, { style: styles10.leading, children: leading }),
+    /* @__PURE__ */ jsxs7(View9, { style: styles10.text, children: [
+      /* @__PURE__ */ jsx14(Text6, { style: [description ? typography.labelDefault : typography.bodyDefault, { color: textColor }], children: label }),
+      description ? /* @__PURE__ */ jsx14(Text6, { style: [typography.bodyDefault, { color: descColor }], children: description }) : null
+    ] }),
+    trailing === "switch" ? /* @__PURE__ */ jsx14(ToggleSwitch, { size: "sm", value: switchValue, onChange: onSwitchChange, disabled, accessibilityLabel: label }) : trailing !== "none" ? /* @__PURE__ */ jsx14(TrailingVisual, { trailing, selected: isSelected, disabled }) : null
+  ] });
+  if (trailing === "switch" || trailing === "none") {
+    return /* @__PURE__ */ jsx14(View9, { style: rowStyle(false), children: content });
+  }
+  return /* @__PURE__ */ jsx14(
+    Pressable9,
+    {
+      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 = StyleSheet10.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
+import { View as View10 } from "react-native";
+
+// src/components/Stepper/Stepper.styles.ts
+var stepperTokens = {
+  segmentHeight: 4,
+  segmentRadius: radius.full,
+  gap: 4
+};
+
+// src/components/Stepper/Stepper.native.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Stepper({ totalSteps, currentStep, style }) {
+  const { theme } = useTheme();
+  const { segmentHeight, segmentRadius, gap } = stepperTokens;
+  return /* @__PURE__ */ jsx15(
+    View10,
+    {
+      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__ */ jsx15(View10, { style: { flex: 1, height: segmentHeight, borderRadius: segmentRadius, backgroundColor: color } }, i);
+      })
+    }
+  );
+}
+
+// src/components/RatingScale/RatingScale.native.tsx
+import { Pressable as Pressable10, View as View11, Text as Text7, StyleSheet as StyleSheet11 } from "react-native";
+import { jsx as jsx16, jsxs as jsxs8 } from "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__ */ jsx16(View11, { 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__ */ jsxs8(
+      Pressable10,
+      {
+        onPress: disabled ? void 0 : () => onChange?.(itemValue),
+        disabled,
+        style: [styles11.item, { gap: itemGap }],
+        accessibilityRole: "radio",
+        accessibilityState: { selected, disabled },
+        children: [
+          /* @__PURE__ */ jsx16(
+            View11,
+            {
+              style: [
+                styles11.circle,
+                {
+                  width: circleSize,
+                  height: circleSize,
+                  borderRadius: circleRadius,
+                  backgroundColor: circleBg,
+                  borderWidth: selected ? borderWidth.heavy : borderWidth.default,
+                  borderColor: circleBorderColor
+                }
+              ],
+              children: /* @__PURE__ */ jsx16(Text7, { style: [styles11.emoji, { fontSize: emojiFontSize, lineHeight: emojiLineHeight, opacity: disabled ? 0.4 : 1 }], children: option.emoji })
+            }
+          ),
+          /* @__PURE__ */ jsx16(Text7, { style: [typography.caption, styles11.label, { color: labelColor }], children: option.label }),
+          /* @__PURE__ */ jsx16(Text7, { style: [styles11.number, { color: theme.text.disabled }], children: itemValue })
+        ]
+      },
+      itemValue
+    );
+  }) });
+}
+var styles11 = StyleSheet11.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 }
+});
 export {
+  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.mjs.map