@boostdev/design-system-components 1.0.3 → 1.1.0

package/dist/native/index.js

@@ -0,0 +1,968 @@
+// src/native/ThemeContext.tsx
+import { createContext, useContext, useMemo } from "react";
+import { useColorScheme } from "react-native";
+
+// src/native/tokens.ts
+import { colors, spacing, font, border, zIndex, animation } from "@boostdev/design-system-foundation/native";
+var lineHeight = {
+  display: Math.round(font.size.display * font.lineHeight.display),
+  heading1: Math.round(font.size.heading1 * font.lineHeight.heading),
+  heading2: Math.round(font.size.heading2 * font.lineHeight.heading),
+  heading3: Math.round(font.size.heading3 * font.lineHeight.heading),
+  body: Math.round(font.size.body * font.lineHeight.body),
+  bodyS: Math.round(font.size.bodyS * font.lineHeight.body)
+};
+
+// src/native/ThemeContext.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(null);
+function ThemeProvider({ children }) {
+  const scheme = useColorScheme();
+  const isDark = scheme === "dark";
+  const value = useMemo(
+    () => ({ colors: isDark ? colors.dark : colors.light, isDark }),
+    [isDark]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+}
+
+// src/components/ui/Typography/Typography.native.tsx
+import { StyleSheet, Text } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var styles = StyleSheet.create({
+  base: {
+    fontFamily: font.family.body,
+    fontWeight: font.weight.body
+  },
+  h1: {
+    fontSize: font.size.heading1,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading1
+  },
+  h2: {
+    fontSize: font.size.heading2,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading2
+  },
+  h3: {
+    fontSize: font.size.heading3,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading3
+  },
+  body: {
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body
+  },
+  body_s: {
+    fontSize: 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__ */ jsx2(
+    Text,
+    {
+      accessibilityRole: accessibilityRoles[variant],
+      style: [styles.base, styles[variant], { color: colors2.colorOnBg }, style],
+      children
+    }
+  );
+}
+
+// src/components/ui/Badge/Badge.native.tsx
+import { StyleSheet as StyleSheet2, View, Text as Text2 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var styles2 = StyleSheet2.create({
+  badge: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.xs,
+    borderRadius: 999
+  },
+  text: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: 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__ */ jsx3(View, { style: [styles2.badge, { backgroundColor: bg }, style], children: /* @__PURE__ */ jsx3(Text2, { style: [styles2.text, { color: text }], children }) });
+}
+
+// src/components/ui/Avatar/Avatar.native.tsx
+import { StyleSheet as StyleSheet3, View as View2, Text as Text3, Image } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var sizeMap = {
+  small: { container: 32, fontSize: font.size.bodyS },
+  medium: { container: 48, fontSize: font.size.body },
+  large: { container: 72, fontSize: font.size.heading3 }
+};
+function getInitials(name) {
+  return name.split(" ").filter(Boolean).slice(0, 2).map((word) => word[0].toUpperCase()).join("");
+}
+var styles3 = StyleSheet3.create({
+  container: {
+    borderRadius: 999,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  initials: {
+    fontFamily: font.family.body,
+    fontWeight: 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__ */ jsx4(
+      View2,
+      {
+        style: [styles3.container, { width: container, height: container }, style],
+        accessibilityLabel: label,
+        accessibilityRole: "image",
+        children: /* @__PURE__ */ jsx4(Image, { source: { uri: src }, style: styles3.image })
+      }
+    );
+  }
+  const initials = name ? getInitials(name) : "";
+  return /* @__PURE__ */ jsx4(
+    View2,
+    {
+      style: [
+        styles3.container,
+        { width: container, height: container, backgroundColor: colors2.colorBlue },
+        style
+      ],
+      accessibilityLabel: label,
+      accessibilityRole: "image",
+      children: /* @__PURE__ */ jsx4(
+        Text3,
+        {
+          style: [styles3.initials, { fontSize, color: colors2.colorOnBlue }],
+          importantForAccessibility: "no",
+          accessibilityElementsHidden: true,
+          children: initials
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/Separator/Separator.native.tsx
+import { StyleSheet as StyleSheet4, View as View3 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var styles4 = StyleSheet4.create({
+  horizontal: {
+    height: StyleSheet4.hairlineWidth,
+    width: "100%"
+  },
+  vertical: {
+    width: StyleSheet4.hairlineWidth,
+    alignSelf: "stretch"
+  }
+});
+function Separator({ orientation = "horizontal", style }) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ jsx5(
+    View3,
+    {
+      accessibilityRole: "none",
+      style: [
+        orientation === "vertical" ? styles4.vertical : styles4.horizontal,
+        { backgroundColor: colors2.colorBgSubtle },
+        style
+      ]
+    }
+  );
+}
+
+// src/components/ui/Loading/Loading.native.tsx
+import { ActivityIndicator } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var rnSize = {
+  small: "small",
+  medium: "large",
+  large: "large"
+};
+function Loading({ size = "medium", accessibilityLabel = "Loading", style }) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ jsx6(
+    ActivityIndicator,
+    {
+      size: rnSize[size],
+      color: colors2.colorInteractive,
+      style,
+      accessibilityRole: "progressbar",
+      accessibilityLabel
+    }
+  );
+}
+
+// src/components/ui/Progress/Progress.native.tsx
+import { StyleSheet as StyleSheet5, View as View4, Text as Text4 } from "react-native";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+var trackHeight = {
+  small: 4,
+  medium: 8,
+  large: 12
+};
+var styles5 = StyleSheet5.create({
+  container: {
+    width: "100%"
+  },
+  labelRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: spacing.xxs
+  },
+  labelText: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.bodyS
+  },
+  track: {
+    width: "100%",
+    borderRadius: border.radius.xs,
+    overflow: "hidden"
+  },
+  fill: {
+    height: "100%",
+    borderRadius: 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__ */ jsxs(View4, { style: [styles5.container, style], children: [
+    showLabel && /* @__PURE__ */ jsxs(View4, { style: styles5.labelRow, children: [
+      /* @__PURE__ */ jsx7(Text4, { style: [styles5.labelText, { color: colors2.colorOnBg }], children: label }),
+      /* @__PURE__ */ jsxs(Text4, { style: [styles5.labelText, { color: colors2.colorOnBgSubtle }], children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7(
+      View4,
+      {
+        style: [styles5.track, { height, backgroundColor: colors2.colorBgSubtle }],
+        accessibilityRole: "progressbar",
+        accessibilityLabel: label,
+        accessibilityValue: { min: 0, max, now: value },
+        children: /* @__PURE__ */ jsx7(
+          View4,
+          {
+            style: [
+              styles5.fill,
+              { width: `${percentage}%`, backgroundColor: colors2.colorInteractive }
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Skeleton/Skeleton.native.tsx
+import { useEffect, useRef } from "react";
+import { Animated, StyleSheet as StyleSheet6 } from "react-native";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var styles6 = StyleSheet6.create({
+  skeleton: {
+    borderRadius: 4,
+    overflow: "hidden"
+  }
+});
+function Skeleton({ style }) {
+  const { colors: colors2 } = useTheme();
+  const opacity = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    const anim = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 0.4, duration: 700, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 1, duration: 700, useNativeDriver: true })
+      ])
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [opacity]);
+  return /* @__PURE__ */ jsx8(
+    Animated.View,
+    {
+      importantForAccessibility: "no-hide-descendants",
+      style: [
+        styles6.skeleton,
+        { backgroundColor: colors2.colorBgSubtle, opacity },
+        style
+      ]
+    }
+  );
+}
+
+// src/components/ui/Alert/Alert.native.tsx
+import { StyleSheet as StyleSheet7, View as View5, Text as Text5, Pressable } from "react-native";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var styles7 = StyleSheet7.create({
+  alert: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    padding: spacing.m,
+    borderRadius: border.radius.s,
+    gap: spacing.xs
+  },
+  icon: {
+    flexShrink: 0,
+    marginTop: 2
+  },
+  content: {
+    flex: 1,
+    gap: spacing.xxs
+  },
+  title: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.body
+  },
+  body: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.bodyS
+  },
+  dismiss: {
+    padding: 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__ */ jsxs2(
+    View5,
+    {
+      accessibilityRole: isUrgent ? "alert" : "none",
+      accessibilityLiveRegion: isUrgent ? "assertive" : "polite",
+      style: [styles7.alert, { backgroundColor: bg }, style],
+      children: [
+        icon && /* @__PURE__ */ jsx9(View5, { style: styles7.icon, children: icon }),
+        /* @__PURE__ */ jsxs2(View5, { style: styles7.content, children: [
+          title && /* @__PURE__ */ jsx9(Text5, { style: [styles7.title, { color: text }], children: title }),
+          /* @__PURE__ */ jsx9(Text5, { style: [styles7.body, { color: text }], children })
+        ] }),
+        onDismiss && /* @__PURE__ */ jsx9(
+          Pressable,
+          {
+            onPress: onDismiss,
+            style: styles7.dismiss,
+            accessibilityLabel: "Dismiss alert",
+            accessibilityRole: "button",
+            hitSlop: 8,
+            children: /* @__PURE__ */ jsx9(Text5, { style: { color: text, fontSize: 16 }, children: "\u2715" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui/NotificationBanner/NotificationBanner.native.tsx
+import { StyleSheet as StyleSheet8, View as View6, Text as Text6, Pressable as Pressable2 } from "react-native";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var styles8 = StyleSheet8.create({
+  banner: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m,
+    gap: spacing.xs
+  },
+  content: {
+    flex: 1,
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.bodyS
+  },
+  dismiss: {
+    padding: 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__ */ jsxs3(
+    View6,
+    {
+      accessibilityRole: isUrgent ? "alert" : "none",
+      accessibilityLiveRegion: isUrgent ? "assertive" : "polite",
+      style: [styles8.banner, { backgroundColor: bg }, style],
+      children: [
+        /* @__PURE__ */ jsx10(Text6, { style: [styles8.content, { color: text }], children }),
+        action,
+        onDismiss && /* @__PURE__ */ jsx10(
+          Pressable2,
+          {
+            onPress: onDismiss,
+            style: styles8.dismiss,
+            accessibilityLabel: "Dismiss notification",
+            accessibilityRole: "button",
+            hitSlop: 8,
+            children: /* @__PURE__ */ jsx10(Text6, { style: { color: text, fontSize: 16 }, children: "\u2715" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/layout/Card/Card.native.tsx
+import { StyleSheet as StyleSheet9, View as View7, Pressable as Pressable3 } from "react-native";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var paddingMap = {
+  none: 0,
+  small: spacing.s,
+  medium: spacing.m,
+  large: spacing.xxl
+};
+var alignMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+var styles9 = StyleSheet9.create({
+  card: {
+    borderRadius: 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__ */ jsx11(
+      Pressable3,
+      {
+        onPress,
+        accessibilityRole: "button",
+        accessibilityLabel,
+        style: ({ pressed }) => [styles9.card, variantStyle, inner, pressed && { opacity: 0.8 }, style],
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx11(View7, { style: [styles9.card, variantStyle, inner, style], children });
+}
+
+// src/components/layout/SectionHeader/SectionHeader.native.tsx
+import { StyleSheet as StyleSheet10, View as View8, Text as Text7 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var alignMap2 = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+var titleStyles = StyleSheet10.create({
+  small: {
+    fontSize: font.size.heading3,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading3
+  },
+  medium: {
+    fontSize: font.size.heading2,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading2
+  },
+  large: {
+    fontSize: font.size.heading1,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading1
+  }
+});
+var styles10 = StyleSheet10.create({
+  container: {
+    gap: spacing.xxs
+  },
+  subtitle: {
+    fontSize: font.size.bodyS,
+    fontFamily: 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__ */ jsxs4(View8, { style: [styles10.container, { alignItems: align }, style], children: [
+    /* @__PURE__ */ jsx12(
+      Text7,
+      {
+        accessibilityRole: "header",
+        style: [titleStyles[size], { color: colors2.colorOnBg }],
+        children: title
+      }
+    ),
+    subtitle && /* @__PURE__ */ jsx12(Text7, { style: [styles10.subtitle, { color: colors2.colorOnBgSubtle }], children: subtitle })
+  ] });
+}
+
+// src/components/layout/IconWrapper/IconWrapper.native.tsx
+import { View as View9 } from "react-native";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function IconWrapper({ children, style, accessibilityElementsHidden }) {
+  return /* @__PURE__ */ jsx13(
+    View9,
+    {
+      style: [{ alignItems: "center", justifyContent: "center" }, style],
+      importantForAccessibility: accessibilityElementsHidden ? "no-hide-descendants" : "auto",
+      accessibilityElementsHidden,
+      children
+    }
+  );
+}
+
+// src/components/layout/ButtonGroup/ButtonGroup.native.tsx
+import { StyleSheet as StyleSheet11, View as View10 } from "react-native";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var styles11 = StyleSheet11.create({
+  group: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: spacing.xs
+  },
+  column: {
+    flexDirection: "column",
+    gap: spacing.xs
+  }
+});
+function ButtonGroup({ children, variant, accessibilityLabel, style }) {
+  const isColumn = variant === "card" || variant === "modal";
+  return /* @__PURE__ */ jsx14(
+    View10,
+    {
+      accessibilityLabel,
+      style: [isColumn ? styles11.column : styles11.group, style],
+      children
+    }
+  );
+}
+
+// src/components/interaction/Button/Button.native.tsx
+import { StyleSheet as StyleSheet12, Pressable as Pressable4, Text as Text8, View as View11 } from "react-native";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+var sizeTokens = {
+  small: { height: 36, px: spacing.m, fontSize: font.size.bodyS, radius: border.radius.xs },
+  medium: { height: 48, px: spacing.m, fontSize: font.size.body, radius: border.radius.s },
+  large: { height: 56, px: spacing.xxl, fontSize: font.size.heading3, radius: border.radius.m }
+};
+var styles12 = StyleSheet12.create({
+  pressable: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: spacing.xs,
+    alignSelf: "flex-start"
+  },
+  label: {
+    fontFamily: font.family.body,
+    fontWeight: 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__ */ jsxs5(
+    Pressable4,
+    {
+      onPress,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      style: ({ pressed }) => [styles12.pressable, containerStyle, pressed && { opacity: 0.75 }, style],
+      children: [
+        iconStart && /* @__PURE__ */ jsx15(View11, { importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: iconStart }),
+        children && /* @__PURE__ */ jsx15(Text8, { style: [styles12.label, { fontSize, color: textColor }], children }),
+        iconEnd && /* @__PURE__ */ jsx15(View11, { importantForAccessibility: "no-hide-descendants", children: iconEnd })
+      ]
+    }
+  );
+}
+
+// src/components/interaction/form/Switch/Switch.native.tsx
+import { Switch as RNSwitch, View as View12, StyleSheet as StyleSheet14 } from "react-native";
+
+// src/components/interaction/form/atoms/Label.native.tsx
+import { Text as Text9 } from "react-native";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function Label({ label, style }) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ jsx16(
+    Text9,
+    {
+      style: [
+        {
+          fontFamily: font.family.body,
+          fontSize: font.size.body,
+          lineHeight: lineHeight.body,
+          fontWeight: font.weight.semibold,
+          color: colors2.colorOnBg
+        },
+        style
+      ],
+      children: label
+    }
+  );
+}
+
+// src/components/interaction/form/atoms/Message.native.tsx
+import { StyleSheet as StyleSheet13, Text as Text10 } from "react-native";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var styles13 = StyleSheet13.create({
+  base: {
+    fontFamily: font.family.body,
+    fontSize: 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__ */ jsx17(
+    Text10,
+    {
+      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
+import { jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
+var styles14 = StyleSheet14.create({
+  container: {
+    gap: spacing.xxs
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xs
+  }
+});
+function Switch({
+  label,
+  value = false,
+  onChange,
+  disabled = false,
+  error,
+  hint,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ jsxs6(View12, { style: [styles14.container, style], children: [
+    /* @__PURE__ */ jsxs6(View12, { style: styles14.row, children: [
+      /* @__PURE__ */ jsx18(
+        RNSwitch,
+        {
+          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__ */ jsx18(Label, { label })
+    ] }),
+    /* @__PURE__ */ jsx18(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx18(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Checkbox/Checkbox.native.tsx
+import { StyleSheet as StyleSheet15, View as View13, Pressable as Pressable5 } from "react-native";
+import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
+var BOX = 22;
+var styles15 = StyleSheet15.create({
+  container: {
+    gap: spacing.xxs
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xs,
+    minHeight: 44
+  },
+  box: {
+    width: BOX,
+    height: BOX,
+    borderRadius: 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__ */ jsxs7(View13, { style: [styles15.container, style], children: [
+    /* @__PURE__ */ jsxs7(
+      Pressable5,
+      {
+        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__ */ jsx19(View13, { style: [styles15.box, { borderColor, backgroundColor: bgColor }], children: checked && /* @__PURE__ */ jsx19(Label, { label: "\u2713", style: [styles15.checkmark, { color: colors2.colorOnInteractive }] }) }),
+          /* @__PURE__ */ jsx19(Label, { label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx19(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx19(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Radio/Radio.native.tsx
+import { StyleSheet as StyleSheet16, View as View14, Pressable as Pressable6 } from "react-native";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+var DOT = 22;
+var INNER = 10;
+var styles16 = StyleSheet16.create({
+  container: {
+    gap: spacing.xxs
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 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__ */ jsxs8(View14, { style: [styles16.container, style], children: [
+    /* @__PURE__ */ jsxs8(
+      Pressable6,
+      {
+        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__ */ jsx20(View14, { style: [styles16.outer, { borderColor }], children: checked && /* @__PURE__ */ jsx20(View14, { style: [styles16.inner, { backgroundColor: colors2.colorInteractive }] }) }),
+          /* @__PURE__ */ jsx20(Label, { label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx20(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx20(Message, { type: "hint", message: hint })
+  ] });
+}
+export {
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  ButtonGroup,
+  Card,
+  Checkbox,
+  IconWrapper,
+  Label,
+  Loading,
+  Message,
+  NotificationBanner,
+  Progress,
+  Radio,
+  SectionHeader,
+  Separator,
+  Skeleton,
+  Switch,
+  ThemeProvider,
+  Typography,
+  animation,
+  border,
+  colors,
+  font,
+  lineHeight,
+  spacing,
+  useTheme,
+  zIndex
+};