@brickslab./ui-mobile 0.1.1

package/dist/index.js

@@ -0,0 +1,1836 @@
+// src/components/ui/button/Button.tsx
+import { TouchableOpacity, Text, StyleSheet, View, ActivityIndicator } from "react-native";
+
+// src/tokens.ts
+var tokens = {
+  // Colors
+  colorBg: "#ffffff",
+  colorFg: "#0b1220",
+  colorMuted: "#52607a",
+  colorBrand: "#CC4A48",
+  colorSuccess: "#4ADE80",
+  colorWarning: "#F59E0B",
+  colorError: "#CC4A48",
+  colorInfo: "#3B82F6",
+  colorTransparent: "transparent",
+  // Badge colors
+  cSurfaceElevated: "#f8f9fa",
+  cBorder: "#e9ecef",
+  cBrandSubtle: "#fef2f2",
+  cBrandBorder: "#fecaca",
+  cSuccessSubtle: "#f0fdf4",
+  cSuccessBorder: "#bbf7d0",
+  cWarningSubtle: "#fffbeb",
+  cWarningBorder: "#fde68a",
+  // Font sizes
+  fontsize2xs: 10,
+  fontsizeXs: 12,
+  fontsizeSm: 14,
+  fontsizeMedium: 16,
+  fontsizeLg: 18,
+  // Simplified, no clamp
+  fontsizeXl: 20,
+  fontsize2xl: 24,
+  fontsize3xl: 30,
+  fontsize4xl: 36,
+  fontsize5xl: 32,
+  // Font weights
+  fontweightThin: "100",
+  fontweightNormal: "400",
+  fontweightLight: "300",
+  fontweightMedium: "500",
+  fontweightSemibold: "600",
+  fontweightBold: "700",
+  fontweightExtrabold: "800",
+  fontweightBlack: "900",
+  // Heights
+  heightXm: 1,
+  heightSm: 8,
+  heightMd: 32,
+  heightInput: 38,
+  heightLg: 42,
+  heightXl: 62,
+  height2xl: 150,
+  // Spaces
+  space1: 2,
+  space15: 4,
+  space2: 8,
+  space3: 12,
+  space4: 16,
+  space5: 20,
+  space6: 24,
+  space7: 28,
+  space8: 32,
+  space10: 40,
+  space12: 48,
+  space16: 60,
+  // Radii
+  radiusSm: 6,
+  radiusMd: 12,
+  radiusLg: 16,
+  radiusFull: 999,
+  // Other
+  borderXm: 1,
+  borderSm: 2,
+  borderMd: 4
+};
+
+// src/components/ui/button/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var variantStyles = (variant, customBg, customColor) => {
+  switch (variant) {
+    case "primary":
+      return { backgroundColor: tokens.colorBrand, borderWidth: 0 };
+    case "secondary":
+      return { backgroundColor: tokens.colorBg, borderWidth: 1, borderColor: tokens.colorMuted };
+    case "ghost":
+      return { backgroundColor: "transparent", borderWidth: 0 };
+    case "danger":
+      return { backgroundColor: tokens.colorError, borderWidth: 0 };
+    case "custom":
+      return { backgroundColor: customBg || tokens.colorBrand, borderWidth: 0 };
+    default:
+      return {};
+  }
+};
+var sizeStyles = (size) => {
+  switch (size) {
+    case "sm":
+      return { height: 28, paddingHorizontal: tokens.space3, paddingVertical: tokens.space2 };
+    case "md":
+      return { height: tokens.heightInput, paddingHorizontal: tokens.space5, paddingVertical: tokens.space3 };
+    case "lg":
+      return { height: 44, paddingHorizontal: tokens.space6, paddingVertical: tokens.space4 };
+    default:
+      return {};
+  }
+};
+var textStyles = (variant, size, customColor) => {
+  const base = { fontWeight: "600" };
+  switch (size) {
+    case "sm":
+      base.fontSize = tokens.fontsizeXs;
+      break;
+    case "md":
+      base.fontSize = tokens.fontsizeSm;
+      break;
+    case "lg":
+      base.fontSize = tokens.fontsizeMedium;
+      break;
+  }
+  switch (variant) {
+    case "primary":
+    case "danger":
+      base.color = "#FBFBFB";
+      break;
+    case "secondary":
+      base.color = tokens.colorFg;
+      break;
+    case "ghost":
+      base.color = tokens.colorFg;
+      break;
+    case "custom":
+      base.color = customColor || tokens.colorFg;
+      break;
+  }
+  return base;
+};
+function Button({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  isLoading = false,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  onPress,
+  children,
+  customBg,
+  customColor,
+  style: userStyle
+}) {
+  const isDisabled = disabled || isLoading;
+  return /* @__PURE__ */ jsx(
+    TouchableOpacity,
+    {
+      style: [
+        styles.button,
+        variantStyles(variant, customBg, customColor),
+        sizeStyles(size),
+        fullWidth && { width: "100%" },
+        isDisabled && { opacity: 0.6 },
+        userStyle
+      ],
+      onPress: isDisabled ? void 0 : onPress,
+      disabled: isDisabled,
+      activeOpacity: 0.8,
+      children: /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
+        isLoading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: textStyles(variant, size, customColor).color }) : leftIcon,
+        /* @__PURE__ */ jsx(Text, { style: [styles.text, textStyles(variant, size, customColor)], children }),
+        !isLoading && rightIcon
+      ] })
+    }
+  );
+}
+var styles = StyleSheet.create({
+  button: {
+    borderRadius: tokens.radiusSm,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row"
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: tokens.space2
+  },
+  text: {
+    textAlign: "center"
+  }
+});
+
+// src/components/ui/input/Input.tsx
+import { View as View2, TextInput, Text as Text2, StyleSheet as StyleSheet2 } from "react-native";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var sizeStyles2 = (size) => {
+  switch (size) {
+    case "sm":
+      return { height: 28, paddingHorizontal: tokens.space3, fontSize: tokens.fontsizeXs };
+    case "md":
+      return { height: tokens.heightInput, paddingHorizontal: tokens.space4, fontSize: tokens.fontsizeSm };
+    case "lg":
+      return { height: 44, paddingHorizontal: tokens.space5, fontSize: tokens.fontsizeMedium };
+    default:
+      return {};
+  }
+};
+function Input({
+  value,
+  onChangeText,
+  keyboardType = "default",
+  label,
+  placeholder,
+  helperText,
+  errorText,
+  disabled = false,
+  editable = true,
+  leftIcon,
+  rightIcon,
+  size = "md",
+  fullWidth = false,
+  style: userStyle,
+  inputStyle: userInputStyle
+}) {
+  const hasError = Boolean(errorText);
+  const isEditable = editable && !disabled;
+  const config = sizeStyles2(size);
+  const containerStyle = [
+    styles2.container,
+    fullWidth && { width: "100%" },
+    !isEditable && { opacity: 0.5 },
+    userStyle
+  ];
+  const inputContainerStyle = [
+    styles2.inputContainer,
+    { borderColor: hasError ? tokens.colorError : tokens.colorMuted },
+    !isEditable && { backgroundColor: tokens.colorMuted }
+  ];
+  const textInputStyle = [
+    styles2.input,
+    config,
+    { color: tokens.colorFg },
+    userInputStyle
+  ];
+  return /* @__PURE__ */ jsxs2(View2, { style: containerStyle, children: [
+    label && /* @__PURE__ */ jsx2(Text2, { style: styles2.label, children: label }),
+    /* @__PURE__ */ jsxs2(View2, { style: inputContainerStyle, children: [
+      leftIcon && /* @__PURE__ */ jsx2(View2, { style: styles2.leftIcon, children: leftIcon }),
+      /* @__PURE__ */ jsx2(
+        TextInput,
+        {
+          value,
+          onChangeText,
+          placeholder,
+          placeholderTextColor: tokens.colorMuted,
+          keyboardType,
+          editable: isEditable,
+          style: textInputStyle
+        }
+      ),
+      rightIcon && /* @__PURE__ */ jsx2(View2, { style: styles2.rightIcon, children: rightIcon })
+    ] }),
+    (errorText || helperText) && /* @__PURE__ */ jsx2(Text2, { style: [styles2.helper, hasError && { color: tokens.colorError }], children: errorText ?? helperText })
+  ] });
+}
+var styles2 = StyleSheet2.create({
+  container: {
+    marginBottom: tokens.space2
+  },
+  label: {
+    marginBottom: tokens.space1,
+    fontSize: tokens.fontsizeSm,
+    fontWeight: tokens.fontweightMedium,
+    color: tokens.colorFg
+  },
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: tokens.radiusSm,
+    backgroundColor: tokens.colorBg
+  },
+  input: {
+    flex: 1,
+    color: tokens.colorFg
+  },
+  leftIcon: {
+    marginLeft: tokens.space3
+  },
+  rightIcon: {
+    marginRight: tokens.space3
+  },
+  helper: {
+    marginTop: tokens.space1,
+    fontSize: tokens.fontsizeXs,
+    color: tokens.colorMuted,
+    lineHeight: 14
+  }
+});
+
+// src/components/ui/checkbox/Checkbox.tsx
+import { useState } from "react";
+import { TouchableOpacity as TouchableOpacity2, View as View3, Text as Text3, StyleSheet as StyleSheet3 } from "react-native";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var sizeMap = {
+  sm: 14,
+  md: 16,
+  lg: 20
+};
+var CheckIcon = () => /* @__PURE__ */ jsx3(Text3, { style: styles3.checkmark, children: "\u2713" });
+function Checkbox({
+  checked,
+  defaultChecked,
+  onValueChange,
+  label,
+  disabled = false,
+  size = "md",
+  style: userStyle
+}) {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked || false);
+  const isChecked = checked !== void 0 ? checked : internalChecked;
+  const handlePress = () => {
+    if (disabled) return;
+    const newChecked = !isChecked;
+    if (checked === void 0) {
+      setInternalChecked(newChecked);
+    }
+    onValueChange?.(newChecked);
+  };
+  const px = sizeMap[size];
+  return /* @__PURE__ */ jsxs3(
+    TouchableOpacity2,
+    {
+      style: [styles3.container, userStyle],
+      onPress: handlePress,
+      disabled,
+      activeOpacity: 0.8,
+      children: [
+        /* @__PURE__ */ jsx3(
+          View3,
+          {
+            style: [
+              styles3.checkbox,
+              { width: px, height: px },
+              isChecked && styles3.checked,
+              disabled && styles3.disabled
+            ],
+            children: isChecked && /* @__PURE__ */ jsx3(CheckIcon, {})
+          }
+        ),
+        label && /* @__PURE__ */ jsx3(Text3, { style: [styles3.label, disabled && styles3.disabledText], children: label })
+      ]
+    }
+  );
+}
+var styles3 = StyleSheet3.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: tokens.space2
+  },
+  checkbox: {
+    borderWidth: 1.5,
+    borderColor: tokens.colorMuted,
+    borderRadius: 3,
+    backgroundColor: tokens.colorBg,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checked: {
+    backgroundColor: tokens.colorBrand,
+    borderColor: tokens.colorBrand
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  checkmark: {
+    color: "#FBFBFB",
+    fontSize: 10,
+    fontWeight: "bold"
+  },
+  label: {
+    fontSize: tokens.fontsizeSm,
+    color: tokens.colorFg,
+    lineHeight: 14
+  },
+  disabledText: {
+    opacity: 0.45
+  }
+});
+
+// src/components/ui/radio/Radio.tsx
+import React2 from "react";
+import { TouchableOpacity as TouchableOpacity3, View as View4, Text as Text4, StyleSheet as StyleSheet4 } from "react-native";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var sizeMap2 = {
+  sm: 14,
+  md: 16,
+  lg: 20
+};
+function Radio({
+  value,
+  checked,
+  onChange,
+  label,
+  name,
+  disabled = false,
+  size = "md",
+  style: userStyle
+}) {
+  const handlePress = () => {
+    if (disabled) return;
+    onChange?.(value);
+  };
+  const px = sizeMap2[size];
+  return /* @__PURE__ */ jsxs4(
+    TouchableOpacity3,
+    {
+      style: [styles4.container, userStyle],
+      onPress: handlePress,
+      disabled,
+      activeOpacity: 0.8,
+      children: [
+        /* @__PURE__ */ jsx4(
+          View4,
+          {
+            style: [
+              styles4.radio,
+              { width: px, height: px },
+              checked && styles4.checked,
+              disabled && styles4.disabled
+            ],
+            children: checked && /* @__PURE__ */ jsx4(View4, { style: styles4.dot })
+          }
+        ),
+        label && /* @__PURE__ */ jsx4(Text4, { style: [styles4.label, disabled && styles4.disabledText], children: label })
+      ]
+    }
+  );
+}
+function RadioGroup({
+  name,
+  value,
+  onChange,
+  children,
+  direction = "vertical",
+  gap = 10,
+  style: userStyle
+}) {
+  const cloned = React2.Children.map(children, (child) => {
+    if (!React2.isValidElement(child)) return child;
+    const childProps = child.props;
+    return React2.cloneElement(child, {
+      name,
+      ...value !== void 0 && { checked: childProps.value === value },
+      ...onChange && { onChange }
+    });
+  });
+  return /* @__PURE__ */ jsx4(
+    View4,
+    {
+      style: [
+        styles4.group,
+        { flexDirection: direction === "horizontal" ? "row" : "column", gap },
+        userStyle
+      ],
+      children: cloned
+    }
+  );
+}
+var styles4 = StyleSheet4.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: tokens.space2
+  },
+  radio: {
+    borderWidth: 1.5,
+    borderColor: tokens.colorMuted,
+    borderRadius: 50,
+    backgroundColor: tokens.colorBg,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checked: {
+    borderColor: tokens.colorBrand
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: tokens.colorBrand
+  },
+  label: {
+    fontSize: tokens.fontsizeSm,
+    color: tokens.colorFg,
+    lineHeight: 14
+  },
+  disabledText: {
+    opacity: 0.45
+  },
+  group: {
+    flexWrap: "wrap"
+  }
+});
+
+// src/components/ui/toggle_switch/ToggleSwitch.tsx
+import { TouchableOpacity as TouchableOpacity4, View as View5, Text as Text5, StyleSheet as StyleSheet5 } from "react-native";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ToggleSwitch({
+  checked,
+  onValueChange,
+  label,
+  disabled = false,
+  style: userStyle
+}) {
+  const handlePress = () => {
+    if (disabled) return;
+    onValueChange(!checked);
+  };
+  return /* @__PURE__ */ jsxs5(
+    TouchableOpacity4,
+    {
+      style: [styles5.container, userStyle],
+      onPress: handlePress,
+      disabled,
+      activeOpacity: 0.8,
+      children: [
+        /* @__PURE__ */ jsx5(
+          View5,
+          {
+            style: [
+              styles5.switch,
+              { backgroundColor: checked ? tokens.colorBrand : tokens.colorMuted },
+              disabled && styles5.disabled
+            ],
+            children: /* @__PURE__ */ jsx5(
+              View5,
+              {
+                style: [
+                  styles5.thumb,
+                  { transform: [{ translateX: checked ? 18 : 0 }] }
+                ]
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx5(Text5, { style: [styles5.label, disabled && styles5.disabledText], children: label })
+      ]
+    }
+  );
+}
+var styles5 = StyleSheet5.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: tokens.space3
+  },
+  switch: {
+    width: 40,
+    height: 22,
+    borderRadius: 11,
+    justifyContent: "center",
+    paddingHorizontal: 3
+  },
+  thumb: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: tokens.colorBg,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 1,
+    elevation: 2
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  label: {
+    fontSize: tokens.fontsizeSm,
+    color: tokens.colorFg
+  },
+  disabledText: {
+    opacity: 0.5
+  }
+});
+
+// src/components/ui/badge/Badge.tsx
+import { View as View6, Text as Text6, StyleSheet as StyleSheet6 } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var variantMap = {
+  default: {
+    bg: tokens.cSurfaceElevated,
+    border: tokens.cBorder,
+    color: tokens.colorFg
+  },
+  info: {
+    bg: tokens.cBrandSubtle,
+    border: tokens.cBrandBorder,
+    color: tokens.colorBrand
+  },
+  success: {
+    bg: tokens.cSuccessSubtle,
+    border: tokens.cSuccessBorder,
+    color: tokens.colorSuccess
+  },
+  warning: {
+    bg: tokens.cWarningSubtle,
+    border: tokens.cWarningBorder,
+    color: tokens.colorWarning
+  },
+  error: {
+    bg: tokens.cBrandSubtle,
+    border: tokens.cBrandBorder,
+    color: tokens.colorError
+  }
+};
+var sizeMap3 = {
+  sm: { fontSize: tokens.fontsize2xs, paddingHorizontal: 6, paddingVertical: 1, dotSize: 6 },
+  md: { fontSize: tokens.fontsizeXs, paddingHorizontal: 8, paddingVertical: 2, dotSize: 8 },
+  lg: { fontSize: tokens.fontsizeXs, paddingHorizontal: 10, paddingVertical: 3, dotSize: 10 }
+};
+function Badge({
+  variant = "default",
+  size = "md",
+  children,
+  dot = false,
+  outlined = false,
+  max,
+  style: userStyle,
+  textStyle: userTextStyle
+}) {
+  const { bg, border, color } = variantMap[variant];
+  const { fontSize, paddingHorizontal, paddingVertical, dotSize } = sizeMap3[size];
+  let content = children;
+  if (!dot && max !== void 0 && typeof children === "number" && children > max) {
+    content = `${max}+`;
+  }
+  if (dot) {
+    return /* @__PURE__ */ jsx6(
+      View6,
+      {
+        style: [
+          styles6.dot,
+          { width: dotSize, height: dotSize, backgroundColor: outlined ? "transparent" : color, borderColor: color },
+          userStyle
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6(
+    View6,
+    {
+      style: [
+        styles6.badge,
+        {
+          paddingHorizontal,
+          paddingVertical,
+          backgroundColor: outlined ? "transparent" : bg,
+          borderColor: border
+        },
+        userStyle
+      ],
+      children: /* @__PURE__ */ jsx6(
+        Text6,
+        {
+          style: [
+            styles6.text,
+            { fontSize, color },
+            userTextStyle
+          ],
+          children: content
+        }
+      )
+    }
+  );
+}
+var styles6 = StyleSheet6.create({
+  badge: {
+    borderWidth: 1,
+    borderRadius: tokens.radiusFull,
+    alignSelf: "flex-start"
+  },
+  text: {
+    fontWeight: "600",
+    textAlign: "center"
+  },
+  dot: {
+    borderWidth: 1.5,
+    borderRadius: 50
+  }
+});
+
+// src/components/ui/tabs/Tabs.tsx
+import { ScrollView, TouchableOpacity as TouchableOpacity5, Text as Text7, View as View7, StyleSheet as StyleSheet7 } from "react-native";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var sizeMap4 = {
+  sm: { fontSize: tokens.fontsizeXs, paddingHorizontal: tokens.space3, paddingVertical: tokens.space2 },
+  md: { fontSize: tokens.fontsizeSm, paddingHorizontal: tokens.space4, paddingVertical: tokens.space2 },
+  lg: { fontSize: tokens.fontsizeMedium, paddingHorizontal: tokens.space5, paddingVertical: tokens.space3 }
+};
+var getVariantStyles = (variant) => {
+  switch (variant) {
+    case "underline":
+      return {
+        container: { borderBottomWidth: 1, borderBottomColor: tokens.cBorder },
+        tab: { borderBottomWidth: 2, borderBottomColor: "transparent" },
+        activeTab: { borderBottomColor: tokens.colorBrand }
+      };
+    case "pills":
+      return {
+        container: {},
+        tab: { borderRadius: tokens.radiusSm },
+        activeTab: { backgroundColor: tokens.cBrandSubtle }
+      };
+    case "boxed":
+      return {
+        container: { backgroundColor: tokens.cSurfaceElevated, padding: 4, borderRadius: tokens.radiusMd },
+        tab: { borderRadius: tokens.radiusSm },
+        activeTab: { backgroundColor: tokens.colorBg, shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.08, shadowRadius: 3, elevation: 1 }
+      };
+    default:
+      return {};
+  }
+};
+function Tabs({
+  tabs,
+  value,
+  onChange,
+  variant = "underline",
+  size = "md",
+  fullWidth = false,
+  style: userStyle
+}) {
+  const config = sizeMap4[size];
+  const variantStyles3 = getVariantStyles(variant);
+  return /* @__PURE__ */ jsx7(
+    ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      style: [styles7.container, variantStyles3.container, userStyle],
+      contentContainerStyle: fullWidth ? { flex: 1 } : void 0,
+      children: tabs.map((tab) => {
+        const isActive = tab.value === value;
+        return /* @__PURE__ */ jsxs6(
+          TouchableOpacity5,
+          {
+            style: [
+              styles7.tab,
+              config,
+              variantStyles3.tab,
+              isActive && variantStyles3.activeTab,
+              fullWidth && { flex: 1 },
+              tab.disabled && styles7.disabled
+            ],
+            onPress: () => !tab.disabled && onChange(tab.value),
+            disabled: tab.disabled,
+            activeOpacity: 0.8,
+            children: [
+              tab.icon,
+              /* @__PURE__ */ jsx7(Text7, { style: [styles7.label, { fontSize: config.fontSize, color: isActive ? tokens.colorFg : tokens.colorMuted }], children: tab.label })
+            ]
+          },
+          tab.value
+        );
+      })
+    }
+  );
+}
+function TabPanel({ value, activeValue, children, style: userStyle }) {
+  if (value !== activeValue) return null;
+  return /* @__PURE__ */ jsx7(View7, { style: userStyle, children });
+}
+var styles7 = StyleSheet7.create({
+  container: {
+    flexDirection: "row"
+  },
+  tab: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginRight: 2
+  },
+  label: {
+    fontWeight: "500"
+  },
+  disabled: {
+    opacity: 0.4
+  }
+});
+
+// src/components/ui/alert/Alert.tsx
+import { View as View8, Text as Text8, TouchableOpacity as TouchableOpacity6, StyleSheet as StyleSheet8 } from "react-native";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var variantMap2 = {
+  info: {
+    bg: tokens.cBrandSubtle,
+    border: tokens.cBrandBorder,
+    accent: tokens.colorBrand,
+    icon: "\u2139\uFE0F"
+  },
+  success: {
+    bg: tokens.cSuccessSubtle,
+    border: tokens.cSuccessBorder,
+    accent: tokens.colorSuccess,
+    icon: "\u2705"
+  },
+  warning: {
+    bg: tokens.cWarningSubtle,
+    border: tokens.cWarningBorder,
+    accent: tokens.colorWarning,
+    icon: "\u26A0\uFE0F"
+  },
+  error: {
+    bg: tokens.cBrandSubtle,
+    border: tokens.cBrandBorder,
+    accent: tokens.colorError,
+    icon: "\u274C"
+  }
+};
+function Alert({
+  variant = "info",
+  title,
+  children,
+  dismissible = false,
+  onDismiss,
+  icon = true,
+  fullWidth = false,
+  style: userStyle
+}) {
+  const config = variantMap2[variant];
+  return /* @__PURE__ */ jsxs7(
+    View8,
+    {
+      style: [
+        styles8.alert,
+        { backgroundColor: config.bg, borderColor: config.border },
+        fullWidth && { width: "100%" },
+        userStyle
+      ],
+      children: [
+        icon && /* @__PURE__ */ jsx8(Text8, { style: styles8.icon, children: config.icon }),
+        /* @__PURE__ */ jsxs7(View8, { style: styles8.content, children: [
+          title && /* @__PURE__ */ jsx8(Text8, { style: styles8.title, children: title }),
+          /* @__PURE__ */ jsx8(Text8, { style: styles8.message, children })
+        ] }),
+        dismissible && onDismiss && /* @__PURE__ */ jsx8(TouchableOpacity6, { onPress: onDismiss, style: styles8.dismiss, children: /* @__PURE__ */ jsx8(Text8, { style: styles8.dismissText, children: "\u2715" }) })
+      ]
+    }
+  );
+}
+var styles8 = StyleSheet8.create({
+  alert: {
+    borderWidth: 1,
+    borderRadius: tokens.radiusMd,
+    padding: tokens.space3,
+    flexDirection: "row",
+    alignItems: "flex-start"
+  },
+  icon: {
+    fontSize: 16,
+    marginRight: tokens.space3,
+    marginTop: 2
+  },
+  content: {
+    flex: 1
+  },
+  title: {
+    fontWeight: "600",
+    fontSize: tokens.fontsizeSm,
+    color: tokens.colorFg,
+    marginBottom: 4
+  },
+  message: {
+    fontSize: tokens.fontsizeSm,
+    color: tokens.colorFg,
+    lineHeight: 20
+  },
+  dismiss: {
+    padding: tokens.space1,
+    borderRadius: tokens.radiusSm,
+    marginLeft: tokens.space3
+  },
+  dismissText: {
+    fontSize: 14,
+    color: tokens.colorFg,
+    opacity: 0.6
+  }
+});
+
+// src/components/ui/progress_bar/ProgressBar.tsx
+import { useEffect, useRef } from "react";
+import { View as View9, Text as Text9, Animated as Animated2, StyleSheet as StyleSheet9 } from "react-native";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var colorMap = {
+  brand: tokens.colorBrand,
+  green: tokens.colorSuccess,
+  amber: tokens.colorWarning,
+  red: tokens.colorError
+};
+var trackColorMap = {
+  brand: tokens.cBrandSubtle,
+  green: tokens.cSuccessSubtle,
+  amber: tokens.cWarningSubtle,
+  red: tokens.cBrandSubtle
+};
+var sizeMap5 = {
+  sm: 4,
+  md: 8
+};
+function ProgressBar({
+  value,
+  max = 100,
+  label,
+  colorScheme = "brand",
+  size = "md",
+  showValue = false,
+  animate = true,
+  duration = 800,
+  style: userStyle
+}) {
+  const clamped = Math.min(Math.max(value, 0), max);
+  const percent = clamped / max * 100;
+  const barColor = colorMap[colorScheme];
+  const trackColor = trackColorMap[colorScheme];
+  const height = sizeMap5[size];
+  const animatedWidth = useRef(new Animated2.Value(0)).current;
+  useEffect(() => {
+    if (animate) {
+      Animated2.timing(animatedWidth, {
+        toValue: percent,
+        duration,
+        useNativeDriver: false
+      }).start();
+    } else {
+      animatedWidth.setValue(percent);
+    }
+  }, [percent, animate, duration, animatedWidth]);
+  const widthInterpolation = animatedWidth.interpolate({
+    inputRange: [0, 100],
+    outputRange: ["0%", "100%"]
+  });
+  return /* @__PURE__ */ jsxs8(View9, { style: [styles9.container, userStyle], children: [
+    (label || showValue) && /* @__PURE__ */ jsxs8(View9, { style: styles9.header, children: [
+      label && /* @__PURE__ */ jsx9(Text9, { style: styles9.label, children: label }),
+      showValue && /* @__PURE__ */ jsxs8(Text9, { style: styles9.value, children: [
+        Math.round(percent),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9(
+      View9,
+      {
+        style: [styles9.track, { height, backgroundColor: trackColor }],
+        accessible: true,
+        accessibilityRole: "progressbar",
+        accessibilityValue: { now: clamped, min: 0, max },
+        accessibilityLabel: label,
+        children: /* @__PURE__ */ jsx9(
+          Animated2.View,
+          {
+            style: [
+              styles9.bar,
+              { height, backgroundColor: barColor, width: widthInterpolation }
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+var styles9 = StyleSheet9.create({
+  container: {
+    gap: tokens.space1
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  label: {
+    fontSize: tokens.fontsizeXs,
+    color: tokens.colorMuted,
+    fontWeight: "500"
+  },
+  value: {
+    fontSize: tokens.fontsizeXs,
+    color: tokens.colorMuted,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"]
+  },
+  track: {
+    width: "100%",
+    borderRadius: tokens.radiusFull,
+    overflow: "hidden"
+  },
+  bar: {
+    borderRadius: tokens.radiusFull
+  }
+});
+
+// src/components/ui/spinner/Spinner.tsx
+import { ActivityIndicator as ActivityIndicator2, View as View10, StyleSheet as StyleSheet10 } from "react-native";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var variantMap3 = {
+  default: tokens.colorMuted,
+  brand: tokens.colorBrand,
+  success: tokens.colorSuccess,
+  warning: tokens.colorWarning,
+  error: tokens.colorError,
+  white: "#FBFBFB"
+};
+function Spinner({
+  size = "large",
+  variant = "brand",
+  label = "Loading...",
+  style: userStyle
+}) {
+  const color = variantMap3[variant];
+  return /* @__PURE__ */ jsx10(View10, { style: [styles10.container, userStyle], accessible: true, accessibilityRole: "progressbar", accessibilityLabel: label, children: /* @__PURE__ */ jsx10(ActivityIndicator2, { size, color }) });
+}
+var styles10 = StyleSheet10.create({
+  container: {
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+
+// src/components/ui/select/Select.tsx
+import { useState as useState2 } from "react";
+import { View as View11, Text as Text10, TouchableOpacity as TouchableOpacity7, Modal, FlatList, StyleSheet as StyleSheet11 } from "react-native";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var sizeStyles3 = (size) => {
+  switch (size) {
+    case "sm":
+      return { height: 28, paddingHorizontal: tokens.space3, fontSize: tokens.fontsizeXs };
+    case "md":
+      return { height: tokens.heightInput, paddingHorizontal: tokens.space4, fontSize: tokens.fontsizeSm };
+    case "lg":
+      return { height: 44, paddingHorizontal: tokens.space5, fontSize: tokens.fontsizeMedium };
+    default:
+      return {};
+  }
+};
+function Select({
+  value,
+  onChange,
+  options,
+  label,
+  placeholder,
+  helperText,
+  errorText,
+  disabled = false,
+  size = "md",
+  fullWidth = false,
+  style: userStyle
+}) {
+  const [modalVisible, setModalVisible] = useState2(false);
+  const hasError = Boolean(errorText);
+  const config = sizeStyles3(size);
+  const selectedOption = options.find((opt) => opt.value === value);
+  const displayText = selectedOption ? selectedOption.label : placeholder || "Select...";
+  const handleSelect = (option) => {
+    if (!option.disabled) {
+      onChange(option.value);
+      setModalVisible(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs9(View11, { style: [styles11.container, fullWidth && { width: "100%" }, userStyle], children: [
+    label && /* @__PURE__ */ jsx11(Text10, { style: styles11.label, children: label }),
+    /* @__PURE__ */ jsxs9(
+      TouchableOpacity7,
+      {
+        style: [
+          styles11.select,
+          config,
+          hasError && { borderColor: tokens.colorError },
+          disabled && { opacity: 0.5 }
+        ],
+        onPress: () => !disabled && setModalVisible(true),
+        disabled,
+        activeOpacity: 0.8,
+        children: [
+          /* @__PURE__ */ jsx11(Text10, { style: [styles11.selectText, { fontSize: config.fontSize, color: selectedOption ? tokens.colorFg : tokens.colorMuted }], children: displayText }),
+          /* @__PURE__ */ jsx11(Text10, { style: styles11.arrow, children: "\u25BC" })
+        ]
+      }
+    ),
+    (errorText || helperText) && /* @__PURE__ */ jsx11(Text10, { style: [styles11.helper, hasError && { color: tokens.colorError }], children: errorText ?? helperText }),
+    /* @__PURE__ */ jsx11(
+      Modal,
+      {
+        visible: modalVisible,
+        transparent: true,
+        animationType: "slide",
+        onRequestClose: () => setModalVisible(false),
+        children: /* @__PURE__ */ jsx11(View11, { style: styles11.modalOverlay, children: /* @__PURE__ */ jsxs9(View11, { style: styles11.modalContent, children: [
+          /* @__PURE__ */ jsx11(
+            FlatList,
+            {
+              data: options,
+              keyExtractor: (item) => item.value,
+              renderItem: ({ item }) => /* @__PURE__ */ jsx11(
+                TouchableOpacity7,
+                {
+                  style: [styles11.option, item.disabled && styles11.disabledOption],
+                  onPress: () => handleSelect(item),
+                  disabled: item.disabled,
+                  children: /* @__PURE__ */ jsx11(Text10, { style: [styles11.optionText, item.disabled && styles11.disabledText], children: item.label })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx11(TouchableOpacity7, { style: styles11.closeButton, onPress: () => setModalVisible(false), children: /* @__PURE__ */ jsx11(Text10, { style: styles11.closeText, children: "Close" }) })
+        ] }) })
+      }
+    )
+  ] });
+}
+var styles11 = StyleSheet11.create({
+  container: {
+    marginBottom: tokens.space2
+  },
+  label: {
+    marginBottom: tokens.space1,
+    fontSize: tokens.fontsizeSm,
+    fontWeight: "500",
+    color: tokens.colorFg
+  },
+  select: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderWidth: 1,
+    borderColor: tokens.cBorder,
+    borderRadius: tokens.radiusSm,
+    backgroundColor: tokens.colorBg
+  },
+  selectText: {
+    flex: 1,
+    color: tokens.colorFg
+  },
+  arrow: {
+    marginRight: tokens.space3,
+    fontSize: 12,
+    color: tokens.colorMuted
+  },
+  helper: {
+    marginTop: tokens.space1,
+    fontSize: tokens.fontsizeXs,
+    color: tokens.colorMuted,
+    lineHeight: 14
+  },
+  modalOverlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+    backgroundColor: "rgba(0,0,0,0.5)"
+  },
+  modalContent: {
+    backgroundColor: tokens.colorBg,
+    borderTopLeftRadius: tokens.radiusMd,
+    borderTopRightRadius: tokens.radiusMd,
+    maxHeight: "50%"
+  },
+  option: {
+    padding: tokens.space4,
+    borderBottomWidth: 1,
+    borderBottomColor: tokens.cBorder
+  },
+  optionText: {
+    fontSize: tokens.fontsizeSm,
+    color: tokens.colorFg
+  },
+  disabledOption: {
+    opacity: 0.5
+  },
+  disabledText: {
+    color: tokens.colorMuted
+  },
+  closeButton: {
+    padding: tokens.space4,
+    alignItems: "center",
+    backgroundColor: tokens.cSurfaceElevated
+  },
+  closeText: {
+    fontSize: tokens.fontsizeSm,
+    color: tokens.colorBrand,
+    fontWeight: "600"
+  }
+});
+
+// src/components/ui/textarea/Textarea.tsx
+import { View as View12, Text as Text11, TextInput as TextInput2, StyleSheet as StyleSheet12 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var sizeStyles4 = (size) => {
+  switch (size) {
+    case "sm":
+      return { paddingHorizontal: tokens.space3, paddingVertical: tokens.space2, fontSize: tokens.fontsizeXs };
+    case "md":
+      return { paddingHorizontal: tokens.space4, paddingVertical: tokens.space3, fontSize: tokens.fontsizeSm };
+    case "lg":
+      return { paddingHorizontal: tokens.space5, paddingVertical: tokens.space4, fontSize: tokens.fontsizeMedium };
+    default:
+      return {};
+  }
+};
+function Textarea({
+  value,
+  onChangeText,
+  label,
+  placeholder,
+  helperText,
+  errorText,
+  disabled = false,
+  editable = true,
+  size = "md",
+  fullWidth = false,
+  numberOfLines = 4,
+  maxLength,
+  style: userStyle,
+  inputStyle: userInputStyle
+}) {
+  const hasError = Boolean(errorText);
+  const isEditable = editable && !disabled;
+  const config = sizeStyles4(size);
+  const isAtLimit = maxLength !== void 0 && value.length >= maxLength;
+  return /* @__PURE__ */ jsxs10(View12, { style: [styles12.container, fullWidth && { width: "100%" }, userStyle], children: [
+    label && /* @__PURE__ */ jsx12(Text11, { style: styles12.label, children: label }),
+    /* @__PURE__ */ jsx12(
+      TextInput2,
+      {
+        value,
+        onChangeText,
+        placeholder,
+        placeholderTextColor: tokens.colorMuted,
+        multiline: true,
+        numberOfLines,
+        editable: isEditable,
+        maxLength,
+        style: [
+          styles12.input,
+          config,
+          { borderColor: hasError ? tokens.colorError : tokens.cBorder },
+          !isEditable && { backgroundColor: tokens.colorMuted },
+          userInputStyle
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs10(View12, { style: styles12.footer, children: [
+      (errorText || helperText) && /* @__PURE__ */ jsx12(Text11, { style: [styles12.helper, hasError && { color: tokens.colorError }], children: errorText ?? helperText }),
+      maxLength !== void 0 && /* @__PURE__ */ jsxs10(Text11, { style: [styles12.counter, isAtLimit && { color: tokens.colorError }], children: [
+        value.length,
+        "/",
+        maxLength
+      ] })
+    ] })
+  ] });
+}
+var styles12 = StyleSheet12.create({
+  container: {
+    marginBottom: tokens.space2
+  },
+  label: {
+    marginBottom: tokens.space1,
+    fontSize: tokens.fontsizeSm,
+    fontWeight: "500",
+    color: tokens.colorFg
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: tokens.radiusSm,
+    backgroundColor: tokens.colorBg,
+    color: tokens.colorFg,
+    textAlignVertical: "top",
+    minHeight: 80
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginTop: tokens.space1
+  },
+  helper: {
+    flex: 1,
+    fontSize: tokens.fontsizeXs,
+    color: tokens.colorMuted,
+    lineHeight: 14
+  },
+  counter: {
+    fontSize: tokens.fontsizeXs,
+    color: tokens.colorMuted,
+    marginLeft: tokens.space2
+  }
+});
+
+// src/components/ui/accordion/Accordion.tsx
+import React5, { useState as useState3, useRef as useRef2 } from "react";
+import { View as View13, TouchableOpacity as TouchableOpacity8, Text as Text12, Animated as Animated3, StyleSheet as StyleSheet13 } from "react-native";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var sizeMap6 = {
+  sm: { paddingVertical: 8, paddingHorizontal: 12, fontSize: tokens.fontsizeXs },
+  md: { paddingVertical: 12, paddingHorizontal: 16, fontSize: tokens.fontsizeSm },
+  lg: { paddingVertical: 16, paddingHorizontal: 20, fontSize: tokens.fontsizeMedium }
+};
+var getVariantStyles2 = (variant) => {
+  switch (variant) {
+    case "bordered":
+      return {
+        container: { borderWidth: 1, borderColor: tokens.cBorder, borderRadius: tokens.radiusMd, overflow: "hidden" },
+        item: {},
+        separator: { borderTopWidth: 1, borderTopColor: tokens.cBorder }
+      };
+    case "separated":
+      return {
+        container: { gap: 8 },
+        item: { borderWidth: 1, borderColor: tokens.cBorder, borderRadius: tokens.radiusMd, overflow: "hidden" },
+        separator: {}
+      };
+    case "ghost":
+      return {
+        container: {},
+        item: {},
+        separator: { borderTopWidth: 1, borderTopColor: tokens.cBorder }
+      };
+    default:
+      return {
+        container: {},
+        item: {},
+        separator: {}
+      };
+  }
+};
+function Accordion({
+  children,
+  variant = "bordered",
+  size = "md",
+  style: userStyle
+}) {
+  const variantStyles3 = getVariantStyles2(variant);
+  return /* @__PURE__ */ jsx13(View13, { style: [variantStyles3.container, userStyle], children: React5.Children.map(children, (child, index) => /* @__PURE__ */ jsxs11(View13, { children: [
+    index > 0 && /* @__PURE__ */ jsx13(View13, { style: variantStyles3.separator }),
+    child
+  ] }, index)) });
+}
+function AccordionItem({
+  title,
+  children,
+  open: controlledOpen,
+  onToggle,
+  disabled = false,
+  icon,
+  style: userStyle
+}) {
+  const [internalOpen, setInternalOpen] = useState3(false);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const animatedHeight = useRef2(new Animated3.Value(0)).current;
+  const toggle = () => {
+    if (disabled) return;
+    const newOpen = !isOpen;
+    if (isControlled) {
+      onToggle?.(newOpen);
+    } else {
+      setInternalOpen(newOpen);
+    }
+  };
+  React5.useEffect(() => {
+    Animated3.timing(animatedHeight, {
+      toValue: isOpen ? 1 : 0,
+      duration: 200,
+      useNativeDriver: false
+    }).start();
+  }, [isOpen, animatedHeight]);
+  const contentHeight = animatedHeight.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 200]
+    // Adjust based on content
+  });
+  return /* @__PURE__ */ jsxs11(View13, { style: [styles13.item, userStyle], children: [
+    /* @__PURE__ */ jsxs11(
+      TouchableOpacity8,
+      {
+        style: [styles13.header, disabled && styles13.disabled],
+        onPress: toggle,
+        disabled,
+        activeOpacity: 0.8,
+        children: [
+          /* @__PURE__ */ jsxs11(View13, { style: styles13.titleContainer, children: [
+            icon && /* @__PURE__ */ jsx13(View13, { style: styles13.icon, children: icon }),
+            /* @__PURE__ */ jsx13(Text12, { style: [styles13.title, disabled && styles13.disabledText], children: title })
+          ] }),
+          /* @__PURE__ */ jsx13(Text12, { style: [styles13.arrow, { transform: [{ rotate: isOpen ? "180deg" : "0deg" }] }], children: "\u25BC" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx13(Animated3.View, { style: [styles13.content, { height: contentHeight }], children: /* @__PURE__ */ jsx13(View13, { style: styles13.contentInner, children }) })
+  ] });
+}
+var styles13 = StyleSheet13.create({
+  item: {
+    overflow: "hidden"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: "transparent"
+  },
+  titleContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1
+  },
+  icon: {
+    marginRight: 8
+  },
+  title: {
+    fontSize: tokens.fontsizeSm,
+    fontWeight: "500",
+    color: tokens.colorFg,
+    flex: 1
+  },
+  arrow: {
+    fontSize: 12,
+    color: tokens.colorMuted
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  disabledText: {
+    opacity: 0.45
+  },
+  content: {
+    overflow: "hidden"
+  },
+  contentInner: {
+    paddingHorizontal: 16,
+    paddingBottom: 12
+  }
+});
+
+// src/components/ui/callout/Callout.tsx
+import { View as View14, Text as Text13, StyleSheet as StyleSheet14 } from "react-native";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var variantMap4 = {
+  info: {
+    bg: tokens.cBrandSubtle,
+    border: tokens.cBrandBorder,
+    accent: tokens.colorBrand,
+    icon: "\u2139\uFE0F",
+    defaultTitle: "Info"
+  },
+  warning: {
+    bg: tokens.cWarningSubtle,
+    border: tokens.cWarningBorder,
+    accent: tokens.colorWarning,
+    icon: "\u26A0\uFE0F",
+    defaultTitle: "Attention"
+  },
+  tip: {
+    bg: tokens.cSuccessSubtle,
+    border: tokens.cSuccessBorder,
+    accent: tokens.colorSuccess,
+    icon: "\u{1F4A1}",
+    defaultTitle: "Astuce"
+  },
+  danger: {
+    bg: tokens.cBrandSubtle,
+    border: tokens.cBrandBorder,
+    accent: tokens.colorError,
+    icon: "\u{1F6A8}",
+    defaultTitle: "Danger"
+  }
+};
+function Callout({
+  variant = "info",
+  title,
+  children,
+  style: userStyle
+}) {
+  const config = variantMap4[variant];
+  const displayTitle = title ?? config.defaultTitle;
+  return /* @__PURE__ */ jsxs12(View14, { style: [styles14.callout, { backgroundColor: config.bg, borderColor: config.border }, userStyle], children: [
+    /* @__PURE__ */ jsx14(Text13, { style: styles14.icon, children: config.icon }),
+    /* @__PURE__ */ jsxs12(View14, { style: styles14.content, children: [
+      /* @__PURE__ */ jsx14(Text13, { style: [styles14.title, { color: config.accent, marginBottom: children ? tokens.space1 : 0 }], children: displayTitle }),
+      children && /* @__PURE__ */ jsx14(Text13, { style: styles14.body, children })
+    ] })
+  ] });
+}
+var styles14 = StyleSheet14.create({
+  callout: {
+    borderWidth: 1,
+    borderLeftWidth: 3,
+    borderRadius: tokens.radiusMd,
+    padding: tokens.space3,
+    flexDirection: "row",
+    alignItems: "flex-start"
+  },
+  icon: {
+    fontSize: 16,
+    marginRight: tokens.space3,
+    marginTop: 2
+  },
+  content: {
+    flex: 1
+  },
+  title: {
+    fontSize: tokens.fontsizeSm,
+    fontWeight: "600"
+  },
+  body: {
+    fontSize: tokens.fontsizeSm,
+    color: tokens.colorFg,
+    lineHeight: 20
+  }
+});
+
+// src/components/ui/status_label/StatusLabel.tsx
+import { View as View15, Text as Text14, StyleSheet as StyleSheet15 } from "react-native";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var statusConfig = {
+  active: { icon: "\u2705", color: tokens.colorSuccess, defaultLabel: "Active" },
+  inactive: { icon: "\u274C", color: tokens.colorMuted, defaultLabel: "Inactive" },
+  pending: { icon: "\u23F3", color: tokens.colorWarning, defaultLabel: "Pending" },
+  error: { icon: "\u26A0\uFE0F", color: tokens.colorError, defaultLabel: "Error" }
+};
+function StatusLabel({
+  status,
+  label,
+  style: userStyle
+}) {
+  const config = statusConfig[status];
+  const displayLabel = label ?? config.defaultLabel;
+  return /* @__PURE__ */ jsxs13(View15, { style: [styles15.container, userStyle], children: [
+    /* @__PURE__ */ jsx15(Text14, { style: styles15.icon, children: config.icon }),
+    /* @__PURE__ */ jsx15(Text14, { style: [styles15.label, { color: config.color }], children: displayLabel })
+  ] });
+}
+var styles15 = StyleSheet15.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  icon: {
+    fontSize: 14
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "500"
+  }
+});
+
+// src/components/ui/tag_chip/TagChip.tsx
+import { View as View16, Text as Text15, StyleSheet as StyleSheet16 } from "react-native";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var variantStyles2 = {
+  default: { color: tokens.colorFg, backgroundColor: tokens.cSurfaceElevated },
+  brand: { color: tokens.colorBrand, backgroundColor: tokens.cBrandSubtle },
+  muted: { color: tokens.colorMuted, backgroundColor: "transparent" }
+};
+var sizeStyles5 = {
+  sm: { fontSize: tokens.fontsizeXs, paddingHorizontal: 8, paddingVertical: 2 },
+  md: { fontSize: tokens.fontsizeXs, paddingHorizontal: 10, paddingVertical: 3 }
+};
+function TagChip({
+  label,
+  variant = "default",
+  size = "md",
+  style: userStyle,
+  textStyle: userTextStyle
+}) {
+  const variantStyle = variantStyles2[variant];
+  const sizeStyle = sizeStyles5[size];
+  return /* @__PURE__ */ jsx16(View16, { style: [styles16.chip, variantStyle, sizeStyle, userStyle], children: /* @__PURE__ */ jsx16(Text15, { style: [styles16.label, { color: variantStyle.color }, userTextStyle], children: label }) });
+}
+var styles16 = StyleSheet16.create({
+  chip: {
+    borderWidth: 1,
+    borderColor: tokens.cBorder,
+    borderRadius: tokens.radiusSm,
+    alignSelf: "flex-start"
+  },
+  label: {
+    fontWeight: "500"
+  }
+});
+
+// src/components/typographie/text/Text.tsx
+import { Text as RNText } from "react-native";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var textConfig = {
+  "body-sm": {
+    fontSize: tokens.fontsizeMedium,
+    fontWeight: tokens.fontweightMedium
+  },
+  "body-md": {
+    fontSize: tokens.fontsizeXl,
+    fontWeight: tokens.fontweightMedium
+  },
+  "body-lg": {
+    fontSize: tokens.fontsize2xl,
+    fontWeight: tokens.fontweightMedium
+  },
+  caption: {
+    fontSize: tokens.fontsizeXs,
+    fontWeight: tokens.fontweightLight
+  }
+};
+var getToneColor = (tone) => {
+  switch (tone) {
+    case "muted":
+      return tokens.colorMuted;
+    case "brand":
+      return tokens.colorBrand;
+    default:
+      return tokens.colorFg;
+  }
+};
+function Text16({
+  texte,
+  variant = "body-sm",
+  align = "left",
+  tone = "default",
+  opacity,
+  blurPx,
+  style: userStyle
+}) {
+  const config = textConfig[variant] || textConfig["body-sm"];
+  const color = getToneColor(tone);
+  const textStyle = {
+    ...config,
+    color,
+    textAlign: align,
+    opacity
+    // Note: blur is not directly supported in RN Text, might need a wrapper View with blur
+  };
+  return /* @__PURE__ */ jsx17(RNText, { style: [textStyle, userStyle], children: texte });
+}
+
+// src/components/typographie/heading/Heading.tsx
+import { Text as RNText2 } from "react-native";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var headingConfig = {
+  1: {
+    fontSize: tokens.fontsize5xl,
+    fontWeight: tokens.fontweightBlack
+  },
+  2: {
+    fontSize: tokens.fontsize4xl,
+    fontWeight: tokens.fontweightExtrabold
+  },
+  3: {
+    fontSize: tokens.fontsize3xl,
+    fontWeight: tokens.fontweightBold
+  },
+  4: {
+    fontSize: tokens.fontsize2xl,
+    fontWeight: tokens.fontweightSemibold
+  },
+  5: {
+    fontSize: tokens.fontsizeXl,
+    fontWeight: tokens.fontweightBold
+  },
+  6: {
+    fontSize: tokens.fontsizeLg,
+    fontWeight: tokens.fontweightMedium
+  }
+};
+var getToneColor2 = (tone) => {
+  return tone === "muted" ? tokens.colorMuted : tokens.colorBrand;
+};
+function Heading({
+  title,
+  level = 1,
+  align = "left",
+  opacity = 1,
+  blurPx = 0,
+  tone = "brand",
+  style: userStyle
+}) {
+  const config = headingConfig[level];
+  const color = getToneColor2(tone);
+  const safeOpacity = Math.min(Math.max(opacity, 0), 1);
+  const textStyle = {
+    ...config,
+    color,
+    textAlign: align,
+    opacity: safeOpacity,
+    margin: tokens.space2
+  };
+  return /* @__PURE__ */ jsx18(RNText2, { style: [textStyle, userStyle], children: title });
+}
+
+// src/components/layout/app_shell/AppShell.tsx
+import { SafeAreaView, View as View17, StyleSheet as StyleSheet17 } from "react-native";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+function AppShell({
+  header,
+  sidebar,
+  footer,
+  children,
+  sidebarWidth = 232,
+  headerHeight = 60,
+  footerHeight = 60,
+  style: userStyle
+}) {
+  return /* @__PURE__ */ jsxs14(SafeAreaView, { style: [styles17.container, userStyle], children: [
+    header && /* @__PURE__ */ jsx19(View17, { style: [styles17.header, { height: headerHeight }], children: header }),
+    /* @__PURE__ */ jsxs14(View17, { style: styles17.content, children: [
+      sidebar && /* @__PURE__ */ jsx19(View17, { style: [styles17.sidebar, { width: sidebarWidth }], children: sidebar }),
+      /* @__PURE__ */ jsx19(View17, { style: styles17.main, children })
+    ] }),
+    footer && /* @__PURE__ */ jsx19(View17, { style: [styles17.footer, { height: footerHeight }], children: footer })
+  ] });
+}
+var styles17 = StyleSheet17.create({
+  container: {
+    flex: 1,
+    backgroundColor: tokens.colorBg
+  },
+  header: {
+    backgroundColor: tokens.colorBg
+  },
+  content: {
+    flex: 1,
+    flexDirection: "row"
+  },
+  sidebar: {
+    backgroundColor: tokens.colorBg,
+    borderRightWidth: 1,
+    borderRightColor: tokens.colorMuted
+  },
+  main: {
+    flex: 1,
+    padding: tokens.space6
+  },
+  footer: {
+    backgroundColor: tokens.colorBg,
+    borderTopWidth: 1,
+    borderTopColor: tokens.colorMuted
+  }
+});
+
+// src/components/layout/screen/Screen.tsx
+import { SafeAreaView as SafeAreaView2, ScrollView as ScrollView2, View as View18, StyleSheet as StyleSheet18 } from "react-native";
+import { jsx as jsx20 } from "react/jsx-runtime";
+function Screen({ children, scrollable = false, style: userStyle }) {
+  const content = scrollable ? /* @__PURE__ */ jsx20(ScrollView2, { contentInsetAdjustmentBehavior: "automatic", style: styles18.scroll, children }) : /* @__PURE__ */ jsx20(View18, { style: styles18.content, children });
+  return /* @__PURE__ */ jsx20(SafeAreaView2, { style: [styles18.container, userStyle], children: content });
+}
+var styles18 = StyleSheet18.create({
+  container: {
+    flex: 1,
+    backgroundColor: tokens.colorBg
+  },
+  content: {
+    flex: 1
+  },
+  scroll: {
+    flex: 1
+  }
+});
+
+// src/components/ui/card/Card.tsx
+import { View as View19 } from "react-native";
+import { jsx as jsx21 } from "react/jsx-runtime";
+function Card({
+  children,
+  style,
+  variant = "default",
+  padding = "md"
+}) {
+  const paddingValue = padding === "sm" ? tokens.space2 : padding === "lg" ? tokens.space6 : tokens.space4;
+  const cardStyle = {
+    backgroundColor: tokens.colorBg,
+    borderRadius: tokens.radiusMd,
+    padding: paddingValue,
+    ...getVariantStyle(variant),
+    ...style
+  };
+  return /* @__PURE__ */ jsx21(View19, { style: cardStyle, children });
+}
+function getVariantStyle(variant) {
+  switch (variant) {
+    case "elevated":
+      return {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3
+      };
+    case "outlined":
+      return {
+        borderWidth: 1,
+        borderColor: tokens.cBorder
+      };
+    default:
+      return {};
+  }
+}
+export {
+  Accordion,
+  AccordionItem,
+  Alert,
+  AppShell,
+  Badge,
+  Button,
+  Callout,
+  Card,
+  Checkbox,
+  Heading,
+  Input,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  Screen,
+  Select,
+  Spinner,
+  StatusLabel,
+  TabPanel,
+  Tabs,
+  TagChip,
+  Text16 as Text,
+  Textarea,
+  ToggleSwitch,
+  tokens
+};