,\n};"},"Tabs":{"css":"$16","code":"$17","examplesCode":"$18"},"Badge":{"css":".badge {\n display: inline-flex;\n align-items: center;\n padding: var(--spacing-xxs) var(--spacing-xs);\n border-radius: var(--radius-sm);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-sm);\n transition: all var(--animation-duration-fast);\n cursor: default;\n user-select: none;\n}\n\n.default {\n background-color: var(--color-primary);\n color: var(--color-white);\n}\n\n.default:hover {\n background-color: var(--color-primary-hover);\n}\n\n.destructive {\n background-color: var(--color-error);\n color: var(--color-white);\n}\n\n.destructive:hover {\n filter: brightness(1.1);\n}\n\n.secondary {\n background-color: var(--color-secondary);\n color: var(--color-white);\n}\n\n.secondary:hover {\n background-color: var(--color-secondary-hover);\n}\n\n.outline {\n background-color: transparent;\n color: var(--color-text-primary);\n border: 1px solid var(--color-border);\n}\n\n.outline:hover {\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-400);\n}","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","examplesCode":"import { Badge } from \"./Badge\";\nimport { Column, Row } from \"./Flex\";\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":"$19","code":"$1a","lastUpdated":1734977648735,"examplesCode":"$1b"},"Input":{"css":"$1c","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","lastUpdated":1739043914915,"examplesCode":"$1d"},"Label":{"css":".label {\n display: inline-block;\n font-family: var(--font-family-base);\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-bold);\n color: var(--color-text-primary);\n cursor: pointer;\n user-select: none;\n padding: var(--spacing-xxs) 0;\n}\n\n.label:hover {\n color: var(--color-primary);\n}\n\n.label:active {\n color: var(--color-primary-active);\n}\n\n.label:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: var(--radius-sm);\n}\n\n.label[disabled],\n.label[aria-disabled=\"true\"] {\n color: var(--color-text-disabled);\n cursor: not-allowed;\n}\n\n/* For required labels */\n.label[data-required=\"true\"]::after {\n content: \"*\";\n color: var(--color-error);\n margin-left: var(--spacing-xxs);\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","examplesCode":"import { Column } from \"./Flex\";\nimport { 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 handles\n multiple lines of text and wrapping behavior in a user interface context\n \n \n \n )\n};\n"},"Sheet":{"css":"$1e","code":"$1f","lastUpdated":1738043222237,"examplesCode":"$20"},"Avatar":{"css":".avatar {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n overflow: hidden;\n user-select: none;\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n background-color: var(--color-surface);\n box-shadow: var(--shadow-sm);\n transition: transform var(--animation-duration-fast) ease;\n}\n\n.avatar:hover {\n transform: scale(1.05);\n}\n\n.avatarImage {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n\n.avatarFallback {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-base);\n background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));\n color: var(--color-white);\n text-transform: uppercase;\n}","code":"$21","examplesCode":"import React from 'react';\nimport { Avatar, AvatarImage, AvatarFallback } from './Avatar';\nimport { Column } from './Flex';\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":"$22","code":"$23","examplesCode":"$24"},"Dialog":{"css":"$25","code":"$26","lastUpdated":1739333322766,"examplesCode":"import React from 'react'\nimport { Column } from './Flex'\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":"$27","code":"$28","lastUpdated":1734998136650,"examplesCode":"$29"},"Slider":{"css":"$2a","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","lastUpdated":1735020546586,"examplesCode":"import React from 'react';\nimport { Slider } from './Slider';\nimport { Column } from './Flex';\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":"$2b","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","lastUpdated":1734236871167,"examplesCode":"import { Switch } from \"./Switch\";\nimport { Label } from \"./Label\";\nimport { Column, Row } from \"./Flex\";\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":"$2c","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","lastUpdated":1733984462066,"examplesCode":"$2d"},"Command":{"css":"$2e","code":"$2f","lastUpdated":1734157034290,"examplesCode":"$30"},"Popover":{"css":"$31","code":"\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport styles from \"./Popover.module.css\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n \n \n \n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n","lastUpdated":1734637244655,"examplesCode":"$32"},"Spinner":{"css":".spinner {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n.spinnerInner {\n position: absolute;\n border-radius: 50%;\n border: solid transparent;\n border-top-color: var(--color-primary);\n animation: spin var(--animation-duration-slow) linear infinite;\n}\n\n.primary .spinnerInner {\n border-top-color: var(--color-primary);\n}\n\n.light .spinnerInner {\n border-top-color: var(--color-white);\n}\n\n.sm {\n width: 1rem;\n height: 1rem;\n}\n\n.sm .spinnerInner {\n width: 1rem;\n height: 1rem;\n border-width: 2px;\n}\n\n.md {\n width: 2rem;\n height: 2rem;\n}\n\n.md .spinnerInner {\n width: 2rem;\n height: 2rem;\n border-width: 3px;\n}\n\n.lg {\n width: 3rem;\n height: 3rem;\n}\n\n.lg .spinnerInner {\n width: 3rem;\n height: 3rem;\n border-width: 4px;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\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","examplesCode":"import { Spinner } from \"./Spinner\";\nimport { Column } from \"./Flex\";\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":"$33","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","lastUpdated":1736896168402,"examplesCode":"$34"},"Calendar":{"css":"$35","code":"$36","lastUpdated":1734929196325,"examplesCode":"$37"},"Carousel":{"css":"$38","code":"$39","lastUpdated":1738779840084,"examplesCode":"$3a"},"Checkbox":{"css":"$3b","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","examplesCode":"$3c"},"GameInfo":{"css":"$3d","code":"$3e","userDef":"The GameInfo component displays game statistics (score, level, lines cleared), a preview of the next piece using TetrisBlock components, and provides pause/restart controls with retro neon styling.","lastUpdated":1739471814205,"examplesCode":"$3f"},"Progress":{"css":".progress {\n position: relative;\n overflow: hidden;\n background: var(--color-gray-200);\n border-radius: var(--radius-sm);\n width: 100%;\n height: 0.5rem;\n}\n\n.indicator {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 90deg,\n var(--color-primary) 0%,\n var(--color-primary-hover) 100%\n );\n width: 100%;\n transition: transform var(--animation-duration-normal) cubic-bezier(0.65, 0, 0.35, 1);\n box-shadow: 0 0 8px var(--color-primary);\n}\n\n.indicator::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.2),\n transparent\n );\n animation: shimmer 2s infinite;\n}\n\n@keyframes shimmer {\n 100% {\n transform: translateX(200%);\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","lastUpdated":1737505850596,"examplesCode":"import React from 'react';\nimport { Progress } from './Progress';\nimport { Column } from './Flex';\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}"},"Skeleton":{"css":".skeleton {\n position: relative;\n background: var(--color-gray-200);\n border-radius: var(--radius-sm);\n overflow: hidden;\n min-height: 1rem;\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.skeleton::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 90deg,\n transparent,\n var(--color-gray-100),\n transparent\n );\n transform: translateX(-100%);\n animation: shimmer 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.7;\n }\n}\n\n@keyframes shimmer {\n 100% {\n transform: translateX(100%);\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 }","lastUpdated":1734128835008,"examplesCode":"import { Column, Row } from \"./Flex\";\nimport { Skeleton } from \"./Skeleton\";\n\nexport const TextSkeletonExample = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Text Skeleton\",\n component: () => (\n \n \n \n \n \n )\n}\n\nexport const ProfileSkeletonExample = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Profile Skeleton\",\n component: () => (\n \n \n \n \n \n \n \n \n \n )\n}"},"Textarea":{"css":".textarea {\n font-family: var(--font-family-base);\n font-size: var(--font-size-md);\n line-height: var(--line-height-md);\n color: var(--color-text-primary);\n transition: all var(--animation-duration-fast);\n width: 100%;\n min-height: 5rem;\n}\n\n.textarea::placeholder {\n color: var(--color-text-disabled);\n opacity: 1;\n}\n\n.default {\n padding: var(--spacing-sm);\n background-color: var(--color-white);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-sm);\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.default:hover {\n border-color: var(--color-gray-400);\n}\n\n.default:focus {\n outline: none;\n border-color: var(--color-primary);\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05),\n 0 0 0 3px rgba(255, 159, 28, 0.1);\n}\n\n.clear {\n padding: 0;\n background: transparent;\n border: none;\n box-shadow: none;\n}\n\n.clear:focus {\n outline: none;\n}\n\n.noResize {\n resize: none;\n}","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","examplesCode":"$40"},"Accordion":{"css":"$41","code":"$42","lastUpdated":1738878030335,"examplesCode":"$43"},"GameBoard":{"css":"$44","code":"$45","userDef":"","lastUpdated":1744664533221,"examplesCode":"import React, { useRef } from \"react\";\nimport { GameBoard, GameBoardHandle } from \"./GameBoard\";\n\nexport const BasicGameBoardExample = {\n size: \"page\",\n backdrop: \"surface\",\n title: \"Basic Tetris Game Board\",\n component: () => {\n const gameBoardRef = useRef(null);\n\n const handleStatsChange = (stats: unknown) => {\n console.log(\"Game Stats:\", stats);\n };\n\n return (\n \n \n \n \n \n );\n },\n};\n"},"HoverCard":{"css":"$46","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,\n React.ComponentPropsWithoutRef\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n \n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n","lastUpdated":1735000748162,"examplesCode":"$47"},"Resizable":{"css":"$48","code":"$49","lastUpdated":1734999060974,"examplesCode":"$4a"},"Separator":{"css":".separator {\n background-color: var(--color-border);\n}\n\n.horizontal {\n width: 100%;\n height: 1px;\n}\n\n.vertical {\n height: 100%;\n width: 1px;\n}\n\n.separatorWithText {\n display: flex;\n align-items: center;\n width: 100%;\n gap: var(--spacing-sm);\n}\n\n.separatorWithText.vertical {\n flex-direction: column;\n height: 100%;\n}\n\n.separatorLine {\n flex-grow: 1;\n height: 1px;\n background-color: var(--color-border);\n}\n\n.separatorWithText.vertical .separatorLine {\n width: 1px;\n height: auto;\n}\n\n.separatorText {\n color: var(--color-text-secondary);\n font-size: var(--font-size-xs);\n white-space: nowrap;\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 \n );\n};\n","examplesCode":"$4b"},"Breadcrumb":{"css":"$4c","code":"$4d","examplesCode":"$4e"},"Pagination":{"css":"$4f","code":"$50","lastUpdated":1734131752637,"examplesCode":"$51"},"RadioGroup":{"css":"$52","code":"$53","lastUpdated":1735019552059,"examplesCode":"$54"},"Collapsible":{"css":"@keyframes collapsible-down {\n from {\n height: 0;\n }\n to {\n height: var(--radix-collapsible-content-height);\n }\n}\n\n@keyframes collapsible-up {\n from {\n height: var(--radix-collapsible-content-height);\n }\n to {\n height: 0;\n }\n}\n\n.trigger {\n cursor: pointer;\n display: block;\n appearance: none;\n border: none;\n background: transparent;\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":"$55","lastUpdated":1737930571125,"examplesCode":"$56"},"ContextMenu":{"css":"$57","code":"$58","examplesCode":"$59"},"TetrisBlock":{"css":"$5a","code":"\"use client\";\nimport React from \"react\";\nimport styles from \"./TetrisBlock.module.css\";\n\nexport interface TetrisBlockProps {\n pieceType: string;\n active: boolean;\n className?: string;\n}\n\nexport const TetrisBlock: React.FC = ({\n pieceType,\n active,\n className,\n}) => {\n return (\n \n {/* The gradient and glow effects will be applied via CSS based on block type */}\n \n );\n};\n\nTetrisBlock.displayName = \"TetrisBlock\";","userDef":"The TetrisBlock component represents an individual block within the Tetris grid, applying gradient colors and glow effects based on its piece type and whether it is part of the moving active piece or a placed block.","lastUpdated":1739340945439,"examplesCode":"import React from 'react';\nimport { TetrisBlock } from './TetrisBlock';\nimport { Column, Row } from './Flex';\n\nexport const BasicTetrisBlockExample = {\n size: 'md',\n backdrop: 'surface', \n title: 'Basic Tetris Blocks',\n component: () => (\n \n \n \n \n \n )\n};\n\nexport const TetrisBlockVariationsExample = {\n size: 'md', \n backdrop: 'surface',\n title: 'Tetris Block States',\n component: () => (\n \n \n \n \n \n \n \n \n \n \n \n \n )\n};"},"ToggleGroup":{"css":".toggleGroup {\n display: inline-flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--spacing-xxs);\n position: relative;\n width: fit-content;\n}\n\n/* Single-select mode - items next to each other */\n.toggleGroup[data-orientation=\"horizontal\"] {\n flex-direction: row;\n}\n\n/* Multi-select mode - items stacked */\n.toggleGroup[data-orientation=\"vertical\"] {\n flex-direction: column;\n align-items: stretch;\n}\n\n/* Disabled state */\n.toggleGroup [data-disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n background-color: var(--color-gray-200);\n color: var(--color-text-disabled);\n pointer-events: none;\n}\n\n.toggleGroup [data-disabled]:hover {\n background-color: var(--color-gray-200);\n}\n\n/* Compact mode for small screens */\n@media (max-width: 640px) {\n .toggleGroup {\n width: 100%;\n }\n \n .toggleGroup[data-orientation=\"horizontal\"] {\n flex-wrap: wrap;\n }\n}","code":"$5b","lastUpdated":1734998268390,"examplesCode":"$5c"},"DropdownMenu":{"css":"$5d","code":"$5e","lastUpdated":1734223455464,"examplesCode":"$5f"},"FileDropzone":{"css":"$60","code":"$61","lastUpdated":1734114120925,"examplesCode":"$62"},"SonnerToaster":{"css":"$63","code":"\"use client\";\n\nimport { Toaster as Sonner } from \"sonner\";\nimport styles from \"./SonnerToaster.module.css\";\n\ntype ToasterProps = React.ComponentProps;\n\nexport const SonnerToaster = ({ className, ...props }: ToasterProps) => {\n return (\n \n );\n};\n","examplesCode":"$64"},"TetrisGridLines":{"css":".gridLines {\n position: absolute;\n inset: 0;\n pointer-events: none;\n display: grid;\n}\n\n.verticalLine,\n.horizontalLine {\n position: absolute;\n background: linear-gradient(\n 90deg,\n transparent,\n color-mix(in srgb, var(--color-primary) 15%, var(--color-gray-600)),\n transparent\n );\n opacity: 0.15;\n}\n\n.verticalLine {\n top: 0;\n bottom: 0;\n width: 1px;\n transform: translateX(-50%);\n left: calc(100% * var(--i) / var(--cols, 10));\n box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 10%, transparent);\n}\n\n.horizontalLine {\n left: 0;\n right: 0;\n height: 1px;\n transform: translateY(-50%);\n top: calc(100% * var(--i) / var(--rows, 20));\n box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 10%, transparent);\n}\n","code":"import React from \"react\";\nimport styles from \"./TetrisGridLines.module.css\";\n\nexport interface TetrisGridLinesProps {\n numRows: number;\n numCols: number;\n className?: string;\n}\n\nexport const TetrisGridLines: React.FC = ({\n numRows,\n numCols,\n className,\n}) => {\n return (\n

\n {Array.from({ length: numCols + 1 }).map((_, i) => (\n \n ))}\n {Array.from({ length: numRows + 1 }).map((_, i) => (\n \n ))}\n

\n );\n};","userDef":"The TetrisGridLines component renders a responsive grid overlay for a Tetris game board by creating vertical and horizontal lines using CSS Grid and absolute positioning, taking numRows and numCols as required props to determine the grid dimensions, and an optional className for custom styling.","lastUpdated":1739399522294,"examplesCode":"import React from 'react';\nimport { TetrisGridLines } from './TetrisGridLines';\n\nexport const BasicGridLinesExample = {\n size: 'page',\n backdrop: 'surface', \n title: 'Basic Grid Lines',\n component: () => (\n \n )\n};\n"},"TetrisActivePiece":{"css":".activePiece {\n position: absolute;\n inset: 0;\n pointer-events: none;\n transform-style: preserve-3d;\n perspective: 1000px;\n}\n\n.blockWrapper {\n position: absolute;\n width: var(--block-size);\n height: var(--block-size);\n transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform;\n}\n\n.blockInner {\n width: 100%;\n height: 100%;\n /* Updated animation duration and added forwards fill mode to retain final visible state */\n animation: fadeIn var(--animation-duration-normal) ease-out forwards;\n}\n\n.blockInner:hover {\n z-index: 1;\n transform: scale(1.05) translateZ(10px);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}","code":"$65","userDef":"The TetrisActivePiece component renders an active Tetris piece within a game board by taking a piece object (containing type, shape matrix, position coordinates, and optional color) and rendering individual TetrisBlock components with proper positioning and animations, while maintaining smooth transitions during movement and rotation.","lastUpdated":1739408879432,"examplesCode":"import React from 'react';\nimport { TetrisActivePiece } from './TetrisActivePiece';\n\nexport const DefaultTetrisPieceExample = {\n size: 'md',\n backdrop: 'surface',\n title: 'Default Tetris Piece',\n component: () => (\n \n )\n};\n\nexport const PositionedTetrisPieceExample = {\n size: 'md', \n backdrop: 'surface',\n title: 'Positioned Tetris Piece',\n component: () => (\n \n )\n};"},"TetrisPlacedBlocks":{"css":"$66","code":"$67","userDef":"TetrisPlacedBlocks is a grid-based component that renders an array of placed Tetris blocks with their positions and types, using CSS Grid for layout and supporting custom block sizes and styling through props, where placedBlocks is an array of {x: number, y: number, type: string} objects representing the coordinates and type of each placed block.","lastUpdated":1739409112940,"examplesCode":"$68"}},"helpers":{"useIsMobile":{"css":"","code":"import { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useIsMobile = (): boolean => {\n return useMediaQuery(\"(max-width: 767px)\");\n};\n","testCode":"","lastUpdated":1738008370992},"useMediaQuery":{"css":"","code":"$69","testCode":"$6a","lastUpdated":1738008370283},"useTetrisPieces":{"css":"/* No specific styles are required for the useTetrisPieces hook */","code":"$6b","userDef":"This helper defines a custom React hook named useTetrisPieces that manages Tetris piece generation, movement, rotation, and collision detection based on board dimensions and placed blocks, and it exposes methods to manipulate the current active piece.","testCode":"$6c","lastUpdated":1739579574840},"useTetrisGameState":{"css":"/* This file is intentionally left blank as the useTetrisGameState hook does not require visual styling. */","code":"$6d","userDef":"This helper defines the useTetrisGameState hook which manages Tetris game state (score, level, lines cleared, and pause/active status) and provides methods to update or reset that state.","testCode":"$6e","lastUpdated":1739579463787}},"endpoints":{},"pages":{"_index":{"css":"","code":"import { Main } from \"../components/Main\";\nexport default function Page() {\n return

;\n}","userDef":"","lastUpdated":1744158920961}},"createdAt":"$D2025-02-12T05:57:23.917Z","updatedAt":"$D2025-02-12T05:57:23.917Z","userId":"9f7aa15f-407b-42a1-a912-67490a670b75","public":true,"mainComponentPlan":"$6f","dependencies":{},"resources":[],"connectedResources":[],"editable":false},"userId":"$undefined","editable":false}]]

Chat

Setting up preview

Resources