"use client";

import { Button } from "@/components/ui/buttons/button";
import { CloseButton } from "@/components/ui/buttons/close-button";
import {
  ComboboxControl,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxLabel,
  ComboboxRoot,
} from "@/components/ui/collections/combobox";
import {
  ListboxContent,
  ListboxItem,
  ListboxItemText,
  ListboxLabel,
  ListboxRoot,
} from "@/components/ui/collections/listbox";
import {
  TreeViewBranchControl,
  TreeViewBranchIndentGuide,
  TreeViewBranchText,
  TreeViewItem,
  TreeViewItemText,
  TreeViewLabel,
  TreeViewNode,
  TreeViewRoot,
  TreeViewTree,
} from "@/components/ui/collections/treeview";
import { Alert } from "@/components/ui/feedback/alert";
import { EmptyState } from "@/components/ui/feedback/empty-state";
import {
  ProgressBar,
  ProgressLabel,
  ProgressRoot,
} from "@/components/ui/feedback/progress";
import { Status } from "@/components/ui/feedback/status";
import {
  ProgressCircleRing,
  ProgressCircleRoot,
  ProgressCircleValueText,
} from "@/components/ui/feedback/progress-circle";
import {
  SkeletonCircle,
  SkeletonText,
} from "@/components/ui/feedback/skeleton";
import { Checkbox } from "@/components/ui/forms/checkbox";
import { CheckboxCard } from "@/components/ui/forms/checkbox-card";
import {
  ColorPickerArea,
  ColorPickerChannelSliders,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerSwatchGroup,
  ColorPickerSwatchTrigger,
  ColorPickerTrigger,
  ColorPickerValueText,
} from "@/components/ui/forms/color-picker";
import { Field } from "@/components/ui/forms/field";
import {
  FileUploadClearTrigger,
  FileUploadDropzone,
  FileUploadFileText,
  FileUploadLabel,
  FileUploadList,
  FileUploadRoot,
  FileUploadTrigger,
} from "@/components/ui/forms/file-upload";
import { InputGroup } from "@/components/ui/forms/input-group";
import {
  NativeSelectField,
  NativeSelectRoot,
} from "@/components/ui/forms/native-select";
import {
  NumberInputField,
  NumberInputRoot,
} from "@/components/ui/forms/number-input";
import {
  PasswordInput,
  PasswordStrengthMeter,
} from "@/components/ui/forms/password-input";
import { PinInput } from "@/components/ui/forms/pin-input";
import { Radio, RadioGroup } from "@/components/ui/forms/radio";
import {
  RadioCardItem,
  RadioCardLabel,
  RadioCardRoot,
} from "@/components/ui/forms/radio-card";
import { Rating } from "@/components/ui/forms/rating";
import { SegmentedControl } from "@/components/ui/forms/segmented-control";
import { Slider } from "@/components/ui/forms/slider";
import { Switch } from "@/components/ui/forms/switch";
import {
  ActionBarContent,
  ActionBarRoot,
  ActionBarSelectionTrigger,
  ActionBarSeparator,
} from "@/components/ui/overlays/action-bar";
import {
  DialogActionTrigger,
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/overlays/dialog";
import {
  DrawerActionTrigger,
  DrawerBody,
  DrawerCloseTrigger,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerRoot,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/overlays/drawer";
import {
  HoverCardArrow,
  HoverCardContent,
  HoverCardRoot,
  HoverCardTrigger,
} from "@/components/ui/overlays/hover-card";
import {
  MenuContent,
  MenuItem,
  MenuItemCommand,
  MenuItemText,
  MenuRadioItem,
  MenuRadioItemGroup,
  MenuRoot,
  MenuTrigger,
  MenuTriggerItem,
} from "@/components/ui/overlays/menu";
import {
  PopoverBody,
  PopoverContent,
  PopoverFooter,
  PopoverHeader,
  PopoverRoot,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/overlays/popover";
import { InfoTip } from "@/components/ui/overlays/toggle-tip";
import { Tooltip } from "@/components/ui/overlays/tooltip";
import {
  Blockquote,
  BlockquoteIcon,
} from "@/components/ui/typography/blockquote";
import {
  accordionItems,
  alertStatuses,
  alignments,
  boxData,
  breadcrumbItems,
  colorPalettes,
  countries,
  fontSizes,
  formats,
  frameworks,
  headings,
  images,
  items,
  itemsTabs,
  justifications,
  marks,
  MAX_FILES,
  placements,
  radioCardItems,
  radioCardItems2,
  radioItems,
  rootNode,
  stats,
  steps,
  swatches,
  variants,
} from "@/data/constants";
import {
  AbsoluteCenter,
  Badge,
  Box,
  ButtonGroup,
  Card,
  Center,
  Checkmark,
  Circle,
  ClientOnly,
  Code,
  Collapsible,
  ColorPickerFormatSelect,
  ColorPickerPositioner,
  ComboboxContent,
  createListCollection,
  createTreeCollection,
  DownloadTrigger,
  Flex,
  Float,
  For,
  FormatByte,
  FormatNumber,
  Grid,
  GridItem,
  Heading,
  Highlight,
  HStack,
  Icon,
  IconButton,
  Image,
  Input,
  Kbd,
  Mark,
  parseColor,
  Portal,
  ProgressValueText,
  ScrollArea,
  Separator,
  SimpleGrid,
  Span,
  Spinner,
  Square,
  Stack,
  StackSeparator,
  Strong,
  Table,
  Tabs,
  Text,
  Textarea,
  TreeView,
  useFilter,
  useHighlight,
  useListboxItemContext,
  useListCollection,
  useTreeViewContext,
  VStack,
  Wrap,
} from "@chakra-ui/react";
import React from "react";
import { Fragment } from "react";
import { FaBell, FaMoon, FaReact, FaSearch, FaSun } from "react-icons/fa";
import { FaCartShopping } from "react-icons/fa6";
import {
  HiCheck,
  HiColorSwatch,
  HiShieldCheck,
  HiSortAscending,
  HiStar,
  HiUpload,
  HiX,
} from "react-icons/hi";
import { IoHeart } from "react-icons/io5";
import {
  LuCheck,
  LuChevronRight,
  LuFile,
  LuFileUp,
  LuFolder,
  LuImageDown,
  LuPackage,
  LuPen,
  LuPercent,
  LuPhone,
  LuPhoneForwarded,
  LuPlus,
  LuShare,
  LuShip,
  LuSquareCheck,
  LuSquareMinus,
  LuSquarePlus,
  LuTrash,
  LuTrash2,
  LuUser,
  LuVoicemail,
  LuX,
} from "react-icons/lu";
import { Md123, Md3dRotation, MdGraphicEq, MdMail } from "react-icons/md";
import { toaster } from "@/components/ui/feedback/toaster";
import { Avatar, AvatarGroup } from "@/components/ui/data-display/avatar";
import {
  ClipboardButton,
  ClipboardIconButton,
  ClipboardInput,
  ClipboardRoot,
} from "@/components/ui/data-display/clipboard";
import {
  DataListItem,
  DataListRoot,
} from "@/components/ui/data-display/data-list";
import { QrCode } from "@/components/ui/data-display/qr-code";
import { GiSnake } from "react-icons/gi";
import {
  StatDownTrend,
  StatHelpText,
  StatLabel,
  StatRoot,
  StatUpTrend,
  StatValueText,
} from "@/components/ui/data-display/stat";
import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPageText,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/disclosure/pagination";
import { Tag } from "@/components/ui/data-display/tag";
import {
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineItem,
  TimelineRoot,
  TimelineTitle,
} from "@/components/ui/data-display/timeline";
import {
  AccordionItem,
  AccordionItemContent,
  AccordionItemTrigger,
  AccordionRoot,
} from "@/components/ui/disclosure/accordion";
import {
  BreadcrumbLink,
  BreadcrumbRoot,
} from "@/components/ui/disclosure/breadcrumb";
import { LiaSlashSolid } from "react-icons/lia";
import {
  StepsCompletedContent,
  StepsContent,
  StepsItem,
  StepsList,
  StepsNextTrigger,
  StepsPrevTrigger,
  StepsRoot,
} from "@/components/ui/disclosure/steps";
import { PiSmileyNervous, PiSmileyWink } from "react-icons/pi";

interface Node {
  id: string;
  name: string;
  children?: Node[];
  childrenCount?: number;
}

interface TreeNodeProps extends TreeView.NodeProviderProps<Node> {
  onRemove?: (props: TreeView.NodeProviderProps<Node>) => void;
  onAdd?: (props: TreeView.NodeProviderProps<Node>) => void;
}

type ErrorLevel = "L" | "M" | "Q" | "H";

interface Item {
  id: string;
  title: string;
  content: React.ReactNode;
}

function HomeCard() {
  const contentRef = React.useRef<HTMLDivElement | null>(null);
  const [selectedSkills, setSelectedSkills] = React.useState<string[]>([]);
  const [selectedImage, setSelectedImage] = React.useState<string>("mountains");
  const [checked, setChecked] = React.useState(false);
  const [radioItemValue, setRadioItemValue] = React.useState("asc");
  const [loading, setLoading] = React.useState(true);
  const [errorLevel, setErrorLevel] = React.useState<ErrorLevel>("L");

  const chunks = useHighlight({
    text: "Endless scale, powered by real humans.",
    query: ["Endless", "real humans."],
  });

  const downloadData = async () => {
    const res = await fetch("https://picsum.photos/200/300");
    return res.blob();
  };

  const { contains, startsWith } = useFilter({ sensitivity: "base" });

  const { collection: frameworkCollection, filter: frameworkFilter } =
    useListCollection({
      initialItems: frameworks,
      filter: contains,
    });
  const { collection: countryCollection, filter: countryFilter } =
    useListCollection({
      initialItems: countries,
      filter: startsWith,
      limit: 10,
    });

  const listboxCollection = createListCollection({ items: frameworks });
  const imagesCollection = createListCollection({ items: images });

  const currentImage = imagesCollection.items.find(
    (img) => img.value === selectedImage
  );

  const nodeCollection = createTreeCollection<Node>({
    nodeToValue: (node) => node.id,
    nodeToString: (node) => node.name,
    rootNode: rootNode,
  });

  const [tabs, setTabs] = React.useState<Item[]>(itemsTabs);
  const [selectedTab, setSelectedTab] = React.useState<string | null>(
    itemsTabs[0].id
  );

  const uuid = () => {
    return Math.random().toString(36).substring(2, 15);
  };

  const addTab = () => {
    const newTabs = [...tabs];

    const uid = uuid();

    newTabs.push({
      id: uid,
      title: `Tab`,
      content: `Tab Body`,
    });

    setTabs(newTabs);
    setSelectedTab(newTabs[newTabs.length - 1].id);
  };

  const removeTab = (id: string) => {
    if (tabs.length >= 1) {
      const newTabs = [...tabs].filter((tab) => tab.id !== id);
      setTabs(newTabs);
    }
  };

  const [collection, setCollection] = React.useState(nodeCollection);
  const [selection, setSelection] = React.useState<string[]>([]);

  const hasSelection = selection.length > 0;
  const indeterminate = hasSelection && selection.length < items.length;

  const removeNode = (props: TreeNodeProps) => {
    setCollection(collection.remove([props.indexPath]));
  };

  const addNode = (props: TreeNodeProps) => {
    const { node, indexPath } = props;
    if (!collection.isBranchNode(node)) {
      return;
    }

    const children = [
      {
        id: `untitled-${Date.now()}`,
        name: `untitled-${node.children?.length}.tsx`,
      },
      ...(node.children || []),
    ];
    setCollection(collection.replace(indexPath, { ...node, children }));
  };

  const handleSelectionChange = (details: { value: string[] }) => {
    if (details.value.length > 0) {
      setSelectedImage(details.value[0]);
    }
  };

  const ListboxItemCheckmark = () => {
    const itemState = useListboxItemContext();
    return (
      <Checkmark
        filled
        size="sm"
        checked={itemState.selected}
        disabled={itemState.disabled}
      />
    );
  };

  const TreeNodeActions = (props: TreeNodeProps) => {
    const { onRemove, onAdd, node } = props;
    const tree = useTreeViewContext();
    const isBranch = tree.collection.isBranchNode(node);
    return (
      <HStack
        gap="0.5"
        position="absolute"
        right="0"
        top="0"
        scale="0.8"
        css={{
          opacity: 0,
          "[role=treeitem]:hover &": { opacity: 1 },
        }}
      >
        <IconButton
          size="xs"
          variant="ghost"
          aria-label="Remove node"
          onClick={(e) => {
            e.stopPropagation();
            onRemove?.(props);
          }}
        >
          <LuTrash />
        </IconButton>
        {isBranch && (
          <IconButton
            size="xs"
            variant="ghost"
            aria-label="Add node"
            onClick={(e) => {
              e.stopPropagation();
              onAdd?.(props);
              tree.expand([node.id]);
            }}
          >
            <LuPlus />
          </IconButton>
        )}
      </HStack>
    );
  };

  return (
    <Flex direction="column" gap="8">
      {/* Font sizes */}
      <Stack>
        <HStack wrap="wrap">
          <For each={fontSizes}>
            {(fontSize, index) => (
              <Text key={index} fontSize={fontSize}>
                Text {fontSize as string}
              </Text>
            )}
          </For>
        </HStack>
      </Stack>
      {/* Buttons */}
      <Stack>
        <VStack>
          <HStack mb="4">
            <Text fontWeight="semibold" w="20">
              Primary (teal):
            </Text>
            <Button>{"primary"}</Button>
          </HStack>
          <For each={colorPalettes}>
            {(palette, index) => (
              <HStack key={index}>
                <Text fontWeight="semibold" w="20">
                  {palette as string}:
                </Text>
                <HStack colorPalette={palette}>
                  <For each={variants}>
                    {(variant, innerIndex) => (
                      <Button key={innerIndex} variant={variant}>
                        {variant as string}
                      </Button>
                    )}
                  </For>
                </HStack>
              </HStack>
            )}
          </For>
        </VStack>
        <HStack>
          <Text fontWeight="semibold">Close Button:</Text>
          <CloseButton variant="ghost" />
          <CloseButton variant="outline" />
          <CloseButton variant="subtle" />
          <CloseButton variant="solid" />
        </HStack>
        <HStack wrap="wrap" gap="8">
          <Text fontWeight="semibold">IconButton:</Text>
          <For each={["solid", "subtle", "surface", "outline", "ghost"]}>
            {(variant) => (
              <VStack key={variant}>
                <IconButton
                  aria-label="Call support"
                  key={variant}
                  variant={variant}
                >
                  <LuVoicemail />
                </IconButton>
                <Text textStyle="sm">{variant}</Text>
              </VStack>
            )}
          </For>
        </HStack>
        <Stack>
          <DownloadTrigger
            data={downloadData}
            fileName="sample.jpg"
            mimeType="image/jpeg"
            asChild
          >
            <Button variant="solid" w="fit-content">
              <LuImageDown /> Download
            </Button>
          </DownloadTrigger>
        </Stack>
      </Stack>
      {/* Box */}
      <Flex direction="column" gap="4">
        <Text fontSize="xl" fontWeight="600">
          Box
        </Text>
        <Box bg="tomato" w="100%" p="4" color="white">
          This is a box
        </Box>
        <Box
          bg="thistle"
          w="100%"
          p="4"
          color="white"
          _hover={{ bg: "green" }}
          _dark={{ bg: "blue" }}
        >
          This is a box with pseudo props
        </Box>
        <Box
          w="1/2"
          p="4"
          borderWidth="1px"
          borderColor="border.disabled"
          color="fg.disabled"
        >
          This is a disabled box
        </Box>
        <Box maxW="sm" borderWidth="1px" borderRadius="lg">
          <Image
            src={boxData.imageUrl}
            alt={boxData.imageAlt}
            borderTopRadius="lg"
          />
          <Box p="4" spaceY="2">
            <HStack>
              <Badge colorPalette="teal" variant="solid">
                Superhost
              </Badge>
              <HStack gap="1" fontWeight="medium">
                <Icon color="orange.400">
                  <HiStar />
                </Icon>
                <Text>
                  {boxData.rating} ({boxData.reviewCount})
                </Text>
              </HStack>
            </HStack>
            <Text fontWeight="medium" color="fg">
              {boxData.title}
            </Text>
            <HStack color="fg.muted">
              {boxData.formattedPrice} • {boxData.beds} beds
            </HStack>
          </Box>
        </Box>
      </Flex>
      {/* Absolute Center, Center, Square, Circle */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Absolute Center, Center, Square, Circle
        </Text>
        <HStack>
          <Box
            w={{ base: "full", md: "3/5" }}
            position="relative"
            h="100px"
            bg="bg.muted"
            borderRadius="md"
          >
            <AbsoluteCenter>
              <Box bg="bg.inverted" px="4" py="2" borderRadius="md" color="fg">
                <Text color="bg.emphasized">Absolute Center</Text>
              </Box>
            </AbsoluteCenter>
          </Box>
          <Box
            w={{ base: "full", md: "2/5" }}
            h="100px"
            bg="bg.muted"
            borderRadius="md"
          >
            <HStack>
              <Center w="40px" h="40px" bg="tomato" color="white">
                <LuPhone />
              </Center>
              <Center w="40px" h="40px" bg="tomato" color="white">
                <Box as="span" fontWeight="bold" fontSize="lg">
                  1
                </Box>
              </Center>
              <Square size="16" bg="purple.700" color="white">
                <LuPhoneForwarded />
              </Square>
              <Circle size="20" bg="blue.700" color="white">
                <LuPhoneForwarded />
              </Circle>
            </HStack>
          </Box>
        </HStack>
      </Stack>
      {/* Flex */}
      <Stack spaceY={8}>
        {/* Flex Align */}
        <Text fontSize="xl" fontWeight="600">
          Flex Align
        </Text>

        {alignments.map((align) => (
          <Flex key={align} gap={4} alignItems={align}>
            <Box bg="bg.muted" h="8" w="120px" />
            <Center bg="bg.muted" h="16" w="120px">
              {align}
            </Center>
            <Box bg="bg.muted" h="24" w="120px" />
          </Flex>
        ))}

        {/* Flex Justify */}
        <Text fontSize="xl" fontWeight="600">
          Flex Justify
        </Text>

        <Flex flexDirection="column" gap={8}>
          {justifications.map((justify) => (
            <Flex key={justify} gap={4} justifyContent={justify}>
              <Box bg="bg.muted" h="10" w="120px" />
              <Center bg="bg.muted" h="10" w="120px">
                {justify}
              </Center>
              <Box bg="bg.muted" h="10" w="120px" />
            </Flex>
          ))}
        </Flex>
      </Stack>
      {/* Float */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Float
        </Text>
        <HStack gap="14" wrap="wrap">
          {placements.map((placement, index) => (
            <Stack key={placement} gap="3">
              <p>{placement}</p>
              <Box
                position="relative"
                width="12"
                height="12"
                bg="bg.emphasized"
              >
                <Float placement={placement}>
                  <Circle size="5" bg="red" color="white">
                    {++index}
                  </Circle>
                </Float>
              </Box>
            </Stack>
          ))}
        </HStack>
      </Stack>
      {/* Grid */}
      <Stack gap="6">
        <Text fontSize="xl" fontWeight="600">
          Grid
        </Text>
        <Grid templateColumns="repeat(12, 1fr)" gap={4}>
          <GridItem colSpan={{ base: 12, md: 6 }}>
            <Center bg="tomato" h="100px">
              Sol içerik
            </Center>
          </GridItem>

          <GridItem colSpan={{ base: 12, md: 6 }}>
            <Center bg="skyblue" h="100px">
              Sağ içerik
            </Center>
          </GridItem>

          <GridItem colSpan={12}>
            <Center bg="green.200" h="100px">
              Alt içerik
            </Center>
          </GridItem>
        </Grid>
      </Stack>
      {/* Simple Grid */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Simple Grid
        </Text>
        <SimpleGrid columns={2} gap="40px">
          <Center bg="bg.muted" height="20">
            Box1
          </Center>
          <Center bg="bg.muted" height="20">
            Box2
          </Center>
          <Center bg="bg.muted" height="20">
            Box3
          </Center>
          <Center bg="bg.muted" height="20">
            Box4
          </Center>
        </SimpleGrid>
      </Stack>
      {/* Scroll Area */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Scroll Area
        </Text>
        <SimpleGrid columns={{ base: 1, md: 2 }} gap="8">
          <HStack>
            <For each={["hover", "always"]}>
              {(variant) => (
                <Stack gap="2" key={variant}>
                  <Text fontWeight="medium">{`variant="${variant}"`}</Text>
                  <ScrollArea.Root height="8rem" variant={variant}>
                    <ScrollArea.Viewport>
                      <ScrollArea.Content paddingEnd="3" textStyle="sm">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Consequatur ratione quaerat nulla autem. Rerum, deserunt
                        eius illo sed quas aperiam ad sit tempora ea voluptatum
                        nemo, expedita facere sunt. Accusantium! Laudantium
                        maxime numquam et laboriosam dolore tenetur obcaecati
                        amet aliquid veritatis excepturi sapiente vitae quae
                        beatae sit exercitationem nam praesentium nobis
                        expedita, atque explicabo. Consequatur, nostrum numquam.
                        Iste, perferendis suscipit? Sequi cumque alias nisi
                        deleniti quam perferendis doloremque ducimus facere,
                        officiis tempora, illum laborum accusantium id, autem
                        saepe repellendus. Quos veniam rerum provident officiis
                        libero minima autem, dolor porro eaque. Alias esse
                        quibusdam ratione quas quod, modi aperiam praesentium
                        quam porro consectetur sed unde soluta quo neque quae
                        delectus accusamus fugiat exercitationem, eligendi nobis
                        animi nulla nisi. Similique, enim. Consequatur!
                      </ScrollArea.Content>
                    </ScrollArea.Viewport>
                    <ScrollArea.Scrollbar />
                  </ScrollArea.Root>
                </Stack>
              )}
            </For>
          </HStack>
          <HStack>
            <ScrollArea.Root w="auto">
              <ScrollArea.Viewport>
                <ScrollArea.Content py="8">
                  <Flex gap="4" flexWrap="nowrap">
                    {Array.from({ length: 12 }, (_, i) => (
                      <Center
                        color="fg.muted"
                        rounded="sm"
                        key={i}
                        h="20"
                        w="40"
                        flexShrink="0"
                        bg="bg.muted"
                      >
                        Item {i + 1}
                      </Center>
                    ))}
                  </Flex>
                </ScrollArea.Content>
              </ScrollArea.Viewport>
              <ScrollArea.Scrollbar orientation="horizontal" />
              <ScrollArea.Corner />
            </ScrollArea.Root>
          </HStack>
        </SimpleGrid>
      </Stack>
      {/* Separator */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Separator
        </Text>
        <Text>xs</Text>
        <Separator size="xs" />
        <Text>sm</Text>
        <Separator size="sm" />
        <Text>md</Text>
        <Separator size="md" />
        <Text>lg</Text>
        <Separator size="lg" />
        <HStack>
          <Text flexShrink="0">Label (start)</Text>
          <Separator flex="1" />
        </HStack>

        <HStack>
          <Separator flex="1" />
          <Text flexShrink="0">Label (end)</Text>
        </HStack>

        <HStack>
          <Separator flex="1" />
          <Text flexShrink="0">Label (center)</Text>
          <Separator flex="1" />
        </HStack>
      </Stack>
      {/* Stack */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Stack
        </Text>
        <Stack separator={<StackSeparator />}>
          <HStack>
            <Box bg="bg.muted" h="10" w="120px" />
            <Box bg="bg.muted" h="5" w="120px">
              <Center>HStack</Center>
            </Box>
            <Box bg="bg.muted" h="20" w="120px" />
          </HStack>
          <VStack>
            <Box bg="bg.muted" h="10" w="120px" />
            <Box bg="bg.muted" h="5" w="120px">
              <Center>VStack</Center>
            </Box>
            <Box bg="bg.muted" h="20" w="120px" />
          </VStack>
        </Stack>
      </Stack>
      {/* Blockquote */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Blockquote
        </Text>
        <HStack gap="8">
          <Blockquote>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
          </Blockquote>
          <Blockquote
            colorPalette="red"
            showDash
            cite="Mustafa Kemal Atatürk"
            icon={<BlockquoteIcon />}
          >
            Türk milletinin istidadı ve kati kararı medeniyet yolunda durmadan,
            yılmadan ilerlemektir.{" "}
          </Blockquote>
        </HStack>
      </Stack>
      {/* Code */}
      <Stack gap="2" align="flex-start">
        <Text fontSize="xl" fontWeight="600">
          Code
        </Text>
        <Code variant="solid">{`console.log("Hello, world!")`}</Code>
        <Code variant="outline">{`console.log("Hello, world!")`}</Code>
        <Code variant="subtle">{`console.log("Hello, world!")`}</Code>
        <Code variant="surface">{`console.log("Hello, world!")`}</Code>
      </Stack>
      {/* Heading */}
      <Stack gap="2" align="flex-start">
        <Text fontSize="xl" fontWeight="600">
          Heading
        </Text>
        <For each={headings}>
          {(size, index) => (
            <Heading size={size} key={index}>
              Heading ({size})
            </Heading>
          )}
        </For>
      </Stack>
      {/* Highlight & Mark */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Highlight & Mark
        </Text>
        <HStack gap="4">
          <Text lineHeight="tall">
            <Highlight
              query={["spotlight", "emphasize", "accentuate"]}
              styles={{ px: "0.5", color: "yellow.500" }}
            >
              With the Highlight component, you can spotlight, emphasize and
              accentuate words.
            </Highlight>
          </Text>
          <Stack gap="6">
            <For each={["subtle", "solid", "text", "plain"]}>
              {(variant) => (
                <Text key={variant}>
                  The <Mark variant={variant}>design system</Mark> is a
                  collection of UI elements
                </Text>
              )}
            </For>
          </Stack>
          <Heading size="2xl" maxW="20ch">
            {chunks.map((chunk, index) => {
              return chunk.match ? (
                <Mark
                  key={index}
                  css={
                    index === 0
                      ? {
                          fontStyle: "inherit",
                          color: "primary.500",
                          position: "relative",
                        }
                      : {
                          fontStyle: "italic",
                          color: "red.500",
                          position: "relative",
                        }
                  }
                >
                  {chunk.text}
                  <Image
                    style={{ position: "absolute", left: 0 }}
                    src="https://uploads-ssl.webflow.com/5fac11c3554384e2baf6481c/61c4dc7572d22f05ba26fd34_hero-underline.svg"
                    loading="lazy"
                    alt=""
                  />
                </Mark>
              ) : (
                <Fragment key={index}>{chunk.text}</Fragment>
              );
            })}
          </Heading>
        </HStack>
      </Stack>
      {/* Kbd */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Kbd
        </Text>
        <HStack gap="1">
          <Kbd>ctrl</Kbd>+<Kbd>shift</Kbd>+<Kbd>del</Kbd>
        </HStack>
        <HStack gap="4">
          <Kbd>⌘</Kbd>
          <Kbd>⌥</Kbd>
          <Kbd>⇧</Kbd>
          <Kbd>⌃</Kbd>
        </HStack>
        <HStack gap="4">
          <Kbd variant="raised">Raised</Kbd>
          <Kbd variant="outline">Outline</Kbd>
          <Kbd variant="subtle">Subtle</Kbd>
          <Kbd variant="plain">Plain</Kbd>
        </HStack>
      </Stack>
      {/* Checkbox & Checkbox Card */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Checkbox & Checkbox Card
        </Text>
        <HStack wrap="wrap" mb="4">
          <For each={["outline", "subtle", "solid"]}>
            {(variant) => (
              <Stack key={variant}>
                <Text>{variant}</Text>
                <Checkbox defaultChecked variant={variant}>
                  Checkbox
                </Checkbox>
              </Stack>
            )}
          </For>
        </HStack>
        <HStack wrap="wrap" gap="8">
          <CheckboxCard h="16" label="Checkbox Card" />
          <CheckboxCard
            label="Checkbox Card"
            variant="surface"
            icon={<HiShieldCheck size="24" />}
            addon={
              <HStack>
                Some supporting text
                <Badge variant="solid">New</Badge>
              </HStack>
            }
          />
        </HStack>
      </Stack>
      {/* Color Picker */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Color Picker
        </Text>
        <Flex direction="row" wrap="wrap" gap="8">
          <ColorPickerRoot>
            <ColorPickerLabel>Basic Color Picker</ColorPickerLabel>
            <ColorPickerControl>
              <ColorPickerInput />
              <ColorPickerTrigger />
            </ColorPickerControl>
            <Portal>
              <ColorPickerContent>
                <ColorPickerArea />
                <HStack>
                  <ColorPickerSliders />
                </HStack>
              </ColorPickerContent>
            </Portal>
          </ColorPickerRoot>
          <ColorPickerRoot>
            <ColorPickerLabel>
              Color Picker + Eye Dropper + Swatches
            </ColorPickerLabel>
            <ColorPickerControl>
              <ColorPickerInput />
              <ColorPickerTrigger />
            </ColorPickerControl>
            <Portal>
              <ColorPickerContent>
                <ColorPickerArea />
                <HStack>
                  <ColorPickerEyeDropper size="sm" variant="outline" />
                  <ColorPickerSliders />
                </HStack>
                <ColorPickerSwatchGroup>
                  {swatches.map((item) => (
                    <ColorPickerSwatchTrigger key={item} value={item} />
                  ))}
                </ColorPickerSwatchGroup>
              </ColorPickerContent>
            </Portal>
          </ColorPickerRoot>
          <ColorPickerRoot>
            <ColorPickerLabel>
              Swatch Only Color: <ColorPickerValueText format="hex" />
            </ColorPickerLabel>
            <ColorPickerSwatchGroup>
              {swatches.map((item) => (
                <ColorPickerSwatchTrigger
                  py="1.5"
                  key={item}
                  value={item}
                ></ColorPickerSwatchTrigger>
              ))}
            </ColorPickerSwatchGroup>
          </ColorPickerRoot>
          <ColorPickerRoot defaultValue={parseColor("#eb5e41")} maxW="200px">
            <ColorPickerLabel>Channel Sliders</ColorPickerLabel>
            <ColorPickerControl>
              <ColorPickerTrigger />
            </ColorPickerControl>
            <Portal>
              <ColorPickerPositioner>
                <ColorPickerContent>
                  <ColorPickerFormatSelect />
                  <For each={formats}>
                    {(format, index) => (
                      <ColorPickerChannelSliders key={index} format={format} />
                    )}
                  </For>
                </ColorPickerContent>
              </ColorPickerPositioner>
            </Portal>
          </ColorPickerRoot>
        </Flex>
      </Stack>
      {/* Fields, Input, Select, Textarea, Number Input */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Fields, Input, Select, Textarea
        </Text>
        <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} gap="4">
          <Field label="Basic Input Field">
            <Input />
          </Field>
          <Field
            label="Required Input Field"
            required
            errorText="Error text"
            invalid
          >
            <Input />
          </Field>
          <Field label="Helper Text Input Field" helperText="Helper text">
            <Input />
          </Field>
          <Field label="Input Group Field" optionalText=" Optional">
            <InputGroup
              w="full"
              startElement={<MdMail size="1rem" />}
              endElement={<Md123 size="2rem" />}
            >
              <Input
                borderRadius="sm"
                fontSize="sm"
                type="text"
                placeholder="Placeholder..."
              />
            </InputGroup>
          </Field>
          <Field label="Textarea">
            <Textarea />
          </Field>
          <Field label="Native Select">
            <NativeSelectRoot>
              <NativeSelectField items={["Option 1", "Option 2", "Option 3"]} />
            </NativeSelectRoot>
          </Field>
          <Field label="Number Input">
            <NumberInputRoot w="full">
              <NumberInputField />
            </NumberInputRoot>
          </Field>
          <Field label="Number Input with Percent">
            <NumberInputRoot
              w="full"
              defaultValue="5"
              step={0.01}
              formatOptions={{
                style: "percent",
              }}
            >
              <NumberInputField />
            </NumberInputRoot>
          </Field>
          <Field label="Number Input with Currency">
            <NumberInputRoot
              w="full"
              defaultValue="45"
              formatOptions={{
                style: "currency",
                currency: "TRY",
                currencyDisplay: "narrowSymbol",
                currencySign: "standard",
              }}
            >
              <NumberInputField />
            </NumberInputRoot>
          </Field>
          <Field label="Number Input with Unit">
            <NumberInputRoot
              w="full"
              defaultValue="4"
              formatOptions={{
                style: "unit",
                unit: "kilogram",
                unitDisplay: "short",
              }}
            >
              <NumberInputField />
            </NumberInputRoot>
          </Field>
          <Stack>
            <Field label="Password Input">
              <PasswordInput />
            </Field>
            <PasswordStrengthMeter value={2} />
          </Stack>
          <Field label="Pin Input">
            <PinInput mask={false} count={6} />
          </Field>
        </SimpleGrid>
      </Stack>
      {/* File Upload */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          File Upload
        </Text>
        <HStack wrap="wrap" gap="4">
          <FileUploadRoot>
            <FileUploadLabel>Basic File Upload</FileUploadLabel>
            <FileUploadTrigger asChild>
              <Button size="sm">
                <HiUpload /> File Upload
              </Button>
            </FileUploadTrigger>
            <FileUploadList clearable />
          </FileUploadRoot>

          <FileUploadRoot maxFiles={MAX_FILES}>
            <FileUploadLabel>Multiple File Upload</FileUploadLabel>
            <FileUploadTrigger asChild>
              <Button size="sm">
                <HiUpload /> File Upload
              </Button>
            </FileUploadTrigger>
            <FileUploadList clearable showSize />
          </FileUploadRoot>

          <FileUploadRoot w="full" maxW="300px">
            <FileUploadLabel>Upload File Input</FileUploadLabel>
            <InputGroup
              startElement={<LuFileUp />}
              endElement={
                <FileUploadClearTrigger asChild>
                  <CloseButton
                    me="-1"
                    size="xs"
                    variant="plain"
                    focusVisibleRing="inside"
                    focusRingWidth="2px"
                    pointerEvents="auto"
                  />
                </FileUploadClearTrigger>
              }
            >
              <Input asChild>
                <FileUploadTrigger>
                  <FileUploadFileText />
                </FileUploadTrigger>
              </Input>
            </InputGroup>
          </FileUploadRoot>

          <FileUploadRoot maxW="xl" alignItems="stretch" maxFiles={MAX_FILES}>
            <FileUploadDropzone
              label="Drop files here"
              description={`${MAX_FILES} files allowed`}
            />
            <FileUploadList clearable />
          </FileUploadRoot>
        </HStack>
      </Stack>
      {/* Radio  Card*/}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Radio Card
        </Text>
        <HStack wrap="wrap" gap="8">
          <For each={["surface", "subtle", "outline", "solid"]}>
            {(variant) => (
              <RadioCardRoot
                w="full"
                colorPalette="teal"
                key={variant}
                variant={variant}
                defaultValue="next"
              >
                <RadioCardLabel>variant = ({variant})</RadioCardLabel>
                <HStack align="stretch">
                  {radioCardItems.map((item) => (
                    <RadioCardItem
                      key={item.value}
                      value={item.value}
                      label={item.title}
                    />
                  ))}
                </HStack>
              </RadioCardRoot>
            )}
          </For>
        </HStack>
        <RadioCardRoot defaultValue="next">
          <RadioCardLabel>Select framework</RadioCardLabel>
          <HStack align="stretch">
            {radioCardItems2.map((item) => (
              <RadioCardItem
                key={item.value}
                value={item.value}
                label={item.title}
                description={item.description}
                addon={"Some addon text"}
                icon={<FaReact size="1rem" />}
              />
            ))}
          </HStack>
        </RadioCardRoot>
      </Stack>
      {/* Radio */}
      <Stack gap="4">
        <Text fontSize="xl" fontWeight="600">
          Radio
        </Text>
        <HStack wrap="wrap" gap="8">
          <For each={["solid", "outline", "subtle"]}>
            {(variant) => (
              <RadioGroup
                key={variant}
                variant={variant}
                defaultValue="react"
                colorPalette="teal"
              >
                <HStack>
                  <Radio value={"react"}>React</Radio>
                  <Radio value={"vue"}>Vue</Radio>
                </HStack>
              </RadioGroup>
            )}
          </For>
        </HStack>
      </Stack>
      {/* Rating */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Rating
        </Text>
        <Flex gap="8" direction={{ base: "column", md: "row" }}>
          <Flex wrap="wrap" gap="4">
            <For each={["xs", "sm", "md", "lg"]}>
              {(size) => (
                <Stack key={size} gap="2">
                  <Text>{size}</Text>
                  <Rating defaultValue={3} size={size} />
                </Stack>
              )}
            </For>
            <Rating
              gap="4"
              label="ReadOnly Rating"
              colorPalette="pink"
              defaultValue={4}
              readOnly
            />
            <Rating
              gap="4"
              label="Allow Half Rating"
              colorPalette="orange"
              defaultValue={3.5}
              allowHalf
            />
            <Rating
              gap="4"
              label="Custom Rating"
              colorPalette="red"
              defaultValue={3}
              icon={<IoHeart size="1rem" />}
            />
          </Flex>
        </Flex>
      </Stack>
      {/* Segemented Control */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Segemented Control
        </Text>
        <HStack wrap="wrap" gap="8">
          <Stack>
            <Text>Horizontal:</Text>
            <SegmentedControl
              items={["react", "vue", "angular"]}
              defaultValue="react"
            />
          </Stack>
          <HStack>
            <Text>Vertical:</Text>
            <SegmentedControl
              orientation="vertical"
              items={["react", "vue", "angular"]}
              defaultValue="react"
            />
          </HStack>
        </HStack>
      </Stack>
      {/* Switch */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Switch
        </Text>
        <HStack wrap="wrap" gap="8">
          <For each={["solid", "raised"]}>
            {(variant) => (
              <Switch key={variant} variant={variant}>
                {variant}
              </Switch>
            )}
          </For>
          <Switch invalid>Invalid Switch</Switch>
          <Switch thumbLabel={{ on: <HiCheck />, off: <HiX /> }}>
            Thumb Label Switch
          </Switch>
          <Switch
            colorPalette="blue"
            size="lg"
            trackLabel={{
              on: <Icon as={FaSun} color="yellow.400" />,
              off: <Icon as={FaMoon} color="gray.400" />,
            }}
          >
            Track Label Switch
          </Switch>
        </HStack>
      </Stack>
      {/* Slider */}
      <Stack gap="4">
        <Text fontSize="xl" fontWeight="600">
          Sliders
        </Text>
        <Grid templateColumns="repeat(2, 1fr)" gap="4">
          <GridItem>
            <Stack w="full">
              <For each={["solid", "outline"]}>
                {(variant) => (
                  <Slider
                    colorPalette="blue"
                    label={`Slider - ${variant}`}
                    defaultValue={[75]}
                    variant={variant}
                    key={variant}
                  />
                )}
              </For>
              <For each={["sm", "md", "lg"]}>
                {(size) => (
                  <Slider
                    label={`Slider - ${size}`}
                    defaultValue={[40]}
                    size={size}
                    key={size}
                  />
                )}
              </For>
            </Stack>
          </GridItem>
          <GridItem>
            <Stack w="full">
              <Slider label="Range Slider" defaultValue={[20, 80]} />
              <Slider
                label="Prevent Overlap"
                defaultValue={[20, 80]}
                minStepsBetweenThumbs={10}
              />
              <Slider label="Value Text" defaultValue={[30]} showValue />
              <Slider label="Slider With Steps" defaultValue={[30]} step={10} />
              <Slider
                colorPalette="orange"
                label="Custom Slider With Marks"
                defaultValue={[30]}
                marks={marks}
                thumb={<Box color="orange.600" as={MdGraphicEq} />}
              />
            </Stack>
          </GridItem>
        </Grid>
      </Stack>
      {/* Combobox */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Combobox
        </Text>
        <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} gap="4">
          <ComboboxRoot
            collection={frameworkCollection}
            onInputValueChange={(e) => frameworkFilter(e.inputValue)}
          >
            <ComboboxLabel>Simple Combobox</ComboboxLabel>
            <ComboboxControl clearable>
              <ComboboxInput placeholder="Select framework" />
            </ComboboxControl>
            <ComboboxContent>
              <ComboboxEmpty>No items found</ComboboxEmpty>
              {frameworkCollection.items.map((item) => (
                <ComboboxItem key={item.value} item={item}>
                  {item.label}
                </ComboboxItem>
              ))}
            </ComboboxContent>
          </ComboboxRoot>

          <ComboboxRoot
            multiple
            value={selectedSkills}
            onValueChange={(e) => setSelectedSkills(e.value)}
            collection={frameworkCollection}
            onInputValueChange={(e) => frameworkFilter(e.inputValue)}
          >
            <Wrap gap="2">
              {selectedSkills.map((skill) => (
                <Badge key={skill}>{skill}</Badge>
              ))}
            </Wrap>
            <ComboboxLabel>Multiple Combobox</ComboboxLabel>
            <ComboboxControl clearable>
              <ComboboxInput placeholder="Select frameworks" />
            </ComboboxControl>
            <ComboboxContent>
              <ComboboxEmpty>No items found</ComboboxEmpty>
              {frameworkCollection.items.map((item) => (
                <ComboboxItem key={item.value} item={item}>
                  {item.label}
                </ComboboxItem>
              ))}
            </ComboboxContent>
          </ComboboxRoot>

          <ComboboxRoot
            openOnClick
            collection={countryCollection}
            onInputValueChange={(e) => countryFilter(e.inputValue)}
          >
            <ComboboxLabel>Large Data Combobox</ComboboxLabel>
            <ComboboxControl clearable>
              <ComboboxInput placeholder="Select country" />
            </ComboboxControl>
            <ComboboxContent ref={contentRef}>
              <ComboboxEmpty>No items found</ComboboxEmpty>
              {countryCollection.items.map((item) => (
                <ComboboxItem key={item.value} item={item}>
                  {item.label}
                </ComboboxItem>
              ))}
            </ComboboxContent>
          </ComboboxRoot>

          <Field label="Field Combobox" helperText="Select frameworks" invalid>
            <ComboboxRoot
              collection={frameworkCollection}
              onInputValueChange={(e) => frameworkFilter(e.inputValue)}
            >
              <ComboboxControl clearable>
                <ComboboxInput placeholder="Select framework" />
              </ComboboxControl>
              <ComboboxContent>
                <ComboboxEmpty>No items found</ComboboxEmpty>
                {frameworkCollection.items.map((item) => (
                  <ComboboxItem key={item.value} item={item}>
                    {item.label}
                  </ComboboxItem>
                ))}
              </ComboboxContent>
            </ComboboxRoot>
          </Field>
        </SimpleGrid>
      </Stack>
      {/* Listbox */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Listbox
        </Text>
        <Grid templateColumns={{ base: "1fr", md: "repeat(4, 1fr)" }} gap="4">
          <GridItem>
            <Stack>
              <ListboxRoot
                maxHeight="xs"
                selectionMode="single"
                collection={listboxCollection}
              >
                <ListboxLabel>Select framework</ListboxLabel>
                <ListboxContent>
                  {listboxCollection.items.map((framework) => (
                    <ListboxItem key={framework.value} item={framework}>
                      <ListboxItemText>{framework.label}</ListboxItemText>
                    </ListboxItem>
                  ))}
                </ListboxContent>
              </ListboxRoot>
            </Stack>
          </GridItem>
          <GridItem>
            <Stack>
              <ListboxRoot
                maxHeight="xs"
                selectionMode="multiple"
                collection={listboxCollection}
              >
                <ListboxLabel>Select framework (with checkmarks)</ListboxLabel>
                <ListboxContent>
                  {listboxCollection.items.map((framework) => (
                    <ListboxItem key={framework.value} item={framework}>
                      <ListboxItemCheckmark />
                      <ListboxItemText>{framework.label}</ListboxItemText>
                    </ListboxItem>
                  ))}
                </ListboxContent>
              </ListboxRoot>
            </Stack>
          </GridItem>
          <GridItem colSpan={{ base: 1, md: 2, lg: 2 }}>
            <Flex gap="6">
              <ListboxRoot
                maxW="2xs"
                collection={imagesCollection}
                value={[selectedImage]}
                onValueChange={handleSelectionChange}
                variant="solid"
              >
                <ListboxContent border="0">
                  {imagesCollection.items.map((image) => (
                    <ListboxItem key={image.value} item={image}>
                      <ListboxItemText>{image.label}</ListboxItemText>
                    </ListboxItem>
                  ))}
                </ListboxContent>
              </ListboxRoot>

              <Box flex="1">
                {currentImage && (
                  <Box>
                    <Text fontSize="lg" fontWeight="semibold" mb="3">
                      {currentImage.label}
                    </Text>
                    <Image
                      src={currentImage.url}
                      alt={currentImage.label}
                      borderRadius="md"
                      maxH="400px"
                      width="full"
                      objectFit="cover"
                    />
                    <Text fontSize="sm" color="fg.muted" mt="2">
                      {currentImage.description}
                    </Text>
                  </Box>
                )}
              </Box>
            </Flex>
          </GridItem>
        </Grid>
      </Stack>
      {/* TreeView */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          TreeView
        </Text>
        <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap="4">
          <TreeViewRoot collection={nodeCollection}>
            <TreeViewLabel>Simple TreeView</TreeViewLabel>
            <TreeViewTree>
              <TreeViewNode
                render={({ node, nodeState }) =>
                  nodeState.isBranch ? (
                    <TreeViewBranchControl>
                      {nodeState.expanded ? (
                        <LuSquareMinus />
                      ) : (
                        <LuSquarePlus />
                      )}
                      <TreeViewBranchText>{node.name}</TreeViewBranchText>
                    </TreeViewBranchControl>
                  ) : (
                    <TreeViewItem>{node.name}</TreeViewItem>
                  )
                }
              />
            </TreeViewTree>
          </TreeViewRoot>

          <TreeViewRoot collection={nodeCollection} animateContent>
            <TreeViewLabel>Remove Indentation + Animation</TreeViewLabel>
            <TreeViewTree css={{ "--tree-indentation": "0px" }}>
              <TreeViewNode
                render={({ node, nodeState }) =>
                  nodeState.isBranch ? (
                    <TreeViewBranchControl>
                      <LuFolder />
                      <TreeViewBranchText>{node.name}</TreeViewBranchText>
                    </TreeViewBranchControl>
                  ) : (
                    <TreeViewItem>
                      <LuFile />
                      <TreeViewItemText>{node.name}</TreeViewItemText>
                    </TreeViewItem>
                  )
                }
              />
            </TreeViewTree>
          </TreeViewRoot>

          <TreeViewRoot collection={collection} animateContent>
            <TreeViewLabel>Tree Mutation</TreeViewLabel>
            <TreeViewTree>
              <TreeViewNode
                indentGuide={<TreeViewBranchIndentGuide />}
                render={({ node, nodeState, indexPath }) =>
                  nodeState.isBranch ? (
                    <TreeViewBranchControl role="">
                      <LuFolder />
                      <TreeViewBranchText>{node.name}</TreeViewBranchText>
                      <TreeNodeActions
                        node={node}
                        indexPath={indexPath}
                        onRemove={removeNode}
                        onAdd={addNode}
                      />
                    </TreeViewBranchControl>
                  ) : (
                    <TreeViewItem>
                      <LuFile />
                      <TreeViewItemText>{node.name}</TreeViewItemText>
                      <TreeNodeActions
                        node={node}
                        indexPath={indexPath}
                        onRemove={removeNode}
                        onAdd={addNode}
                      />
                    </TreeViewItem>
                  )
                }
              />
            </TreeViewTree>
          </TreeViewRoot>
        </SimpleGrid>
      </Stack>
      {/* Action Bar */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Action Bar
        </Text>
        <HStack>
          <Checkbox
            checked={checked}
            onCheckedChange={(e) => setChecked(!!e.checked)}
          >
            Show action bar
          </Checkbox>
          <ActionBarRoot open={checked}>
            <ActionBarContent>
              <ActionBarSelectionTrigger>2 selected</ActionBarSelectionTrigger>
              <ActionBarSeparator />
              <Button variant="outline" size="sm">
                <LuTrash2 />
                Delete
              </Button>
              <Button variant="outline" size="sm">
                <LuShare />
                Share
              </Button>
              <Button
                onClick={() => setChecked(false)}
                colorPalette="red"
                variant="outline"
                size="sm"
              >
                Cancel
              </Button>
            </ActionBarContent>
          </ActionBarRoot>
        </HStack>
      </Stack>
      {/* Dialog */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Dialog
        </Text>
        <HStack wrap="wrap">
          <For each={["xs", "sm", "md", "lg", "xl", "cover", "full"]}>
            {(size) => (
              <DialogRoot key={size} size={size}>
                <DialogTrigger asChild>
                  <Button variant="outline" size="md">
                    Open ({size})
                  </Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Dialog Title</DialogTitle>
                  </DialogHeader>
                  <DialogBody>
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      Sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua.
                    </p>
                  </DialogBody>
                  <DialogFooter>
                    <DialogActionTrigger asChild>
                      <Button variant="outline">Cancel</Button>
                    </DialogActionTrigger>
                    <Button>Save</Button>
                  </DialogFooter>
                  <DialogCloseTrigger />
                </DialogContent>
              </DialogRoot>
            )}
          </For>
        </HStack>
      </Stack>
      {/* Drawer */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Drawer
        </Text>
        <HStack wrap="wrap">
          <For each={["xs", "sm", "md", "lg", "xl", "full"]}>
            {(size) => (
              <DrawerRoot key={size} size={size}>
                <DrawerTrigger asChild>
                  <Button variant="outline" size="sm">
                    Open ({size})
                  </Button>
                </DrawerTrigger>
                <DrawerContent>
                  <DrawerHeader>
                    <DrawerTitle>Drawer Title</DrawerTitle>
                  </DrawerHeader>
                  <DrawerBody>
                    Press the <Kbd>esc</Kbd> key to close the Drawer
                  </DrawerBody>
                  <DrawerFooter>
                    <DrawerActionTrigger asChild>
                      <Button variant="outline">Cancel</Button>
                    </DrawerActionTrigger>
                    <Button>Save</Button>
                  </DrawerFooter>
                  <DrawerCloseTrigger />
                </DrawerContent>
              </DrawerRoot>
            )}
          </For>
        </HStack>
      </Stack>
      {/* Hover Cards */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Hover Cards
        </Text>
        <HStack>
          <HoverCardRoot size="sm">
            <HoverCardTrigger asChild>
              <Button>Hover me</Button>
            </HoverCardTrigger>

            <HoverCardContent>
              <HoverCardArrow />
              <Box>
                <Strong>Chakra</Strong> is a Sanskrit word that means disk or
                wheel, referring to energy centers in the body
              </Box>
            </HoverCardContent>
          </HoverCardRoot>
        </HStack>
      </Stack>
      {/* Menu */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Menu
        </Text>
        <Flex gap="4" wrap="wrap">
          <MenuRoot>
            <MenuTrigger asChild>
              <Button variant="outline">Menu</Button>
            </MenuTrigger>
            <MenuContent>
              <MenuItem value="Item 1">Item 1</MenuItem>
              <MenuItem value="Item 2">Item 2</MenuItem>
              <MenuItem value="Item 3">Item 3</MenuItem>
            </MenuContent>
          </MenuRoot>
          <MenuRoot>
            <MenuTrigger asChild>
              <Button variant="outline">Commands</Button>
            </MenuTrigger>
            <MenuContent>
              <MenuItem value="copy">
                <MenuItemText>Copy</MenuItemText>
                <MenuItemCommand>⌘K</MenuItemCommand>
              </MenuItem>
              <MenuItem value="paste">
                <MenuItemText>Paste</MenuItemText>
                <MenuItemCommand>⌘L</MenuItemCommand>
              </MenuItem>
              <MenuItem value="cut">
                <MenuItemText>Cut</MenuItemText>
                <MenuItemCommand>⌘M</MenuItemCommand>
              </MenuItem>
            </MenuContent>
          </MenuRoot>

          <MenuRoot>
            <MenuTrigger asChild>
              <Button variant="outline" size="sm">
                Submenu
              </Button>
            </MenuTrigger>
            <MenuContent>
              <MenuItem value="new-txt">New Text File</MenuItem>
              <MenuItem value="new-file">New File...</MenuItem>
              <MenuRoot positioning={{ placement: "right-start", gutter: 2 }}>
                <MenuTriggerItem value="open-recent">
                  Open Recent
                </MenuTriggerItem>
                <MenuContent>
                  <MenuItem value="panda">Panda</MenuItem>
                  <MenuItem value="ark">Ark UI</MenuItem>
                  <MenuItem value="chakra">Chakra v3</MenuItem>
                </MenuContent>
              </MenuRoot>
              <MenuItem value="open-file">Open File...</MenuItem>
              <MenuItem value="export">Export</MenuItem>
            </MenuContent>
          </MenuRoot>

          <MenuRoot>
            <MenuTrigger asChild>
              <Button variant="outline" size="sm">
                <HiSortAscending /> Sort
              </Button>
            </MenuTrigger>

            <MenuContent minW="10rem">
              <MenuRadioItemGroup
                value={radioItemValue}
                onValueChange={(e) => setRadioItemValue(e.value)}
              >
                {radioItems.map((item) => (
                  <MenuRadioItem key={item.value} value={item.value}>
                    {item.label}
                  </MenuRadioItem>
                ))}
              </MenuRadioItemGroup>
            </MenuContent>
          </MenuRoot>
        </Flex>
      </Stack>
      {/* Popover */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Popover
        </Text>
        <HStack wrap="wrap" gap="4">
          <For each={["xs", "sm", "md", "lg"]}>
            {(size) => (
              <PopoverRoot key={size} size={size}>
                <PopoverTrigger asChild>
                  <Button variant="outline">Popover ({size})</Button>
                </PopoverTrigger>
                <PopoverContent>
                  <PopoverHeader>Popover Header</PopoverHeader>
                  <PopoverBody>
                    <PopoverTitle fontWeight="medium">
                      Popover Title
                    </PopoverTitle>
                    <Text my="4">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </Text>
                  </PopoverBody>
                  <PopoverFooter>Popover Footer</PopoverFooter>
                </PopoverContent>
              </PopoverRoot>
            )}
          </For>
        </HStack>
      </Stack>
      {/* Toggle Tip */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Toggle Tip
        </Text>
        <HStack>
          <Text textStyle="lg">
            File size: <FormatByte value={1450.45} />
          </Text>
          <InfoTip content="The file size for content.tsx is 1.45kb" />
        </HStack>
      </Stack>
      {/* Tooltip */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Tooltip
        </Text>
        <HStack>
          <Tooltip showArrow content="This is the tooltip content">
            <Button variant="outline" size="sm">
              Hover me
            </Button>
          </Tooltip>
          <Tooltip
            content="This is the tooltip content"
            positioning={{ placement: "right-end" }}
          >
            <Button variant="surface" size="sm">
              Right End
            </Button>
          </Tooltip>
          <Tooltip
            showArrow
            content="This is the tooltip content"
            contentProps={{ css: { "--tooltip-bg": "green" } }}
          >
            <Button variant="outline" size="sm">
              <FaBell /> 3
            </Button>
          </Tooltip>
        </HStack>
      </Stack>
      {/* Alert */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Alert
        </Text>
        <HStack wrap="wrap">
          <For each={alertStatuses}>
            {(status) => (
              <Alert status={status} title={`Alert (${status})`} key={status} />
            )}
          </For>
          <Alert
            colorPalette="purple"
            variant="outline"
            icon={<LuPercent />}
            title="Black Friday Sale (20% off)"
            endElement={
              <Text alignSelf="center" fontWeight="medium" cursor="pointer">
                Upgrade
              </Text>
            }
          >
            Upgrade your plan to get access to the sale
          </Alert>
        </HStack>
      </Stack>
      {/* Empty State */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Empty State
        </Text>
        <HStack wrap="wrap" gap="4">
          <EmptyState
            title="No results found"
            description="No results found for your search"
            icon={<FaSearch />}
          />
          <EmptyState
            title="Your cart is empty"
            description="Add some items to it before checking out"
            icon={<FaCartShopping />}
          />
          <EmptyState
            title="Start adding tokens"
            description="Add a new design token to get started"
            icon={<HiColorSwatch />}
          >
            <ButtonGroup>
              <Button>Create token</Button>
              <Button variant="outline">Import</Button>
            </ButtonGroup>
          </EmptyState>
        </HStack>
      </Stack>
      {/* Progress Circle */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Progress Circle
        </Text>
        <HStack wrap="wrap" gap="8">
          <For each={["xs", "sm", "md", "lg", "xl"]}>
            {(size, index) => (
              <HStack key={size}>
                <Text>{size}</Text>
                <ProgressCircleRoot size={size} value={++index * 15}>
                  <ProgressCircleRing />
                </ProgressCircleRoot>
              </HStack>
            )}
          </For>
          <ProgressCircleRoot size="xl" value={90}>
            <ProgressCircleRing />
            <ProgressCircleValueText>90%</ProgressCircleValueText>
          </ProgressCircleRoot>
          <ProgressCircleRoot size="lg" value={null}>
            <ProgressCircleRing color="red.500" trackColor="yellow.200" />
          </ProgressCircleRoot>
        </HStack>
      </Stack>
      {/* Progress */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Progress
        </Text>
        <HStack wrap="wrap" gap="8">
          <For each={["xs", "sm", "md", "lg", "xl"]}>
            {(size, index) => (
              <ProgressRoot key={size} size={size} value={++index * 15}>
                <ProgressLabel>Progress ({size})</ProgressLabel>
                <ProgressBar />
              </ProgressRoot>
            )}
          </For>
          <ProgressRoot size="xl" value={90}>
            <ProgressLabel info="Info Text">Progress Info</ProgressLabel>
            <ProgressBar />
          </ProgressRoot>
          <ProgressRoot size="xl" value={null}>
            <ProgressLabel>Progress Indeterminate</ProgressLabel>
            <ProgressBar />
          </ProgressRoot>
          <ProgressRoot size="xl" value={40} striped animated shape="full">
            <ProgressLabel>Animated Striped</ProgressLabel>
            <ProgressBar />
            <ProgressValueText>40%</ProgressValueText>
          </ProgressRoot>
        </HStack>
      </Stack>
      {/* Skeleton */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Skeleton
        </Text>
        <HStack wrap="wrap" gap="8">
          <HStack w="full">
            <SkeletonCircle size="12" />
            <Stack flex="1">
              <SkeletonText noOfLines={3} gap="4" />
            </Stack>
          </HStack>
          <VStack w="60" align="flex-start" gap="4">
            <SkeletonText w="full" noOfLines={1} loading={loading}>
              <Text w="full">Chakra UI is cool</Text>
            </SkeletonText>
            <Button size="sm" onClick={() => setLoading((c) => !c)}>
              Toggle
            </Button>
          </VStack>
          <SkeletonText
            variant="shine"
            width="full"
            noOfLines={1}
            height="5"
            css={{
              "--start-color": "colors.red.500",
              "--end-color": "colors.yellow.500",
            }}
          />
        </HStack>
      </Stack>
      {/* Spinner */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Spinner
        </Text>
        <HStack wrap="wrap" gap="8">
          <HStack gap="5">
            <For each={["xs", "sm", "md", "lg", "xl"]}>
              {(size) => <Spinner size={size} key={size} />}
            </For>
            <Spinner borderWidth="4px" size="xl" />
            <VStack colorPalette="teal">
              <Spinner color="colorPalette.600" />
              <Text color="colorPalette.600">Loading...</Text>
            </VStack>
          </HStack>
        </HStack>
      </Stack>
      {/* Status */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Status
        </Text>
        <HStack wrap="wrap" gap="8">
          <For each={["success", "error", "warning", "info"]}>
            {(value) => (
              <Status value={value} key={value}>
                {value}
              </Status>
            )}
          </For>
        </HStack>
      </Stack>
      {/* Toast */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Toast
        </Text>
        <HStack wrap="wrap" gap="4">
          <For each={["success", "error", "warning", "info"]}>
            {(type) => (
              <Button
                size="sm"
                variant="outline"
                key={type}
                onClick={() =>
                  toaster.create({
                    title: `Toast status is ${type}`,
                    type: type,
                  })
                }
              >
                {type}
              </Button>
            )}
          </For>
          <Button variant="subtle" size="sm" onClick={() => toaster.dismiss()}>
            Close Toasts
          </Button>
          <Button
            variant="surface"
            size="sm"
            onClick={() =>
              toaster.success({
                title: "Update successful",
                description: "File saved successfully to the server",
                action: {
                  label: "Undo",
                  onClick: () => console.log("Undo"),
                },
              })
            }
          >
            With Action
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              const promise = new Promise<void>((resolve) => {
                setTimeout(() => resolve(), 5000);
              });

              toaster.promise(promise, {
                success: {
                  title: "Successfully uploaded!",
                  description: "Looks great",
                },
                error: {
                  title: "Upload failed",
                  description: "Something wrong with the upload",
                },
                loading: { title: "Uploading...", description: "Please wait" },
              });
            }}
          >
            Promise
          </Button>
        </HStack>
      </Stack>
      {/* Avatar */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Avatar
        </Text>
        <HStack wrap="wrap" gap="4">
          <For each={["xs", "sm", "md", "lg", "xl", "2xl"]}>
            {(size, index) => (
              <Avatar
                size={size}
                key={index}
                src={`https://picsum.photos/id/1/200/300`}
              />
            )}
          </For>
          <For each={["solid", "outline", "subtle"]}>
            {(variant) => <Avatar key={variant} variant={variant} name="FCS" />}
          </For>
          <Avatar shape="square" name="FCS" />
          <Avatar shape="rounded" name="FCS" />
          <Avatar
            src="https://picsum.photos/id/23/200/300"
            css={{
              outlineWidth: "2px",
              outlineColor: "red.500",
              outlineOffset: "2px",
              outlineStyle: "solid",
            }}
          />
          <AvatarGroup size="md" colorPalette="gray">
            <For each={[10, 25, 50]}>
              {(value, index) => (
                <Avatar
                  key={index}
                  src={`https://picsum.photos/id/${value}/200/300`}
                />
              )}
            </For>
            <Avatar fallback={"+3"} />
          </AvatarGroup>
          <Avatar src="https://picsum.photos/id/2/200/300">
            <Float placement="bottom-end" offsetX="1" offsetY="1">
              <Circle
                bg="green.500"
                size="8px"
                outline="0.2em solid"
                outlineColor="bg"
              />
            </Float>
          </Avatar>
        </HStack>
      </Stack>
      {/* Badge */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Badge
        </Text>
        <HStack wrap="wrap" gap="4">
          <For each={["xs", "sm", "md", "lg"]}>
            {(size) => (
              <Badge colorPalette="gray" size={size} key={size}>
                {size}
              </Badge>
            )}
          </For>
          <For each={["outline", "solid", "subtle", "surface"]}>
            {(variant) => (
              <Badge key={variant} variant={variant}>
                {variant}
              </Badge>
            )}
          </For>
        </HStack>
      </Stack>
      {/* Card */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Card
        </Text>
        <HStack wrap="wrap" gap="4">
          <Card.Root maxW="sm">
            <Card.Header>
              <Card.Title>Sign up</Card.Title>
              <Card.Description>
                Fill in the form below to create an account
              </Card.Description>
            </Card.Header>
            <Card.Body>
              <Stack gap="4" w="full">
                <Field label="First Name">
                  <Input />
                </Field>
                <Field label="Last Name">
                  <Input />
                </Field>
              </Stack>
            </Card.Body>
            <Card.Footer justifyContent="flex-end">
              <Button variant="outline">Cancel</Button>
              <Button variant="solid">Sign in</Button>
            </Card.Footer>
          </Card.Root>
          <Card.Root width="320px">
            <Card.Body>
              <HStack mb="6" gap="3">
                <Avatar src="https://images.unsplash.com/photo-1511806754518-53bada35f930" />
                <Stack gap="0">
                  <Text fontWeight="semibold" textStyle="sm">
                    Nate Foss
                  </Text>
                  <Text color="fg.muted" textStyle="sm">
                    @natefoss
                  </Text>
                </Stack>
              </HStack>
              <Card.Description>
                <Strong color="fg">Nate Foss </Strong>
                has requested to join your team. You can approve or decline
                their request.
              </Card.Description>
            </Card.Body>
            <Card.Footer>
              <Button variant="subtle" colorPalette="red" flex="1">
                <LuX />
                Decline
              </Button>
              <Button variant="subtle" colorPalette="blue" flex="1">
                <LuCheck />
                Approve
              </Button>
            </Card.Footer>
          </Card.Root>
          <Card.Root flexDirection="row" overflow="hidden" maxW="xl">
            <Image
              objectFit="cover"
              maxW="200px"
              src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
              alt="Caffe Latte"
            />
            <Box>
              <Card.Body>
                <Card.Title mb="2">The perfect latte</Card.Title>
                <Card.Description>
                  Caffè latte is a coffee beverage of Italian origin made with
                  espresso and steamed milk.
                </Card.Description>
                <HStack mt="4">
                  <Badge>Hot</Badge>
                  <Badge>Caffeine</Badge>
                </HStack>
              </Card.Body>
              <Card.Footer>
                <Button>Buy Latte</Button>
              </Card.Footer>
            </Box>
          </Card.Root>
        </HStack>
      </Stack>
      {/* Clipboard */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Clipboard
        </Text>
        <HStack wrap="wrap" gap="4">
          <ClipboardRoot value="https://chakra-ui.com" timeout={1000}>
            <ClipboardIconButton variant="outline" />
          </ClipboardRoot>
          <ClipboardRoot value="https://chakra-ui.com">
            <ClipboardButton />
          </ClipboardRoot>
          <ClipboardRoot value="https://chakra-ui.com">
            <InputGroup endElement={<ClipboardIconButton />}>
              <ClipboardInput placeholder="https://chakra-ui.com" />
            </InputGroup>
          </ClipboardRoot>
        </HStack>
      </Stack>
      {/* Data List */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Data List
        </Text>
        <HStack wrap="wrap" gap="8">
          <DataListRoot>
            <DataListItem label="Name" value="John Doe" />
            <DataListItem label="Email" value="john.doe@example.com" />
            <DataListItem label="Phone" value="123-456-7890" />
          </DataListRoot>
          <DataListRoot orientation="horizontal">
            <DataListItem label="Name" value="John Doe" />
            <DataListItem label="Email" value="john.doe@example.com" />
            <DataListItem label="Phone" value="123-456-7890" />
          </DataListRoot>
          <DataListRoot orientation="horizontal" divideY="1px">
            <For each={stats}>
              {(stat) => (
                <DataListItem
                  key={stat.label}
                  label={stat.label}
                  value={stat.value}
                  info={stat.helpText}
                />
              )}
            </For>
          </DataListRoot>
        </HStack>
      </Stack>
      {/* Icon */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Icon
        </Text>
        <HStack wrap="wrap" gap="8">
          <Icon size="xl" color="green.500">
            <Md3dRotation />
          </Icon>
          <Icon size="lg">
            <svg viewBox="0 0 32 32">
              <g fill="currentColor">
                <path d="M16,11.5a3,3,0,1,0-3-3A3,3,0,0,0,16,11.5Z" />
                <path d="M16.868.044A8.579,8.579,0,0,0,16,0a15.99,15.99,0,0,0-.868,31.956A8.579,8.579,0,0,0,16,32,15.99,15.99,0,0,0,16.868.044ZM16,26.5a3,3,0,1,1,3-3A3,3,0,0,1,16,26.5ZM16,15A8.483,8.483,0,0,0,8.788,27.977,13.986,13.986,0,0,1,16,2a6.5,6.5,0,0,1,0,13Z" />
              </g>
            </svg>
          </Icon>
        </HStack>
      </Stack>
      {/* Qr Code */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Qr Code
        </Text>
        <HStack wrap="wrap" gap="8">
          <QrCode value="https://chakra-ui.com" />
          <QrCode value="https://chakra-ui.com" fill="#3917D7" />
          <QrCode
            value="https://chakra-ui.com"
            overlay={
              <Icon size="xl" color="green.500">
                <GiSnake />
              </Icon>
            }
          />
          <HStack wrap="wrap" gap="4">
            <Stack>
              <QrCode
                value="https://www.google.com"
                size="sm"
                encoding={{ ecc: errorLevel }}
              />
              <SegmentedControl
                size="sm"
                items={["L", "M", "Q", "H"]}
                value={errorLevel}
                onValueChange={(e) => setErrorLevel(e.value as ErrorLevel)}
              />
            </Stack>
            <DataListRoot gap="0" orientation="horizontal">
              <DataListItem
                label="L:"
                value="Allows recovery of up to 7% data loss (default)"
              />
              <DataListItem
                label="M:"
                value="Allows recovery of up to 15% data loss"
              />
              <DataListItem
                label="Q:"
                value="Allows recovery of up to 25% data loss"
              />
              <DataListItem
                label="H:"
                value="Allows recovery of up to 30% data loss"
              />
            </DataListRoot>
          </HStack>
        </HStack>
      </Stack>
      {/* Stat */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Stat
        </Text>
        <HStack wrap="wrap" gap="8">
          <StatRoot>
            <StatLabel>Active Users</StatLabel>
            <HStack>
              <StatValueText>2,200</StatValueText>
            </HStack>
            <StatHelpText>20% more than last month</StatHelpText>
          </StatRoot>
          <StatRoot>
            <StatLabel>Revenue</StatLabel>
            <HStack>
              <StatValueText
                value={934.4}
                formatOptions={{
                  style: "currency",
                  currency: "USD",
                  minimumFractionDigits: 2,
                }}
              />
            </HStack>
          </StatRoot>
          <StatRoot>
            <StatLabel>Unique Visitors</StatLabel>
            <HStack>
              <StatValueText>192.1k</StatValueText>
            </HStack>
            <StatDownTrend variant="plain">18%</StatDownTrend>
          </StatRoot>
          <StatRoot>
            <StatLabel info="since last month">Unique Visitors</StatLabel>
            <HStack>
              <StatValueText>192.1k</StatValueText>
              <StatUpTrend>12%</StatUpTrend>
            </HStack>
          </StatRoot>
        </HStack>
      </Stack>
      {/* Table */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Table
        </Text>
        <HStack wrap="wrap" gap="4">
          <Stack w="full">
            <Table.Root size="sm" variant="outline" striped>
              <Table.Header>
                <Table.Row>
                  <Table.ColumnHeader>Product</Table.ColumnHeader>
                  <Table.ColumnHeader>Category</Table.ColumnHeader>
                  <Table.ColumnHeader textAlign="end">Price</Table.ColumnHeader>
                </Table.Row>
              </Table.Header>
              <Table.Body>
                {items.map((item) => (
                  <Table.Row key={item.id}>
                    <Table.Cell>{item.name}</Table.Cell>
                    <Table.Cell>{item.category}</Table.Cell>
                    <Table.Cell textAlign="end">{item.price}</Table.Cell>
                  </Table.Row>
                ))}
              </Table.Body>
            </Table.Root>

            <Center>
              <PaginationRoot
                count={items.length * 5}
                pageSize={items.length * 5}
                page={1}
              >
                <ButtonGroup variant="ghost" size="sm" wrap="wrap">
                  <PaginationPrevTrigger />
                  <PaginationItems />
                  <PaginationNextTrigger />
                </ButtonGroup>
              </PaginationRoot>
            </Center>
          </Stack>
          <Stack w="full">
            <Table.Root>
              <Table.Header>
                <Table.Row>
                  <Table.ColumnHeader w="6">
                    <Checkbox
                      size="sm"
                      top="0.5"
                      aria-label="Select all rows"
                      checked={
                        indeterminate ? "indeterminate" : selection.length > 0
                      }
                      onCheckedChange={(changes) => {
                        setSelection(
                          changes.checked ? items.map((item) => item.name) : []
                        );
                      }}
                    />
                  </Table.ColumnHeader>
                  <Table.ColumnHeader>Product</Table.ColumnHeader>
                  <Table.ColumnHeader>Category</Table.ColumnHeader>
                  <Table.ColumnHeader>Price</Table.ColumnHeader>
                </Table.Row>
              </Table.Header>
              <Table.Body>
                {items.map((item) => (
                  <Table.Row
                    key={item.name}
                    data-selected={
                      selection.includes(item.name) ? "" : undefined
                    }
                  >
                    <Table.Cell>
                      <Checkbox
                        size="sm"
                        top="0.5"
                        aria-label="Select row"
                        checked={selection.includes(item.name)}
                        onCheckedChange={(changes) => {
                          setSelection((prev) =>
                            changes.checked
                              ? [...prev, item.name]
                              : selection.filter((name) => name !== item.name)
                          );
                        }}
                      />
                    </Table.Cell>
                    <Table.Cell>{item.name}</Table.Cell>
                    <Table.Cell>{item.category}</Table.Cell>
                    <Table.Cell>${item.price}</Table.Cell>
                  </Table.Row>
                ))}
              </Table.Body>
            </Table.Root>
            <ActionBarRoot open={hasSelection}>
              <ActionBarContent>
                <ActionBarSelectionTrigger>
                  {selection.length} selected
                </ActionBarSelectionTrigger>
                <ActionBarSeparator />
                <Button variant="outline" size="sm">
                  Delete <Kbd>⌫</Kbd>
                </Button>
                <Button variant="outline" size="sm">
                  Share <Kbd>T</Kbd>
                </Button>
              </ActionBarContent>
            </ActionBarRoot>
          </Stack>
        </HStack>
      </Stack>
      {/* Tag */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Tag
        </Text>
        <HStack wrap="wrap" gap="8">
          <For each={["subtle", "solid", "outline", "surface"]}>
            {(variant) => (
              <HStack key={variant}>
                <Tag variant={variant}>Gray</Tag>
                <Tag variant={variant} closable>
                  Gray
                </Tag>
                <Tag variant={variant} endElement={<HiCheck />}>
                  Gray
                </Tag>
              </HStack>
            )}
          </For>
          <For each={["sm", "md", "lg", "xl"]}>
            {(size) => (
              <Tag
                colorPalette="red"
                key={size}
                size={size}
                rounded="full"
                startElement={
                  <Avatar size="full" src="https://i.pravatar.cc/300?u=1" />
                }
              >
                Emily ({size})
              </Tag>
            )}
          </For>
        </HStack>
      </Stack>
      {/* Timeline */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Timeline
        </Text>
        <HStack wrap="wrap" gap="8">
          <TimelineRoot maxW="sm">
            <TimelineItem>
              <TimelineConnector icon={<LuShip />} />
              <TimelineContent>
                <TimelineTitle>Product Shipped</TimelineTitle>
                <TimelineDescription>13th May 2021</TimelineDescription>
                <Text textStyle="sm">
                  We shipped your product via <strong>FedEx</strong> and it
                  should arrive within 3-5 business days.
                </Text>
              </TimelineContent>
            </TimelineItem>
            <TimelineItem>
              <TimelineConnector icon={<LuCheck />} />
              <TimelineContent>
                <TimelineTitle textStyle="sm">Order Confirmed</TimelineTitle>
                <TimelineDescription>18th May 2021</TimelineDescription>
              </TimelineContent>
            </TimelineItem>
            <TimelineItem>
              <TimelineConnector icon={<LuPackage />} />
              <TimelineContent>
                <TimelineTitle textStyle="sm">Order Delivered</TimelineTitle>
                <TimelineDescription>
                  20th May 2021, 10:30am
                </TimelineDescription>
              </TimelineContent>
            </TimelineItem>
          </TimelineRoot>
          <TimelineRoot
            colorPalette="gray"
            size="lg"
            variant="subtle"
            maxW="md"
          >
            <TimelineItem>
              <TimelineConnector icon={<LuPen />} />
              <TimelineContent>
                <TimelineTitle>
                  <Avatar size="2xs" src="https://i.pravatar.cc/150?u=a" />
                  Lucas Moras <Span color="fg.muted">has changed</Span>
                  <Span fontWeight="medium">3 labels</Span> on
                  <Span color="fg.muted">Jan 1, 2024</Span>
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineConnector icon={<LuX />} />
              <TimelineContent>
                <TimelineTitle>
                  <Avatar size="2xs" src="https://i.pravatar.cc/150?u=x" />
                  Jenna Smith <Span color="fg.muted">removed</Span>
                  <Span fontWeight="medium">Enas</Span>
                  <Span color="fg.muted">on Jan 12, 2024</Span>
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineConnector bg="teal.subtle" icon={<LuX />} />
              <TimelineContent gap="4">
                <TimelineTitle>
                  <Avatar size="2xs" src="https://i.pravatar.cc/150?u=y" />
                  Erica <Span color="fg.muted">commented</Span>
                  <Span color="fg.muted">on Jan 12, 2024</Span>
                </TimelineTitle>
                <Card.Root size="sm">
                  <Card.Body textStyle="sm" lineHeight="tall">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Laborum possimus doloremque cumque voluptates neque,
                    aspernatur temporibus fugiat minima consequuntur similique
                    voluptatibus voluptatem id blanditiis iusto perferendis
                    repudiandae officiis nesciunt eius.
                  </Card.Body>
                  <Card.Footer>
                    <Button size="xs" variant="surface" rounded="md">
                      👏 2
                    </Button>
                  </Card.Footer>
                </Card.Root>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineConnector icon={<LuShip />} />
              <TimelineContent gap="4" mt="-1" w="full">
                <Input size="sm" placeholder="Add comment..." />
              </TimelineContent>
            </TimelineItem>
          </TimelineRoot>
          <TimelineRoot size="sm" variant="outline" maxW="md">
            <TimelineItem>
              <TimelineContent flex="1" />
              <TimelineConnector />
              <TimelineContent flex="1">
                <TimelineTitle>Placed Order</TimelineTitle>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineContent flex="1" alignItems="flex-end">
                <TimelineTitle>Prepared Order</TimelineTitle>
              </TimelineContent>
              <TimelineConnector />
              <TimelineContent flex="1" />
            </TimelineItem>

            <TimelineItem>
              <TimelineContent flex="1" />
              <TimelineConnector />
              <TimelineContent flex="1">
                <TimelineTitle>Order Delivered</TimelineTitle>
              </TimelineContent>
            </TimelineItem>
          </TimelineRoot>
        </HStack>
      </Stack>
      {/* Accordion */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Accordion
        </Text>
        <HStack wrap="wrap" gap="8">
          <AccordionRoot collapsible maxW="md">
            {accordionItems.map((item, index) => (
              <AccordionItem key={index} value={item.value}>
                <AccordionItemTrigger>
                  <Span flex="1">{item.title}</Span>
                </AccordionItemTrigger>
                <AccordionItemContent>{item.text}</AccordionItemContent>
              </AccordionItem>
            ))}
          </AccordionRoot>
          <AccordionRoot multiple collapsible maxW="md">
            {accordionItems.map((item, index) => (
              <AccordionItem key={index} value={item.value}>
                <AccordionItemTrigger>
                  <Span flex="1">{item.title} multiple</Span>
                </AccordionItemTrigger>
                <AccordionItemContent>{item.text}</AccordionItemContent>
              </AccordionItem>
            ))}
          </AccordionRoot>
        </HStack>
      </Stack>
      {/* Breadcrumb */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Breadcrumb
        </Text>
        <HStack wrap="wrap" gapX="16" gapY="8">
          <BreadcrumbRoot>
            {breadcrumbItems.map((item, index) => (
              <BreadcrumbLink key={index} href={item.href}>
                {item.label}
              </BreadcrumbLink>
            ))}
          </BreadcrumbRoot>
          <BreadcrumbRoot separator={<LiaSlashSolid />}>
            {breadcrumbItems.map((item, index) => (
              <BreadcrumbLink key={index} href={item.href}>
                {item.label}
              </BreadcrumbLink>
            ))}
          </BreadcrumbRoot>
        </HStack>
      </Stack>
      {/* Collapsible */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Collapsible
        </Text>
        <HStack wrap="wrap" gap="8">
          <Collapsible.Root defaultOpen>
            <Collapsible.Trigger
              paddingY="3"
              display="flex"
              gap="2"
              alignItems="center"
            >
              <Collapsible.Indicator
                transition="transform 0.2s"
                _open={{ transform: "rotate(90deg)" }}
              >
                <LuChevronRight />
              </Collapsible.Indicator>
              Toggle
            </Collapsible.Trigger>
            <Collapsible.Content>
              <Stack padding="4" borderWidth="1px">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Laboriosam, mollitia perferendis tenetur nisi sint inventore
                dolorum labore alias? Temporibus atque explicabo suscipit
                voluptate corrupti quidem labore natus fuga. Ut, reiciendis.
              </Stack>
            </Collapsible.Content>
          </Collapsible.Root>
          <Collapsible.Root unmountOnExit>
            <Collapsible.Trigger paddingY="3">
              Toggle Collapse (Unmount on exit)
            </Collapsible.Trigger>
            <Collapsible.Content>
              <Box padding="4" borderWidth="1px">
                If you inspect the DOM, you&apos;ll notice that the content is
                unmounted when collapsed. This is useful for performance reasons
                when you have a lot of collapsible content.
              </Box>
            </Collapsible.Content>
          </Collapsible.Root>
        </HStack>
      </Stack>
      {/* Pagination */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Pagination
        </Text>
        <HStack wrap="wrap" gap="8">
          <PaginationRoot count={20} pageSize={4} defaultPage={1}>
            <ButtonGroup variant="ghost" size="sm" wrap="wrap">
              <PaginationPrevTrigger />
              <PaginationItems />
              <PaginationNextTrigger />
            </ButtonGroup>
          </PaginationRoot>
          <PaginationRoot
            variant="solid"
            count={20}
            pageSize={4}
            defaultPage={1}
          >
            <ButtonGroup size="sm" wrap="wrap">
              <PaginationPrevTrigger />
              <PaginationItems />
              <PaginationNextTrigger />
            </ButtonGroup>
          </PaginationRoot>
          <PaginationRoot
            variant="outline"
            count={20}
            pageSize={4}
            defaultPage={1}
          >
            <ButtonGroup size="sm" wrap="wrap">
              <PaginationPageText format="long" />
              <PaginationPrevTrigger />
              <PaginationNextTrigger />
            </ButtonGroup>
          </PaginationRoot>
        </HStack>
      </Stack>
      {/* Steps */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Step
        </Text>
        <HStack wrap="wrap" gap="8">
          <StepsRoot defaultStep={1} count={steps.length}>
            <StepsList>
              {steps.map((step, index) => (
                <StepsItem
                  key={index}
                  index={index}
                  title={step.title}
                  disableTrigger
                />
              ))}
            </StepsList>

            {steps.map((step, index) => (
              <StepsContent key={index} index={index}>
                {step.description}
              </StepsContent>
            ))}
            <StepsCompletedContent>
              All steps are complete!
            </StepsCompletedContent>

            <ButtonGroup size="sm" variant="outline">
              <StepsPrevTrigger asChild>
                <Button>Prev</Button>
              </StepsPrevTrigger>
              <StepsNextTrigger asChild>
                <Button>Next</Button>
              </StepsNextTrigger>
            </ButtonGroup>
          </StepsRoot>
          <StepsRoot colorPalette="orange" defaultStep={1} count={steps.length}>
            <StepsList>
              {steps.map((step, index) => (
                <StepsItem
                  key={index}
                  index={index}
                  title={step.title}
                  disableTrigger
                  icon={
                    <Icon size="xl">
                      <PiSmileyNervous />
                    </Icon>
                  }
                  completedIcon={
                    <Icon size="xl">
                      <PiSmileyWink />
                    </Icon>
                  }
                />
              ))}
            </StepsList>

            {steps.map((step, index) => (
              <StepsContent key={index} index={index}>
                {step.description}
              </StepsContent>
            ))}
            <StepsCompletedContent>
              All steps are complete!
            </StepsCompletedContent>

            <ButtonGroup size="sm" variant="outline">
              <StepsPrevTrigger asChild>
                <Button>Prev</Button>
              </StepsPrevTrigger>
              <StepsNextTrigger asChild>
                <Button>Next</Button>
              </StepsNextTrigger>
            </ButtonGroup>
          </StepsRoot>
          <StepsRoot
            height="400px"
            orientation="vertical"
            defaultStep={1}
            count={steps.length}
          >
            <StepsList>
              {steps.map((step, index) => (
                <StepsItem key={index} index={index} title={step.title} />
              ))}
            </StepsList>

            <Stack>
              {steps.map((step, index) => (
                <StepsContent key={index} index={index}>
                  {step.description}
                </StepsContent>
              ))}
            </Stack>
            <StepsCompletedContent>
              All steps are complete!
            </StepsCompletedContent>
          </StepsRoot>
        </HStack>
      </Stack>
      {/* Tabs */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Tabs
        </Text>
        <HStack wrap="wrap" gap="8">
          <For each={["line", "subtle", "enclosed", "outline", "plain"]}>
            {(variant) => (
              <Tabs.Root key={variant} defaultValue="members" variant={variant}>
                <Tabs.List>
                  <Tabs.Trigger value="members">
                    <LuUser />
                    Members
                  </Tabs.Trigger>
                  <Tabs.Trigger value="projects">
                    <LuFolder />
                    Projects
                  </Tabs.Trigger>
                  <Tabs.Trigger value="tasks">
                    <LuSquareCheck />
                    Settings
                  </Tabs.Trigger>
                </Tabs.List>
                <Tabs.Content value="members">
                  Manage your team members
                </Tabs.Content>
                <Tabs.Content value="projects">
                  Manage your projects
                </Tabs.Content>
                <Tabs.Content value="tasks">
                  Manage your tasks for freelancers
                </Tabs.Content>
              </Tabs.Root>
            )}
          </For>
          <Tabs.Root
            w="full"
            value={selectedTab}
            variant="outline"
            size="sm"
            onValueChange={(e) => setSelectedTab(e.value)}
          >
            <Tabs.List flex="1 1 auto">
              {tabs.map((item) => (
                <Tabs.Trigger value={item.id} key={item.id}>
                  {item.title}{" "}
                  <CloseButton
                    as="span"
                    role="button"
                    size="2xs"
                    me="-2"
                    onClick={(e) => {
                      e.stopPropagation();
                      removeTab(item.id);
                    }}
                  />
                </Tabs.Trigger>
              ))}
              <Button
                alignSelf="center"
                ms="2"
                size="2xs"
                variant="ghost"
                onClick={addTab}
              >
                <LuPlus /> Add Tab
              </Button>
            </Tabs.List>

            <Tabs.ContentGroup>
              {tabs.map((item) => (
                <Tabs.Content value={item.id} key={item.id}>
                  <Heading size="xl" my="6">
                    {item.content} {item.id}
                  </Heading>
                  <Text>
                    Dolore ex esse laboris elit magna esse sunt. Pariatur in
                    veniam Lorem est occaecat do magna nisi mollit ipsum sit
                    adipisicing fugiat ex. Pariatur ullamco exercitation ea qui
                    adipisicing. Id cupidatat aute id ut excepteur exercitation
                    magna pariatur. Mollit irure irure reprehenderit pariatur
                    eiusmod proident Lorem deserunt duis cillum mollit.
                  </Text>
                </Tabs.Content>
              ))}
            </Tabs.ContentGroup>
          </Tabs.Root>
        </HStack>
      </Stack>
      {/* Format Number  */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Format Number
        </Text>
        <HStack wrap="wrap" gap="8" textStyle="lg">
          <Text>
            <FormatNumber value={1450.45} />
          </Text>
          <Text>
            <FormatNumber
              value={0.145}
              style="percent"
              maximumFractionDigits={2}
              minimumFractionDigits={2}
            />
          </Text>
          <Text>
            <FormatNumber
              value={1234.45}
              style="currency"
              currencyDisplay="narrowSymbol"
              currency="TRY"
            />
          </Text>
          <Text>
            <FormatNumber value={384.4} style="unit" unit="kilometer" />
          </Text>
          <Text>
            <FormatNumber
              value={1500000}
              notation="compact"
              compactDisplay="long"
            />
          </Text>
        </HStack>
      </Stack>
      {/* Format Byte */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Format Byte
        </Text>
        <HStack wrap="wrap" gap="8" textStyle="lg">
          <Text>
            <FormatByte value={50} />
          </Text>
          <Text>
            <FormatByte value={5000} />
          </Text>
          <Text>
            <FormatByte value={5000000} />
          </Text>
          <Text>
            <FormatByte value={5000000000} unitSystem="binary" />
          </Text>
          <Text>
            <FormatByte value={13000000000000} unitDisplay="long" />
          </Text>
        </HStack>
      </Stack>
      {/* Client Only */}
      <Stack>
        <Text fontSize="xl" fontWeight="600">
          Client Only
        </Text>
        <ClientOnly fallback={<SkeletonText noOfLines={2} w="xs" />}>
          {() => (
            <Stack>
              <Text>Current URL: {window.location.href}</Text>
              <Text>Screen width: {window.innerWidth}px</Text>
            </Stack>
          )}
        </ClientOnly>
      </Stack>
    </Flex>
  );
}

export default HomeCard;