### Consistent Color Theming Example - React Native

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Demonstrates consistent color theming for a UI section using a single color palette. This example shows how to apply background, border, body text, and heading colors from a specified palette (e.g., 'pink') to maintain visual harmony.

```tsx
// Use a single palette consistently
backgroundColor: colors.palettes.pink.a2,      // Subtle background
borderColor: colors.palettes.pink.a4,          // Border
color: colors.palettes.pink.a11,               // Body text
color: colors.palettes.pink.a12               // Heading
```

--------------------------------

### Stat Card Example

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Showcases a 'Stat Card' component designed for displaying key metrics. This example includes a metric title, value, and a comparison with a percentage change indicated by a badge.

```tsx
<Card>
  <View style={{ gap: 4 }}>
    <Text size="1" color="gray">
      Total Revenue
    </Text>
    <Heading size="6">$12,345</Heading>
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
      <Badge color="success" size="1">
        <Text>+12%</Text>
      </Badge>
      <Text size="1" color="gray">
        vs last month
      </Text>
    </View>
  </View>
</Card>
```

--------------------------------

### Install Frosted UI Icons

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-icons/README.md

Installs the Frosted UI Icons package from npm. This is the first step to using the icons in a React project.

```bash
npm install @frosted-ui/icons
```

--------------------------------

### Install Frosted UI Package

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui/README.md

This command installs the Frosted UI package using pnpm. Ensure you have pnpm installed and configured in your project.

```sh
pnpm add frosted-ui
```

--------------------------------

### Installation Command for Generation Script

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui/scripts/emoji-colors/README.md

This command installs all necessary project dependencies, including packages required for the emoji color generation scripts. It uses `pnpm` as the package manager.

```bash
pnpm install
```

--------------------------------

### Implement Shipping Options Selection with Frosted UI

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

This example demonstrates how to create a shipping options selection interface using Frosted UI's `List` and `RadioGroup` components. It maps over an array of shipping options, each with an icon, name, price, and estimated delivery time, allowing users to select their preferred method.

```tsx
const [selected, setSelected] = React.useState('standard');

const options = [
  {
    id: 'standard',
    name: 'Standard Shipping',
    price: 'Free',
    time: '5-7 business days',
    icon: Truck,
  },
  { id: 'express', name: 'Express Shipping', price: '$9.99', time: '2-3 business days', icon: Zap },
  { id: 'overnight', name: 'Overnight', price: '$24.99', time: 'Next business day', icon: Clock },
];

<RadioGroup.Root value={selected} onValueChange={setSelected}>
  <List.Root>
    {options.map((option, index) => (
      <React.Fragment key={option.id}>
        {index > 0 && <List.Separator />}
        <List.Item onPress={() => setSelected(option.id)}>
          <List.ItemSlot>
            <RadioGroup.Item value={option.id} />
          </List.ItemSlot>
          <List.ItemSlot>
            <View style={iconBoxStyle}>
              <Icon as={option.icon} size={20} />
            </View>
          </List.ItemSlot>
          <List.ItemContent>
            <List.ItemTitle>{option.name}</List.ItemTitle>
            <List.ItemDescription>{option.time}</List.ItemDescription>
          </List.ItemContent>
          <List.ItemSlot>
            <Text weight="medium" color={option.price === 'Free' ? 'success' : undefined}>
              {option.price}
            </Text>
          </List.ItemSlot>
        </List.Item>
      </React.Fragment>
    ))}
  </List.Root>
</RadioGroup.Root>
```

--------------------------------

### Soft Card - Pro Tip/Highlight Example

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Illustrates the 'soft' variant of the Card component, used for highlighted sections like tips or feature callouts. This example shows a lightbulb icon, a tip title, supporting text, and an action button.

```tsx
<Card variant="soft">
  <View style={{ flexDirection: 'row', gap: 12, alignItems: 'flex-start' }}>
    <View
      style={{
        width: 40,
        height: 40,
        borderRadius: 10,
        backgroundColor: colors.palettes.amber.a3,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Icon as={Lightbulb} size={20} color={colors.palettes.amber.a11} />
    </View>
    <View style={{ flex: 1, gap: 4 }}>
      <Text weight="medium">Pro Tip</Text>
      <Text size="3" color="gray">
        Enable notifications to stay updated on new messages and activity from your team.
      </Text>
      <Button variant="ghost" size="2" style={{ alignSelf: 'flex-start', marginTop: 4 }}>
        <Text>Enable Notifications</Text>
        <Icon as={ChevronRight} size={16} />
      </Button>
    </View>
  </View>
</Card>
```

--------------------------------

### Info Card Example

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Presents a standard 'Info Card' component, useful for displaying informational messages with a title, description, and action buttons. It includes an info icon and options to dismiss or perform an action.

```tsx
<Card>
  <View style={{ gap: 12 }}>
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
      <Icon as={Info} size={16} />
      <Text weight="medium">Card Title</Text>
    </View>
    <Text size="3" color="gray">
      Supporting description text that provides more context.
    </Text>
    <View style={{ flexDirection: 'row', gap: 8 }}>
      <Button variant="soft" color="gray" size="2">
        <Text>Dismiss</Text>
      </Button>
      <Button variant="solid" size="2">
        <Text>Action</Text>
      </Button>
    </View>
  </View>
</Card>
```

--------------------------------

### React Native Product Grid with Adaptive Layout

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

An example screen component `ProductGridScreen` that leverages the `useAdaptiveLayout` hook to render a product grid. It dynamically calculates the number of columns and padding based on screen width, ensuring a responsive layout for product listings.

```tsx
function ProductGridScreen() {
  const { colors } = useThemeTokens();
  const { getColumns, padding, isDesktop } = useAdaptiveLayout();

  // Min 200px per item for comfortable cards, max 3 columns
  const columns = getColumns(200, 3);
  const gap = 16;

  const products = [...]; // Your product data

  return (
    <ScrollView
      style={{ flex: 1, backgroundColor: colors.background }}
      contentContainerStyle={{
        padding,
        gap: 24,
        maxWidth: isDesktop ? 1200 : undefined,
        alignSelf: isDesktop ? 'center' : undefined,
        width: '100%',
      }}>
      {/* Header */}
      <View style={{ gap: 4 }}>
        <Heading size="5">Products</Heading>
        <Text color="gray">{products.length} items</Text>
      </View>

      {/* Responsive Grid */}
      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap }}>
        {products.map((product) => (
          <View
            key={product.id}
            style={{
              flexGrow: 1,
              flexBasis: columns === 1 ? '100%' : `${Math.floor(100 / columns) - 2}%`,
              maxWidth: columns === 1 ? '100%' : `${Math.floor(100 / columns) - 1}%`,
            }}>
            <ProductCard product={product} />
          </View>
        ))}
      </View>
    </ScrollView>
  );
}
```

--------------------------------

### Install @frosted-ui/react-native with npm/yarn/pnpm

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/README.md

Installs the @frosted-ui/react-native package and its peer dependencies using npm, yarn, or pnpm. Ensure you have the necessary build tools and Node.js environment set up.

```bash
npm install @frosted-ui/react-native
# or
yarn add @frosted-ui/react-native
# or
pnpm add @frosted-ui/react-native
```

--------------------------------

### Frosted UI Background Color Examples

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Provides examples of how to apply background colors using the Frosted UI color system. It demonstrates usage for main app backgrounds, subtle section backgrounds, and card backgrounds.

```typescript
// Main app background
backgroundColor: colors.background; // Uses white in light mode and gray['1'] in dark mode

// Subtle colored background for a section
backgroundColor: gray['2']; // or palette['2']

// Card with subtle tint
backgroundColor: palette.a2;
```

--------------------------------

### Run Development Server with Yarn

Source: https://github.com/whopio/frosted-ui/blob/main/apps/tailwind/README.md

Initiates the development server for the Frosted UI project using Yarn. This command is essential for local development and testing. It requires Yarn to be installed and configured for the project.

```bash
yarn dev
```

--------------------------------

### Basic App Usage with @frosted-ui/react-native

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/README.md

Demonstrates the basic usage of the @frosted-ui/react-native library by rendering a Button within a ThemeProvider. This example showcases importing components and applying basic styling.

```tsx
import { Button, Text, ThemeProvider } from '@frosted-ui/react-native';

export default function App() {
  return (
    <ThemeProvider>
      <Button variant="surface" size="2">
        <Text>Hello World</Text>
      </Button>
    </ThemeProvider>
  );
}
```

--------------------------------

### Example Usage of useColorForEmoji Hook

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui/scripts/emoji-colors/IMPLEMENTATION.md

Demonstrates practical usage of the `useColorForEmoji` React hook. It shows how to import the hook and use it within a component to dynamically apply a color based on an emoji prop. This example illustrates a common use case for the hook.

```typescript
import React from 'react';
import { useColorForEmoji, ColorScale } from 'frosted-ui';

// Mock Badge component for demonstration
const Badge: React.FC<{ color: ColorScale; children: React.ReactNode }> = (
  { color, children }
) => (
  <span style={{ backgroundColor: color?.hex || 'transparent', color: '#fff', padding: '4px', borderRadius: '4px' }}>
    {children}
  </span>
);

interface MyComponentProps {
  emoji: string;
}

function EmojiDisplay({ emoji }: MyComponentProps) {
  const color = useColorForEmoji(emoji);

  // If color is undefined (e.g., emoji not in map or invalid input),
  // you might want a fallback.
  if (!color) {
    return <span>{emoji}</span>;
  }

  return <Badge color={color}>{emoji}</Badge>;
}

// Example usage within another component:
function App() {
  return (
    <div>
      <EmojiDisplay emoji="❤️" />
      <EmojiDisplay emoji="🔥" />
      <EmojiDisplay emoji="🌎" />
      <EmojiDisplay emoji="🌟" />
      <EmojiDisplay emoji="☁️" />
      <EmojiDisplay emoji="🚀" />
    </div>
  );
}

export default App;

```

--------------------------------

### Install React Native Peer Dependencies

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/README.md

Installs essential peer dependencies required for @frosted-ui/react-native to function correctly. This includes core React Native libraries and specific packages for animation, layout, and SVG support.

```bash
npm install react react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg lucide-react-native
# or
yarn add react react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg lucide-react-native
# or
pnpm add react react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg lucide-react-native
```

--------------------------------

### ThemeProvider Configuration Example

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Shows how to configure the application's theme colors using the `ThemeProvider` component. This includes setting custom colors for 'accent', 'danger', 'warning', 'success', and 'info'.

```tsx
<ThemeProvider
  accentColor="purple" // Default: 'blue'
  dangerColor="tomato" // Default: 'red' (must be: tomato | red | ruby)
  warningColor="yellow" // Default: 'amber' (must be: yellow | amber)
  successColor="teal" // Default: 'green' (must be: teal | jade | green | grass)
  infoColor="blue" // Default: 'sky' (must be: blue | sky)
>
  <App />
</ThemeProvider>

```

--------------------------------

### Ghost Card - Section Container Example

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Demonstrates the 'ghost' variant of the Card component, used for layout grouping without a visual container. This example shows a section header with a title and 'See All' button, followed by a nested 'surface' card displaying recent activity items.

```tsx
<Card variant="ghost" style={{ padding: 0 }}>
  <View style={{ gap: 12 }}>
    {/* Section header */}
    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
      <Heading size="4">Recent Activity</Heading>
      <Button variant="ghost" size="2">
        <Text>See All</Text>
      </Button>
    </View>

    {/* Content in a surface card (has overflow: hidden for separators) */}
    <Card variant="surface" style={{ padding: 0 }}>
      {items.map((item, index, arr) => (
        <View key={index}>
          <Pressable
            style={({ pressed }) => ({
              flexDirection: 'row',
              alignItems: 'center',
              gap: 12,
              paddingHorizontal: 16,
              paddingVertical: 14,
              backgroundColor: pressed ? colors.palettes.gray.a3 : 'transparent',
            })}>
            <Avatar fallback={item.initials} size="3" color={item.color} />
            <View style={{ flex: 1, gap: 2 }}>
              <Text size="2" weight="medium" numberOfLines={1}>
                {item.name}
              </Text>
              <Text size="2" color="gray" numberOfLines={1}>
                {item.action}
              </Text>
            </View>
            <Text size="1" color="gray">
              {item.time}
            </Text>
          </Pressable>
          {index < arr.length - 1 && <Separator size="4" />}
        </View>
      ))}
    </Card>
  </View>
</Card>
```

--------------------------------

### API Route Example in Next.js

Source: https://github.com/whopio/frosted-ui/blob/main/apps/tailwind/README.md

Demonstrates a basic API route handler within a Next.js application. This code resides in `pages/api/hello.js` and is accessible via HTTP requests to `/api/hello`. It showcases the structure for creating serverless API endpoints.

```javascript
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' });
}
```

--------------------------------

### Callout Component Example

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/TYPOGRAPHY.md

Demonstrates how to use the Callout component to display informational messages. The Text component within Callout automatically inherits styling.

```tsx
import { Callout, Text } from '@frosted-ui/react-native';

// ✅ Text inherits callout's color and size
<Callout.Root color="info">
  <Callout.Text>
    <Text>This text is automatically styled</Text>
  </Callout.Text>
</Callout.Root>;
```

--------------------------------

### React Native Hybrid Screen Layout Example

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

A `HybridScreen` component demonstrating a layout strategy for screens with both full-width and constrained content sections. It uses `useAdaptiveLayout` to control responsiveness and conditionally applies styles for different sections, such as a full-width hero banner and a constrained content area with adaptive grids and multi-column layouts.

```tsx
function HybridScreen() {
  const { colors } = useThemeTokens();
  const { isDesktop, padding, getColumns } = useAdaptiveLayout();

  const maxContentWidth = 800;

  return (
    <ScrollView style={{ flex: 1, backgroundColor: colors.background }}>
      {/* Full-width hero/banner */}
      <View style={{ padding, backgroundColor: colors.palettes.accent.a2 }}>
        <View
          style={{
            maxWidth: maxContentWidth,
            alignSelf: 'center',
            width: '100%',
          }}>
          <Heading size="6">Welcome Back</Heading>
          <Text color="gray">Your dashboard overview</Text>
        </View>
      </View>

      {/* Constrained content area */}
      <View
        style={{
          padding,
          gap: 24,
          maxWidth: isDesktop ? 1200 : undefined,
          alignSelf: 'center',
          width: '100%',
        }}>
        {/* Stats Grid - adapts columns */}
        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
          {stats.map((stat) => (
            <View key={stat.label} style={{ flex: 1, minWidth: 150 }}>
              <StatCard {...stat} />
            </View>
          ))}
        </View>

        {/* Two-column layout on desktop */}
        <View
          style={{
            flexDirection: isDesktop ? 'row' : 'column',
            gap: 16,
          }}>
          <View style={{ flex: isDesktop ? 2 : 1 }}>
            <Card>
              <Heading size="4">Recent Activity</Heading>
              {/* Activity list */}
            </Card>
          </View>
          <View style={{ flex: 1 }}>
            <Card>
              <Heading size="4">Quick Actions</Heading>
              {/* Actions */}
            </Card>
          </View>
        </View>
      </View>
    </ScrollView>
  );
}
```

--------------------------------

### Settings List Example with Icon and Switch (TSX)

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Demonstrates a settings list item with an icon on the left, a title in the middle, and a switch component on the right for controlling a setting. This pattern is useful for toggling features or preferences.

```tsx
<List.Root>
  <List.Item>
    <List.ItemSlot>
      <View style={iconBoxStyle}>
        <Icon as={Bell} size={20} color={colors.palettes.blue.a11} />
      </View>
    </List.ItemSlot>
    <List.ItemContent>
      <List.ItemTitle>Notifications</List.ItemTitle>
    </List.ItemContent>
    <List.ItemSlot>
      <Switch checked={enabled} onCheckedChange={setEnabled} />
    </List.ItemSlot>
  </List.Item>
</List.Root>
```

--------------------------------

### Settings with Slider Controls (React TSX)

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

This example shows how to implement settings that require numerical value selection, such as brightness or volume, using Frosted UI's Slider component. It displays the current value next to the setting label and uses a Slider for user input. Key patterns include displaying the value as a percentage and using colored icons that match the slider's color.

```tsx
const [brightness, setBrightness] = React.useState(75);
const [volume, setVolume] = React.useState(80);

<Card>
  <View style={{ gap: 20 }}>
    <Heading size="3">Display Settings</Heading>

    {/* Brightness */}
    <View style={{ gap: 8 }}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
          <Icon as={Sun} size={18} color={colors.palettes.amber.a11} />
          <Text weight="medium">Brightness</Text>
        </View>
        <Text size="2" color="gray">
          {brightness}%
        </Text>
      </View>
      <Slider value={brightness} onValueChange={setBrightness} color="amber" />
    </View>

    <Separator size="4" />

    {/* Volume */}
    <View style={{ gap: 8 }}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
          <Icon as={Volume2} size={18} color={colors.palettes.blue.a11} />
          <Text weight="medium">Volume</Text>
        </View>
        <Text size="2" color="gray">
          {volume}%
        </Text>
      </View>
      <Slider value={volume} onValueChange={setVolume} color="blue" />
    </View>
  </View>
</Card>
```

--------------------------------

### Settings List with Toggles and Checkboxes (React TSX)

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

This snippet demonstrates creating a settings list using Frosted UI's List component. It includes examples of a switch for enabling/disabling features and a checkbox for a boolean option. It utilizes List.Root, List.Item, List.ItemSlot, List.ItemContent, List.ItemTitle, List.Separator, Switch, and Checkbox components.

```tsx
<List.Root>
  {/* Switch setting */}
  <List.Item>
    <List.ItemSlot>
      <View style={iconBoxStyle}>
        <Icon as={Bell} size={20} color={colors.palettes.blue.a11} />
      </View>
    </List.ItemSlot>
    <List.ItemContent>
      <List.ItemTitle>Notifications</List.ItemTitle>
    </List.ItemContent>
    <List.ItemSlot>
      <Switch checked={enabled} onCheckedChange={setEnabled} />
    </List.ItemSlot>
  </List.Item>

  <List.Separator />

  {/* Pressable setting with checkbox */}
  <List.Item onPress={() => setDarkMode(!darkMode)}>
    <List.ItemSlot>
      <View style={iconBoxStyle}>
        <Icon as={Settings} size={20} color={colors.palettes.purple.a11} />
      </View>
    </List.ItemSlot>
    <List.ItemContent>
      <List.ItemTitle>Dark Mode</List.ItemTitle>
    </List.ItemContent>
    <List.ItemSlot>
      <Checkbox checked={darkMode} onCheckedChange={setDarkMode} />
    </List.ItemSlot>
  </List.Item>
</List.Root>
```

--------------------------------

### Icon Styling with Frosted UI Colors (React)

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Demonstrates how to apply colors to standalone icons using Frosted UI's color palettes. It shows examples for neutral gray, semantic danger red, and custom colored icons using `palette.a11` for better light/dark mode adaptability. Requires Frosted UI's Icon and View components, along with color definitions.

```tsx
// Gray icons (neutral)
<Icon as={Settings} size={20} color={colors.palettes.gray.a11} />

// Colored icons (e.g., in icon boxes)
<View style={{ backgroundColor: colors.palettes.blue.a3 }}>
  <Icon as={Bell} size={20} color={colors.palettes.blue.a11} />
</View>

// Semantic icons
<Icon as={AlertCircle} size={20} color={colors.palettes.danger['9']} />
```

--------------------------------

### List with RadioGroup for Shipping Options (React TSX)

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

This snippet demonstrates how to create a list of selectable shipping options using Frosted UI's RadioGroup and List components. Each item in the list is associated with a radio button, allowing users to select one option. The example maps over an array of options to dynamically render the list items, including icons, names, delivery times, and prices.

```tsx
<RadioGroup.Root value={selected} onValueChange={setSelected}>
  <List.Root>
    {options.map((option, index) => (
      <React.Fragment key={option.id}>
        {index > 0 && <List.Separator />}
        <List.Item onPress={() => setSelected(option.id)}>
          <List.ItemSlot>
            <RadioGroup.Item value={option.id} />
          </List.ItemSlot>
          <List.ItemSlot>
            <View style={iconBoxStyle}>
              <Icon as={option.icon} size={20} />
            </View>
          </List.ItemSlot>
          <List.ItemContent>
            <List.ItemTitle>{option.name}</List.ItemTitle>
            <List.ItemDescription>{option.time}</List.ItemDescription>
          </List.ItemContent>
          <List.ItemSlot>
            <Text weight="medium" color={option.price === 'Free' ? 'success' : undefined}>
              {option.price}
            </Text>
          </List.ItemSlot>
        </List.Item>
      </React.Fragment>
    ))}
  </List.Root>
</RadioGroup.Root>
```

--------------------------------

### Install and Configure Frosted UI Theme

Source: https://context7.com/whopio/frosted-ui/llms.txt

This snippet shows how to install the frosted-ui package and configure the global theme for a React application. It involves importing the global styles and wrapping the application with the Theme component, which accepts various props for appearance, colors, and background.

```tsx
// Install the package
// pnpm add frosted-ui

// Import global styles in your root component or _app.tsx
import 'frosted-ui/styles.css';

// Wrap your application with the Theme component
import { Theme } from 'frosted-ui';

export default function App({ children }) {
  return (
    <html>
      <body>
        <Theme
          appearance="light"
          accentColor="indigo"
          grayColor="slate"
          hasBackground={true}
        >
          {children}
        </Theme>
      </body>
    </html>
  );
}

// The Theme component supports the following props:
// - appearance: 'light' | 'dark' | 'inherit' (defaults to system preference)
// - accentColor: primary brand color (e.g., 'indigo', 'blue', 'violet')
// - grayColor: neutral color palette (e.g., 'slate', 'gray', 'mauve')
// - infoColor, successColor, warningColor, dangerColor: semantic colors
// - hasBackground: boolean to apply background color to body

```

--------------------------------

### Frosted UI Interactive Component Background Examples

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Illustrates how to set background colors for interactive UI components in Frosted UI, considering default, hover, and selected states. It emphasizes the use of steps 3-5 from the color palette.

```typescript
// Interactive list item
const listItemStyle = {
  backgroundColor: isSelected
    ? palette.a5 // Selected
    : isHovered
      ? palette.a4 // Hover
      : palette.a3, // Default
};

// If component has transparent default state, use 3 for hover
const ghostButtonHover = {
  backgroundColor: isHovered ? palette.a3 : 'transparent',
};
```

--------------------------------

### Simple Component: Button Usage

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Example of using the Frosted UI `Button` component. It shows how to apply variants, sizes, colors, and handle press events. Child `<Text>` components receive automatic styling.

```tsx
<Button variant="solid" size="2" color="accent" onPress={handlePress}>
  <Text>Click me</Text>
</Button>
```

--------------------------------

### Section with Header and Action Button (React Native)

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Illustrates how to create a section with a title, an optional 'See All' button, and a content area for cards. It utilizes flexbox for alignment and spacing.

```tsx
<View style={{ gap: 12 }}>
  <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
    <Heading size="4">Section Title</Heading>
    <Button variant="ghost" size="1">
      <Text>See All</Text>
    </Button>
  </View>
  <Card>{/* Section content */}</Card>
</View>
```

--------------------------------

### Button Component Examples (React/TSX)

Source: https://context7.com/whopio/frosted-ui/llms.txt

Demonstrates the usage of the Button component from 'frosted-ui'. It showcases different variants, sizes, colors, and states like disabled and loading. The component is interactive and can be customized extensively.

```tsx
import { Button } from 'frosted-ui';

function ButtonExamples() {
  return (
    <div className="space-y-4">
      {/* Basic button */}
      <Button onClick={() => console.log('clicked')}>
        Click Me
      </Button>

      {/* Size variants: 1, 2, 3, 4 */}
      <div className="flex gap-2 items-center">
        <Button size="1">Small</Button>
        <Button size="2">Medium</Button>
        <Button size="3">Large</Button>
        <Button size="4">Extra Large</Button>
      </div>

      {/* Variant styles: solid, soft, surface, outline, ghost */}
      <div className="flex gap-2">
        <Button variant="solid">Solid</Button>
        <Button variant="soft">Soft</Button>
        <Button variant="surface">Surface</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
      </div>

      {/* Color customization */}
      <div className="flex gap-2">
        <Button color="indigo">Indigo</Button>
        <Button color="violet">Violet</Button>
        <Button color="crimson">Crimson</Button>
        <Button color="green">Green</Button>
      </div>

      {/* High contrast mode */}
      <Button highContrast>High Contrast</Button>

      {/* Disabled state */}
      <Button disabled>Disabled Button</Button>

      {/* Loading state with custom content */}
      <Button loading>Loading...</Button>
    </div>
  );
}
```

--------------------------------

### DropdownMenu Component Examples (React/TypeScript)

Source: https://context7.com/whopio/frosted-ui/llms.txt

Demonstrates various ways to use the DropdownMenu component, including basic options, checkbox and radio group selections, submenus, and styling customizations. Requires 'frosted-ui' and '@radix-ui/react-icons'.

```tsx
import { DropdownMenu, Button } from 'frosted-ui';
import { DotsVerticalIcon } from '@radix-ui/react-icons';

function DropdownMenuExamples() {
  const [bookmarked, setBookmarked] = React.useState(false);
  const [view, setView] = React.useState('grid');

  return (
    <div className="space-y-4">
      {/* Basic dropdown menu */}
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
          <Button variant="soft">
            Options <DotsVerticalIcon />
          </Button>
        </DropdownMenu.Trigger>

        <DropdownMenu.Content>
          <DropdownMenu.Item onSelect={() => console.log('New Tab')}> 
            New Tab
          </DropdownMenu.Item>
          <DropdownMenu.Item onSelect={() => console.log('New Window')}> 
            New Window
          </DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item color="red" onSelect={() => console.log('Delete')}> 
            Delete
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Root>

      {/* Menu with checkbox items */}
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
          <Button variant="soft">View Options</Button>
        </DropdownMenu.Trigger>

        <DropdownMenu.Content>
          <DropdownMenu.Label>Preferences</DropdownMenu.Label>
          <DropdownMenu.CheckboxItem 
            checked={bookmarked}
            onCheckedChange={setBookmarked}
          >
            Bookmarked
          </DropdownMenu.CheckboxItem>
          <DropdownMenu.CheckboxItem checked>
            Show Toolbar
          </DropdownMenu.CheckboxItem>
        </DropdownMenu.Content>
      </DropdownMenu.Root>

      {/* Menu with radio group */}
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
          <Button variant="soft">View: {view}</Button>
        </DropdownMenu.Trigger>

        <DropdownMenu.Content>
          <DropdownMenu.RadioGroup value={view} onValueChange={setView}>
            <DropdownMenu.RadioItem value="grid">
              Grid View
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem value="list">
              List View
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem value="columns">
              Column View
            </DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>
        </DropdownMenu.Content>
      </DropdownMenu.Root>

      {/* Menu with submenu */}
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
          <Button variant="soft">File</Button>
        </DropdownMenu.Trigger>

        <DropdownMenu.Content>
          <DropdownMenu.Item shortcut="⌘N">New File</DropdownMenu.Item>
          <DropdownMenu.Item shortcut="⌘O">Open...</DropdownMenu.Item>

          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger>Recent Files</DropdownMenu.SubTrigger>
            <DropdownMenu.SubContent>
              <DropdownMenu.Item>document.pdf</DropdownMenu.Item>
              <DropdownMenu.Item>image.png</DropdownMenu.Item>
              <DropdownMenu.Item>notes.txt</DropdownMenu.Item>
            </DropdownMenu.SubContent>
          </DropdownMenu.Sub>

          <DropdownMenu.Separator />
          <DropdownMenu.Item shortcut="⌘S">Save</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Root>

      {/* Size and variant customization */}
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
          <Button size="1">Small Menu</Button>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content size="1" variant="soft">
          <DropdownMenu.Item>Small Item 1</DropdownMenu.Item>
          <DropdownMenu.Item>Small Item 2</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Root>
    </div>
  );
}

```

--------------------------------

### Surface Card - Message Example

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Demonstrates the default 'surface' variant of the Card component, suitable for elevated content like user messages. It includes an avatar, sender information, timestamp, and message content.

```tsx
<Card variant="surface">
  <View style={{ flexDirection: 'row', gap: 12 }}>
    <Avatar fallback="SJ" color="blue" size="3" />
    <View style={{ flex: 1, gap: 4 }}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
        <Text weight="medium">Sarah Johnson</Text>
        <Text size="1" color="gray">
          2m ago
        </Text>
      </View>
      <Text size="3" color="gray">
        Hey! Just finished the design review. The new dashboard looks amazing! 🎉
      </Text>
    </View>
  </View>
</Card>
```

--------------------------------

### Action Pair Buttons (React Native)

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

A common UI pattern for presenting two related actions, typically a primary and a secondary action, side-by-side. This example demonstrates using two buttons with different variants ('soft' and 'solid') that take up equal space within a horizontal layout.

```tsx
<View style={{ flexDirection: 'row', gap: 8 }}>
  <Button variant="soft" color="gray" style={{ flex: 1 }}>
    <Text>Cancel</Text>
  </Button>
  <Button variant="solid" style={{ flex: 1 }}>
    <Text>Confirm</Text>
  </Button>
</View>
```

--------------------------------

### Tailwind CSS Configuration with Frosted UI Plugin

Source: https://context7.com/whopio/frosted-ui/llms.txt

Configures Tailwind CSS to use the `frosted-theme-plugin`. This setup enables access to Frosted UI's design tokens (colors, typography, etc.) through Tailwind's utility classes. Ensure 'frosted-ui' is installed as a dependency.

```tsx
// tailwind.config.js
import { frostedThemePlugin } from 'frosted-ui';

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/frosted-ui/**/*.js',
  ],
  plugins: [
    frostedThemePlugin(),
  ],
};

```

--------------------------------

### Inline Action Buttons (React Native)

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

A pattern for embedding less prominent actions directly within content, often alongside icons. This example shows 'ghost' variant buttons used for actions like 'Like', 'Comment', and 'Share', suitable for social media feeds or content engagement sections.

```tsx
<View style={{ flexDirection: 'row', gap: 8 }}>
  <Button variant="ghost" size="2">
    <Icon as={Heart} size={16} />
    <Text>Like</Text>
  </Button>
  <Button variant="ghost" size="2">
    <Icon as={MessageCircle} size={16} />
    <Text>Comment</Text>
  </Button>
  <Button variant="ghost" size="2">
    <Icon as={Share} size={16} />
    <Text>Share</Text>
  </Button>
</View>
```

--------------------------------

### Frosted UI List Variants (React TSX)

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

This example showcases the different visual variants available for the Frosted UI List.Root component. By applying the `variant` prop, developers can change the list's appearance to match different UI contexts, such as 'surface' for a bordered and elevated look, 'soft' for a subtle background, and 'ghost' for a minimal style.

```tsx
// Default surface style (bordered, elevated)
<List.Root variant="surface">...</List.Root>

// Soft background for highlighted lists
<List.Root variant="soft">...</List.Root>

// Ghost for minimal style
<List.Root variant="ghost">...</List.Root>
```

--------------------------------

### Show Skeleton Loading for Content Placeholders

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

This code illustrates how to implement skeleton loading to provide a perceived performance improvement while data is being fetched. It conditionally renders skeleton components (Avatar, Text) or actual content based on the `isLoading` state.

```tsx
{
  isLoading ? (
    <View style={{ gap: 12 }}>
      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
        <Skeleton.Avatar size="2" />
        <View style={{ flex: 1, gap: 4 }}>
          <Skeleton.Text size="2" style={{ width: '60%' }} />
          <Skeleton.Text size="1" style={{ width: '40%' }} />
        </View>
      </View>
    </View>
  ) : (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
      <Avatar fallback={user.name} size="2" />
      <View style={{ gap: 4 }}>
        <Text weight="medium">{user.name}</Text>
        <Text size="1" color="gray">
          {user.email}
        </Text>
      </View>
    </View>
  );
}
```

--------------------------------

### Dialog Component Examples (React)

Source: https://context7.com/whopio/frosted-ui/llms.txt

Shows how to implement the Dialog component for modal dialogs with customizable content. It covers basic usage, size variants, and controlled dialogs with custom portal containers. Requires React and the Button and Flex components from frosted-ui.

```tsx
import { Dialog, Button, Flex } from 'frosted-ui';

function DialogExamples() {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="space-y-4">
      {/* Basic dialog */}
      <Dialog.Root open={open} onOpenChange={setOpen}>
        <Dialog.Trigger>
          <Button>Open Dialog</Button>
        </Dialog.Trigger>

        <Dialog.Content size="3">
          <Dialog.Title>Edit Profile</Dialog.Title>
          <Dialog.Description>
            Make changes to your profile here. Click save when you're done.
          </Dialog.Description>

          <div className="space-y-4 py-4">
            <label>
              <div className="text-sm font-medium mb-1">Name</div>
              <input
                className="w-full px-3 py-2 border rounded"
                defaultValue="John Doe"
              />
            </label>

            <label>
              <div className="text-sm font-medium mb-1">Email</div>
              <input
                type="email"
                className="w-full px-3 py-2 border rounded"
                defaultValue="john@example.com"
              />
            </label>
          </div>

          <Flex gap="3" justify="end">
            <Dialog.Close>
              <Button variant="soft" color="gray">Cancel</Button>
            </Dialog.Close>
            <Dialog.Close>
              <Button>Save Changes</Button>
            </Dialog.Close>
          </Flex>
        </Dialog.Content>
      </Dialog.Root>

      {/* Size variants: 1, 2, 3, 4 */}
      <Dialog.Root>
        <Dialog.Trigger>
          <Button>Small Dialog</Button>
        </Dialog.Trigger>
        <Dialog.Content size="1">
          <Dialog.Title size="3">Small Dialog</Dialog.Title>
          <Dialog.Description size="1">
            This is a small dialog with compact spacing.
          </Dialog.Description>
        </Dialog.Content>
      </Dialog.Root>

      {/* Controlled dialog with custom container */}
      <Dialog.Root open={open} onOpenChange={setOpen}>
        <Dialog.Trigger>
          <Button>Open Controlled Dialog</Button>
        </Dialog.Trigger>
        <Dialog.Content
          size="4"
          container={document.getElementById('custom-portal')}
        >
          <Dialog.Title>Controlled Dialog</Dialog.Title>
          <Dialog.Description>
            This dialog's open state is controlled externally.
          </Dialog.Description>
        </Dialog.Content>
      </Dialog.Root>
    </div>
  );
}

```

--------------------------------

### Frosted UI Theme System Configuration and Usage

Source: https://context7.com/whopio/frosted-ui/llms.txt

Demonstrates how to configure nested themes with different appearances and how to utilize the useThemeContext hook to access and manipulate theme properties within React components. Includes examples for dynamic theme switching and using ReversedTheme for inverted color schemes.

```tsx
import { Theme, useThemeContext } from 'frosted-ui';

// Nested themes with different appearances
function NestedThemeExample() {
  return (
    <Theme appearance="light" accentColor="blue">
      <div className="main-content">
        <h1>Light Mode Content</h1>

        <Theme appearance="dark" accentColor="violet">
          <div className="dark-section">
            <h2>This section is dark mode</h2>
            <p>Nested themes allow different color schemes in the same page</p>
          </div>
        </Theme>
      </div>
    </Theme>
  );
}

// Access theme context in your components
function ThemeAwareComponent() {
  const theme = useThemeContext();

  return (
    <div>
      <p>Current appearance: {theme.appearance}</p>
      <p>Accent color: {theme.accentColor}</p>
      <p>Gray color: {theme.grayColor}</p>

      <button onClick={() => theme.onAppearanceChange(
        theme.appearance === 'light' ? 'dark' : 'light'
      )}>
        Toggle Theme
      </button>

      <button onClick={() => theme.onAccentColorChange('violet')}>Change to Violet</button>
    </div>
  );
}

// ReversedTheme component for inverted color schemes
import { ReversedTheme } from 'frosted-ui';

function InvertedSection() {
  return (
    <ReversedTheme>
      <div className="inverted-content">
        This section has the opposite appearance of its parent
      </div>
    </ReversedTheme>
  );
}

```

--------------------------------

### Import and Use Icons in React

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-icons/README.md

Demonstrates how to import specific icons (e.g., Shop16, Shop20) from the '@frosted-ui/icons' package and render them as React components. Each icon is available in different sizes.

```tsx
import { Shop16, Shop20 } from '@frosted-ui/icons';

function MyComponent() {
  return (
    <div>
      <Shop16 />
      <Shop20 />
    </div>
  );
}
```

--------------------------------

### Text Handling: Components Styling Children via Context

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Illustrates how components like `Button`, `IconButton`, and `Badge` style their children via context. Explicit `<Text>` and `<Icon>` components must be used as direct children for proper styling.

```tsx
// ✅ Correct - Text/Icon auto-styled by parent
<Button variant="solid">
  <Text>Submit</Text>
</Button>

<IconButton variant="soft">
  <Icon as={Settings} />
</IconButton>

<Badge color="success">
  <Text>Active</Text>
</Badge>
```

--------------------------------

### Custom Range Slider Example in React

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Shows how to customize the Slider component's range and step for specific use cases, such as controlling playback speed. This example highlights setting custom min, max, step, and color props.

```tsx
{
  /* Playback speed: 0.5x to 2.0x */
}
<Slider
  value={playbackSpeed}
  onValueChange={setPlaybackSpeed}
  min={50}
  max={200}
  step={25}
  color="purple"
/>;
```

--------------------------------

### Theme Management with useTheme

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/README.md

Illustrates how to manage and toggle themes (e.g., light/dark mode) in a React Native application using the `ThemeProvider` and `useTheme` hook from @frosted-ui/react-native. This allows dynamic theme switching based on user interaction.

```tsx
import { ThemeProvider, useTheme } from '@frosted-ui/react-native';

function MyComponent() {
  const { colorScheme, toggleColorScheme } = useTheme();

  return (
    <Button onPress={toggleColorScheme}>
      <Text>Current theme: {colorScheme}</Text>
    </Button>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );
}
```

--------------------------------

### Best Practice: Use '9-contrast' for Text on Solid Backgrounds

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Explains the use of the `palette['9-contrast']` token for text that appears on a solid background (e.g., `palette['9']`). This pairing ensures optimal readability by providing sufficient contrast.

```tsx
// ✅ Good: Ensures readable text on any solid color
<View style={{ backgroundColor: palette['9'] }}>
  <Text style={{ color: palette['9-contrast'] }}>Visible</Text>
</View>

```

--------------------------------

### Link Component for Text Links

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Provides examples of the Link component, which renders as a pressable text link. It supports customization of size, weight, color, and underline behavior. The examples show a standalone link and an inline link nested within a Text component, demonstrating automatic inheritance of text styles.

```tsx
<Link onPress={() => navigation.navigate('Terms')}>Terms of Service</Link>

<Text>
  Read our <Link onPress={() => {}}>Privacy Policy</Link>.
</Text>;
```