{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "type": "registry:ui",
  "title": "Drawer",
  "description": "Edge slide-in panel with animated translate.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/text.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/theme.json"
  ],
  "dependencies": [
    "react-native-safe-area-context"
  ],
  "files": [
    {
      "path": "registry/shared/ui/drawer.tsx",
      "type": "registry:ui",
      "target": "components/ui/drawer.tsx",
      "content": "import { useEffect, useRef, type ReactNode } from 'react';\nimport {\n  Animated,\n  Modal,\n  Pressable,\n  useWindowDimensions,\n  View,\n  type ViewProps,\n} from 'react-native';\nimport { SafeAreaView } from 'react-native-safe-area-context';\nimport { Text, type TextProps } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\n\nexport interface DrawerProps {\n  open: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Which edge the drawer slides from. */\n  side?: 'left' | 'right';\n  children?: ReactNode;\n}\n\nexport function Drawer({\n  open,\n  onOpenChange,\n  side = 'left',\n  children,\n}: DrawerProps) {\n  const { width } = useWindowDimensions();\n  const drawerWidth = Math.min(width * 0.8, 320);\n  const from = side === 'left' ? -drawerWidth : drawerWidth;\n  const translate = useRef(new Animated.Value(from)).current;\n\n  useEffect(() => {\n    Animated.timing(translate, {\n      toValue: open ? 0 : from,\n      duration: 220,\n      useNativeDriver: true,\n    }).start();\n  }, [open, from, translate]);\n\n  return (\n    <Modal\n      visible={open}\n      transparent\n      animationType=\"fade\"\n      onRequestClose={() => onOpenChange?.(false)}\n    >\n      <View className=\"flex-1 flex-row bg-black/50\">\n        {side === 'right' && (\n          <Pressable className=\"flex-1\" onPress={() => onOpenChange?.(false)} />\n        )}\n        <Animated.View\n          style={{\n            width: drawerWidth,\n            transform: [{ translateX: translate }],\n          }}\n        >\n          <View className=\"h-full border-l border-border bg-background\">\n            <SafeAreaView style={{ flex: 1 }}>{children}</SafeAreaView>\n          </View>\n        </Animated.View>\n        {side === 'left' && (\n          <Pressable className=\"flex-1\" onPress={() => onOpenChange?.(false)} />\n        )}\n      </View>\n    </Modal>\n  );\n}\n\nexport function DrawerHeader({\n  className,\n  ...props\n}: ViewProps & { className?: string }) {\n  return (\n    <View\n      className={cn('gap-1.5 border-b border-border p-4', className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerTitle({ className, ...props }: TextProps) {\n  return (\n    <Text\n      className={cn('text-lg font-semibold text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({ className, ...props }: TextProps) {\n  return (\n    <Text\n      className={cn('text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerContent({\n  className,\n  ...props\n}: ViewProps & { className?: string }) {\n  return <View className={cn('flex-1 p-4', className)} {...props} />;\n}\n\nexport function DrawerFooter({\n  className,\n  ...props\n}: ViewProps & { className?: string }) {\n  return (\n    <View\n      className={cn('mt-auto gap-2 border-t border-border p-4', className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ]
}