@nwartz/design-system 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2549 @@
+// tokens/colors.ts
+var darkColors = {
+  /** App background — the deepest layer. */
+  backgroundScreen: "#131313",
+  /** Raised surfaces (cards, sheets, modals). */
+  shapePrimary: "#1A1A1A",
+  /** Inset surfaces, secondary containers, chips. */
+  shapeSecondary: "#2D2D2D",
+  /** Borders, dividers, disabled outlines. */
+  shapeTertiary: "#404040",
+  /** Primary text on dark backgrounds. */
+  textPrimary: "#FFFFFF",
+  /** Secondary / muted text. */
+  textSecondary: "#E1E1E1",
+  /** Tertiary / placeholder text. */
+  textTertiary: "#A0A0A0",
+  /** Brand primary — neon lime accent. */
+  primaryPure: "#CEFE00",
+  /** Brand primary — darker shade for hover/pressed. */
+  primaryMid: "#87AD00",
+  /** Destructive actions. */
+  dangerMid: "#BB4355"
+};
+var lightColors = {
+  backgroundScreen: "#F6F5F4",
+  shapePrimary: "#FAF9F7",
+  shapeSecondary: "#E9E8E7",
+  shapeTertiary: "#D9D8D7",
+  textPrimary: "#141414",
+  textSecondary: "#737271",
+  textTertiary: "#8E8D8B",
+  primaryPure: "#CEFE00",
+  primaryMid: "#87AD00",
+  dangerMid: "#BB4355"
+};
+
+// tokens/typography.ts
+import { Platform } from "react-native";
+var fontFamilyBase = Platform.select({
+  ios: "Archivo",
+  android: "Archivo",
+  default: "Archivo, system-ui, sans-serif"
+});
+var typography = {
+  /** 56px / 900 / 1.15 — hero display, stat rings. */
+  display: {
+    fontFamily: fontFamilyBase,
+    fontSize: 56,
+    fontWeight: "900",
+    lineHeight: 64
+  },
+  /** 20px / 700 / 1.0 — section headings, card titles. */
+  heading: {
+    fontFamily: fontFamilyBase,
+    fontSize: 20,
+    fontWeight: "700",
+    lineHeight: 20
+  },
+  /** 16px / 400 / 1.5 — body copy, list items. */
+  body: {
+    fontFamily: fontFamilyBase,
+    fontSize: 16,
+    fontWeight: "400",
+    lineHeight: 24
+  },
+  /** 12px / 400 / 1.5 — captions, helper text, overlines. */
+  caption: {
+    fontFamily: fontFamilyBase,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 18
+  }
+};
+
+// tokens/elevation.ts
+import { Platform as Platform2 } from "react-native";
+function makeElevation(androidElevation, iOSShadow) {
+  if (Platform2.OS === "android") {
+    return { elevation: androidElevation };
+  }
+  return {
+    shadowColor: "#101828",
+    shadowOffset: { width: iOSShadow.offsetX, height: iOSShadow.offsetY },
+    shadowOpacity: iOSShadow.opacity,
+    shadowRadius: iOSShadow.radius
+  };
+}
+var elevation = {
+  /** $elevation-level-xs — subtle lift for inline elements. */
+  xs: makeElevation(1, { radius: 2, offsetX: 0, offsetY: 1, opacity: 0.05 }),
+  /** $elevation-level-sm — cards at rest. */
+  sm: makeElevation(2, { radius: 3, offsetX: 0, offsetY: 1, opacity: 0.1 }),
+  /** $elevation-level-md — raised panels, dropdowns. */
+  md: makeElevation(4, { radius: 8, offsetX: 0, offsetY: 4, opacity: 0.1 }),
+  /** $elevation-level-lg — modals, floating sheets. */
+  lg: makeElevation(8, { radius: 16, offsetX: 0, offsetY: 12, opacity: 0.08 }),
+  /** $elevation-level-xl — bottom sheets, popover menus. */
+  xl: makeElevation(12, { radius: 24, offsetX: 0, offsetY: 20, opacity: 0.08 }),
+  /** $elevation-level-xxl — full-screen overlays. */
+  xxl: makeElevation(16, { radius: 48, offsetX: 0, offsetY: 24, opacity: 0.08 }),
+  /** $elevation-level-xxxl — deepest layer. */
+  xxxl: makeElevation(24, { radius: 64, offsetX: 0, offsetY: 32, opacity: 0.08 })
+};
+
+// tokens/spacing.ts
+var spacing = {
+  /** 0px */
+  none: 0,
+  /** 2px — hairline gaps. */
+  xxs: 2,
+  /** 4px — tight inset (icon-to-label). */
+  xs: 4,
+  /** 8px — compact gaps, small padding. */
+  sm: 8,
+  /** 12px — default inner padding for small controls. */
+  md: 12,
+  /** 16px — standard card padding, list row gaps. */
+  lg: 16,
+  /** 20px — generous spacing. */
+  xl: 20,
+  /** 24px — section gaps, card outer padding. */
+  "2xl": 24,
+  /** 32px — large section spacing. */
+  "3xl": 32,
+  /** 40px — page-level horizontal padding. */
+  "4xl": 40,
+  /** 48px — hero spacing. */
+  "5xl": 48,
+  /** 64px — page-level vertical spacing. */
+  "6xl": 64,
+  /** 80px — maximum spacing. */
+  "7xl": 80
+};
+
+// tokens/radius.ts
+var radius = {
+  /** 4px — tiny elements: badges, tags. */
+  xs: 4,
+  /** 8px — small controls: inputs, chips. */
+  sm: 8,
+  /** 12px — medium elements: tiles, list rows. */
+  md: 12,
+  /** 16px — cards, panels. */
+  lg: 16,
+  /** 24px — large cards, modals. */
+  xl: 24,
+  /** Full circle / pill shape. */
+  full: 9999
+};
+
+// tokens/mapping.ts
+var colorMap = {
+  background: "backgroundScreen",
+  backgroundElement: "shapeSecondary",
+  backgroundSelected: "shapeSecondary",
+  surfaceLowest: "shapePrimary",
+  surfaceHigh: "shapeSecondary",
+  outline: "shapeTertiary",
+  outlineVariant: "shapeTertiary",
+  text: "textPrimary",
+  textSecondary: "textSecondary",
+  secondary: "textSecondary",
+  secondaryContainer: "shapeSecondary",
+  onSecondaryContainer: "textSecondary",
+  success: "primaryPure",
+  danger: "dangerMid",
+  info: "textSecondary",
+  warning: "textSecondary"
+};
+var spacingMap = {
+  2: "xxs",
+  4: "xs",
+  8: "sm",
+  12: "md",
+  16: "lg",
+  20: "xl",
+  24: "2xl",
+  32: "3xl",
+  40: "4xl",
+  48: "5xl",
+  64: "6xl",
+  80: "7xl"
+};
+var radiusMap = {
+  4: "xs",
+  8: "sm",
+  10: "sm",
+  12: "md",
+  14: "md",
+  16: "lg",
+  24: "xl",
+  32: "xl",
+  9999: "full"
+};
+
+// theme/theme.tsx
+import { createContext, useContext, useMemo } from "react";
+import { useColorScheme } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(null);
+function ThemeProvider({ children, mode: modeOverride, colors: colorOverrides }) {
+  const systemScheme = useColorScheme();
+  const mode = modeOverride ?? (systemScheme === "light" ? "light" : "dark");
+  const value = useMemo(
+    () => ({
+      mode,
+      isDark: mode === "dark",
+      colors: { ...mode === "dark" ? darkColors : lightColors, ...colorOverrides }
+    }),
+    [mode, colorOverrides]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    return { mode: "dark", isDark: true, colors: darkColors };
+  }
+  return ctx;
+}
+
+// components/Box.tsx
+import { View } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Box({
+  bg,
+  p,
+  px,
+  py,
+  m,
+  mx,
+  my,
+  rounded,
+  elevation: elev,
+  direction,
+  align,
+  justify,
+  gap,
+  fullWidth,
+  fullHeight,
+  style,
+  children,
+  ...rest
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx2(
+    View,
+    {
+      style: [
+        bg && { backgroundColor: theme.colors[bg] },
+        p !== void 0 && { padding: spacing[p] },
+        px !== void 0 && { paddingHorizontal: spacing[px] },
+        py !== void 0 && { paddingVertical: spacing[py] },
+        m !== void 0 && { margin: spacing[m] },
+        mx !== void 0 && { marginHorizontal: spacing[mx] },
+        my !== void 0 && { marginVertical: spacing[my] },
+        rounded !== void 0 && { borderRadius: radius[rounded] },
+        elev !== void 0 && elevation[elev],
+        direction !== void 0 && { flexDirection: direction },
+        align !== void 0 && { alignItems: align },
+        justify !== void 0 && { justifyContent: justify },
+        gap !== void 0 && { gap },
+        fullWidth && { width: "100%" },
+        fullHeight && { height: "100%" },
+        style
+      ],
+      ...rest,
+      children
+    }
+  );
+}
+
+// components/Text.tsx
+import { Text as RNText } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Text({ variant = "body", color = "textPrimary", textStyle, style, children, ...rest }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx3(
+    RNText,
+    {
+      style: [typography[variant], { color: theme.colors[color] }, textStyle, style],
+      ...rest,
+      children
+    }
+  );
+}
+
+// components/Card.tsx
+import { StyleSheet, View as View2 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Card({
+  level = "sm",
+  noPadding = false,
+  bordered = false,
+  radius: radiusToken,
+  style,
+  children,
+  ...rest
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx4(
+    View2,
+    {
+      style: [
+        styles.card,
+        elevation[level],
+        { backgroundColor: theme.colors.shapePrimary },
+        radiusToken !== void 0 && { borderRadius: radius[radiusToken] },
+        bordered && { borderWidth: 1, borderColor: theme.colors.shapeTertiary },
+        !noPadding && { padding: spacing.lg },
+        style
+      ],
+      ...rest,
+      children
+    }
+  );
+}
+var styles = StyleSheet.create({
+  card: {
+    borderRadius: radius.lg
+  }
+});
+
+// components/Button.tsx
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet as StyleSheet2,
+  View as View3
+} from "react-native";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+function palette(variant, colors, pressed, brandPrimary, brandOnPrimary) {
+  const primary = brandPrimary ?? "#3D8BFF";
+  const onPrimary = brandOnPrimary ?? "#FFFFFF";
+  switch (variant) {
+    case "primary":
+      return {
+        background: pressed ? primary + "CC" : primary,
+        border: "transparent",
+        label: onPrimary
+      };
+    case "secondary":
+      return {
+        background: pressed ? colors.shapeSecondary + "CC" : colors.shapeSecondary,
+        border: "transparent",
+        label: colors.textPrimary
+      };
+    case "outline":
+      return {
+        background: pressed ? colors.shapeSecondary + "33" : "transparent",
+        border: colors.shapeSecondary,
+        label: colors.textPrimary
+      };
+    case "danger":
+      return {
+        background: pressed ? "#FF45451A" : "transparent",
+        border: "#FF454566",
+        label: "#FF4545"
+      };
+    case "ghost":
+      return {
+        background: pressed ? colors.shapeSecondary + "33" : "transparent",
+        border: "transparent",
+        label: colors.textSecondary
+      };
+  }
+}
+function Button({
+  label,
+  variant = "primary",
+  loading = false,
+  size = "md",
+  style,
+  disabled,
+  ...rest
+}) {
+  const theme = useTheme();
+  const isDisabled = disabled || loading;
+  return /* @__PURE__ */ jsx5(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      disabled: isDisabled,
+      style: ({ pressed }) => {
+        const colors = palette(variant, theme.colors, pressed);
+        return [
+          styles2.base,
+          size === "sm" && styles2.small,
+          {
+            backgroundColor: colors.background,
+            borderColor: colors.border,
+            opacity: isDisabled ? 0.5 : 1
+          },
+          style
+        ];
+      },
+      ...rest,
+      children: ({ pressed }) => {
+        const colors = palette(variant, theme.colors, pressed);
+        return /* @__PURE__ */ jsxs(View3, { style: styles2.row, children: [
+          loading ? /* @__PURE__ */ jsx5(ActivityIndicator, { size: "small", color: colors.label }) : null,
+          /* @__PURE__ */ jsx5(
+            Text,
+            {
+              variant: "body",
+              color: "textPrimary",
+              textStyle: [styles2.label, size === "sm" && styles2.labelSmall, { color: colors.label }],
+              children: label
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+var styles2 = StyleSheet2.create({
+  base: {
+    borderRadius: radius.sm,
+    borderWidth: 1,
+    paddingVertical: spacing.lg,
+    paddingHorizontal: spacing["2xl"],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  small: {
+    paddingVertical: spacing.sm + spacing.xxs,
+    paddingHorizontal: spacing.lg
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: spacing.sm
+  },
+  label: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: "600"
+  },
+  labelSmall: {
+    fontSize: 14,
+    lineHeight: 20
+  }
+});
+
+// components/Icon.tsx
+import {
+  CaretDown as CaretDownIcon,
+  CaretUp as CaretUpIcon,
+  CaretRight as CaretRightIcon,
+  Check as CheckIcon,
+  XCircle as XCircleIcon,
+  X as XIcon,
+  WarningCircle as WarningCircleIcon,
+  WarningOctagon as WarningOctagonIcon,
+  House as HouseIcon,
+  Bell as BellIcon,
+  Broadcast as BroadcastIcon,
+  ChatCircle as ChatCircleIcon,
+  CheckCircle as CheckCircleIcon,
+  Truck as TruckIcon,
+  CreditCard as CreditCardIcon,
+  Crown as CrownIcon,
+  CrosshairSimple as CrosshairSimpleIcon,
+  Gauge as GaugeIcon,
+  Lightning as LightningIcon,
+  ThumbsUp as ThumbsUpIcon,
+  MapTrifold as MapTrifoldIcon,
+  MapPin as MapPinIcon,
+  Medal as MedalIcon,
+  Microphone as MicrophoneIcon,
+  SpeakerSimpleX as SpeakerSimpleXIcon,
+  Play as PlayIcon,
+  Plus as PlusIcon,
+  RadioButton as RadioButtonIcon,
+  Radio as RadioIcon,
+  ChartBar as ChartBarIcon,
+  Receipt as ReceiptIcon,
+  PathIcon,
+  MagnifyingGlass as MagnifyingGlassIcon,
+  GearSix as GearSixIcon,
+  ShareNetwork as ShareNetworkIcon,
+  Star as StarIcon,
+  SignOut as SignOutIcon,
+  SteeringWheel as SteeringWheelIcon,
+  Timer as TimerIcon,
+  Pencil as PencilIcon,
+  User as UserIcon,
+  UserMinus as UserMinusIcon,
+  Users as UsersIcon,
+  Globe as GlobeIcon,
+  Wallet as WalletIcon,
+  Lock as LockIcon
+} from "phosphor-react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var iconMap = {
+  "caret-down": CaretDownIcon,
+  "caret-up": CaretUpIcon,
+  "caret-right": CaretRightIcon,
+  check: CheckIcon,
+  "x-circle": XCircleIcon,
+  x: XIcon,
+  "warning-circle": WarningCircleIcon,
+  "warning-octagon": WarningOctagonIcon,
+  house: HouseIcon,
+  bell: BellIcon,
+  broadcast: BroadcastIcon,
+  "chat-circle": ChatCircleIcon,
+  "check-circle": CheckCircleIcon,
+  truck: TruckIcon,
+  "credit-card": CreditCardIcon,
+  crown: CrownIcon,
+  "crosshair-simple": CrosshairSimpleIcon,
+  gauge: GaugeIcon,
+  lightning: LightningIcon,
+  "thumbs-up": ThumbsUpIcon,
+  "map-trifold": MapTrifoldIcon,
+  "map-pin": MapPinIcon,
+  medal: MedalIcon,
+  microphone: MicrophoneIcon,
+  "speaker-simple-x": SpeakerSimpleXIcon,
+  play: PlayIcon,
+  plus: PlusIcon,
+  "radio-button": RadioButtonIcon,
+  radio: RadioIcon,
+  "chart-bar": ChartBarIcon,
+  receipt: ReceiptIcon,
+  path: PathIcon,
+  "magnifying-glass": MagnifyingGlassIcon,
+  "gear-six": GearSixIcon,
+  "share-network": ShareNetworkIcon,
+  star: StarIcon,
+  "sign-out": SignOutIcon,
+  "steering-wheel": SteeringWheelIcon,
+  timer: TimerIcon,
+  pencil: PencilIcon,
+  user: UserIcon,
+  "user-minus": UserMinusIcon,
+  users: UsersIcon,
+  globe: GlobeIcon,
+  wallet: WalletIcon,
+  lock: LockIcon
+};
+function Icon({ name, size = 16, color, weight = "regular" }) {
+  const IconComponent = iconMap[name];
+  if (!IconComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(IconComponent, { size, color, weight });
+}
+
+// components/DropdownSelect.tsx
+import { useState } from "react";
+import {
+  FlatList,
+  Pressable as Pressable2,
+  StyleSheet as StyleSheet3,
+  View as View4
+} from "react-native";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function DropdownSelect({
+  items,
+  value,
+  onSelect,
+  open = true,
+  maxVisible = 5,
+  style,
+  ...rest
+}) {
+  const theme = useTheme();
+  const [hoveredKey, setHoveredKey] = useState(null);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx7(
+    View4,
+    {
+      style: [
+        styles3.container,
+        {
+          backgroundColor: theme.colors.backgroundScreen,
+          borderColor: theme.colors.shapeSecondary
+        },
+        elevation.xl,
+        style
+      ],
+      ...rest,
+      children: /* @__PURE__ */ jsx7(
+        FlatList,
+        {
+          data: items,
+          keyExtractor: (item) => item.key,
+          bounces: false,
+          showsVerticalScrollIndicator: items.length > maxVisible,
+          nestedScrollEnabled: true,
+          renderItem: ({ item }) => {
+            const isSelected = item.key === value;
+            const isHovered = item.key === hoveredKey;
+            const isDisabled = item.disabled;
+            let itemBg;
+            if (isHovered) {
+              itemBg = theme.colors.shapeSecondary;
+            } else if (isSelected) {
+              itemBg = theme.colors.backgroundScreen;
+            } else {
+              itemBg = "transparent";
+            }
+            return /* @__PURE__ */ jsxs2(View4, { children: [
+              /* @__PURE__ */ jsxs2(
+                Pressable2,
+                {
+                  disabled: isDisabled,
+                  onPress: () => onSelect?.(item),
+                  onHoverIn: () => setHoveredKey(item.key),
+                  onHoverOut: () => setHoveredKey(null),
+                  style: () => [
+                    styles3.item,
+                    { backgroundColor: itemBg },
+                    isDisabled && styles3.disabled
+                  ],
+                  children: [
+                    /* @__PURE__ */ jsx7(
+                      Text,
+                      {
+                        variant: "body",
+                        color: "textSecondary",
+                        textStyle: [
+                          styles3.itemLabel,
+                          { color: isDisabled ? theme.colors.textTertiary : theme.colors.textSecondary }
+                        ],
+                        children: item.label
+                      }
+                    ),
+                    isSelected && /* @__PURE__ */ jsx7(Icon, { name: "check", size: 16, color: theme.colors.textSecondary })
+                  ]
+                }
+              ),
+              item.key !== items[items.length - 1]?.key && /* @__PURE__ */ jsx7(
+                View4,
+                {
+                  style: [styles3.divider, { backgroundColor: theme.colors.shapePrimary }]
+                }
+              )
+            ] });
+          }
+        }
+      )
+    }
+  );
+}
+var styles3 = StyleSheet3.create({
+  container: {
+    borderRadius: radius.sm,
+    borderWidth: 1,
+    padding: spacing.xs,
+    gap: spacing.xxs
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: spacing.lg,
+    height: 40,
+    borderRadius: radius.sm
+  },
+  disabled: {
+    opacity: 0.32
+  },
+  itemLabel: {
+    fontSize: 14,
+    lineHeight: 21
+  },
+  divider: {
+    height: 1,
+    marginHorizontal: spacing.lg
+  }
+});
+
+// components/Autocomplete.tsx
+import { useState as useState2 } from "react";
+import {
+  Pressable as Pressable3,
+  StyleSheet as StyleSheet4,
+  TextInput,
+  View as View5
+} from "react-native";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function Autocomplete({
+  label,
+  value,
+  onChangeText,
+  size = "md",
+  disabled = false,
+  errorMessage,
+  items = [],
+  selectedItem,
+  onSelectItem,
+  open = false,
+  onToggle,
+  placeholder,
+  ...rest
+}) {
+  const theme = useTheme();
+  const [isFocused, setIsFocused] = useState2(false);
+  const hasValue = !!value && value.length > 0;
+  const showError = !!errorMessage;
+  const isOpen = open;
+  const inputHeight = size === "sm" ? 40 : 44;
+  const paddingHorizontal = size === "sm" ? spacing.md : spacing.lg;
+  const getBorderColor = () => {
+    if (showError) {
+      return theme.colors.dangerMid;
+    }
+    if (isFocused) {
+      return theme.colors.primaryMid;
+    }
+    return theme.colors.shapeTertiary;
+  };
+  const getBoxShadow = () => {
+    if (isFocused || showError) {
+      const focusColor = showError ? theme.colors.dangerMid : "#FFF6D4";
+      return {
+        shadowColor: focusColor,
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 0
+      };
+    }
+    return elevation.xs;
+  };
+  const inputContainerStyle = [
+    styles4.inputContainer,
+    {
+      height: inputHeight,
+      paddingHorizontal,
+      backgroundColor: theme.colors.shapePrimary,
+      borderColor: getBorderColor(),
+      borderWidth: 1,
+      borderRadius: radius.sm
+    },
+    getBoxShadow()
+  ];
+  return /* @__PURE__ */ jsxs3(View5, { style: [styles4.wrapper, disabled && styles4.disabledWrapper], children: [
+    /* @__PURE__ */ jsx8(
+      Text,
+      {
+        variant: "body",
+        color: "textSecondary",
+        textStyle: styles4.label,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs3(View5, { style: inputContainerStyle, children: [
+      /* @__PURE__ */ jsx8(
+        TextInput,
+        {
+          style: [
+            styles4.input,
+            {
+              color: theme.colors.textPrimary,
+              fontSize: 14
+            },
+            disabled && styles4.inputDisabled
+          ],
+          value,
+          onChangeText,
+          placeholder,
+          placeholderTextColor: theme.colors.textTertiary,
+          editable: !disabled,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsxs3(View5, { style: styles4.trailingIcons, children: [
+        hasValue && !disabled && /* @__PURE__ */ jsx8(
+          Pressable3,
+          {
+            onPress: () => onChangeText?.(""),
+            hitSlop: 8,
+            style: styles4.iconButton,
+            children: /* @__PURE__ */ jsx8(Icon, { name: "x-circle", size: 16, color: theme.colors.textSecondary })
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          Pressable3,
+          {
+            onPress: onToggle,
+            disabled,
+            hitSlop: 8,
+            style: styles4.iconButton,
+            children: /* @__PURE__ */ jsx8(
+              Icon,
+              {
+                name: isOpen ? "caret-up" : "caret-down",
+                size: 16,
+                color: theme.colors.textTertiary
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    showError && /* @__PURE__ */ jsxs3(View5, { style: styles4.errorRow, children: [
+      /* @__PURE__ */ jsx8(Icon, { name: "warning-circle", size: 16, color: theme.colors.dangerMid }),
+      /* @__PURE__ */ jsx8(
+        Text,
+        {
+          variant: "body",
+          color: "textSecondary",
+          textStyle: [styles4.errorText, { color: theme.colors.textSecondary }],
+          children: errorMessage
+        }
+      )
+    ] }),
+    isOpen && items.length > 0 && /* @__PURE__ */ jsx8(
+      DropdownSelect,
+      {
+        items,
+        value: selectedItem,
+        onSelect: (item) => {
+          onSelectItem?.(item);
+          onToggle?.();
+        },
+        open: isOpen,
+        style: styles4.dropdown
+      }
+    )
+  ] });
+}
+var styles4 = StyleSheet4.create({
+  wrapper: {
+    gap: spacing.xs
+  },
+  disabledWrapper: {
+    opacity: 0.32
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: "500"
+  },
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.sm
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+    includeFontPadding: false,
+    fontSize: 14,
+    lineHeight: 21
+  },
+  inputDisabled: {
+    opacity: 1
+  },
+  trailingIcons: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xs
+  },
+  iconButton: {
+    padding: 2
+  },
+  errorRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xs
+  },
+  errorText: {
+    fontSize: 14,
+    lineHeight: 21
+  },
+  dropdown: {
+    marginTop: spacing.xxs
+  }
+});
+
+// components/SegmentedTabs.tsx
+import { Pressable as Pressable4, StyleSheet as StyleSheet5, View as View6 } from "react-native";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function SegmentedTabs({ tabs, activeTabId, onTabChange }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ jsx9(View6, { style: styles5.container, children: tabs.map((tab) => {
+    const isActive = tab.id === activeTabId;
+    return /* @__PURE__ */ jsx9(
+      Pressable4,
+      {
+        accessibilityRole: "tab",
+        accessibilityState: { selected: isActive },
+        onPress: () => onTabChange(tab.id),
+        style: ({ pressed }) => [
+          styles5.tab,
+          pressed && styles5.pressed,
+          { borderBottomColor: isActive ? colors.primaryPure : colors.shapeTertiary }
+        ],
+        children: /* @__PURE__ */ jsx9(
+          Text,
+          {
+            variant: "body",
+            color: "textPrimary",
+            textStyle: [
+              styles5.label,
+              {
+                color: isActive ? colors.primaryPure : colors.textSecondary,
+                fontWeight: isActive ? "700" : "400"
+              }
+            ],
+            children: tab.label
+          }
+        )
+      },
+      tab.id
+    );
+  }) });
+}
+var styles5 = StyleSheet5.create({
+  container: {
+    flexDirection: "row",
+    paddingHorizontal: spacing.xs,
+    paddingBottom: spacing.xxs
+  },
+  tab: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: spacing.xs,
+    paddingBottom: spacing.sm,
+    borderBottomWidth: 2
+  },
+  label: {
+    fontSize: 16,
+    lineHeight: 24
+  },
+  pressed: {
+    opacity: 0.6
+  }
+});
+
+// components/Badge.tsx
+import { StyleSheet as StyleSheet6, View as View7 } from "react-native";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var colorPalette = {
+  primary: { stroke: "#cefe00", solidBg: "#f8ffc5", solidText: "#536e00", outlineText: "#cefe00" },
+  secondary: { stroke: "#4fa971", solidBg: "#ddfad9", solidText: "#25584d", outlineText: "#25584d" },
+  info: { stroke: "#1048d6", solidBg: "#ebf4ff", solidText: "#1048d6", outlineText: "#1048d6" },
+  warning: { stroke: "#e3993a", solidBg: "#fef9ec", solidText: "#642000", outlineText: "#e3993a" },
+  success: { stroke: "#138135", solidBg: "#f1feeb", solidText: "#05482c", outlineText: "#138135" },
+  error: { stroke: "#bb4355", solidBg: "#fdefed", solidText: "#bb4355", outlineText: "#bb4355" },
+  gray: { stroke: "#d9d8d7", solidBg: "#e9e8e7", solidText: "#737271", outlineText: "#737271" }
+};
+var sizeStyles = {
+  sm: { height: 22, paddingHorizontal: 8, fontSize: 12, lineHeight: 18, iconSize: 12 },
+  md: { height: 24, paddingHorizontal: 8, fontSize: 14, lineHeight: 21, iconSize: 14 },
+  lg: { height: 28, paddingHorizontal: 12, fontSize: 14, lineHeight: 21, iconSize: 14 }
+};
+function Badge({
+  label,
+  size = "md",
+  color = "gray",
+  mode = "solid",
+  icon,
+  trailingIcon,
+  style,
+  ...rest
+}) {
+  const palette2 = colorPalette[color];
+  const s = sizeStyles[size];
+  const bgColor = mode === "solid" ? palette2.solidBg : "transparent";
+  const textColor = mode === "solid" ? palette2.solidText : palette2.outlineText;
+  const borderColor = mode === "outline" ? palette2.stroke : "transparent";
+  return /* @__PURE__ */ jsxs4(
+    View7,
+    {
+      style: [
+        styles6.badge,
+        {
+          height: s.height,
+          paddingHorizontal: s.paddingHorizontal,
+          backgroundColor: bgColor,
+          borderColor,
+          borderWidth: 1,
+          borderRadius: 16
+        },
+        style
+      ],
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsx10(Icon, { name: icon, size: s.iconSize, color: textColor }),
+        /* @__PURE__ */ jsx10(
+          Text,
+          {
+            variant: "caption",
+            textStyle: [
+              styles6.label,
+              { color: textColor, fontSize: s.fontSize, lineHeight: s.lineHeight }
+            ],
+            children: label
+          }
+        ),
+        trailingIcon && /* @__PURE__ */ jsx10(Icon, { name: trailingIcon, size: s.iconSize, color: textColor })
+      ]
+    }
+  );
+}
+var styles6 = StyleSheet6.create({
+  badge: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xs
+  },
+  label: {
+    fontWeight: "500"
+  }
+});
+
+// components/InputField.tsx
+import { useState as useState3 } from "react";
+import {
+  Pressable as Pressable5,
+  StyleSheet as StyleSheet7,
+  TextInput as TextInput2,
+  View as View8
+} from "react-native";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function InputField({
+  label,
+  value,
+  onChangeText,
+  size = "md",
+  disabled = false,
+  errorMessage,
+  leadingIcon,
+  trailingIcon,
+  onTrailingIconPress,
+  placeholder,
+  secureTextEntry,
+  ...rest
+}) {
+  const theme = useTheme();
+  const [isFocused, setIsFocused] = useState3(false);
+  const [isHovered, setIsHovered] = useState3(false);
+  const hasValue = !!value && value.length > 0;
+  const showError = !!errorMessage;
+  const inputHeight = size === "sm" ? 40 : 44;
+  const paddingHorizontal = size === "sm" ? 12 : 14;
+  const getBorderColor = () => {
+    if (showError) {
+      return theme.colors.dangerMid;
+    }
+    if (isFocused) {
+      return "#cefe00";
+    }
+    return "#d9d8d7";
+  };
+  const getBoxShadow = () => {
+    if (isFocused) {
+      return {
+        shadowColor: "#fff6d4",
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 0
+      };
+    }
+    return elevation.xs;
+  };
+  const containerStyle = [
+    styles7.container,
+    {
+      height: inputHeight,
+      paddingHorizontal,
+      backgroundColor: isHovered && !isFocused && !showError ? "#e9e8e7" : "#faf9f7",
+      borderColor: getBorderColor(),
+      borderWidth: 1,
+      borderRadius: 12
+    },
+    getBoxShadow()
+  ];
+  return /* @__PURE__ */ jsxs5(View8, { style: [styles7.wrapper, disabled && styles7.disabledWrapper], children: [
+    label && /* @__PURE__ */ jsx11(Text, { variant: "body", textStyle: [styles7.label, { color: "#737271" }], children: label }),
+    /* @__PURE__ */ jsxs5(
+      Pressable5,
+      {
+        disabled,
+        onHoverIn: () => setIsHovered(true),
+        onHoverOut: () => setIsHovered(false),
+        style: containerStyle,
+        children: [
+          leadingIcon && /* @__PURE__ */ jsx11(Icon, { name: leadingIcon, size: 20, color: "#667085" }),
+          /* @__PURE__ */ jsx11(
+            TextInput2,
+            {
+              style: [
+                styles7.input,
+                {
+                  color: hasValue ? "#141414" : "#8e8d8b",
+                  fontSize: size === "sm" ? 13 : 14
+                },
+                disabled && styles7.inputDisabled
+              ],
+              value,
+              onChangeText,
+              placeholder,
+              placeholderTextColor: "#8e8d8b",
+              editable: !disabled,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              secureTextEntry,
+              ...rest
+            }
+          ),
+          trailingIcon && /* @__PURE__ */ jsx11(
+            Pressable5,
+            {
+              onPress: onTrailingIconPress,
+              disabled: !onTrailingIconPress,
+              hitSlop: 8,
+              style: styles7.iconButton,
+              children: /* @__PURE__ */ jsx11(Icon, { name: trailingIcon, size: 20, color: "#737271" })
+            }
+          )
+        ]
+      }
+    ),
+    showError && /* @__PURE__ */ jsxs5(View8, { style: styles7.errorRow, children: [
+      /* @__PURE__ */ jsx11(Icon, { name: "warning-circle", size: 16, color: theme.colors.dangerMid }),
+      /* @__PURE__ */ jsx11(Text, { variant: "body", textStyle: [styles7.errorText, { color: "#737271" }], children: errorMessage })
+    ] })
+  ] });
+}
+var styles7 = StyleSheet7.create({
+  wrapper: {
+    gap: 4
+  },
+  disabledWrapper: {
+    opacity: 0.32
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: "500"
+  },
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+    includeFontPadding: false,
+    fontSize: 14,
+    lineHeight: 21
+  },
+  inputDisabled: {
+    opacity: 1
+  },
+  iconButton: {
+    padding: 2
+  },
+  errorRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xs
+  },
+  errorText: {
+    fontSize: 14,
+    lineHeight: 21
+  }
+});
+
+// components/Tag.tsx
+import { Pressable as Pressable6, StyleSheet as StyleSheet8, View as View9 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var sizeStyles2 = {
+  sm: { height: 24, paddingHorizontal: 8, fontSize: 12, lineHeight: 18, iconSize: 14, closeSize: 14, countFontSize: 12 },
+  md: { height: 24, paddingHorizontal: 9, fontSize: 14, lineHeight: 21, iconSize: 16, closeSize: 16, countFontSize: 12 },
+  lg: { height: 28, paddingHorizontal: 10, fontSize: 14, lineHeight: 21, iconSize: 16, closeSize: 20, countFontSize: 14 }
+};
+function Tag({
+  label,
+  size = "md",
+  icon,
+  trailingIcon,
+  count,
+  onPress,
+  onTrailingPress,
+  style,
+  ...rest
+}) {
+  const s = sizeStyles2[size];
+  const content = /* @__PURE__ */ jsxs6(View9, { style: [styles8.row, { gap: 3 }], children: [
+    icon && /* @__PURE__ */ jsx12(Icon, { name: icon, size: s.iconSize, color: "#737271" }),
+    /* @__PURE__ */ jsx12(
+      Text,
+      {
+        variant: "caption",
+        textStyle: [styles8.label, { color: "#737271", fontSize: s.fontSize, lineHeight: s.lineHeight }],
+        children: label
+      }
+    ),
+    count !== void 0 && /* @__PURE__ */ jsx12(View9, { style: [styles8.countBadge, { backgroundColor: "#e9e8e7" }], children: /* @__PURE__ */ jsx12(
+      Text,
+      {
+        variant: "caption",
+        textStyle: [styles8.countText, { fontSize: s.countFontSize, color: "#737271" }],
+        children: count
+      }
+    ) }),
+    trailingIcon && /* @__PURE__ */ jsx12(
+      Pressable6,
+      {
+        onPress: onTrailingPress,
+        hitSlop: 4,
+        style: styles8.trailingButton,
+        children: /* @__PURE__ */ jsx12(Icon, { name: trailingIcon, size: s.closeSize, color: "#737271" })
+      }
+    )
+  ] });
+  const containerStyle = [
+    styles8.tag,
+    {
+      height: s.height,
+      paddingHorizontal: s.paddingHorizontal,
+      backgroundColor: "#faf9f7",
+      borderColor: "#d9d8d7",
+      borderWidth: 1,
+      borderRadius: 6
+    },
+    style
+  ];
+  if (onPress) {
+    return /* @__PURE__ */ jsx12(Pressable6, { accessibilityRole: "button", onPress, style: containerStyle, ...rest, children: content });
+  }
+  return /* @__PURE__ */ jsx12(View9, { style: containerStyle, ...rest, children: content });
+}
+var styles8 = StyleSheet8.create({
+  tag: {
+    alignSelf: "flex-start"
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  label: {
+    fontWeight: "500"
+  },
+  trailingButton: {
+    padding: 2
+  },
+  countBadge: {
+    borderRadius: 3,
+    paddingHorizontal: 4,
+    paddingVertical: 0,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  countText: {
+    fontWeight: "500"
+  }
+});
+
+// components/Toggle.tsx
+import { Pressable as Pressable7, StyleSheet as StyleSheet9, View as View10 } from "react-native";
+import { Fragment, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var sizeConfig = {
+  md: { trackWidth: 44, trackHeight: 24, thumbSize: 20, thumbOnX: 22, thumbOffX: 2, gap: 12 },
+  sm: { trackWidth: 36, trackHeight: 20, thumbSize: 16, thumbOnX: 18, thumbOffX: 2, gap: 8 }
+};
+function Toggle({ value, onValueChange, label, disabled = false, size = "md" }) {
+  const s = sizeConfig[size];
+  const trackColor = value ? "#cefe00" : "#e9e8e7";
+  const hoverTrackColor = value ? "#87ad00" : "#d9d8d7";
+  return /* @__PURE__ */ jsx13(
+    Pressable7,
+    {
+      accessibilityRole: "switch",
+      accessibilityState: { checked: value, disabled },
+      disabled,
+      onPress: () => onValueChange(!value),
+      style: ({ pressed }) => [
+        styles9.container,
+        { gap: s.gap },
+        pressed && styles9.pressed,
+        disabled && styles9.disabled
+      ],
+      children: ({ pressed }) => /* @__PURE__ */ jsxs7(Fragment, { children: [
+        /* @__PURE__ */ jsx13(
+          View10,
+          {
+            style: [
+              styles9.track,
+              {
+                width: s.trackWidth,
+                height: s.trackHeight,
+                borderRadius: 12,
+                backgroundColor: pressed ? hoverTrackColor : trackColor,
+                justifyContent: value ? "flex-end" : "flex-start",
+                paddingHorizontal: 2
+              }
+            ],
+            children: /* @__PURE__ */ jsx13(
+              View10,
+              {
+                style: [
+                  styles9.thumb,
+                  {
+                    width: s.thumbSize,
+                    height: s.thumbSize,
+                    borderRadius: s.thumbSize / 2,
+                    backgroundColor: "#ffffff",
+                    shadowColor: "#101828",
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowOpacity: 0.16,
+                    shadowRadius: 6,
+                    elevation: 3
+                  }
+                ]
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx13(
+          Text,
+          {
+            variant: "body",
+            textStyle: [styles9.label, { color: "#141414" }],
+            children: label
+          }
+        )
+      ] })
+    }
+  );
+}
+var styles9 = StyleSheet9.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  pressed: {
+    opacity: 0.7
+  },
+  disabled: {
+    opacity: 0.32
+  },
+  track: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  thumb: {},
+  label: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: "500"
+  }
+});
+
+// components/DatePicker.tsx
+import { useState as useState4 } from "react";
+import {
+  Pressable as Pressable8,
+  StyleSheet as StyleSheet10,
+  View as View11
+} from "react-native";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+var MONTH_NAMES = [
+  "Janeiro",
+  "Fevereiro",
+  "Mar\xE7o",
+  "Abril",
+  "Maio",
+  "Junho",
+  "Julho",
+  "Agosto",
+  "Setembro",
+  "Outubro",
+  "Novembro",
+  "Dezembro"
+];
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfMonth(year, month) {
+  const day = new Date(year, month, 1).getDay();
+  return day === 0 ? 6 : day - 1;
+}
+function formatDate(date) {
+  const day = date.getDate().toString().padStart(2, "0");
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const year = date.getFullYear();
+  return `${day}/${month}/${year}`;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isInRange(date, start, end) {
+  if (!start || !end) {
+    return false;
+  }
+  const time = date.getTime();
+  return time > start.getTime() && time < end.getTime();
+}
+function DatePicker({
+  startDate,
+  endDate,
+  onChange,
+  disabled = false,
+  errorMessage,
+  placeholder = "Selecione as datas",
+  open = false,
+  onToggle
+}) {
+  const [isHovered, setIsHovered] = useState4(false);
+  const [viewYear, setViewYear] = useState4(startDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
+  const [viewMonth, setViewMonth] = useState4(startDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
+  const [selectingEnd, setSelectingEnd] = useState4(false);
+  const showError = !!errorMessage;
+  const today = /* @__PURE__ */ new Date();
+  const navigateMonth = (delta) => {
+    const newDate = new Date(viewYear, viewMonth + delta, 1);
+    setViewYear(newDate.getFullYear());
+    setViewMonth(newDate.getMonth());
+  };
+  const handleDayPress = (day) => {
+    const date = new Date(viewYear, viewMonth, day);
+    if (!selectingEnd) {
+      onChange?.(date, null);
+      setSelectingEnd(true);
+    } else {
+      if (startDate && date < startDate) {
+        onChange?.(date, startDate);
+      } else {
+        onChange?.(startDate ?? date, date);
+      }
+      setSelectingEnd(false);
+    }
+  };
+  const handleCancel = () => {
+    onChange?.(null, null);
+    setSelectingEnd(false);
+    onToggle?.();
+  };
+  const handleApply = () => {
+    onToggle?.();
+  };
+  const daysInMonth = getDaysInMonth(viewYear, viewMonth);
+  const firstDay = getFirstDayOfMonth(viewYear, viewMonth);
+  const triggerStyle = [
+    styles10.trigger,
+    {
+      backgroundColor: "#faf9f7",
+      borderColor: showError ? "#bb4355" : "#d9d8d7",
+      borderWidth: 1,
+      borderRadius: 8
+    },
+    elevation.xs
+  ];
+  return /* @__PURE__ */ jsxs8(View11, { style: styles10.wrapper, children: [
+    /* @__PURE__ */ jsxs8(
+      Pressable8,
+      {
+        disabled,
+        onPress: onToggle,
+        onHoverIn: () => setIsHovered(true),
+        onHoverOut: () => setIsHovered(false),
+        style: [
+          triggerStyle,
+          isHovered && !disabled && { backgroundColor: "#e9e8e7" }
+        ],
+        children: [
+          /* @__PURE__ */ jsx14(Icon, { name: "timer", size: 20, color: "#101828" }),
+          /* @__PURE__ */ jsx14(
+            Text,
+            {
+              variant: "body",
+              textStyle: [
+                styles10.triggerText,
+                {
+                  color: startDate ? "#101828" : "#8e8d8b",
+                  fontWeight: startDate ? "600" : "400"
+                }
+              ],
+              children: (() => {
+                if (startDate && endDate) {
+                  return `${formatDate(startDate)} -- ${formatDate(endDate)}`;
+                }
+                if (startDate) {
+                  return `${formatDate(startDate)} --`;
+                }
+                return placeholder;
+              })()
+            }
+          )
+        ]
+      }
+    ),
+    showError && /* @__PURE__ */ jsxs8(View11, { style: styles10.errorRow, children: [
+      /* @__PURE__ */ jsx14(Icon, { name: "warning-circle", size: 16, color: "#bb4355" }),
+      /* @__PURE__ */ jsx14(Text, { variant: "body", textStyle: [styles10.errorText, { color: "#737271" }], children: errorMessage })
+    ] }),
+    open && /* @__PURE__ */ jsxs8(
+      View11,
+      {
+        style: [
+          styles10.calendar,
+          {
+            backgroundColor: "#f6f5f4",
+            borderColor: "#e9e8e7"
+          },
+          elevation.lg
+        ],
+        children: [
+          /* @__PURE__ */ jsxs8(View11, { style: styles10.contentArea, children: [
+            /* @__PURE__ */ jsxs8(View11, { style: styles10.inputRow, children: [
+              /* @__PURE__ */ jsx14(View11, { style: [styles10.dateInput, { borderColor: "#d9d8d7" }], children: /* @__PURE__ */ jsx14(Text, { variant: "body", textStyle: { color: startDate ? "#141414" : "#8e8d8b", fontSize: 14 }, children: startDate ? formatDate(startDate) : "Data inicial" }) }),
+              /* @__PURE__ */ jsx14(Text, { variant: "body", textStyle: { color: "#d9d8d7", fontSize: 16 }, children: "--" }),
+              /* @__PURE__ */ jsx14(View11, { style: [styles10.dateInput, { borderColor: "#d0d5dd" }], children: /* @__PURE__ */ jsx14(Text, { variant: "body", textStyle: { color: endDate ? "#101828" : "#8e8d8b", fontSize: 14 }, children: endDate ? formatDate(endDate) : "Data final" }) })
+            ] }),
+            /* @__PURE__ */ jsxs8(View11, { style: styles10.header, children: [
+              /* @__PURE__ */ jsx14(Pressable8, { onPress: () => navigateMonth(-1), hitSlop: 8, style: styles10.navButton, children: /* @__PURE__ */ jsx14(View11, { style: { transform: [{ rotate: "180deg" }] }, children: /* @__PURE__ */ jsx14(Icon, { name: "caret-right", size: 16, color: "#737271" }) }) }),
+              /* @__PURE__ */ jsxs8(Text, { variant: "body", textStyle: styles10.monthLabel, children: [
+                MONTH_NAMES[viewMonth],
+                " ",
+                viewYear
+              ] }),
+              /* @__PURE__ */ jsx14(Pressable8, { onPress: () => navigateMonth(1), hitSlop: 8, style: styles10.navButton, children: /* @__PURE__ */ jsx14(Icon, { name: "caret-right", size: 16, color: "#737271" }) })
+            ] }),
+            /* @__PURE__ */ jsx14(View11, { style: styles10.weekdayRow, children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx14(Text, { variant: "caption", textStyle: styles10.weekdayText, children: day }, day)) }),
+            /* @__PURE__ */ jsxs8(View11, { style: styles10.daysGrid, children: [
+              Array.from({ length: firstDay }).map((_, i) => /* @__PURE__ */ jsx14(View11, { style: styles10.dayCell }, `empty-${i}`)),
+              Array.from({ length: daysInMonth }).map((_, i) => {
+                const day = i + 1;
+                const date = new Date(viewYear, viewMonth, day);
+                const isStartDate = !!startDate && isSameDay(date, startDate);
+                const isEndDate = !!endDate && isSameDay(date, endDate);
+                const isSelected = isStartDate || isEndDate;
+                const inRange = isInRange(date, startDate ?? null, endDate ?? null);
+                const isTodayDate = isSameDay(date, today);
+                return /* @__PURE__ */ jsx14(
+                  Pressable8,
+                  {
+                    onPress: () => handleDayPress(day),
+                    style: [
+                      styles10.dayCell,
+                      inRange && { backgroundColor: "#d9d8d7" },
+                      (isStartDate || !endDate && selectingEnd && startDate && isSameDay(date, startDate)) && {
+                        borderRadius: 20,
+                        backgroundColor: "#cefe00"
+                      },
+                      isEndDate && {
+                        borderRadius: 20,
+                        backgroundColor: "#cefe00"
+                      }
+                    ],
+                    children: /* @__PURE__ */ jsx14(
+                      Text,
+                      {
+                        variant: "caption",
+                        textStyle: [
+                          styles10.dayText,
+                          {
+                            color: isSelected ? "#000000" : "#141414",
+                            fontWeight: isTodayDate || isSelected ? "500" : "400"
+                          }
+                        ],
+                        children: day
+                      }
+                    )
+                  },
+                  day
+                );
+              })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs8(View11, { style: styles10.bottomPanel, children: [
+            /* @__PURE__ */ jsx14(
+              Pressable8,
+              {
+                onPress: handleCancel,
+                style: [styles10.actionButton, { borderColor: "#d9d8d7", backgroundColor: "#faf9f7" }],
+                children: /* @__PURE__ */ jsx14(Text, { variant: "body", textStyle: { color: "#101828", fontSize: 14, fontWeight: "600" }, children: "Cancelar" })
+              }
+            ),
+            /* @__PURE__ */ jsx14(
+              Pressable8,
+              {
+                onPress: handleApply,
+                style: [styles10.actionButton, { borderColor: "#cefe00", backgroundColor: "#cefe00" }],
+                children: /* @__PURE__ */ jsx14(Text, { variant: "body", textStyle: { color: "#000000", fontSize: 14, fontWeight: "600" }, children: "Aplicar" })
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+var styles10 = StyleSheet10.create({
+  wrapper: {
+    gap: spacing.xs
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 40,
+    paddingHorizontal: 16,
+    gap: 8
+  },
+  triggerText: {
+    fontSize: 14,
+    lineHeight: 21
+  },
+  errorRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xs
+  },
+  errorText: {
+    fontSize: 14,
+    lineHeight: 21
+  },
+  calendar: {
+    borderRadius: 12,
+    borderWidth: 1,
+    overflow: "hidden"
+  },
+  contentArea: {
+    padding: 20,
+    gap: 16
+  },
+  inputRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  dateInput: {
+    flex: 1,
+    height: 44,
+    borderWidth: 1,
+    borderRadius: 12,
+    backgroundColor: "#faf9f7",
+    paddingHorizontal: 14,
+    alignItems: "flex-start",
+    justifyContent: "center"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  navButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: "#d9d8d7",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  monthLabel: {
+    fontSize: 16,
+    fontWeight: "600",
+    lineHeight: 24,
+    color: "#141414"
+  },
+  weekdayRow: {
+    flexDirection: "row"
+  },
+  weekdayText: {
+    flex: 1,
+    textAlign: "center",
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "500",
+    color: "#101828"
+  },
+  daysGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  dayCell: {
+    width: "14.28%",
+    aspectRatio: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 20
+  },
+  dayText: {
+    fontSize: 14,
+    lineHeight: 20
+  },
+  bottomPanel: {
+    flexDirection: "row",
+    padding: 16,
+    gap: 12,
+    borderTopWidth: 1,
+    borderTopColor: "#e9e8e7"
+  },
+  actionButton: {
+    flex: 1,
+    height: 40,
+    borderRadius: 16,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+// components/Checkbox.tsx
+import { useState as useState5 } from "react";
+import { Pressable as Pressable9, StyleSheet as StyleSheet11, View as View12 } from "react-native";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var sizeConfig2 = {
+  sm: { boxSize: 16, iconSize: 12, gap: 8, fontSize: 14, lineHeight: 20, borderRadius: 4, radioRadius: 8 },
+  md: { boxSize: 20, iconSize: 12, gap: 12, fontSize: 16, lineHeight: 24, borderRadius: 6, radioRadius: 10 }
+};
+function Checkbox({
+  value,
+  onValueChange,
+  label,
+  disabled = false,
+  size = "md",
+  type = "checkbox",
+  indeterminate = false
+}) {
+  const [isHovered, setIsHovered] = useState5(false);
+  const s = sizeConfig2[size];
+  const isChecked = value || indeterminate;
+  const isRadio = type === "radio";
+  const getBoxStyles = () => {
+    if (isRadio) {
+      const br = isChecked ? 500 : s.radioRadius;
+      const borderColor2 = isChecked || isHovered ? "#cefe00" : "#d9d8d7";
+      return {
+        borderRadius: br,
+        backgroundColor: isChecked ? "#cefe00" : "#faf9f7",
+        borderColor: borderColor2
+      };
+    }
+    let bgColor = "#faf9f7";
+    if (isChecked) {
+      bgColor = isHovered ? "#87ad00" : "#cefe00";
+    }
+    let borderColor = "#d9d8d7";
+    if (isChecked) {
+      borderColor = isHovered ? "#87ad00" : "#cefe00";
+    } else if (isHovered) {
+      borderColor = "#cefe00";
+    }
+    return {
+      borderRadius: s.borderRadius,
+      backgroundColor: bgColor,
+      borderColor
+    };
+  };
+  const boxStyles = getBoxStyles();
+  return /* @__PURE__ */ jsxs9(
+    Pressable9,
+    {
+      accessibilityRole: isRadio ? "radio" : "checkbox",
+      accessibilityState: { checked: value, disabled },
+      disabled,
+      onPress: () => onValueChange(!value),
+      onHoverIn: () => setIsHovered(true),
+      onHoverOut: () => setIsHovered(false),
+      style: ({ pressed }) => [
+        styles11.container,
+        { gap: s.gap },
+        pressed && styles11.pressed,
+        disabled && styles11.disabled
+      ],
+      children: [
+        /* @__PURE__ */ jsx15(
+          View12,
+          {
+            style: [
+              styles11.box,
+              {
+                width: s.boxSize,
+                height: s.boxSize,
+                borderWidth: isChecked ? 0 : 1.5,
+                ...boxStyles
+              }
+            ],
+            children: indeterminate ? /* @__PURE__ */ jsx15(View12, { style: [styles11.indeterminateBar, { backgroundColor: "#ffffff" }] }) : isChecked && /* @__PURE__ */ jsx15(Icon, { name: "check", size: s.iconSize, color: "#ffffff", weight: "bold" })
+          }
+        ),
+        label && /* @__PURE__ */ jsx15(
+          Text,
+          {
+            variant: "body",
+            textStyle: [styles11.label, { color: "#141414", fontSize: s.fontSize, lineHeight: s.lineHeight }],
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+var styles11 = StyleSheet11.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  pressed: {
+    opacity: 0.7
+  },
+  disabled: {
+    opacity: 0.32
+  },
+  box: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  indeterminateBar: {
+    width: 10,
+    height: 2,
+    borderRadius: 1
+  },
+  label: {
+    fontWeight: "500"
+  }
+});
+
+// components/TablePagination.tsx
+import { Pressable as Pressable10, StyleSheet as StyleSheet12, View as View13 } from "react-native";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function getVisiblePages(current, total) {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const pages = [1];
+  if (current > 3) {
+    pages.push("ellipsis");
+  }
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  if (current < total - 2) {
+    pages.push("ellipsis");
+  }
+  if (total > 1) {
+    pages.push(total);
+  }
+  return pages;
+}
+function TablePagination({
+  currentPage,
+  totalPages,
+  onPageChange
+}) {
+  const pages = getVisiblePages(currentPage, totalPages);
+  const canGoBack = currentPage > 0;
+  const canGoForward = currentPage < totalPages - 1;
+  return /* @__PURE__ */ jsxs10(View13, { style: [styles12.container, { borderTopColor: "#e9e8e7" }], children: [
+    /* @__PURE__ */ jsxs10(
+      Pressable10,
+      {
+        disabled: !canGoBack,
+        onPress: () => canGoBack && onPageChange(currentPage - 1),
+        style: ({ pressed }) => [
+          styles12.navButton,
+          {
+            opacity: !canGoBack ? 0.32 : 1,
+            backgroundColor: "#faf9f7",
+            borderColor: "#d9d8d7"
+          },
+          pressed && { opacity: 0.6 }
+        ],
+        children: [
+          /* @__PURE__ */ jsx16(View13, { style: { transform: [{ rotate: "180deg" }] }, children: /* @__PURE__ */ jsx16(Icon, { name: "caret-right", size: 20, color: "#101828" }) }),
+          /* @__PURE__ */ jsx16(Text, { variant: "body", textStyle: { color: "#101828", fontSize: 14, fontWeight: "600" }, children: "Anterior" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx16(View13, { style: styles12.pageNumbers, children: pages.map((page, index) => {
+      if (page === "ellipsis") {
+        return /* @__PURE__ */ jsx16(View13, { style: styles12.pageCell, children: /* @__PURE__ */ jsx16(Text, { variant: "body", textStyle: { color: "#737271", fontSize: 14, fontWeight: "500" }, children: "..." }) }, `ellipsis-${index}`);
+      }
+      const isActive = page - 1 === currentPage;
+      return /* @__PURE__ */ jsx16(
+        Pressable10,
+        {
+          onPress: () => onPageChange(page - 1),
+          style: [
+            styles12.pageCell,
+            {
+              backgroundColor: isActive ? "#e9e8e7" : "transparent",
+              borderRadius: 8
+            },
+            isActive && {
+              borderColor: "#cefe00",
+              borderWidth: 1,
+              ...elevation.xs
+            }
+          ],
+          children: /* @__PURE__ */ jsx16(
+            Text,
+            {
+              variant: "body",
+              textStyle: {
+                color: isActive ? "#141414" : "#737271",
+                fontSize: 14,
+                fontWeight: "500"
+              },
+              children: page
+            }
+          )
+        },
+        page
+      );
+    }) }),
+    /* @__PURE__ */ jsxs10(
+      Pressable10,
+      {
+        disabled: !canGoForward,
+        onPress: () => canGoForward && onPageChange(currentPage + 1),
+        style: ({ pressed }) => [
+          styles12.navButton,
+          {
+            opacity: !canGoForward ? 0.32 : 1,
+            backgroundColor: "#faf9f7",
+            borderColor: "#d9d8d7"
+          },
+          pressed && { opacity: 0.6 }
+        ],
+        children: [
+          /* @__PURE__ */ jsx16(Text, { variant: "body", textStyle: { color: "#101828", fontSize: 14, fontWeight: "600" }, children: "Pr\xF3ximo" }),
+          /* @__PURE__ */ jsx16(Icon, { name: "caret-right", size: 20, color: "#101828" })
+        ]
+      }
+    )
+  ] });
+}
+var styles12 = StyleSheet12.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderTopWidth: 1
+  },
+  navButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    height: 36,
+    paddingHorizontal: 14,
+    borderRadius: 16,
+    borderWidth: 1
+  },
+  pageNumbers: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2
+  },
+  pageCell: {
+    width: 40,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+// components/LinkButton.tsx
+import { Pressable as Pressable11, StyleSheet as StyleSheet13 } from "react-native";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function LinkButton({
+  label,
+  icon,
+  color = "primary",
+  disabled,
+  ...rest
+}) {
+  const textColor = color === "primary" ? "#cefe00" : "#737271";
+  return /* @__PURE__ */ jsxs11(
+    Pressable11,
+    {
+      accessibilityRole: "button",
+      disabled,
+      style: ({ pressed }) => [
+        styles13.container,
+        pressed && styles13.pressed,
+        disabled && styles13.disabled
+      ],
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsx17(Icon, { name: icon, size: 16, color: textColor }),
+        /* @__PURE__ */ jsx17(
+          Text,
+          {
+            variant: "body",
+            textStyle: [styles13.label, { color: textColor }],
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+var styles13 = StyleSheet13.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: spacing.xs,
+    alignSelf: "flex-start",
+    paddingVertical: spacing.xs
+  },
+  pressed: {
+    opacity: 0.6
+  },
+  disabled: {
+    opacity: 0.32
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: "500"
+  }
+});
+
+// components/BottomNavBar.tsx
+import { Pressable as Pressable12, StyleSheet as StyleSheet14, View as View14 } from "react-native";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function BottomNavBar({ items, activeItemId, onItemPress }) {
+  return /* @__PURE__ */ jsx18(
+    View14,
+    {
+      style: [
+        styles14.container,
+        {
+          backgroundColor: "#201f1fCC",
+          borderColor: "#ffffff1A"
+        }
+      ],
+      children: items.map((item) => {
+        const isActive = item.id === activeItemId;
+        return /* @__PURE__ */ jsx18(
+          Pressable12,
+          {
+            accessibilityRole: "button",
+            accessibilityState: { selected: isActive },
+            onPress: () => onItemPress(item.id),
+            style: ({ pressed }) => [
+              styles14.item,
+              pressed && styles14.pressed
+            ],
+            children: isActive ? /* @__PURE__ */ jsx18(View14, { style: styles14.activeItem, children: /* @__PURE__ */ jsx18(
+              Icon,
+              {
+                name: item.icon,
+                size: 25,
+                color: "#141414",
+                weight: "regular"
+              }
+            ) }) : /* @__PURE__ */ jsx18(View14, { style: styles14.inactiveItem, children: /* @__PURE__ */ jsx18(
+              Icon,
+              {
+                name: item.icon,
+                size: 25,
+                color: "#8e8d8b",
+                weight: "regular"
+              }
+            ) })
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+var styles14 = StyleSheet14.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: 12,
+    borderRadius: 9999,
+    borderWidth: 1
+  },
+  item: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  pressed: {
+    opacity: 0.6
+  },
+  activeItem: {
+    width: 55,
+    height: 55,
+    borderRadius: 9999,
+    backgroundColor: "#cefe00",
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: "#caf300",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.4,
+    shadowRadius: 15,
+    elevation: 8
+  },
+  inactiveItem: {
+    width: 60,
+    height: 60,
+    borderRadius: 9999,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 8
+  }
+});
+
+// components/ProgressBar.tsx
+import { useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet as StyleSheet15, View as View15 } from "react-native";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function ProgressBar({ value, showLabel = true, animated = true }) {
+  const clampedValue = Math.max(0, Math.min(1, value));
+  const animValue = useRef(new Animated.Value(animated ? 0 : clampedValue)).current;
+  useEffect(() => {
+    if (animated) {
+      Animated.timing(animValue, {
+        toValue: clampedValue,
+        duration: 400,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: false
+      }).start();
+    } else {
+      animValue.setValue(clampedValue);
+    }
+  }, [clampedValue, animated, animValue]);
+  const fillWidth = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0%", "100%"]
+  });
+  const percentage = Math.round(clampedValue * 100);
+  return /* @__PURE__ */ jsx19(View15, { style: styles15.container, children: /* @__PURE__ */ jsxs12(View15, { style: styles15.barRow, children: [
+    /* @__PURE__ */ jsx19(View15, { style: styles15.track, children: /* @__PURE__ */ jsx19(
+      Animated.View,
+      {
+        style: [
+          styles15.fill,
+          { width: fillWidth }
+        ]
+      }
+    ) }),
+    showLabel && /* @__PURE__ */ jsxs12(
+      Text,
+      {
+        variant: "body",
+        textStyle: styles15.label,
+        children: [
+          percentage,
+          "%"
+        ]
+      }
+    )
+  ] }) });
+}
+var styles15 = StyleSheet15.create({
+  container: {
+    width: "100%"
+  },
+  barRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  track: {
+    flex: 1,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: "#e9e8e7",
+    overflow: "hidden"
+  },
+  fill: {
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: "#63ca7e"
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: "500",
+    color: "#737271",
+    minWidth: 34
+  }
+});
+
+// components/SearchBar.tsx
+import { useState as useState6 } from "react";
+import {
+  Pressable as Pressable13,
+  StyleSheet as StyleSheet16,
+  TextInput as TextInput3,
+  View as View16
+} from "react-native";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function SearchBar({
+  label,
+  value,
+  onChangeText,
+  placeholder = "Search",
+  disabled = false,
+  onClear,
+  ...rest
+}) {
+  const [isFocused, setIsFocused] = useState6(false);
+  const [isHovered, setIsHovered] = useState6(false);
+  const hasValue = !!value && value.length > 0;
+  const getBorderColor = () => {
+    if (isFocused) {
+      return "#cefe00";
+    }
+    return "#d9d8d7";
+  };
+  const getBoxShadow = () => {
+    if (isFocused) {
+      return {
+        shadowColor: "#fff6d4",
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 0
+      };
+    }
+    return elevation.xs;
+  };
+  return /* @__PURE__ */ jsxs13(View16, { style: [styles16.wrapper, disabled && styles16.disabledWrapper], children: [
+    label && /* @__PURE__ */ jsx20(Text, { variant: "body", textStyle: [styles16.label, { color: "#737271" }], children: label }),
+    /* @__PURE__ */ jsxs13(
+      Pressable13,
+      {
+        disabled,
+        onHoverIn: () => setIsHovered(true),
+        onHoverOut: () => setIsHovered(false),
+        style: [
+          styles16.container,
+          {
+            backgroundColor: isHovered && !isFocused ? "#e9e8e7" : "#faf9f7",
+            borderColor: getBorderColor(),
+            borderWidth: 1,
+            borderRadius: 8
+          },
+          getBoxShadow()
+        ],
+        children: [
+          /* @__PURE__ */ jsx20(Icon, { name: "magnifying-glass", size: 20, color: "#667085" }),
+          /* @__PURE__ */ jsx20(
+            TextInput3,
+            {
+              style: [styles16.input, { color: hasValue ? "#141414" : "#8e8d8b" }],
+              value,
+              onChangeText,
+              placeholder,
+              placeholderTextColor: "#8e8d8b",
+              editable: !disabled,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              ...rest
+            }
+          ),
+          hasValue && !disabled && /* @__PURE__ */ jsx20(
+            Pressable13,
+            {
+              onPress: () => {
+                onChangeText?.("");
+                onClear?.();
+              },
+              hitSlop: 8,
+              style: styles16.clearButton,
+              children: /* @__PURE__ */ jsx20(Icon, { name: "x-circle", size: 16, color: "#737271" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var styles16 = StyleSheet16.create({
+  wrapper: {
+    gap: 4
+  },
+  disabledWrapper: {
+    opacity: 0.32
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: "500"
+  },
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 44,
+    paddingHorizontal: 14,
+    gap: 8
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+    includeFontPadding: false,
+    fontSize: 14,
+    lineHeight: 21
+  },
+  clearButton: {
+    padding: 2
+  }
+});
+
+// components/Slider.tsx
+import { useCallback, useRef as useRef2 } from "react";
+import { PanResponder, StyleSheet as StyleSheet17, View as View17 } from "react-native";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+function Slider({
+  value,
+  minimumValue = 0,
+  maximumValue = 100,
+  step = 1,
+  onValueChange,
+  disabled = false,
+  showValueLabel = true
+}) {
+  const trackWidthRef = useRef2(0);
+  const range = maximumValue - minimumValue;
+  const percentage = range > 0 ? (value - minimumValue) / range : 0;
+  const clampToStep = useCallback(
+    (raw) => {
+      const stepped = Math.round((raw - minimumValue) / step) * step + minimumValue;
+      return Math.max(minimumValue, Math.min(maximumValue, stepped));
+    },
+    [minimumValue, maximumValue, step]
+  );
+  const panResponder = useRef2(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderMove: (_, gestureState) => {
+        if (trackWidthRef.current === 0) {
+          return;
+        }
+        const newX = Math.max(
+          0,
+          Math.min(1, (gestureState.x0 + gestureState.dx) / trackWidthRef.current)
+        );
+        const rawValue = newX * range + minimumValue;
+        onValueChange(clampToStep(rawValue));
+      }
+    })
+  ).current;
+  const onTrackLayout = useCallback((e) => {
+    trackWidthRef.current = e.nativeEvent.layout.width;
+  }, []);
+  return /* @__PURE__ */ jsxs14(View17, { style: [styles17.wrapper, disabled && styles17.disabled], children: [
+    showValueLabel && /* @__PURE__ */ jsxs14(
+      Text,
+      {
+        variant: "body",
+        textStyle: [styles17.valueLabel, { color: "#101828" }],
+        children: [
+          String(value),
+          "%"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs14(
+      View17,
+      {
+        onLayout: onTrackLayout,
+        ...panResponder.panHandlers,
+        style: styles17.trackContainer,
+        children: [
+          /* @__PURE__ */ jsx21(View17, { style: styles17.track, children: /* @__PURE__ */ jsx21(
+            View17,
+            {
+              style: [
+                styles17.fill,
+                { width: `${percentage * 100}%` }
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx21(
+            View17,
+            {
+              style: [
+                styles17.thumb,
+                {
+                  left: `${percentage * 100}%`
+                }
+              ],
+              children: /* @__PURE__ */ jsx21(View17, { style: styles17.thumbInner })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var styles17 = StyleSheet17.create({
+  wrapper: {
+    gap: spacing.sm
+  },
+  disabled: {
+    opacity: 0.32
+  },
+  valueLabel: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: "500",
+    textAlign: "center"
+  },
+  trackContainer: {
+    position: "relative",
+    height: 40,
+    justifyContent: "center"
+  },
+  track: {
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: "#e9e8e7",
+    overflow: "hidden"
+  },
+  fill: {
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: "#cefe00"
+  },
+  thumb: {
+    position: "absolute",
+    width: 24,
+    height: 24,
+    marginLeft: -12,
+    top: 8,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  thumbInner: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: "#ffffff",
+    borderWidth: 1.5,
+    borderColor: "#cefe00",
+    shadowColor: "#101828",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.16,
+    shadowRadius: 6,
+    elevation: 4
+  }
+});
+
+// components/TabMenu.tsx
+import { useState as useState7 } from "react";
+import { Pressable as Pressable14, StyleSheet as StyleSheet18, View as View18 } from "react-native";
+import { jsx as jsx22 } from "react/jsx-runtime";
+function TabMenu({ tabs, activeTabId, onTabChange }) {
+  const [hoveredId, setHoveredId] = useState7(null);
+  return /* @__PURE__ */ jsx22(View18, { style: styles18.container, children: tabs.map((tab) => {
+    const isActive = tab.id === activeTabId;
+    const isHovered = tab.id === hoveredId;
+    return /* @__PURE__ */ jsx22(
+      Pressable14,
+      {
+        accessibilityRole: "tab",
+        accessibilityState: { selected: isActive },
+        onPress: () => onTabChange(tab.id),
+        onHoverIn: () => setHoveredId(tab.id),
+        onHoverOut: () => setHoveredId(null),
+        style: [
+          styles18.tab,
+          {
+            borderBottomColor: isActive ? "#cefe00" : "#e9e8e7",
+            borderBottomWidth: isActive ? 2 : 1,
+            backgroundColor: isHovered && !isActive ? "#e9e8e7" : "transparent"
+          }
+        ],
+        children: /* @__PURE__ */ jsx22(
+          Text,
+          {
+            variant: "body",
+            textStyle: [
+              styles18.label,
+              {
+                color: isActive ? "#cefe00" : "#737271",
+                fontWeight: isActive ? "700" : "400"
+              }
+            ],
+            children: tab.label
+          }
+        )
+      },
+      tab.id
+    );
+  }) });
+}
+var styles18 = StyleSheet18.create({
+  container: {
+    flexDirection: "row"
+  },
+  tab: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 4,
+    paddingBottom: 12
+  },
+  label: {
+    fontSize: 16,
+    lineHeight: 24
+  }
+});
+export {
+  Autocomplete,
+  Badge,
+  BottomNavBar,
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  DatePicker,
+  DropdownSelect,
+  Icon,
+  InputField,
+  LinkButton,
+  ProgressBar,
+  SearchBar,
+  SegmentedTabs,
+  Slider,
+  TabMenu,
+  TablePagination,
+  Tag,
+  Text,
+  ThemeProvider,
+  Toggle,
+  colorMap,
+  darkColors,
+  elevation,
+  lightColors,
+  radius,
+  radiusMap,
+  spacing,
+  spacingMap,
+  typography,
+  useTheme
+};