@boostdev/design-system-react-native 0.1.0

package/dist/index.js

@@ -0,0 +1,4421 @@
+// 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, colorScheme }) {
+  const systemScheme = useColorScheme();
+  const isDark = (colorScheme ?? systemScheme) === "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: border.radius.full
+  },
+  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: border.radius.full,
+    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.full,
+    overflow: "hidden"
+  },
+  fill: {
+    height: "100%",
+    borderRadius: border.radius.full
+  }
+});
+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: border.radius.xs,
+    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, border: colors2.colorBlue },
+    success: { bg: colors2.colorSuccessSubtle, text: colors2.colorOnSuccessSubtle, border: colors2.colorSuccess },
+    warning: { bg: colors2.colorOrangeSubtle, text: colors2.colorOnOrangeSubtle, border: colors2.colorWarning },
+    error: { bg: colors2.colorRedSubtle, text: colors2.colorOnBg, border: colors2.colorError }
+  };
+  const { bg, text, border: borderColor } = variantColors[variant];
+  return /* @__PURE__ */ jsxs2(
+    View5,
+    {
+      accessibilityRole: isUrgent ? "alert" : "none",
+      accessibilityLiveRegion: isUrgent ? "assertive" : "polite",
+      style: [styles7.alert, { backgroundColor: bg, borderStartWidth: spacing.s, borderStartColor: borderColor }, 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, border: colors2.colorBlue },
+    success: { bg: colors2.colorSuccessSubtle, text: colors2.colorOnSuccessSubtle, border: colors2.colorSuccess },
+    warning: { bg: colors2.colorOrangeSubtle, text: colors2.colorOnOrangeSubtle, border: colors2.colorWarning },
+    error: { bg: colors2.colorRedSubtle, text: colors2.colorOnBg, border: colors2.colorError }
+  };
+  const { bg, text, border: borderColor } = variantColors[variant];
+  return /* @__PURE__ */ jsxs3(
+    View6,
+    {
+      accessibilityRole: isUrgent ? "alert" : "none",
+      accessibilityLiveRegion: isUrgent ? "assertive" : "polite",
+      style: [styles8.banner, { backgroundColor: bg, borderBottomWidth: 3, borderBottomColor: borderColor }, 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/ui/Link/Link.native.tsx
+import { StyleSheet as StyleSheet9, Text as Text7, Pressable as Pressable3, Linking } from "react-native";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var styles9 = StyleSheet9.create({
+  text: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    textDecorationLine: "underline"
+  },
+  pressed: {
+    opacity: 0.75
+  }
+});
+function Link({ href, children, accessibilityLabel, style, onPress }) {
+  const { colors: colors2 } = useTheme();
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    } else if (href) {
+      Linking.openURL(href);
+    }
+  };
+  return /* @__PURE__ */ jsx11(
+    Pressable3,
+    {
+      onPress: handlePress,
+      accessibilityRole: "link",
+      accessibilityLabel,
+      style: ({ pressed }) => pressed && styles9.pressed,
+      children: /* @__PURE__ */ jsx11(Text7, { style: [styles9.text, { color: colors2.colorInteractiveOnBg }, style], children })
+    }
+  );
+}
+
+// src/components/ui/DescriptionList/DescriptionList.native.tsx
+import { StyleSheet as StyleSheet10, View as View7, Text as Text8 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var styles10 = StyleSheet10.create({
+  list: {
+    gap: spacing.m
+  },
+  group: {
+    gap: spacing.xxs
+  },
+  term: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.bodyS
+  },
+  description: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.body,
+    lineHeight: lineHeight.body
+  }
+});
+function DescriptionList({ items, style }) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ jsx12(View7, { style: [styles10.list, style], accessibilityRole: "list", children: items.map((item, i) => /* @__PURE__ */ jsxs4(View7, { style: styles10.group, accessibilityRole: "listitem", children: [
+    /* @__PURE__ */ jsx12(Text8, { style: [styles10.term, { color: colors2.colorOnBgSubtle }], children: item.term }),
+    typeof item.description === "string" ? /* @__PURE__ */ jsx12(Text8, { style: [styles10.description, { color: colors2.colorOnBg }], children: item.description }) : /* @__PURE__ */ jsx12(View7, { children: item.description })
+  ] }, i)) });
+}
+
+// src/components/ui/Breadcrumb/Breadcrumb.native.tsx
+import { StyleSheet as StyleSheet11, View as View8, Text as Text9, Pressable as Pressable4 } from "react-native";
+import { Fragment, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var styles11 = StyleSheet11.create({
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center"
+  },
+  separator: {
+    marginHorizontal: spacing.xs,
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body
+  },
+  itemText: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body
+  },
+  pressed: {
+    opacity: 0.75
+  }
+});
+function Breadcrumb({ items, style }) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ jsx13(
+    View8,
+    {
+      style: [styles11.container, style],
+      accessibilityRole: "navigation",
+      accessibilityLabel: "Breadcrumb",
+      children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        return /* @__PURE__ */ jsx13(View8, { style: { flexDirection: "row", alignItems: "center", minHeight: 44 }, children: isLast ? /* @__PURE__ */ jsx13(
+          Text9,
+          {
+            style: [styles11.itemText, { color: colors2.colorOnBg }],
+            accessibilityRole: "text",
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx13(
+            Pressable4,
+            {
+              onPress: item.onPress,
+              accessibilityRole: "link",
+              style: ({ pressed }) => pressed && styles11.pressed,
+              children: /* @__PURE__ */ jsx13(Text9, { style: [styles11.itemText, { color: colors2.colorInteractiveOnBg }], children: item.label })
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            Text9,
+            {
+              style: [styles11.separator, { color: colors2.colorOnBgSubtle }],
+              importantForAccessibility: "no",
+              accessibilityElementsHidden: true,
+              children: "/"
+            }
+          )
+        ] }) }, index);
+      })
+    }
+  );
+}
+
+// src/components/ui/ProgressCircle/ProgressCircle.native.tsx
+import { StyleSheet as StyleSheet12, View as View9, Text as Text10 } from "react-native";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var SIZE_PX = {
+  small: 40,
+  medium: 64,
+  large: 96
+};
+var STROKE_WIDTH = {
+  small: 3,
+  medium: 4,
+  large: 5
+};
+var FONT_SIZE = {
+  small: font.size.bodyS - 2,
+  medium: font.size.bodyS,
+  large: font.size.body
+};
+var styles12 = StyleSheet12.create({
+  wrapper: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  valueText: {
+    position: "absolute",
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold
+  }
+});
+function HalfCircle({
+  size,
+  stroke,
+  color,
+  rotation
+}) {
+  return /* @__PURE__ */ jsx14(
+    View9,
+    {
+      style: {
+        width: size / 2,
+        height: size,
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx14(
+        View9,
+        {
+          style: {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            borderWidth: stroke,
+            borderColor: color,
+            transform: [{ rotate: `${rotation}deg` }]
+          }
+        }
+      )
+    }
+  );
+}
+function ProgressCircle({
+  value,
+  max = 100,
+  size = "medium",
+  label,
+  showValue = false,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  const px = SIZE_PX[size];
+  const stroke = STROKE_WIDTH[size];
+  const fillColor = colors2.colorInteractive;
+  const trackColor = colors2.colorBgSubtle;
+  const degrees = percentage / 100 * 360;
+  return /* @__PURE__ */ jsxs6(
+    View9,
+    {
+      style: [
+        styles12.wrapper,
+        { width: px, height: px },
+        style
+      ],
+      accessibilityRole: "progressbar",
+      accessibilityLabel: label,
+      accessibilityValue: { min: 0, max, now: value },
+      children: [
+        /* @__PURE__ */ jsx14(
+          View9,
+          {
+            style: {
+              position: "absolute",
+              width: px,
+              height: px,
+              borderRadius: px / 2,
+              borderWidth: stroke,
+              borderColor: trackColor
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          View9,
+          {
+            style: {
+              position: "absolute",
+              width: px / 2,
+              height: px,
+              start: px / 2,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx14(
+              HalfCircle,
+              {
+                size: px,
+                stroke,
+                color: percentage > 0 ? fillColor : "transparent",
+                rotation: Math.min(degrees, 180) - 180
+              }
+            )
+          }
+        ),
+        degrees > 180 && /* @__PURE__ */ jsx14(
+          View9,
+          {
+            style: {
+              position: "absolute",
+              width: px / 2,
+              height: px,
+              start: 0,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx14(
+              View9,
+              {
+                style: {
+                  position: "absolute",
+                  end: 0
+                },
+                children: /* @__PURE__ */ jsx14(
+                  HalfCircle,
+                  {
+                    size: px,
+                    stroke,
+                    color: fillColor,
+                    rotation: Math.min(degrees - 180, 180)
+                  }
+                )
+              }
+            )
+          }
+        ),
+        showValue && /* @__PURE__ */ jsxs6(
+          Text10,
+          {
+            style: [styles12.valueText, { fontSize: FONT_SIZE[size], color: colors2.colorOnBg }],
+            importantForAccessibility: "no",
+            accessibilityElementsHidden: true,
+            children: [
+              Math.round(percentage),
+              "%"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui/Tooltip/Tooltip.native.tsx
+import { useState } from "react";
+import { StyleSheet as StyleSheet13, View as View10, Text as Text11, Pressable as Pressable5 } from "react-native";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var styles13 = StyleSheet13.create({
+  wrapper: {
+    position: "relative"
+  },
+  tooltip: {
+    position: "absolute",
+    bottom: "100%",
+    start: 0,
+    marginBottom: spacing.xxs,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.xs,
+    borderRadius: border.radius.full,
+    zIndex: 10,
+    alignSelf: "flex-start"
+  },
+  text: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body
+  }
+});
+function Tooltip({ content, children, style }) {
+  const { colors: colors2 } = useTheme();
+  const [visible, setVisible] = useState(false);
+  return /* @__PURE__ */ jsxs7(View10, { style: [styles13.wrapper, style], children: [
+    /* @__PURE__ */ jsx15(
+      Pressable5,
+      {
+        onLongPress: () => setVisible(true),
+        onPressOut: () => setVisible(false),
+        accessibilityHint: content,
+        children
+      }
+    ),
+    visible && /* @__PURE__ */ jsx15(
+      View10,
+      {
+        style: [styles13.tooltip, { backgroundColor: colors2.colorOnBg }],
+        accessibilityRole: "text",
+        accessibilityLabel: content,
+        children: /* @__PURE__ */ jsx15(Text11, { style: [styles13.text, { color: colors2.colorBg }], children: content })
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Pagination/Pagination.native.tsx
+import { StyleSheet as StyleSheet14, View as View11, Text as Text12, Pressable as Pressable6 } from "react-native";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+function getPageRange(current, total) {
+  const delta = 1;
+  const range = [];
+  for (let i = 1; i <= total; i++) {
+    if (i === 1 || i === total || i >= current - delta && i <= current + delta) {
+      range.push(i);
+    } else if (range[range.length - 1] !== "...") {
+      range.push("...");
+    }
+  }
+  return range;
+}
+var styles14 = StyleSheet14.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xxs
+  },
+  button: {
+    minWidth: 44,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: border.radius.full,
+    paddingHorizontal: spacing.xs,
+    paddingVertical: spacing.xxs
+  },
+  buttonText: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body,
+    fontWeight: font.weight.body
+  },
+  navText: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body,
+    fontWeight: font.weight.semibold
+  },
+  ellipsis: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body,
+    minWidth: 44,
+    minHeight: 44,
+    textAlign: "center",
+    textAlignVertical: "center"
+  },
+  pressed: {
+    opacity: 0.75
+  },
+  disabled: {
+    opacity: 0.4
+  }
+});
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const pages = getPageRange(currentPage, totalPages);
+  return /* @__PURE__ */ jsxs8(
+    View11,
+    {
+      style: [styles14.container, style],
+      accessibilityRole: "navigation",
+      accessibilityLabel: "Pagination",
+      children: [
+        /* @__PURE__ */ jsx16(
+          Pressable6,
+          {
+            onPress: () => onPageChange(currentPage - 1),
+            disabled: currentPage <= 1,
+            accessibilityRole: "button",
+            accessibilityLabel: "Previous page",
+            accessibilityState: { disabled: currentPage <= 1 },
+            style: ({ pressed }) => [
+              styles14.button,
+              currentPage <= 1 && styles14.disabled,
+              pressed && !currentPage && styles14.pressed
+            ],
+            children: /* @__PURE__ */ jsx16(Text12, { style: [styles14.navText, { color: colors2.colorOnBg }], children: "\u2039" })
+          }
+        ),
+        pages.map(
+          (page, index) => page === "..." ? /* @__PURE__ */ jsx16(
+            Text12,
+            {
+              style: [styles14.ellipsis, { color: colors2.colorOnBgSubtle }],
+              importantForAccessibility: "no",
+              accessibilityElementsHidden: true,
+              children: "..."
+            },
+            `ellipsis-${index}`
+          ) : /* @__PURE__ */ jsx16(
+            Pressable6,
+            {
+              onPress: () => onPageChange(page),
+              accessibilityRole: "button",
+              accessibilityLabel: `Page ${page}`,
+              accessibilityState: { selected: currentPage === page },
+              style: ({ pressed }) => [
+                styles14.button,
+                currentPage === page && { backgroundColor: colors2.colorInteractive },
+                pressed && styles14.pressed
+              ],
+              children: /* @__PURE__ */ jsx16(
+                Text12,
+                {
+                  style: [
+                    styles14.buttonText,
+                    {
+                      color: currentPage === page ? colors2.colorOnInteractive : colors2.colorOnBg
+                    },
+                    currentPage === page && { fontWeight: font.weight.semibold }
+                  ],
+                  children: page
+                }
+              )
+            },
+            page
+          )
+        ),
+        /* @__PURE__ */ jsx16(
+          Pressable6,
+          {
+            onPress: () => onPageChange(currentPage + 1),
+            disabled: currentPage >= totalPages,
+            accessibilityRole: "button",
+            accessibilityLabel: "Next page",
+            accessibilityState: { disabled: currentPage >= totalPages },
+            style: ({ pressed }) => [
+              styles14.button,
+              currentPage >= totalPages && styles14.disabled,
+              pressed && styles14.pressed
+            ],
+            children: /* @__PURE__ */ jsx16(Text12, { style: [styles14.navText, { color: colors2.colorOnBg }], children: "\u203A" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ui/Collapsible/Collapsible.native.tsx
+import { useCallback, useRef as useRef2, useState as useState2 } from "react";
+import {
+  StyleSheet as StyleSheet15,
+  View as View12,
+  Text as Text13,
+  Pressable as Pressable7,
+  Animated as Animated2,
+  LayoutAnimation,
+  Platform,
+  UIManager
+} from "react-native";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+var styles15 = StyleSheet15.create({
+  container: {
+    borderRadius: border.radius.m,
+    overflow: "hidden"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    minHeight: 44,
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m
+  },
+  summaryText: {
+    flex: 1,
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.body
+  },
+  chevron: {
+    fontSize: font.size.body,
+    marginStart: spacing.xs
+  },
+  content: {
+    paddingHorizontal: spacing.m,
+    paddingBottom: spacing.m
+  },
+  pressed: {
+    opacity: 0.75
+  }
+});
+function Collapsible({
+  summary,
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onToggle,
+  name: _name,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const [internalOpen, setInternalOpen] = useState2(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const rotation = useRef2(new Animated2.Value(isOpen ? 1 : 0)).current;
+  const toggle = useCallback(() => {
+    const next = !isOpen;
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    Animated2.timing(rotation, {
+      toValue: next ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+    if (!isControlled) {
+      setInternalOpen(next);
+    }
+    onToggle?.(next);
+  }, [isOpen, isControlled, onToggle, rotation]);
+  const rotateZ = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "90deg"]
+  });
+  return /* @__PURE__ */ jsxs9(
+    View12,
+    {
+      style: [styles15.container, { borderBottomWidth: 1, borderBottomColor: colors2.colorBgSubtle }, style],
+      accessibilityRole: "summary",
+      children: [
+        /* @__PURE__ */ jsxs9(
+          Pressable7,
+          {
+            onPress: toggle,
+            accessibilityRole: "button",
+            accessibilityLabel: summary,
+            accessibilityState: { expanded: isOpen },
+            style: ({ pressed }) => [styles15.header, pressed && styles15.pressed],
+            children: [
+              /* @__PURE__ */ jsx17(Text13, { style: [styles15.summaryText, { color: colors2.colorOnBg }], children: summary }),
+              /* @__PURE__ */ jsx17(
+                Animated2.Text,
+                {
+                  style: [styles15.chevron, { color: colors2.colorOnBgSubtle, transform: [{ rotateZ }] }],
+                  importantForAccessibility: "no",
+                  accessibilityElementsHidden: true,
+                  children: "\u25B8"
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx17(View12, { style: styles15.content, children })
+      ]
+    }
+  );
+}
+
+// src/components/ui/Accordion/Accordion.native.tsx
+import { useState as useState3 } from "react";
+import {
+  StyleSheet as StyleSheet16,
+  View as View13,
+  Text as Text14,
+  Pressable as Pressable8,
+  LayoutAnimation as LayoutAnimation2,
+  Platform as Platform2,
+  UIManager as UIManager2
+} from "react-native";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+if (Platform2.OS === "android" && UIManager2.setLayoutAnimationEnabledExperimental) {
+  UIManager2.setLayoutAnimationEnabledExperimental(true);
+}
+var styles16 = StyleSheet16.create({
+  container: {
+    overflow: "hidden",
+    borderRadius: border.radius.s
+  },
+  item: {
+    borderBottomWidth: 1
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    minHeight: 44,
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m
+  },
+  titleText: {
+    flex: 1,
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.body
+  },
+  chevron: {
+    fontSize: font.size.bodyS,
+    marginStart: spacing.xs
+  },
+  panel: {
+    paddingHorizontal: spacing.m,
+    paddingBottom: spacing.m
+  },
+  pressed: {
+    opacity: 0.75
+  },
+  disabled: {
+    opacity: 0.4
+  }
+});
+function Accordion({
+  items,
+  allowMultiple = false,
+  defaultOpen = [],
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const [openIds, setOpenIds] = useState3(defaultOpen);
+  const toggle = (id) => {
+    LayoutAnimation2.configureNext(LayoutAnimation2.Presets.easeInEaseOut);
+    setOpenIds((prev) => {
+      const isOpen = prev.includes(id);
+      if (isOpen) return prev.filter((i) => i !== id);
+      return allowMultiple ? [...prev, id] : [id];
+    });
+  };
+  return /* @__PURE__ */ jsx18(View13, { style: [styles16.container, style], children: items.map((item, index) => {
+    const isOpen = openIds.includes(item.id);
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs10(
+      View13,
+      {
+        style: [
+          styles16.item,
+          { borderBottomColor: colors2.colorBgSubtle },
+          isLast && { borderBottomWidth: 0 }
+        ],
+        children: [
+          /* @__PURE__ */ jsxs10(
+            Pressable8,
+            {
+              onPress: () => toggle(item.id),
+              disabled: item.disabled,
+              accessibilityRole: "button",
+              accessibilityState: { expanded: isOpen, disabled: item.disabled },
+              style: ({ pressed }) => [
+                styles16.header,
+                item.disabled && styles16.disabled,
+                pressed && !item.disabled && styles16.pressed
+              ],
+              children: [
+                /* @__PURE__ */ jsx18(Text14, { style: [styles16.titleText, { color: colors2.colorOnBg }], children: typeof item.title === "string" ? item.title : item.title }),
+                /* @__PURE__ */ jsx18(
+                  Text14,
+                  {
+                    style: [styles16.chevron, { color: colors2.colorOnBgSubtle }],
+                    importantForAccessibility: "no",
+                    accessibilityElementsHidden: true,
+                    children: isOpen ? "\u25BE" : "\u25B8"
+                  }
+                )
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx18(View13, { style: styles16.panel, accessibilityRole: "summary", children: item.content })
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+
+// src/components/ui/Tabs/Tabs.native.tsx
+import { useState as useState4 } from "react";
+import {
+  StyleSheet as StyleSheet17,
+  View as View14,
+  Text as Text15,
+  Pressable as Pressable9,
+  ScrollView
+} from "react-native";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var styles17 = StyleSheet17.create({
+  container: {
+    overflow: "hidden"
+  },
+  tabList: {
+    flexDirection: "row",
+    borderBottomWidth: 2
+  },
+  tabButton: {
+    minHeight: 44,
+    paddingHorizontal: spacing.m,
+    paddingVertical: spacing.s,
+    alignItems: "center",
+    justifyContent: "center",
+    borderBottomWidth: 2,
+    marginBottom: -2
+  },
+  tabLabel: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body
+  },
+  panel: {
+    paddingVertical: spacing.m
+  },
+  pressed: {
+    opacity: 0.75
+  },
+  disabled: {
+    opacity: 0.4
+  }
+});
+function Tabs({
+  tabs,
+  defaultTab,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const [activeTab, setActiveTab] = useState4(defaultTab ?? tabs[0]?.id);
+  return /* @__PURE__ */ jsxs11(View14, { style: [styles17.container, style], children: [
+    /* @__PURE__ */ jsx19(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: [styles17.tabList, { borderBottomColor: colors2.colorBgSubtle }],
+        accessibilityRole: "tabbar",
+        children: tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return /* @__PURE__ */ jsx19(
+            Pressable9,
+            {
+              onPress: () => setActiveTab(tab.id),
+              disabled: tab.disabled,
+              accessibilityRole: "tab",
+              accessibilityState: {
+                selected: isActive,
+                disabled: tab.disabled
+              },
+              accessibilityLabel: typeof tab.label === "string" ? tab.label : void 0,
+              style: ({ pressed }) => [
+                styles17.tabButton,
+                {
+                  borderBottomColor: isActive ? colors2.colorInteractive : "transparent"
+                },
+                tab.disabled && styles17.disabled,
+                pressed && !tab.disabled && styles17.pressed
+              ],
+              children: /* @__PURE__ */ jsx19(
+                Text15,
+                {
+                  style: [
+                    styles17.tabLabel,
+                    {
+                      color: isActive ? colors2.colorInteractive : colors2.colorOnBgSubtle,
+                      fontWeight: isActive ? font.weight.semibold : font.weight.body
+                    }
+                  ],
+                  children: tab.label
+                }
+              )
+            },
+            tab.id
+          );
+        })
+      }
+    ),
+    tabs.map((tab) => {
+      const isActive = activeTab === tab.id;
+      if (!isActive) return null;
+      return /* @__PURE__ */ jsx19(View14, { style: styles17.panel, accessibilityRole: "tabpanel", children: tab.content }, tab.id);
+    })
+  ] });
+}
+
+// src/components/ui/Table/Table.native.tsx
+import {
+  StyleSheet as StyleSheet18,
+  View as View15,
+  Text as Text16,
+  ScrollView as ScrollView2,
+  Pressable as Pressable10
+} from "react-native";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+var styles18 = StyleSheet18.create({
+  wrapper: {
+    borderRadius: border.radius.s,
+    overflow: "hidden"
+  },
+  caption: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.bodyS,
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.m
+  },
+  headerRow: {
+    flexDirection: "row"
+  },
+  headerCell: {
+    flex: 1,
+    minWidth: 100,
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xxs
+  },
+  headerText: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.bodyS
+  },
+  sortIndicator: {
+    fontSize: font.size.bodyS
+  },
+  row: {
+    flexDirection: "row",
+    borderTopWidth: 1,
+    minHeight: 44
+  },
+  cell: {
+    flex: 1,
+    minWidth: 100,
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m,
+    justifyContent: "center"
+  },
+  cellText: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.body,
+    lineHeight: lineHeight.body
+  },
+  pressed: {
+    opacity: 0.75
+  }
+});
+function Table({
+  columns,
+  rows,
+  caption,
+  sortKey,
+  sortDirection,
+  onSort,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const handleSort = (key) => {
+    if (!onSort) return;
+    const nextDirection = sortKey === key && sortDirection === "asc" ? "desc" : "asc";
+    onSort(key, nextDirection);
+  };
+  const getSortLabel = (col) => {
+    const base = `Sort by ${String(col.header)}`;
+    if (sortKey !== col.key) return base;
+    return `${base}, currently ${sortDirection === "asc" ? "ascending" : "descending"}`;
+  };
+  return /* @__PURE__ */ jsx20(
+    ScrollView2,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: true,
+      style: [styles18.wrapper, { backgroundColor: colors2.colorBg }, style],
+      children: /* @__PURE__ */ jsxs12(View15, { children: [
+        caption && /* @__PURE__ */ jsx20(Text16, { style: [styles18.caption, { color: colors2.colorOnBgSubtle }], children: caption }),
+        /* @__PURE__ */ jsx20(View15, { style: [styles18.headerRow, { backgroundColor: colors2.colorBgSubtle }], children: columns.map(
+          (col) => col.sortable ? /* @__PURE__ */ jsxs12(
+            Pressable10,
+            {
+              onPress: () => handleSort(col.key),
+              accessibilityRole: "button",
+              accessibilityLabel: getSortLabel(col),
+              style: ({ pressed }) => [styles18.headerCell, pressed && styles18.pressed],
+              children: [
+                /* @__PURE__ */ jsx20(Text16, { style: [styles18.headerText, { color: colors2.colorOnBg }], children: col.header }),
+                /* @__PURE__ */ jsx20(
+                  Text16,
+                  {
+                    style: [
+                      styles18.sortIndicator,
+                      {
+                        color: sortKey === col.key ? colors2.colorInteractive : colors2.colorOnBgSubtle
+                      }
+                    ],
+                    importantForAccessibility: "no",
+                    accessibilityElementsHidden: true,
+                    children: sortKey === col.key ? sortDirection === "asc" ? "\u25B2" : "\u25BC" : "\u25BD"
+                  }
+                )
+              ]
+            },
+            col.key
+          ) : /* @__PURE__ */ jsx20(View15, { style: styles18.headerCell, children: /* @__PURE__ */ jsx20(Text16, { style: [styles18.headerText, { color: colors2.colorOnBg }], children: col.header }) }, col.key)
+        ) }),
+        rows.map((row, rowIndex) => /* @__PURE__ */ jsx20(
+          View15,
+          {
+            style: [
+              styles18.row,
+              { borderTopColor: colors2.colorBgSubtle },
+              rowIndex % 2 === 1 && { backgroundColor: colors2.colorBgSubtle }
+            ],
+            accessibilityRole: "none",
+            children: columns.map((col) => /* @__PURE__ */ jsx20(View15, { style: styles18.cell, children: col.render ? typeof col.render(row) === "string" ? /* @__PURE__ */ jsx20(Text16, { style: [styles18.cellText, { color: colors2.colorOnBg }], children: col.render(row) }) : col.render(row) : /* @__PURE__ */ jsx20(Text16, { style: [styles18.cellText, { color: colors2.colorOnBg }], children: String(row[col.key] ?? "") }) }, col.key))
+          },
+          rowIndex
+        ))
+      ] })
+    }
+  );
+}
+
+// src/components/ui/Calendar/Calendar.native.tsx
+import { useState as useState5 } from "react";
+import {
+  StyleSheet as StyleSheet19,
+  View as View16,
+  Text as Text17,
+  Pressable as Pressable11
+} from "react-native";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var DAY_LABELS = {
+  Su: "Sunday",
+  Mo: "Monday",
+  Tu: "Tuesday",
+  We: "Wednesday",
+  Th: "Thursday",
+  Fr: "Friday",
+  Sa: "Saturday"
+};
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function toMidnight(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function isOutOfRange(date, min, max) {
+  const d = toMidnight(date);
+  if (min && d < toMidnight(min)) return true;
+  return !!(max && d > toMidnight(max));
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+var DAY_SIZE = 44;
+var styles19 = StyleSheet19.create({
+  container: {
+    alignSelf: "flex-start"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.xxs
+  },
+  navButton: {
+    minWidth: DAY_SIZE,
+    minHeight: DAY_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: border.radius.full
+  },
+  navText: {
+    fontSize: font.size.heading3,
+    fontWeight: font.weight.semibold
+  },
+  monthYear: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.body
+  },
+  weekRow: {
+    flexDirection: "row"
+  },
+  weekday: {
+    width: DAY_SIZE,
+    height: DAY_SIZE,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  weekdayText: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.bodyS
+  },
+  grid: {
+    gap: spacing.xxxs
+  },
+  dayRow: {
+    flexDirection: "row"
+  },
+  dayCell: {
+    width: DAY_SIZE,
+    height: DAY_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: border.radius.full
+  },
+  dayText: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body
+  },
+  today: {
+    borderWidth: 1
+  },
+  pressed: {
+    opacity: 0.75
+  },
+  disabled: {
+    opacity: 0.4
+  }
+});
+function Calendar({
+  value,
+  defaultValue,
+  min,
+  max,
+  onChange,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const today = /* @__PURE__ */ new Date();
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState5(defaultValue);
+  const selected = controlled ? value : internal;
+  const [viewYear, setViewYear] = useState5(
+    selected?.getFullYear() ?? today.getFullYear()
+  );
+  const [viewMonth, setViewMonth] = useState5(
+    selected?.getMonth() ?? today.getMonth()
+  );
+  const daysInMonth = getDaysInMonth(viewYear, viewMonth);
+  const firstDay = getFirstDayOfMonth(viewYear, viewMonth);
+  const navigate = (delta) => {
+    const d = new Date(viewYear, viewMonth + delta, 1);
+    setViewYear(d.getFullYear());
+    setViewMonth(d.getMonth());
+  };
+  const selectDay = (day) => {
+    const date = new Date(viewYear, viewMonth, day);
+    if (isOutOfRange(date, min, max)) return;
+    if (!controlled) setInternal(date);
+    onChange?.(date);
+  };
+  const cells = [
+    ...Array.from({ length: firstDay }, () => null),
+    ...Array.from({ length: daysInMonth }, (_, i) => ({ day: i + 1 }))
+  ];
+  while (cells.length % 7 !== 0) cells.push(null);
+  const rows = Array.from(
+    { length: cells.length / 7 },
+    (_, i) => cells.slice(i * 7, i * 7 + 7)
+  );
+  return /* @__PURE__ */ jsxs13(
+    View16,
+    {
+      style: [styles19.container, style],
+      accessibilityRole: "none",
+      accessibilityLabel: `${MONTHS[viewMonth]} ${viewYear} calendar`,
+      children: [
+        /* @__PURE__ */ jsxs13(View16, { style: styles19.header, children: [
+          /* @__PURE__ */ jsx21(
+            Pressable11,
+            {
+              onPress: () => navigate(-1),
+              accessibilityRole: "button",
+              accessibilityLabel: "Previous month",
+              style: ({ pressed }) => [styles19.navButton, pressed && styles19.pressed],
+              children: /* @__PURE__ */ jsx21(Text17, { style: [styles19.navText, { color: colors2.colorOnBg }], children: "\u2039" })
+            }
+          ),
+          /* @__PURE__ */ jsxs13(
+            Text17,
+            {
+              style: [styles19.monthYear, { color: colors2.colorOnBg }],
+              accessibilityRole: "text",
+              accessibilityLiveRegion: "polite",
+              children: [
+                MONTHS[viewMonth],
+                " ",
+                viewYear
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx21(
+            Pressable11,
+            {
+              onPress: () => navigate(1),
+              accessibilityRole: "button",
+              accessibilityLabel: "Next month",
+              style: ({ pressed }) => [styles19.navButton, pressed && styles19.pressed],
+              children: /* @__PURE__ */ jsx21(Text17, { style: [styles19.navText, { color: colors2.colorOnBg }], children: "\u203A" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx21(View16, { style: styles19.weekRow, children: DAYS.map((d) => /* @__PURE__ */ jsx21(View16, { style: styles19.weekday, children: /* @__PURE__ */ jsx21(
+          Text17,
+          {
+            style: [styles19.weekdayText, { color: colors2.colorOnBgSubtle }],
+            accessibilityLabel: DAY_LABELS[d],
+            children: d
+          }
+        ) }, d)) }),
+        /* @__PURE__ */ jsx21(View16, { style: styles19.grid, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx21(View16, { style: styles19.dayRow, children: row.map((cell, colIndex) => {
+          if (!cell) {
+            return /* @__PURE__ */ jsx21(View16, { style: styles19.dayCell }, colIndex);
+          }
+          const date = new Date(viewYear, viewMonth, cell.day);
+          const isSelected = selected ? isSameDay(date, selected) : false;
+          const isToday = isSameDay(date, today);
+          const disabled = isOutOfRange(date, min, max);
+          return /* @__PURE__ */ jsx21(
+            Pressable11,
+            {
+              onPress: () => selectDay(cell.day),
+              disabled,
+              accessibilityRole: "button",
+              accessibilityLabel: date.toLocaleDateString("en", {
+                month: "long",
+                day: "numeric",
+                year: "numeric"
+              }),
+              accessibilityState: {
+                selected: isSelected,
+                disabled
+              },
+              style: ({ pressed }) => [
+                styles19.dayCell,
+                isSelected && {
+                  backgroundColor: colors2.colorInteractive
+                },
+                isToday && !isSelected && [
+                  styles19.today,
+                  { borderColor: colors2.colorInteractive }
+                ],
+                disabled && styles19.disabled,
+                pressed && !disabled && styles19.pressed
+              ],
+              children: /* @__PURE__ */ jsx21(
+                Text17,
+                {
+                  style: [
+                    styles19.dayText,
+                    {
+                      color: isSelected ? colors2.colorOnInteractive : colors2.colorOnBg,
+                      fontWeight: isToday ? font.weight.semibold : font.weight.body
+                    }
+                  ],
+                  children: cell.day
+                }
+              )
+            },
+            colIndex
+          );
+        }) }, rowIndex)) })
+      ]
+    }
+  );
+}
+
+// src/components/ui/Carousel/Carousel.native.tsx
+import { useCallback as useCallback2, useRef as useRef3, useState as useState6 } from "react";
+import {
+  StyleSheet as StyleSheet20,
+  View as View17,
+  Text as Text18,
+  Pressable as Pressable12,
+  ScrollView as ScrollView3,
+  Dimensions
+} from "react-native";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+var DOT_SIZE = 8;
+var DOT_HIT_SIZE = 44;
+var styles20 = StyleSheet20.create({
+  container: {
+    width: "100%"
+  },
+  scrollView: {
+    flexGrow: 0
+  },
+  slide: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  nav: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: spacing.xs,
+    paddingVertical: spacing.s
+  },
+  navButton: {
+    minWidth: 44,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: border.radius.s
+  },
+  navText: {
+    fontSize: 20,
+    fontWeight: "600"
+  },
+  dots: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xs
+  },
+  dotWrapper: {
+    minWidth: DOT_HIT_SIZE,
+    minHeight: DOT_HIT_SIZE,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dot: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: DOT_SIZE / 2
+  },
+  pressed: {
+    opacity: 0.75
+  }
+});
+function Carousel({
+  items,
+  label,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const scrollRef = useRef3(null);
+  const [activeIndex, setActiveIndex] = useState6(0);
+  const [slideWidth, setSlideWidth] = useState6(Dimensions.get("window").width);
+  const handleScroll = useCallback2(
+    (e) => {
+      const offset = e.nativeEvent.contentOffset.x;
+      const width = e.nativeEvent.layoutMeasurement.width;
+      if (width > 0) {
+        const index = Math.round(offset / width);
+        setActiveIndex(index);
+      }
+    },
+    []
+  );
+  const scrollTo = (index) => {
+    const clamped = Math.max(0, Math.min(index, items.length - 1));
+    scrollRef.current?.scrollTo({ x: clamped * slideWidth, animated: true });
+  };
+  return /* @__PURE__ */ jsxs14(
+    View17,
+    {
+      style: [styles20.container, style],
+      accessibilityRole: "none",
+      accessibilityLabel: label,
+      children: [
+        /* @__PURE__ */ jsx22(
+          ScrollView3,
+          {
+            ref: scrollRef,
+            horizontal: true,
+            pagingEnabled: true,
+            showsHorizontalScrollIndicator: false,
+            onScroll: handleScroll,
+            scrollEventThrottle: 16,
+            onLayout: (e) => setSlideWidth(e.nativeEvent.layout.width),
+            style: styles20.scrollView,
+            children: items.map((item, index) => /* @__PURE__ */ jsx22(View17, { style: [styles20.slide, { width: slideWidth }], children: item }, index))
+          }
+        ),
+        /* @__PURE__ */ jsxs14(View17, { style: styles20.nav, children: [
+          /* @__PURE__ */ jsx22(
+            Pressable12,
+            {
+              onPress: () => scrollTo(activeIndex - 1),
+              disabled: activeIndex <= 0,
+              accessibilityRole: "button",
+              accessibilityLabel: "Previous",
+              accessibilityState: { disabled: activeIndex <= 0 },
+              style: ({ pressed }) => [
+                styles20.navButton,
+                activeIndex <= 0 && { opacity: 0.4 },
+                pressed && styles20.pressed
+              ],
+              children: /* @__PURE__ */ jsx22(Text18, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u2039" })
+            }
+          ),
+          /* @__PURE__ */ jsx22(View17, { style: styles20.dots, children: items.map((_, index) => /* @__PURE__ */ jsx22(
+            Pressable12,
+            {
+              onPress: () => scrollTo(index),
+              accessibilityRole: "button",
+              accessibilityLabel: `Go to slide ${index + 1}`,
+              accessibilityState: { selected: activeIndex === index },
+              style: styles20.dotWrapper,
+              children: /* @__PURE__ */ jsx22(
+                View17,
+                {
+                  style: [
+                    styles20.dot,
+                    {
+                      backgroundColor: activeIndex === index ? colors2.colorInteractive : colors2.colorBgSubtle
+                    }
+                  ]
+                }
+              )
+            },
+            index
+          )) }),
+          /* @__PURE__ */ jsx22(
+            Pressable12,
+            {
+              onPress: () => scrollTo(activeIndex + 1),
+              disabled: activeIndex >= items.length - 1,
+              accessibilityRole: "button",
+              accessibilityLabel: "Next",
+              accessibilityState: { disabled: activeIndex >= items.length - 1 },
+              style: ({ pressed }) => [
+                styles20.navButton,
+                activeIndex >= items.length - 1 && { opacity: 0.4 },
+                pressed && styles20.pressed
+              ],
+              children: /* @__PURE__ */ jsx22(Text18, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u203A" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/layout/Card/Card.native.tsx
+import { StyleSheet as StyleSheet21, View as View18, Pressable as Pressable13 } from "react-native";
+import { jsx as jsx23 } 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 styles21 = StyleSheet21.create({
+  card: {
+    borderRadius: border.radius.m,
+    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__ */ jsx23(
+      Pressable13,
+      {
+        onPress,
+        accessibilityRole: "button",
+        accessibilityLabel,
+        style: ({ pressed }) => [styles21.card, variantStyle, inner, pressed && { opacity: 0.8 }, style],
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx23(View18, { style: [styles21.card, variantStyle, inner, style], children });
+}
+
+// src/components/layout/SectionHeader/SectionHeader.native.tsx
+import { StyleSheet as StyleSheet22, View as View19, Text as Text19 } from "react-native";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+var alignMap2 = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+var titleStyles = StyleSheet22.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 styles22 = StyleSheet22.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__ */ jsxs15(View19, { style: [styles22.container, { alignItems: align }, style], children: [
+    /* @__PURE__ */ jsx24(
+      Text19,
+      {
+        accessibilityRole: "header",
+        style: [titleStyles[size], { color: colors2.colorOnBg }],
+        children: title
+      }
+    ),
+    subtitle && /* @__PURE__ */ jsx24(Text19, { style: [styles22.subtitle, { color: colors2.colorOnBgSubtle }], children: subtitle })
+  ] });
+}
+
+// src/components/layout/IconWrapper/IconWrapper.native.tsx
+import { View as View20 } from "react-native";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function IconWrapper({ children, style, accessibilityElementsHidden }) {
+  return /* @__PURE__ */ jsx25(
+    View20,
+    {
+      style: [{ alignItems: "center", justifyContent: "center" }, style],
+      importantForAccessibility: accessibilityElementsHidden ? "no-hide-descendants" : "auto",
+      accessibilityElementsHidden,
+      children
+    }
+  );
+}
+
+// src/components/layout/ButtonGroup/ButtonGroup.native.tsx
+import { StyleSheet as StyleSheet23, View as View21 } from "react-native";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var styles23 = StyleSheet23.create({
+  group: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: spacing.xs
+  },
+  column: {
+    flexDirection: "column",
+    gap: spacing.xs
+  }
+});
+function ButtonContainer({ children, variant, accessibilityLabel, style }) {
+  const isColumn = variant === "card" || variant === "modal";
+  return /* @__PURE__ */ jsx26(
+    View21,
+    {
+      accessibilityLabel,
+      style: [isColumn ? styles23.column : styles23.group, style],
+      children
+    }
+  );
+}
+var ButtonGroup = ButtonContainer;
+
+// src/components/interaction/Button/Button.native.tsx
+import { StyleSheet as StyleSheet24, Pressable as Pressable14, Text as Text20, View as View22 } from "react-native";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+var sizeTokens = {
+  small: { height: 36, px: spacing.m, fontSize: font.size.bodyS, radius: border.radius.full },
+  medium: { height: 48, px: spacing.m, fontSize: font.size.body, radius: border.radius.full },
+  large: { height: 56, px: spacing.xxl, fontSize: font.size.heading3, radius: border.radius.full }
+};
+var styles24 = StyleSheet24.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,
+  isIconOnly = false,
+  onPress,
+  accessibilityLabel,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const { height, px, fontSize, radius } = sizeTokens[size];
+  const primaryColor = colors2.colorInteractive;
+  const onPrimaryColor = colors2.colorOnInteractive;
+  const outlineTextColor = colors2.colorInteractiveOnBg;
+  const isOutline = variant === "outline" || variant === "ghost";
+  const containerStyle = {
+    height,
+    paddingHorizontal: isIconOnly ? spacing.xs : px,
+    borderRadius: radius,
+    opacity: disabled ? 0.4 : 1,
+    // Icon-only: square with equal xs padding on both axes.
+    ...isIconOnly && { aspectRatio: 1, paddingVertical: spacing.xs },
+    ...variant === "default" && { backgroundColor: primaryColor },
+    ...isOutline && {
+      backgroundColor: "transparent",
+      borderWidth: 1,
+      borderColor: outlineTextColor
+    }
+  };
+  const textColor = variant === "default" ? onPrimaryColor : outlineTextColor;
+  return /* @__PURE__ */ jsxs16(
+    Pressable14,
+    {
+      onPress,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      style: ({ pressed }) => [styles24.pressable, containerStyle, pressed && { opacity: 0.75 }, style],
+      children: [
+        iconStart && /* @__PURE__ */ jsx27(View22, { importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: iconStart }),
+        children && (isIconOnly ? children : /* @__PURE__ */ jsx27(Text20, { style: [styles24.label, { fontSize, color: textColor }], children })),
+        iconEnd && /* @__PURE__ */ jsx27(View22, { importantForAccessibility: "no-hide-descendants", children: iconEnd })
+      ]
+    }
+  );
+}
+
+// src/components/interaction/Rating/Rating.native.tsx
+import { StyleSheet as StyleSheet25, View as View23, Text as Text21 } from "react-native";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var STAR_SIZE = 24;
+var styles25 = StyleSheet25.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  star: {
+    fontSize: STAR_SIZE,
+    fontFamily: font.family.body
+  }
+});
+function Rating({ value, max = 5, style, accessibilityLabel }) {
+  const { colors: colors2 } = useTheme();
+  const label = accessibilityLabel ?? `${value} out of ${max} stars`;
+  return /* @__PURE__ */ jsx28(
+    View23,
+    {
+      style: [styles25.container, style],
+      accessibilityRole: "image",
+      accessibilityLabel: label,
+      children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx28(
+        Text21,
+        {
+          style: [
+            styles25.star,
+            { color: i < value ? colors2.colorWarning : colors2.colorBgSubtle }
+          ],
+          importantForAccessibility: "no",
+          accessibilityElementsHidden: true,
+          children: "\u2605"
+        },
+        i
+      ))
+    }
+  );
+}
+
+// src/components/interaction/form/Switch/Switch.native.tsx
+import { Switch as RNSwitch, View as View24, StyleSheet as StyleSheet27 } from "react-native";
+
+// src/components/interaction/form/atoms/Label.native.tsx
+import { Text as Text22 } from "react-native";
+import { jsx as jsx29 } from "react/jsx-runtime";
+function Label({ label, style }) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ jsx29(
+    Text22,
+    {
+      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 StyleSheet26, Text as Text23 } from "react-native";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var styles26 = StyleSheet26.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__ */ jsx30(
+    Text23,
+    {
+      accessibilityRole: type === "error" ? "alert" : "none",
+      accessibilityLiveRegion: type === "error" ? "assertive" : "polite",
+      style: [styles26.base, { color }, style],
+      children: message
+    }
+  );
+}
+
+// src/components/interaction/form/Switch/Switch.native.tsx
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+var styles27 = StyleSheet27.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__ */ jsxs17(View24, { style: [styles27.container, style], children: [
+    /* @__PURE__ */ jsxs17(View24, { style: styles27.row, children: [
+      /* @__PURE__ */ jsx31(
+        RNSwitch,
+        {
+          value,
+          onValueChange: onChange,
+          disabled,
+          accessibilityLabel: label,
+          accessibilityRole: "switch",
+          accessibilityState: { checked: value, disabled },
+          thumbColor: colors2.colorInteractive,
+          trackColor: { false: colors2.colorBgSubtle, true: colors2.colorBlueSubtle }
+        }
+      ),
+      /* @__PURE__ */ jsx31(Label, { label })
+    ] }),
+    /* @__PURE__ */ jsx31(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx31(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Checkbox/Checkbox.native.tsx
+import { StyleSheet as StyleSheet28, View as View25, Pressable as Pressable15 } from "react-native";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+var BOX = 22;
+var styles28 = StyleSheet28.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.colorOnBg;
+  const bgColor = checked ? colors2.colorInteractive : "transparent";
+  return /* @__PURE__ */ jsxs18(View25, { style: [styles28.container, style], children: [
+    /* @__PURE__ */ jsxs18(
+      Pressable15,
+      {
+        onPress: () => !disabled && onChange?.(!checked),
+        accessibilityRole: "checkbox",
+        accessibilityLabel: typeof label === "string" ? label : name,
+        accessibilityState: { checked, disabled },
+        disabled,
+        style: ({ pressed }) => [styles28.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
+        children: [
+          /* @__PURE__ */ jsx32(View25, { style: [styles28.box, { borderColor, backgroundColor: bgColor }], children: checked && /* @__PURE__ */ jsx32(Label, { label: "\u2713", style: [styles28.checkmark, { color: colors2.colorOnInteractive }] }) }),
+          /* @__PURE__ */ jsx32(Label, { label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx32(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx32(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/CheckboxGroup/CheckboxGroup.native.tsx
+import { StyleSheet as StyleSheet29, View as View26, Text as Text24 } from "react-native";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+var styles29 = StyleSheet29.create({
+  container: {
+    gap: spacing.xs
+  },
+  legend: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    fontWeight: font.weight.semibold
+  },
+  required: {
+    fontWeight: font.weight.body
+  },
+  items: {
+    gap: spacing.xxs
+  }
+});
+function CheckboxGroup({
+  legend,
+  children,
+  error,
+  hint,
+  required,
+  disabled = false,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ jsxs19(
+    View26,
+    {
+      style: [styles29.container, disabled && { opacity: 0.4 }, style],
+      accessibilityRole: "none",
+      accessibilityLabel: legend,
+      children: [
+        /* @__PURE__ */ jsxs19(Text24, { style: [styles29.legend, { color: colors2.colorOnBg }], children: [
+          legend,
+          required && /* @__PURE__ */ jsx33(Text24, { style: [styles29.required, { color: colors2.colorOnBgSubtle }], children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx33(View26, { style: styles29.items, children }),
+        /* @__PURE__ */ jsx33(Message, { type: "error", message: error }),
+        /* @__PURE__ */ jsx33(Message, { type: "hint", message: hint })
+      ]
+    }
+  );
+}
+
+// src/components/interaction/form/Radio/Radio.native.tsx
+import { StyleSheet as StyleSheet30, View as View27, Pressable as Pressable16 } from "react-native";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+var DOT = 22;
+var INNER = 10;
+var styles30 = StyleSheet30.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.colorOnBg;
+  return /* @__PURE__ */ jsxs20(View27, { style: [styles30.container, style], children: [
+    /* @__PURE__ */ jsxs20(
+      Pressable16,
+      {
+        onPress: () => !disabled && onChange?.(),
+        accessibilityRole: "radio",
+        accessibilityLabel: typeof label === "string" ? label : name,
+        accessibilityState: { checked, disabled },
+        disabled,
+        style: ({ pressed }) => [styles30.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
+        children: [
+          /* @__PURE__ */ jsx34(View27, { style: [styles30.outer, { borderColor }], children: checked && /* @__PURE__ */ jsx34(View27, { style: [styles30.inner, { backgroundColor: colors2.colorInteractive }] }) }),
+          /* @__PURE__ */ jsx34(Label, { label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx34(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx34(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/RadioGroup/RadioGroup.native.tsx
+import { StyleSheet as StyleSheet31, View as View28, Text as Text25 } from "react-native";
+import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+var styles31 = StyleSheet31.create({
+  container: {
+    gap: spacing.xs
+  },
+  legend: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    fontWeight: font.weight.semibold
+  },
+  required: {
+    fontWeight: font.weight.body
+  },
+  items: {
+    gap: spacing.xxs
+  }
+});
+function RadioGroup({
+  legend,
+  children,
+  error,
+  hint,
+  required,
+  disabled = false,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ jsxs21(
+    View28,
+    {
+      style: [styles31.container, disabled && { opacity: 0.4 }, style],
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: legend,
+      children: [
+        /* @__PURE__ */ jsxs21(Text25, { style: [styles31.legend, { color: colors2.colorOnBg }], children: [
+          legend,
+          required && /* @__PURE__ */ jsx35(Text25, { style: [styles31.required, { color: colors2.colorOnBgSubtle }], children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx35(View28, { style: styles31.items, children }),
+        /* @__PURE__ */ jsx35(Message, { type: "error", message: error }),
+        /* @__PURE__ */ jsx35(Message, { type: "hint", message: hint })
+      ]
+    }
+  );
+}
+
+// src/components/interaction/form/FileInput/FileInput.native.tsx
+import { StyleSheet as StyleSheet32, View as View29, Pressable as Pressable17, Text as Text26 } from "react-native";
+import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+var styles32 = StyleSheet32.create({
+  container: {
+    gap: spacing.xxs
+  },
+  dropZone: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: spacing.xs,
+    paddingVertical: spacing.xl,
+    paddingHorizontal: spacing.m,
+    borderWidth: 2,
+    borderStyle: "dashed",
+    borderRadius: border.radius.s,
+    minHeight: 120
+  },
+  icon: {
+    fontSize: 28,
+    lineHeight: 32
+  },
+  prompt: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    textAlign: "center"
+  },
+  acceptHint: {
+    fontFamily: font.family.body,
+    fontSize: font.size.bodyS,
+    lineHeight: lineHeight.bodyS,
+    textAlign: "center"
+  },
+  fileList: {
+    gap: spacing.xxs,
+    alignItems: "center"
+  },
+  fileName: {
+    fontFamily: font.family.body,
+    fontSize: font.size.bodyS,
+    lineHeight: lineHeight.bodyS
+  }
+});
+function FileInput({
+  label,
+  name,
+  accept,
+  disabled = false,
+  required,
+  error,
+  hint,
+  onSelect,
+  fileNames = [],
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const borderColor = error ? colors2.colorError : colors2.colorBgSubtle;
+  return /* @__PURE__ */ jsxs22(View29, { style: [styles32.container, style], testID: name, children: [
+    /* @__PURE__ */ jsx36(
+      Label,
+      {
+        label: required ? `${label} *` : label
+      }
+    ),
+    /* @__PURE__ */ jsxs22(
+      Pressable17,
+      {
+        onPress: () => !disabled && onSelect?.(),
+        disabled,
+        accessibilityRole: "button",
+        accessibilityLabel: `${label}, tap to select file`,
+        accessibilityState: { disabled },
+        style: ({ pressed }) => [
+          styles32.dropZone,
+          {
+            borderColor,
+            backgroundColor: "transparent"
+          },
+          pressed && { opacity: 0.7 },
+          disabled && { opacity: 0.4 }
+        ],
+        children: [
+          /* @__PURE__ */ jsx36(Text26, { style: [styles32.icon, { color: colors2.colorInteractive }], children: "\u2191" }),
+          /* @__PURE__ */ jsx36(Text26, { style: [styles32.prompt, { color: colors2.colorOnBgSubtle }], children: fileNames.length > 0 ? "Selected files:" : "Tap to select file" }),
+          fileNames.length > 0 && /* @__PURE__ */ jsx36(View29, { style: styles32.fileList, children: fileNames.map((fileName) => /* @__PURE__ */ jsx36(Text26, { style: [styles32.fileName, { color: colors2.colorOnBg }], children: fileName }, fileName)) }),
+          accept && /* @__PURE__ */ jsx36(Text26, { style: [styles32.acceptHint, { color: colors2.colorOnBgSubtle }], children: accept })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx36(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx36(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Combobox/Combobox.native.tsx
+import { useState as useState7, useMemo as useMemo2 } from "react";
+import {
+  StyleSheet as StyleSheet33,
+  View as View30,
+  TextInput,
+  Pressable as Pressable18,
+  Text as Text27,
+  ScrollView as ScrollView4
+} from "react-native";
+import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+var MAX_DROPDOWN_HEIGHT = 200;
+var styles33 = StyleSheet33.create({
+  container: {
+    gap: spacing.xxs
+  },
+  inputWrapper: {
+    position: "relative"
+  },
+  input: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.s,
+    borderWidth: 1,
+    borderRadius: border.radius.full,
+    minHeight: 44
+  },
+  dropdown: {
+    position: "absolute",
+    top: "100%",
+    start: 0,
+    end: 0,
+    maxHeight: MAX_DROPDOWN_HEIGHT,
+    borderWidth: 1,
+    borderTopWidth: 0,
+    borderBottomStartRadius: border.radius.xs,
+    borderBottomEndRadius: border.radius.xs,
+    zIndex: 10
+  },
+  option: {
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.s,
+    minHeight: 44,
+    justifyContent: "center"
+  },
+  optionText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body
+  }
+});
+function Combobox({
+  label,
+  name,
+  options,
+  placeholder,
+  value,
+  onChange,
+  disabled = false,
+  error,
+  hint,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const selectedOption = useMemo2(
+    () => options.find((o) => o.value === value),
+    [options, value]
+  );
+  const [inputValue, setInputValue] = useState7(selectedOption?.label ?? "");
+  const [isOpen, setIsOpen] = useState7(false);
+  const filtered = useMemo2(
+    () => options.filter(
+      (o) => o.label.toLowerCase().includes(inputValue.toLowerCase())
+    ),
+    [options, inputValue]
+  );
+  const selectOption = (option) => {
+    setInputValue(option.label);
+    setIsOpen(false);
+    onChange?.(option.value);
+  };
+  const handleChangeText = (text) => {
+    setInputValue(text);
+    setIsOpen(true);
+  };
+  const handleFocus = () => {
+    setIsOpen(true);
+  };
+  const handleBlur = () => {
+    setTimeout(() => setIsOpen(false), 150);
+  };
+  const borderColor = error ? colors2.colorError : colors2.colorOnBg;
+  return /* @__PURE__ */ jsxs23(View30, { style: [styles33.container, style], children: [
+    /* @__PURE__ */ jsx37(Label, { label }),
+    /* @__PURE__ */ jsxs23(View30, { style: styles33.inputWrapper, children: [
+      /* @__PURE__ */ jsx37(
+        TextInput,
+        {
+          value: inputValue,
+          onChangeText: handleChangeText,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          placeholder,
+          placeholderTextColor: colors2.colorOnBgSubtle,
+          editable: !disabled,
+          accessibilityRole: "combobox",
+          accessibilityLabel: typeof label === "string" ? label : name,
+          accessibilityState: { disabled, expanded: isOpen },
+          style: [
+            styles33.input,
+            {
+              borderColor,
+              color: colors2.colorOnBg,
+              backgroundColor: colors2.colorBg
+            },
+            disabled && { opacity: 0.4 }
+          ]
+        }
+      ),
+      isOpen && filtered.length > 0 && /* @__PURE__ */ jsx37(
+        ScrollView4,
+        {
+          style: [
+            styles33.dropdown,
+            {
+              borderColor: colors2.colorBgSubtle,
+              backgroundColor: colors2.colorBg
+            }
+          ],
+          keyboardShouldPersistTaps: "handled",
+          nestedScrollEnabled: true,
+          children: filtered.map((option) => {
+            const isSelected = option.value === value;
+            const isDisabled = option.disabled;
+            return /* @__PURE__ */ jsx37(
+              Pressable18,
+              {
+                onPress: () => !isDisabled && selectOption(option),
+                disabled: isDisabled,
+                accessibilityRole: "menuitem",
+                accessibilityLabel: option.label,
+                accessibilityState: { selected: isSelected, disabled: isDisabled },
+                style: ({ pressed }) => [
+                  styles33.option,
+                  isSelected && { backgroundColor: colors2.colorBlueSubtle },
+                  pressed && !isDisabled && { backgroundColor: colors2.colorBgSubtle },
+                  isDisabled && { opacity: 0.4 }
+                ],
+                children: /* @__PURE__ */ jsx37(
+                  Text27,
+                  {
+                    style: [
+                      styles33.optionText,
+                      {
+                        color: isSelected ? colors2.colorInteractive : colors2.colorOnBg
+                      },
+                      isSelected && { fontWeight: font.weight.semibold }
+                    ],
+                    children: option.label
+                  }
+                )
+              },
+              option.value
+            );
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx37(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx37(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/SegmentedControl/SegmentedControl.native.tsx
+import { Children } from "react";
+import { StyleSheet as StyleSheet34, View as View31, Pressable as Pressable19, Text as Text28 } from "react-native";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var sizeTokens2 = {
+  small: { height: 32, fontSize: font.size.bodyS, px: spacing.s },
+  medium: { height: 40, fontSize: font.size.body, px: spacing.m },
+  large: { height: 48, fontSize: font.size.body, px: spacing.l }
+};
+var styles34 = StyleSheet34.create({
+  track: {
+    flexDirection: "row",
+    borderRadius: border.radius.full,
+    overflow: "hidden"
+  },
+  item: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 44
+  },
+  label: {
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    textAlign: "center"
+  }
+});
+function SegmentedControl({
+  selectedIndex = 0,
+  disabled = false,
+  size = "medium",
+  variant = "outline",
+  children,
+  accessibilityLabel,
+  onValueChange,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const { height, fontSize, px } = sizeTokens2[size];
+  const items = Children.toArray(children);
+  const trackStyle = variant === "filled" ? { backgroundColor: colors2.colorBgSubtle } : { backgroundColor: "transparent", borderWidth: 1, borderColor: colors2.colorBgSubtle };
+  return /* @__PURE__ */ jsx38(
+    View31,
+    {
+      style: [styles34.track, trackStyle, { borderRadius: border.radius.full }, style],
+      accessibilityRole: "tablist",
+      accessibilityLabel,
+      children: items.map((child, index) => {
+        const isActive = index === selectedIndex;
+        const activeStyle = variant === "filled" ? { backgroundColor: colors2.colorInteractive } : { borderWidth: 2, borderColor: colors2.colorInteractive };
+        const inactiveStyle = variant === "filled" ? {} : {};
+        const textColor = variant === "filled" && isActive ? colors2.colorOnInteractive : isActive ? colors2.colorInteractive : colors2.colorOnBgSubtle;
+        const label = typeof child === "string" || typeof child === "number" ? String(child) : null;
+        return /* @__PURE__ */ jsx38(
+          Pressable19,
+          {
+            onPress: () => !disabled && onValueChange?.(index),
+            disabled,
+            accessibilityRole: "tab",
+            accessibilityLabel: label ?? void 0,
+            accessibilityState: { selected: isActive, disabled },
+            style: ({ pressed }) => [
+              styles34.item,
+              { height, paddingHorizontal: px },
+              isActive ? activeStyle : inactiveStyle,
+              variant === "filled" && isActive && { borderRadius: border.radius.full },
+              pressed && !disabled && { opacity: 0.7 },
+              disabled && { opacity: 0.4 }
+            ],
+            children: label !== null ? /* @__PURE__ */ jsx38(Text28, { style: [styles34.label, { fontSize, color: textColor }], children: label }) : child
+          },
+          index
+        );
+      })
+    }
+  );
+}
+
+// src/components/interaction/form/FormInput/FormInput.native.tsx
+import { useState as useState8 } from "react";
+import {
+  StyleSheet as StyleSheet35,
+  View as View32,
+  TextInput as TextInput2
+} from "react-native";
+import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+var keyboardTypeMap = {
+  text: "default",
+  email: "email-address",
+  password: "default",
+  tel: "phone-pad",
+  url: "url",
+  number: "numeric",
+  search: "default"
+};
+var styles35 = StyleSheet35.create({
+  container: {
+    gap: spacing.xxs
+  },
+  input: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    paddingHorizontal: spacing.s,
+    paddingVertical: spacing.xs,
+    borderWidth: 1,
+    borderRadius: border.radius.full,
+    minHeight: 44
+  }
+});
+function FormInput({
+  label,
+  name,
+  type = "text",
+  value,
+  defaultValue,
+  placeholder,
+  error,
+  hint,
+  disabled = false,
+  onChange,
+  onBlur,
+  onFocus,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const [focused, setFocused] = useState8(false);
+  const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
+  return /* @__PURE__ */ jsxs24(View32, { style: [styles35.container, style], children: [
+    /* @__PURE__ */ jsx39(Label, { label }),
+    /* @__PURE__ */ jsx39(
+      TextInput2,
+      {
+        accessibilityLabel: typeof label === "string" ? label : name,
+        accessibilityState: { disabled },
+        accessibilityHint: hint,
+        value,
+        defaultValue,
+        placeholder,
+        placeholderTextColor: colors2.colorOnBgSubtle,
+        keyboardType: keyboardTypeMap[type],
+        secureTextEntry: type === "password",
+        autoCapitalize: type === "email" || type === "url" ? "none" : "sentences",
+        autoComplete: type === "email" ? "email" : type === "tel" ? "tel" : void 0,
+        editable: !disabled,
+        onChangeText: onChange,
+        onFocus: () => {
+          setFocused(true);
+          onFocus?.();
+        },
+        onBlur: () => {
+          setFocused(false);
+          onBlur?.();
+        },
+        style: [
+          styles35.input,
+          {
+            borderColor,
+            color: colors2.colorOnBg,
+            backgroundColor: colors2.colorBg
+          },
+          disabled && { opacity: 0.4 }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx39(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx39(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Textarea/Textarea.native.tsx
+import { useState as useState9 } from "react";
+import {
+  StyleSheet as StyleSheet36,
+  View as View33,
+  TextInput as TextInput3
+} from "react-native";
+import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+var styles36 = StyleSheet36.create({
+  container: {
+    gap: spacing.xxs
+  },
+  textarea: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    paddingHorizontal: spacing.s,
+    paddingVertical: spacing.xs,
+    borderWidth: 1,
+    borderRadius: border.radius.xs,
+    minHeight: 100,
+    textAlignVertical: "top"
+  }
+});
+function Textarea({
+  label,
+  name,
+  value,
+  defaultValue,
+  placeholder,
+  error,
+  hint,
+  disabled = false,
+  numberOfLines = 4,
+  onChange,
+  onBlur,
+  onFocus,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const [focused, setFocused] = useState9(false);
+  const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
+  return /* @__PURE__ */ jsxs25(View33, { style: [styles36.container, style], children: [
+    /* @__PURE__ */ jsx40(Label, { label }),
+    /* @__PURE__ */ jsx40(
+      TextInput3,
+      {
+        accessibilityLabel: typeof label === "string" ? label : name,
+        accessibilityState: { disabled },
+        accessibilityHint: hint,
+        multiline: true,
+        numberOfLines,
+        value,
+        defaultValue,
+        placeholder,
+        placeholderTextColor: colors2.colorOnBgSubtle,
+        editable: !disabled,
+        onChangeText: onChange,
+        onFocus: () => {
+          setFocused(true);
+          onFocus?.();
+        },
+        onBlur: () => {
+          setFocused(false);
+          onBlur?.();
+        },
+        style: [
+          styles36.textarea,
+          {
+            borderColor,
+            color: colors2.colorOnBg,
+            backgroundColor: colors2.colorBg
+          },
+          disabled && { opacity: 0.4 }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx40(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx40(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Select/Select.native.tsx
+import { useState as useState10 } from "react";
+import {
+  StyleSheet as StyleSheet37,
+  View as View34,
+  Text as Text29,
+  Pressable as Pressable20,
+  Modal,
+  FlatList,
+  SafeAreaView
+} from "react-native";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+var styles37 = StyleSheet37.create({
+  container: {
+    gap: spacing.xxs
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: spacing.s,
+    paddingVertical: spacing.xs,
+    borderWidth: 1,
+    borderRadius: border.radius.full,
+    minHeight: 44
+  },
+  triggerText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    flex: 1
+  },
+  chevron: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    marginStart: spacing.xs
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  sheet: {
+    maxHeight: "60%",
+    borderTopStartRadius: border.radius.m,
+    borderTopEndRadius: border.radius.m,
+    paddingTop: spacing.m,
+    paddingBottom: spacing.xxxl
+  },
+  sheetHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: spacing.m,
+    paddingBottom: spacing.s
+  },
+  sheetTitle: {
+    fontFamily: font.family.body,
+    fontSize: font.size.heading3,
+    fontWeight: font.weight.semibold
+  },
+  closeText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    fontWeight: font.weight.semibold
+  },
+  optionItem: {
+    paddingHorizontal: spacing.m,
+    paddingVertical: spacing.s,
+    minHeight: 44,
+    justifyContent: "center"
+  },
+  optionText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body
+  }
+});
+function Select({
+  label,
+  name,
+  options,
+  placeholder = "Select an option",
+  value,
+  error,
+  hint,
+  disabled = false,
+  onChange,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const [open, setOpen] = useState10(false);
+  const selectedOption = options.find((o) => o.value === value);
+  const displayText = selectedOption?.label ?? placeholder;
+  const isPlaceholder = !selectedOption;
+  const borderColor = error ? colors2.colorError : open ? colors2.colorInteractive : colors2.colorOnBg;
+  const handleSelect = (optionValue) => {
+    onChange?.(optionValue);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs26(View34, { style: [styles37.container, style], children: [
+    /* @__PURE__ */ jsx41(Label, { label }),
+    /* @__PURE__ */ jsxs26(
+      Pressable20,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: typeof label === "string" ? `${label}, ${displayText}` : name,
+        accessibilityState: { disabled, expanded: open },
+        accessibilityHint: "Double tap to open options",
+        disabled,
+        onPress: () => setOpen(true),
+        style: [
+          styles37.trigger,
+          {
+            borderColor,
+            backgroundColor: colors2.colorBg
+          },
+          disabled && { opacity: 0.4 }
+        ],
+        children: [
+          /* @__PURE__ */ jsx41(
+            Text29,
+            {
+              style: [
+                styles37.triggerText,
+                {
+                  color: isPlaceholder ? colors2.colorOnBgSubtle : colors2.colorOnBg
+                }
+              ],
+              children: displayText
+            }
+          ),
+          /* @__PURE__ */ jsx41(Text29, { style: [styles37.chevron, { color: colors2.colorOnBgSubtle }], "aria-hidden": true, children: "\u25BE" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx41(
+      Modal,
+      {
+        visible: open,
+        transparent: true,
+        animationType: "slide",
+        onRequestClose: () => setOpen(false),
+        children: /* @__PURE__ */ jsx41(
+          Pressable20,
+          {
+            style: styles37.overlay,
+            onPress: () => setOpen(false),
+            accessibilityRole: "button",
+            accessibilityLabel: "Close options",
+            children: /* @__PURE__ */ jsx41(
+              Pressable20,
+              {
+                style: [styles37.sheet, { backgroundColor: colors2.colorBg }],
+                onPress: () => {
+                },
+                children: /* @__PURE__ */ jsxs26(SafeAreaView, { children: [
+                  /* @__PURE__ */ jsxs26(View34, { style: styles37.sheetHeader, children: [
+                    /* @__PURE__ */ jsx41(Text29, { style: [styles37.sheetTitle, { color: colors2.colorOnBg }], children: typeof label === "string" ? label : "Select" }),
+                    /* @__PURE__ */ jsx41(
+                      Pressable20,
+                      {
+                        accessibilityRole: "button",
+                        accessibilityLabel: "Close",
+                        onPress: () => setOpen(false),
+                        hitSlop: 8,
+                        children: /* @__PURE__ */ jsx41(Text29, { style: [styles37.closeText, { color: colors2.colorInteractive }], children: "Done" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx41(
+                    FlatList,
+                    {
+                      data: options,
+                      keyExtractor: (item) => item.value,
+                      renderItem: ({ item }) => {
+                        const isSelected = item.value === value;
+                        return /* @__PURE__ */ jsx41(
+                          Pressable20,
+                          {
+                            accessibilityRole: "button",
+                            accessibilityLabel: item.label,
+                            accessibilityState: {
+                              selected: isSelected,
+                              disabled: item.disabled
+                            },
+                            disabled: item.disabled,
+                            onPress: () => handleSelect(item.value),
+                            style: ({ pressed }) => [
+                              styles37.optionItem,
+                              isSelected && { backgroundColor: colors2.colorBgSubtle },
+                              pressed && { opacity: 0.7 },
+                              item.disabled && { opacity: 0.4 }
+                            ],
+                            children: /* @__PURE__ */ jsx41(
+                              Text29,
+                              {
+                                style: [
+                                  styles37.optionText,
+                                  {
+                                    color: isSelected ? colors2.colorInteractive : colors2.colorOnBg,
+                                    fontWeight: isSelected ? font.weight.semibold : font.weight.body
+                                  }
+                                ],
+                                children: item.label
+                              }
+                            )
+                          }
+                        );
+                      }
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx41(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx41(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/form/Slider/Slider.native.tsx
+import { useState as useState11 } from "react";
+import {
+  StyleSheet as StyleSheet38,
+  View as View35,
+  Text as Text30
+} from "react-native";
+import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+var TRACK_HEIGHT = 6;
+var THUMB_SIZE = 24;
+var styles38 = StyleSheet38.create({
+  container: {
+    gap: spacing.xxs
+  },
+  labelRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  valueText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.bodyS,
+    lineHeight: lineHeight.bodyS,
+    fontWeight: font.weight.semibold
+  },
+  trackContainer: {
+    height: THUMB_SIZE + spacing.xs * 2,
+    justifyContent: "center",
+    paddingHorizontal: THUMB_SIZE / 2
+  },
+  track: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+    overflow: "hidden"
+  },
+  fill: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2
+  },
+  thumb: {
+    position: "absolute",
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    top: "50%",
+    marginTop: -(THUMB_SIZE / 2),
+    borderWidth: 2
+  }
+});
+function clampValue(v, min, max) {
+  return Math.min(max, Math.max(min, v));
+}
+function snapToStep(v, min, step) {
+  return Math.round((v - min) / step) * step + min;
+}
+function Slider({
+  label,
+  name: _name,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  value,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  showValue = false,
+  disabled = false,
+  error,
+  hint,
+  onChange,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState11(defaultValue ?? min);
+  const [trackWidth, setTrackWidth] = useState11(0);
+  const currentValue = isControlled ? value : internalValue;
+  const fillPct = max > min ? (currentValue - min) / (max - min) * 100 : 0;
+  const updateValue = (v) => {
+    const clamped = clampValue(v, min, max);
+    const snapped = snapToStep(clamped, min, step);
+    if (!isControlled) setInternalValue(snapped);
+    onChange?.(snapped);
+  };
+  const handleTrackLayout = (e) => {
+    setTrackWidth(e.nativeEvent.layout.width);
+  };
+  const valueFromTouch = (pageX, layoutX) => {
+    const x = pageX - layoutX;
+    const pct = clampValue(x / trackWidth, 0, 1);
+    return pct * (max - min) + min;
+  };
+  const handleStartShouldSetResponder = () => !disabled;
+  const handleResponderGrant = (e) => {
+    const target = e.currentTarget;
+    target.measure((_x, _y, _w, _h, pageX) => {
+      updateValue(valueFromTouch(e.nativeEvent.pageX, pageX));
+    });
+  };
+  const handleResponderMove = (e) => {
+    const target = e.currentTarget;
+    target.measure((_x, _y, _w, _h, pageX) => {
+      updateValue(valueFromTouch(e.nativeEvent.pageX, pageX));
+    });
+  };
+  return /* @__PURE__ */ jsxs27(
+    View35,
+    {
+      style: [styles38.container, style],
+      accessibilityRole: "adjustable",
+      accessibilityLabel: label,
+      accessibilityValue: { min, max, now: currentValue, text: String(currentValue) },
+      accessibilityState: { disabled },
+      children: [
+        /* @__PURE__ */ jsxs27(View35, { style: styles38.labelRow, children: [
+          /* @__PURE__ */ jsx42(Label, { label }),
+          showValue && /* @__PURE__ */ jsx42(Text30, { style: [styles38.valueText, { color: colors2.colorOnBg }], children: currentValue })
+        ] }),
+        /* @__PURE__ */ jsxs27(
+          View35,
+          {
+            style: [styles38.trackContainer, disabled && { opacity: 0.4 }],
+            onLayout: handleTrackLayout,
+            onStartShouldSetResponder: handleStartShouldSetResponder,
+            onMoveShouldSetResponder: handleStartShouldSetResponder,
+            onResponderGrant: handleResponderGrant,
+            onResponderMove: handleResponderMove,
+            children: [
+              /* @__PURE__ */ jsx42(View35, { style: [styles38.track, { backgroundColor: colors2.colorBgSubtle }], children: /* @__PURE__ */ jsx42(
+                View35,
+                {
+                  style: [
+                    styles38.fill,
+                    {
+                      width: `${fillPct}%`,
+                      backgroundColor: error ? colors2.colorError : colors2.colorInteractive
+                    }
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx42(
+                View35,
+                {
+                  style: [
+                    styles38.thumb,
+                    {
+                      start: `${fillPct}%`,
+                      marginStart: -(THUMB_SIZE / 2),
+                      backgroundColor: colors2.colorBg,
+                      borderColor: error ? colors2.colorError : colors2.colorInteractive
+                    }
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx42(Message, { type: "error", message: error }),
+        /* @__PURE__ */ jsx42(Message, { type: "hint", message: hint })
+      ]
+    }
+  );
+}
+
+// src/components/interaction/form/NumberInput/NumberInput.native.tsx
+import { useState as useState12 } from "react";
+import {
+  StyleSheet as StyleSheet39,
+  View as View36,
+  TextInput as TextInput4,
+  Text as Text31,
+  Pressable as Pressable21
+} from "react-native";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+var STEPPER_SIZE = 44;
+var styles39 = StyleSheet39.create({
+  container: {
+    gap: spacing.xxs
+  },
+  inputRow: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  stepper: {
+    width: STEPPER_SIZE,
+    height: STEPPER_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1
+  },
+  stepperStart: {
+    borderTopStartRadius: border.radius.full,
+    borderBottomStartRadius: border.radius.full,
+    borderEndWidth: 0
+  },
+  stepperEnd: {
+    borderTopEndRadius: border.radius.full,
+    borderBottomEndRadius: border.radius.full,
+    borderStartWidth: 0
+  },
+  stepperText: {
+    fontSize: 20,
+    fontWeight: font.weight.semibold,
+    lineHeight: 24
+  },
+  input: {
+    flex: 1,
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    textAlign: "center",
+    paddingHorizontal: spacing.xs,
+    paddingVertical: spacing.xs,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    minHeight: STEPPER_SIZE
+  }
+});
+function NumberInput({
+  label,
+  name: _name,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  value,
+  defaultValue,
+  min,
+  max,
+  step = 1,
+  disabled = false,
+  error,
+  hint,
+  onChange,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState12(defaultValue ?? 0);
+  const currentValue = isControlled ? value : internalValue;
+  const clamp = (v) => {
+    const withMin = min !== void 0 ? Math.max(min, v) : v;
+    return max !== void 0 ? Math.min(max, withMin) : withMin;
+  };
+  const update = (next) => {
+    const clamped = clamp(next);
+    if (!isControlled) setInternalValue(clamped);
+    onChange?.(clamped);
+  };
+  const canDecrease = min === void 0 || currentValue > min;
+  const canIncrease = max === void 0 || currentValue < max;
+  const borderColor = error ? colors2.colorError : colors2.colorOnBg;
+  return /* @__PURE__ */ jsxs28(View36, { style: [styles39.container, style], children: [
+    /* @__PURE__ */ jsx43(Label, { label }),
+    /* @__PURE__ */ jsxs28(View36, { style: [styles39.inputRow, disabled && { opacity: 0.4 }], children: [
+      /* @__PURE__ */ jsx43(
+        Pressable21,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Decrease",
+          accessibilityState: { disabled: disabled || !canDecrease },
+          disabled: disabled || !canDecrease,
+          onPress: () => update(currentValue - step),
+          style: ({ pressed }) => [
+            styles39.stepper,
+            styles39.stepperStart,
+            {
+              borderColor,
+              backgroundColor: colors2.colorBgSubtle
+            },
+            pressed && { opacity: 0.7 },
+            (disabled || !canDecrease) && { opacity: 0.4 }
+          ],
+          children: /* @__PURE__ */ jsx43(
+            Text31,
+            {
+              style: [styles39.stepperText, { color: colors2.colorOnBg }],
+              "aria-hidden": true,
+              children: "\u2212"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx43(
+        TextInput4,
+        {
+          accessibilityLabel: label,
+          accessibilityState: { disabled },
+          accessibilityValue: {
+            min,
+            max,
+            now: currentValue,
+            text: String(currentValue)
+          },
+          keyboardType: "numeric",
+          value: String(currentValue),
+          editable: !disabled,
+          onChangeText: (text) => {
+            const parsed = parseFloat(text);
+            const safe = isNaN(parsed) ? 0 : parsed;
+            update(safe);
+          },
+          style: [
+            styles39.input,
+            {
+              borderColor,
+              color: colors2.colorOnBg,
+              backgroundColor: colors2.colorBg
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx43(
+        Pressable21,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Increase",
+          accessibilityState: { disabled: disabled || !canIncrease },
+          disabled: disabled || !canIncrease,
+          onPress: () => update(currentValue + step),
+          style: ({ pressed }) => [
+            styles39.stepper,
+            styles39.stepperEnd,
+            {
+              borderColor,
+              backgroundColor: colors2.colorBgSubtle
+            },
+            pressed && { opacity: 0.7 },
+            (disabled || !canIncrease) && { opacity: 0.4 }
+          ],
+          children: /* @__PURE__ */ jsx43(
+            Text31,
+            {
+              style: [styles39.stepperText, { color: colors2.colorOnBg }],
+              "aria-hidden": true,
+              children: "+"
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx43(Message, { type: "error", message: error }),
+    /* @__PURE__ */ jsx43(Message, { type: "hint", message: hint })
+  ] });
+}
+
+// src/components/interaction/Dialog/Dialog.native.tsx
+import {
+  Modal as Modal2,
+  View as View37,
+  Pressable as Pressable22,
+  Text as Text32,
+  StyleSheet as StyleSheet40
+} from "react-native";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+var styles40 = StyleSheet40.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    padding: spacing.m
+  },
+  panel: {
+    width: "100%",
+    maxWidth: 480,
+    borderRadius: border.radius.m,
+    padding: spacing.l,
+    paddingTop: spacing.xl,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: spacing.m
+  },
+  title: {
+    fontFamily: font.family.body,
+    fontSize: font.size.heading3,
+    fontWeight: font.weight.semibold,
+    flex: 1
+  },
+  closeButton: {
+    position: "absolute",
+    top: spacing.s,
+    end: spacing.s,
+    width: 44,
+    height: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1
+  },
+  closeText: {
+    fontFamily: font.family.body,
+    fontSize: 20,
+    lineHeight: 24
+  }
+});
+function Dialog({
+  isOpen = false,
+  onClose,
+  title,
+  children,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  return /* @__PURE__ */ jsx44(
+    Modal2,
+    {
+      visible: isOpen,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsx44(
+        Pressable22,
+        {
+          style: styles40.overlay,
+          onPress: onClose,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close dialog",
+          children: /* @__PURE__ */ jsxs29(
+            Pressable22,
+            {
+              style: [styles40.panel, { backgroundColor: colors2.colorGreySubtle }, style],
+              onPress: () => {
+              },
+              accessibilityRole: "none",
+              children: [
+                /* @__PURE__ */ jsx44(
+                  Pressable22,
+                  {
+                    style: styles40.closeButton,
+                    onPress: onClose,
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Close dialog",
+                    hitSlop: 8,
+                    children: /* @__PURE__ */ jsx44(
+                      Text32,
+                      {
+                        style: [styles40.closeText, { color: colors2.colorOnBgSubtle }],
+                        "aria-hidden": true,
+                        children: "\u2715"
+                      }
+                    )
+                  }
+                ),
+                !!title && /* @__PURE__ */ jsx44(View37, { style: styles40.header, children: /* @__PURE__ */ jsx44(Text32, { style: [styles40.title, { color: colors2.colorOnGreySubtle }], children: title }) }),
+                children
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/components/interaction/Drawer/Drawer.native.tsx
+import { useEffect as useEffect2, useRef as useRef4 } from "react";
+import {
+  Modal as Modal3,
+  View as View38,
+  Pressable as Pressable23,
+  Text as Text33,
+  Animated as Animated3,
+  StyleSheet as StyleSheet41,
+  Dimensions as Dimensions2
+} from "react-native";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+var styles41 = StyleSheet41.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "flex-end"
+  },
+  panel: {
+    maxHeight: "90%",
+    borderTopStartRadius: border.radius.m,
+    borderTopEndRadius: border.radius.m,
+    paddingTop: spacing.m,
+    paddingHorizontal: spacing.m,
+    paddingBottom: spacing.m,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 16,
+    elevation: 16
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingBottom: spacing.m,
+    borderBottomWidth: 1,
+    marginBottom: spacing.m
+  },
+  title: {
+    fontFamily: font.family.body,
+    fontSize: font.size.heading3,
+    fontWeight: font.weight.semibold,
+    flex: 1
+  },
+  closeButton: {
+    width: 44,
+    height: 44,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  closeText: {
+    fontFamily: font.family.body,
+    fontSize: 20,
+    lineHeight: 24
+  },
+  body: {
+    flex: 1
+  }
+});
+function Drawer({
+  isOpen,
+  onClose,
+  title,
+  children,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const screenHeight = Dimensions2.get("window").height;
+  const slideAnim = useRef4(new Animated3.Value(screenHeight)).current;
+  const backdropAnim = useRef4(new Animated3.Value(0)).current;
+  useEffect2(() => {
+    if (isOpen) {
+      Animated3.parallel([
+        Animated3.timing(slideAnim, {
+          toValue: 0,
+          duration: 250,
+          useNativeDriver: true
+        }),
+        Animated3.timing(backdropAnim, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true
+        })
+      ]).start();
+    } else {
+      Animated3.parallel([
+        Animated3.timing(slideAnim, {
+          toValue: screenHeight,
+          duration: 200,
+          useNativeDriver: true
+        }),
+        Animated3.timing(backdropAnim, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start();
+    }
+  }, [isOpen, slideAnim, backdropAnim, screenHeight]);
+  return /* @__PURE__ */ jsx45(
+    Modal3,
+    {
+      visible: isOpen,
+      transparent: true,
+      animationType: "none",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs30(View38, { style: styles41.overlay, children: [
+        /* @__PURE__ */ jsx45(
+          Animated3.View,
+          {
+            style: [
+              StyleSheet41.absoluteFill,
+              { backgroundColor: "rgba(0, 0, 0, 0.5)", opacity: backdropAnim }
+            ],
+            children: /* @__PURE__ */ jsx45(
+              Pressable23,
+              {
+                style: StyleSheet41.absoluteFill,
+                onPress: onClose,
+                accessibilityRole: "button",
+                accessibilityLabel: "Close drawer"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs30(
+          Animated3.View,
+          {
+            style: [
+              styles41.panel,
+              {
+                backgroundColor: colors2.colorBg,
+                transform: [{ translateY: slideAnim }]
+              },
+              style
+            ],
+            accessibilityRole: "none",
+            children: [
+              /* @__PURE__ */ jsxs30(
+                View38,
+                {
+                  style: [styles41.header, { borderBottomColor: colors2.colorBgSubtle }],
+                  children: [
+                    !!title && /* @__PURE__ */ jsx45(Text33, { style: [styles41.title, { color: colors2.colorOnBg }], children: title }),
+                    /* @__PURE__ */ jsx45(
+                      Pressable23,
+                      {
+                        style: styles41.closeButton,
+                        onPress: onClose,
+                        accessibilityRole: "button",
+                        accessibilityLabel: "Close drawer",
+                        hitSlop: 8,
+                        children: /* @__PURE__ */ jsx45(
+                          Text33,
+                          {
+                            style: [styles41.closeText, { color: colors2.colorOnBgSubtle }],
+                            "aria-hidden": true,
+                            children: "\u2715"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx45(View38, { style: styles41.body, children })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/interaction/Toast/Toast.native.tsx
+import {
+  useState as useState13,
+  useEffect as useEffect3,
+  useRef as useRef5,
+  useCallback as useCallback3,
+  useMemo as useMemo3,
+  createContext as createContext2,
+  useContext as useContext2
+} from "react";
+import {
+  View as View39,
+  Text as Text34,
+  Pressable as Pressable24,
+  Animated as Animated4,
+  StyleSheet as StyleSheet42
+} from "react-native";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+var ToastContext = createContext2(void 0);
+var styles42 = StyleSheet42.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    start: 0,
+    end: 0,
+    paddingTop: spacing.xxxl,
+    paddingHorizontal: spacing.m,
+    zIndex: 9999,
+    pointerEvents: "box-none"
+  },
+  toast: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m,
+    borderRadius: border.radius.s,
+    marginBottom: spacing.xs,
+    minHeight: 48
+  },
+  message: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    fontWeight: font.weight.semibold,
+    flex: 1
+  },
+  closeButton: {
+    width: 44,
+    height: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    marginStart: spacing.xs
+  },
+  closeText: {
+    fontFamily: font.family.body,
+    fontSize: 16,
+    lineHeight: 20
+  }
+});
+function ToastItem({
+  toast,
+  onRemove
+}) {
+  const { colors: colors2 } = useTheme();
+  const slideAnim = useRef5(new Animated4.Value(-100)).current;
+  const opacityAnim = useRef5(new Animated4.Value(0)).current;
+  const variantColors = useMemo3(
+    () => ({
+      success: { bg: colors2.colorSuccess, text: colors2.colorOnSuccess },
+      error: { bg: colors2.colorError, text: colors2.colorOnError },
+      info: { bg: colors2.colorBgSubtle, text: colors2.colorOnBgSubtle }
+    }),
+    [colors2]
+  );
+  useEffect3(() => {
+    Animated4.parallel([
+      Animated4.timing(slideAnim, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true
+      }),
+      Animated4.timing(opacityAnim, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [slideAnim, opacityAnim]);
+  useEffect3(() => {
+    const timer = setTimeout(onRemove, 5e3);
+    return () => clearTimeout(timer);
+  }, [onRemove]);
+  const { bg, text } = variantColors[toast.variant];
+  return /* @__PURE__ */ jsxs31(
+    Animated4.View,
+    {
+      style: [
+        styles42.toast,
+        {
+          backgroundColor: bg,
+          transform: [{ translateY: slideAnim }],
+          opacity: opacityAnim
+        }
+      ],
+      accessibilityRole: "alert",
+      accessibilityLiveRegion: "polite",
+      children: [
+        /* @__PURE__ */ jsx46(Text34, { style: [styles42.message, { color: text }], children: toast.message }),
+        /* @__PURE__ */ jsx46(
+          Pressable24,
+          {
+            style: styles42.closeButton,
+            onPress: onRemove,
+            accessibilityRole: "button",
+            accessibilityLabel: "Dismiss",
+            hitSlop: 8,
+            children: /* @__PURE__ */ jsx46(Text34, { style: [styles42.closeText, { color: text }], "aria-hidden": true, children: "\u2715" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastProvider({
+  children,
+  style
+}) {
+  const [toasts, setToasts] = useState13([]);
+  const showToast = useCallback3((message, variant) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { id, message, variant }]);
+  }, []);
+  const removeToast = useCallback3((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const value = useMemo3(() => ({ showToast }), [showToast]);
+  return /* @__PURE__ */ jsx46(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs31(View39, { style: [{ flex: 1 }, style], children: [
+    children,
+    toasts.length > 0 && /* @__PURE__ */ jsx46(
+      View39,
+      {
+        style: styles42.container,
+        accessibilityRole: "summary",
+        accessibilityLabel: "Notifications",
+        children: toasts.map((toast) => /* @__PURE__ */ jsx46(
+          ToastItem,
+          {
+            toast,
+            onRemove: () => removeToast(toast.id)
+          },
+          toast.id
+        ))
+      }
+    )
+  ] }) });
+}
+function useToast() {
+  const context = useContext2(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+
+// src/components/interaction/DropdownMenu/DropdownMenu.native.tsx
+import React, { useState as useState14, useEffect as useEffect4, useRef as useRef6 } from "react";
+import {
+  Modal as Modal4,
+  View as View40,
+  Pressable as Pressable25,
+  Text as Text35,
+  FlatList as FlatList2,
+  Animated as Animated5,
+  StyleSheet as StyleSheet43,
+  Dimensions as Dimensions3,
+  SafeAreaView as SafeAreaView2
+} from "react-native";
+import { Fragment as Fragment2, jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+var styles43 = StyleSheet43.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "flex-end"
+  },
+  sheet: {
+    maxHeight: "60%",
+    borderTopStartRadius: border.radius.m,
+    borderTopEndRadius: border.radius.m,
+    paddingTop: spacing.m,
+    paddingBottom: spacing.xxxl
+  },
+  sheetHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: spacing.m,
+    paddingBottom: spacing.s,
+    borderBottomWidth: 1,
+    marginBottom: spacing.xxs
+  },
+  sheetTitle: {
+    fontFamily: font.family.body,
+    fontSize: font.size.heading3,
+    fontWeight: font.weight.semibold
+  },
+  closeText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    fontWeight: font.weight.semibold
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: spacing.m,
+    marginVertical: spacing.xxs
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: spacing.m,
+    paddingVertical: spacing.s,
+    minHeight: 48,
+    gap: spacing.s
+  },
+  itemText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body
+  }
+});
+function DropdownMenu({
+  trigger,
+  items,
+  title = "Menu",
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const [open, setOpen] = useState14(false);
+  const screenHeight = Dimensions3.get("window").height;
+  const slideAnim = useRef6(new Animated5.Value(screenHeight)).current;
+  const backdropAnim = useRef6(new Animated5.Value(0)).current;
+  useEffect4(() => {
+    if (open) {
+      Animated5.parallel([
+        Animated5.timing(slideAnim, {
+          toValue: 0,
+          duration: 250,
+          useNativeDriver: true
+        }),
+        Animated5.timing(backdropAnim, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true
+        })
+      ]).start();
+    } else {
+      Animated5.parallel([
+        Animated5.timing(slideAnim, {
+          toValue: screenHeight,
+          duration: 200,
+          useNativeDriver: true
+        }),
+        Animated5.timing(backdropAnim, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start();
+    }
+  }, [open, slideAnim, backdropAnim, screenHeight]);
+  const handleItemPress = (item) => {
+    item.onPress?.();
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs32(View40, { style, children: [
+    React.cloneElement(trigger, {
+      onPress: () => setOpen(true),
+      accessibilityRole: "button",
+      accessibilityLabel: title
+    }),
+    /* @__PURE__ */ jsx47(
+      Modal4,
+      {
+        visible: open,
+        transparent: true,
+        animationType: "none",
+        onRequestClose: () => setOpen(false),
+        children: /* @__PURE__ */ jsxs32(View40, { style: styles43.overlay, children: [
+          /* @__PURE__ */ jsx47(
+            Animated5.View,
+            {
+              style: [
+                StyleSheet43.absoluteFill,
+                { backgroundColor: "rgba(0, 0, 0, 0.5)", opacity: backdropAnim }
+              ],
+              children: /* @__PURE__ */ jsx47(
+                Pressable25,
+                {
+                  style: StyleSheet43.absoluteFill,
+                  onPress: () => setOpen(false),
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Close menu"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx47(
+            Animated5.View,
+            {
+              style: [
+                styles43.sheet,
+                {
+                  backgroundColor: colors2.colorBg,
+                  transform: [{ translateY: slideAnim }]
+                }
+              ],
+              children: /* @__PURE__ */ jsx47(
+                Pressable25,
+                {
+                  onPress: () => {
+                  },
+                  children: /* @__PURE__ */ jsxs32(SafeAreaView2, { children: [
+                    /* @__PURE__ */ jsxs32(
+                      View40,
+                      {
+                        style: [
+                          styles43.sheetHeader,
+                          { borderBottomColor: colors2.colorBgSubtle }
+                        ],
+                        children: [
+                          /* @__PURE__ */ jsx47(Text35, { style: [styles43.sheetTitle, { color: colors2.colorOnBg }], children: title }),
+                          /* @__PURE__ */ jsx47(
+                            Pressable25,
+                            {
+                              accessibilityRole: "button",
+                              accessibilityLabel: "Close",
+                              onPress: () => setOpen(false),
+                              hitSlop: 8,
+                              children: /* @__PURE__ */ jsx47(
+                                Text35,
+                                {
+                                  style: [
+                                    styles43.closeText,
+                                    { color: colors2.colorInteractive }
+                                  ],
+                                  children: "Done"
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx47(
+                      FlatList2,
+                      {
+                        data: items,
+                        keyExtractor: (item) => item.id,
+                        renderItem: ({ item }) => /* @__PURE__ */ jsxs32(Fragment2, { children: [
+                          item.separator && /* @__PURE__ */ jsx47(
+                            View40,
+                            {
+                              style: [
+                                styles43.separator,
+                                { backgroundColor: colors2.colorBgSubtle }
+                              ],
+                              accessibilityRole: "none"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs32(
+                            Pressable25,
+                            {
+                              accessibilityRole: "menuitem",
+                              accessibilityLabel: item.label,
+                              accessibilityState: { disabled: item.disabled },
+                              disabled: item.disabled,
+                              onPress: () => handleItemPress(item),
+                              style: ({ pressed }) => [
+                                styles43.item,
+                                pressed && { backgroundColor: colors2.colorBgSubtle },
+                                item.disabled && { opacity: 0.4 }
+                              ],
+                              children: [
+                                !!item.icon && /* @__PURE__ */ jsx47(
+                                  View40,
+                                  {
+                                    importantForAccessibility: "no-hide-descendants",
+                                    accessibilityElementsHidden: true,
+                                    children: item.icon
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx47(
+                                  Text35,
+                                  {
+                                    style: [
+                                      styles43.itemText,
+                                      { color: colors2.colorOnBg }
+                                    ],
+                                    children: item.label
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ] })
+                      }
+                    )
+                  ] })
+                }
+              )
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/interaction/Popover/Popover.native.tsx
+import React2, { useState as useState15 } from "react";
+import {
+  Modal as Modal5,
+  View as View41,
+  Pressable as Pressable26,
+  StyleSheet as StyleSheet44
+} from "react-native";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+var styles44 = StyleSheet44.create({
+  wrapper: {
+    alignSelf: "flex-start"
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.25)",
+    padding: spacing.m
+  },
+  panel: {
+    width: "100%",
+    maxWidth: 360,
+    borderRadius: border.radius.s,
+    padding: spacing.m,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 4
+  }
+});
+function Popover({
+  children,
+  content,
+  accessibilityLabel,
+  style
+}) {
+  const { colors: colors2 } = useTheme();
+  const [isOpen, setIsOpen] = useState15(false);
+  return /* @__PURE__ */ jsxs33(View41, { style: [styles44.wrapper, style], children: [
+    React2.cloneElement(children, {
+      onPress: () => setIsOpen(true),
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? "Open popover"
+    }),
+    /* @__PURE__ */ jsx48(
+      Modal5,
+      {
+        visible: isOpen,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: () => setIsOpen(false),
+        children: /* @__PURE__ */ jsx48(
+          Pressable26,
+          {
+            style: styles44.overlay,
+            onPress: () => setIsOpen(false),
+            accessibilityRole: "button",
+            accessibilityLabel: "Close popover",
+            children: /* @__PURE__ */ jsx48(
+              Pressable26,
+              {
+                style: [styles44.panel, { backgroundColor: colors2.colorBg }],
+                onPress: () => {
+                },
+                accessibilityRole: "none",
+                accessibilityLabel,
+                children: content
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  Accordion,
+  Alert,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Button,
+  ButtonContainer,
+  ButtonGroup,
+  Calendar,
+  Card,
+  Carousel,
+  Checkbox,
+  CheckboxGroup,
+  Collapsible,
+  Combobox,
+  DescriptionList,
+  Dialog,
+  Drawer,
+  DropdownMenu,
+  FileInput,
+  FormInput,
+  IconWrapper,
+  Label,
+  Link,
+  Loading,
+  Message,
+  NotificationBanner,
+  NumberInput,
+  Pagination,
+  Popover,
+  Progress,
+  ProgressCircle,
+  Radio,
+  RadioGroup,
+  Rating,
+  SectionHeader,
+  SegmentedControl,
+  Select,
+  Separator,
+  Skeleton,
+  Slider,
+  Switch,
+  Table,
+  Tabs,
+  Textarea,
+  ThemeProvider,
+  ToastProvider,
+  Tooltip,
+  Typography,
+  animation,
+  border,
+  colors,
+  font,
+  lineHeight,
+  spacing,
+  useTheme,
+  useToast,
+  zIndex
+};