### Example Glow UI Project-Specific Configuration

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/start.mdx

This example shows a `component.config.json` file configured to set `src/shared/ui` as the default output directory for all components added via `rn-glow` within a specific project.

```json
{
  "outDir": "src/shared/ui"
}
```

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

### Example Output for Listing Glow UI Components

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/start.mdx

This snippet shows a typical output when running the `npx rn-glow list` command, categorizing available components into 'TEMPLATES' and 'ATOMS' and providing a hint for adding components.

```bash
📦 Available Components:
----------------------

TEMPLATES:
  • whats-new
  • sheet
  • media-list
  • headers

ATOMS:
  • stacks
  • divider

💡 Use 'rn-glow add <component-name>' to add a component
```

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

### List All Available Glow UI Components

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/start.mdx

This command displays all components available for installation, neatly grouped by category. It helps users discover and choose components for their React Native projects.

```bash
npx rn-glow list
```

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

### Add Glow UI Component to React Native Project

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/start.mdx

This command adds a specified Glow UI component to your React Native project. Replace `<"component-name">` with the actual component you wish to install.

```bash
npx rn-glow add <"component-name">
```

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

### Add Specific Glow UI Component with Custom Output Path

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/start.mdx

This example demonstrates how to add a specific Glow UI component, 'card', to a custom output directory like `src/ui` using the `--outdir` option. This allows for flexible project structure and organization.

```bash
npx rn-glow add card --outdir src/ui
```

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

### Execute General Glow UI CLI Command

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/start.mdx

This is the general syntax for executing any Glow UI CLI command. Replace `<command>` with the specific command you intend to run, such as `add` or `list`.

```bash
npx rn-glow <command>
```

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

### Run Development Server for Next.js Application

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/README.md

Instructions to start the development server for the Next.js application using npm, pnpm, or yarn. This allows local testing and development of the documentation website.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

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

### Install Toast Component using NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/toast.mdx

This command installs the Toast component into your React Native project using the `rn-glow` CLI tool, simplifying the setup process.

```bash
npx rn-glow add toast
```

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

### Add Glow UI Component Using Project Configuration

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/start.mdx

This command demonstrates adding a 'badge' component when a `component.config.json` file is present in the project root or user home. The component will be placed into the directory specified by the `outDir` option in the config file automatically.

```bash
npx rn-glow add badge
```

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

### Install Header Component using NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/header.mdx

This command installs the Header component into your React Native project using the `rn-glow` CLI tool, simplifying the setup process.

```Bash
npx rn-glow add header
```

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

### Install Button component using NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/button.mdx

This command installs the Button component into your React Native project using the `rn-glow` CLI tool, simplifying the setup process.

```Bash
npx rn-glow add button
```

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

### Install Timeline Component using NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/timeline.mdx

This command installs the Timeline component into your React Native project using the `rn-glow` CLI tool, simplifying the setup process.

```bash
npx rn-glow add timeline
```

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

### Install React Native Glow UI Title Component via NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/title.mdx

This command installs the 'title' component from the 'rn-glow' library using npx, simplifying the setup process for React Native projects.

```bash
npx rn-glow add title
```

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

### Define Default Output Directory in Glow UI Config

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/start.mdx

This JSON snippet illustrates the structure for `component.config.json`, which allows customizing `rn-glow` behavior. The `outDir` option sets a default output folder for all components added via the CLI.

```json
{
  "outDir": "src/components/ui"
}
```

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

### Install Subtitle Component via NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/subtitle.mdx

Instructions to install the Subtitle component using the `rn-glow` CLI tool via NPM.

```bash
npx rn-glow add subtitle
```

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

### Install Floating Sheet component using NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/floatingsheet.mdx

This command installs the experimental Floating Sheet component into your React Native project using the `rn-glow` CLI tool, simplifying the setup process.

```bash
npx rn-glow add floating-sheet
```

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

### Install Media List Component using NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/medialist.mdx

Instructions to install the Media List component using the `rn-glow` CLI tool via NPM. This command adds the `media-list` package to your project.

```bash
npx rn-glow add media-list
```

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

### Install Privacy Notice Link Component with NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/privacy-notice-link.mdx

This command installs the Privacy Notice Link component using the `rn-glow` CLI tool, simplifying the integration process for React Native projects. It's the recommended method for quick setup.

```bash
npx rn-glow add privacy-notice-link
```

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

### Install Dialog Component using NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/dialog.mdx

Instructions to install the Dialog component in a React Native project using the `rn-glow` CLI tool via NPM.

```bash
npx rn-glow add dialog
```

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

### Install Pagination Component with NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/pagination.mdx

This command installs the Pagination component into your React Native project using the `rn-glow` CLI tool.

```bash
npx rn-glow add pagination
```

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

### Install Switch Component using NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/switch.mdx

Installs the Switch component into a React Native project using the `rn-glow` CLI tool via NPM.

```bash
npx rn-glow add switch
```

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

### Install Loader Components via NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/loaders.mdx

Installs the loader components into your React Native project using the `rn-glow` CLI tool.

```bash
npx rn-glow add loaders
```

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

### Install Search Bar Component with NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/searchbar.mdx

This command installs the Search Bar component into your React Native project using the `rn-glow` CLI tool via NPM. Ensure you have Node.js and npm installed.

```bash
npx rn-glow add searchbar
```

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

### Install Shimmer Component using NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/shimmer.mdx

This command installs the Shimmer component into your React Native project using the `rn-glow` CLI tool.

```bash
npx rn-glow add shimmer
```

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

### Install Accordion Component via NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/accordion.mdx

This command installs the Accordion component into your React Native project using the `rn-glow` CLI tool, which simplifies adding UI components.

```bash
npx rn-glow add accordion
```

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

### React Native Dialog Component Full Example

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/dialog.mdx

A complete React Native example demonstrating the `Dialog` component from `@/components`, including state management, custom button styling, animated progress bar, and parallel animations for dialog content transitions. It showcases basic confirmation dialogs and dynamic content based on state.

```tsx
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Pressable,
  Animated,
} from "react-native";
import React, { useEffect, useState, useRef } from "react";
import {
  MaterialIcons,
  Feather,
  Ionicons,
  FontAwesome5,
  AntDesign,
  MaterialCommunityIcons,
} from "@expo/vector-icons";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
  AnimatedProgressBar,
} from "@/components";

const DialogDemo = () => {
  const [deleteConfirmed, setDeleteConfirmed] = useState(false);
  const [profileSaved, setProfileSaved] = useState(false);
  const [subscribed, setSubscribed] = useState(false);
  const [value, setValue] = useState<number>(0);
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const scaleAnim = useRef(new Animated.Value(0.3)).current;
  const slideAnim = useRef(new Animated.Value(50)).current;

  const Button = ({
    children,
    variant = "primary",
    size = "medium",
    onPress,
    style,
  }: any) => {
    const buttonStyles = [
      styles.button,
      variant === "primary" && styles.primaryButton,
      variant === "secondary" && styles.secondaryButton,
      variant === "destructive" && styles.destructiveButton,
      variant === "outline" && styles.outlineButton,
      size === "small" && styles.smallButton,
      size === "large" && styles.largeButton,
      style,
    ];

    const textStyles = [
      styles.buttonText,
      variant === "primary" && styles.primaryButtonText,
      variant === "secondary" && styles.secondaryButtonText,
      variant === "destructive" && styles.destructiveButtonText,
      variant === "outline" && styles.outlineButtonText,
      size === "small" && styles.smallButtonText,
      size === "large" && styles.largeButtonText,
    ];

    return (
      <View style={buttonStyles}>
        <Text style={textStyles}>{children}</Text>
      </View>
    );
  };
  const [keepAccount, setKeepAccount] = useState(true);
  const onDeletePress = () => {
    setKeepAccount(false);
    setIsFinished(false);
  };
  const [isFinished, setIsFinished] = useState<boolean>(false);

  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (!keepAccount) {
      setValue(0);
      interval = setInterval(() => {
        setValue((prev) => {
          if (prev >= 1) {
            clearInterval(interval);
            setIsFinished(true);
            return 1;
          }
          return Math.min(prev + 0.1, 1);
        });
      }, 800);
    } else {
      setValue(0);
    }
    return () => clearInterval(interval);
  }, [keepAccount]);

  useEffect(() => {
    if (isFinished) {
      Animated.parallel([
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 800,
          useNativeDriver: true,
        }),
        Animated.spring(scaleAnim, {
          toValue: 1,
          tension: 50,
          friction: 3,
          useNativeDriver: true,
        }),
        Animated.timing(slideAnim, {
          toValue: 0,
          duration: 600,
          useNativeDriver: true,
        }),
      ]).start();
    }
  }, [isFinished]);

  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={styles.content}
      showsVerticalScrollIndicator={false}
      scrollEnabled
    >
      <View style={styles.header}>
        <View style={styles.iconContainer}>
          <MaterialCommunityIcons
            name="card-text-outline"
            size={32}
            color="#60a5fa"
          />
        </View>
        <Text style={styles.headerTitle}>Dialog Component Demo</Text>
        <Text style={styles.subtitle}>
          Beautiful modal dialogs with smooth animations and flexible layouts
        </Text>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Basic Usage</Text>
        <Text style={styles.sectionDescription}>
          Simple dialogs for common interactions like confirmations and alerts
        </Text>

        <View style={styles.exampleGrid}>
          <View style={styles.exampleCard}>
            <View style={styles.exampleHeader}>
              <MaterialIcons name="info" size={20} color="#60a5fa" />
              <Text style={styles.exampleTitle}>Basic Confirmation</Text>
            </View>
            <Text style={styles.exampleDescription}>
              Standard confirmation dialog with title and description
            </Text>
            <Dialog>
              <DialogTrigger>
                <Button variant="outline">Show Dialog</Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  {!keepAccount ? (
                    <>
                      {isFinished ? (
                        <Animated.View
                          style={[
                            {
                              opacity: fadeAnim,
                              transform: [

```

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

### Install React Native Progress Component via NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/progress.mdx

Use this `npx` command to add the Glow UI Progress component to your React Native project. This method leverages the `rn-glow` CLI tool for streamlined installation.

```bash
npx rn-glow add progress
```

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

### Install React Native Badge Component via NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/badge.mdx

This snippet demonstrates how to install the Badge component into a React Native project using the `rn-glow` command-line tool. This method automates the process of adding the component and its dependencies.

```bash
npx rn-glow add badge
```

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

### React Native Pagination Components Full Example

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/pagination.mdx

This comprehensive example demonstrates how to create and use various pagination components in a React Native application. It includes a `PaginationCard` for consistent styling, `InteractiveControls` for page navigation, and a `PaginationDemo` component that integrates different `Pagination` styles (Classic, Modern Accent) with state management. It showcases the use of `react-native`, `react`, `expo/vector-icons`, and a custom `Pagination` component.

```tsx
import {
  View,
  Text,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
} from "react-native";
import React from "react";
import { Ionicons } from "@expo/vector-icons";
import { Pagination } from "@/components";
import { GestureHandlerRootView } from "react-native-gesture-handler";

const PaginationCard: React.FC<{
  title: string;
  description: string;
  children: React.ReactNode;
  icon?: keyof typeof Ionicons.glyphMap;
}> = ({ title, description, children, icon }) => (
  <View className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 mb-6 backdrop-blur">
    <View className="flex-row items-center mb-3">
      {icon && (
        <Ionicons
          name={icon}
          size={18}
          color="#a1a1aa"
          style={{ marginRight: 8 }}
        />
      )}
      <Text className="text-zinc-100 font-semibold text-lg">{title}</Text>
    </View>
    <Text className="text-zinc-400 text-sm mb-6 leading-5">{description}</Text>
    <View className="items-center justify-center py-8">{children}</View>
  </View>
);

const InteractiveControls: React.FC<{
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}> = ({ currentPage, totalPages, onPageChange }) => (
  <View className="flex-row items-center justify-center space-x-3 mt-4">
    <TouchableOpacity
      onPress={() => onPageChange(Math.max(0, currentPage - 1))}
      disabled={currentPage === 0}
      className={`p-2 rounded-lg ${currentPage === 0 ? "opacity-40" : "bg-zinc-800"}`}
    >
      <Ionicons name="chevron-back" size={16} color="#fafafa" />
    </TouchableOpacity>

    <Text className="text-zinc-300 text-sm min-w-[60px] text-center">
      {currentPage + 1} of {totalPages}
    </Text>

    <TouchableOpacity
      onPress={() => onPageChange(Math.min(totalPages - 1, currentPage + 1))}
      disabled={currentPage === totalPages - 1}
      className={`p-2 rounded-lg ${currentPage === totalPages - 1 ? "opacity-40" : "bg-zinc-800"}`}
    >
      <Ionicons name="chevron-forward" size={16} color="#fafafa" />
    </TouchableOpacity>
  </View>
);

const PaginationDemo = () => {
  const [classicIndex, setClassicIndex] = React.useState(0);
  const [modernIndex, setModernIndex] = React.useState(1);
  const [minimalIndex, setMinimalIndex] = React.useState(2);
  const [accentIndex, setAccentIndex] = React.useState(0);
  const [largeIndex, setLargeIndex] = React.useState(1);

  return (
    <GestureHandlerRootView>
      <View className="flex-1 bg-zinc-950">
        <ScrollView
          className="flex-1"
          contentContainerStyle={{ flexGrow: 1 }}
          showsVerticalScrollIndicator={false}
          scrollEnabled
          contentInsetAdjustmentBehavior="always"
        >
          <SafeAreaView className="flex-1">
            <View className="px-6 pt-6 pb-4 border-b border-zinc-800/50">
              <View className="flex-row items-center mb-2">
                <Ionicons
                  name="ellipsis-horizontal"
                  size={24}
                  color="#fafafa"
                />
                <Text className="text-zinc-50 font-bold text-2xl ml-3">
                  Pagination Components
                </Text>
              </View>
              <Text className="text-zinc-400 text-base">
                Navigate through content with elegant dot indicators
              </Text>
            </View>

            <View className="px-6 py-6">
              <PaginationCard
                title="Classic"
                description="Traditional dot pagination with subtle styling and smooth transitions"
                icon="radio-button-on"
              >
                <View>
                  <Pagination
                    activeIndex={classicIndex}
                    dotSize={8}
                    inactiveColor="#3f3f46"
                    activeColor="#f4f4f5"
                    currentColor="#f4f4f5"
                    borderRadius={4}
                    dotContainer={4}
                    onIndexChange={setClassicIndex}
                    containerStyle={{
                      backgroundColor: "transparent",
                      padding: 8,
                    }}
                    totalItems={5}
                  />
                  <InteractiveControls
                    currentPage={classicIndex}
                    totalPages={5}
                    onPageChange={setClassicIndex}
                  />
                </View>
              </PaginationCard>

              <PaginationCard
                title="Modern Accent"
                description="Contemporary design with brand color accent and rounded container"
                icon="diamond"
              >
                <View>
                  <Pagination
                    activeIndex={modernIndex}
                    dotSize={6}
                    inactiveColor="#52525b"
                    activeColor="#6366f1"
                    currentColor="#6366f1"
```

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

### Clone Your Forked Glow UI Repository

Source: https://github.com/rit3zh/glow-ui/blob/main/CONTRIBUTING.md

This snippet provides the command to clone your forked Glow UI repository from GitHub to your local machine and navigate into the project directory.

```bash
git clone https://github.com/YOUR-USERNAME/glow-ui.git
cd glow-ui
```

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

### Install What's New Component using NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/whatsnew.mdx

Command to add the What's New component to your React Native project using the `rn-glow` CLI tool.

```bash
npx rn-glow add whats-new
```

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

### Install Avatar Group Component via NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/avatargroup.mdx

Use this command to quickly add the Avatar Group component to your React Native project using the `rn-glow` CLI. This method automates the setup and dependency management.

```bash
npx rn-glow add avatar-group
```

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

### Initialize UI Theme and Page Display

Source: https://github.com/rit3zh/glow-ui/blob/main/docs/index.html

This JavaScript snippet initializes the UI theme based on local storage or OS preference, temporarily hides the document body, and then reveals it after a short delay or once the 'app' object is ready, ensuring a smooth page load experience.

```JavaScript
document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)
```

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

### Get Pixel Value from Sheet Index (TypeScript)

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/functions/getValueFromIndex.mdx

Demonstrates how to use `getValueFromIndex` to convert a sheet size index to a pixel value, handling both numeric and percentage-based sizes. The example shows how a percentage value is converted relative to the window height.

```typescript
import { getValueFromIndex } from "cli/components/templates/sheet/floating-sheet/utils/helpers/getValueFromIndex";

const sheetSizes = [85, "90%"];
const value = getValueFromIndex({ sheetSizes, index: 1 });
// value will be 90% of the window height
```

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

### API Documentation for What's New Component Props

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/whatsnew.mdx

Detailed API documentation for the various prop interfaces used by the 'What's New' component and its sub-components, including descriptions, types, and required status.

```APIDOC
WhatsNewProps:
  children:
    description: "📦 Content to render inside the WhatsNew component."
    type: "React.ReactNode"
    required: true
  blurTint:
    description: "🌫️ Tint color of the blur effect."
    type: "BlurTint"

WhatsNewTriggerProps:
  children:
    description: "🎯 Trigger button or element to open the WhatsNew panel."
    type: "React.ReactNode"
    required: true

WhatsNewContentProps:
  children:
    description: "📦 Content that appears inside the WhatsNew sheet."
    type: "React.ReactNode"
    required: true

WhatsNewTitleProps:
  children:
    description: "🧾 Title text or element."
    type: "React.ReactNode"
    required: true
  secondaryColor:
    description: "🎨 Optional secondary color for subtitle or accent."
    type: "string"

WhatsNewWrapperProps:
  children:
    description: "🧩 Wrapper content, typically contains all inner components."
    type: "React.ReactNode"
    required: true

WhatsNewItemContainerProps:
  children:
    description: "📦 Container for a single \"What's New\" item."
    type: "React.ReactNode"
    required: true
```

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

### Implement React Native Arc Spinner

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/loaders.mdx

Example usage of the `SpinnerArc` component within a `SpinnerCard`, showcasing an elegant circular progress indicator. Configurable properties include arc length, start and end colors, background, size, speed, and stroke width for visual customization.

```tsx
<SpinnerCard
  title="Arc Spinner"
  description="Elegant circular progress indicator with customizable arc length and gradient colors"
  icon="pie-chart"
>
  <SpinnerArc
    arcLength={270}
    colorEnd="#6366f1"
    colorStart="#8b5cf6"
    backgroundColor="transparent"
    size={64}
    speed={500}
    strokeWidth={3}
  />
</SpinnerCard>
```

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

### Implement a React Native Chip Group with Animation

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/chip.mdx

This example demonstrates a `ChipGroup` component in React Native, showcasing state management for selected chips, dynamic content updates, and smooth fade/translate animations using `react-native-reanimated`. It includes `useState` for managing the selected index and displayed content, `useSharedValue` and `useAnimatedStyle` for animations, and `useEffect` for initial content setup. The `handleChipChange` function orchestrates the animation and content update logic.

```tsx
import * as React from "react";
import { useState, useEffect } from "react";
import {
  View,
  Text,
  SafeAreaView,
  StyleSheet,
  type ViewStyle,
} from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  interpolate,
  runOnJS,
} from "react-native-reanimated";
import { ChipGroup } from "@/components";

const ChipDemo: React.FunctionComponent = (_$_): React.ReactNode => {
  const [index, setIndex] = useState<number>(0);
  const [displayedLabel, setDisplayedLabel] = useState<string>("Primary");
  const [displayedCount, setDisplayedCount] = useState<number>(42);

  const fadeAnim = useSharedValue<number>(1);
  const chipData = [
    {
      label: "Primary",
      icon: "person",
      activeIcon: "person.fill",
      activeColor: "#0A84FF",
    },
    {
      label: "Notification",
      icon: "cart",
      activeIcon: "cart.fill",
      activeColor: "#FF453A",
    },
    {
      label: "Messages",
      icon: "bubble.left",
      activeIcon: "bubble.left.fill",
      activeColor: "#FF9F0A",
    },
    {
      label: "Promotions",
      icon: "megaphone",
      activeIcon: "megaphone.fill",
      activeColor: "#30D158",
    },
  ];

  const updateDisplayedContent = (newIndex: number) => {
    setDisplayedLabel(chipData[newIndex].label);
    setDisplayedCount(Math.floor(Math.random() * 100) + 1);
  };

  const handleChipChange = (newIndex: number) => {
    if (newIndex !== index) {
      fadeAnim.value = withTiming(0, { duration: 150 }, (finished) => {
        if (finished) {
          runOnJS(updateDisplayedContent)(newIndex);
          fadeAnim.value = withTiming(1, { duration: 150 });
        }
      });
      setIndex(newIndex);
    }
  };

  const animatedStyle = useAnimatedStyle<ViewStyle>(() => {
    return {
      opacity: fadeAnim.value,
      transform: [
        {
          translateY: interpolate(fadeAnim.value, [0, 1], [4, 0]),
        },
      ],
    };
  });

  useEffect(() => {
    updateDisplayedContent(0);
  }, []);

  return (
    <GestureHandlerRootView style={styles.root}>
      <SafeAreaView style={styles.container}>
        <View style={styles.content}>
          <View style={styles.header}>
            <Text style={styles.title}>Filter</Text>
            <Text style={styles.subtitle}>Choose your view</Text>
          </View>

          <View style={styles.chipContainer}>
            <ChipGroup
              chips={chipData as any}
              selectedIndex={index}
              onChange={handleChipChange}
              containerStyle={styles.chipGroupContainer}
            />
          </View>

          <Animated.View style={[styles.selectedInfo, animatedStyle]}>
            <Text style={styles.selectedText}>{displayedLabel}</Text>
            <View style={styles.dot} />
            <Text style={styles.selectedCount}>{displayedCount} items</Text>
          </Animated.View>
        </View>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
};

export default ChipDemo;

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: "#0A0A0A",
  },
  container: {
    flex: 1,
    backgroundColor: "#0A0A0A",
  },
  content: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 24,
  },
  header: {
    alignItems: "center",
    marginBottom: 48,
  },
  title: {
    fontSize: 28,
    fontWeight: "700",
    color: "#FFFFFF",
    letterSpacing: -0.5,
    marginBottom: 6,
  },
  subtitle: {
    fontSize: 15,
    color: "#71717A",
    fontWeight: "400",
  },
  chipContainer: {
    width: "100%",
    alignItems: "center",
    marginBottom: 32,
  },
  chipGroupContainer: {
    paddingHorizontal: 4,
  },
  selectedInfo: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#18181B",
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: "#27272A",
  },
  selectedText: {
    fontSize: 14,
    fontWeight: "500",
    color: "#FFFFFF",
  },
  dot: {
    width: 3,
    height: 3,
    borderRadius: 1.5,
    backgroundColor: "#52525B",
    marginHorizontal: 8,
  },
  selectedCount: {
    fontSize: 14,
    color: "#71717A",
    fontWeight: "400",
  },
});
```

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

### Install React Native Glow UI List Component

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/list.mdx

Use the `npx rn-glow add` command to easily integrate the List component into your React Native project via NPM.

```bash
npx rn-glow add list
```

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

### Upgrade to Pro Pricing Dialog Example

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/dialog.mdx

Demonstrates a pricing dialog with feature comparison, call-to-action buttons, and state management for subscription status. It utilizes Dialog, Button, Text, View, MaterialIcons, and Feather components to create a rich user experience for upgrading to a 'Pro' plan.

```React Native
          <Dialog>
            <DialogTrigger>
              <Button variant="primary">Upgrade Now</Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>🚀 Upgrade to Pro</DialogTitle>
                <DialogDescription>
                  Unlock powerful features and take your productivity to the
                  next level
                </DialogDescription>
              </DialogHeader>
              <View style={styles.pricingContent}>
                <View style={styles.priceHeader}>
                  <Text style={styles.priceAmount}>$9.99</Text>
                  <Text style={styles.pricePeriod}>/month</Text>
                </View>
                <View style={styles.featuresList}>
                  <View style={styles.featureItem}>
                    <Feather name="check" size={16} color="#10b981" />
                    <Text style={styles.featureText}>Unlimited projects</Text>
                  </View>
                  <View style={styles.featureItem}>
                    <Feather name="check" size={16} color="#10b981" />
                    <Text style={styles.featureText}>Advanced analytics</Text>
                  </View>
                  <View style={styles.featureItem}>
                    <Feather name="check" size={16} color="#10b981" />
                    <Text style={styles.featureText}>Priority support</Text>
                  </View>
                  <View style={styles.featureItem}>
                    <Feather name="check" size={16} color="#10b981" />
                    <Text style={styles.featureText}>Team collaboration</Text>
                  </View>
                </View>
              </View>
              <DialogFooter>
                <DialogClose>
                  <Button variant="outline">Maybe Later</Button>
                </DialogClose>
                <Button variant="primary" onPress={() => setSubscribed(true)}>
                  Subscribe Now
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
          {subscribed && (
            <Text style={styles.statusText}>🎉 Welcome to Pro!</Text>
          )}
```

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

### Initialize Theme and Page Display

Source: https://github.com/rit3zh/glow-ui/blob/main/docs/hierarchy.html

This JavaScript snippet manages the initial loading behavior of the page. It sets the document's theme based on a stored preference in local storage or defaults to the operating system's theme. It then temporarily hides the page body to prevent a flash of unstyled content, revealing it after a short delay or when the application's 'app.showPage()' function is available.

```JavaScript
document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";
document.body.style.display="none";
setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)
```

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

### Install Breadcrumbs component using NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/breadcrumbs.mdx

Provides the command-line instruction to install the Breadcrumbs component into a React Native project using the `rn-glow` CLI tool.

```bash
npx rn-glow add breadcrumbs
```

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

### Install Action Card component via NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/actioncard.mdx

This command installs the Action Card component into your React Native project using the `rn-glow` CLI tool.

```bash
npx rn-glow add action-card
```

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

### React Native Center Component Usage Example

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/center.mdx

This TypeScript React Native snippet demonstrates a `CenterDemo` component that showcases different implementations of a `Center` component. It includes examples for basic content centering, a content card layout, a minimal design, and an interactive element, all using the `Center` component for alignment. The demo allows switching between these examples via a horizontal scrollable tab selector.

```tsx
import * as React from "react";
import { useState } from "react";
import {
  View,
  Text,
  ScrollView,
  SafeAreaView,
  Pressable,
  StyleSheet,
} from "react-native";
import { Center } from "@/components/index";

const CenterDemo: React.FC = (): React.ReactNode => {
  const [activeDemo, setActiveDemo] = useState<string>("basic");

  const demos = {
    basic: {
      title: "Perfect Center",
      subtitle: "Effortless alignment",
      content: (
        <Center style={styles.centerContainer}>
          <View style={styles.basicContent}>
            <View style={styles.iconContainer}>
              <View style={styles.innerIcon} />
            </View>
            <Text style={styles.centeredTitle}>Centered</Text>
            <Text style={styles.centeredSubtitle}>Perfectly aligned</Text>
          </View>
        </Center>
      ),
    },
    card: {
      title: "Content Card",
      subtitle: "Information display",
      content: (
        <Center style={styles.cardContainer}>
          <View
            style={[
              styles.cardContent,
              {
                justifyContent: "center",
                alignItems: "center",
                flex: 1,
              },
            ]}
          >
            <Text
              style={[
                styles.cardTitle,
                { justifyContent: "center", alignItems: "center" },
              ]}
            >
              Dashboard
            </Text>
            <Text style={styles.cardDescription}>
              Welcome to your personalized workspace where everything is
              perfectly centered and organized.
            </Text>
            <View style={styles.dotsContainer}>
              <View style={[styles.dot, styles.activeDot]} />
              <View style={[styles.dot, styles.inactiveDot]} />
              <View style={[styles.dot, styles.inactiveDot]} />
            </View>
          </View>
        </Center>
      ),
    },
    minimal: {
      title: "Pure Minimal",
      subtitle: "Essential elements only",
      content: (
        <Center style={styles.minimalContainer}>
          <View style={styles.minimalContent}>
            <Text
              style={[
                styles.minimalIcon,
                {
                  fontSize: 48,
                  color: "#FFFFFF",
                },
              ]}
            >
              ✦
            </Text>
            <Text style={styles.minimalText}>Minimal</Text>
          </View>
        </Center>
      ),
    },
    interactive: {
      title: "Interactive",
      subtitle: "Touch to interact",
      content: (
        <Pressable>
          <Center style={styles.interactiveContainer}>
            <View style={styles.interactiveContent}>
              <View style={styles.touchIcon}>
                <Text style={styles.touchEmoji}>👆</Text>
              </View>
              <Text style={styles.touchTitle}>Touch Me</Text>
              <Text style={styles.touchSubtitle}>Interactive center</Text>
            </View>
          </Center>
        </Pressable>
      ),
    },
  };
  const activeContent = demos[activeDemo as keyof typeof demos];
  return (
    <View style={styles.container}>
      <SafeAreaView style={styles.safeArea}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Center</Text>
          <Text style={styles.headerSubtitle}>
            Perfect alignment made simple
          </Text>
        </View>

        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={styles.scrollContent}
          showsVerticalScrollIndicator={false}
        >
          <View style={styles.selectorContainer}>
            <ScrollView
              horizontal
              showsHorizontalScrollIndicator={false}
              scrollEnabled
            >
              <View style={styles.selectorRow}>
                {Object.entries(demos).map(([key, demo]) => (
                  <Pressable
                    key={key}
                    onPress={() => setActiveDemo(key)}
                    style={[
                      styles.selectorTab,
                      activeDemo === key
                        ? styles.selectorTabActive
                        : styles.selectorTabInactive,
                    ]}
                  >
                    <Text
                      style={[
                        styles.selectorText,
                        activeDemo === key
                          ? styles.selectorTextActive
                          : styles.selectorTextInactive,
                      ]}
                    >
                      {demo.title}
                    </Text>
                  </Pressable>
                ))}
              </View>
            </ScrollView>
          </View>

          <View style={styles.demoContainer}>
            <View style={styles.demoHeader}>
              <Text style={styles.demoTitle}>{activeContent?.title}</Text>

```

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

### API Documentation: WrapperProps Interface

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/list.mdx

Defines the properties for the `Wrapper` component, specifying the type and requirements for its children content.

```APIDOC
WrapperProps:
  children:
    description: "Main wrapper content – can be any valid node."
    type: "React.ReactNode"
    required: true
```

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

### Install Avatar Component via NPM

Source: https://github.com/rit3zh/glow-ui/blob/main/docs-webste/content/docs/components/avatar.mdx

This command installs the Avatar component into your React Native project using the `rn-glow` CLI tool, which simplifies adding components from the Glow UI library.

```Bash
npx rn-glow add accordion
```