,\n};"},"Tabs":{"css":"$1d","code":"$1e","userDef":"","lastUpdated":1739900847803,"examplesCode":"$1f"},"Badge":{"css":"$20","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","lastUpdated":1735078859824,"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":"$21","code":"$22","userDef":"","lastUpdated":1739680427208,"examplesCode":"$23"},"Input":{"css":"$24","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":1735078862064,"examplesCode":"$25"},"Label":{"css":".label {\n font-family: var(--font-family-base);\n font-size: var(--font-size-md);\n color: var(--color-surface-text-primary);\n font-weight: var(--font-weight-normal);\n line-height: var(--line-height-md);\n border-radius: var(--radius-sm);\n \n /* Removed padding and background-color from hover */\n transition: color var(--animation-duration-fast) ease-out;\n\n /* Changed hover state to just color change */\n &:hover {\n color: var(--color-primary);\n cursor: default;\n }\n\n /* Focus state for accessibility */\n &:focus {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n }\n\n /* Disabled state */\n &:disabled {\n color: var(--color-surface-text-disabled);\n cursor: not-allowed;\n opacity: 0.6;\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","lastUpdated":1738613386050,"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":"$26","code":"$27","lastUpdated":1735102494693,"examplesCode":"$28"},"Avatar":{"css":"$29","code":"$2a","lastUpdated":1735091883702,"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":"$2b","code":"$2c","lastUpdated":1735148315899,"examplesCode":"$2d"},"Dialog":{"css":"$2e","code":"$2f","lastUpdated":1736550996985,"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":"$30","code":"$31","lastUpdated":1736637657442,"examplesCode":"$32"},"Slider":{"css":"$33","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":1735102832212,"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":"$34","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":1735102552988,"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":"$35","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":1736637366896,"examplesCode":"$36"},"Command":{"css":"$37","code":"$38","lastUpdated":1735102337361,"examplesCode":"$39"},"Popover":{"css":"$3a","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":1735102427413,"examplesCode":"$3b"},"Sidebar":{"css":"$3c","code":"$3d","lastUpdated":1738262960368,"examplesCode":"$3e"},"Spinner":{"css":"$3f","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","lastUpdated":1735079467203,"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":".content {\n background-color: var(--color-surface);\n color: var(--color-surface-text-primary);\n border: 2px solid var(--color-border);\n padding: var(--spacing-xs) var(--spacing-sm);\n font-family: var(--font-family-base);\n font-size: var(--font-size-sm);\n line-height: var(--line-height-md);\n border-radius: var(--radius-md) var(--radius-sm) var(--radius-lg) var(--radius-md);\n box-shadow: var(--shadow-md);\n max-width: 20rem;\n animation: scaleIn var(--animation-duration-normal) ease-out;\n transform-origin: var(--radix-tooltip-content-transform-origin);\n}\n\n@keyframes scaleIn {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}","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":1736896246158,"examplesCode":"$40"},"Calendar":{"css":"$41","code":"$42","lastUpdated":1735349071507,"examplesCode":"$43"},"Carousel":{"css":"$44","code":"$45","lastUpdated":1738780053892,"examplesCode":"$46"},"Checkbox":{"css":"$47","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","lastUpdated":1735102337706,"examplesCode":"$48"},"Progress":{"css":"$49","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":1737505906190,"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":"$4a","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":1735249885555,"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":"$4b","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","lastUpdated":1735101847578,"examplesCode":"$4c"},"Accordion":{"css":"$4d","code":"$4e","lastUpdated":1735079261974,"examplesCode":"$4f"},"HabitForm":{"css":"$50","code":"$51","userDef":"","lastUpdated":1740897423646,"examplesCode":"$52"},"HabitList":{"css":"$53","code":"$54","userDef":"","lastUpdated":1741546879101,"examplesCode":"$55"},"HoverCard":{"css":"$56","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":1735102388550,"examplesCode":"$57"},"Resizable":{"css":"$58","code":"$59","lastUpdated":1735350598926,"examplesCode":"$5a"},"Separator":{"css":"$5b","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","lastUpdated":1735103086477,"examplesCode":"$5c"},"Breadcrumb":{"css":"$5d","code":"$5e","lastUpdated":1735102329006,"examplesCode":"$5f"},"HabitStats":{"css":".habitStatsContainer {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xl);\n width: 100%;\n padding: var(--spacing-lg);\n background: var(--color-background);\n box-sizing: border-box;\n overflow-x: hidden;\n}\n\n.statsContent {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xl);\n width: 100%;\n}\n\n.topRow {\n display: flex;\n width: 100%;\n gap: var(--spacing-xl);\n}\n\n.columnItem {\n flex: 1;\n width: 50%;\n min-width: 0; /* Allow flex items to shrink below content size */\n}\n\n.fullWidthItem {\n width: 100%;\n}\n\n@media (max-width: 1023px) {\n .habitStatsContainer {\n padding: var(--spacing-md);\n }\n\n .topRow {\n flex-direction: column;\n gap: var(--spacing-lg);\n }\n\n .columnItem {\n width: 100%;\n }\n\n .statsContent {\n gap: var(--spacing-lg);\n }\n}","code":"$60","userDef":"","lastUpdated":1740897429761,"examplesCode":"$61"},"Pagination":{"css":"$62","code":"$63","lastUpdated":1735102433837,"examplesCode":"$64"},"RadioGroup":{"css":"$65","code":"$66","lastUpdated":1735102454018,"examplesCode":"$67"},"ScrollArea":{"css":"$68","code":"$69","lastUpdated":1736637048977,"examplesCode":"$6a"},"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 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":"$6b","lastUpdated":1737930670100,"examplesCode":"$6c"},"ContextMenu":{"css":"$6d","code":"$6e","lastUpdated":1735622158972,"examplesCode":"$6f"},"ToggleGroup":{"css":".toggleGroup {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--spacing-xs);\n padding: var(--spacing-xxs);\n width: fit-content;\n position: relative;\n}\n\n/* Make first item's left edge and last item's right edge more pronounced */\n.toggleGroup > :first-child {\n margin-left: calc(var(--spacing-xxs) * -1);\n}\n\n.toggleGroup > :last-child {\n margin-right: calc(var(--spacing-xxs) * -1);\n}\n\n/* Slightly stagger items vertically for organic feel */\n.toggleGroup > :nth-child(even) {\n transform: translateY(1px);\n}\n\n.toggleGroup > :nth-child(3n) {\n transform: translateY(-1px);\n}","code":"$70","lastUpdated":1735102601635,"examplesCode":"$71"},"CheckInSheet":{"css":"$72","code":"$73","userDef":"CheckInSheet renders a bottom sheet for logging habit check-ins, including a quick timestamp input, optional notes, and file attachment support.","lastUpdated":1739507454386,"examplesCode":"import React, { useState } from \"react\";\nimport { CheckInSheet } from \"./CheckInSheet\";\nimport { Column } from \"./Flex\";\n\nexport const BasicCheckInExample = {\n size: \"md\",\n backdrop: \"surface\",\n title: \"Basic Check-In Sheet\",\n component: () => {\n const [checkIns, setCheckIns] = useState([]);\n\n const handleCheckIn = (data: any) => {\n setCheckIns([...checkIns, data]);\n };\n\n return ;\n },\n};\n"},"DropdownMenu":{"css":"$74","code":"$75","lastUpdated":1735102347399,"examplesCode":"$76"},"FileDropzone":{"css":"$77","code":"$78","lastUpdated":1735102390761,"examplesCode":"$79"},"HandDrawnBox":{"css":".container {\n position: relative;\n background: var(--color-surface);\n border-radius: var(--radius-md);\n}\n\n.content {\n padding: var(--spacing-md);\n position: relative;\n z-index: 2;\n height: 100%;\n}\n\n.border {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 1;\n overflow: visible;\n}\n\n.border path {\n fill: none;\n stroke: var(--border-color);\n stroke-width: var(--border-width);\n stroke-linecap: round;\n stroke-linejoin: round;\n vector-effect: non-scaling-stroke;\n}","code":"$7a","userDef":"A container component that applies hand-drawn border effects using SVG paths. Accepts children and style props. Implements subtle randomization in border paths for authentic sketch feel.","lastUpdated":1735622485422,"examplesCode":"$7b"},"HabitCalendar":{"css":"$7c","code":"$7d","userDef":"","lastUpdated":1740897415415,"examplesCode":"$7e"},"SonnerToaster":{"css":"$7f","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","lastUpdated":1735079143939,"examplesCode":"$80"},"HabitCorrelation":{"css":"$81","code":"$82","userDef":"HabitCorrelation visualizes the correlations between different habits using a bar chart where each bar’s color indicates positive or negative correlation.","lastUpdated":1739506314989,"examplesCode":"import { HabitCorrelation } from './HabitCorrelation';\n\nexport const BasicHabitCorrelationExample = {\n size: \"md\", \n backdrop: \"surface\",\n title: \"Basic Habit Correlation\",\n component: () => {\n const correlations = {\n \"Sleep-Exercise\": 0.7,\n \"Meditation-Stress\": -0.5,\n \"Reading-Productivity\": 0.3,\n \"Diet-Energy\": 0.6,\n \"Hydration-Mood\": 0.2\n };\n\n return ;\n }\n};\n\nexport const MixedCorrelationsExample = {\n size: \"md\", \n backdrop: \"surface\", \n title: \"Mixed Correlations\",\n component: () => {\n const correlations = {\n \"Work-Stress\": -0.8,\n \"Exercise-Happiness\": 0.9,\n \"Sleep-Performance\": 0.5,\n \"Caffeine-Anxiety\": 0.4,\n \"Meditation-Wellbeing\": 0.7\n };\n\n return ;\n }\n};"},"ProgressDashboard":{"css":".dashboardContainer {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xl);\n width: 100%;\n}\n\n.cardsGrid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));\n gap: var(--spacing-md);\n width: 100%;\n}\n\n.card {\n height: 100%;\n}\n\n.card :global(.cardContent) {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-md);\n}\n\n.card :global(.cardContent) div {\n color: var(--color-text-primary);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-bold);\n line-height: var(--line-height-sm);\n}\n\n.chartWrapper {\n width: 100%;\n background: var(--color-surface);\n border-radius: var(--radius-md);\n padding: var(--spacing-md);\n}","code":"$83","userDef":"ProgressDashboard displays key habit statistics such as streaks, daily completion rate (with a progress bar), and total check-ins alongside a trend visualization chart.","lastUpdated":1739499190638,"examplesCode":"import React from 'react';\nimport { ProgressDashboard } from './ProgressDashboard';\n\nexport const BasicProgressDashboard = {\n size: \"lg\",\n backdrop: \"background\",\n title: \"Basic Progress Dashboard\",\n component: () => {\n const mockStats = {\n currentStreak: 5,\n bestStreak: 12,\n dailyCompletionRate: 65.5,\n weeklyCompletionRate: 72.3,\n monthlyCompletionRate: 68.9,\n progress: {\n 'habit1': 45,\n 'habit2': 75,\n 'habit3': 60\n }\n };\n\n return ;\n }\n}\n\nexport const EmptyProgressDashboard = {\n size: \"lg\", \n backdrop: \"background\",\n title: \"Empty Progress Dashboard\",\n component: () => {\n const emptyStats = {\n currentStreak: 0,\n bestStreak: 0,\n dailyCompletionRate: 0,\n weeklyCompletionRate: 0,\n monthlyCompletionRate: 0,\n progress: {}\n };\n\n return ;\n }\n}"},"TimeRangeSelector":{"css":".selectorContainer {\n display: flex;\n align-items: center;\n padding: var(--spacing-xs) 0;\n}\n\n.active {\n position: relative;\n color: var(--color-primary) !important;\n}\n\n.active::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: var(--spacing-xs);\n right: var(--spacing-xs);\n height: 2px;\n background-color: var(--color-primary);\n border-radius: var(--radius-sm);\n}","code":"$84","userDef":"TimeRangeSelector provides a compact button group that lets users select a time range (week, month, year, all) for filtering habit statistics.","lastUpdated":1739499189756,"examplesCode":"import React, { useState } from 'react';\nimport { TimeRangeSelector } from './TimeRangeSelector';\nimport { Column } from './Flex';\n\nexport const BasicTimeRangeSelectorExample = {\n size: 'md',\n backdrop: 'surface', \n title: 'Basic Time Range Selector',\n component: () => (\n \n )\n};\n\nexport const ControlledTimeRangeSelectorExample = {\n size: 'md', \n backdrop: 'surface',\n title: 'Controlled Time Range Selector',\n component: () => {\n const [selectedRange, setSelectedRange] = useState<'week' | 'month' | 'year' | 'all'>('month');\n \n return (\n \n \n

Current Range: {selectedRange}

\n \n );\n }\n};"},"AchievementTimeline":{"css":"$85","code":"$86","userDef":"AchievementTimeline displays a vertical timeline of major milestones with an icon, date, and description for each achievement.","lastUpdated":1739499178112,"examplesCode":"$87"}},"helpers":{"iconMapping":{"css":"/* No styling required for iconMapping helper */","code":"import React from \"react\";\nimport {\n Activity,\n Book,\n Brain,\n Dumbbell,\n Heart,\n Coffee,\n PenTool,\n Music,\n Sun,\n Target,\n Zap,\n Briefcase,\n GraduationCap,\n HelpCircle,\n} from \"lucide-react\";\n\nexport type IconComponentType = React.ComponentType<{\n size?: number;\n className?: string;\n}>;\n\nexport const iconMapping: Record = {\n Activity,\n Book,\n Brain,\n Dumbbell,\n Heart,\n Coffee,\n PenTool,\n Music,\n Sun,\n Target,\n Zap,\n Briefcase,\n GraduationCap,\n default: HelpCircle,\n};\n","userDef":"The iconMapping helper exports an object mapping habit icon names to their respective Lucide React icon components for use in the habit tracker.","testCode":"// No tests applicable for the iconMapping helper as it exports a constant mapping","lastUpdated":1739509580842},"useIsMobile":{"css":"","code":"import { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useIsMobile = (): boolean => {\n return useMediaQuery(\"(max-width: 767px)\");\n};\n","testCode":"","lastUpdated":1738013445328},"useBreakpoint":{"css":"/* This helper does not require any specific styling */","code":"import { useMediaQuery } from \"./useMediaQuery\";\n\nexport function useBreakpoint() {\n const isXs = useMediaQuery(\"(max-width: 479px)\");\n const isSm = useMediaQuery(\"(max-width: 639px)\");\n const isMd = useMediaQuery(\"(max-width: 767px)\");\n const isLg = useMediaQuery(\"(max-width: 1023px)\");\n const isXl = useMediaQuery(\"(max-width: 1279px)\");\n const is2xl = useMediaQuery(\"(min-width: 1280px)\");\n\n return { isXs, isSm, isMd, isLg, isXl, is2xl };\n}","userDef":"The useBreakpoint helper computes boolean flags for various responsive breakpoints using the useMediaQuery hook so that components can easily adapt to different screen sizes.","testCode":"$88","lastUpdated":1739510319457},"useHabitStats":{"css":"/* No CSS needed for this non-visual helper */","code":"$89","userDef":"useHabitStats calculates various statistics for habits—including streaks, completion rates, best performing weekdays, progress toward a default daily goal, habit correlations, and time-based completion patterns—by analyzing an array of habit check-in records.","testCode":"$8a","lastUpdated":1739579894590},"useMediaQuery":{"css":"","code":"$8b","testCode":"$8c","lastUpdated":1738013444636},"useLocalStorage":{"css":"/* No styling is required for this non-visual helper */","code":"$8d","userDef":"useLocalStorage: This hook manages local storage persistence for habits and habit records by loading initial data from local storage (or defaults), automatically saving changes, and providing update methods while gracefully handling JSON serialization/deserialization and storage errors.","testCode":"$8e","lastUpdated":1739580569863},"useUndoableCheckIn":{"css":"/* No styling required for this non-visual helper */","code":"$8f","userDef":"useUndoableCheckIn is a hook that manages undoable check-ins by saving the previous habits and habitRecords state before updating and providing an undo function to revert changes (with automatic clearing after a timeout).","testCode":"$90","lastUpdated":1739580281192}},"endpoints":{},"pages":{"_index":{"css":"","code":"import { Main } from \"../components/Main\";\nexport default function Page() {\n return

;\n}","layout":"","userDef":"","lastUpdated":1744669081873}},"createdAt":"$D2025-02-14T02:03:09.790Z","updatedAt":"$D2025-02-14T02:03:09.790Z","userId":"9f7aa15f-407b-42a1-a912-67490a670b75","public":true,"mainComponentPlan":"$91","dependencies":{},"resources":[],"connectedResources":[],"editable":false},"userId":"$undefined","editable":false}]]

Chat

Setting up preview

Resources