,\n};\n"},"Tabs":{"css":"$1b","code":"$1c","userDef":"","lastUpdated":1740116512136,"examplesCode":"$1d"},"Badge":{"css":"$1e","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\";\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":"$1f","code":"$20","userDef":"","lastUpdated":1739680265569,"examplesCode":"$21"},"Input":{"css":"$22","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":1739902302465,"examplesCode":"$23"},"Label":{"css":".label {\n display: inline-block;\n font-family: var(--font-family-base);\n font-size: var(--font-size-md);\n color: var(--color-text-primary);\n font-weight: var(--font-weight-bold);\n padding: var(--spacing-xxs) 0;\n cursor: pointer;\n user-select: none;\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}","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","lastUpdated":1737072575340,"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":"$24","code":"$25","lastUpdated":1738043309611,"examplesCode":"$26"},"Avatar":{"css":"$27","code":"$28","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":"$29","code":"$2a","lastUpdated":1734126526283,"examplesCode":"$2b"},"Dialog":{"css":"$2c","code":"$2d","lastUpdated":1734479636305,"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"},"Footer":{"css":"$2e","code":"$2f","userDef":"Create a footer component that displays the text 'Built with' followed by links to LLAMA, webllm, ProseMirror, and Combini. Each link should open in a new tab. Additionally, include icon links to Twitter and GitHub, using TwitterIcon and GithubIcon with a size of 16. The footer should be styled to match the existing design theme of earthy tones and subtle gradients.","lastUpdated":1737493327797,"examplesCode":"import React from 'react';\nimport { Footer } from './Footer';\n\nexport const DefaultFooterExample = {\n size: 'lg',\n backdrop: 'surface',\n title: 'Default Footer',\n component: () => (\n

Setting up preview

Resources