"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Button } from "../../ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card";
import { Badge } from "../../ui/badge";
import { Input } from "../../ui/input";
import { Label } from "../../ui/label";
import { Textarea } from "../../ui/textarea";
import { Switch } from "../../ui/switch";
import { Checkbox } from "../../ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
import { Progress } from "../../ui/progress";
import { Alert, AlertDescription, AlertTitle } from "../../ui/alert";
import { Avatar, AvatarFallback } from "../../ui/avatar";
import { Separator } from "../../ui/separator";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table";
import { Calendar } from "../../ui/calendar";
import {
  AlertTriangle,
  CheckCircle,
  Info,
  X,
  Download,
  Heart,
  Star,
  Share,
  Settings,
  TrendingUp,
  DollarSign,
  Users,
  MoreHorizontal,
  ArrowRight,
  Minus,
  Plus
} from "lucide-react";
import { useState } from "react";
function ComponentGallery() {
  const [goalValue, setGoalValue] = useState(350);
  const [date, setDate] = useState(/* @__PURE__ */ new Date());
  return /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Basic Components" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Essential UI elements and building blocks" })
      ] }),
      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-6", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-3", children: "Buttons" }),
          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
              /* @__PURE__ */ jsx(Button, { children: "Default" }),
              /* @__PURE__ */ jsx(Button, { size: "sm", children: "Small" }),
              /* @__PURE__ */ jsx(Button, { size: "lg", children: "Large" }),
              /* @__PURE__ */ jsx(Button, { disabled: true, children: "Disabled" }),
              /* @__PURE__ */ jsxs(Button, { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
                "With Icon"
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
              /* @__PURE__ */ jsx(Button, { variant: "default", children: "Default" }),
              /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Secondary" }),
              /* @__PURE__ */ jsx(Button, { variant: "destructive", children: "Destructive" }),
              /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Outline" }),
              /* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Ghost" }),
              /* @__PURE__ */ jsx(Button, { variant: "link", children: "Link" })
            ] })
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-3", children: "Form Elements" }),
          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
              /* @__PURE__ */ jsx(Input, { placeholder: "Text input..." }),
              /* @__PURE__ */ jsx(Input, { type: "email", placeholder: "Email input..." }),
              /* @__PURE__ */ jsx(Textarea, { placeholder: "Textarea...", rows: 3 })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
              /* @__PURE__ */ jsxs(Select, { children: [
                /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select option..." }) }),
                /* @__PURE__ */ jsxs(SelectContent, { children: [
                  /* @__PURE__ */ jsx(SelectItem, { value: "option1", children: "Option 1" }),
                  /* @__PURE__ */ jsx(SelectItem, { value: "option2", children: "Option 2" })
                ] })
              ] }),
              /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                /* @__PURE__ */ jsx(Switch, { id: "switch-demo" }),
                /* @__PURE__ */ jsx(Label, { htmlFor: "switch-demo", children: "Enable notifications" })
              ] }),
              /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                /* @__PURE__ */ jsx(Checkbox, { id: "checkbox-demo" }),
                /* @__PURE__ */ jsx(Label, { htmlFor: "checkbox-demo", children: "I agree to terms" })
              ] })
            ] })
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-3", children: "Badges & Progress" }),
          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
              /* @__PURE__ */ jsx(Badge, { children: "Default" }),
              /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Secondary" }),
              /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: "Destructive" }),
              /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Outline" }),
              /* @__PURE__ */ jsx(Badge, { className: "bg-green-100 text-green-800", children: "Success" }),
              /* @__PURE__ */ jsx(Badge, { className: "bg-yellow-100 text-yellow-800", children: "Warning" })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
              /* @__PURE__ */ jsx(Progress, { value: 25 }),
              /* @__PURE__ */ jsx(Progress, { value: 60 }),
              /* @__PURE__ */ jsx(Progress, { value: 90 })
            ] })
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-3", children: "Avatars" }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: "XS" }) }),
            /* @__PURE__ */ jsx(Avatar, { className: "h-10 w-10", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-sm", children: "SM" }) }),
            /* @__PURE__ */ jsx(Avatar, { className: "h-12 w-12", children: /* @__PURE__ */ jsx(AvatarFallback, { children: "MD" }) }),
            /* @__PURE__ */ jsx(Avatar, { className: "h-16 w-16", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-lg", children: "LG" }) })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Alerts & Notifications" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Different alert types and notification styles" })
      ] }),
      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
        /* @__PURE__ */ jsxs(Alert, { children: [
          /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
          /* @__PURE__ */ jsx(AlertTitle, { children: "Information" }),
          /* @__PURE__ */ jsx(AlertDescription, { children: "This is an informational alert with additional context." })
        ] }),
        /* @__PURE__ */ jsxs(Alert, { className: "border-yellow-500 bg-yellow-50", children: [
          /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-yellow-600" }),
          /* @__PURE__ */ jsx(AlertTitle, { className: "text-yellow-800", children: "Warning" }),
          /* @__PURE__ */ jsx(AlertDescription, { className: "text-yellow-700", children: "Please review your settings before proceeding." })
        ] }),
        /* @__PURE__ */ jsxs(Alert, { className: "border-red-500 bg-red-50", children: [
          /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-red-600" }),
          /* @__PURE__ */ jsx(AlertTitle, { className: "text-red-800", children: "Error" }),
          /* @__PURE__ */ jsx(AlertDescription, { className: "text-red-700", children: "Something went wrong. Please try again." })
        ] }),
        /* @__PURE__ */ jsxs(Alert, { className: "border-green-500 bg-green-50", children: [
          /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }),
          /* @__PURE__ */ jsx(AlertTitle, { className: "text-green-800", children: "Success" }),
          /* @__PURE__ */ jsx(AlertDescription, { className: "text-green-700", children: "Operation completed successfully!" })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Tabs & Navigation" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Tabbed interfaces and navigation elements" })
      ] }),
      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "tab1", className: "w-full", children: [
        /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-3", children: [
          /* @__PURE__ */ jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }),
          /* @__PURE__ */ jsx(TabsTrigger, { value: "tab2", children: "Tab 2" }),
          /* @__PURE__ */ jsx(TabsTrigger, { value: "tab3", children: "Tab 3" })
        ] }),
        /* @__PURE__ */ jsx(TabsContent, { value: "tab1", className: "mt-4", children: /* @__PURE__ */ jsxs("div", { className: "p-4 border rounded-lg", children: [
          /* @__PURE__ */ jsx("h3", { className: "font-medium mb-2", children: "Tab 1 Content" }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This is the content for the first tab. You can put any content here." })
        ] }) }),
        /* @__PURE__ */ jsx(TabsContent, { value: "tab2", className: "mt-4", children: /* @__PURE__ */ jsxs("div", { className: "p-4 border rounded-lg", children: [
          /* @__PURE__ */ jsx("h3", { className: "font-medium mb-2", children: "Tab 2 Content" }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This is the content for the second tab with different information." })
        ] }) }),
        /* @__PURE__ */ jsx(TabsContent, { value: "tab3", className: "mt-4", children: /* @__PURE__ */ jsxs("div", { className: "p-4 border rounded-lg", children: [
          /* @__PURE__ */ jsx("h3", { className: "font-medium mb-2", children: "Tab 3 Content" }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "And this is the content for the third tab." })
        ] }) })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Layout Elements" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Separators, dividers, and layout helpers" })
      ] }),
      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-3", children: "Separators" }),
          /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
            /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Content above" }),
            /* @__PURE__ */ jsx(Separator, { className: "my-2" }),
            /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Content below" })
          ] }) })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-3", children: "Icon Buttons" }),
          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", children: /* @__PURE__ */ jsx(Heart, { className: "h-4 w-4" }) }),
            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", children: /* @__PURE__ */ jsx(Star, { className: "h-4 w-4" }) }),
            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", children: /* @__PURE__ */ jsx(Share, { className: "h-4 w-4" }) }),
            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }) })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Dashboard Metrics" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Revenue, subscriptions, and key performance indicators" })
      ] }),
      /* @__PURE__ */ jsx(CardContent, { className: "space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
        /* @__PURE__ */ jsxs(Card, { children: [
          /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
            /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: "Total Revenue" }),
            /* @__PURE__ */ jsx(DollarSign, { className: "h-4 w-4 text-muted-foreground" })
          ] }),
          /* @__PURE__ */ jsxs(CardContent, { children: [
            /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: "$15,231.89" }),
            /* @__PURE__ */ jsxs("div", { className: "flex items-center text-xs text-green-600", children: [
              /* @__PURE__ */ jsx(TrendingUp, { className: "h-3 w-3 mr-1" }),
              "+20.1% from last month"
            ] })
          ] })
        ] }),
        /* @__PURE__ */ jsxs(Card, { children: [
          /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
            /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: "Subscriptions" }),
            /* @__PURE__ */ jsx(Users, { className: "h-4 w-4 text-muted-foreground" })
          ] }),
          /* @__PURE__ */ jsxs(CardContent, { children: [
            /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: "+2,350" }),
            /* @__PURE__ */ jsxs("div", { className: "flex items-center text-xs text-green-600", children: [
              /* @__PURE__ */ jsx(TrendingUp, { className: "h-3 w-3 mr-1" }),
              "+180.1% from last month"
            ] }),
            /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx("div", { className: "w-full bg-secondary rounded-full h-2", children: /* @__PURE__ */ jsx("div", { className: "bg-primary h-2 rounded-full", style: { width: "75%" } }) }) })
          ] })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Calendar & Activity Tracking" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Date selection and goal setting interfaces" })
      ] }),
      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Calendar Component" }),
          /* @__PURE__ */ jsx("div", { className: "border rounded-lg p-3 bg-card", children: /* @__PURE__ */ jsx(
            Calendar,
            {
              mode: "single",
              selected: date,
              onSelect: setDate,
              className: "rounded-md mx-auto",
              showOutsideDays: false
            }
          ) })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Goal Setting Widget" }),
          /* @__PURE__ */ jsxs(Card, { children: [
            /* @__PURE__ */ jsxs(CardHeader, { children: [
              /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "Move Goal" }),
              /* @__PURE__ */ jsx(CardDescription, { children: "Set your daily activity goal." })
            ] }),
            /* @__PURE__ */ jsxs(CardContent, { className: "space-y-6", children: [
              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-4", children: [
                /* @__PURE__ */ jsx(
                  Button,
                  {
                    variant: "outline",
                    size: "sm",
                    onClick: () => setGoalValue(Math.max(50, goalValue - 50)),
                    children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" })
                  }
                ),
                /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
                  /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: goalValue }),
                  /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "CALORIES/DAY" })
                ] }),
                /* @__PURE__ */ jsx(
                  Button,
                  {
                    variant: "outline",
                    size: "sm",
                    onClick: () => setGoalValue(goalValue + 50),
                    children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
                  }
                )
              ] }),
              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Exercise Minutes" }),
                /* @__PURE__ */ jsx("div", { className: "flex items-end space-x-1 h-16", children: Array.from({ length: 14 }, (_, i) => /* @__PURE__ */ jsx(
                  "div",
                  {
                    className: "bg-primary rounded-sm flex-1",
                    style: {
                      height: `${Math.random() * 60 + 20}%`,
                      opacity: Math.random() * 0.4 + 0.6
                    }
                  },
                  i
                )) })
              ] }),
              /* @__PURE__ */ jsx(Button, { className: "w-full", children: "Set Goal" })
            ] })
          ] })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Data Tables" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Complex data visualization with status indicators" })
      ] }),
      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
          /* @__PURE__ */ jsx("h4", { className: "text-lg font-semibold", children: "Payments" }),
          /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Manage your payments." })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
            /* @__PURE__ */ jsx(TableHead, { className: "w-[100px]", children: "Status" }),
            /* @__PURE__ */ jsx(TableHead, { children: "Email" }),
            /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: "Amount" }),
            /* @__PURE__ */ jsx(TableHead, { className: "w-[70px]" })
          ] }) }),
          /* @__PURE__ */ jsxs(TableBody, { children: [
            /* @__PURE__ */ jsxs(TableRow, { children: [
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { className: "bg-green-100 text-green-800", children: "Success" }) }),
              /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm", children: "ken99@example.com" }),
              /* @__PURE__ */ jsx(TableCell, { className: "text-right font-medium", children: "$316.00" }),
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) })
            ] }),
            /* @__PURE__ */ jsxs(TableRow, { children: [
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { className: "bg-green-100 text-green-800", children: "Success" }) }),
              /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm", children: "abe45@example.com" }),
              /* @__PURE__ */ jsx(TableCell, { className: "text-right font-medium", children: "$242.00" }),
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) })
            ] }),
            /* @__PURE__ */ jsxs(TableRow, { children: [
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { className: "bg-yellow-100 text-yellow-800", children: "Processing" }) }),
              /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm", children: "monserrat44@example.com" }),
              /* @__PURE__ */ jsx(TableCell, { className: "text-right font-medium", children: "$837.00" }),
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) })
            ] }),
            /* @__PURE__ */ jsxs(TableRow, { children: [
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: "Failed" }) }),
              /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm", children: "carmella@example.com" }),
              /* @__PURE__ */ jsx(TableCell, { className: "text-right font-medium", children: "$721.00" }),
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) })
            ] }),
            /* @__PURE__ */ jsxs(TableRow, { children: [
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Pending" }) }),
              /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm", children: "jason78@example.com" }),
              /* @__PURE__ */ jsx(TableCell, { className: "text-right font-medium", children: "$450.00" }),
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) })
            ] }),
            /* @__PURE__ */ jsxs(TableRow, { children: [
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { className: "bg-green-100 text-green-800", children: "Success" }) }),
              /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm", children: "sarah23@example.com" }),
              /* @__PURE__ */ jsx(TableCell, { className: "text-right font-medium", children: "$1,280.00" }),
              /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) })
            ] })
          ] })
        ] }) }),
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
          /* @__PURE__ */ jsx("div", { children: "0 of 6 row(s) selected." }),
          /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: "Previous" }),
            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Next" })
          ] })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Pricing Components" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Subscription plans and pricing tables" })
      ] }),
      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
        /* @__PURE__ */ jsxs("div", { className: "text-center space-y-4", children: [
          /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold", children: "Pricing" }),
          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Check out our affordable pricing plans" }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-4", children: [
            /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Monthly" }),
            /* @__PURE__ */ jsx(Switch, {}),
            /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Yearly" })
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
          /* @__PURE__ */ jsxs(Card, { children: [
            /* @__PURE__ */ jsxs(CardHeader, { children: [
              /* @__PURE__ */ jsx(CardTitle, { children: "Plus" }),
              /* @__PURE__ */ jsx(CardDescription, { children: "For personal use" })
            ] }),
            /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
              /* @__PURE__ */ jsxs("div", { children: [
                /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: "$19" }),
                /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Billed $228 annually" })
              ] }),
              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                  /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }),
                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Up to 5 team members" })
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                  /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }),
                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Basic components library" })
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                  /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }),
                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Community support" })
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                  /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }),
                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: "1GB storage space" })
                ] })
              ] }),
              /* @__PURE__ */ jsxs(Button, { className: "w-full", children: [
                "Purchase",
                /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 h-4 w-4" })
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsxs(Card, { className: "border-primary", children: [
            /* @__PURE__ */ jsxs(CardHeader, { children: [
              /* @__PURE__ */ jsx(CardTitle, { children: "Pro" }),
              /* @__PURE__ */ jsx(CardDescription, { children: "For professionals" }),
              /* @__PURE__ */ jsx(Badge, { className: "w-fit", children: "Most Popular" })
            ] }),
            /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
              /* @__PURE__ */ jsxs("div", { children: [
                /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: "$49" }),
                /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Billed $588 annually" })
              ] }),
              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Everything in Plus, and:" }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                  /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }),
                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Unlimited team members" })
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                  /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }),
                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Advanced components" })
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                  /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }),
                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Priority support" })
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
                  /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }),
                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Unlimited storage" })
                ] })
              ] }),
              /* @__PURE__ */ jsxs(Button, { className: "w-full", children: [
                "Purchase",
                /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 h-4 w-4" })
              ] })
            ] })
          ] })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Form Components" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Complete form elements and validation states" })
      ] }),
      /* @__PURE__ */ jsx(CardContent, { className: "space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
            /* @__PURE__ */ jsx(Input, { id: "email", type: "email", placeholder: "name@example.com" })
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: "Password" }),
            /* @__PURE__ */ jsx(Input, { id: "password", type: "password", placeholder: "Enter your password" })
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx(Label, { htmlFor: "message", children: "Message" }),
            /* @__PURE__ */ jsx(Textarea, { id: "message", placeholder: "Type your message here..." })
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx(Label, { children: "Plan Selection" }),
            /* @__PURE__ */ jsxs(Select, { children: [
              /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a plan" }) }),
              /* @__PURE__ */ jsxs(SelectContent, { children: [
                /* @__PURE__ */ jsx(SelectItem, { value: "starter", children: "Starter Plan" }),
                /* @__PURE__ */ jsx(SelectItem, { value: "pro", children: "Pro Plan" }),
                /* @__PURE__ */ jsx(SelectItem, { value: "enterprise", children: "Enterprise Plan" })
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
            /* @__PURE__ */ jsx(Checkbox, { id: "terms" }),
            /* @__PURE__ */ jsx(Label, { htmlFor: "terms", className: "text-sm", children: "I agree to the terms and conditions" })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
            /* @__PURE__ */ jsx(Checkbox, { id: "marketing" }),
            /* @__PURE__ */ jsx(Label, { htmlFor: "marketing", className: "text-sm", children: "Allow us to send you emails" })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
            /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }),
            /* @__PURE__ */ jsx(Button, { children: "Submit Form" })
          ] })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { children: [
        /* @__PURE__ */ jsx(CardTitle, { children: "Contextual Alerts" }),
        /* @__PURE__ */ jsx(CardDescription, { children: "Real-world notification examples with business context" })
      ] }),
      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
        /* @__PURE__ */ jsxs(Alert, { children: [
          /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
          /* @__PURE__ */ jsx(AlertTitle, { children: "Subscription Update" }),
          /* @__PURE__ */ jsx(AlertDescription, { children: "Your subscription is up to date. Next billing date: June 1, 2024." })
        ] }),
        /* @__PURE__ */ jsxs(Alert, { className: "border-yellow-500 bg-yellow-50", children: [
          /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-yellow-600" }),
          /* @__PURE__ */ jsx(AlertTitle, { className: "text-yellow-800", children: "Payment Due" }),
          /* @__PURE__ */ jsx(AlertDescription, { className: "text-yellow-700", children: "Your payment method will be charged in 3 days. Update your billing info if needed." })
        ] }),
        /* @__PURE__ */ jsxs(Alert, { className: "border-green-500 bg-green-50", children: [
          /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-600" }),
          /* @__PURE__ */ jsx(AlertTitle, { className: "text-green-800", children: "Upgrade Successful" }),
          /* @__PURE__ */ jsx(AlertDescription, { className: "text-green-700", children: "Your subscription has been upgraded to Pro. Enjoy the new features!" })
        ] })
      ] })
    ] })
  ] });
}
export {
  ComponentGallery
};
