@brickslab./ui-mobile 0.1.1

package/dist/index.cjs

@@ -0,0 +1,1897 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  AccordionItem: () => AccordionItem,
+  Alert: () => Alert,
+  AppShell: () => AppShell,
+  Badge: () => Badge,
+  Button: () => Button,
+  Callout: () => Callout,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
+  Heading: () => Heading,
+  Input: () => Input,
+  ProgressBar: () => ProgressBar,
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
+  Screen: () => Screen,
+  Select: () => Select,
+  Spinner: () => Spinner,
+  StatusLabel: () => StatusLabel,
+  TabPanel: () => TabPanel,
+  Tabs: () => Tabs,
+  TagChip: () => TagChip,
+  Text: () => Text16,
+  Textarea: () => Textarea,
+  ToggleSwitch: () => ToggleSwitch,
+  tokens: () => tokens
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ui/button/Button.tsx
+var import_react_native = require("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
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.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__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.content, children: [
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ActivityIndicator, { size: "small", color: textStyles(variant, size, customColor).color }) : leftIcon,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [styles.text, textStyles(variant, size, customColor)], children }),
+        !isLoading && rightIcon
+      ] })
+    }
+  );
+}
+var styles = import_react_native.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
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: containerStyle, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles2.label, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: inputContainerStyle, children: [
+      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles2.leftIcon, children: leftIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native2.TextInput,
+        {
+          value,
+          onChangeText,
+          placeholder,
+          placeholderTextColor: tokens.colorMuted,
+          keyboardType,
+          editable: isEditable,
+          style: textInputStyle
+        }
+      ),
+      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles2.rightIcon, children: rightIcon })
+    ] }),
+    (errorText || helperText) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [styles2.helper, hasError && { color: tokens.colorError }], children: errorText ?? helperText })
+  ] });
+}
+var styles2 = import_react_native2.StyleSheet.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
+var import_react = require("react");
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var sizeMap = {
+  sm: 14,
+  md: 16,
+  lg: 20
+};
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: styles3.checkmark, children: "\u2713" });
+function Checkbox({
+  checked,
+  defaultChecked,
+  onValueChange,
+  label,
+  disabled = false,
+  size = "md",
+  style: userStyle
+}) {
+  const [internalChecked, setInternalChecked] = (0, import_react.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__ */ (0, import_jsx_runtime3.jsxs)(
+    import_react_native3.TouchableOpacity,
+    {
+      style: [styles3.container, userStyle],
+      onPress: handlePress,
+      disabled,
+      activeOpacity: 0.8,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_native3.View,
+          {
+            style: [
+              styles3.checkbox,
+              { width: px, height: px },
+              isChecked && styles3.checked,
+              disabled && styles3.disabled
+            ],
+            children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {})
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [styles3.label, disabled && styles3.disabledText], children: label })
+      ]
+    }
+  );
+}
+var styles3 = import_react_native3.StyleSheet.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
+var import_react2 = __toESM(require("react"), 1);
+var import_react_native4 = require("react-native");
+var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsxs)(
+    import_react_native4.TouchableOpacity,
+    {
+      style: [styles4.container, userStyle],
+      onPress: handlePress,
+      disabled,
+      activeOpacity: 0.8,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_react_native4.View,
+          {
+            style: [
+              styles4.radio,
+              { width: px, height: px },
+              checked && styles4.checked,
+              disabled && styles4.disabled
+            ],
+            children: checked && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles4.dot })
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles4.label, disabled && styles4.disabledText], children: label })
+      ]
+    }
+  );
+}
+function RadioGroup({
+  name,
+  value,
+  onChange,
+  children,
+  direction = "vertical",
+  gap = 10,
+  style: userStyle
+}) {
+  const cloned = import_react2.default.Children.map(children, (child) => {
+    if (!import_react2.default.isValidElement(child)) return child;
+    const childProps = child.props;
+    return import_react2.default.cloneElement(child, {
+      name,
+      ...value !== void 0 && { checked: childProps.value === value },
+      ...onChange && { onChange }
+    });
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_native4.View,
+    {
+      style: [
+        styles4.group,
+        { flexDirection: direction === "horizontal" ? "row" : "column", gap },
+        userStyle
+      ],
+      children: cloned
+    }
+  );
+}
+var styles4 = import_react_native4.StyleSheet.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
+var import_react_native5 = require("react-native");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ToggleSwitch({
+  checked,
+  onValueChange,
+  label,
+  disabled = false,
+  style: userStyle
+}) {
+  const handlePress = () => {
+    if (disabled) return;
+    onValueChange(!checked);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_react_native5.TouchableOpacity,
+    {
+      style: [styles5.container, userStyle],
+      onPress: handlePress,
+      disabled,
+      activeOpacity: 0.8,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react_native5.View,
+          {
+            style: [
+              styles5.switch,
+              { backgroundColor: checked ? tokens.colorBrand : tokens.colorMuted },
+              disabled && styles5.disabled
+            ],
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_react_native5.View,
+              {
+                style: [
+                  styles5.thumb,
+                  { transform: [{ translateX: checked ? 18 : 0 }] }
+                ]
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles5.label, disabled && styles5.disabledText], children: label })
+      ]
+    }
+  );
+}
+var styles5 = import_react_native5.StyleSheet.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
+var import_react_native6 = require("react-native");
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native6.View,
+      {
+        style: [
+          styles6.dot,
+          { width: dotSize, height: dotSize, backgroundColor: outlined ? "transparent" : color, borderColor: color },
+          userStyle
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_native6.View,
+    {
+      style: [
+        styles6.badge,
+        {
+          paddingHorizontal,
+          paddingVertical,
+          backgroundColor: outlined ? "transparent" : bg,
+          borderColor: border
+        },
+        userStyle
+      ],
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react_native6.Text,
+        {
+          style: [
+            styles6.text,
+            { fontSize, color },
+            userTextStyle
+          ],
+          children: content
+        }
+      )
+    }
+  );
+}
+var styles6 = import_react_native6.StyleSheet.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
+var import_react_native7 = require("react-native");
+var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_native7.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__ */ (0, import_jsx_runtime7.jsxs)(
+          import_react_native7.TouchableOpacity,
+          {
+            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__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { 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__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: userStyle, children });
+}
+var styles7 = import_react_native7.StyleSheet.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
+var import_react_native8 = require("react-native");
+var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsxs)(
+    import_react_native8.View,
+    {
+      style: [
+        styles8.alert,
+        { backgroundColor: config.bg, borderColor: config.border },
+        fullWidth && { width: "100%" },
+        userStyle
+      ],
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles8.icon, children: config.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: styles8.content, children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles8.title, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles8.message, children })
+        ] }),
+        dismissible && onDismiss && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.TouchableOpacity, { onPress: onDismiss, style: styles8.dismiss, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles8.dismissText, children: "\u2715" }) })
+      ]
+    }
+  );
+}
+var styles8 = import_react_native8.StyleSheet.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
+var import_react3 = require("react");
+var import_react_native9 = require("react-native");
+var import_jsx_runtime9 = require("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 = (0, import_react3.useRef)(new import_react_native9.Animated.Value(0)).current;
+  (0, import_react3.useEffect)(() => {
+    if (animate) {
+      import_react_native9.Animated.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__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.View, { style: [styles9.container, userStyle], children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.View, { style: styles9.header, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: styles9.label, children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.Text, { style: styles9.value, children: [
+        Math.round(percent),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_native9.View,
+      {
+        style: [styles9.track, { height, backgroundColor: trackColor }],
+        accessible: true,
+        accessibilityRole: "progressbar",
+        accessibilityValue: { now: clamped, min: 0, max },
+        accessibilityLabel: label,
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_react_native9.Animated.View,
+          {
+            style: [
+              styles9.bar,
+              { height, backgroundColor: barColor, width: widthInterpolation }
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+var styles9 = import_react_native9.StyleSheet.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
+var import_react_native10 = require("react-native");
+var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.View, { style: [styles10.container, userStyle], accessible: true, accessibilityRole: "progressbar", accessibilityLabel: label, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.ActivityIndicator, { size, color }) });
+}
+var styles10 = import_react_native10.StyleSheet.create({
+  container: {
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+
+// src/components/ui/select/Select.tsx
+var import_react4 = require("react");
+var import_react_native11 = require("react-native");
+var import_jsx_runtime11 = require("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] = (0, import_react4.useState)(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__ */ (0, import_jsx_runtime11.jsxs)(import_react_native11.View, { style: [styles11.container, fullWidth && { width: "100%" }, userStyle], children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles11.label, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_react_native11.TouchableOpacity,
+      {
+        style: [
+          styles11.select,
+          config,
+          hasError && { borderColor: tokens.colorError },
+          disabled && { opacity: 0.5 }
+        ],
+        onPress: () => !disabled && setModalVisible(true),
+        disabled,
+        activeOpacity: 0.8,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: [styles11.selectText, { fontSize: config.fontSize, color: selectedOption ? tokens.colorFg : tokens.colorMuted }], children: displayText }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles11.arrow, children: "\u25BC" })
+        ]
+      }
+    ),
+    (errorText || helperText) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: [styles11.helper, hasError && { color: tokens.colorError }], children: errorText ?? helperText }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_react_native11.Modal,
+      {
+        visible: modalVisible,
+        transparent: true,
+        animationType: "slide",
+        onRequestClose: () => setModalVisible(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.View, { style: styles11.modalOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native11.View, { style: styles11.modalContent, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_react_native11.FlatList,
+            {
+              data: options,
+              keyExtractor: (item) => item.value,
+              renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_react_native11.TouchableOpacity,
+                {
+                  style: [styles11.option, item.disabled && styles11.disabledOption],
+                  onPress: () => handleSelect(item),
+                  disabled: item.disabled,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: [styles11.optionText, item.disabled && styles11.disabledText], children: item.label })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.TouchableOpacity, { style: styles11.closeButton, onPress: () => setModalVisible(false), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native11.Text, { style: styles11.closeText, children: "Close" }) })
+        ] }) })
+      }
+    )
+  ] });
+}
+var styles11 = import_react_native11.StyleSheet.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
+var import_react_native12 = require("react-native");
+var import_jsx_runtime12 = require("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__ */ (0, import_jsx_runtime12.jsxs)(import_react_native12.View, { style: [styles12.container, fullWidth && { width: "100%" }, userStyle], children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native12.Text, { style: styles12.label, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_native12.TextInput,
+      {
+        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__ */ (0, import_jsx_runtime12.jsxs)(import_react_native12.View, { style: styles12.footer, children: [
+      (errorText || helperText) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native12.Text, { style: [styles12.helper, hasError && { color: tokens.colorError }], children: errorText ?? helperText }),
+      maxLength !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native12.Text, { style: [styles12.counter, isAtLimit && { color: tokens.colorError }], children: [
+        value.length,
+        "/",
+        maxLength
+      ] })
+    ] })
+  ] });
+}
+var styles12 = import_react_native12.StyleSheet.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
+var import_react5 = __toESM(require("react"), 1);
+var import_react_native13 = require("react-native");
+var import_jsx_runtime13 = require("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__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.View, { style: [variantStyles3.container, userStyle], children: import_react5.default.Children.map(children, (child, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native13.View, { children: [
+    index > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.View, { style: variantStyles3.separator }),
+    child
+  ] }, index)) });
+}
+function AccordionItem({
+  title,
+  children,
+  open: controlledOpen,
+  onToggle,
+  disabled = false,
+  icon,
+  style: userStyle
+}) {
+  const [internalOpen, setInternalOpen] = (0, import_react5.useState)(false);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const animatedHeight = (0, import_react5.useRef)(new import_react_native13.Animated.Value(0)).current;
+  const toggle = () => {
+    if (disabled) return;
+    const newOpen = !isOpen;
+    if (isControlled) {
+      onToggle?.(newOpen);
+    } else {
+      setInternalOpen(newOpen);
+    }
+  };
+  import_react5.default.useEffect(() => {
+    import_react_native13.Animated.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__ */ (0, import_jsx_runtime13.jsxs)(import_react_native13.View, { style: [styles13.item, userStyle], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      import_react_native13.TouchableOpacity,
+      {
+        style: [styles13.header, disabled && styles13.disabled],
+        onPress: toggle,
+        disabled,
+        activeOpacity: 0.8,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native13.View, { style: styles13.titleContainer, children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.View, { style: styles13.icon, children: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.Text, { style: [styles13.title, disabled && styles13.disabledText], children: title })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.Text, { style: [styles13.arrow, { transform: [{ rotate: isOpen ? "180deg" : "0deg" }] }], children: "\u25BC" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.Animated.View, { style: [styles13.content, { height: contentHeight }], children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native13.View, { style: styles13.contentInner, children }) })
+  ] });
+}
+var styles13 = import_react_native13.StyleSheet.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
+var import_react_native14 = require("react-native");
+var import_jsx_runtime14 = require("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__ */ (0, import_jsx_runtime14.jsxs)(import_react_native14.View, { style: [styles14.callout, { backgroundColor: config.bg, borderColor: config.border }, userStyle], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.Text, { style: styles14.icon, children: config.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native14.View, { style: styles14.content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.Text, { style: [styles14.title, { color: config.accent, marginBottom: children ? tokens.space1 : 0 }], children: displayTitle }),
+      children && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native14.Text, { style: styles14.body, children })
+    ] })
+  ] });
+}
+var styles14 = import_react_native14.StyleSheet.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
+var import_react_native15 = require("react-native");
+var import_jsx_runtime15 = require("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__ */ (0, import_jsx_runtime15.jsxs)(import_react_native15.View, { style: [styles15.container, userStyle], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native15.Text, { style: styles15.icon, children: config.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native15.Text, { style: [styles15.label, { color: config.color }], children: displayLabel })
+  ] });
+}
+var styles15 = import_react_native15.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  icon: {
+    fontSize: 14
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "500"
+  }
+});
+
+// src/components/ui/tag_chip/TagChip.tsx
+var import_react_native16 = require("react-native");
+var import_jsx_runtime16 = require("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__ */ (0, import_jsx_runtime16.jsx)(import_react_native16.View, { style: [styles16.chip, variantStyle, sizeStyle, userStyle], children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native16.Text, { style: [styles16.label, { color: variantStyle.color }, userTextStyle], children: label }) });
+}
+var styles16 = import_react_native16.StyleSheet.create({
+  chip: {
+    borderWidth: 1,
+    borderColor: tokens.cBorder,
+    borderRadius: tokens.radiusSm,
+    alignSelf: "flex-start"
+  },
+  label: {
+    fontWeight: "500"
+  }
+});
+
+// src/components/typographie/text/Text.tsx
+var import_react_native17 = require("react-native");
+var import_jsx_runtime17 = require("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__ */ (0, import_jsx_runtime17.jsx)(import_react_native17.Text, { style: [textStyle, userStyle], children: texte });
+}
+
+// src/components/typographie/heading/Heading.tsx
+var import_react_native18 = require("react-native");
+var import_jsx_runtime18 = require("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__ */ (0, import_jsx_runtime18.jsx)(import_react_native18.Text, { style: [textStyle, userStyle], children: title });
+}
+
+// src/components/layout/app_shell/AppShell.tsx
+var import_react_native19 = require("react-native");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function AppShell({
+  header,
+  sidebar,
+  footer,
+  children,
+  sidebarWidth = 232,
+  headerHeight = 60,
+  footerHeight = 60,
+  style: userStyle
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native19.SafeAreaView, { style: [styles17.container, userStyle], children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native19.View, { style: [styles17.header, { height: headerHeight }], children: header }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native19.View, { style: styles17.content, children: [
+      sidebar && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native19.View, { style: [styles17.sidebar, { width: sidebarWidth }], children: sidebar }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native19.View, { style: styles17.main, children })
+    ] }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native19.View, { style: [styles17.footer, { height: footerHeight }], children: footer })
+  ] });
+}
+var styles17 = import_react_native19.StyleSheet.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
+var import_react_native20 = require("react-native");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function Screen({ children, scrollable = false, style: userStyle }) {
+  const content = scrollable ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.ScrollView, { contentInsetAdjustmentBehavior: "automatic", style: styles18.scroll, children }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.View, { style: styles18.content, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.SafeAreaView, { style: [styles18.container, userStyle], children: content });
+}
+var styles18 = import_react_native20.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: tokens.colorBg
+  },
+  content: {
+    flex: 1
+  },
+  scroll: {
+    flex: 1
+  }
+});
+
+// src/components/ui/card/Card.tsx
+var import_react_native21 = require("react-native");
+var import_jsx_runtime21 = require("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__ */ (0, import_jsx_runtime21.jsx)(import_react_native21.View, { 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 {};
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AccordionItem,
+  Alert,
+  AppShell,
+  Badge,
+  Button,
+  Callout,
+  Card,
+  Checkbox,
+  Heading,
+  Input,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  Screen,
+  Select,
+  Spinner,
+  StatusLabel,
+  TabPanel,
+  Tabs,
+  TagChip,
+  Text,
+  Textarea,
+  ToggleSwitch,
+  tokens
+});