,\n};"},"Tabs":{"css":"$16","code":"$17","userDef":"","lastUpdated":1740116443962,"examplesCode":"$18"},"Badge":{"css":"$19","code":"import styles from './Badge.module.css';\n\ninterface Props extends React.HTMLAttributes {\n variant?: 'default' | 'destructive' | 'outline' | 'secondary';\n}\n\nexport const Badge = ({\n variant = 'default',\n className,\n children,\n ...props\n}: Props) => {\n return (\n \n {children}\n \n );\n};\n","userDef":"","lastUpdated":1739912811853,"examplesCode":"import { Badge } from \"./Badge\";\n\nexport const DefaultBadge = {\n size: \"sm\",\n backdrop: \"surface\",\n title: \"Default Badge\",\n component: () => Active\n}\n\nexport const SecondaryBadge = {\n size: \"sm\",\n backdrop: \"surface\",\n title: \"Secondary Badge\",\n component: () => Premium\n}\n\nexport const OutlineBadge = {\n size: \"sm\",\n backdrop: \"surface\",\n title: \"Outline Badge\",\n component: () => Draft\n}\n\nexport const DestructiveBadge = {\n size: \"sm\",\n backdrop: \"surface\",\n title: \"Destructive Badge\",\n component: () => Expired\n}\n"},"Chart":{"css":"$1a","code":"$1b","userDef":"","lastUpdated":1739833985781,"examplesCode":"$1c"},"Input":{"css":"$1d","code":"import React, { forwardRef, InputHTMLAttributes } from \"react\";\nimport styles from \"./Input.module.css\";\n\ntype InputProps = InputHTMLAttributes;\n\nexport const Input = forwardRef(\n ({ className, ...props }, ref) => {\n return (\n \n );\n }\n);\n\nInput.displayName = \"Input\";\n","userDef":"","lastUpdated":1739902660753,"examplesCode":"$1e"},"Label":{"css":"@layer base {\n .label {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-xs);\n border-radius: var(--radius-md);\n color: var(--color-surface-text-primary);\n font-family: var(--font-family-base);\n font-size: var(--font-size-md);\n line-height: var(--line-height-md);\n transition:\n background-color var(--animation-duration-fast) ease,\n border-color var(--animation-duration-fast) ease;\n cursor: pointer;\n }\n\n .label:hover {\n color: var(--color-surface-text-primary);\n }\n\n .label:active {\n color: var(--color-surface-text-primary);\n }\n\n .label:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--color-primary);\n }\n}\n","code":"import React, { forwardRef, LabelHTMLAttributes } from \"react\";\nimport styles from \"./Label.module.css\";\n\ninterface LabelProps extends LabelHTMLAttributes {\n children?: React.ReactNode;\n}\n\nexport const Label = forwardRef, LabelProps>(\n ({ children, className, ...props }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\nLabel.displayName = \"Label\";\n","userDef":"","lastUpdated":1739987723341,"examplesCode":"import { Label } from \"./Label\";\nimport { Input } from \"./Input\";\n\nexport const BasicLabelExample = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Basic Label\",\n component: () => (\n \n Username\n \n \n ),\n};\n\nexport const LongLabelExample = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Long Label Text\",\n component: () => (\n \n \n This is a very long label text that demonstrates how the label component\n handles multiple lines of text and wrapping behavior in a user interface\n context\n \n \n \n ),\n};\n"},"Sheet":{"css":"$1f","code":"$20","userDef":"","lastUpdated":1739834401548,"examplesCode":"$21"},"Avatar":{"css":"$22","code":"$23","userDef":"","lastUpdated":1739833897809,"examplesCode":"import React from \"react\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"./Avatar\";\n\nexport const AvatarWithImage = {\n size: \"sm\",\n backdrop: \"surface\",\n title: \"Avatar with image\",\n component: () => (\n \n \n CN\n \n ),\n};\n\nexport const AvatarWithFallback = {\n size: \"sm\",\n backdrop: \"surface\",\n title: \"Avatar with fallback\",\n component: () => (\n \n JD\n \n ),\n};\n\nexport const AvatarWithBrokenImage = {\n size: \"sm\",\n backdrop: \"surface\",\n title: \"Avatar with broken image (shows fallback)\",\n component: () => (\n \n \n EM\n \n ),\n};\n"},"Button":{"css":"$24","code":"$25","userDef":"","lastUpdated":1739943152766,"examplesCode":"$26"},"Dialog":{"css":"$27","code":"$28","userDef":"","lastUpdated":1739833995488,"examplesCode":"import React from \"react\";\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n DialogFooter,\n} from \"./Dialog\";\nimport { Button } from \"./Button\";\n\nexport const BasicDialogExample = {\n size: \"sm\",\n backdrop: \"surface\",\n title: \"Basic Dialog\",\n component: () => (\n \n ),\n};\n"},"Select":{"css":"$29","code":"$2a","userDef":"","lastUpdated":1739906124092,"examplesCode":"$2b"},"Slider":{"css":"$2c","code":"\"use client\";\n\nimport * as React from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport styles from \"./Slider.module.css\";\n\nconst Slider = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n const isRange =\n (Array.isArray(props.defaultValue) && props.defaultValue.length > 1) ||\n (Array.isArray(props.value) && props.value.length > 1);\n\n return (\n \n \n \n \n \n {isRange && }\n \n );\n});\nSlider.displayName = SliderPrimitive.Root.displayName;\n\nexport { Slider };\n","userDef":"","lastUpdated":1739834495238,"examplesCode":"import React from \"react\";\nimport { Slider } from \"./Slider\";\n\nexport const BasicSlider = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Basic Slider\",\n component: () => ,\n};\n\nexport const StepSlider = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Step Slider\",\n component: () => ,\n};\n\nexport const RangeSlider = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Range Slider\",\n component: () => ,\n};\n\nexport const DisabledSlider = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Disabled Slider\",\n component: () => ,\n};\n"},"Switch":{"css":"$2d","code":"\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\nimport styles from \"./Switch.module.css\"\n\nconst Switch = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n","userDef":"","lastUpdated":1739834469305,"examplesCode":"import { Switch } from \"./Switch\";\nimport { Label } from \"./Label\";\n\nexport const BasicUsage = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Basic usage\",\n component: () => (\n <>\n \n Airplane Mode\n \n ),\n};\n\nexport const DisabledState = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Disabled state\",\n component: () => (\n

\n \n \n Disabled Unchecked\n

\n \n \n Disabled Checked\n \n \n ),\n};\n"},"Toggle":{"css":"$2e","code":"\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport styles from \"./Toggle.module.css\"\n\nexport const Toggle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n {\n variant?: \"default\" | \"outline\";\n size?: \"md\" | \"sm\" | \"lg\";\n }\n>(({ className, variant = \"default\", size = \"md\", ...props }, ref) => (\n \n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n","userDef":"","lastUpdated":1739834490116,"examplesCode":"$2f"},"Command":{"css":"$30","code":"$31","userDef":"","lastUpdated":1740003127174,"examplesCode":"$32"},"Popover":{"css":"$33","code":"$34","userDef":"","lastUpdated":1740164254300,"examplesCode":"$35"},"Sidebar":{"css":"$36","code":"$37","userDef":"","lastUpdated":1740897198384,"examplesCode":"$38"},"Spinner":{"css":"@layer base {\n .spinner {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--color-primary);\n position: relative;\n }\n \n .spinnerInner {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 2px solid var(--color-gray-200);\n border-top-color: currentColor;\n animation: spin var(--animation-duration-slow) linear infinite;\n }\n \n .sm {\n width: 1rem;\n height: 1rem;\n }\n \n .sm .spinnerInner {\n border-width: 2px;\n }\n \n .md {\n width: 1.5rem;\n height: 1.5rem;\n }\n \n .md .spinnerInner {\n border-width: 2.5px;\n }\n \n .lg {\n width: 2rem;\n height: 2rem;\n }\n \n .lg .spinnerInner {\n border-width: 3px;\n }\n \n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}","code":"import React from \"react\";\nimport styles from \"./Spinner.module.css\";\n\ninterface SpinnerProps extends React.HTMLAttributes {\n size?: \"sm\" | \"md\" | \"lg\";\n}\n\nexport const Spinner: React.FC = ({\n size = \"md\",\n className,\n ...props\n}) => {\n return (\n \n

\n \n );\n};\n","userDef":"","lastUpdated":1739834461579,"examplesCode":"import { Spinner } from \"./Spinner\";\n\nexport const SpinnerSizesExample = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Spinner Sizes\",\n component: () => (\n <>\n \n \n \n \n ),\n};\n\nexport const SpinnerLoadingStateExample = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Loading State Example\",\n component: () => (\n \n \n Loading...\n \n ),\n};\n"},"Tooltip":{"css":"$39","code":"import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport styles from \"./Tooltip.module.css\";\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n \n \n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n","userDef":"","lastUpdated":1739834098423,"examplesCode":"$3a"},"Calendar":{"css":"$3b","code":"$3c","userDef":"","lastUpdated":1740007036081,"examplesCode":"$3d"},"Carousel":{"css":"$3e","code":"$3f","userDef":"","lastUpdated":1739833943686,"examplesCode":"$40"},"Checkbox":{"css":"$41","code":"import { InputHTMLAttributes, forwardRef } from 'react';\nimport styles from './Checkbox.module.css';\nimport { Check } from 'lucide-react';\nexport type CheckboxProps = Omit, 'type'>;\n\nexport const Checkbox = forwardRef(\n ({ className, ...props }, ref) => {\n return (\n

\n \n \n

\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n","userDef":"","lastUpdated":1739834013757,"examplesCode":"$42"},"Progress":{"css":"@layer base {\n .progress {\n width: 100%;\n height: 0.5rem;\n background-color: var(--color-gray-200);\n border-radius: var(--radius-md);\n overflow: hidden;\n }\n \n .indicator {\n height: 100%;\n width: 100%;\n background-color: var(--color-primary);\n transition: transform var(--animation-duration-normal) ease;\n will-change: transform;\n border-top-left-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n}","code":"\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\nimport styles from \"./Progress.module.css\"\n\nconst Progress = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, value, ...props }, ref) => (\n \n \n \n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n","userDef":"","lastUpdated":1739834116817,"examplesCode":"import React from \"react\";\nimport { Progress } from \"./Progress\";\n\nexport const BasicProgress = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Basic Progress\",\n component: () => ,\n};\n\nexport const AnimatedProgress = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Animated Progress\",\n component: () => {\n const [progress, setProgress] = React.useState(0);\n\n React.useEffect(() => {\n const timer = setInterval(() => {\n setProgress((prev) => (prev >= 100 ? 0 : prev + 10));\n }, 1000);\n\n return () => clearInterval(timer);\n }, []);\n\n return ;\n },\n};\n\nexport const CompleteProgress = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Complete Progress\",\n component: () => ,\n};\n\nexport const ZeroProgress = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Zero Progress\",\n component: () => ,\n};\n"},"Skeleton":{"css":"@layer base {\n .skeleton {\n position: relative;\n background-color: var(--color-gray-100);\n border-radius: var(--radius-sm);\n overflow: hidden;\n min-height: 1rem;\n width: 100%;\n }\n \n .skeleton::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n var(--color-gray-200) 50%,\n transparent 100%\n );\n animation: shimmer 2s infinite;\n }\n \n @keyframes shimmer {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n }\n}","code":"import styles from \"./Skeleton.module.css\"\n\nfunction Skeleton({\n className,\n ...props\n}: React.HTMLAttributes) {\n return (\n \n )\n}\n \nexport { Skeleton }","userDef":"","lastUpdated":1739834442397,"examplesCode":"$43"},"Textarea":{"css":"$44","code":"import React, { forwardRef, TextareaHTMLAttributes } from \"react\";\nimport styles from \"./Textarea.module.css\";\n\ninterface TextareaProps extends TextareaHTMLAttributes {\n disableResize?: boolean;\n variant?: \"default\" | \"clear\";\n}\n\nexport const Textarea = forwardRef(\n (\n { className, disableResize = false, variant = \"default\", ...props },\n ref\n ) => {\n const resizeClass = disableResize ? styles.noResize : \"\";\n\n return (\n \n );\n }\n);\n\nTextarea.displayName = \"Textarea\";\n","userDef":"","lastUpdated":1739902711265,"examplesCode":"import React from 'react';\nimport { Textarea } from './Textarea';\n\nexport const DefaultTextarea = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Default Textarea\",\n component: () =>

\n}\n\nexport const NonResizableTextarea = {\n  size: \"md\",\n  backdrop: \"surface\",\n  title: \"Non-resizable Textarea\",\n  component: () => <Textarea placeholder=\"This textarea cannot be resized\" disableResize />\n}\n\nexport const DisabledTextarea = {\n  size: \"md\",\n  backdrop: \"surface\",\n  title: \"Disabled Textarea\",\n  component: () => <Textarea placeholder=\"Disabled textarea\" disabled />\n}\n\nexport const MultilineTextarea = {\n  size: \"md\",\n  backdrop: \"surface\",\n  title: \"Multiline Textarea\",\n  component: () => <Textarea placeholder=\"Multiline textarea\" rows={10} />\n}\n\nexport const ClearVariantTextarea = {\n  size: \"md\",\n  backdrop: \"surface\",\n  title: \"Clear Variant\",\n  component: () => <Textarea placeholder=\"Clear textarea\" rows={4} variant=\"clear\" />\n}"},"Accordion":{"css":"$45","code":"$46","userDef":"","lastUpdated":1739852466872,"examplesCode":"$47"},"HoverCard":{"css":"$48","code":"\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\nimport styles from \"./HoverCard.module.css\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={`${styles.content} ${className ?? \"\"}`}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n","userDef":"","lastUpdated":1739834111098,"examplesCode":"$49"},"Resizable":{"css":"$4a","code":"$4b","userDef":"","lastUpdated":1739834429697,"examplesCode":"$4c"},"Separator":{"css":"@layer base {\n  .separator {\n    position: relative;\n    margin: 0;\n    padding: 0;\n    background-color: transparent;\n  }\n  \n  /* Horizontal separator */\n  .horizontal {\n    height: 1px;\n    width: 100%;\n    background-image: linear-gradient(\n      to right,\n      transparent,\n      var(--color-border),\n      transparent\n    );\n    /* A very subtle shadow for a touch of depth */\n    box-shadow: 0 1px 0 var(--color-shadow);\n  }\n  \n  /* Vertical separator */\n  .vertical {\n    width: 1px;\n    height: 100%;\n    background-image: linear-gradient(\n      to bottom,\n      transparent,\n      var(--color-border),\n      transparent\n    );\n    /* A subtle shadow to lift the vertical line slightly */\n    box-shadow: 1px 0 0 var(--color-shadow);\n  }\n}","code":"import React from \"react\";\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport styles from \"./Separator.module.css\";\n\ninterface SeparatorProps {\n  orientation?: \"horizontal\" | \"vertical\";\n  className?: string;\n  decorative?: boolean;\n}\n\nexport const Separator = ({\n  orientation = \"horizontal\",\n  className = \"\",\n  decorative = true,\n}: SeparatorProps) => {\n  return (\n    <SeparatorPrimitive.Root\n      className={`${styles.separator} ${styles[orientation]} ${className ?? \"\"}`}\n      orientation={orientation}\n      decorative={decorative}\n    />\n  );\n};\n","userDef":"","lastUpdated":1739834388913,"examplesCode":"$4d"},"Breadcrumb":{"css":"$4e","code":"$4f","userDef":"","lastUpdated":1739833912584,"examplesCode":"$50"},"KanbanCard":{"css":"$51","code":"$52","userDef":"","lastUpdated":1740955681018,"examplesCode":"$53"},"Pagination":{"css":"$54","code":"$55","userDef":"","lastUpdated":1739834100720,"examplesCode":"$56"},"RadioGroup":{"css":"$57","code":"$58","userDef":"","lastUpdated":1739834123419,"examplesCode":"import { RadioGroup, RadioGroupItem } from \"./RadioGroup\";\nimport { Label } from \"./Label\";\n\nexport const BasicUsage = {\n  size: \"md\",\n  backdrop: \"surface\",\n  title: \"Basic usage\",\n  component: () => (\n    <RadioGroup name=\"size\" defaultValue=\"medium\">\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: \"var(--spacing-md)\" }}>\n        <RadioGroupItem value=\"small\" id=\"radio-small\" />\n        <Label htmlFor=\"radio-small\">Small</Label>\n        <RadioGroupItem value=\"medium\" id=\"radio-medium\" />\n        <Label htmlFor=\"radio-medium\">Medium</Label>\n        <RadioGroupItem value=\"large\" id=\"radio-large\" />\n        <Label htmlFor=\"radio-large\">Large</Label>\n      </div>\n    </RadioGroup>\n  ),\n};\n"},"Collapsible":{"css":"@keyframes collapsible-down {\n  from {\n    max-height: 0;\n  }\n  to {\n    max-height: var(--radix-collapsible-content-height);\n  }\n}\n\n@keyframes collapsible-up {\n  from {\n    max-height: var(--radix-collapsible-content-height);\n  }\n  to {\n    max-height: 0;\n  }\n}\n\n.trigger {\n  cursor: pointer;\n  display: block;\n  appearance: none;\n  border: none;\n  background: transparent;\n  color: inherit;\n}\n\n.content {\n  overflow: hidden;\n}\n\n.content[data-state=\"open\"] {\n  animation: collapsible-down var(--animation-duration-fast) ease-out;\n}\n\n.content[data-state=\"closed\"] {\n  animation: collapsible-up var(--animation-duration-fast) ease-out;\n}\n","code":"$59","userDef":"","lastUpdated":1739860438746,"examplesCode":"$5a"},"ContextMenu":{"css":"$5b","code":"$5c","userDef":"","lastUpdated":1739834071168,"examplesCode":"$5d"},"ToggleGroup":{"css":"@layer base {\n  .toggleGroup {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--spacing-xs);\n    width: fit-content;\n    position: relative;\n  }\n}","code":"$5e","userDef":"","lastUpdated":1739834496360,"examplesCode":"$5f"},"DropdownMenu":{"css":"$60","code":"$61","userDef":"","lastUpdated":1739834052363,"examplesCode":"$62"},"FileDropzone":{"css":"$63","code":"$64","userDef":"","lastUpdated":1739834053369,"examplesCode":"$65"},"KanbanColumn":{"css":"$66","code":"$67","userDef":"","lastUpdated":1740956168993,"examplesCode":"$68"},"SonnerToaster":{"css":"$69","code":"\"use client\";\n\nimport { Toaster as Sonner } from \"sonner\";\nimport styles from \"./SonnerToaster.module.css\";\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\n\nexport const SonnerToaster = ({ className, ...props }: ToasterProps) => {\n  return (\n    <Sonner\n      className={`${styles.toaster} ${className ?? \"\"}`}\n      toastOptions={{\n        unstyled: true,\n        classNames: {\n          toast: styles.toast,\n          content: styles.content,\n          title: styles.title,\n          actionButton: styles.actionButton,\n          cancelButton: styles.cancelButton,\n          closeButton: styles.closeButton,\n          description: styles.description,\n          icon: styles.icon,\n        },\n      }}\n      {...props}\n    />\n  );\n};\n","userDef":"","lastUpdated":1739834464025,"examplesCode":"$6a"},"KanbanCardEdit":{"css":"$6b","code":"$6c","userDef":"","lastUpdated":1740955590589,"examplesCode":"$6d"}},"helpers":{"useIsMobile":{"css":"","code":"import { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useIsMobile = (): boolean => {\n  return useMediaQuery(\"(max-width: 767px)\");\n};\n","userDef":"","testCode":"","lastUpdated":1739834436668},"useMediaQuery":{"css":"","code":"$6e","userDef":"","testCode":"$6f","lastUpdated":1739834435999},"useKanbanState":{"css":"","code":"$70","userDef":"","testCode":"$71","lastUpdated":1740956478588},"useLocalStorage":{"css":"/* No styles needed for this non-visual helper */","code":"\"use client\";\n\nimport { useState } from \"react\";\n\nexport function useLocalStorage<T>(\n  key: string,\n  initialValue: T | (() => T)\n): [T, (value: T | ((prev: T) => T)) => void] {\n  const [storedValue, setStoredValue] = useState<T>(() => {\n    try {\n      const item = localStorage.getItem(key);\n      if (item !== null) {\n        return JSON.parse(item);\n      }\n      return typeof initialValue === \"function\" ? (initialValue as () => T)() : initialValue;\n    } catch (error) {\n      console.error(error);\n      return typeof initialValue === \"function\" ? (initialValue as () => T)() : initialValue;\n    }\n  });\n\n  const setValue = (value: T | ((prev: T) => T)) => {\n    try {\n      const valueToStore = value instanceof Function ? value(storedValue) : value;\n      setStoredValue(valueToStore);\n      localStorage.setItem(key, JSON.stringify(valueToStore));\n    } catch (error) {\n      console.error(error);\n    }\n  };\n\n  return [storedValue, setValue];\n}","userDef":"","testCode":"$72","lastUpdated":1740956382750}},"endpoints":{},"pages":{"_index":{"css":"","code":"import { Main } from \"../components/Main\";\nexport default function Page() {\n    return <Main />;\n}","userDef":"","lastUpdated":1744214072452}},"createdAt":"$D2025-03-02T22:05:45.959Z","updatedAt":"$D2025-03-02T22:05:45.959Z","userId":"9f7aa15f-407b-42a1-a912-67490a670b75","public":true,"mainComponentPlan":"$73","dependencies":{"react-beautiful-dnd":"13.1.1","@types/react-beautiful-dnd":"13.1.8"},"resources":[],"connectedResources":[],"editable":false},"userId":"$undefined","editable":false}]]
</article></body></html>

Chat

Setting up preview

Resources