@boostdev/design-system-components 1.0.3 → 1.1.0

package/dist/native/index.cjs

@@ -0,0 +1,991 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/native.ts
+var native_exports = {};
+__export(native_exports, {
+  Alert: () => Alert,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  Button: () => Button,
+  ButtonGroup: () => ButtonGroup,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
+  IconWrapper: () => IconWrapper,
+  Label: () => Label,
+  Loading: () => Loading,
+  Message: () => Message,
+  NotificationBanner: () => NotificationBanner,
+  Progress: () => Progress,
+  Radio: () => Radio,
+  SectionHeader: () => SectionHeader,
+  Separator: () => Separator,
+  Skeleton: () => Skeleton,
+  Switch: () => Switch,
+  ThemeProvider: () => ThemeProvider,
+  Typography: () => Typography,
+  animation: () => import_native.animation,
+  border: () => import_native.border,
+  colors: () => import_native.colors,
+  font: () => import_native.font,
+  lineHeight: () => lineHeight,
+  spacing: () => import_native.spacing,
+  useTheme: () => useTheme,
+  zIndex: () => import_native.zIndex
+});
+module.exports = __toCommonJS(native_exports);
+
+// src/native/ThemeContext.tsx
+var import_react = require("react");
+var import_react_native = require("react-native");
+
+// src/native/tokens.ts
+var import_native = require("@boostdev/design-system-foundation/native");
+var lineHeight = {
+  display: Math.round(import_native.font.size.display * import_native.font.lineHeight.display),
+  heading1: Math.round(import_native.font.size.heading1 * import_native.font.lineHeight.heading),
+  heading2: Math.round(import_native.font.size.heading2 * import_native.font.lineHeight.heading),
+  heading3: Math.round(import_native.font.size.heading3 * import_native.font.lineHeight.heading),
+  body: Math.round(import_native.font.size.body * import_native.font.lineHeight.body),
+  bodyS: Math.round(import_native.font.size.bodyS * import_native.font.lineHeight.body)
+};
+
+// src/native/ThemeContext.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(null);
+function ThemeProvider({ children }) {
+  const scheme = (0, import_react_native.useColorScheme)();
+  const isDark = scheme === "dark";
+  const value = (0, import_react.useMemo)(
+    () => ({ colors: isDark ? import_native.colors.dark : import_native.colors.light, isDark }),
+    [isDark]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const ctx = (0, import_react.useContext)(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+}
+
+// src/components/ui/Typography/Typography.native.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var styles = import_react_native2.StyleSheet.create({
+  base: {
+    fontFamily: import_native.font.family.body,
+    fontWeight: import_native.font.weight.body
+  },
+  h1: {
+    fontSize: import_native.font.size.heading1,
+    fontFamily: import_native.font.family.heading,
+    fontWeight: import_native.font.weight.heading,
+    lineHeight: lineHeight.heading1
+  },
+  h2: {
+    fontSize: import_native.font.size.heading2,
+    fontFamily: import_native.font.family.heading,
+    fontWeight: import_native.font.weight.heading,
+    lineHeight: lineHeight.heading2
+  },
+  h3: {
+    fontSize: import_native.font.size.heading3,
+    fontFamily: import_native.font.family.heading,
+    fontWeight: import_native.font.weight.heading,
+    lineHeight: lineHeight.heading3
+  },
+  body: {
+    fontSize: import_native.font.size.body,
+    lineHeight: lineHeight.body
+  },
+  body_s: {
+    fontSize: import_native.font.size.bodyS,
+    lineHeight: lineHeight.bodyS
+  }
+});
+var accessibilityRoles = {
+  h1: "header",
+  h2: "header",
+  h3: "header",
+  body: "text",
+  body_s: "text"
+};
+function Typography({ variant = "body", children, style }) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.Text,
+    {
+      accessibilityRole: accessibilityRoles[variant],
+      style: [styles.base, styles[variant], { color: colors2.colorOnBg }, style],
+      children
+    }
+  );
+}
+
+// src/components/ui/Badge/Badge.native.tsx
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var styles2 = import_react_native3.StyleSheet.create({
+  badge: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: import_native.spacing.xxs,
+    paddingHorizontal: import_native.spacing.xs,
+    borderRadius: 999
+  },
+  text: {
+    fontSize: import_native.font.size.bodyS,
+    fontFamily: import_native.font.family.body,
+    fontWeight: import_native.font.weight.semibold,
+    lineHeight: import_native.font.size.bodyS
+  }
+});
+function Badge({ children, variant = "primary", style }) {
+  const { colors: colors2 } = useTheme();
+  const variantColors = {
+    primary: { bg: colors2.colorInteractive, text: colors2.colorOnInteractive },
+    secondary: { bg: colors2.colorBgSubtle, text: colors2.colorOnBgSubtle },
+    success: { bg: colors2.colorSuccess, text: colors2.colorOnSuccess },
+    error: { bg: colors2.colorError, text: colors2.colorOnError },
+    warning: { bg: colors2.colorWarning, text: colors2.colorOnWarning }
+  };
+  const { bg, text } = variantColors[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles2.badge, { backgroundColor: bg }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [styles2.text, { color: text }], children }) });
+}
+
+// src/components/ui/Avatar/Avatar.native.tsx
+var import_react_native4 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var sizeMap = {
+  small: { container: 32, fontSize: import_native.font.size.bodyS },
+  medium: { container: 48, fontSize: import_native.font.size.body },
+  large: { container: 72, fontSize: import_native.font.size.heading3 }
+};
+function getInitials(name) {
+  return name.split(" ").filter(Boolean).slice(0, 2).map((word) => word[0].toUpperCase()).join("");
+}
+var styles3 = import_react_native4.StyleSheet.create({
+  container: {
+    borderRadius: 999,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  initials: {
+    fontFamily: import_native.font.family.body,
+    fontWeight: import_native.font.weight.semibold
+  }
+});
+function Avatar({ src, alt, name, size = "medium", style }) {
+  const { colors: colors2 } = useTheme();
+  const { container, fontSize } = sizeMap[size];
+  const label = alt ?? name ?? "User avatar";
+  if (src) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react_native4.View,
+      {
+        style: [styles3.container, { width: container, height: container }, style],
+        accessibilityLabel: label,
+        accessibilityRole: "image",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Image, { source: { uri: src }, style: styles3.image })
+      }
+    );
+  }
+  const initials = name ? getInitials(name) : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_native4.View,
+    {
+      style: [
+        styles3.container,
+        { width: container, height: container, backgroundColor: colors2.colorBlue },
+        style
+      ],
+      accessibilityLabel: label,
+      accessibilityRole: "image",
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_react_native4.Text,
+        {
+          style: [styles3.initials, { fontSize, color: colors2.colorOnBlue }],
+          importantForAccessibility: "no",
+          accessibilityElementsHidden: true,
+          children: initials
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/Separator/Separator.native.tsx
+var import_react_native5 = require("react-native");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var styles4 = import_react_native5.StyleSheet.create({
+  horizontal: {
+    height: import_react_native5.StyleSheet.hairlineWidth,
+    width: "100%"
+  },
+  vertical: {
+    width: import_react_native5.StyleSheet.hairlineWidth,
+    alignSelf: "stretch"
+  }
+});
+function Separator({ orientation = "horizontal", style }) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_native5.View,
+    {
+      accessibilityRole: "none",
+      style: [
+        orientation === "vertical" ? styles4.vertical : styles4.horizontal,
+        { backgroundColor: colors2.colorBgSubtle },
+        style
+      ]
+    }
+  );
+}
+
+// src/components/ui/Loading/Loading.native.tsx
+var import_react_native6 = require("react-native");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var rnSize = {
+  small: "small",
+  medium: "large",
+  large: "large"
+};
+function Loading({ size = "medium", accessibilityLabel = "Loading", style }) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native6.ActivityIndicator,
+    {
+      size: rnSize[size],
+      color: colors2.colorInteractive,
+      style,
+      accessibilityRole: "progressbar",
+      accessibilityLabel
+    }
+  );
+}
+
+// src/components/ui/Progress/Progress.native.tsx
+var import_react_native7 = require("react-native");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var trackHeight = {
+  small: 4,
+  medium: 8,
+  large: 12
+};
+var styles5 = import_react_native7.StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  labelRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: import_native.spacing.xxs
+  },
+  labelText: {
+    fontSize: import_native.font.size.bodyS,
+    fontFamily: import_native.font.family.body,
+    lineHeight: lineHeight.bodyS
+  },
+  track: {
+    width: "100%",
+    borderRadius: import_native.border.radius.xs,
+    overflow: "hidden"
+  },
+  fill: {
+    height: "100%",
+    borderRadius: import_native.border.radius.xs
+  }
+});
+function Progress({
+  value,
+  max = 100,
+  label,
+  showLabel = false,
+  size = "medium",
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  const height = trackHeight[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: [styles5.container, style], children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: styles5.labelRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: [styles5.labelText, { color: colors2.colorOnBg }], children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.Text, { style: [styles5.labelText, { color: colors2.colorOnBgSubtle }], children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_native7.View,
+      {
+        style: [styles5.track, { height, backgroundColor: colors2.colorBgSubtle }],
+        accessibilityRole: "progressbar",
+        accessibilityLabel: label,
+        accessibilityValue: { min: 0, max, now: value },
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_native7.View,
+          {
+            style: [
+              styles5.fill,
+              { width: `${percentage}%`, backgroundColor: colors2.colorInteractive }
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Skeleton/Skeleton.native.tsx
+var import_react2 = require("react");
+var import_react_native8 = require("react-native");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var styles6 = import_react_native8.StyleSheet.create({
+  skeleton: {
+    borderRadius: 4,
+    overflow: "hidden"
+  }
+});
+function Skeleton({ style }) {
+  const { colors: colors2 } = useTheme();
+  const opacity = (0, import_react2.useRef)(new import_react_native8.Animated.Value(1)).current;
+  (0, import_react2.useEffect)(() => {
+    const anim = import_react_native8.Animated.loop(
+      import_react_native8.Animated.sequence([
+        import_react_native8.Animated.timing(opacity, { toValue: 0.4, duration: 700, useNativeDriver: true }),
+        import_react_native8.Animated.timing(opacity, { toValue: 1, duration: 700, useNativeDriver: true })
+      ])
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [opacity]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_react_native8.Animated.View,
+    {
+      importantForAccessibility: "no-hide-descendants",
+      style: [
+        styles6.skeleton,
+        { backgroundColor: colors2.colorBgSubtle, opacity },
+        style
+      ]
+    }
+  );
+}
+
+// src/components/ui/Alert/Alert.native.tsx
+var import_react_native9 = require("react-native");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var styles7 = import_react_native9.StyleSheet.create({
+  alert: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    padding: import_native.spacing.m,
+    borderRadius: import_native.border.radius.s,
+    gap: import_native.spacing.xs
+  },
+  icon: {
+    flexShrink: 0,
+    marginTop: 2
+  },
+  content: {
+    flex: 1,
+    gap: import_native.spacing.xxs
+  },
+  title: {
+    fontSize: import_native.font.size.body,
+    fontFamily: import_native.font.family.body,
+    fontWeight: import_native.font.weight.semibold,
+    lineHeight: lineHeight.body
+  },
+  body: {
+    fontSize: import_native.font.size.bodyS,
+    fontFamily: import_native.font.family.body,
+    lineHeight: lineHeight.bodyS
+  },
+  dismiss: {
+    padding: import_native.spacing.xxs,
+    flexShrink: 0
+  }
+});
+function Alert({
+  variant = "info",
+  icon,
+  title,
+  children,
+  onDismiss,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const isUrgent = variant === "error" || variant === "warning";
+  const variantColors = {
+    info: { bg: colors2.colorBlueSubtle, text: colors2.colorOnBlueSubtle },
+    success: { bg: colors2.colorSuccessSubtle, text: colors2.colorOnSuccessSubtle },
+    warning: { bg: colors2.colorOrangeSubtle, text: colors2.colorOnOrangeSubtle },
+    error: { bg: colors2.colorRedSubtle, text: colors2.colorOnRedSubtle }
+  };
+  const { bg, text } = variantColors[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_react_native9.View,
+    {
+      accessibilityRole: isUrgent ? "alert" : "none",
+      accessibilityLiveRegion: isUrgent ? "assertive" : "polite",
+      style: [styles7.alert, { backgroundColor: bg }, style],
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.View, { style: styles7.icon, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.View, { style: styles7.content, children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: [styles7.title, { color: text }], children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: [styles7.body, { color: text }], children })
+        ] }),
+        onDismiss && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_react_native9.Pressable,
+          {
+            onPress: onDismiss,
+            style: styles7.dismiss,
+            accessibilityLabel: "Dismiss alert",
+            accessibilityRole: "button",
+            hitSlop: 8,
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: { color: text, fontSize: 16 }, children: "\u2715" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui/NotificationBanner/NotificationBanner.native.tsx
+var import_react_native10 = require("react-native");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var styles8 = import_react_native10.StyleSheet.create({
+  banner: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: import_native.spacing.s,
+    paddingHorizontal: import_native.spacing.m,
+    gap: import_native.spacing.xs
+  },
+  content: {
+    flex: 1,
+    fontSize: import_native.font.size.bodyS,
+    fontFamily: import_native.font.family.body,
+    lineHeight: lineHeight.bodyS
+  },
+  dismiss: {
+    padding: import_native.spacing.xxs,
+    flexShrink: 0
+  }
+});
+function NotificationBanner({
+  variant = "info",
+  children,
+  action,
+  onDismiss,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const isUrgent = variant === "error" || variant === "warning";
+  const variantColors = {
+    info: { bg: colors2.colorBlueSubtle, text: colors2.colorOnBlueSubtle },
+    success: { bg: colors2.colorSuccessSubtle, text: colors2.colorOnSuccessSubtle },
+    warning: { bg: colors2.colorOrangeSubtle, text: colors2.colorOnOrangeSubtle },
+    error: { bg: colors2.colorRedSubtle, text: colors2.colorOnRedSubtle }
+  };
+  const { bg, text } = variantColors[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_react_native10.View,
+    {
+      accessibilityRole: isUrgent ? "alert" : "none",
+      accessibilityLiveRegion: isUrgent ? "assertive" : "polite",
+      style: [styles8.banner, { backgroundColor: bg }, style],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.Text, { style: [styles8.content, { color: text }], children }),
+        action,
+        onDismiss && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_react_native10.Pressable,
+          {
+            onPress: onDismiss,
+            style: styles8.dismiss,
+            accessibilityLabel: "Dismiss notification",
+            accessibilityRole: "button",
+            hitSlop: 8,
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.Text, { style: { color: text, fontSize: 16 }, children: "\u2715" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/layout/Card/Card.native.tsx
+var import_react_native11 = require("react-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var paddingMap = {
+  none: 0,
+  small: import_native.spacing.s,
+  medium: import_native.spacing.m,
+  large: import_native.spacing.xxl
+};
+var alignMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+var styles9 = import_react_native11.StyleSheet.create({
+  card: {
+    borderRadius: import_native.border.radius.s,
+    overflow: "hidden"
+  }
+});
+function Card({
+  children,
+  variant = "default",
+  padding = "medium",
+  textAlign = "start",
+  style,
+  onPress,
+  accessibilityLabel
+}) {
+  const { colors: colors2 } = useTheme();
+  const variantStyle = {
+    backgroundColor: colors2.colorBg,
+    ...variant === "elevated" && {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 8,
+      elevation: 4
+    },
+    ...variant === "outlined" && {
+      borderWidth: 1,
+      borderColor: colors2.colorBgSubtle
+    }
+  };
+  const inner = {
+    padding: paddingMap[padding],
+    alignItems: alignMap[textAlign]
+  };
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_react_native11.Pressable,
+      {
+        onPress,
+        accessibilityRole: "button",
+        accessibilityLabel,
+        style: ({ pressed }) => [styles9.card, variantStyle, inner, pressed && { opacity: 0.8 }, style],
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.View, { style: [styles9.card, variantStyle, inner, style], children });
+}
+
+// src/components/layout/SectionHeader/SectionHeader.native.tsx
+var import_react_native12 = require("react-native");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var alignMap2 = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+var titleStyles = import_react_native12.StyleSheet.create({
+  small: {
+    fontSize: import_native.font.size.heading3,
+    fontFamily: import_native.font.family.heading,
+    fontWeight: import_native.font.weight.heading,
+    lineHeight: lineHeight.heading3
+  },
+  medium: {
+    fontSize: import_native.font.size.heading2,
+    fontFamily: import_native.font.family.heading,
+    fontWeight: import_native.font.weight.heading,
+    lineHeight: lineHeight.heading2
+  },
+  large: {
+    fontSize: import_native.font.size.heading1,
+    fontFamily: import_native.font.family.heading,
+    fontWeight: import_native.font.weight.heading,
+    lineHeight: lineHeight.heading1
+  }
+});
+var styles10 = import_react_native12.StyleSheet.create({
+  container: {
+    gap: import_native.spacing.xxs
+  },
+  subtitle: {
+    fontSize: import_native.font.size.bodyS,
+    fontFamily: import_native.font.family.body,
+    lineHeight: lineHeight.bodyS
+  }
+});
+function SectionHeader({
+  title,
+  subtitle,
+  alignment = "start",
+  size = "medium",
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const align = alignMap2[alignment];
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native12.View, { style: [styles10.container, { alignItems: align }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_native12.Text,
+      {
+        accessibilityRole: "header",
+        style: [titleStyles[size], { color: colors2.colorOnBg }],
+        children: title
+      }
+    ),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native12.Text, { style: [styles10.subtitle, { color: colors2.colorOnBgSubtle }], children: subtitle })
+  ] });
+}
+
+// src/components/layout/IconWrapper/IconWrapper.native.tsx
+var import_react_native13 = require("react-native");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function IconWrapper({ children, style, accessibilityElementsHidden }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_native13.View,
+    {
+      style: [{ alignItems: "center", justifyContent: "center" }, style],
+      importantForAccessibility: accessibilityElementsHidden ? "no-hide-descendants" : "auto",
+      accessibilityElementsHidden,
+      children
+    }
+  );
+}
+
+// src/components/layout/ButtonGroup/ButtonGroup.native.tsx
+var import_react_native14 = require("react-native");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var styles11 = import_react_native14.StyleSheet.create({
+  group: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: import_native.spacing.xs
+  },
+  column: {
+    flexDirection: "column",
+    gap: import_native.spacing.xs
+  }
+});
+function ButtonGroup({ children, variant, accessibilityLabel, style }) {
+  const isColumn = variant === "card" || variant === "modal";
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_native14.View,
+    {
+      accessibilityLabel,
+      style: [isColumn ? styles11.column : styles11.group, style],
+      children
+    }
+  );
+}
+
+// src/components/interaction/Button/Button.native.tsx
+var import_react_native15 = require("react-native");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var sizeTokens = {
+  small: { height: 36, px: import_native.spacing.m, fontSize: import_native.font.size.bodyS, radius: import_native.border.radius.xs },
+  medium: { height: 48, px: import_native.spacing.m, fontSize: import_native.font.size.body, radius: import_native.border.radius.s },
+  large: { height: 56, px: import_native.spacing.xxl, fontSize: import_native.font.size.heading3, radius: import_native.border.radius.m }
+};
+var styles12 = import_react_native15.StyleSheet.create({
+  pressable: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: import_native.spacing.xs,
+    alignSelf: "flex-start"
+  },
+  label: {
+    fontFamily: import_native.font.family.body,
+    fontWeight: import_native.font.weight.semibold,
+    includeFontPadding: false
+  }
+});
+function Button({
+  children,
+  variant = "default",
+  size = "medium",
+  iconStart,
+  iconEnd,
+  disabled = false,
+  onPress,
+  accessibilityLabel,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const { height, px, fontSize, radius } = sizeTokens[size];
+  const primaryColor = colors2.colorGreen;
+  const onPrimaryColor = colors2.colorOnGreen;
+  const ghostTextColor = colors2.colorGreenStrong;
+  const containerStyle = {
+    height,
+    paddingHorizontal: px,
+    borderRadius: radius,
+    opacity: disabled ? 0.4 : 1,
+    ...variant === "default" && { backgroundColor: primaryColor },
+    ...variant === "ghost" && {
+      backgroundColor: "transparent",
+      borderWidth: 1,
+      borderColor: ghostTextColor
+    }
+  };
+  const textColor = variant === "default" ? onPrimaryColor : ghostTextColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_react_native15.Pressable,
+    {
+      onPress,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      style: ({ pressed }) => [styles12.pressable, containerStyle, pressed && { opacity: 0.75 }, style],
+      children: [
+        iconStart && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native15.View, { importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: iconStart }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native15.Text, { style: [styles12.label, { fontSize, color: textColor }], children }),
+        iconEnd && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native15.View, { importantForAccessibility: "no-hide-descendants", children: iconEnd })
+      ]
+    }
+  );
+}
+
+// src/components/interaction/form/Switch/Switch.native.tsx
+var import_react_native18 = require("react-native");
+
+// src/components/interaction/form/atoms/Label.native.tsx
+var import_react_native16 = require("react-native");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Label({ label, style }) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_react_native16.Text,
+    {
+      style: [
+        {
+          fontFamily: import_native.font.family.body,
+          fontSize: import_native.font.size.body,
+          lineHeight: lineHeight.body,
+          fontWeight: import_native.font.weight.semibold,
+          color: colors2.colorOnBg
+        },
+        style
+      ],
+      children: label
+    }
+  );
+}
+
+// src/components/interaction/form/atoms/Message.native.tsx
+var import_react_native17 = require("react-native");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var styles13 = import_react_native17.StyleSheet.create({
+  base: {
+    fontFamily: import_native.font.family.body,
+    fontSize: import_native.font.size.bodyS,
+    lineHeight: lineHeight.bodyS
+  }
+});
+function Message({ message, type, style }) {
+  const { colors: colors2 } = useTheme();
+  if (!message) return null;
+  const color = type === "error" ? colors2.colorError : colors2.colorOnBgSubtle;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react_native17.Text,
+    {
+      accessibilityRole: type === "error" ? "alert" : "none",
+      accessibilityLiveRegion: type === "error" ? "assertive" : "polite",
+      style: [styles13.base, { color }, style],
+      children: message
+    }
+  );
+}
+
+// src/components/interaction/form/Switch/Switch.native.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var styles14 = import_react_native18.StyleSheet.create({
+  container: {
+    gap: import_native.spacing.xxs
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: import_native.spacing.xs
+  }
+});
+function Switch({
+  label,
+  value = false,
+  onChange,
+  disabled = false,
+  error,
+  hint,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native18.View, { style: [styles14.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native18.View, { style: styles14.row, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_react_native18.Switch,
+        {
+          value,
+          onValueChange: onChange,
+          disabled,
+          accessibilityLabel: label,
+          accessibilityRole: "switch",
+          accessibilityState: { checked: value, disabled },
+          thumbColor: value ? colors2.colorOnInteractive : colors2.colorOnBg,
+          trackColor: { false: colors2.colorBgSubtle, true: colors2.colorInteractive }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Checkbox/Checkbox.native.tsx
+var import_react_native19 = require("react-native");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var BOX = 22;
+var styles15 = import_react_native19.StyleSheet.create({
+  container: {
+    gap: import_native.spacing.xxs
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: import_native.spacing.xs,
+    minHeight: 44
+  },
+  box: {
+    width: BOX,
+    height: BOX,
+    borderRadius: import_native.border.radius.xs,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkmark: {
+    fontSize: 14,
+    fontWeight: "700",
+    lineHeight: 16
+  }
+});
+function Checkbox({
+  label,
+  name,
+  checked = false,
+  onChange,
+  disabled = false,
+  error,
+  hint,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const borderColor = error ? colors2.colorError : checked ? colors2.colorInteractive : colors2.colorBgSubtle;
+  const bgColor = checked ? colors2.colorInteractive : "transparent";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native19.View, { style: [styles15.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      import_react_native19.Pressable,
+      {
+        onPress: () => !disabled && onChange?.(!checked),
+        accessibilityRole: "checkbox",
+        accessibilityLabel: typeof label === "string" ? label : name,
+        accessibilityState: { checked, disabled },
+        disabled,
+        style: ({ pressed }) => [styles15.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native19.View, { style: [styles15.box, { borderColor, backgroundColor: bgColor }], children: checked && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label, { label: "\u2713", style: [styles15.checkmark, { color: colors2.colorOnInteractive }] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label, { label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Radio/Radio.native.tsx
+var import_react_native20 = require("react-native");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var DOT = 22;
+var INNER = 10;
+var styles16 = import_react_native20.StyleSheet.create({
+  container: {
+    gap: import_native.spacing.xxs
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: import_native.spacing.xs,
+    minHeight: 44
+  },
+  outer: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  inner: {
+    width: INNER,
+    height: INNER,
+    borderRadius: INNER / 2
+  }
+});
+function Radio({
+  label,
+  name,
+  checked = false,
+  onChange,
+  disabled = false,
+  error,
+  hint,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const borderColor = error ? colors2.colorError : checked ? colors2.colorInteractive : colors2.colorBgSubtle;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native20.View, { style: [styles16.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      import_react_native20.Pressable,
+      {
+        onPress: () => !disabled && onChange?.(),
+        accessibilityRole: "radio",
+        accessibilityLabel: typeof label === "string" ? label : name,
+        accessibilityState: { checked, disabled },
+        disabled,
+        style: ({ pressed }) => [styles16.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.View, { style: [styles16.outer, { borderColor }], children: checked && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.View, { style: [styles16.inner, { backgroundColor: colors2.colorInteractive }] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Label, { label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Message, { type: "error", message: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Message, { type: "hint", message: hint })
+  ] });
+}