rn-cn-ui 1.0.0 → 1.0.1

package/README.md

@@ -1,90 +1,63 @@
-# Native UI
+# rn-cn-ui
 
 A high-quality, open-source UI library for React Native, inspired by shadcn/ui.
+**This is a CLI tool** that copies the component code into your project, allowing you to customize it fully.
 
-## Features
+## Prerequisites
 
-- **Minimal Design**: Clean and modern aesthetic.
-- **Highly Reusable**: Built with reusability in mind.
-- **Class Merging**: Uses `clsx` and `tailwind-merge` for easy styling overrides.
-- **NativeWind**: Built on top of NativeWind for Tailwind CSS in React Native.
-
-## Installation
-
-```bash
-npm install rn-cn-ui
-```
+1.  **React Native** project (Expo or CLI).
+2.  **NativeWind** and **Tailwind CSS** configured.
 
 ## Usage
 
-### Button
+You do not install this library as a dependency. Instead, you use the CLI to add components to your project.
 
-```tsx
-import { Button } from "rn-cn-ui"
+### Adding a Component
 
-<Button label="Click me" onPress={() => console.log("Pressed")} />
-<Button variant="destructive" label="Delete" />
-<Button variant="outline" label="Cancel" />
-```
-
-### Text
-
-```tsx
-import { Text } from "rn-cn-ui"
-
-<Text variant="h1">Heading 1</Text>
-<Text variant="lead">This is a lead text.</Text>
-```
+Run the following command to add a component (e.g., `button`) to your project:
 
-### Input
-
-```tsx
-import { Input, Label } from "rn-cn-ui"
-
-<Label>Email</Label>
-<Input placeholder="Enter your email" />
+```bash
+npx rn-cn-ui add button
 ```
 
-### Card
+This will:
+1.  Download `button.tsx` to your `src/components/ui/` directory.
+2.  Install necessary dependencies (like `class-variance-authority`, `clsx`, `tailwind-merge`).
 
-```tsx
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from "rn-cn-ui"
-
-<Card>
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card Description</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <Text>Content goes here</Text>
-  </CardContent>
-  <CardFooter>
-    <Button label="Action" />
-  </CardFooter>
-</Card>
-```
+### Using the Component
 
-### Badge
+Once added, import the component from your local directory:
 
 ```tsx
-import { Badge } from "rn-cn-ui"
+import { Button } from "./src/components/ui/button"
 
-<Badge label="New" />
-<Badge variant="destructive" label="Error" />
+export default function App() {
+  return (
+    <Button label="Click me" onPress={() => console.log("Pressed")} />
+  )
+}
 ```
 
-### Avatar
-
-```tsx
-import { Avatar, AvatarImage, AvatarFallback, AvatarFallbackText } from "rn-cn-ui"
-
-<Avatar>
-  <AvatarImage source={{ uri: "https://github.com/shadcn.png" }} />
-  <AvatarFallback>
-    <AvatarFallbackText>CN</AvatarFallbackText>
-  </AvatarFallback>
-</Avatar>
-```
+## Available Components
+
+You can add any of the following components:
+
+-   `button`
+-   `text`
+-   `input`
+-   `card`
+-   `badge`
+-   `avatar`
+-   `label`
+-   `separator`
+-   `skeleton`
+-   `spinner`
+-   `switch`
+-   `checkbox`
+-   `radio-group`
+-   `textarea`
+-   `alert`
+-   `progress`
 
 ## Configuration
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-cn-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A high-quality, open-source UI library for React Native, inspired by shadcn/ui.",
   "main": "index.js",
   "bin": {

package/registry.json

@@ -78,5 +78,40 @@
     "name": "progress",
     "dependencies": ["clsx", "tailwind-merge"],
     "files": ["src/components/ui/progress.tsx"]
+  },
+  "accordion": {
+    "name": "accordion",
+    "dependencies": ["lucide-react-native", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/accordion.tsx"]
+  },
+  "aspect-ratio": {
+    "name": "aspect-ratio",
+    "dependencies": ["clsx", "tailwind-merge"],
+    "files": ["src/components/ui/aspect-ratio.tsx"]
+  },
+  "dialog": {
+    "name": "dialog",
+    "dependencies": ["lucide-react-native", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/dialog.tsx"]
+  },
+  "select": {
+    "name": "select",
+    "dependencies": ["lucide-react-native", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/select.tsx"]
+  },
+  "tabs": {
+    "name": "tabs",
+    "dependencies": ["clsx", "tailwind-merge"],
+    "files": ["src/components/ui/tabs.tsx"]
+  },
+  "toggle": {
+    "name": "toggle",
+    "dependencies": ["class-variance-authority", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/toggle.tsx"]
+  },
+  "toggle-group": {
+    "name": "toggle-group",
+    "dependencies": ["class-variance-authority", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/toggle-group.tsx", "src/components/ui/toggle.tsx"]
   }
 }

package/src/components/ui/accordion.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { View, Pressable, Text, LayoutAnimation, Platform, UIManager } from "react-native"
+import { ChevronDown } from "lucide-react-native"
+import { cn } from "../../lib/utils"
+
+if (
+  Platform.OS === "android" &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true)
+}
+
+const Accordion = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    type?: "single" | "multiple"
+    collapsible?: boolean
+    defaultValue?: string | string[]
+    onValueChange?: (value: string | string[]) => void
+  }
+>(({ className, type = "single", collapsible = false, defaultValue, onValueChange, children, ...props }, ref) => {
+  const [value, setValue] = React.useState<string | string[]>(defaultValue || (type === "multiple" ? [] : ""))
+
+  const handleValueChange = (itemValue: string) => {
+    if (type === "single") {
+      const newValue = value === itemValue && collapsible ? "" : itemValue
+      setValue(newValue)
+      onValueChange?.(newValue)
+    } else {
+      const currentValues = Array.isArray(value) ? value : []
+      const newValue = currentValues.includes(itemValue)
+        ? currentValues.filter((v) => v !== itemValue)
+        : [...currentValues, itemValue]
+      setValue(newValue)
+      onValueChange?.(newValue)
+    }
+  }
+
+  return (
+    <View ref={ref} className={cn("gap-2", className)} {...props}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, {
+            // @ts-ignore
+            expanded: Array.isArray(value) ? value.includes(child.props.value) : value === child.props.value,
+            // @ts-ignore
+            onPress: () => handleValueChange(child.props.value),
+          })
+        }
+        return child
+      })}
+    </View>
+  )
+})
+Accordion.displayName = "Accordion"
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & { value: string }
+>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn("border-b border-border", className)} {...props} />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  React.ComponentPropsWithoutRef<typeof Pressable> & { expanded?: boolean }
+>(({ className, children, expanded, onPress, ...props }, ref) => (
+  <Pressable
+    ref={ref}
+    onPress={(e) => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+      onPress?.(e)
+    }}
+    className={cn(
+      "flex-row items-center justify-between py-4 font-medium transition-all",
+      className
+    )}
+    {...props}
+  >
+    {typeof children === 'string' ? (
+        <Text className="text-sm font-medium text-foreground">{children}</Text>
+    ) : children}
+    <ChevronDown
+      size={18}
+      className={cn("text-muted-foreground transition-transform duration-200", expanded ? "rotate-180" : "")}
+    />
+  </Pressable>
+))
+AccordionTrigger.displayName = "AccordionTrigger"
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & { expanded?: boolean }
+>(({ className, children, expanded, ...props }, ref) => {
+  if (!expanded) return null
+  return (
+    <View
+      ref={ref}
+      className={cn("overflow-hidden text-sm transition-all pb-4", className)}
+      {...props}
+    >
+      <View className="pt-0 pb-4">{children}</View>
+    </View>
+  )
+})
+AccordionContent.displayName = "AccordionContent"
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { View } from "react-native"
+import { cn } from "../../lib/utils"
+
+interface AspectRatioProps extends React.ComponentPropsWithoutRef<typeof View> {
+  ratio?: number
+}
+
+const AspectRatio = React.forwardRef<React.ElementRef<typeof View>, AspectRatioProps>(
+  ({ className, ratio = 1, style, ...props }, ref) => (
+    <View
+      ref={ref}
+      style={[style, { aspectRatio: ratio }]}
+      className={cn("w-full", className)}
+      {...props}
+    />
+  )
+)
+AspectRatio.displayName = "AspectRatio"
+
+export { AspectRatio }

package/src/components/ui/dialog.tsx

@@ -0,0 +1,100 @@
+import * as React from "react"
+import { Modal, View, Pressable, Text } from "react-native"
+import { X } from "lucide-react-native"
+import { cn } from "../../lib/utils"
+
+const Dialog = React.forwardRef<
+  React.ElementRef<typeof Modal>,
+  React.ComponentPropsWithoutRef<typeof Modal> & {
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(({ className, children, open, onOpenChange, ...props }, ref) => (
+  <Modal
+    ref={ref}
+    transparent
+    animationType="fade"
+    visible={open}
+    onRequestClose={() => onOpenChange?.(false)}
+    {...props}
+  >
+    <View className="flex-1 items-center justify-center bg-black/50 p-4">
+      <Pressable className="absolute inset-0" onPress={() => onOpenChange?.(false)} />
+      <View
+        className={cn(
+          "w-full max-w-lg gap-4 rounded-lg border border-border bg-background p-6 shadow-lg",
+          className
+        )}
+      >
+        {children}
+        <Pressable
+          className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+          onPress={() => onOpenChange?.(false)}
+        >
+          <X size={18} className="text-muted-foreground" />
+        </Pressable>
+      </View>
+    </View>
+  </Modal>
+))
+Dialog.displayName = "Dialog"
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text>
+>(({ className, ...props }, ref) => (
+  <Text
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight text-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = "DialogTitle"
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text>
+>(({ className, ...props }, ref) => (
+  <Text
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = "DialogDescription"
+
+export {
+  Dialog,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

package/src/components/ui/select.tsx

@@ -0,0 +1,143 @@
+import * as React from "react"
+import { View, Pressable, Text, Modal, FlatList } from "react-native"
+import { Check, ChevronDown } from "lucide-react-native"
+import { cn } from "../../lib/utils"
+
+interface SelectContextValue {
+  value?: string
+  onValueChange?: (value: string) => void
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+const SelectContext = React.createContext<SelectContextValue>({
+  open: false,
+  setOpen: () => {},
+})
+
+const Select = ({
+  value,
+  onValueChange,
+  children,
+}: {
+  value?: string
+  onValueChange?: (value: string) => void
+  children: React.ReactNode
+}) => {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <SelectContext.Provider value={{ value, onValueChange, open, setOpen }}>
+      {children}
+    </SelectContext.Provider>
+  )
+}
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  React.ComponentPropsWithoutRef<typeof Pressable>
+>(({ className, children, ...props }, ref) => {
+  const { setOpen } = React.useContext(SelectContext)
+  return (
+    <Pressable
+      ref={ref}
+      onPress={() => setOpen(true)}
+      className={cn(
+        "flex h-10 w-full flex-row items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown size={16} className="opacity-50" />
+    </Pressable>
+  )
+})
+SelectTrigger.displayName = "SelectTrigger"
+
+const SelectValue = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text> & { placeholder?: string }
+>(({ className, placeholder, ...props }, ref) => {
+  const { value } = React.useContext(SelectContext)
+  return (
+    <Text
+      ref={ref}
+      className={cn("text-sm text-foreground", !value && "text-muted-foreground", className)}
+      {...props}
+    >
+      {value || placeholder}
+    </Text>
+  )
+})
+SelectValue.displayName = "SelectValue"
+
+const SelectContent = ({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => {
+  const { open, setOpen } = React.useContext(SelectContext)
+  
+  if (!open) return null
+
+  return (
+    <Modal
+        transparent
+        animationType="fade"
+        visible={open}
+        onRequestClose={() => setOpen(false)}
+    >
+        <Pressable className="flex-1 bg-black/50" onPress={() => setOpen(false)}>
+            <View className="flex-1 justify-center p-4">
+                <View
+                    className={cn(
+                        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md animate-in fade-in-80",
+                        className
+                    )}
+                    {...props}
+                >
+                    <View className="p-1">
+                        {children}
+                    </View>
+                </View>
+            </View>
+        </Pressable>
+    </Modal>
+  )
+}
+SelectContent.displayName = "SelectContent"
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  React.ComponentPropsWithoutRef<typeof Pressable> & { value: string }
+>(({ className, children, value, ...props }, ref) => {
+  const { value: selectedValue, onValueChange, setOpen } = React.useContext(SelectContext)
+  const isSelected = selectedValue === value
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={() => {
+        onValueChange?.(value)
+        setOpen(false)
+      }}
+      className={cn(
+        "relative flex w-full cursor-default select-none flex-row items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        isSelected && "bg-accent",
+        className
+      )}
+      {...props}
+    >
+      {isSelected && (
+        <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <Check size={14} className="text-foreground" />
+        </View>
+      )}
+      <Text className="text-popover-foreground">{children}</Text>
+    </Pressable>
+  )
+})
+SelectItem.displayName = "SelectItem"
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem }

package/src/components/ui/tabs.tsx

@@ -0,0 +1,174 @@
+import * as React from "react"
+import { View, Pressable, Text } from "react-native"
+import { cn } from "../../lib/utils"
+
+const Tabs = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    value: string
+    onValueChange: (value: string) => void
+  }
+>(({ className, value, onValueChange, children, ...props }, ref) => (
+  <View ref={ref} className={cn("", className)} {...props}>
+    {React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, {
+          // @ts-ignore
+          value,
+          // @ts-ignore
+          onValueChange,
+        })
+      }
+      return child
+    })}
+  </View>
+))
+Tabs.displayName = "Tabs"
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 flex-row items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = "TabsList"
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  React.ComponentPropsWithoutRef<typeof Pressable> & {
+    value: string
+    activeValue?: string
+    onValueChange?: (value: string) => void
+  }
+>(({ className, value, activeValue, onValueChange, children, ...props }, ref) => {
+    // Note: activeValue and onValueChange are injected by parent Tabs/TabsList if we structured it that way, 
+    // but here we rely on the user passing context or we can use a Context API.
+    // For simplicity in this "copy-paste" component, let's assume Tabs injects props or we use Context.
+    // Let's switch to Context for cleaner API.
+    return (
+        <Pressable
+            ref={ref}
+            onPress={() => onValueChange?.(value)}
+            className={cn(
+                "inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+                activeValue === value && "bg-background text-foreground shadow-sm",
+                className
+            )}
+            {...props}
+        >
+            <Text className={cn("text-sm font-medium", activeValue === value ? "text-foreground" : "text-muted-foreground")}>
+                {children}
+            </Text>
+        </Pressable>
+    )
+})
+TabsTrigger.displayName = "TabsTrigger"
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    value: string
+    activeValue?: string
+  }
+>(({ className, value, activeValue, children, ...props }, ref) => {
+  if (value !== activeValue) return null
+  return (
+    <View
+      ref={ref}
+      className={cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      )}
+      {...props}
+    >
+        {children}
+    </View>
+  )
+})
+TabsContent.displayName = "TabsContent"
+
+// Re-implementing Tabs with Context to make it work properly
+const TabsContext = React.createContext<{
+    value: string
+    onValueChange: (value: string) => void
+}>({ value: "", onValueChange: () => {} })
+
+const TabsRoot = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    defaultValue: string
+    onValueChange?: (value: string) => void
+  }
+>(({ className, defaultValue, onValueChange, children, ...props }, ref) => {
+    const [value, setValue] = React.useState(defaultValue)
+    const handleValueChange = (v: string) => {
+        setValue(v)
+        onValueChange?.(v)
+    }
+
+    return (
+        <TabsContext.Provider value={{ value, onValueChange: handleValueChange }}>
+            <View ref={ref} className={cn("", className)} {...props}>
+                {children}
+            </View>
+        </TabsContext.Provider>
+    )
+})
+TabsRoot.displayName = "Tabs"
+
+const TabsTriggerWithContext = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  React.ComponentPropsWithoutRef<typeof Pressable> & { value: string }
+>(({ className, value, children, ...props }, ref) => {
+    const context = React.useContext(TabsContext)
+    const isActive = context.value === value
+    return (
+        <Pressable
+            ref={ref}
+            onPress={() => context.onValueChange(value)}
+            className={cn(
+                "inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+                isActive && "bg-background text-foreground shadow-sm",
+                className
+            )}
+            {...props}
+        >
+             {typeof children === 'string' ? (
+                <Text className={cn("text-sm font-medium", isActive ? "text-foreground" : "text-muted-foreground")}>
+                    {children}
+                </Text>
+            ) : children}
+        </Pressable>
+    )
+})
+TabsTriggerWithContext.displayName = "TabsTrigger"
+
+const TabsContentWithContext = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & { value: string }
+>(({ className, value, children, ...props }, ref) => {
+    const context = React.useContext(TabsContext)
+    if (context.value !== value) return null
+    return (
+        <View
+            ref={ref}
+            className={cn(
+                "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </View>
+    )
+})
+TabsContentWithContext.displayName = "TabsContent"
+
+export { TabsRoot as Tabs, TabsList, TabsTriggerWithContext as TabsTrigger, TabsContentWithContext as TabsContent }

package/src/components/ui/toggle-group.tsx

@@ -0,0 +1,87 @@
+import * as React from "react"
+import { View } from "react-native"
+import { cn } from "../../lib/utils"
+import { toggleVariants } from "./toggle"
+import { type VariantProps } from "class-variance-authority"
+
+const ToggleGroupContext = React.createContext<{
+  size?: VariantProps<typeof toggleVariants>["size"]
+  variant?: VariantProps<typeof toggleVariants>["variant"]
+  value: string | string[]
+  onValueChange: (value: string) => void
+  type: "single" | "multiple"
+}>({
+  size: "default",
+  variant: "default",
+  value: "",
+  onValueChange: () => {},
+  type: "single",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> &
+    VariantProps<typeof toggleVariants> & {
+      type: "single" | "multiple"
+      value?: string | string[]
+      onValueChange?: (value: string | string[]) => void
+    }
+>(({ className, variant, size, children, type, value: valueProp, onValueChange, ...props }, ref) => {
+    const [value, setValue] = React.useState<string | string[]>(valueProp || (type === "multiple" ? [] : ""))
+
+    const handleValueChange = (itemValue: string) => {
+        let newValue: string | string[]
+        if (type === "single") {
+            newValue = itemValue === value ? "" : itemValue
+        } else {
+            const currentValues = Array.isArray(value) ? value : []
+            newValue = currentValues.includes(itemValue)
+                ? currentValues.filter((v) => v !== itemValue)
+                : [...currentValues, itemValue]
+        }
+        setValue(newValue)
+        onValueChange?.(newValue)
+    }
+
+  return (
+    <ToggleGroupContext.Provider value={{ variant, size, value, onValueChange: handleValueChange, type }}>
+      <View
+        ref={ref}
+        className={cn("flex flex-row items-center justify-center gap-1", className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </ToggleGroupContext.Provider>
+  )
+})
+ToggleGroup.displayName = "ToggleGroup"
+
+import { Toggle } from "./toggle"
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof Toggle>,
+  React.ComponentPropsWithoutRef<typeof Toggle> & { value: string }
+>(({ className, children, value, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+  const pressed = Array.isArray(context.value) 
+    ? context.value.includes(value) 
+    : context.value === value
+
+  return (
+    <Toggle
+      ref={ref}
+      variant={context.variant}
+      size={context.size}
+      pressed={pressed}
+      onPressedChange={() => context.onValueChange(value)}
+      className={cn(className)}
+      {...props}
+    >
+      {children}
+    </Toggle>
+  )
+})
+ToggleGroupItem.displayName = "ToggleGroupItem"
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/ui/toggle.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+import { Pressable, Text, View } from "react-native"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  React.ComponentPropsWithoutRef<typeof Pressable> &
+    VariantProps<typeof toggleVariants> & {
+      pressed?: boolean
+      onPressedChange?: (pressed: boolean) => void
+    }
+>(({ className, variant, size, pressed, onPressedChange, children, ...props }, ref) => (
+  <Pressable
+    ref={ref}
+    onPress={() => onPressedChange?.(!pressed)}
+    className={cn(
+      toggleVariants({ variant, size, className }),
+      pressed && "bg-accent text-accent-foreground"
+    )}
+    {...props}
+  >
+    {typeof children === 'string' ? (
+        <Text className={cn("text-sm font-medium", pressed ? "text-accent-foreground" : "text-foreground")}>
+            {children}
+        </Text>
+    ) : (
+        // Inject color prop if child is an icon? For now just render child.
+        // Users should style their icons based on pressed state if needed, or we can use a context.
+        children
+    )}
+  </Pressable>
+))
+Toggle.displayName = "Toggle"
+
+export { Toggle, toggleVariants }

package/src/index.ts

@@ -15,4 +15,11 @@ export * from "./components/ui/radio-group"
 export * from "./components/ui/textarea"
 export * from "./components/ui/alert"
 export * from "./components/ui/progress"
+export * from "./components/ui/accordion"
+export * from "./components/ui/aspect-ratio"
+export * from "./components/ui/dialog"
+export * from "./components/ui/select"
+export * from "./components/ui/tabs"
+export * from "./components/ui/toggle"
+export * from "./components/ui/toggle-group"
 import "./global.css"