{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "type": "registry:ui",
  "title": "Sheet",
  "description": "A sheet component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/sheet/sheet.tsx",
      "content": "import * as React from \"react\";\nimport {\n  View,\n  Text,\n  Modal,\n  TouchableWithoutFeedback,\n  Platform,\n  Animated,\n  Dimensions,\n  StyleSheet,\n  Easing,\n  KeyboardAvoidingView,\n} from \"react-native\";\nimport { SafeAreaView, Edge } from \"react-native-safe-area-context\";\nimport { cn } from \"@/lib/utils\";\nimport { Feather } from \"@expo/vector-icons\";\n\n// Animation config constants\nconst ANIMATION = {\n  OPEN: {\n    BACKDROP_DURATION: 180,\n    SPRING_VELOCITY: 3,\n    SPRING_TENSION: 120,\n    SPRING_FRICTION: 22,\n  },\n  CLOSE: {\n    SPRING_FRICTION: 26,\n    SPRING_TENSION: 100,\n    SPRING_VELOCITY: 0.5,\n    BACKDROP_DURATION: 280,\n    BACKDROP_DELAY: 100,\n  },\n};\n\n// Sheet sizes based on platform guidelines\nconst SHEET_SIZES = {\n  SMALL: 0.3, // 30% of screen height\n  MEDIUM: 0.5, // 50% of screen height\n  LARGE: 0.7, // 70% of screen height\n  FULL: 0.9, // 90% of screen height\n};\n\nconst { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get(\"window\");\n\nexport type SheetSize = \"small\" | \"medium\" | \"large\" | \"full\" | number;\n\nconst resolveSheetSize = (size: SheetSize): number => {\n  if (typeof size === \"number\") return size;\n\n  switch (size) {\n    case \"small\":\n      return SHEET_SIZES.SMALL;\n    case \"medium\":\n      return SHEET_SIZES.MEDIUM;\n    case \"large\":\n      return SHEET_SIZES.LARGE;\n    case \"full\":\n      return SHEET_SIZES.FULL;\n    default:\n      return SHEET_SIZES.MEDIUM;\n  }\n};\n\ninterface SheetProps {\n  open: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n  title?: string;\n  description?: string;\n  size?: SheetSize;\n  side?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  contentClassName?: string;\n  avoidKeyboard?: boolean;\n  closeOnBackdropPress?: boolean;\n  disableBackHandler?: boolean;\n}\n\ninterface SheetContextValue {\n  close: () => void;\n  isClosing: boolean;\n  isAnimating: boolean;\n  position: Animated.Value;\n}\n\nexport const SheetContext = React.createContext<SheetContextValue>({\n  close: () => { },\n  isClosing: false,\n  isAnimating: false,\n  position: new Animated.Value(0),\n});\n\nexport const useSheet = () => React.useContext(SheetContext);\n\nconst Sheet = React.forwardRef<View, SheetProps>(\n  (\n    {\n      open,\n      onClose,\n      children,\n      title,\n      description,\n      size = \"medium\",\n      side = \"right\",\n      contentClassName,\n      avoidKeyboard = true,\n      closeOnBackdropPress = true,\n      disableBackHandler = false,\n    },\n    ref\n  ) => {\n    const [isVisible, setIsVisible] = React.useState(false);\n    const sheetSize = React.useMemo(() => resolveSheetSize(size), [size]);\n\n    const translateValue = React.useRef(new Animated.Value(0)).current;\n    const backdropOpacity = React.useRef(new Animated.Value(0)).current;\n    const isClosing = React.useRef(false);\n    const isAnimating = React.useRef(false);\n    const hasInitializedOpen = React.useRef(false);\n\n    const getInitialPosition = () => {\n      switch (side) {\n        case \"left\":\n          return -SCREEN_WIDTH;\n        case \"right\":\n          return SCREEN_WIDTH;\n        case \"top\":\n          return -SCREEN_HEIGHT;\n        case \"bottom\":\n          return SCREEN_HEIGHT;\n        default:\n          return SCREEN_WIDTH;\n      }\n    };\n\n    const getTargetPosition = () => {\n      switch (side) {\n        case \"left\":\n        case \"right\":\n          return 0;\n        case \"top\":\n        case \"bottom\":\n          return 0;\n        default:\n          return 0;\n      }\n    };\n\n    const getSheetDimensions = () => {\n      switch (side) {\n        case \"left\":\n        case \"right\":\n          return {\n            width: SCREEN_WIDTH * sheetSize,\n            height: SCREEN_HEIGHT,\n          };\n        case \"top\":\n        case \"bottom\":\n          return {\n            width: SCREEN_WIDTH,\n            height: SCREEN_HEIGHT * sheetSize,\n          };\n        default:\n          return {\n            width: SCREEN_WIDTH * sheetSize,\n            height: SCREEN_HEIGHT,\n          };\n      }\n    };\n\n    const animateOpen = React.useCallback(() => {\n      if (isAnimating.current) {\n        translateValue.stopAnimation();\n        backdropOpacity.stopAnimation();\n      }\n\n      isAnimating.current = true;\n      translateValue.setValue(getInitialPosition());\n      backdropOpacity.setValue(0);\n      isClosing.current = false;\n\n      Animated.timing(backdropOpacity, {\n        toValue: 1,\n        duration: ANIMATION.OPEN.BACKDROP_DURATION,\n        useNativeDriver: true,\n        easing: Easing.out(Easing.ease),\n      }).start();\n\n      Animated.spring(translateValue, {\n        toValue: getTargetPosition(),\n        useNativeDriver: true,\n        velocity: ANIMATION.OPEN.SPRING_VELOCITY,\n        tension: ANIMATION.OPEN.SPRING_TENSION,\n        friction: ANIMATION.OPEN.SPRING_FRICTION,\n      }).start(() => {\n        isAnimating.current = false;\n      });\n    }, [backdropOpacity, translateValue]);\n\n    const animateClose = React.useCallback(() => {\n      if (isClosing.current) return;\n\n      isClosing.current = true;\n\n      if (isAnimating.current) {\n        translateValue.stopAnimation();\n        backdropOpacity.stopAnimation();\n      }\n\n      isAnimating.current = true;\n\n      Animated.spring(translateValue, {\n        toValue: getInitialPosition(),\n        useNativeDriver: true,\n        friction: ANIMATION.CLOSE.SPRING_FRICTION,\n        tension: ANIMATION.CLOSE.SPRING_TENSION,\n        velocity: ANIMATION.CLOSE.SPRING_VELOCITY,\n      }).start();\n\n      Animated.timing(backdropOpacity, {\n        toValue: 0,\n        duration: ANIMATION.CLOSE.BACKDROP_DURATION,\n        easing: Easing.out(Easing.ease),\n        useNativeDriver: true,\n        delay: ANIMATION.CLOSE.BACKDROP_DELAY,\n      }).start(() => {\n        requestAnimationFrame(() => {\n          setIsVisible(false);\n          isClosing.current = false;\n          isAnimating.current = false;\n          hasInitializedOpen.current = false;\n          onClose();\n        });\n      });\n    }, [backdropOpacity, translateValue, onClose]);\n\n    React.useEffect(() => {\n      if (open && !isVisible) {\n        setIsVisible(true);\n        return;\n      }\n\n      if (\n        open &&\n        isVisible &&\n        !hasInitializedOpen.current &&\n        !isClosing.current\n      ) {\n        animateOpen();\n        hasInitializedOpen.current = true;\n        return;\n      }\n\n      if (!open && isVisible && !isClosing.current) {\n        animateClose();\n      }\n    }, [open, isVisible, animateOpen, animateClose]);\n\n    const handleBackdropPress = React.useCallback(() => {\n      if (closeOnBackdropPress && !isClosing.current) {\n        animateClose();\n      }\n    }, [animateClose, closeOnBackdropPress]);\n\n    const contextValue = React.useMemo(\n      () => ({\n        close: animateClose,\n        isClosing: isClosing.current,\n        isAnimating: isAnimating.current,\n        position: translateValue,\n      }),\n      [animateClose, translateValue]\n    );\n\n    const getTransformStyle = () => {\n      switch (side) {\n        case \"left\":\n        case \"right\":\n          return { transform: [{ translateX: translateValue }] };\n        case \"top\":\n        case \"bottom\":\n          return { transform: [{ translateY: translateValue }] };\n        default:\n          return { transform: [{ translateX: translateValue }] };\n      }\n    };\n\n    const getSheetPosition = () => {\n      switch (side) {\n        case \"left\":\n          return \"left-0 top-0 bottom-0\";\n        case \"right\":\n          return \"right-0 top-0 bottom-0\";\n        case \"top\":\n          return \"top-0 left-0 right-0\";\n        case \"bottom\":\n          return \"bottom-0 left-0 right-0\";\n        default:\n          return \"right-0 top-0 bottom-0\";\n      }\n    };\n\n    const getSafeAreaEdges = (): Edge[] => {\n      switch (side) {\n        case \"left\":\n        case \"right\":\n          return [\"top\", \"bottom\"];\n        case \"top\":\n          return [\"top\", \"left\", \"right\"];\n        case \"bottom\":\n          return [\"bottom\", \"left\", \"right\"];\n        default:\n          return [\"top\", \"bottom\"];\n      }\n    };\n\n    const renderContent = React.useCallback(\n      () => (\n        <View className=\"flex-1\">\n          <Animated.View\n            style={[styles.backdrop, { opacity: backdropOpacity }]}\n          >\n            {closeOnBackdropPress && (\n              <TouchableWithoutFeedback onPress={handleBackdropPress}>\n                <View style={StyleSheet.absoluteFillObject} />\n              </TouchableWithoutFeedback>\n            )}\n          </Animated.View>\n\n          <Animated.View\n            style={[\n              styles.sheetContainer,\n              getTransformStyle(),\n              getSheetDimensions(),\n            ]}\n            className={cn(\n              \"absolute bg-popover\",\n              Platform.OS === \"ios\" ? \"ios:shadow-xl\" : \"android:elevation-24\",\n              getSheetPosition(),\n              contentClassName\n            )}\n          >\n            <SafeAreaView edges={getSafeAreaEdges()} className=\"flex-1\">\n              <View className=\"flex-1\">\n                <View className=\"flex-row items-center justify-between p-4 border-b border-border\">\n                  <View className=\"flex-1\">\n                    {title && (\n                      <Text className=\"text-lg font-semibold text-foreground\">\n                        {title}\n                      </Text>\n                    )}\n                    {description && (\n                      <Text className=\"text-sm text-muted-foreground mt-1\">\n                        {description}\n                      </Text>\n                    )}\n                  </View>\n                  <TouchableWithoutFeedback onPress={animateClose}>\n                    <View className=\"p-2 rounded-full bg-muted/50\">\n                      <Feather name=\"x\" size={20} color=\"#6B7280\" />\n                    </View>\n                  </TouchableWithoutFeedback>\n                </View>\n\n                <View ref={ref} className=\"flex-1\">\n                  {children}\n                </View>\n              </View>\n            </SafeAreaView>\n          </Animated.View>\n        </View>\n      ),\n      [\n        animateClose,\n        backdropOpacity,\n        closeOnBackdropPress,\n        contentClassName,\n        description,\n        title,\n        translateValue,\n        children,\n        ref,\n      ]\n    );\n\n    if (!isVisible) return null;\n\n    return (\n      <SheetContext.Provider value={contextValue}>\n        <Modal\n          visible={isVisible}\n          transparent\n          animationType=\"none\"\n          statusBarTranslucent\n          onRequestClose={disableBackHandler ? undefined : animateClose}\n        >\n          {avoidKeyboard && Platform.OS === \"ios\" ? (\n            <KeyboardAvoidingView\n              behavior=\"padding\"\n              style={{ flex: 1 }}\n              keyboardVerticalOffset={10}\n            >\n              {renderContent()}\n            </KeyboardAvoidingView>\n          ) : (\n            renderContent()\n          )}\n        </Modal>\n      </SheetContext.Provider>\n    );\n  }\n);\n\nconst styles = StyleSheet.create({\n  backdrop: {\n    ...StyleSheet.absoluteFillObject,\n    backgroundColor: \"rgba(0, 0, 0, 0.4)\",\n  },\n  sheetContainer: {\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: -3 },\n    shadowOpacity: 0.15,\n    shadowRadius: 8,\n    elevation: 24,\n  },\n});\n\nSheet.displayName = \"Sheet\";\n\nexport { Sheet };\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Sheet, useSheet } from \"@/components/ui/sheet\";\nimport * as React from \"react\";\nimport { Text, View } from \"react-native\";\n\n\nexport default function SheetExampleScreen() {\n    const [rightSheetOpen, setRightSheetOpen] = React.useState(false);\n\n    return (\n        <Sheet\n            open={rightSheetOpen}\n            onClose={() => setRightSheetOpen(false)}\n            title=\"Right Sheet\"\n            description=\"This sheet slides in from the right\"\n            side=\"right\"\n            size=\"medium\"\n        >\n            <View className=\"p-4\">\n                <Text className=\"text-base text-foreground\">\n                    This is a right sheet example. It slides in from the right\n                    side of the screen.\n                </Text>\n            </View>\n        </Sheet>\n    );\n}\n",
  "customPreview": "import { ThemeToggle } from \"@/components/theme-toggle\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Sheet, useSheet } from \"@/components/ui/sheet\";\nimport { Ionicons } from \"@expo/vector-icons\";\nimport { Stack } from \"expo-router\";\nimport * as React from \"react\";\nimport {\n    Keyboard,\n    KeyboardAvoidingView,\n    Platform,\n    ScrollView,\n    Text,\n    TouchableWithoutFeedback,\n    View,\n} from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\ntype IoniconName = React.ComponentProps<typeof Ionicons>[\"name\"];\n\nconst FeedbackForm = () => {\n    const [selectedRating, setSelectedRating] = React.useState<number | null>(\n        null\n    );\n    const [feedbackText, setFeedbackText] = React.useState(\"\");\n    const { close } = useSheet();\n\n    const handleSubmit = () => {\n        console.log({ rating: selectedRating, feedback: feedbackText });\n        close();\n    };\n\n    return (\n        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>\n            <ScrollView className=\"p-4\">\n                <Text className=\"text-base mb-4 text-foreground\">\n                    We'd love to hear your thoughts on our application.\n                </Text>\n\n                <View className=\"mb-4\">\n                    <Text className=\"text-sm font-medium mb-2 text-foreground\">\n                        How would you rate your experience?\n                    </Text>\n                    <View className=\"flex-row justify-between\">\n                        {[1, 2, 3, 4, 5].map((rating) => (\n                            <Button\n                                key={rating}\n                                variant={selectedRating === rating ? \"default\" : \"outline\"}\n                                size=\"icon\"\n                                className=\"w-10 h-10 rounded-full\"\n                                onPress={() => setSelectedRating(rating)}\n                            >\n                                <Text\n                                    className={\n                                        selectedRating === rating\n                                            ? \"text-primary-foreground\"\n                                            : \"text-foreground\"\n                                    }\n                                >\n                                    {rating}\n                                </Text>\n                            </Button>\n                        ))}\n                    </View>\n                </View>\n\n                <View className=\"mb-4\">\n                    <Text className=\"text-sm font-medium mb-2 text-foreground\">\n                        Your comments\n                    </Text>\n                    <Input\n                        multiline\n                        textAlignVertical=\"top\"\n                        numberOfLines={4}\n                        className=\"h-24 py-2\"\n                        placeholder=\"Type your feedback here...\"\n                        value={feedbackText}\n                        onChangeText={setFeedbackText}\n                    />\n                </View>\n\n                <Button onPress={handleSubmit}>\n                    <Text className=\"text-primary-foreground\">Submit</Text>\n                </Button>\n            </ScrollView>\n        </TouchableWithoutFeedback>\n    );\n};\n\nconst SettingsList = () => {\n    return (\n        <ScrollView>\n            {[\n                { icon: \"person-outline\" as IoniconName, label: \"My Account\" },\n                {\n                    icon: \"notifications-outline\" as IoniconName,\n                    label: \"Notifications\",\n                },\n                { icon: \"lock-closed-outline\" as IoniconName, label: \"Privacy\" },\n                { icon: \"moon-outline\" as IoniconName, label: \"Theme\" },\n                {\n                    icon: \"globe-outline\" as IoniconName,\n                    label: \"Language\",\n                },\n                { icon: \"help-circle-outline\" as IoniconName, label: \"Help & Support\" },\n                { icon: \"information-circle-outline\" as IoniconName, label: \"About\" },\n                { icon: \"log-out-outline\" as IoniconName, label: \"Logout\" },\n            ].map((item, index) => (\n                <View key={index}>\n                    <Button\n                        variant=\"ghost\"\n                        className=\"flex-row h-14 items-center px-4 py-2 border-b border-border rounded-none justify-start\"\n                    >\n                        <Ionicons\n                            name={item.icon}\n                            size={22}\n                            color=\"#6B7280\"\n                            style={{ marginRight: 12 }}\n                        />\n                        <Text className=\"text-base text-foreground\">{item.label}</Text>\n                        <Ionicons\n                            name=\"chevron-forward\"\n                            size={16}\n                            color=\"#6B7280\"\n                            style={{ marginLeft: \"auto\" }}\n                        />\n                    </Button>\n                </View>\n            ))}\n        </ScrollView>\n    );\n};\n\nconst LargeSheetContent = () => {\n    const { close } = useSheet();\n\n    return (\n        <ScrollView contentContainerStyle={{ paddingBottom: 200 }}>\n            <View className=\"p-4\">\n                <Text className=\"text-xl font-bold mb-4 text-foreground\">\n                    Section Title\n                </Text>\n\n                <Text className=\"text-base mb-4 text-foreground\">\n                    This sheet can be opened from different sides and with different sizes.\n                    Try the various examples below to see how it adapts to different use\n                    cases.\n                </Text>\n\n                <View className=\"bg-accent/20 rounded-lg p-4 mb-4\">\n                    <Text className=\"text-sm font-medium text-foreground mb-2\">Tip</Text>\n                    <Text className=\"text-sm text-muted-foreground\">\n                        The sheet component follows platform-specific guidelines for animations\n                        and interactions, providing a native feel on both iOS and Android.\n                    </Text>\n                </View>\n\n                <View className=\"h-px bg-border w-full my-4\" />\n\n                <Text className=\"text-base font-bold mb-2 text-foreground\">\n                    Features:\n                </Text>\n\n                {[\n                    \"Multiple side options (left, right, top, bottom)\",\n                    \"Customizable sizes\",\n                    \"Smooth animations\",\n                    \"Keyboard aware\",\n                    \"Backdrop press to close\",\n                    \"Platform-specific styling\",\n                ].map((feature, index) => (\n                    <View key={index} className=\"flex-row items-center py-2\">\n                        <View className=\"w-2 h-2 rounded-full bg-primary mr-2\" />\n                        <Text className=\"text-base text-foreground\">{feature}</Text>\n                    </View>\n                ))}\n\n                <View className=\"h-px bg-border w-full my-4\" />\n\n                <Text className=\"text-base font-bold mb-2 text-foreground\">\n                    Demo Content:\n                </Text>\n\n                {Array(10)\n                    .fill(0)\n                    .map((_, i) => (\n                        <View key={i} className=\"py-3 border-b border-border\">\n                            <Text className=\"text-base text-foreground\">\n                                Content item {i + 1}\n                            </Text>\n                            <Text className=\"text-sm text-muted-foreground\">\n                                Additional description for this content item\n                            </Text>\n                        </View>\n                    ))}\n\n                <Button variant=\"outline\" className=\"mt-6 mb-10\" onPress={close}>\n                    <Text className=\"text-foreground\">Close Sheet</Text>\n                </Button>\n            </View>\n        </ScrollView>\n    );\n};\n\nexport default function SheetExampleScreen() {\n    const [rightSheetOpen, setRightSheetOpen] = React.useState(false);\n    const [leftSheetOpen, setLeftSheetOpen] = React.useState(false);\n    const [topSheetOpen, setTopSheetOpen] = React.useState(false);\n    const [bottomSheetOpen, setBottomSheetOpen] = React.useState(false);\n    const [feedbackSheetOpen, setFeedbackSheetOpen] = React.useState(false);\n    const [settingsSheetOpen, setSettingsSheetOpen] = React.useState(false);\n    const [largeSheetOpen, setLargeSheetOpen] = React.useState(false);\n\n    return (\n        <>\n            <Stack.Screen\n                options={{\n                    title: \"Sheet\",\n                    headerRight: () => <ThemeToggle />,\n                }}\n            />\n\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <KeyboardAvoidingView\n                    behavior={Platform.OS === \"ios\" ? \"padding\" : \"height\"}\n                    style={{ flex: 1 }}\n                    keyboardVerticalOffset={100}\n                >\n                    <ScrollView className=\"p-4\">\n                        <View className=\"mb-6\">\n                            <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                                Sheet\n                            </Text>\n                            <Text className=\"text-base mb-6 text-muted-foreground\">\n                                A versatile sheet component that can slide in from any side of the\n                                screen.\n                            </Text>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Side Variations\n                            </Text>\n                            <View className=\"flex-row flex-wrap gap-2\">\n                                <Button onPress={() => setRightSheetOpen(true)}>\n                                    <Text className=\"text-primary-foreground\">Right Sheet</Text>\n                                </Button>\n                                <Button onPress={() => setLeftSheetOpen(true)}>\n                                    <Text className=\"text-primary-foreground\">Left Sheet</Text>\n                                </Button>\n                                <Button onPress={() => setTopSheetOpen(true)}>\n                                    <Text className=\"text-primary-foreground\">Top Sheet</Text>\n                                </Button>\n                                <Button onPress={() => setBottomSheetOpen(true)}>\n                                    <Text className=\"text-primary-foreground\">Bottom Sheet</Text>\n                                </Button>\n                            </View>\n\n                            <Sheet\n                                open={rightSheetOpen}\n                                onClose={() => setRightSheetOpen(false)}\n                                title=\"Right Sheet\"\n                                description=\"This sheet slides in from the right\"\n                                side=\"right\"\n                                size=\"medium\"\n                            >\n                                <View className=\"p-4\">\n                                    <Text className=\"text-base text-foreground\">\n                                        This is a right sheet example. It slides in from the right\n                                        side of the screen.\n                                    </Text>\n                                </View>\n                            </Sheet>\n\n                            <Sheet\n                                open={leftSheetOpen}\n                                onClose={() => setLeftSheetOpen(false)}\n                                title=\"Left Sheet\"\n                                description=\"This sheet slides in from the left\"\n                                side=\"left\"\n                                size=\"medium\"\n                            >\n                                <View className=\"p-4\">\n                                    <Text className=\"text-base text-foreground\">\n                                        This is a left sheet example. It slides in from the left side\n                                        of the screen.\n                                    </Text>\n                                </View>\n                            </Sheet>\n\n                            <Sheet\n                                open={topSheetOpen}\n                                onClose={() => setTopSheetOpen(false)}\n                                title=\"Top Sheet\"\n                                description=\"This sheet slides in from the top\"\n                                side=\"top\"\n                                size=\"medium\"\n                            >\n                                <View className=\"p-4\">\n                                    <Text className=\"text-base text-foreground\">\n                                        This is a top sheet example. It slides in from the top of the\n                                        screen.\n                                    </Text>\n                                </View>\n                            </Sheet>\n\n                            <Sheet\n                                open={bottomSheetOpen}\n                                onClose={() => setBottomSheetOpen(false)}\n                                title=\"Bottom Sheet\"\n                                description=\"This sheet slides in from the bottom\"\n                                side=\"bottom\"\n                                size=\"medium\"\n                            >\n                                <View className=\"p-4\">\n                                    <Text className=\"text-base text-foreground\">\n                                        This is a bottom sheet example. It slides in from the bottom\n                                        of the screen.\n                                    </Text>\n                                </View>\n                            </Sheet>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Sheet with Form\n                            </Text>\n                            <Button\n                                variant=\"outline\"\n                                onPress={() => setFeedbackSheetOpen(true)}\n                                className=\"bg-primary/10\"\n                            >\n                                <Ionicons\n                                    name=\"chatbubble-outline\"\n                                    size={20}\n                                    color=\"#4F46E5\"\n                                    style={{ marginRight: 8 }}\n                                />\n                                <Text className=\"text-base font-medium text-primary\">\n                                    Leave Feedback\n                                </Text>\n                            </Button>\n\n                            <Sheet\n                                open={feedbackSheetOpen}\n                                onClose={() => setFeedbackSheetOpen(false)}\n                                title=\"Feedback\"\n                                description=\"Share your thoughts with us\"\n                                side=\"bottom\"\n                                size=\"large\"\n                            >\n                                <FeedbackForm />\n                            </Sheet>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Sheet with List\n                            </Text>\n                            <Button\n                                variant=\"outline\"\n                                onPress={() => setSettingsSheetOpen(true)}\n                                className=\"justify-between\"\n                            >\n                                <View className=\"flex-row items-center\">\n                                    <Ionicons\n                                        name=\"settings-outline\"\n                                        size={20}\n                                        color=\"#6B7280\"\n                                        style={{ marginRight: 8 }}\n                                    />\n                                    <Text className=\"text-base text-foreground\">Settings</Text>\n                                </View>\n                                <Ionicons name=\"chevron-up\" size={16} color=\"#6B7280\" />\n                            </Button>\n\n                            <Sheet\n                                open={settingsSheetOpen}\n                                onClose={() => setSettingsSheetOpen(false)}\n                                title=\"Settings\"\n                                description=\"Manage your preferences\"\n                                side=\"right\"\n                                size=\"medium\"\n                            >\n                                <SettingsList />\n                            </Sheet>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Large Sheet with Complex Content\n                            </Text>\n                            <Button variant=\"secondary\" onPress={() => setLargeSheetOpen(true)}>\n                                <Text className=\"text-accent-foreground\">\n                                    View More Information\n                                </Text>\n                            </Button>\n\n                            <Sheet\n                                open={largeSheetOpen}\n                                onClose={() => setLargeSheetOpen(false)}\n                                title=\"Detailed Information\"\n                                description=\"Learn more about our features\"\n                                side=\"right\"\n                                size=\"large\"\n                            >\n                                <LargeSheetContent />\n                            </Sheet>\n                        </View>\n                    </ScrollView>\n                </KeyboardAvoidingView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}