\n};"},"Tabs":{"css":"$1e","code":"$1f","examplesCode":"$20"},"Alert":{"css":"$21","code":"$22","examplesCode":"$23"},"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":"$24","code":"$25","lastUpdated":1734977648735,"examplesCode":"$26"},"Input":{"css":"$27","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","examplesCode":"$28"},"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":"$29","code":"$2a","lastUpdated":1738043222237,"examplesCode":"$2b"},"Table":{"css":"$2c","code":"$2d","lastUpdated":1735019019466,"examplesCode":"$2e"},"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":"$2f","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":"$30","code":"$31","examplesCode":"$32"},"Dialog":{"css":"$33","code":"$34","lastUpdated":1734479658206,"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":"$35","code":"$36","lastUpdated":1734998136650,"examplesCode":"$37"},"Slider":{"css":"$38","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":"$39","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":"$3a","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":"$3b"},"Topbar":{"css":".topbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n\n padding: var(--spacing-xs) var(--spacing-md);\n background: var(--color-surface);\n border-bottom: 1px solid var(--color-border);\n height: 3rem;\n}\n\n.leftSection {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n}\n\n.rightSection {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm);\n margin-left: auto;\n height: 100%;\n}","code":"import { ReactNode } from \"react\";\nimport styles from \"./Topbar.module.css\";\n\nexport interface TopbarProps {\n /** Content to be rendered on the left side */\n leftContent?: ReactNode;\n /** Content to be rendered on the right side */\n rightContent?: ReactNode;\n className?: string;\n}\n\nexport const Topbar = ({ leftContent, rightContent, className }: TopbarProps) => {\n return (\n

{leftContent}

{rightContent}

\n );\n};\n","lastUpdated":1735019080051,"examplesCode":"$3c"},"Command":{"css":"$3d","code":"$3e","lastUpdated":1734157034290,"examplesCode":"$3f"},"Popover":{"css":"$40","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":"$41"},"Sidebar":{"css":"$42","code":"$43","lastUpdated":1738262910465,"examplesCode":"$44"},"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":"$45","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":"$46"},"Calendar":{"css":"$47","code":"$48","lastUpdated":1734929196325,"examplesCode":"$49"},"Carousel":{"css":"$4a","code":"$4b","lastUpdated":1738779840084,"examplesCode":"$4c"},"Checkbox":{"css":"$4d","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":"$4e"},"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":"$4f"},"Accordion":{"css":"$50","code":"$51","lastUpdated":1738878030335,"examplesCode":"$52"},"HoverCard":{"css":"$53","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":"$54"},"Resizable":{"css":"$55","code":"$56","lastUpdated":1734999060974,"examplesCode":"$57"},"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":"$58"},"Breadcrumb":{"css":"$59","code":"$5a","examplesCode":"$5b"},"Pagination":{"css":"$5c","code":"$5d","lastUpdated":1734131752637,"examplesCode":"$5e"},"RadioGroup":{"css":"$5f","code":"$60","lastUpdated":1735019552059,"examplesCode":"$61"},"ScrollArea":{"css":"$62","code":"$63","lastUpdated":1735674332644,"examplesCode":"$64"},"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":"$65","lastUpdated":1737930571125,"examplesCode":"$66"},"ContextMenu":{"css":"$67","code":"$68","examplesCode":"$69"},"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":"$6a","lastUpdated":1734998268390,"examplesCode":"$6b"},"DropdownMenu":{"css":"$6c","code":"$6d","lastUpdated":1734223455464,"examplesCode":"$6e"},"FileDropzone":{"css":"$6f","code":"$70","lastUpdated":1734114120925,"examplesCode":"$71"},"SonnerToaster":{"css":"$72","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":"$73"}},"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":"$74","testCode":"$75","lastUpdated":1738008370283}},"createdAt":"2024-12-27T22:40:44.410Z","updatedAt":"2024-12-27T22:40:44.410Z","userId":"9f7aa15f-407b-42a1-a912-67490a670b75","public":true,"mainComponentPlan":null,"dependencies":null},"userId":"$undefined"}]]

Chat

Chat