@nextsparkjs/ui 0.1.0-beta.1

package/dist/index.native.js

@@ -0,0 +1,2371 @@
+// src/native/ThemeContext.tsx
+import { createContext, useContext, useMemo } from "react";
+
+// src/native/defaultColors.ts
+var defaultColors = {
+  // Base
+  background: "#FFFFFF",
+  foreground: "#1a1a1a",
+  card: "#FFFFFF",
+  cardForeground: "#1a1a1a",
+  // Interactive
+  primary: "#171717",
+  primaryForeground: "#fafafa",
+  secondary: "#f5f5f5",
+  secondaryForeground: "#1a1a1a",
+  // States
+  muted: "#f5f5f5",
+  mutedForeground: "#737373",
+  accent: "#f5f5f5",
+  accentForeground: "#1a1a1a",
+  // Alerts
+  destructive: "#ef4444",
+  destructiveForeground: "#FFFFFF",
+  success: "#22c55e",
+  successForeground: "#FFFFFF",
+  // UI
+  border: "#e5e5e5",
+  input: "#e5e5e5",
+  ring: "#a3a3a3",
+  placeholder: "#a3a3a3",
+  // Status colors
+  statusTodo: "rgba(107, 114, 128, 0.2)",
+  // gray-500/20
+  statusInProgress: "rgba(59, 130, 246, 0.2)",
+  // blue-500/20
+  statusReview: "rgba(245, 158, 11, 0.2)",
+  // amber-500/20
+  statusDone: "rgba(34, 197, 94, 0.2)",
+  // green-500/20
+  statusBlocked: "rgba(239, 68, 68, 0.2)",
+  // red-500/20
+  // Status text colors
+  statusTodoText: "#4b5563",
+  // gray-600
+  statusInProgressText: "#2563eb",
+  // blue-600
+  statusReviewText: "#d97706",
+  // amber-600
+  statusDoneText: "#16a34a",
+  // green-600
+  statusBlockedText: "#dc2626",
+  // red-600
+  // Dot colors
+  dotTodo: "#6b7280",
+  // gray-500
+  dotInProgress: "#3b82f6",
+  // blue-500
+  dotReview: "#f59e0b",
+  // amber-500
+  dotDone: "#22c55e",
+  // green-500
+  dotBlocked: "#ef4444"
+  // red-500
+};
+
+// src/native/ThemeContext.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(null);
+function ThemeProvider({ colors: customColors, children }) {
+  const value = useMemo(
+    () => ({
+      colors: { ...defaultColors, ...customColors }
+    }),
+    [customColors]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    return { colors: defaultColors };
+  }
+  return context;
+}
+
+// src/components/Button.native.tsx
+import React, { useMemo as useMemo2 } from "react";
+import {
+  Pressable,
+  Text,
+  StyleSheet,
+  ActivityIndicator
+} from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Button = React.forwardRef(
+  ({
+    variant = "default",
+    size = "default",
+    children,
+    disabled,
+    style,
+    textStyle,
+    isLoading,
+    asChild,
+    // Ignored in RN
+    className,
+    // Ignored in RN (NativeWind doesn't work for external packages)
+    textClassName,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const isDisabled = disabled || isLoading;
+    const variantStyles = useMemo2(
+      () => ({
+        default: {
+          container: { backgroundColor: colors.primary },
+          text: { color: colors.primaryForeground }
+        },
+        destructive: {
+          container: { backgroundColor: colors.destructive },
+          text: { color: colors.destructiveForeground }
+        },
+        outline: {
+          container: {
+            backgroundColor: colors.background,
+            borderWidth: 1,
+            borderColor: colors.input
+          },
+          text: { color: colors.foreground }
+        },
+        secondary: {
+          container: { backgroundColor: colors.secondary },
+          text: { color: colors.secondaryForeground }
+        },
+        ghost: {
+          container: { backgroundColor: "transparent" },
+          text: { color: colors.foreground }
+        },
+        link: {
+          container: { backgroundColor: "transparent" },
+          text: { color: colors.primary, textDecorationLine: "underline" }
+        },
+        "outline-destructive": {
+          container: {
+            backgroundColor: colors.background,
+            borderWidth: 1,
+            borderColor: colors.destructive
+          },
+          text: { color: colors.destructive }
+        }
+      }),
+      [colors]
+    );
+    const variantStyle = variantStyles[variant] || variantStyles.default;
+    const sizeStyle = sizeStyles[size] || sizeStyles.default;
+    const getSpinnerColor = () => {
+      if (variant === "outline" || variant === "ghost" || variant === "outline-destructive") {
+        return colors.foreground;
+      }
+      return colors.primaryForeground;
+    };
+    return /* @__PURE__ */ jsx2(
+      Pressable,
+      {
+        ref,
+        disabled: isDisabled,
+        style: ({ pressed }) => [
+          styles.base,
+          variantStyle.container,
+          sizeStyle.container,
+          pressed && styles.pressed,
+          isDisabled && styles.disabled,
+          style
+        ],
+        ...props,
+        children: isLoading ? /* @__PURE__ */ jsx2(ActivityIndicator, { color: getSpinnerColor(), size: "small" }) : typeof children === "string" ? /* @__PURE__ */ jsx2(
+          Text,
+          {
+            style: [styles.text, variantStyle.text, sizeStyle.text, textStyle],
+            children
+          }
+        ) : children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var buttonVariants = (options) => {
+  return "";
+};
+var styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 8,
+    // rounded-lg equivalent
+    gap: 8
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: "600"
+    // font-semibold
+  },
+  pressed: {
+    opacity: 0.8
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+var sizeStyles = {
+  default: {
+    container: { height: 44, paddingHorizontal: 16 },
+    // h-11
+    text: { fontSize: 16 }
+    // text-base
+  },
+  sm: {
+    container: { height: 36, paddingHorizontal: 12 },
+    // h-9
+    text: { fontSize: 14 }
+    // text-sm
+  },
+  lg: {
+    container: { height: 48, paddingHorizontal: 24 },
+    // h-12
+    text: { fontSize: 18 }
+    // text-lg
+  },
+  icon: {
+    container: { height: 40, width: 40, paddingHorizontal: 0 },
+    // h-10 w-10
+    text: { fontSize: 16 }
+  }
+};
+
+// src/components/Input.native.tsx
+import React2, { useMemo as useMemo3 } from "react";
+import {
+  TextInput,
+  View as View2,
+  Text as Text2,
+  StyleSheet as StyleSheet2
+} from "react-native";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Input = React2.forwardRef(
+  ({
+    label,
+    error,
+    required,
+    containerStyle,
+    inputStyle,
+    className,
+    containerClassName,
+    editable = true,
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo3(
+      () => ({
+        label: { color: colors.foreground },
+        required: { color: colors.destructive },
+        input: {
+          borderColor: colors.border,
+          color: colors.foreground,
+          backgroundColor: colors.card
+        },
+        inputError: { borderColor: colors.destructive },
+        error: { color: colors.destructive }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsxs(View2, { style: [styles2.container, containerStyle], children: [
+      label && /* @__PURE__ */ jsxs(View2, { style: styles2.labelRow, children: [
+        /* @__PURE__ */ jsx3(Text2, { style: [styles2.label, colorStyles.label], children: label }),
+        required && /* @__PURE__ */ jsx3(Text2, { style: [styles2.required, colorStyles.required], children: " *" })
+      ] }),
+      /* @__PURE__ */ jsx3(
+        TextInput,
+        {
+          ref,
+          style: [
+            styles2.input,
+            colorStyles.input,
+            error && colorStyles.inputError,
+            !editable && styles2.inputDisabled,
+            inputStyle
+          ],
+          editable,
+          placeholderTextColor: colors.placeholder,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx3(Text2, { style: [styles2.error, colorStyles.error], children: error })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var styles2 = StyleSheet2.create({
+  container: {
+    gap: 8
+  },
+  labelRow: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  required: {
+    fontSize: 14
+  },
+  input: {
+    height: 44,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    fontSize: 16
+  },
+  inputDisabled: {
+    opacity: 0.5
+  },
+  error: {
+    fontSize: 14
+  }
+});
+
+// src/components/Textarea.native.tsx
+import React3, { useMemo as useMemo4 } from "react";
+import {
+  TextInput as TextInput2,
+  View as View3,
+  Text as Text3,
+  StyleSheet as StyleSheet3
+} from "react-native";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Textarea = React3.forwardRef(
+  ({
+    label,
+    error,
+    required,
+    containerStyle,
+    inputStyle,
+    className,
+    containerClassName,
+    editable = true,
+    numberOfLines = 4,
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo4(
+      () => ({
+        label: { color: colors.foreground },
+        required: { color: colors.destructive },
+        input: {
+          borderColor: colors.border,
+          color: colors.foreground,
+          backgroundColor: colors.card
+        },
+        inputError: { borderColor: colors.destructive },
+        error: { color: colors.destructive }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsxs2(View3, { style: [styles3.container, containerStyle], children: [
+      label && /* @__PURE__ */ jsxs2(View3, { style: styles3.labelRow, children: [
+        /* @__PURE__ */ jsx4(Text3, { style: [styles3.label, colorStyles.label], children: label }),
+        required && /* @__PURE__ */ jsx4(Text3, { style: [styles3.required, colorStyles.required], children: " *" })
+      ] }),
+      /* @__PURE__ */ jsx4(
+        TextInput2,
+        {
+          ref,
+          style: [
+            styles3.input,
+            colorStyles.input,
+            error && colorStyles.inputError,
+            !editable && styles3.inputDisabled,
+            inputStyle
+          ],
+          editable,
+          multiline: true,
+          numberOfLines,
+          textAlignVertical: "top",
+          placeholderTextColor: colors.placeholder,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx4(Text3, { style: [styles3.error, colorStyles.error], children: error })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+var styles3 = StyleSheet3.create({
+  container: {
+    gap: 8
+  },
+  labelRow: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  required: {
+    fontSize: 14
+  },
+  input: {
+    minHeight: 100,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    fontSize: 16
+  },
+  inputDisabled: {
+    opacity: 0.5
+  },
+  error: {
+    fontSize: 14
+  }
+});
+
+// src/components/Checkbox.native.tsx
+import React4, { useMemo as useMemo5 } from "react";
+import {
+  View as View4,
+  Text as Text4,
+  Pressable as Pressable2,
+  StyleSheet as StyleSheet4
+} from "react-native";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Checkbox = React4.forwardRef(
+  ({
+    checked = false,
+    onCheckedChange,
+    disabled,
+    label,
+    style,
+    textStyle,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo5(
+      () => ({
+        checkboxChecked: {
+          backgroundColor: colors.primary,
+          borderColor: colors.primary
+        },
+        checkboxUnchecked: {
+          backgroundColor: colors.background,
+          borderColor: colors.input
+        },
+        checkmark: { color: colors.primaryForeground },
+        label: { color: colors.foreground }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsxs3(
+      Pressable2,
+      {
+        ref,
+        style: [styles4.container, disabled && styles4.disabled, style],
+        onPress: () => onCheckedChange?.(!checked),
+        disabled,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx5(
+            View4,
+            {
+              style: [
+                styles4.checkbox,
+                checked ? colorStyles.checkboxChecked : colorStyles.checkboxUnchecked
+              ],
+              children: checked && /* @__PURE__ */ jsx5(Text4, { style: [styles4.checkmark, colorStyles.checkmark], children: "\u2713" })
+            }
+          ),
+          label && /* @__PURE__ */ jsx5(Text4, { style: [styles4.label, colorStyles.label, textStyle], children: label })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var styles4 = StyleSheet4.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  checkbox: {
+    width: 20,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 4,
+    borderWidth: 2
+  },
+  checkmark: {
+    fontSize: 12,
+    fontWeight: "bold"
+  },
+  label: {
+    fontSize: 14
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/Switch.native.tsx
+import React5, { useEffect, useMemo as useMemo6 } from "react";
+import {
+  Pressable as Pressable3,
+  StyleSheet as StyleSheet5
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var AnimatedThumb = Animated.View;
+var Switch = React5.forwardRef(
+  ({
+    checked = false,
+    onCheckedChange,
+    disabled,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const translateX = useSharedValue(checked ? 20 : 0);
+    useEffect(() => {
+      translateX.value = withTiming(checked ? 20 : 0, { duration: 200 });
+    }, [checked, translateX]);
+    const thumbStyle = useAnimatedStyle(() => ({
+      transform: [{ translateX: translateX.value }]
+    }));
+    const colorStyles = useMemo6(
+      () => ({
+        trackChecked: { backgroundColor: colors.primary },
+        trackUnchecked: { backgroundColor: colors.input },
+        thumb: { backgroundColor: colors.background }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx6(
+      Pressable3,
+      {
+        ref,
+        style: [
+          styles5.track,
+          checked ? colorStyles.trackChecked : colorStyles.trackUnchecked,
+          disabled && styles5.disabled,
+          style
+        ],
+        onPress: () => onCheckedChange?.(!checked),
+        disabled,
+        ...props,
+        children: /* @__PURE__ */ jsx6(AnimatedThumb, { style: [styles5.thumb, colorStyles.thumb, thumbStyle] })
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+var styles5 = StyleSheet5.create({
+  track: {
+    width: 44,
+    height: 24,
+    borderRadius: 12,
+    padding: 2,
+    justifyContent: "center"
+  },
+  thumb: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/Select.native.tsx
+import React6, { useState, useMemo as useMemo7 } from "react";
+import {
+  View as View6,
+  Text as Text5,
+  Pressable as Pressable4,
+  Modal,
+  FlatList,
+  StyleSheet as StyleSheet6
+} from "react-native";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var Select = React6.forwardRef(
+  ({
+    options,
+    value,
+    onValueChange,
+    placeholder = "Select...",
+    label,
+    error,
+    required,
+    disabled,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const [isOpen, setIsOpen] = useState(false);
+    const selectedOption = options.find((opt) => opt.value === value);
+    const colorStyles = useMemo7(
+      () => ({
+        label: { color: colors.foreground },
+        required: { color: colors.destructive },
+        trigger: {
+          borderColor: colors.input,
+          backgroundColor: colors.card
+        },
+        triggerError: { borderColor: colors.destructive },
+        triggerText: { color: colors.foreground },
+        placeholder: { color: colors.mutedForeground },
+        chevron: { color: colors.mutedForeground },
+        error: { color: colors.destructive },
+        modalContent: { backgroundColor: colors.card },
+        modalHeader: { borderBottomColor: colors.border },
+        modalTitle: { color: colors.cardForeground },
+        option: { borderBottomColor: colors.border },
+        optionSelected: { backgroundColor: colors.secondary },
+        optionText: { color: colors.foreground }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsxs4(View6, { ref, style: [styles6.container, style], ...props, children: [
+      label && /* @__PURE__ */ jsxs4(Text5, { style: [styles6.label, colorStyles.label], children: [
+        label,
+        required && /* @__PURE__ */ jsx7(Text5, { style: colorStyles.required, children: " *" })
+      ] }),
+      /* @__PURE__ */ jsxs4(
+        Pressable4,
+        {
+          style: [
+            styles6.trigger,
+            colorStyles.trigger,
+            error && colorStyles.triggerError,
+            disabled && styles6.disabled
+          ],
+          onPress: () => !disabled && setIsOpen(true),
+          children: [
+            /* @__PURE__ */ jsx7(
+              Text5,
+              {
+                style: [
+                  styles6.triggerText,
+                  colorStyles.triggerText,
+                  !selectedOption && colorStyles.placeholder
+                ],
+                children: selectedOption?.label || placeholder
+              }
+            ),
+            /* @__PURE__ */ jsx7(Text5, { style: [styles6.chevron, colorStyles.chevron], children: "\u25BC" })
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx7(Text5, { style: [styles6.error, colorStyles.error], children: error }),
+      /* @__PURE__ */ jsx7(
+        Modal,
+        {
+          visible: isOpen,
+          transparent: true,
+          animationType: "fade",
+          onRequestClose: () => setIsOpen(false),
+          children: /* @__PURE__ */ jsx7(
+            Pressable4,
+            {
+              style: styles6.backdrop,
+              onPress: () => setIsOpen(false),
+              children: /* @__PURE__ */ jsxs4(View6, { style: [styles6.modalContent, colorStyles.modalContent], children: [
+                /* @__PURE__ */ jsx7(View6, { style: [styles6.modalHeader, colorStyles.modalHeader], children: /* @__PURE__ */ jsx7(Text5, { style: [styles6.modalTitle, colorStyles.modalTitle], children: label || "Select an option" }) }),
+                /* @__PURE__ */ jsx7(
+                  FlatList,
+                  {
+                    data: options,
+                    keyExtractor: (item) => item.value,
+                    renderItem: ({ item }) => /* @__PURE__ */ jsx7(
+                      Pressable4,
+                      {
+                        style: [
+                          styles6.option,
+                          colorStyles.option,
+                          value === item.value && colorStyles.optionSelected
+                        ],
+                        onPress: () => {
+                          onValueChange?.(item.value);
+                          setIsOpen(false);
+                        },
+                        children: /* @__PURE__ */ jsx7(
+                          Text5,
+                          {
+                            style: [
+                              styles6.optionText,
+                              colorStyles.optionText,
+                              value === item.value && styles6.optionTextSelected
+                            ],
+                            children: item.label
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ] })
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+Select.displayName = "Select";
+var styles6 = StyleSheet6.create({
+  container: {
+    gap: 8
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  trigger: {
+    height: 44,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    borderWidth: 1
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  triggerText: {
+    fontSize: 14
+  },
+  chevron: {
+    fontSize: 10
+  },
+  error: {
+    fontSize: 12
+  },
+  backdrop: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  modalContent: {
+    margin: 16,
+    maxHeight: "60%",
+    width: "90%",
+    borderRadius: 12,
+    overflow: "hidden"
+  },
+  modalHeader: {
+    padding: 16,
+    borderBottomWidth: 1
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: "600"
+  },
+  option: {
+    padding: 16,
+    borderBottomWidth: 1
+  },
+  optionText: {
+    fontSize: 14
+  },
+  optionTextSelected: {
+    fontWeight: "600"
+  }
+});
+
+// src/components/Label.native.tsx
+import React7, { useMemo as useMemo8 } from "react";
+import {
+  Text as Text6,
+  StyleSheet as StyleSheet7
+} from "react-native";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var Label = React7.forwardRef(
+  ({
+    children,
+    required,
+    style,
+    className,
+    // Ignored in RN
+    htmlFor,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo8(
+      () => ({
+        label: { color: colors.foreground },
+        required: { color: colors.destructive }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsxs5(Text6, { ref, style: [styles7.label, colorStyles.label, style], ...props, children: [
+      children,
+      required && /* @__PURE__ */ jsx8(Text6, { style: colorStyles.required, children: " *" })
+    ] });
+  }
+);
+Label.displayName = "Label";
+var styles7 = StyleSheet7.create({
+  label: {
+    fontSize: 14,
+    fontWeight: "600",
+    lineHeight: 14
+  }
+});
+
+// src/components/Badge.native.tsx
+import React8, { useMemo as useMemo9 } from "react";
+import {
+  View as View7,
+  Text as Text7,
+  Pressable as Pressable5,
+  StyleSheet as StyleSheet8
+} from "react-native";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function getBadgeVariants(colors) {
+  return {
+    default: { bg: colors.primary, text: colors.primaryForeground },
+    secondary: { bg: colors.secondary, text: colors.secondaryForeground },
+    destructive: { bg: colors.destructive, text: colors.destructiveForeground },
+    outline: { bg: "transparent", text: colors.foreground, border: colors.border },
+    success: { bg: colors.success, text: colors.successForeground },
+    // Status variants
+    todo: { bg: colors.statusTodo || "rgba(107, 114, 128, 0.2)", text: colors.statusTodoText || "#4b5563" },
+    "in-progress": { bg: colors.statusInProgress || "rgba(59, 130, 246, 0.2)", text: colors.statusInProgressText || "#2563eb" },
+    review: { bg: colors.statusReview || "rgba(245, 158, 11, 0.2)", text: colors.statusReviewText || "#d97706" },
+    done: { bg: colors.statusDone || "rgba(34, 197, 94, 0.2)", text: colors.statusDoneText || "#16a34a" },
+    blocked: { bg: colors.statusBlocked || "rgba(239, 68, 68, 0.2)", text: colors.statusBlockedText || "#dc2626" },
+    // Priority variants
+    low: { bg: colors.statusTodo || "rgba(107, 114, 128, 0.2)", text: colors.statusTodoText || "#4b5563" },
+    medium: { bg: colors.statusInProgress || "rgba(59, 130, 246, 0.2)", text: colors.statusInProgressText || "#2563eb" },
+    high: { bg: colors.statusReview || "rgba(245, 158, 11, 0.2)", text: colors.statusReviewText || "#d97706" },
+    urgent: { bg: colors.statusBlocked || "rgba(239, 68, 68, 0.2)", text: colors.statusBlockedText || "#dc2626" }
+  };
+}
+function getDotColors(colors) {
+  return {
+    todo: colors.dotTodo || "#6b7280",
+    "in-progress": colors.dotInProgress || "#3b82f6",
+    review: colors.dotReview || "#f59e0b",
+    done: colors.dotDone || "#22c55e",
+    blocked: colors.dotBlocked || "#ef4444"
+  };
+}
+var Badge = React8.forwardRef(
+  ({
+    variant = "default",
+    children,
+    showDot,
+    style,
+    textStyle,
+    className,
+    // Ignored in RN
+    textClassName,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const badgeVariants = useMemo9(() => getBadgeVariants(colors), [colors]);
+    const badgeDotColors = useMemo9(() => getDotColors(colors), [colors]);
+    const variantStyle = badgeVariants[variant] || badgeVariants.default;
+    const hasBorder = "border" in variantStyle;
+    const containerStyle = {
+      backgroundColor: variantStyle.bg,
+      ...hasBorder && {
+        borderWidth: 1,
+        borderColor: variantStyle.border
+      }
+    };
+    const dotColor = showDot && variant && badgeDotColors[variant];
+    return /* @__PURE__ */ jsxs6(View7, { ref, style: [styles8.container, containerStyle, style], ...props, children: [
+      dotColor && /* @__PURE__ */ jsx9(View7, { style: [styles8.dot, { backgroundColor: dotColor }] }),
+      typeof children === "string" ? /* @__PURE__ */ jsx9(Text7, { style: [styles8.text, { color: variantStyle.text }, textStyle], children }) : children
+    ] });
+  }
+);
+Badge.displayName = "Badge";
+var PressableBadge = React8.forwardRef(
+  ({
+    variant = "outline",
+    selectedVariant,
+    children,
+    selected,
+    style,
+    textStyle,
+    className,
+    // Ignored in RN
+    textClassName,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const badgeVariants = useMemo9(() => getBadgeVariants(colors), [colors]);
+    const currentVariant = selected && selectedVariant ? selectedVariant : variant;
+    const variantStyle = badgeVariants[currentVariant] || badgeVariants.default;
+    const hasBorder = "border" in variantStyle;
+    const containerStyle = {
+      backgroundColor: variantStyle.bg,
+      ...hasBorder && {
+        borderWidth: selected ? 2 : 1,
+        borderColor: variantStyle.border
+      }
+    };
+    return /* @__PURE__ */ jsx9(
+      Pressable5,
+      {
+        ref,
+        style: ({ pressed }) => [
+          styles8.container,
+          containerStyle,
+          pressed && styles8.pressed,
+          style
+        ],
+        ...props,
+        children: typeof children === "string" ? /* @__PURE__ */ jsx9(Text7, { style: [styles8.text, { color: variantStyle.text }, textStyle], children }) : children
+      }
+    );
+  }
+);
+PressableBadge.displayName = "PressableBadge";
+var styles8 = StyleSheet8.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 9999,
+    paddingHorizontal: 12,
+    paddingVertical: 4
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: "500"
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginRight: 6
+  },
+  pressed: {
+    opacity: 0.8
+  }
+});
+
+// src/components/Avatar.native.tsx
+import React9, { useState as useState2, useMemo as useMemo10 } from "react";
+import {
+  View as View8,
+  Image,
+  Text as Text8,
+  StyleSheet as StyleSheet9
+} from "react-native";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var sizeStyles2 = {
+  sm: {
+    container: { width: 32, height: 32 },
+    text: { fontSize: 12 }
+  },
+  default: {
+    container: { width: 40, height: 40 },
+    text: { fontSize: 14 }
+  },
+  lg: {
+    container: { width: 48, height: 48 },
+    text: { fontSize: 16 }
+  },
+  xl: {
+    container: { width: 64, height: 64 },
+    text: { fontSize: 18 }
+  }
+};
+var Avatar = React9.forwardRef(
+  ({
+    size = "default",
+    children,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx10(
+      View8,
+      {
+        ref,
+        style: [styles9.avatar, sizeStyles2[size].container, style],
+        ...props,
+        children
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarImage = React9.forwardRef(
+  ({
+    src,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const [hasError, setHasError] = useState2(false);
+    if (!src || hasError) return null;
+    return /* @__PURE__ */ jsx10(
+      Image,
+      {
+        ref,
+        source: { uri: src },
+        style: [styles9.image, style],
+        onError: () => setHasError(true),
+        ...props
+      }
+    );
+  }
+);
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React9.forwardRef(
+  ({
+    size = "default",
+    children,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo10(
+      () => ({
+        fallback: { backgroundColor: colors.accent },
+        fallbackText: { color: colors.accentForeground }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx10(View8, { ref, style: [styles9.fallback, colorStyles.fallback, style], ...props, children: typeof children === "string" ? /* @__PURE__ */ jsx10(Text8, { style: [styles9.fallbackText, colorStyles.fallbackText, sizeStyles2[size].text], children }) : children });
+  }
+);
+AvatarFallback.displayName = "AvatarFallback";
+function getInitials(name) {
+  if (!name) return "U";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  }
+  return name.substring(0, 2).toUpperCase();
+}
+var styles9 = StyleSheet9.create({
+  avatar: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: 9999
+  },
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  fallback: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fallbackText: {
+    fontWeight: "600"
+  }
+});
+
+// src/components/Card.native.tsx
+import React10, { useMemo as useMemo11 } from "react";
+import {
+  View as View9,
+  Text as Text9,
+  Pressable as Pressable6,
+  StyleSheet as StyleSheet10
+} from "react-native";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Card = React10.forwardRef(
+  ({
+    children,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo11(
+      () => ({
+        card: {
+          borderColor: colors.border,
+          backgroundColor: colors.card
+        }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx11(View9, { ref, style: [styles10.card, colorStyles.card, style], ...props, children });
+  }
+);
+Card.displayName = "Card";
+var PressableCard = React10.forwardRef(
+  ({
+    children,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo11(
+      () => ({
+        card: {
+          borderColor: colors.border,
+          backgroundColor: colors.card
+        }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx11(
+      Pressable6,
+      {
+        ref,
+        style: ({ pressed }) => [
+          styles10.card,
+          colorStyles.card,
+          pressed && styles10.pressed,
+          style
+        ],
+        ...props,
+        children
+      }
+    );
+  }
+);
+PressableCard.displayName = "PressableCard";
+var CardHeader = React10.forwardRef(
+  ({
+    children,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx11(View9, { ref, style: [styles10.header, style], ...props, children });
+  }
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React10.forwardRef(
+  ({
+    children,
+    style,
+    textStyle,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo11(
+      () => ({
+        titleText: { color: colors.cardForeground }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx11(View9, { ref, style: [style], ...props, children: typeof children === "string" ? /* @__PURE__ */ jsx11(Text9, { style: [styles10.titleText, colorStyles.titleText, textStyle], children }) : children });
+  }
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React10.forwardRef(
+  ({
+    children,
+    style,
+    textStyle,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo11(
+      () => ({
+        descriptionText: { color: colors.mutedForeground }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx11(View9, { ref, style: [styles10.description, style], ...props, children: typeof children === "string" ? /* @__PURE__ */ jsx11(Text9, { style: [styles10.descriptionText, colorStyles.descriptionText, textStyle], children }) : children });
+  }
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React10.forwardRef(
+  ({
+    children,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx11(View9, { ref, style: [style], ...props, children });
+  }
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React10.forwardRef(
+  ({
+    children,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo11(
+      () => ({
+        footer: { borderTopColor: colors.border }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx11(View9, { ref, style: [styles10.footer, colorStyles.footer, style], ...props, children });
+  }
+);
+CardFooter.displayName = "CardFooter";
+var styles10 = StyleSheet10.create({
+  card: {
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 16
+  },
+  pressed: {
+    opacity: 0.8
+  },
+  header: {
+    marginBottom: 12
+  },
+  titleText: {
+    fontSize: 18,
+    fontWeight: "600"
+  },
+  description: {
+    marginTop: 4
+  },
+  descriptionText: {
+    fontSize: 14
+  },
+  footer: {
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1
+  }
+});
+
+// src/components/Separator.native.tsx
+import React11, { useMemo as useMemo12 } from "react";
+import {
+  View as View10,
+  StyleSheet as StyleSheet11
+} from "react-native";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Separator = React11.forwardRef(
+  ({
+    orientation = "horizontal",
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo12(
+      () => ({
+        base: { backgroundColor: colors.border }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx12(
+      View10,
+      {
+        ref,
+        style: [
+          colorStyles.base,
+          orientation === "horizontal" ? styles11.horizontal : styles11.vertical,
+          style
+        ],
+        ...props
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
+var styles11 = StyleSheet11.create({
+  horizontal: {
+    height: 1,
+    width: "100%"
+  },
+  vertical: {
+    width: 1,
+    height: "100%"
+  }
+});
+
+// src/components/Skeleton.native.tsx
+import React12, { useEffect as useEffect2, useMemo as useMemo13 } from "react";
+import {
+  View as View11,
+  StyleSheet as StyleSheet12
+} from "react-native";
+import Animated2, {
+  useAnimatedStyle as useAnimatedStyle2,
+  useSharedValue as useSharedValue2,
+  withRepeat,
+  withTiming as withTiming2,
+  withSequence
+} from "react-native-reanimated";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var AnimatedBox = Animated2.View;
+var Skeleton = React12.forwardRef(
+  ({
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const opacity = useSharedValue2(1);
+    useEffect2(() => {
+      opacity.value = withRepeat(
+        withSequence(
+          withTiming2(0.5, { duration: 1e3 }),
+          withTiming2(1, { duration: 1e3 })
+        ),
+        -1,
+        false
+      );
+    }, [opacity]);
+    const animatedStyle = useAnimatedStyle2(() => ({
+      opacity: opacity.value
+    }));
+    const colorStyles = useMemo13(
+      () => ({
+        base: { backgroundColor: colors.muted }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx13(
+      AnimatedBox,
+      {
+        ref,
+        style: [styles12.base, colorStyles.base, animatedStyle, style],
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+var SkeletonText = React12.forwardRef(
+  ({
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo13(
+      () => ({
+        text: { backgroundColor: colors.muted }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx13(Skeleton, { ref, style: [styles12.text, colorStyles.text, style], ...props });
+  }
+);
+SkeletonText.displayName = "SkeletonText";
+var SkeletonTitle = React12.forwardRef(
+  ({
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo13(
+      () => ({
+        title: { backgroundColor: colors.muted }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx13(Skeleton, { ref, style: [styles12.title, colorStyles.title, style], ...props });
+  }
+);
+SkeletonTitle.displayName = "SkeletonTitle";
+var SkeletonAvatar = React12.forwardRef(
+  ({
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo13(
+      () => ({
+        avatar: { backgroundColor: colors.muted }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx13(Skeleton, { ref, style: [styles12.avatar, colorStyles.avatar, style], ...props });
+  }
+);
+SkeletonAvatar.displayName = "SkeletonAvatar";
+var SkeletonCard = React12.forwardRef(
+  ({
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo13(
+      () => ({
+        card: {
+          borderColor: colors.border,
+          backgroundColor: colors.card
+        },
+        skeleton: { backgroundColor: colors.muted }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsxs7(View11, { ref, style: [styles12.card, colorStyles.card, style], ...props, children: [
+      /* @__PURE__ */ jsx13(Skeleton, { style: [styles12.cardTitle, colorStyles.skeleton] }),
+      /* @__PURE__ */ jsx13(Skeleton, { style: [styles12.cardLine1, colorStyles.skeleton] }),
+      /* @__PURE__ */ jsx13(Skeleton, { style: [styles12.cardLine2, colorStyles.skeleton] }),
+      /* @__PURE__ */ jsxs7(View11, { style: styles12.cardBadges, children: [
+        /* @__PURE__ */ jsx13(Skeleton, { style: [styles12.cardBadge, colorStyles.skeleton] }),
+        /* @__PURE__ */ jsx13(Skeleton, { style: [styles12.cardBadge, colorStyles.skeleton] })
+      ] })
+    ] });
+  }
+);
+SkeletonCard.displayName = "SkeletonCard";
+var styles12 = StyleSheet12.create({
+  base: {
+    borderRadius: 6
+  },
+  text: {
+    height: 16,
+    width: "75%",
+    borderRadius: 6
+  },
+  title: {
+    height: 24,
+    width: "50%",
+    borderRadius: 6
+  },
+  avatar: {
+    height: 40,
+    width: 40,
+    borderRadius: 20
+  },
+  card: {
+    gap: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 16
+  },
+  cardTitle: {
+    height: 20,
+    width: "66%",
+    borderRadius: 6
+  },
+  cardLine1: {
+    height: 16,
+    width: "100%",
+    borderRadius: 6
+  },
+  cardLine2: {
+    height: 16,
+    width: "80%",
+    borderRadius: 6
+  },
+  cardBadges: {
+    flexDirection: "row",
+    gap: 8,
+    paddingTop: 8
+  },
+  cardBadge: {
+    height: 24,
+    width: 64,
+    borderRadius: 12
+  }
+});
+
+// src/components/Dialog.native.tsx
+import React13, { useMemo as useMemo14 } from "react";
+import {
+  View as View12,
+  Text as Text10,
+  Modal as Modal2,
+  Pressable as Pressable7,
+  StyleSheet as StyleSheet13
+} from "react-native";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function Dialog({
+  open = false,
+  onOpenChange,
+  children,
+  ...props
+}) {
+  const { colors } = useTheme();
+  const colorStyles = useMemo14(
+    () => ({
+      content: { backgroundColor: colors.card }
+    }),
+    [colors]
+  );
+  return /* @__PURE__ */ jsx14(
+    Modal2,
+    {
+      visible: open,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: () => onOpenChange?.(false),
+      ...props,
+      children: /* @__PURE__ */ jsx14(
+        Pressable7,
+        {
+          style: styles13.backdrop,
+          onPress: () => onOpenChange?.(false),
+          children: /* @__PURE__ */ jsx14(
+            Pressable7,
+            {
+              style: [styles13.content, colorStyles.content],
+              onPress: (e) => e.stopPropagation(),
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+}
+Dialog.displayName = "Dialog";
+var DialogHeader = React13.forwardRef(
+  ({
+    children,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo14(
+      () => ({
+        header: { borderBottomColor: colors.border }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx14(View12, { ref, style: [styles13.header, colorStyles.header, style], ...props, children });
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogTitle = React13.forwardRef(
+  ({
+    children,
+    style,
+    textStyle,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo14(
+      () => ({
+        titleText: { color: colors.cardForeground }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx14(View12, { ref, style: [style], ...props, children: typeof children === "string" ? /* @__PURE__ */ jsx14(Text10, { style: [styles13.titleText, colorStyles.titleText, textStyle], children }) : children });
+  }
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React13.forwardRef(
+  ({
+    children,
+    style,
+    textStyle,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo14(
+      () => ({
+        descriptionText: { color: colors.mutedForeground }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx14(View12, { ref, style: [styles13.description, style], ...props, children: typeof children === "string" ? /* @__PURE__ */ jsx14(Text10, { style: [styles13.descriptionText, colorStyles.descriptionText, textStyle], children }) : children });
+  }
+);
+DialogDescription.displayName = "DialogDescription";
+var DialogContent = React13.forwardRef(
+  ({
+    children,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx14(View12, { ref, style: [styles13.body, style], ...props, children });
+  }
+);
+DialogContent.displayName = "DialogContent";
+var DialogFooter = React13.forwardRef(
+  ({
+    children,
+    style,
+    className,
+    // Ignored in RN
+    ...props
+  }, ref) => {
+    const { colors } = useTheme();
+    const colorStyles = useMemo14(
+      () => ({
+        footer: { borderTopColor: colors.border }
+      }),
+      [colors]
+    );
+    return /* @__PURE__ */ jsx14(View12, { ref, style: [styles13.footer, colorStyles.footer, style], ...props, children });
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogClose = React13.forwardRef(
+  ({
+    children,
+    onClose,
+    className
+    // Ignored in RN
+  }, ref) => {
+    return /* @__PURE__ */ jsx14(Pressable7, { ref, onPress: onClose, children });
+  }
+);
+DialogClose.displayName = "DialogClose";
+var styles13 = StyleSheet13.create({
+  backdrop: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    padding: 16
+  },
+  content: {
+    width: "100%",
+    maxWidth: 512,
+    borderRadius: 12,
+    maxHeight: "85%",
+    overflow: "hidden"
+  },
+  header: {
+    padding: 16,
+    borderBottomWidth: 1
+  },
+  titleText: {
+    fontSize: 18,
+    fontWeight: "600"
+  },
+  description: {
+    marginTop: 4
+  },
+  descriptionText: {
+    fontSize: 14
+  },
+  body: {
+    padding: 16
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 8,
+    padding: 16,
+    borderTopWidth: 1
+  }
+});
+
+// src/components/Progress.native.tsx
+import React14, { useEffect as useEffect3, useRef } from "react";
+import {
+  View as View13,
+  Animated as Animated3,
+  StyleSheet as StyleSheet14
+} from "react-native";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Progress = React14.forwardRef(
+  ({ value = 0, style, className }, ref) => {
+    const { colors } = useTheme();
+    const animatedWidth = useRef(new Animated3.Value(value)).current;
+    useEffect3(() => {
+      Animated3.timing(animatedWidth, {
+        toValue: value,
+        duration: 200,
+        useNativeDriver: false
+      }).start();
+    }, [value, animatedWidth]);
+    return /* @__PURE__ */ jsx15(
+      View13,
+      {
+        ref,
+        style: [
+          styles14.track,
+          { backgroundColor: colors.secondary },
+          style
+        ],
+        children: /* @__PURE__ */ jsx15(
+          Animated3.View,
+          {
+            style: [
+              styles14.indicator,
+              {
+                backgroundColor: colors.primary,
+                width: animatedWidth.interpolate({
+                  inputRange: [0, 100],
+                  outputRange: ["0%", "100%"],
+                  extrapolate: "clamp"
+                })
+              }
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+var styles14 = StyleSheet14.create({
+  track: {
+    height: 16,
+    width: "100%",
+    overflow: "hidden",
+    borderRadius: 9999
+    // rounded-full
+  },
+  indicator: {
+    height: "100%"
+  }
+});
+
+// src/components/Tabs.native.tsx
+import React15, { createContext as createContext2, useContext as useContext2, useMemo as useMemo15 } from "react";
+import {
+  View as View14,
+  Text as Text11,
+  Pressable as Pressable8,
+  StyleSheet as StyleSheet15
+} from "react-native";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var TabsContext = createContext2(null);
+function useTabsContext() {
+  const context = useContext2(TabsContext);
+  if (!context) {
+    throw new Error("Tabs components must be used within a Tabs provider");
+  }
+  return context;
+}
+var Tabs = React15.forwardRef(
+  ({ value, onValueChange, children, style, className, defaultValue }, ref) => {
+    const contextValue = useMemo15(
+      () => ({ value, onValueChange }),
+      [value, onValueChange]
+    );
+    return /* @__PURE__ */ jsx16(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx16(View14, { ref, style, children }) });
+  }
+);
+Tabs.displayName = "Tabs";
+var TabsList = React15.forwardRef(
+  ({ children, style, className }, ref) => {
+    const { colors } = useTheme();
+    return /* @__PURE__ */ jsx16(
+      View14,
+      {
+        ref,
+        style: [
+          styles15.list,
+          { backgroundColor: colors.muted },
+          style
+        ],
+        children
+      }
+    );
+  }
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = React15.forwardRef(
+  ({ value, children, disabled, style, textStyle, className }, ref) => {
+    const { colors } = useTheme();
+    const { value: activeValue, onValueChange } = useTabsContext();
+    const isActive = activeValue === value;
+    return /* @__PURE__ */ jsx16(
+      Pressable8,
+      {
+        ref,
+        disabled,
+        onPress: () => onValueChange(value),
+        style: ({ pressed }) => [
+          styles15.trigger,
+          isActive && [styles15.triggerActive, { backgroundColor: colors.background }],
+          pressed && styles15.pressed,
+          disabled && styles15.disabled,
+          style
+        ],
+        children: typeof children === "string" ? /* @__PURE__ */ jsx16(
+          Text11,
+          {
+            style: [
+              styles15.triggerText,
+              { color: colors.mutedForeground },
+              isActive && { color: colors.foreground },
+              textStyle
+            ],
+            children
+          }
+        ) : children
+      }
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React15.forwardRef(
+  ({ value, children, style, className }, ref) => {
+    const { value: activeValue } = useTabsContext();
+    if (activeValue !== value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx16(View14, { ref, style: [styles15.content, style], children });
+  }
+);
+TabsContent.displayName = "TabsContent";
+var styles15 = StyleSheet15.create({
+  list: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 8,
+    padding: 4,
+    gap: 4
+  },
+  trigger: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6
+  },
+  triggerActive: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  triggerText: {
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  pressed: {
+    opacity: 0.8
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  content: {
+    marginTop: 8
+  }
+});
+
+// src/components/Accordion.native.tsx
+import React16, {
+  createContext as createContext3,
+  useContext as useContext3,
+  useMemo as useMemo16,
+  useRef as useRef2,
+  useEffect as useEffect4,
+  useState as useState3
+} from "react";
+import {
+  View as View15,
+  Text as Text12,
+  Pressable as Pressable9,
+  Animated as Animated4,
+  StyleSheet as StyleSheet16,
+  LayoutAnimation,
+  Platform,
+  UIManager
+} from "react-native";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+var AccordionContext = createContext3(null);
+function useAccordionContext() {
+  const context = useContext3(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion components must be used within an Accordion provider");
+  }
+  return context;
+}
+var AccordionItemContext = createContext3(null);
+function useAccordionItemContext() {
+  const context = useContext3(AccordionItemContext);
+  if (!context) {
+    throw new Error("AccordionItem components must be used within an AccordionItem");
+  }
+  return context;
+}
+var Accordion = React16.forwardRef(
+  ({
+    type = "single",
+    value,
+    defaultValue,
+    onValueChange,
+    collapsible = false,
+    children,
+    style,
+    className
+  }, ref) => {
+    const [internalValue, setInternalValue] = useState3(() => {
+      if (value !== void 0) {
+        return Array.isArray(value) ? value : value ? [value] : [];
+      }
+      if (defaultValue !== void 0) {
+        return Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : [];
+      }
+      return [];
+    });
+    const expandedItems = value !== void 0 ? Array.isArray(value) ? value : value ? [value] : [] : internalValue;
+    const toggleItem = (itemValue) => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      let newItems;
+      if (type === "single") {
+        if (expandedItems.includes(itemValue)) {
+          newItems = collapsible ? [] : [itemValue];
+        } else {
+          newItems = [itemValue];
+        }
+      } else {
+        if (expandedItems.includes(itemValue)) {
+          newItems = expandedItems.filter((v) => v !== itemValue);
+        } else {
+          newItems = [...expandedItems, itemValue];
+        }
+      }
+      if (value === void 0) {
+        setInternalValue(newItems);
+      }
+      if (onValueChange) {
+        onValueChange(type === "single" ? newItems[0] || "" : newItems);
+      }
+    };
+    const contextValue = useMemo16(
+      () => ({ type, expandedItems, toggleItem, collapsible }),
+      [type, expandedItems, collapsible]
+    );
+    return /* @__PURE__ */ jsx17(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx17(View15, { ref, style, children }) });
+  }
+);
+Accordion.displayName = "Accordion";
+var AccordionItem = React16.forwardRef(
+  ({ value, children, style, className }, ref) => {
+    const { colors } = useTheme();
+    const { expandedItems } = useAccordionContext();
+    const isExpanded = expandedItems.includes(value);
+    const contextValue = useMemo16(
+      () => ({ value, isExpanded }),
+      [value, isExpanded]
+    );
+    return /* @__PURE__ */ jsx17(AccordionItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx17(
+      View15,
+      {
+        ref,
+        style: [
+          styles16.item,
+          { borderBottomColor: colors.border },
+          style
+        ],
+        children
+      }
+    ) });
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React16.forwardRef(
+  ({ children, style, textStyle, className }, ref) => {
+    const { colors } = useTheme();
+    const { toggleItem } = useAccordionContext();
+    const { value, isExpanded } = useAccordionItemContext();
+    const rotateAnim = useRef2(new Animated4.Value(isExpanded ? 1 : 0)).current;
+    useEffect4(() => {
+      Animated4.timing(rotateAnim, {
+        toValue: isExpanded ? 1 : 0,
+        duration: 200,
+        useNativeDriver: true
+      }).start();
+    }, [isExpanded, rotateAnim]);
+    const rotation = rotateAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["0deg", "180deg"]
+    });
+    return /* @__PURE__ */ jsxs8(
+      Pressable9,
+      {
+        ref,
+        onPress: () => toggleItem(value),
+        style: ({ pressed }) => [
+          styles16.trigger,
+          pressed && styles16.pressed,
+          style
+        ],
+        children: [
+          typeof children === "string" ? /* @__PURE__ */ jsx17(Text12, { style: [styles16.triggerText, { color: colors.foreground }, textStyle], children }) : /* @__PURE__ */ jsx17(View15, { style: styles16.triggerContent, children }),
+          /* @__PURE__ */ jsx17(Animated4.View, { style: { transform: [{ rotate: rotation }] }, children: /* @__PURE__ */ jsx17(ChevronIcon, { color: colors.mutedForeground }) })
+        ]
+      }
+    );
+  }
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React16.forwardRef(
+  ({ children, style, className }, ref) => {
+    const { isExpanded } = useAccordionItemContext();
+    if (!isExpanded) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx17(View15, { ref, style: [styles16.content, style], children });
+  }
+);
+AccordionContent.displayName = "AccordionContent";
+function ChevronIcon({ color = "#666", size = 16 }) {
+  return /* @__PURE__ */ jsx17(View15, { style: { width: size, height: size, justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx17(
+    View15,
+    {
+      style: {
+        width: size * 0.5,
+        height: size * 0.5,
+        borderRightWidth: 2,
+        borderBottomWidth: 2,
+        borderColor: color,
+        transform: [{ rotate: "45deg" }, { translateY: -2 }]
+      }
+    }
+  ) });
+}
+var styles16 = StyleSheet16.create({
+  item: {
+    borderBottomWidth: 1
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 16
+  },
+  triggerContent: {
+    flex: 1
+  },
+  triggerText: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  pressed: {
+    opacity: 0.7
+  },
+  content: {
+    paddingBottom: 16
+  }
+});
+
+// src/components/Slider.native.tsx
+import React17, { useRef as useRef3, useState as useState4, useCallback, useEffect as useEffect5 } from "react";
+import {
+  View as View16,
+  Animated as Animated5,
+  PanResponder,
+  StyleSheet as StyleSheet17
+} from "react-native";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var Slider = React17.forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue = [0],
+    onValueChange,
+    onValueCommit,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    style
+  }, ref) => {
+    const { colors } = useTheme();
+    const [trackWidth, setTrackWidth] = useState4(0);
+    const isControlled = controlledValue !== void 0;
+    const [internalValue, setInternalValue] = useState4(defaultValue[0]);
+    const currentValue = isControlled ? controlledValue[0] ?? 0 : internalValue;
+    const pan = useRef3(new Animated5.Value(0)).current;
+    const stateRef = useRef3({
+      trackWidth: 0,
+      currentValue: 0,
+      isControlled: false,
+      disabled: false,
+      min: 0,
+      max: 100,
+      step: 1,
+      onValueChange: void 0,
+      onValueCommit: void 0,
+      setInternalValue: (() => {
+      })
+    });
+    const startPosition = useRef3(0);
+    useEffect5(() => {
+      stateRef.current = {
+        trackWidth,
+        currentValue,
+        isControlled,
+        disabled,
+        min,
+        max,
+        step,
+        onValueChange,
+        onValueCommit,
+        setInternalValue
+      };
+    });
+    const valueToPosition = useCallback(
+      (val, width = trackWidth) => {
+        if (width === 0) return 0;
+        const percentage = (val - min) / (max - min);
+        return percentage * width;
+      },
+      [trackWidth, min, max]
+    );
+    const positionToValueRef = (pos) => {
+      const { trackWidth: w, min: minVal, max: maxVal, step: stepVal } = stateRef.current;
+      if (w === 0) return minVal;
+      const percentage = Math.max(0, Math.min(1, pos / w));
+      let val = minVal + percentage * (maxVal - minVal);
+      val = Math.round(val / stepVal) * stepVal;
+      return Math.max(minVal, Math.min(maxVal, val));
+    };
+    const valueToPositionRef = (val) => {
+      const { trackWidth: w, min: minVal, max: maxVal } = stateRef.current;
+      if (w === 0) return 0;
+      const percentage = (val - minVal) / (maxVal - minVal);
+      return percentage * w;
+    };
+    useEffect5(() => {
+      const position = valueToPosition(currentValue);
+      pan.setValue(position);
+    }, [currentValue, valueToPosition, pan]);
+    const panResponder = useRef3(
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => !stateRef.current.disabled,
+        onMoveShouldSetPanResponder: () => !stateRef.current.disabled,
+        onPanResponderGrant: () => {
+          pan.stopAnimation();
+          startPosition.current = valueToPositionRef(stateRef.current.currentValue);
+        },
+        onPanResponderMove: (_, gestureState) => {
+          const { trackWidth: w, isControlled: controlled, onValueChange: onChange, setInternalValue: setVal } = stateRef.current;
+          const newPosition = Math.max(
+            0,
+            Math.min(w, startPosition.current + gestureState.dx)
+          );
+          pan.setValue(newPosition);
+          const newValue = positionToValueRef(newPosition);
+          if (!controlled) {
+            setVal(newValue);
+          }
+          onChange?.([newValue]);
+        },
+        onPanResponderRelease: () => {
+          const { onValueCommit: onCommit } = stateRef.current;
+          const newValue = positionToValueRef(pan._value);
+          onCommit?.([newValue]);
+        }
+      })
+    ).current;
+    const handleTrackLayout = (event) => {
+      const { width } = event.nativeEvent.layout;
+      setTrackWidth(width - 16);
+    };
+    const handleTrackPress = (event) => {
+      if (disabled) return;
+      const { locationX } = event.nativeEvent;
+      const positionToValue = (pos) => {
+        if (trackWidth === 0) return min;
+        const percentage = Math.max(0, Math.min(1, pos / trackWidth));
+        let val = min + percentage * (max - min);
+        val = Math.round(val / step) * step;
+        return Math.max(min, Math.min(max, val));
+      };
+      const newValue = positionToValue(locationX - 8);
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.([newValue]);
+      onValueCommit?.([newValue]);
+      Animated5.spring(pan, {
+        toValue: valueToPosition(newValue),
+        useNativeDriver: false,
+        friction: 7
+      }).start();
+    };
+    const fillPercentage = (currentValue - min) / (max - min) * 100;
+    return /* @__PURE__ */ jsxs9(
+      View16,
+      {
+        ref,
+        style: [styles17.container, style],
+        onLayout: handleTrackLayout,
+        onStartShouldSetResponder: () => !disabled,
+        onResponderRelease: handleTrackPress,
+        children: [
+          /* @__PURE__ */ jsx18(
+            View16,
+            {
+              style: [
+                styles17.track,
+                { backgroundColor: colors.secondary },
+                disabled && styles17.trackDisabled
+              ],
+              children: /* @__PURE__ */ jsx18(
+                View16,
+                {
+                  style: [
+                    styles17.range,
+                    {
+                      backgroundColor: disabled ? colors.muted : colors.primary,
+                      width: `${fillPercentage}%`
+                    }
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx18(
+            Animated5.View,
+            {
+              ...panResponder.panHandlers,
+              style: [
+                styles17.thumb,
+                {
+                  backgroundColor: colors.background,
+                  borderColor: disabled ? colors.muted : colors.primary,
+                  transform: [{ translateX: pan }]
+                },
+                disabled && styles17.thumbDisabled
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+var styles17 = StyleSheet17.create({
+  container: {
+    height: 20,
+    justifyContent: "center",
+    position: "relative"
+  },
+  track: {
+    height: 6,
+    borderRadius: 3,
+    width: "100%",
+    overflow: "hidden"
+  },
+  trackDisabled: {
+    opacity: 0.5
+  },
+  range: {
+    height: "100%",
+    borderRadius: 3
+  },
+  thumb: {
+    position: "absolute",
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    borderWidth: 2,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 1,
+    elevation: 2
+  },
+  thumbDisabled: {
+    opacity: 0.5
+  }
+});
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  PressableBadge,
+  PressableCard,
+  Progress,
+  Select,
+  Separator,
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonCard,
+  SkeletonText,
+  SkeletonTitle,
+  Slider,
+  Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  ThemeProvider,
+  buttonVariants,
+  defaultColors,
+  getInitials,
+  useTheme
+};
+//# sourceMappingURL=index.native.js.map