{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "popapp",
  "homepage": "https://popapp.dev",
  "items": [
    {
      "name": "theme",
      "type": "registry:lib",
      "title": "Theme",
      "description": "Token-based theme system with light/dark mode and custom schemes.",
      "dependencies": [],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/theme/tokens.ts",
          "type": "registry:lib",
          "target": "lib/theme/tokens.ts"
        },
        {
          "path": "registry/theme/provider.tsx",
          "type": "registry:lib",
          "target": "lib/theme/provider.tsx"
        },
        {
          "path": "registry/theme/use-theme.ts",
          "type": "registry:hook",
          "target": "lib/theme/use-theme.ts"
        }
      ],
      "docs": "Wrap your root layout in <ThemeProvider> after installation."
    },
    {
      "name": "haptics",
      "type": "registry:lib",
      "title": "Haptics",
      "description": "Safe haptics wrapper that never crashes if expo-haptics is not installed.",
      "dependencies": [],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/utils/haptics.ts",
          "type": "registry:lib",
          "target": "lib/haptics.ts"
        }
      ],
      "meta": {
        "optionalDeps": [
          "expo-haptics"
        ]
      }
    },
    {
      "name": "use-color-scheme",
      "type": "registry:hook",
      "title": "useColorScheme",
      "description": "Color scheme hook with safe default.",
      "dependencies": [],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/hooks/use-color-scheme.ts",
          "type": "registry:hook",
          "target": "hooks/use-color-scheme.ts"
        }
      ]
    },
    {
      "name": "glass",
      "type": "registry:lib",
      "title": "Glass View",
      "description": "Safe wrapper for expo-glass-effect Liquid Glass. Falls back gracefully when unavailable.",
      "dependencies": [],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/utils/glass.tsx",
          "type": "registry:lib",
          "target": "lib/glass.tsx"
        }
      ],
      "meta": {
        "optionalDeps": [
          "expo-glass-effect"
        ]
      }
    },
    {
      "name": "color",
      "type": "registry:lib",
      "title": "Color",
      "description": "Hex color helpers: add alpha, mix two colors, shade toward black.",
      "dependencies": [],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/utils/color.ts",
          "type": "registry:lib",
          "target": "lib/color.ts"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "tags": [
          "color",
          "theme"
        ]
      }
    },
    {
      "name": "press",
      "type": "registry:lib",
      "title": "Press",
      "description": "Shared press-in delay so taps inside a scrollable lose to the scroll.",
      "dependencies": [],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/utils/press.ts",
          "type": "registry:lib",
          "target": "lib/press.ts"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "tags": [
          "press",
          "gesture"
        ]
      }
    },
    {
      "name": "chart-data",
      "type": "registry:lib",
      "title": "Chart Data",
      "description": "Chart data helpers: bucket daily rows into a gap-free timeline, rolling quantile bands, monotone cubic tangents, and axis labels.",
      "dependencies": [
        "dayjs"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/components/charts/chart-data.ts",
          "type": "registry:lib",
          "target": "components/ui/charts/chart-data.ts"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "tags": [
          "chart",
          "data",
          "timeline"
        ]
      }
    },
    {
      "name": "sparkline",
      "type": "registry:ui",
      "title": "Sparkline",
      "description": "Tiny inline Skia trend line with a fading stroke, sized for table rows and stat cells.",
      "dependencies": [
        "@shopify/react-native-skia"
      ],
      "registryDependencies": [
        "theme",
        "color"
      ],
      "files": [
        {
          "path": "registry/components/charts/sparkline.tsx",
          "type": "registry:ui",
          "target": "components/ui/charts/sparkline.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 1,
        "tags": [
          "chart",
          "skia",
          "data-viz"
        ]
      }
    },
    {
      "name": "chart-callout",
      "type": "registry:ui",
      "title": "Chart Callout",
      "description": "Floating scrub readout plus the useScrub hook: touch-and-hold to raise a cursor, drag between points, lift to dismiss.",
      "dependencies": [
        "react-native-gesture-handler",
        "react-native-reanimated",
        "react-native-worklets"
      ],
      "registryDependencies": [
        "theme",
        "haptics"
      ],
      "files": [
        {
          "path": "registry/components/charts/chart-callout.tsx",
          "type": "registry:ui",
          "target": "components/ui/charts/chart-callout.tsx"
        },
        {
          "path": "registry/components/charts/use-scrub.ts",
          "type": "registry:ui",
          "target": "components/ui/charts/use-scrub.ts"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "optionalDeps": [
          "expo-haptics"
        ],
        "animationTier": 3,
        "tags": [
          "chart",
          "gesture",
          "scrub",
          "overlay"
        ]
      }
    },
    {
      "name": "timeline-chart",
      "type": "registry:ui",
      "title": "Timeline Chart",
      "description": "Scrolling Skia timeline chart with line, bar, range, stacked and grouped modes, touch-and-hold scrubbing, and a settling y-axis.",
      "dependencies": [
        "@shopify/react-native-skia",
        "react-native-gesture-handler",
        "react-native-reanimated",
        "react-native-worklets",
        "dayjs"
      ],
      "registryDependencies": [
        "theme",
        "chart-data",
        "haptics",
        "color",
        "number-format"
      ],
      "files": [
        {
          "path": "registry/components/charts/timeline-chart.tsx",
          "type": "registry:ui",
          "target": "components/ui/charts/timeline-chart.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "optionalDeps": [
          "expo-haptics",
          "expo-localization"
        ],
        "animationTier": 3,
        "tags": [
          "chart",
          "skia",
          "gesture",
          "data-viz"
        ]
      }
    },
    {
      "name": "number-format",
      "type": "registry:lib",
      "title": "Number Format",
      "description": "Device-locale number formatting: DEVICE_LOCALE and formatDecimal (localized toFixed).",
      "dependencies": [],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/utils/number-format.ts",
          "type": "registry:lib",
          "target": "lib/number-format.ts"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "optionalDeps": [
          "expo-localization"
        ],
        "tags": [
          "format",
          "locale",
          "number"
        ]
      }
    },
    {
      "name": "use-foreground-epoch",
      "type": "registry:hook",
      "title": "useForegroundEpoch",
      "description": "Re-render on each background-to-foreground transition so UI-thread animations re-assert their targets.",
      "dependencies": [],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/hooks/use-foreground-epoch.ts",
          "type": "registry:hook",
          "target": "hooks/use-foreground-epoch.ts"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "tags": [
          "app-state",
          "animation"
        ]
      }
    },
    {
      "name": "icon-symbol",
      "type": "registry:ui",
      "title": "Icon Symbol",
      "description": "Cross-platform icon component: SF Symbols on iOS, Material Icons on Android/web.",
      "dependencies": [
        "expo-symbols",
        "@expo/vector-icons"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/components/icon-symbol.types.ts",
          "type": "registry:ui",
          "target": "components/ui/icon-symbol.types.ts"
        },
        {
          "path": "registry/components/icon-symbol.tsx",
          "type": "registry:ui",
          "target": "components/ui/icon-symbol.tsx"
        },
        {
          "path": "registry/components/icon-symbol.ios.tsx",
          "type": "registry:ui",
          "target": "components/ui/icon-symbol.ios.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "tags": [
          "icon",
          "cross-platform"
        ]
      }
    },
    {
      "name": "svg-icons",
      "type": "registry:ui",
      "title": "SVG Icons (Icon Extension)",
      "description": "Optional extension for icon-symbol: adds custom SVG icon support with BaseIcon wrapper and registry pattern.",
      "dependencies": [
        "react-native-svg"
      ],
      "registryDependencies": [
        "icon-symbol"
      ],
      "files": [
        {
          "path": "registry/components/svg-icons/base-icon.tsx",
          "type": "registry:ui",
          "target": "components/ui/svg-icons/base-icon.tsx"
        },
        {
          "path": "registry/components/svg-icons/index.ts",
          "type": "registry:ui",
          "target": "components/ui/svg-icons/index.ts"
        },
        {
          "path": "registry/components/svg-icons/icon-svg.tsx",
          "type": "registry:ui",
          "target": "components/ui/svg-icons/icon-svg.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "tags": [
          "icon",
          "svg",
          "extension"
        ]
      }
    },
    {
      "name": "button",
      "type": "registry:ui",
      "title": "Button",
      "description": "Pressable button with variants, sizes, loading state, and haptic feedback.",
      "dependencies": [],
      "registryDependencies": [
        "theme",
        "haptics",
        "glass",
        "touchable"
      ],
      "files": [
        {
          "path": "registry/components/button.tsx",
          "type": "registry:ui",
          "target": "components/ui/button.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "optionalDeps": [
          "expo-haptics",
          "expo-glass-effect"
        ],
        "animationTier": 1,
        "tags": [
          "form",
          "action"
        ]
      }
    },
    {
      "name": "card",
      "type": "registry:ui",
      "title": "Card",
      "description": "Composable card container with header, content, and footer sections, plus a list-friendly pressable variant.",
      "dependencies": [],
      "registryDependencies": [
        "theme",
        "color",
        "haptics",
        "press"
      ],
      "files": [
        {
          "path": "registry/components/card.tsx",
          "type": "registry:ui",
          "target": "components/ui/card.tsx"
        },
        {
          "path": "registry/components/pressable-card.tsx",
          "type": "registry:ui",
          "target": "components/ui/pressable-card.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "optionalDeps": [
          "expo-haptics"
        ],
        "animationTier": 1,
        "tags": [
          "layout"
        ]
      }
    },
    {
      "name": "text-input",
      "type": "registry:ui",
      "title": "Text Input",
      "description": "Themed text input with label, error state, and icon slots.",
      "dependencies": [],
      "registryDependencies": [
        "theme"
      ],
      "files": [
        {
          "path": "registry/components/text-input.tsx",
          "type": "registry:ui",
          "target": "components/ui/text-input.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 1,
        "tags": [
          "form",
          "input"
        ]
      }
    },
    {
      "name": "text-area",
      "type": "registry:ui",
      "title": "Text Area",
      "description": "Multiline text input with label, error state, and configurable height.",
      "dependencies": [],
      "registryDependencies": [
        "theme"
      ],
      "files": [
        {
          "path": "registry/components/text-area.tsx",
          "type": "registry:ui",
          "target": "components/ui/text-area.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 1,
        "tags": [
          "form",
          "input"
        ]
      }
    },
    {
      "name": "touchable",
      "type": "registry:ui",
      "title": "Touchable",
      "description": "Animated pressable with spring scale, opacity animations, and haptics.",
      "dependencies": [
        "react-native-reanimated"
      ],
      "registryDependencies": [
        "haptics"
      ],
      "files": [
        {
          "path": "registry/components/touchable.tsx",
          "type": "registry:ui",
          "target": "components/ui/touchable.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "optionalDeps": [
          "expo-haptics"
        ],
        "animationTier": 2,
        "tags": [
          "interaction",
          "animation"
        ]
      }
    },
    {
      "name": "skeleton",
      "type": "registry:ui",
      "title": "Skeleton",
      "description": "Pulsing loading placeholder with configurable dimensions.",
      "dependencies": [
        "react-native-reanimated"
      ],
      "registryDependencies": [
        "theme"
      ],
      "files": [
        {
          "path": "registry/components/skeleton.tsx",
          "type": "registry:ui",
          "target": "components/ui/skeleton.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 2,
        "tags": [
          "feedback",
          "loading"
        ]
      }
    },
    {
      "name": "breathing-view",
      "type": "registry:ui",
      "title": "Breathing View",
      "description": "Wrapper that pulses its subtree's opacity while loading, then eases back to full opacity without a jump.",
      "dependencies": [
        "react-native-reanimated"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/components/breathing-view.tsx",
          "type": "registry:ui",
          "target": "components/ui/breathing-view.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 2,
        "tags": [
          "display",
          "feedback",
          "loading",
          "animation"
        ]
      }
    },
    {
      "name": "separator",
      "type": "registry:ui",
      "title": "Separator",
      "description": "Horizontal or vertical divider line.",
      "dependencies": [],
      "registryDependencies": [
        "theme"
      ],
      "files": [
        {
          "path": "registry/components/separator.tsx",
          "type": "registry:ui",
          "target": "components/ui/separator.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 1,
        "tags": [
          "layout"
        ]
      }
    },
    {
      "name": "badge",
      "type": "registry:ui",
      "title": "Badge",
      "description": "Status badge with color variants.",
      "dependencies": [],
      "registryDependencies": [
        "theme"
      ],
      "files": [
        {
          "path": "registry/components/badge.tsx",
          "type": "registry:ui",
          "target": "components/ui/badge.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 1,
        "tags": [
          "display",
          "status"
        ]
      }
    },
    {
      "name": "otp-input",
      "type": "registry:ui",
      "title": "OTP Input",
      "description": "One-time password input with individual digit boxes.",
      "dependencies": [],
      "registryDependencies": [
        "theme"
      ],
      "files": [
        {
          "path": "registry/components/otp-input.tsx",
          "type": "registry:ui",
          "target": "components/ui/otp-input.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 1,
        "tags": [
          "form",
          "input",
          "auth"
        ]
      }
    },
    {
      "name": "option-card",
      "type": "registry:ui",
      "title": "Option Card",
      "description": "Selectable option card with checkbox, icon, description, and left/center alignment.",
      "dependencies": [
        "react-native-reanimated"
      ],
      "registryDependencies": [
        "theme",
        "haptics",
        "touchable",
        "icon-symbol"
      ],
      "files": [
        {
          "path": "registry/components/option-card.tsx",
          "type": "registry:ui",
          "target": "components/ui/option-card.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "optionalDeps": [
          "expo-haptics"
        ],
        "animationTier": 2,
        "tags": [
          "form",
          "selection"
        ]
      }
    },
    {
      "name": "option-group",
      "type": "registry:ui",
      "title": "Option Group",
      "description": "Single or multi-select option group with vertical/horizontal layout.",
      "dependencies": [
        "react-native-reanimated"
      ],
      "registryDependencies": [
        "option-card"
      ],
      "files": [
        {
          "path": "registry/components/option-group.tsx",
          "type": "registry:ui",
          "target": "components/ui/option-group.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "optionalDeps": [
          "expo-haptics"
        ],
        "animationTier": 2,
        "tags": [
          "form",
          "selection"
        ]
      }
    },
    {
      "name": "action-icon",
      "type": "registry:ui",
      "title": "Action Icon",
      "description": "Circular icon button with Liquid Glass support and size/variant options.",
      "dependencies": [],
      "registryDependencies": [
        "theme",
        "glass",
        "icon-symbol"
      ],
      "files": [
        {
          "path": "registry/components/action-icon.tsx",
          "type": "registry:ui",
          "target": "components/ui/action-icon.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "optionalDeps": [
          "expo-glass-effect"
        ],
        "animationTier": 1,
        "tags": [
          "action",
          "icon"
        ]
      }
    },
    {
      "name": "theme-icon",
      "type": "registry:ui",
      "title": "Theme Icon",
      "description": "Icon wrapped in a tinted circle background. Ideal for category icons and settings.",
      "dependencies": [],
      "registryDependencies": [
        "icon-symbol"
      ],
      "files": [
        {
          "path": "registry/components/theme-icon.tsx",
          "type": "registry:ui",
          "target": "components/ui/theme-icon.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 1,
        "tags": [
          "icon",
          "display"
        ]
      }
    },
    {
      "name": "slider-bar",
      "type": "registry:ui",
      "title": "Slider Bar",
      "description": "Animated slider with gesture control, step snapping, labels, haptic feedback, and thumb/track style variants.",
      "dependencies": [
        "react-native-reanimated",
        "react-native-gesture-handler"
      ],
      "registryDependencies": [
        "theme",
        "haptics",
        "icon-symbol"
      ],
      "files": [
        {
          "path": "registry/components/slider-bar.tsx",
          "type": "registry:ui",
          "target": "components/ui/slider-bar.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "optionalDeps": [
          "expo-haptics"
        ],
        "animationTier": 3,
        "tags": [
          "form",
          "input",
          "gesture"
        ]
      }
    },
    {
      "name": "ruler-slider",
      "type": "registry:ui",
      "title": "Ruler Slider",
      "description": "iOS-style ruler picker with Skia rendering, UIScrollView rubber band, projection-based fling, and haptic ticks.",
      "dependencies": [
        "@shopify/react-native-skia",
        "react-native-reanimated",
        "react-native-gesture-handler"
      ],
      "registryDependencies": [
        "theme",
        "haptics"
      ],
      "files": [
        {
          "path": "registry/components/ruler-slider.tsx",
          "type": "registry:ui",
          "target": "components/ui/ruler-slider.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "optionalDeps": [
          "expo-haptics"
        ],
        "animationTier": 3,
        "tags": [
          "form",
          "input",
          "gesture",
          "skia"
        ]
      }
    },
    {
      "name": "progress-ring",
      "type": "registry:ui",
      "title": "Progress Ring",
      "description": "Skia progress ring with overflow laps, striped target band, and animated color crossfade.",
      "dependencies": [
        "@shopify/react-native-skia",
        "react-native-reanimated"
      ],
      "registryDependencies": [
        "theme",
        "use-foreground-epoch"
      ],
      "files": [
        {
          "path": "registry/components/progress-ring.tsx",
          "type": "registry:ui",
          "target": "components/ui/progress-ring.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "animationTier": 2,
        "tags": [
          "feedback",
          "display",
          "skia"
        ]
      }
    },
    {
      "name": "ticker",
      "type": "registry:ui",
      "title": "Ticker",
      "description": "Skia rolling-number ticker: per-digit spring rolls, springing width, ghost fade-outs, locale/currency formatting, and gradient-masked edges.",
      "dependencies": [
        "@shopify/react-native-skia",
        "react-native-reanimated"
      ],
      "registryDependencies": [
        "theme",
        "number-format",
        "use-foreground-epoch"
      ],
      "files": [
        {
          "path": "registry/components/ticker-shared.ts",
          "type": "registry:ui",
          "target": "components/ui/ticker-shared.ts"
        },
        {
          "path": "registry/components/ticker.tsx",
          "type": "registry:ui",
          "target": "components/ui/ticker.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "optionalDeps": [
          "expo-localization"
        ],
        "animationTier": 2,
        "tags": [
          "display",
          "animation",
          "number"
        ]
      }
    },
    {
      "name": "markdown",
      "type": "registry:ui",
      "title": "Markdown",
      "description": "Themed markdown renderer with code block copy button.",
      "dependencies": [
        "react-native-markdown-display",
        "@react-native-clipboard/clipboard"
      ],
      "registryDependencies": [
        "theme",
        "action-icon"
      ],
      "files": [
        {
          "path": "registry/components/markdown.tsx",
          "type": "registry:ui",
          "target": "components/ui/markdown.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 1,
        "tags": [
          "display",
          "text"
        ]
      }
    },
    {
      "name": "date-picker",
      "type": "registry:ui",
      "title": "Date Picker",
      "description": "Three-column month/day/year picker using native scroll wheels.",
      "dependencies": [
        "@react-native-picker/picker"
      ],
      "registryDependencies": [
        "theme"
      ],
      "files": [
        {
          "path": "registry/components/date-picker.tsx",
          "type": "registry:ui",
          "target": "components/ui/date-picker.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "animationTier": 1,
        "tags": [
          "form",
          "input",
          "date"
        ]
      }
    },
    {
      "name": "bottom-sheet",
      "type": "registry:ui",
      "title": "Bottom Sheet",
      "description": "Modal bottom sheet with pan-to-dismiss gesture, backdrop, and spring animations.",
      "dependencies": [
        "react-native-reanimated",
        "react-native-gesture-handler",
        "react-native-multiple-modals",
        "react-native-keyboard-controller",
        "react-native-safe-area-context"
      ],
      "registryDependencies": [
        "theme"
      ],
      "files": [
        {
          "path": "registry/components/bottom-sheet.tsx",
          "type": "registry:ui",
          "target": "components/ui/bottom-sheet.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "animationTier": 3,
        "tags": [
          "overlay",
          "modal",
          "gesture"
        ]
      }
    },
    {
      "name": "toast",
      "type": "registry:ui",
      "title": "Toast",
      "description": "Top-center glass pill toast with spring entry, swipe-up dismiss, tones, and an imperative show/hide API.",
      "dependencies": [
        "react-native-reanimated",
        "react-native-gesture-handler",
        "react-native-safe-area-context"
      ],
      "registryDependencies": [
        "theme",
        "glass",
        "haptics",
        "icon-symbol"
      ],
      "files": [
        {
          "path": "registry/components/toast.tsx",
          "type": "registry:ui",
          "target": "components/ui/toast.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "optionalDeps": [
          "expo-blur",
          "expo-glass-effect",
          "expo-haptics"
        ],
        "animationTier": 3,
        "tags": [
          "overlay",
          "feedback",
          "gesture"
        ]
      }
    },
    {
      "name": "input-stepper",
      "type": "registry:ui",
      "title": "Input Stepper",
      "description": "Numeric stepper with animated ticker display, increment/decrement buttons, disabled state, and optional value tap action.",
      "dependencies": [
        "@shopify/react-native-skia",
        "react-native-reanimated"
      ],
      "registryDependencies": [
        "theme",
        "ticker",
        "action-icon",
        "touchable"
      ],
      "files": [
        {
          "path": "registry/components/input-stepper.tsx",
          "type": "registry:ui",
          "target": "components/ui/input-stepper.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "optionalDeps": [
          "expo-haptics",
          "expo-glass-effect"
        ],
        "animationTier": 2,
        "tags": [
          "form",
          "input",
          "stepper"
        ]
      }
    },
    {
      "name": "page-dots",
      "type": "registry:ui",
      "title": "Page Dots",
      "description": "Pill paging indicator whose active dot widens and tints with a fractional page position.",
      "dependencies": [
        "react-native-reanimated"
      ],
      "registryDependencies": [
        "theme"
      ],
      "files": [
        {
          "path": "registry/components/page-dots.tsx",
          "type": "registry:ui",
          "target": "components/ui/page-dots.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 2,
        "tags": [
          "display",
          "navigation",
          "pager"
        ]
      }
    },
    {
      "name": "gradient-tint",
      "type": "registry:lib",
      "title": "Gradient Tint",
      "description": "Two-stop gradient fade for headers, footers, and scroll edges.",
      "dependencies": [
        "expo-linear-gradient"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/utils/gradient-tint.tsx",
          "type": "registry:lib",
          "target": "lib/gradient-tint.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 1,
        "tags": [
          "layout",
          "visual"
        ]
      }
    },
    {
      "name": "screen",
      "type": "registry:ui",
      "title": "Screen",
      "description": "Screen scaffold: native stack header with a scroll-fade blur fallback, keyboard-aware content, and gradient header/footer scrims.",
      "dependencies": [
        "react-native-reanimated",
        "react-native-keyboard-controller",
        "react-native-safe-area-context",
        "expo-linear-gradient",
        "expo-blur",
        "expo-router"
      ],
      "registryDependencies": [
        "theme",
        "gradient-tint",
        "glass"
      ],
      "files": [
        {
          "path": "registry/components/screen/screen-context.tsx",
          "type": "registry:ui",
          "target": "components/ui/screen/screen-context.tsx"
        },
        {
          "path": "registry/components/screen/screen.tsx",
          "type": "registry:ui",
          "target": "components/ui/screen/screen.tsx"
        },
        {
          "path": "registry/components/screen/screen-header.tsx",
          "type": "registry:ui",
          "target": "components/ui/screen/screen-header.tsx"
        },
        {
          "path": "registry/components/screen/stack-header.tsx",
          "type": "registry:ui",
          "target": "components/ui/screen/stack-header.tsx"
        },
        {
          "path": "registry/components/screen/screen-content.tsx",
          "type": "registry:ui",
          "target": "components/ui/screen/screen-content.tsx"
        },
        {
          "path": "registry/components/screen/screen-footer.tsx",
          "type": "registry:ui",
          "target": "components/ui/screen/screen-footer.tsx"
        },
        {
          "path": "registry/components/screen/gradient-overlay.tsx",
          "type": "registry:ui",
          "target": "components/ui/screen/gradient-overlay.tsx"
        },
        {
          "path": "registry/components/screen/index.tsx",
          "type": "registry:ui",
          "target": "components/ui/screen/index.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "optionalDeps": [
          "expo-glass-effect"
        ],
        "animationTier": 2,
        "tags": [
          "layout",
          "screen",
          "keyboard",
          "header"
        ]
      }
    },
    {
      "name": "list",
      "type": "registry:ui",
      "title": "List",
      "description": "Unified iOS-style list: one row at 58/44/auto heights, a 13/15/17 type ladder, hairlines inset at both ends, and a press wash instead of a scale.",
      "dependencies": [],
      "registryDependencies": [
        "theme",
        "card",
        "icon-symbol",
        "haptics",
        "color",
        "press"
      ],
      "files": [
        {
          "path": "registry/components/list.tsx",
          "type": "registry:ui",
          "target": "components/ui/list.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "optionalDeps": [
          "expo-haptics"
        ],
        "animationTier": 1,
        "tags": [
          "layout",
          "list",
          "settings",
          "row"
        ]
      }
    },
    {
      "name": "sortable-list",
      "type": "registry:ui",
      "title": "Sortable List",
      "description": "Generic drag-to-reorder list: absolute slots, spring re-slotting, edge autoscroll, and haptic swaps, with order held in a shared value.",
      "dependencies": [
        "react-native-reanimated",
        "react-native-gesture-handler",
        "react-native-worklets"
      ],
      "registryDependencies": [
        "haptics"
      ],
      "files": [
        {
          "path": "registry/components/sortable-list.tsx",
          "type": "registry:ui",
          "target": "components/ui/sortable-list.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "optionalDeps": [
          "expo-haptics"
        ],
        "animationTier": 3,
        "tags": [
          "list",
          "gesture",
          "drag",
          "reorder"
        ]
      }
    },
    {
      "name": "range-bar",
      "type": "registry:ui",
      "title": "Range Bar",
      "description": "Skia value-on-a-range bar with tinted zone bands, a dot or tick indicator that punches a transparent ring through the track, and an optional reference line.",
      "dependencies": [
        "@shopify/react-native-skia"
      ],
      "registryDependencies": [
        "theme",
        "color"
      ],
      "files": [
        {
          "path": "registry/components/range-bar.tsx",
          "type": "registry:ui",
          "target": "components/ui/range-bar.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 1,
        "tags": [
          "display",
          "chart",
          "skia",
          "list"
        ]
      }
    },
    {
      "name": "animated-content",
      "type": "registry:ui",
      "title": "Animated Content",
      "description": "Animate content transitions with spring-based enter/exit animations. Supports horizontal, vertical, and fade presets.",
      "dependencies": [
        "react-native-reanimated"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/components/animated-content.tsx",
          "type": "registry:ui",
          "target": "components/ui/animated-content.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "animationTier": 2,
        "tags": [
          "animation",
          "transition",
          "layout"
        ]
      }
    },
    {
      "name": "onboarding",
      "type": "registry:ui",
      "title": "Onboarding",
      "description": "Step-based onboarding engine with animated layout, progress bar, skip logic, and lifecycle hooks.",
      "dependencies": [
        "react-native-reanimated",
        "react-native-keyboard-controller",
        "react-native-safe-area-context",
        "expo-linear-gradient",
        "zustand"
      ],
      "registryDependencies": [
        "theme",
        "button",
        "icon-symbol",
        "gradient-tint",
        "screen",
        "feature-pager"
      ],
      "files": [
        {
          "path": "registry/components/onboarding/types.ts",
          "type": "registry:ui",
          "target": "components/ui/onboarding/types.ts"
        },
        {
          "path": "registry/components/onboarding/engine.ts",
          "type": "registry:ui",
          "target": "components/ui/onboarding/engine.ts"
        },
        {
          "path": "registry/components/onboarding/store.ts",
          "type": "registry:ui",
          "target": "components/ui/onboarding/store.ts"
        },
        {
          "path": "registry/components/onboarding/context.ts",
          "type": "registry:ui",
          "target": "components/ui/onboarding/context.ts"
        },
        {
          "path": "registry/components/onboarding/use-onboarding.ts",
          "type": "registry:ui",
          "target": "components/ui/onboarding/use-onboarding.ts"
        },
        {
          "path": "registry/components/onboarding/progress-bar.tsx",
          "type": "registry:ui",
          "target": "components/ui/onboarding/progress-bar.tsx"
        },
        {
          "path": "registry/components/onboarding/layout.tsx",
          "type": "registry:ui",
          "target": "components/ui/onboarding/layout.tsx"
        },
        {
          "path": "registry/components/onboarding/screen.tsx",
          "type": "registry:ui",
          "target": "components/ui/onboarding/screen.tsx"
        },
        {
          "path": "registry/components/onboarding/index.ts",
          "type": "registry:ui",
          "target": "components/ui/onboarding/index.ts"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "animationTier": 2,
        "tags": [
          "onboarding",
          "flow",
          "navigation"
        ]
      },
      "docs": "Define your steps, data type, and hooks. Wrap your onboarding layout with <OnboardingProvider>. Use <OnboardingScreen> for each step."
    },
    {
      "name": "auth-supabase",
      "type": "registry:block",
      "title": "Supabase Auth + React Query",
      "description": "Starter template for Supabase auth with MMKV persistence, Zustand auth store, and React Query patterns.",
      "dependencies": [
        "@supabase/supabase-js",
        "react-native-mmkv",
        "zustand",
        "@tanstack/react-query"
      ],
      "registryDependencies": [],
      "files": [
        {
          "path": "registry/templates/auth-supabase/supabase.ts",
          "type": "registry:block",
          "target": "lib/auth/supabase.ts"
        },
        {
          "path": "registry/templates/auth-supabase/auth-store.ts",
          "type": "registry:block",
          "target": "lib/auth/auth-store.ts"
        },
        {
          "path": "registry/templates/auth-supabase/auth-provider.tsx",
          "type": "registry:block",
          "target": "lib/auth/auth-provider.tsx"
        },
        {
          "path": "registry/templates/auth-supabase/query-provider.tsx",
          "type": "registry:block",
          "target": "lib/auth/query-provider.tsx"
        },
        {
          "path": "registry/templates/auth-supabase/query-keys.ts",
          "type": "registry:block",
          "target": "lib/auth/query-keys.ts"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "tags": [
          "auth",
          "supabase",
          "react-query",
          "template"
        ]
      },
      "docs": "After installation, update lib/auth/supabase.ts with your project URL and anon key. Wrap your root layout: <QueryProvider><AuthProvider>...</AuthProvider></QueryProvider>"
    },
    {
      "name": "carousel",
      "type": "registry:ui",
      "title": "Carousel",
      "description": "Swipeable pager carousel with animated page dots, active-page injection, and frozen off-screen pages.",
      "dependencies": [
        "react-native-pager-view",
        "react-native-reanimated",
        "react-freeze"
      ],
      "registryDependencies": [
        "theme",
        "page-dots"
      ],
      "files": [
        {
          "path": "registry/components/carousel.tsx",
          "type": "registry:ui",
          "target": "components/ui/carousel.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android"
        ],
        "animationTier": 2,
        "tags": [
          "display",
          "navigation",
          "pager"
        ]
      }
    },
    {
      "name": "feature-pager",
      "type": "registry:ui",
      "title": "Feature Pager",
      "description": "Controlled full-bleed pager for in-screen feature tours: the screen's button advances it, and it publishes fractional scroll progress.",
      "dependencies": [
        "react-native-reanimated"
      ],
      "registryDependencies": [
        "page-dots"
      ],
      "files": [
        {
          "path": "registry/components/onboarding/feature-pager.tsx",
          "type": "registry:ui",
          "target": "components/ui/onboarding/feature-pager.tsx"
        }
      ],
      "meta": {
        "platforms": [
          "ios",
          "android",
          "web"
        ],
        "animationTier": 2,
        "tags": [
          "onboarding",
          "pager",
          "navigation"
        ]
      }
    }
  ]
}