[{"data":1,"prerenderedAt":4605},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-calendar":682,"-docs-theme-components-calendar-surround":4600},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":432,"body":684,"description":4594,"extension":1356,"links":4595,"meta":4596,"navigation":4597,"path":433,"seo":4598,"stem":434,"__hash__":4599},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar.md",{"type":685,"value":686,"toc":4559},"minimark",[687,691,716,792,806,813,817,820,887,891,2841,2845,2863,2867,2872,2947,2968,2971,2988,3039,3043,3047,3063,3128,3132,3143,3147,3165,3169,3173,3184,3188,3208,3211,3215,3220,3224,3239,3242,3246,3265,3268,3272,3283,3286,3290,3323,3326,3329,3332,3342,3345,3349,3357,3360,3364,3377,3380,3383,3386,3635,3638,3724,3728,3732,3735,3899,3903,3910,4061,4066,4069,4075,4089,4094,4200,4205,4239,4245,4260,4264,4418,4423,4427,4479,4483,4555],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,706,707,715],"p",{},"The ",[696,697,432],"strong",{}," is a styling recipe for a date grid — the parts and per-cell states a date picker renders. It is a styling layer, not a date engine: selection, range logic, month navigation and time picking belong to the headless library you wire it to (for example ",[700,701,705],"a",{"href":702,"rel":703},"https:\u002F\u002Fdaypicker.dev",[704],"nofollow","React DayPicker"," or ",[700,708,711],{"href":709,"rel":710},"https:\u002F\u002Freact-spectrum.adobe.com\u002Finternationalized\u002Fdate\u002F",[704],[712,713,714],"code",{},"@internationalized\u002Fdate","). It is composed of two recipe parts:",[717,718,719,744],"ul",{},[720,721,722,727,728,731,732,735,736,739,740,743],"li",{},[696,723,724],{},[712,725,726],{},"useCalendarRecipe()"," — the ",[712,729,730],{},".calendar"," surface that owns the border, radius, padding, the header\u002Fgrid\u002Ffooter layout, and the ",[712,733,734],{},"size"," axis. Each size sets the ",[712,737,738],{},"--calendar-cell-size"," and ",[712,741,742],{},"--calendar-cell-font-size"," custom properties, which cascade to every cell.",[720,745,746,727,751,754,755,758,759,758,762,758,765,758,768,739,771,774,775,778,779,758,782,758,785,758,788,791],{},[696,747,748],{},[712,749,750],{},"useCalendarDayRecipe()",[712,752,753],{},".calendar-day"," button rendered for each day. It owns the square, content-adaptive cell, the ",[712,756,757],{},"selected",", ",[712,760,761],{},"today",[712,763,764],{},"outside",[712,766,767],{},"disabled",[712,769,770],{},"booked",[712,772,773],{},"range"," state axes, and a ",[712,776,777],{},"variant"," axis (",[712,780,781],{},"solid",[712,783,784],{},"outline",[712,786,787],{},"soft",[712,789,790],{},"subtle",") for the active-selection style.",[692,793,794,795,799,800,802,803,805],{},"Everything else — the caption, navigation, weekday header, week rows, week numbers, presets sidebar and footer — is a structural class emitted by the root recipe (see ",[700,796,798],{"href":797},"#anatomy","Anatomy","). Navigation and preset buttons reuse the ",[700,801,368],{"href":369}," recipe, time fields reuse the ",[700,804,452],{"href":453}," recipe, and the month\u002Fyear selects reuse the Select recipe.",[692,807,808,809,812],{},"The Calendar recipes integrate directly with the default ",[700,810,811],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[688,814,816],{"id":815},"why-use-the-calendar-recipe","Why use the Calendar recipe?",[692,818,819],{},"The Calendar recipe helps you:",[717,821,822,828,844,856,869,878],{},[720,823,824,827],{},[696,825,826],{},"Style any headless calendar",": Map the part classes onto React DayPicker, Reka UI, or your own grid — the recipe styles the slots, the library drives the dates.",[720,829,830,833,834,758,836,838,839,758,841,843],{},[696,831,832],{},"Ship every state out of the box",": ",[712,835,757],{},[712,837,761],{},", range start\u002Fmiddle\u002Fend, ",[712,840,770],{},[712,842,767],{}," and outside-month all follow the same design rules.",[720,845,846,849,850,852,853,855],{},[696,847,848],{},"Drive density from one place",": A single ",[712,851,734],{}," sets ",[712,854,738],{},", which cascades to every cell, week number and weekday label.",[720,857,858,833,861,864,865,868],{},[696,859,860],{},"Keep cells square and content-adaptive",[712,862,863],{},"aspect-ratio: 1"," plus a ",[712,866,867],{},"min"," floor keeps cells square while letting them grow to fit content (like a price label on a booked day).",[720,870,871,874,875,877],{},[696,872,873],{},"Customize without forking",": Override base styles, default variants, or the ",[712,876,738],{}," custom property — all through the options API.",[720,879,880,883,884,886],{},[696,881,882],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid ",[712,885,734],{}," or state values at compile time.",[688,888,890],{"id":889},"usage","Usage",[892,893,895,900,907,1175,1179,1197,2833,2837],"steps",{"level":894},"4",[896,897,899],"h4",{"id":898},"register-the-recipes","Register the recipes",[692,901,902,903,906],{},"Add the Calendar recipes to a local Styleframe instance. The global ",[712,904,905],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[908,909,911,1069],"code-tree",{"default-value":910},"src\u002Fcomponents\u002Fcalendar.styleframe.ts",[912,913,918],"pre",{"className":914,"code":915,"filename":910,"language":916,"meta":917,"style":917},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useCalendarRecipe, useCalendarDayRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst calendar = useCalendarRecipe(s);\nconst calendarDay = useCalendarDayRecipe(s);\n\nexport default s;\n","ts","",[712,919,920,956,985,991,1012,1017,1034,1050,1055],{"__ignoreMap":917},[921,922,925,929,933,937,940,943,946,950,953],"span",{"class":923,"line":924},"line",1,[921,926,928],{"class":927},"s7zQu","import",[921,930,932],{"class":931},"sMK4o"," {",[921,934,936],{"class":935},"sTEyZ"," styleframe",[921,938,939],{"class":931}," }",[921,941,942],{"class":927}," from",[921,944,945],{"class":931}," '",[921,947,949],{"class":948},"sfazB","virtual:styleframe",[921,951,952],{"class":931},"'",[921,954,955],{"class":931},";\n",[921,957,959,961,963,966,969,972,974,976,978,981,983],{"class":923,"line":958},2,[921,960,928],{"class":927},[921,962,932],{"class":931},[921,964,965],{"class":935}," useCalendarRecipe",[921,967,968],{"class":931},",",[921,970,971],{"class":935}," useCalendarDayRecipe",[921,973,939],{"class":931},[921,975,942],{"class":927},[921,977,945],{"class":931},[921,979,980],{"class":948},"@styleframe\u002Ftheme",[921,982,952],{"class":931},[921,984,955],{"class":931},[921,986,988],{"class":923,"line":987},3,[921,989,990],{"emptyLinePlaceholder":223},"\n",[921,992,994,998,1001,1004,1007,1010],{"class":923,"line":993},4,[921,995,997],{"class":996},"spNyl","const",[921,999,1000],{"class":935}," s ",[921,1002,1003],{"class":931},"=",[921,1005,936],{"class":1006},"s2Zo4",[921,1008,1009],{"class":935},"()",[921,1011,955],{"class":931},[921,1013,1015],{"class":923,"line":1014},5,[921,1016,990],{"emptyLinePlaceholder":223},[921,1018,1020,1022,1025,1027,1029,1032],{"class":923,"line":1019},6,[921,1021,997],{"class":996},[921,1023,1024],{"class":935}," calendar ",[921,1026,1003],{"class":931},[921,1028,965],{"class":1006},[921,1030,1031],{"class":935},"(s)",[921,1033,955],{"class":931},[921,1035,1037,1039,1042,1044,1046,1048],{"class":923,"line":1036},7,[921,1038,997],{"class":996},[921,1040,1041],{"class":935}," calendarDay ",[921,1043,1003],{"class":931},[921,1045,971],{"class":1006},[921,1047,1031],{"class":935},[921,1049,955],{"class":931},[921,1051,1053],{"class":923,"line":1052},8,[921,1054,990],{"emptyLinePlaceholder":223},[921,1056,1058,1061,1064,1067],{"class":923,"line":1057},9,[921,1059,1060],{"class":927},"export",[921,1062,1063],{"class":927}," default",[921,1065,1066],{"class":935}," s",[921,1068,955],{"class":931},[912,1070,1072],{"className":914,"code":1071,"filename":905,"language":916,"meta":917,"style":917},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[712,1073,1074,1095,1121,1125,1139,1143,1152,1161,1165],{"__ignoreMap":917},[921,1075,1076,1078,1080,1082,1084,1086,1088,1091,1093],{"class":923,"line":924},[921,1077,928],{"class":927},[921,1079,932],{"class":931},[921,1081,936],{"class":935},[921,1083,939],{"class":931},[921,1085,942],{"class":927},[921,1087,945],{"class":931},[921,1089,1090],{"class":948},"styleframe",[921,1092,952],{"class":931},[921,1094,955],{"class":931},[921,1096,1097,1099,1101,1104,1106,1109,1111,1113,1115,1117,1119],{"class":923,"line":958},[921,1098,928],{"class":927},[921,1100,932],{"class":931},[921,1102,1103],{"class":935}," useDesignTokensPreset",[921,1105,968],{"class":931},[921,1107,1108],{"class":935}," useUtilitiesPreset",[921,1110,939],{"class":931},[921,1112,942],{"class":927},[921,1114,945],{"class":931},[921,1116,980],{"class":948},[921,1118,952],{"class":931},[921,1120,955],{"class":931},[921,1122,1123],{"class":923,"line":987},[921,1124,990],{"emptyLinePlaceholder":223},[921,1126,1127,1129,1131,1133,1135,1137],{"class":923,"line":993},[921,1128,997],{"class":996},[921,1130,1000],{"class":935},[921,1132,1003],{"class":931},[921,1134,936],{"class":1006},[921,1136,1009],{"class":935},[921,1138,955],{"class":931},[921,1140,1141],{"class":923,"line":1014},[921,1142,990],{"emptyLinePlaceholder":223},[921,1144,1145,1148,1150],{"class":923,"line":1019},[921,1146,1147],{"class":1006},"useDesignTokensPreset",[921,1149,1031],{"class":935},[921,1151,955],{"class":931},[921,1153,1154,1157,1159],{"class":923,"line":1036},[921,1155,1156],{"class":1006},"useUtilitiesPreset",[921,1158,1031],{"class":935},[921,1160,955],{"class":931},[921,1162,1163],{"class":923,"line":1052},[921,1164,990],{"emptyLinePlaceholder":223},[921,1166,1167,1169,1171,1173],{"class":923,"line":1057},[921,1168,1060],{"class":927},[921,1170,1063],{"class":927},[921,1172,1066],{"class":935},[921,1174,955],{"class":931},[896,1176,1178],{"id":1177},"build-the-component","Build the component",[692,1180,1181,1182,1185,1186,1189,1190,739,1193,1196],{},"Put ",[712,1183,1184],{},"calendar({ size })"," on the root and ",[712,1187,1188],{},"calendarDay({ ... })"," on each day button. Map the structural classes onto your calendar library's slots. With React DayPicker the recipe classes drop straight into ",[712,1191,1192],{},"classNames",[712,1194,1195],{},"modifiersClassNames",":",[1198,1199,1200,1867,2455],"framework-switcher",{},[1201,1202,1203],"template",{"v-slot:react":917},[912,1204,1207],{"className":914,"code":1205,"filename":1206,"language":916,"meta":917,"style":917},"import { DayPicker } from \"react-day-picker\";\nimport { calendar, calendarDay } from \"virtual:styleframe\";\n\nexport function Calendar(props: React.ComponentProps\u003Ctypeof DayPicker>) {\n    return (\n        \u003CDayPicker\n            showWeekNumber\n            classNames={{\n                root: calendar({ size: \"md\" }),\n                months: \"calendar-months\",\n                month: \"calendar-month\",\n                month_caption: \"calendar-caption\",\n                caption_label: \"calendar-caption-label\",\n                dropdowns: \"calendar-caption-dropdowns\",\n                nav: \"calendar-nav\",\n                month_grid: \"calendar-grid\",\n                weekdays: \"calendar-weekdays\",\n                weekday: \"calendar-weekday\",\n                week: \"calendar-week\",\n                week_number: \"calendar-week-number\",\n                day_button: calendarDay(),\n            }}\n            modifiersClassNames={{\n                selected: calendarDay({ selected: \"true\" }),\n                today: calendarDay({ today: \"true\" }),\n                outside: calendarDay({ outside: \"true\" }),\n                disabled: calendarDay({ disabled: \"true\" }),\n                booked: calendarDay({ booked: \"true\" }),\n                range_start: calendarDay({ range: \"start\" }),\n                range_middle: calendarDay({ range: \"middle\" }),\n                range_end: calendarDay({ range: \"end\" }),\n            }}\n            {...props}\n        \u002F>\n    );\n}\n","src\u002Fcomponents\u002FCalendar.tsx",[712,1208,1209,1233,1259,1263,1303,1312,1320,1325,1333,1367,1384,1401,1418,1435,1452,1469,1486,1503,1520,1537,1554,1568,1574,1582,1614,1645,1676,1707,1738,1770,1801,1832,1837,1848,1854,1862],{"__ignoreMap":917},[921,1210,1211,1213,1215,1218,1220,1222,1225,1228,1231],{"class":923,"line":924},[921,1212,928],{"class":927},[921,1214,932],{"class":931},[921,1216,1217],{"class":935}," DayPicker",[921,1219,939],{"class":931},[921,1221,942],{"class":927},[921,1223,1224],{"class":931}," \"",[921,1226,1227],{"class":948},"react-day-picker",[921,1229,1230],{"class":931},"\"",[921,1232,955],{"class":931},[921,1234,1235,1237,1239,1242,1244,1247,1249,1251,1253,1255,1257],{"class":923,"line":958},[921,1236,928],{"class":927},[921,1238,932],{"class":931},[921,1240,1241],{"class":935}," calendar",[921,1243,968],{"class":931},[921,1245,1246],{"class":935}," calendarDay",[921,1248,939],{"class":931},[921,1250,942],{"class":927},[921,1252,1224],{"class":931},[921,1254,949],{"class":948},[921,1256,1230],{"class":931},[921,1258,955],{"class":931},[921,1260,1261],{"class":923,"line":987},[921,1262,990],{"emptyLinePlaceholder":223},[921,1264,1265,1267,1270,1273,1276,1280,1282,1286,1289,1292,1295,1297,1300],{"class":923,"line":993},[921,1266,1060],{"class":927},[921,1268,1269],{"class":996}," function",[921,1271,1272],{"class":1006}," Calendar",[921,1274,1275],{"class":931},"(",[921,1277,1279],{"class":1278},"sHdIc","props",[921,1281,1196],{"class":931},[921,1283,1285],{"class":1284},"sBMFI"," React",[921,1287,1288],{"class":931},".",[921,1290,1291],{"class":1284},"ComponentProps",[921,1293,1294],{"class":931},"\u003Ctypeof",[921,1296,1217],{"class":935},[921,1298,1299],{"class":931},">)",[921,1301,1302],{"class":931}," {\n",[921,1304,1305,1308],{"class":923,"line":1014},[921,1306,1307],{"class":927},"    return",[921,1309,1311],{"class":1310},"swJcz"," (\n",[921,1313,1314,1317],{"class":923,"line":1019},[921,1315,1316],{"class":931},"        \u003C",[921,1318,1319],{"class":1278},"DayPicker\n",[921,1321,1322],{"class":923,"line":1036},[921,1323,1324],{"class":1278},"            showWeekNumber\n",[921,1326,1327,1330],{"class":923,"line":1052},[921,1328,1329],{"class":935},"            classNames",[921,1331,1332],{"class":931},"={{\n",[921,1334,1335,1338,1340,1342,1344,1347,1350,1352,1354,1357,1359,1361,1364],{"class":923,"line":1057},[921,1336,1337],{"class":1284},"                root",[921,1339,1196],{"class":931},[921,1341,1241],{"class":1006},[921,1343,1275],{"class":1310},[921,1345,1346],{"class":931},"{",[921,1348,1349],{"class":1310}," size",[921,1351,1196],{"class":931},[921,1353,1224],{"class":931},[921,1355,1356],{"class":948},"md",[921,1358,1230],{"class":931},[921,1360,939],{"class":931},[921,1362,1363],{"class":1310},")",[921,1365,1366],{"class":931},",\n",[921,1368,1370,1373,1375,1377,1380,1382],{"class":923,"line":1369},10,[921,1371,1372],{"class":1284},"                months",[921,1374,1196],{"class":931},[921,1376,1224],{"class":931},[921,1378,1379],{"class":948},"calendar-months",[921,1381,1230],{"class":931},[921,1383,1366],{"class":931},[921,1385,1387,1390,1392,1394,1397,1399],{"class":923,"line":1386},11,[921,1388,1389],{"class":1284},"                month",[921,1391,1196],{"class":931},[921,1393,1224],{"class":931},[921,1395,1396],{"class":948},"calendar-month",[921,1398,1230],{"class":931},[921,1400,1366],{"class":931},[921,1402,1404,1407,1409,1411,1414,1416],{"class":923,"line":1403},12,[921,1405,1406],{"class":1284},"                month_caption",[921,1408,1196],{"class":931},[921,1410,1224],{"class":931},[921,1412,1413],{"class":948},"calendar-caption",[921,1415,1230],{"class":931},[921,1417,1366],{"class":931},[921,1419,1421,1424,1426,1428,1431,1433],{"class":923,"line":1420},13,[921,1422,1423],{"class":1284},"                caption_label",[921,1425,1196],{"class":931},[921,1427,1224],{"class":931},[921,1429,1430],{"class":948},"calendar-caption-label",[921,1432,1230],{"class":931},[921,1434,1366],{"class":931},[921,1436,1438,1441,1443,1445,1448,1450],{"class":923,"line":1437},14,[921,1439,1440],{"class":1284},"                dropdowns",[921,1442,1196],{"class":931},[921,1444,1224],{"class":931},[921,1446,1447],{"class":948},"calendar-caption-dropdowns",[921,1449,1230],{"class":931},[921,1451,1366],{"class":931},[921,1453,1455,1458,1460,1462,1465,1467],{"class":923,"line":1454},15,[921,1456,1457],{"class":1284},"                nav",[921,1459,1196],{"class":931},[921,1461,1224],{"class":931},[921,1463,1464],{"class":948},"calendar-nav",[921,1466,1230],{"class":931},[921,1468,1366],{"class":931},[921,1470,1472,1475,1477,1479,1482,1484],{"class":923,"line":1471},16,[921,1473,1474],{"class":1284},"                month_grid",[921,1476,1196],{"class":931},[921,1478,1224],{"class":931},[921,1480,1481],{"class":948},"calendar-grid",[921,1483,1230],{"class":931},[921,1485,1366],{"class":931},[921,1487,1489,1492,1494,1496,1499,1501],{"class":923,"line":1488},17,[921,1490,1491],{"class":1284},"                weekdays",[921,1493,1196],{"class":931},[921,1495,1224],{"class":931},[921,1497,1498],{"class":948},"calendar-weekdays",[921,1500,1230],{"class":931},[921,1502,1366],{"class":931},[921,1504,1506,1509,1511,1513,1516,1518],{"class":923,"line":1505},18,[921,1507,1508],{"class":1284},"                weekday",[921,1510,1196],{"class":931},[921,1512,1224],{"class":931},[921,1514,1515],{"class":948},"calendar-weekday",[921,1517,1230],{"class":931},[921,1519,1366],{"class":931},[921,1521,1523,1526,1528,1530,1533,1535],{"class":923,"line":1522},19,[921,1524,1525],{"class":1284},"                week",[921,1527,1196],{"class":931},[921,1529,1224],{"class":931},[921,1531,1532],{"class":948},"calendar-week",[921,1534,1230],{"class":931},[921,1536,1366],{"class":931},[921,1538,1540,1543,1545,1547,1550,1552],{"class":923,"line":1539},20,[921,1541,1542],{"class":1284},"                week_number",[921,1544,1196],{"class":931},[921,1546,1224],{"class":931},[921,1548,1549],{"class":948},"calendar-week-number",[921,1551,1230],{"class":931},[921,1553,1366],{"class":931},[921,1555,1557,1560,1562,1564,1566],{"class":923,"line":1556},21,[921,1558,1559],{"class":1284},"                day_button",[921,1561,1196],{"class":931},[921,1563,1246],{"class":1006},[921,1565,1009],{"class":1310},[921,1567,1366],{"class":931},[921,1569,1571],{"class":923,"line":1570},22,[921,1572,1573],{"class":931},"            }}\n",[921,1575,1577,1580],{"class":923,"line":1576},23,[921,1578,1579],{"class":935},"            modifiersClassNames",[921,1581,1332],{"class":931},[921,1583,1585,1588,1590,1592,1594,1596,1599,1601,1603,1606,1608,1610,1612],{"class":923,"line":1584},24,[921,1586,1587],{"class":1284},"                selected",[921,1589,1196],{"class":931},[921,1591,1246],{"class":1006},[921,1593,1275],{"class":1310},[921,1595,1346],{"class":931},[921,1597,1598],{"class":1310}," selected",[921,1600,1196],{"class":931},[921,1602,1224],{"class":931},[921,1604,1605],{"class":948},"true",[921,1607,1230],{"class":931},[921,1609,939],{"class":931},[921,1611,1363],{"class":1310},[921,1613,1366],{"class":931},[921,1615,1617,1620,1622,1624,1626,1628,1631,1633,1635,1637,1639,1641,1643],{"class":923,"line":1616},25,[921,1618,1619],{"class":1284},"                today",[921,1621,1196],{"class":931},[921,1623,1246],{"class":1006},[921,1625,1275],{"class":1310},[921,1627,1346],{"class":931},[921,1629,1630],{"class":1310}," today",[921,1632,1196],{"class":931},[921,1634,1224],{"class":931},[921,1636,1605],{"class":948},[921,1638,1230],{"class":931},[921,1640,939],{"class":931},[921,1642,1363],{"class":1310},[921,1644,1366],{"class":931},[921,1646,1648,1651,1653,1655,1657,1659,1662,1664,1666,1668,1670,1672,1674],{"class":923,"line":1647},26,[921,1649,1650],{"class":1284},"                outside",[921,1652,1196],{"class":931},[921,1654,1246],{"class":1006},[921,1656,1275],{"class":1310},[921,1658,1346],{"class":931},[921,1660,1661],{"class":1310}," outside",[921,1663,1196],{"class":931},[921,1665,1224],{"class":931},[921,1667,1605],{"class":948},[921,1669,1230],{"class":931},[921,1671,939],{"class":931},[921,1673,1363],{"class":1310},[921,1675,1366],{"class":931},[921,1677,1679,1682,1684,1686,1688,1690,1693,1695,1697,1699,1701,1703,1705],{"class":923,"line":1678},27,[921,1680,1681],{"class":1284},"                disabled",[921,1683,1196],{"class":931},[921,1685,1246],{"class":1006},[921,1687,1275],{"class":1310},[921,1689,1346],{"class":931},[921,1691,1692],{"class":1310}," disabled",[921,1694,1196],{"class":931},[921,1696,1224],{"class":931},[921,1698,1605],{"class":948},[921,1700,1230],{"class":931},[921,1702,939],{"class":931},[921,1704,1363],{"class":1310},[921,1706,1366],{"class":931},[921,1708,1710,1713,1715,1717,1719,1721,1724,1726,1728,1730,1732,1734,1736],{"class":923,"line":1709},28,[921,1711,1712],{"class":1284},"                booked",[921,1714,1196],{"class":931},[921,1716,1246],{"class":1006},[921,1718,1275],{"class":1310},[921,1720,1346],{"class":931},[921,1722,1723],{"class":1310}," booked",[921,1725,1196],{"class":931},[921,1727,1224],{"class":931},[921,1729,1605],{"class":948},[921,1731,1230],{"class":931},[921,1733,939],{"class":931},[921,1735,1363],{"class":1310},[921,1737,1366],{"class":931},[921,1739,1741,1744,1746,1748,1750,1752,1755,1757,1759,1762,1764,1766,1768],{"class":923,"line":1740},29,[921,1742,1743],{"class":1284},"                range_start",[921,1745,1196],{"class":931},[921,1747,1246],{"class":1006},[921,1749,1275],{"class":1310},[921,1751,1346],{"class":931},[921,1753,1754],{"class":1310}," range",[921,1756,1196],{"class":931},[921,1758,1224],{"class":931},[921,1760,1761],{"class":948},"start",[921,1763,1230],{"class":931},[921,1765,939],{"class":931},[921,1767,1363],{"class":1310},[921,1769,1366],{"class":931},[921,1771,1773,1776,1778,1780,1782,1784,1786,1788,1790,1793,1795,1797,1799],{"class":923,"line":1772},30,[921,1774,1775],{"class":1284},"                range_middle",[921,1777,1196],{"class":931},[921,1779,1246],{"class":1006},[921,1781,1275],{"class":1310},[921,1783,1346],{"class":931},[921,1785,1754],{"class":1310},[921,1787,1196],{"class":931},[921,1789,1224],{"class":931},[921,1791,1792],{"class":948},"middle",[921,1794,1230],{"class":931},[921,1796,939],{"class":931},[921,1798,1363],{"class":1310},[921,1800,1366],{"class":931},[921,1802,1804,1807,1809,1811,1813,1815,1817,1819,1821,1824,1826,1828,1830],{"class":923,"line":1803},31,[921,1805,1806],{"class":1284},"                range_end",[921,1808,1196],{"class":931},[921,1810,1246],{"class":1006},[921,1812,1275],{"class":1310},[921,1814,1346],{"class":931},[921,1816,1754],{"class":1310},[921,1818,1196],{"class":931},[921,1820,1224],{"class":931},[921,1822,1823],{"class":948},"end",[921,1825,1230],{"class":931},[921,1827,939],{"class":931},[921,1829,1363],{"class":1310},[921,1831,1366],{"class":931},[921,1833,1835],{"class":923,"line":1834},32,[921,1836,1573],{"class":931},[921,1838,1840,1843,1845],{"class":923,"line":1839},33,[921,1841,1842],{"class":931},"            {...",[921,1844,1279],{"class":1278},[921,1846,1847],{"class":931},"}\n",[921,1849,1851],{"class":923,"line":1850},34,[921,1852,1853],{"class":931},"        \u002F>\n",[921,1855,1857,1860],{"class":923,"line":1856},35,[921,1858,1859],{"class":1310},"    )",[921,1861,955],{"class":931},[921,1863,1865],{"class":923,"line":1864},36,[921,1866,1847],{"class":931},[1201,1868,1869],{"v-slot:vue":917},[912,1870,1875],{"className":1871,"code":1872,"filename":1873,"language":1874,"meta":917,"style":917},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { calendar, calendarDay } from \"virtual:styleframe\";\n\n\u002F\u002F `weeks` is a 6×7 matrix of day descriptors produced by your date library\n\u002F\u002F (e.g. @internationalized\u002Fdate or reka-ui). Each cell carries its state.\nconst { size = \"md\", weeks } = defineProps\u003C{\n    size?: \"sm\" | \"md\" | \"lg\";\n    weeks: Array\u003CArray\u003C{\n        day: number;\n        outside: boolean;\n        today: boolean;\n        selected: boolean;\n        range: \"none\" | \"start\" | \"middle\" | \"end\";\n    }>>;\n}>();\n\nconst rootClass = computed(() => calendar({ size }));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"rootClass\">\n        \u003Cdiv class=\"calendar-month\">\n            \u003Cdiv class=\"calendar-grid\">\n                \u003Cdiv v-for=\"(week, wi) in weeks\" :key=\"wi\" class=\"calendar-week\">\n                    \u003Cbutton\n                        v-for=\"cell in week\"\n                        :key=\"cell.day\"\n                        :class=\"calendarDay({\n                            outside: cell.outside ? 'true' : 'false',\n                            today: cell.today ? 'true' : 'false',\n                            selected: cell.selected ? 'true' : 'false',\n                            range: cell.range,\n                        })\"\n                    >\n                        {{ cell.day }}\n                    \u003C\u002Fbutton>\n                \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FCalendar.vue","vue",[712,1876,1877,1902,1923,1947,1951,1957,1962,1996,2031,2048,2060,2072,2083,2094,2134,2139,2148,2152,2185,2194,2198,2206,2228,2247,2266,2309,2317,2332,2346,2358,2363,2368,2373,2378,2385,2390,2395,2406,2416,2426,2436,2446],{"__ignoreMap":917},[921,1878,1879,1882,1885,1888,1891,1893,1895,1897,1899],{"class":923,"line":924},[921,1880,1881],{"class":931},"\u003C",[921,1883,1884],{"class":1310},"script",[921,1886,1887],{"class":996}," setup",[921,1889,1890],{"class":996}," lang",[921,1892,1003],{"class":931},[921,1894,1230],{"class":931},[921,1896,916],{"class":948},[921,1898,1230],{"class":931},[921,1900,1901],{"class":931},">\n",[921,1903,1904,1906,1908,1911,1913,1915,1917,1919,1921],{"class":923,"line":958},[921,1905,928],{"class":927},[921,1907,932],{"class":931},[921,1909,1910],{"class":935}," computed",[921,1912,939],{"class":931},[921,1914,942],{"class":927},[921,1916,1224],{"class":931},[921,1918,1874],{"class":948},[921,1920,1230],{"class":931},[921,1922,955],{"class":931},[921,1924,1925,1927,1929,1931,1933,1935,1937,1939,1941,1943,1945],{"class":923,"line":987},[921,1926,928],{"class":927},[921,1928,932],{"class":931},[921,1930,1241],{"class":935},[921,1932,968],{"class":931},[921,1934,1246],{"class":935},[921,1936,939],{"class":931},[921,1938,942],{"class":927},[921,1940,1224],{"class":931},[921,1942,949],{"class":948},[921,1944,1230],{"class":931},[921,1946,955],{"class":931},[921,1948,1949],{"class":923,"line":993},[921,1950,990],{"emptyLinePlaceholder":223},[921,1952,1953],{"class":923,"line":1014},[921,1954,1956],{"class":1955},"sHwdD","\u002F\u002F `weeks` is a 6×7 matrix of day descriptors produced by your date library\n",[921,1958,1959],{"class":923,"line":1019},[921,1960,1961],{"class":1955},"\u002F\u002F (e.g. @internationalized\u002Fdate or reka-ui). Each cell carries its state.\n",[921,1963,1964,1966,1968,1971,1973,1975,1977,1979,1981,1984,1987,1990,1993],{"class":923,"line":1036},[921,1965,997],{"class":996},[921,1967,932],{"class":931},[921,1969,1970],{"class":935}," size ",[921,1972,1003],{"class":931},[921,1974,1224],{"class":931},[921,1976,1356],{"class":948},[921,1978,1230],{"class":931},[921,1980,968],{"class":931},[921,1982,1983],{"class":935}," weeks ",[921,1985,1986],{"class":931},"}",[921,1988,1989],{"class":931}," =",[921,1991,1992],{"class":1006}," defineProps",[921,1994,1995],{"class":931},"\u003C{\n",[921,1997,1998,2001,2004,2006,2009,2011,2014,2016,2018,2020,2022,2024,2027,2029],{"class":923,"line":1052},[921,1999,2000],{"class":1310},"    size",[921,2002,2003],{"class":931},"?:",[921,2005,1224],{"class":931},[921,2007,2008],{"class":948},"sm",[921,2010,1230],{"class":931},[921,2012,2013],{"class":931}," |",[921,2015,1224],{"class":931},[921,2017,1356],{"class":948},[921,2019,1230],{"class":931},[921,2021,2013],{"class":931},[921,2023,1224],{"class":931},[921,2025,2026],{"class":948},"lg",[921,2028,1230],{"class":931},[921,2030,955],{"class":931},[921,2032,2033,2036,2038,2041,2043,2046],{"class":923,"line":1057},[921,2034,2035],{"class":1310},"    weeks",[921,2037,1196],{"class":931},[921,2039,2040],{"class":1284}," Array",[921,2042,1881],{"class":931},[921,2044,2045],{"class":1284},"Array",[921,2047,1995],{"class":931},[921,2049,2050,2053,2055,2058],{"class":923,"line":1369},[921,2051,2052],{"class":1310},"        day",[921,2054,1196],{"class":931},[921,2056,2057],{"class":1284}," number",[921,2059,955],{"class":931},[921,2061,2062,2065,2067,2070],{"class":923,"line":1386},[921,2063,2064],{"class":1310},"        outside",[921,2066,1196],{"class":931},[921,2068,2069],{"class":1284}," boolean",[921,2071,955],{"class":931},[921,2073,2074,2077,2079,2081],{"class":923,"line":1403},[921,2075,2076],{"class":1310},"        today",[921,2078,1196],{"class":931},[921,2080,2069],{"class":1284},[921,2082,955],{"class":931},[921,2084,2085,2088,2090,2092],{"class":923,"line":1420},[921,2086,2087],{"class":1310},"        selected",[921,2089,1196],{"class":931},[921,2091,2069],{"class":1284},[921,2093,955],{"class":931},[921,2095,2096,2099,2101,2103,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124,2126,2128,2130,2132],{"class":923,"line":1437},[921,2097,2098],{"class":1310},"        range",[921,2100,1196],{"class":931},[921,2102,1224],{"class":931},[921,2104,2105],{"class":948},"none",[921,2107,1230],{"class":931},[921,2109,2013],{"class":931},[921,2111,1224],{"class":931},[921,2113,1761],{"class":948},[921,2115,1230],{"class":931},[921,2117,2013],{"class":931},[921,2119,1224],{"class":931},[921,2121,1792],{"class":948},[921,2123,1230],{"class":931},[921,2125,2013],{"class":931},[921,2127,1224],{"class":931},[921,2129,1823],{"class":948},[921,2131,1230],{"class":931},[921,2133,955],{"class":931},[921,2135,2136],{"class":923,"line":1454},[921,2137,2138],{"class":931},"    }>>;\n",[921,2140,2141,2144,2146],{"class":923,"line":1471},[921,2142,2143],{"class":931},"}>",[921,2145,1009],{"class":935},[921,2147,955],{"class":931},[921,2149,2150],{"class":923,"line":1488},[921,2151,990],{"emptyLinePlaceholder":223},[921,2153,2154,2156,2159,2161,2163,2165,2167,2170,2172,2174,2176,2178,2180,2183],{"class":923,"line":1505},[921,2155,997],{"class":996},[921,2157,2158],{"class":935}," rootClass ",[921,2160,1003],{"class":931},[921,2162,1910],{"class":1006},[921,2164,1275],{"class":935},[921,2166,1009],{"class":931},[921,2168,2169],{"class":996}," =>",[921,2171,1241],{"class":1006},[921,2173,1275],{"class":935},[921,2175,1346],{"class":931},[921,2177,1970],{"class":935},[921,2179,1986],{"class":931},[921,2181,2182],{"class":935},"))",[921,2184,955],{"class":931},[921,2186,2187,2190,2192],{"class":923,"line":1522},[921,2188,2189],{"class":931},"\u003C\u002F",[921,2191,1884],{"class":1310},[921,2193,1901],{"class":931},[921,2195,2196],{"class":923,"line":1539},[921,2197,990],{"emptyLinePlaceholder":223},[921,2199,2200,2202,2204],{"class":923,"line":1556},[921,2201,1881],{"class":931},[921,2203,1201],{"class":1310},[921,2205,1901],{"class":931},[921,2207,2208,2211,2214,2217,2219,2221,2224,2226],{"class":923,"line":1570},[921,2209,2210],{"class":931},"    \u003C",[921,2212,2213],{"class":1310},"div",[921,2215,2216],{"class":996}," :class",[921,2218,1003],{"class":931},[921,2220,1230],{"class":931},[921,2222,2223],{"class":948},"rootClass",[921,2225,1230],{"class":931},[921,2227,1901],{"class":931},[921,2229,2230,2232,2234,2237,2239,2241,2243,2245],{"class":923,"line":1576},[921,2231,1316],{"class":931},[921,2233,2213],{"class":1310},[921,2235,2236],{"class":996}," class",[921,2238,1003],{"class":931},[921,2240,1230],{"class":931},[921,2242,1396],{"class":948},[921,2244,1230],{"class":931},[921,2246,1901],{"class":931},[921,2248,2249,2252,2254,2256,2258,2260,2262,2264],{"class":923,"line":1584},[921,2250,2251],{"class":931},"            \u003C",[921,2253,2213],{"class":1310},[921,2255,2236],{"class":996},[921,2257,1003],{"class":931},[921,2259,1230],{"class":931},[921,2261,1481],{"class":948},[921,2263,1230],{"class":931},[921,2265,1901],{"class":931},[921,2267,2268,2271,2273,2276,2278,2280,2283,2285,2288,2290,2292,2295,2297,2299,2301,2303,2305,2307],{"class":923,"line":1616},[921,2269,2270],{"class":931},"                \u003C",[921,2272,2213],{"class":1310},[921,2274,2275],{"class":996}," v-for",[921,2277,1003],{"class":931},[921,2279,1230],{"class":931},[921,2281,2282],{"class":948},"(week, wi) in weeks",[921,2284,1230],{"class":931},[921,2286,2287],{"class":996}," :key",[921,2289,1003],{"class":931},[921,2291,1230],{"class":931},[921,2293,2294],{"class":948},"wi",[921,2296,1230],{"class":931},[921,2298,2236],{"class":996},[921,2300,1003],{"class":931},[921,2302,1230],{"class":931},[921,2304,1532],{"class":948},[921,2306,1230],{"class":931},[921,2308,1901],{"class":931},[921,2310,2311,2314],{"class":923,"line":1647},[921,2312,2313],{"class":931},"                    \u003C",[921,2315,2316],{"class":1310},"button\n",[921,2318,2319,2322,2324,2326,2329],{"class":923,"line":1678},[921,2320,2321],{"class":996},"                        v-for",[921,2323,1003],{"class":931},[921,2325,1230],{"class":931},[921,2327,2328],{"class":948},"cell in week",[921,2330,2331],{"class":931},"\"\n",[921,2333,2334,2337,2339,2341,2344],{"class":923,"line":1709},[921,2335,2336],{"class":996},"                        :key",[921,2338,1003],{"class":931},[921,2340,1230],{"class":931},[921,2342,2343],{"class":948},"cell.day",[921,2345,2331],{"class":931},[921,2347,2348,2351,2353,2355],{"class":923,"line":1740},[921,2349,2350],{"class":996},"                        :class",[921,2352,1003],{"class":931},[921,2354,1230],{"class":931},[921,2356,2357],{"class":948},"calendarDay({\n",[921,2359,2360],{"class":923,"line":1772},[921,2361,2362],{"class":948},"                            outside: cell.outside ? 'true' : 'false',\n",[921,2364,2365],{"class":923,"line":1803},[921,2366,2367],{"class":948},"                            today: cell.today ? 'true' : 'false',\n",[921,2369,2370],{"class":923,"line":1834},[921,2371,2372],{"class":948},"                            selected: cell.selected ? 'true' : 'false',\n",[921,2374,2375],{"class":923,"line":1839},[921,2376,2377],{"class":948},"                            range: cell.range,\n",[921,2379,2380,2383],{"class":923,"line":1850},[921,2381,2382],{"class":948},"                        })",[921,2384,2331],{"class":931},[921,2386,2387],{"class":923,"line":1856},[921,2388,2389],{"class":931},"                    >\n",[921,2391,2392],{"class":923,"line":1864},[921,2393,2394],{"class":935},"                        {{ cell.day }}\n",[921,2396,2398,2401,2404],{"class":923,"line":2397},37,[921,2399,2400],{"class":931},"                    \u003C\u002F",[921,2402,2403],{"class":1310},"button",[921,2405,1901],{"class":931},[921,2407,2409,2412,2414],{"class":923,"line":2408},38,[921,2410,2411],{"class":931},"                \u003C\u002F",[921,2413,2213],{"class":1310},[921,2415,1901],{"class":931},[921,2417,2419,2422,2424],{"class":923,"line":2418},39,[921,2420,2421],{"class":931},"            \u003C\u002F",[921,2423,2213],{"class":1310},[921,2425,1901],{"class":931},[921,2427,2429,2432,2434],{"class":923,"line":2428},40,[921,2430,2431],{"class":931},"        \u003C\u002F",[921,2433,2213],{"class":1310},[921,2435,1901],{"class":931},[921,2437,2439,2442,2444],{"class":923,"line":2438},41,[921,2440,2441],{"class":931},"    \u003C\u002F",[921,2443,2213],{"class":1310},[921,2445,1901],{"class":931},[921,2447,2449,2451,2453],{"class":923,"line":2448},42,[921,2450,2189],{"class":931},[921,2452,1201],{"class":1310},[921,2454,1901],{"class":931},[1201,2456,2457,2466,2576],{"v-slot:other":917},[692,2458,694,2459,739,2462,2465],{},[712,2460,2461],{},"calendar()",[712,2463,2464],{},"calendarDay()"," runtimes each return a class string. Apply them however your framework binds classes, and put the structural class names on the matching elements:",[912,2467,2470],{"className":914,"code":2468,"filename":2469,"language":916,"meta":917,"style":917},"import { calendar, calendarDay } from \"virtual:styleframe\";\n\nconst rootClasses = calendar({ size: \"md\" });\n\u002F\u002F → \"calendar -size-md _display:inline-flex ...\"\n\nconst selectedDay = calendarDay({ selected: \"true\" });\n\u002F\u002F → \"calendar-day _aspect-ratio:[1 \u002F 1] ...\"\n","src\u002Fcomponents\u002Fcalendar.ts",[712,2471,2472,2496,2500,2531,2536,2540,2571],{"__ignoreMap":917},[921,2473,2474,2476,2478,2480,2482,2484,2486,2488,2490,2492,2494],{"class":923,"line":924},[921,2475,928],{"class":927},[921,2477,932],{"class":931},[921,2479,1241],{"class":935},[921,2481,968],{"class":931},[921,2483,1246],{"class":935},[921,2485,939],{"class":931},[921,2487,942],{"class":927},[921,2489,1224],{"class":931},[921,2491,949],{"class":948},[921,2493,1230],{"class":931},[921,2495,955],{"class":931},[921,2497,2498],{"class":923,"line":958},[921,2499,990],{"emptyLinePlaceholder":223},[921,2501,2502,2504,2507,2509,2511,2513,2515,2517,2519,2521,2523,2525,2527,2529],{"class":923,"line":987},[921,2503,997],{"class":996},[921,2505,2506],{"class":935}," rootClasses ",[921,2508,1003],{"class":931},[921,2510,1241],{"class":1006},[921,2512,1275],{"class":935},[921,2514,1346],{"class":931},[921,2516,1349],{"class":1310},[921,2518,1196],{"class":931},[921,2520,1224],{"class":931},[921,2522,1356],{"class":948},[921,2524,1230],{"class":931},[921,2526,939],{"class":931},[921,2528,1363],{"class":935},[921,2530,955],{"class":931},[921,2532,2533],{"class":923,"line":993},[921,2534,2535],{"class":1955},"\u002F\u002F → \"calendar -size-md _display:inline-flex ...\"\n",[921,2537,2538],{"class":923,"line":1014},[921,2539,990],{"emptyLinePlaceholder":223},[921,2541,2542,2544,2547,2549,2551,2553,2555,2557,2559,2561,2563,2565,2567,2569],{"class":923,"line":1019},[921,2543,997],{"class":996},[921,2545,2546],{"class":935}," selectedDay ",[921,2548,1003],{"class":931},[921,2550,1246],{"class":1006},[921,2552,1275],{"class":935},[921,2554,1346],{"class":931},[921,2556,1598],{"class":1310},[921,2558,1196],{"class":931},[921,2560,1224],{"class":931},[921,2562,1605],{"class":948},[921,2564,1230],{"class":931},[921,2566,939],{"class":931},[921,2568,1363],{"class":935},[921,2570,955],{"class":931},[921,2572,2573],{"class":923,"line":1036},[921,2574,2575],{"class":1955},"\u002F\u002F → \"calendar-day _aspect-ratio:[1 \u002F 1] ...\"\n",[912,2577,2582],{"className":2578,"code":2579,"filename":2580,"language":2581,"meta":917,"style":917},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"calendar -size-md ...\">\n    \u003Cdiv class=\"calendar-month\">\n        \u003Cdiv class=\"calendar-caption\">\n            \u003Cdiv class=\"calendar-caption-label\">June 2026\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"calendar-grid\">\n            \u003Cdiv class=\"calendar-weekdays\">\n                \u003Cdiv class=\"calendar-weekday\">Su\u003C\u002Fdiv>\n                \u003C!-- … -->\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"calendar-week\">\n                \u003Cbutton class=\"calendar-day ...\">18\u003C\u002Fbutton>\n                \u003C!-- … -->\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Fcalendar.html","html",[712,2583,2584,2603,2621,2639,2667,2675,2693,2711,2738,2743,2751,2769,2797,2801,2809,2817,2825],{"__ignoreMap":917},[921,2585,2586,2588,2590,2592,2594,2596,2599,2601],{"class":923,"line":924},[921,2587,1881],{"class":931},[921,2589,2213],{"class":1310},[921,2591,2236],{"class":996},[921,2593,1003],{"class":931},[921,2595,1230],{"class":931},[921,2597,2598],{"class":948},"calendar -size-md ...",[921,2600,1230],{"class":931},[921,2602,1901],{"class":931},[921,2604,2605,2607,2609,2611,2613,2615,2617,2619],{"class":923,"line":958},[921,2606,2210],{"class":931},[921,2608,2213],{"class":1310},[921,2610,2236],{"class":996},[921,2612,1003],{"class":931},[921,2614,1230],{"class":931},[921,2616,1396],{"class":948},[921,2618,1230],{"class":931},[921,2620,1901],{"class":931},[921,2622,2623,2625,2627,2629,2631,2633,2635,2637],{"class":923,"line":987},[921,2624,1316],{"class":931},[921,2626,2213],{"class":1310},[921,2628,2236],{"class":996},[921,2630,1003],{"class":931},[921,2632,1230],{"class":931},[921,2634,1413],{"class":948},[921,2636,1230],{"class":931},[921,2638,1901],{"class":931},[921,2640,2641,2643,2645,2647,2649,2651,2653,2655,2658,2661,2663,2665],{"class":923,"line":993},[921,2642,2251],{"class":931},[921,2644,2213],{"class":1310},[921,2646,2236],{"class":996},[921,2648,1003],{"class":931},[921,2650,1230],{"class":931},[921,2652,1430],{"class":948},[921,2654,1230],{"class":931},[921,2656,2657],{"class":931},">",[921,2659,2660],{"class":935},"June 2026",[921,2662,2189],{"class":931},[921,2664,2213],{"class":1310},[921,2666,1901],{"class":931},[921,2668,2669,2671,2673],{"class":923,"line":1014},[921,2670,2431],{"class":931},[921,2672,2213],{"class":1310},[921,2674,1901],{"class":931},[921,2676,2677,2679,2681,2683,2685,2687,2689,2691],{"class":923,"line":1019},[921,2678,1316],{"class":931},[921,2680,2213],{"class":1310},[921,2682,2236],{"class":996},[921,2684,1003],{"class":931},[921,2686,1230],{"class":931},[921,2688,1481],{"class":948},[921,2690,1230],{"class":931},[921,2692,1901],{"class":931},[921,2694,2695,2697,2699,2701,2703,2705,2707,2709],{"class":923,"line":1036},[921,2696,2251],{"class":931},[921,2698,2213],{"class":1310},[921,2700,2236],{"class":996},[921,2702,1003],{"class":931},[921,2704,1230],{"class":931},[921,2706,1498],{"class":948},[921,2708,1230],{"class":931},[921,2710,1901],{"class":931},[921,2712,2713,2715,2717,2719,2721,2723,2725,2727,2729,2732,2734,2736],{"class":923,"line":1052},[921,2714,2270],{"class":931},[921,2716,2213],{"class":1310},[921,2718,2236],{"class":996},[921,2720,1003],{"class":931},[921,2722,1230],{"class":931},[921,2724,1515],{"class":948},[921,2726,1230],{"class":931},[921,2728,2657],{"class":931},[921,2730,2731],{"class":935},"Su",[921,2733,2189],{"class":931},[921,2735,2213],{"class":1310},[921,2737,1901],{"class":931},[921,2739,2740],{"class":923,"line":1057},[921,2741,2742],{"class":1955},"                \u003C!-- … -->\n",[921,2744,2745,2747,2749],{"class":923,"line":1369},[921,2746,2421],{"class":931},[921,2748,2213],{"class":1310},[921,2750,1901],{"class":931},[921,2752,2753,2755,2757,2759,2761,2763,2765,2767],{"class":923,"line":1386},[921,2754,2251],{"class":931},[921,2756,2213],{"class":1310},[921,2758,2236],{"class":996},[921,2760,1003],{"class":931},[921,2762,1230],{"class":931},[921,2764,1532],{"class":948},[921,2766,1230],{"class":931},[921,2768,1901],{"class":931},[921,2770,2771,2773,2775,2777,2779,2781,2784,2786,2788,2791,2793,2795],{"class":923,"line":1403},[921,2772,2270],{"class":931},[921,2774,2403],{"class":1310},[921,2776,2236],{"class":996},[921,2778,1003],{"class":931},[921,2780,1230],{"class":931},[921,2782,2783],{"class":948},"calendar-day ...",[921,2785,1230],{"class":931},[921,2787,2657],{"class":931},[921,2789,2790],{"class":935},"18",[921,2792,2189],{"class":931},[921,2794,2403],{"class":1310},[921,2796,1901],{"class":931},[921,2798,2799],{"class":923,"line":1420},[921,2800,2742],{"class":1955},[921,2802,2803,2805,2807],{"class":923,"line":1437},[921,2804,2421],{"class":931},[921,2806,2213],{"class":1310},[921,2808,1901],{"class":931},[921,2810,2811,2813,2815],{"class":923,"line":1454},[921,2812,2431],{"class":931},[921,2814,2213],{"class":1310},[921,2816,1901],{"class":931},[921,2818,2819,2821,2823],{"class":923,"line":1471},[921,2820,2441],{"class":931},[921,2822,2213],{"class":1310},[921,2824,1901],{"class":931},[921,2826,2827,2829,2831],{"class":923,"line":1488},[921,2828,2189],{"class":931},[921,2830,2213],{"class":1310},[921,2832,1901],{"class":931},[896,2834,2836],{"id":2835},"see-it-in-action","See it in action",[2838,2839],"story-preview",{"story":2840,":panel":1605},"theme-recipes-forms-calendar--default",[688,2842,2844],{"id":2843},"sizes","Sizes",[692,2846,2847,2848,2850,2851,2853,2854,2856,2857,2859,2860,2862],{},"Three size variants from ",[712,2849,2008],{}," to ",[712,2852,2026],{}," control density. Each sets ",[712,2855,738],{}," (the square cell floor) and ",[712,2858,742],{}," on the root, which cascade to every cell, week number and weekday label — so a single ",[712,2861,1184],{}," scales the whole grid.",[2838,2864],{"story":2865,":height":2866},"theme-recipes-forms-calendar--all-sizes","520",[2868,2869,2871],"h3",{"id":2870},"size-reference","Size Reference",[2873,2874,2875,2893],"table",{},[2876,2877,2878],"thead",{},[2879,2880,2881,2885,2890],"tr",{},[2882,2883,2884],"th",{},"Size",[2882,2886,2887,2888,1363],{},"Cell size (",[712,2889,738],{},[2882,2891,2892],{},"Font",[2894,2895,2896,2914,2930],"tbody",{},[2879,2897,2898,2903,2909],{},[2899,2900,2901],"td",{},[712,2902,2008],{},[2899,2904,2905,2908],{},[712,2906,2907],{},"calc(var(--spacing) * 2)"," (≈32px)",[2899,2910,2911],{},[712,2912,2913],{},"@font-size.sm",[2879,2915,2916,2920,2926],{},[2899,2917,2918],{},[712,2919,1356],{},[2899,2921,2922,2925],{},[712,2923,2924],{},"calc(var(--spacing) * 2.25)"," (≈36px)",[2899,2927,2928],{},[712,2929,2913],{},[2879,2931,2932,2936,2942],{},[2899,2933,2934],{},[712,2935,2026],{},[2899,2937,2938,2941],{},[712,2939,2940],{},"calc(var(--spacing) * 2.5)"," (≈40px)",[2899,2943,2944],{},[712,2945,2946],{},"@font-size.md",[2948,2949,2950,2953,2954,2956,2957,2959,2960,2963,2964,1288],"tip",{},[696,2951,2952],{},"Pro tip:"," For a fully custom cell size, set ",[712,2955,738],{}," with a class on the ",[712,2958,730],{}," element — the per-size defaults are emitted at zero specificity (",[712,2961,2962],{},":where()","), so any consumer class wins. See ",[700,2965,2967],{"href":2966},"#custom-cell-size","Custom cell size",[688,2969,2967],{"id":2970},"custom-cell-size",[692,2972,2973,2974,2976,2977,2980,2981,2984,2985,2987],{},"The named sizes only set defaults for ",[712,2975,738],{},". Override the variable with a single class for a fully custom density — the cell uses it as the ",[712,2978,2979],{},"min-width","\u002F",[712,2982,2983],{},"min-height"," floor and ",[712,2986,863],{}," keeps it square, so cells grow to fit extra content like a price label:",[912,2989,2991],{"className":914,"code":2990,"filename":910,"language":916,"meta":917,"style":917},"selector('.calendar-pricing', {\n    '--calendar-cell-size': 'calc(var(--spacing) * 4)',\n});\n",[712,2992,2993,3011,3031],{"__ignoreMap":917},[921,2994,2995,2998,3000,3002,3005,3007,3009],{"class":923,"line":924},[921,2996,2997],{"class":1006},"selector",[921,2999,1275],{"class":935},[921,3001,952],{"class":931},[921,3003,3004],{"class":948},".calendar-pricing",[921,3006,952],{"class":931},[921,3008,968],{"class":931},[921,3010,1302],{"class":931},[921,3012,3013,3016,3018,3020,3022,3024,3027,3029],{"class":923,"line":958},[921,3014,3015],{"class":931},"    '",[921,3017,738],{"class":1310},[921,3019,952],{"class":931},[921,3021,1196],{"class":931},[921,3023,945],{"class":931},[921,3025,3026],{"class":948},"calc(var(--spacing) * 4)",[921,3028,952],{"class":931},[921,3030,1366],{"class":931},[921,3032,3033,3035,3037],{"class":923,"line":987},[921,3034,1986],{"class":931},[921,3036,1363],{"class":935},[921,3038,955],{"class":931},[2838,3040],{"story":3041,":height":3042},"theme-recipes-forms-calendar--custom-cell-size","560",[688,3044,3046],{"id":3045},"variants","Variants",[692,3048,3049,3050,3055,3056,2850,3058,3060,3061,1288],{},"Four selection variants control how the active selection — the selected day and range endpoints — is filled, mirroring ",[700,3051,3054],{"href":3052,"rel":3053},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fcalendar#variant",[704],"Nuxt UI's calendar variants",". The range middle band and the today\u002Foutside treatments stay the same across variants. Pass ",[712,3057,777],{},[712,3059,2464],{},"; it defaults to ",[712,3062,781],{},[2873,3064,3065,3075],{},[2876,3066,3067],{},[2879,3068,3069,3072],{},[2882,3070,3071],{},"Variant",[2882,3073,3074],{},"Selected day & range endpoints",[2894,3076,3077,3090,3102,3115],{},[2879,3078,3079,3083],{},[2899,3080,3081],{},[712,3082,781],{},[2899,3084,3085,3086,3089],{},"Filled with ",[712,3087,3088],{},"@color.primary",", white text",[2879,3091,3092,3096],{},[2899,3093,3094],{},[712,3095,784],{},[2899,3097,3098,3099,3101],{},"Transparent with an inset ",[712,3100,3088],{}," ring and primary text",[2879,3103,3104,3108],{},[2899,3105,3106],{},[712,3107,787],{},[2899,3109,3110,3111,3114],{},"Tinted ",[712,3112,3113],{},"@color.primary-200"," surface, no ring",[2879,3116,3117,3121],{},[2899,3118,3119],{},[712,3120,790],{},[2899,3122,3123,3124,3127],{},"Tinted surface plus an inset ",[712,3125,3126],{},"@color.primary-300"," ring",[2838,3129],{"story":3130,":height":3131},"theme-recipes-forms-calendar--all-variants","920",[3133,3134,3135,3138,3139,3142],"note",{},[696,3136,3137],{},"Good to know:"," The rings are inset ",[712,3140,3141],{},"box-shadow","s, not borders, so switching variants never shifts the cell layout.",[688,3144,3146],{"id":3145},"day-states","Day states",[692,3148,3149,3150,3152,3153,3155,3156,758,3158,758,3160,758,3162,3164],{},"Each day is a ",[712,3151,1188],{}," button. The state axes mirror the modifiers a headless calendar exposes, so you map them straight across. They are independent booleans, except ",[712,3154,773],{},", which is positional (",[712,3157,2105],{},[712,3159,1761],{},[712,3161,1792],{},[712,3163,1823],{},").",[2838,3166],{"story":3167,":height":3168},"theme-recipes-forms-calendar--all-states","420",[2868,3170,3172],{"id":3171},"today-selected","Today & Selected",[692,3174,3175,3177,3178,3180,3181,3183],{},[712,3176,761],{}," marks the current day with the primary color and a heavier weight; ",[712,3179,757],{}," fills the day with ",[712,3182,3088],{},". When a day is both, the selected fill wins and the label stays legible.",[2868,3185,3187],{"id":3186},"booked-vs-disabled","Booked vs. Disabled",[692,3189,3190,3192,3193,3196,3197,3200,3201,3203,3204,3207],{},[712,3191,767],{}," dims the day to ",[712,3194,3195],{},"0.5"," opacity with a ",[712,3198,3199],{},"not-allowed"," cursor — an unreachable date. ",[712,3202,770],{}," is intentionally distinct: a reserved\u002Funavailable day is struck through and muted on a faint surface, but ",[696,3205,3206],{},"not"," dimmed away, so it still reads as a real, labelled date.",[2838,3209],{"story":3210,":panel":1605},"theme-recipes-forms-calendar--booked-dates",[2868,3212,3214],{"id":3213},"outside-month","Outside month",[692,3216,3217,3219],{},[712,3218,764],{}," mutes days that belong to the previous or next month so the current month stays prominent. Most libraries can also hide them entirely.",[688,3221,3223],{"id":3222},"ranges","Ranges",[692,3225,3226,3227,2850,3229,758,3231,706,3233,3235,3236,3238],{},"For range selection, set ",[712,3228,773],{},[712,3230,1761],{},[712,3232,1792],{},[712,3234,1823],{},". The endpoints fill with ",[712,3237,3088],{}," and square their inner edge; the middle days use a soft primary band — so the selection reads as one continuous range.",[2838,3240],{"story":3241,":panel":1605},"theme-recipes-forms-calendar--range",[2868,3243,3245],{"id":3244},"multiple-months","Multiple months",[692,3247,3248,3249,3252,3253,3256,3257,3260,3261,3264],{},"For side-by-side months, render one ",[712,3250,3251],{},".calendar-month"," per month inside ",[712,3254,3255],{},".calendar-months","; the wrapper lays them out in a row. How many months to show (e.g. a ",[712,3258,3259],{},"numberOfMonths"," prop) is your component's concern — the recipe just styles the columns. When months sit side by side, each grid shows exactly one month: outside-month days would duplicate across the grids, so render them as invisible ",[712,3262,3263],{},".calendar-day-spacer"," cells to keep the columns aligned.",[2838,3266],{"story":3267,":panel":1605},"theme-recipes-forms-calendar--range-two-months",[688,3269,3271],{"id":3270},"month-year-selector","Month & year selector",[692,3273,3274,3275,3278,3279,3282],{},"Swap the static caption label for two selects inside ",[712,3276,3277],{},".calendar-caption-dropdowns",". The recipe ships baseline styling for native ",[712,3280,3281],{},"\u003Cselect>"," elements in the slot (border, radius, typography that follows the calendar size); swap in the Select recipe for full theming.",[2838,3284],{"story":3285,":panel":1605},"theme-recipes-forms-calendar--month-year-dropdown",[688,3287,3289],{"id":3288},"month-year-pickers","Month & year pickers",[692,3291,3292,3293,2850,3296,706,3299,3302,3303,3305,3306,706,3309,3312,3313,3316,3317,3319,3320,3322],{},"Set ",[712,3294,3295],{},"type",[712,3297,3298],{},"month",[712,3300,3301],{},"year"," on ",[712,3304,2464],{}," to reuse the same cell for picker views — choosing a month within a year, or a year within a 12-year page. Picker cells keep the cascaded cell height but stretch to their grid column as pills instead of staying square. Add the ",[712,3307,3308],{},"-months",[712,3310,3311],{},"-years"," marker class to ",[712,3314,3315],{},".calendar-grid"," for the 4-column layout (floored to the day grid's width, so switching views keeps the same footprint). The selection ",[712,3318,777],{}," and the ",[712,3321,761],{}," accent (the current month or year) apply unchanged.",[2838,3324],{"story":3325,":panel":1605},"theme-recipes-forms-calendar--month-picker",[2838,3327],{"story":3328,":panel":1605},"theme-recipes-forms-calendar--year-picker",[688,3330,564],{"id":3331},"presets",[692,3333,3334,3335,3338,3339,3341],{},"Add a ",[712,3336,3337],{},".calendar-presets"," sidebar beside the calendar for quick picks like \"Today\" or \"Last 7 days\". The preset buttons reuse the ",[700,3340,368],{"href":369}," recipe.",[2838,3343],{"story":3344,":panel":1605},"theme-recipes-forms-calendar--presets",[688,3346,3348],{"id":3347},"date-time","Date & time",[692,3350,3334,3351,3354,3355,3341],{},[712,3352,3353],{},".calendar-footer"," below the grid for start\u002Fend time fields, built with the ",[700,3356,452],{"href":453},[2838,3358],{"story":3359,":panel":1605},"theme-recipes-forms-calendar--date-time",[688,3361,3363],{"id":3362},"week-numbers","Week numbers",[692,3365,3366,3367,3312,3370,3372,3373,3376],{},"Add the ",[712,3368,3369],{},"-week-numbers",[712,3371,3315],{}," to expand it to an 8-column layout with a leading ",[712,3374,3375],{},".calendar-week-number"," cell per row.",[2838,3378],{"story":3379,":panel":1605},"theme-recipes-forms-calendar--week-numbers",[688,3381,798],{"id":3382},"anatomy",[692,3384,3385],{},"The Calendar is two recipes (the root surface and the day button) plus a set of structural classes the root recipe emits for the fixed layout parts.",[2873,3387,3388,3401],{},[2876,3389,3390],{},[2879,3391,3392,3395,3398],{},[2882,3393,3394],{},"Part",[2882,3396,3397],{},"Class",[2882,3399,3400],{},"Role",[2894,3402,3403,3426,3442,3454,3466,3478,3490,3503,3515,3527,3549,3562,3575,3588,3600,3612,3623],{},[2879,3404,3405,3410,3417],{},[2899,3406,3407],{},[696,3408,3409],{},"Root",[2899,3411,3412,3414,3415],{},[712,3413,726],{}," → ",[712,3416,730],{},[2899,3418,3419,3420,3422,3423,3425],{},"The surface; owns padding, border, the ",[712,3421,734],{}," axis and the ",[712,3424,738],{}," cascade",[2879,3427,3428,3433,3439],{},[2899,3429,3430],{},[696,3431,3432],{},"Day",[2899,3434,3435,3414,3437],{},[712,3436,750],{},[712,3438,753],{},[2899,3440,3441],{},"The day button; owns the square cell and all day states",[2879,3443,3444,3447,3451],{},[2899,3445,3446],{},"Months",[2899,3448,3449],{},[712,3450,3255],{},[2899,3452,3453],{},"Wrapper for one or more month columns (multi-month layouts)",[2879,3455,3456,3459,3463],{},[2899,3457,3458],{},"Month",[2899,3460,3461],{},[712,3462,3251],{},[2899,3464,3465],{},"A single month column: caption + grid + footer",[2879,3467,3468,3470,3475],{},[2899,3469,256],{},[2899,3471,3472],{},[712,3473,3474],{},".calendar-body",[2899,3476,3477],{},"Row layout that places the presets sidebar beside the months",[2879,3479,3480,3482,3487],{},[2899,3481,318],{},[2899,3483,3484],{},[712,3485,3486],{},".calendar-caption",[2899,3488,3489],{},"Header row: navigation + month\u002Fyear label or selects",[2879,3491,3492,3495,3500],{},[2899,3493,3494],{},"Caption label",[2899,3496,3497],{},[712,3498,3499],{},".calendar-caption-label",[2899,3501,3502],{},"The \"June 2026\" label",[2879,3504,3505,3508,3512],{},[2899,3506,3507],{},"Caption dropdowns",[2899,3509,3510],{},[712,3511,3277],{},[2899,3513,3514],{},"Slot for the month\u002Fyear selects",[2879,3516,3517,3519,3524],{},[2899,3518,384],{},[2899,3520,3521],{},[712,3522,3523],{},".calendar-nav",[2899,3525,3526],{},"Previous\u002Fnext button group (buttons reuse the Button recipe)",[2879,3528,3529,3532,3546],{},[2899,3530,3531],{},"Grid",[2899,3533,3534,3536,3537,758,3540,758,3543,1363],{},[712,3535,3315],{}," (+ ",[712,3538,3539],{},".-week-numbers",[712,3541,3542],{},".-months",[712,3544,3545],{},".-years",[2899,3547,3548],{},"The 7-column day grid (8 with week numbers); 4 columns of pills in picker views",[2879,3550,3551,3554,3559],{},[2899,3552,3553],{},"Weekdays",[2899,3555,3556],{},[712,3557,3558],{},".calendar-weekdays",[2899,3560,3561],{},"The weekday header row",[2879,3563,3564,3567,3572],{},[2899,3565,3566],{},"Weekday",[2899,3568,3569],{},[712,3570,3571],{},".calendar-weekday",[2899,3573,3574],{},"A single weekday label (Su, Mo, …)",[2879,3576,3577,3580,3585],{},[2899,3578,3579],{},"Week",[2899,3581,3582],{},[712,3583,3584],{},".calendar-week",[2899,3586,3587],{},"A single week row",[2879,3589,3590,3593,3597],{},[2899,3591,3592],{},"Week number",[2899,3594,3595],{},[712,3596,3375],{},[2899,3598,3599],{},"The leading ISO week-number cell",[2879,3601,3602,3605,3609],{},[2899,3603,3604],{},"Day spacer",[2899,3606,3607],{},[712,3608,3263],{},[2899,3610,3611],{},"Invisible stand-in for a hidden outside-month day in side-by-side months",[2879,3613,3614,3616,3620],{},[2899,3615,564],{},[2899,3617,3618],{},[712,3619,3337],{},[2899,3621,3622],{},"The quick-pick sidebar",[2879,3624,3625,3628,3632],{},[2899,3626,3627],{},"Footer",[2899,3629,3630],{},[712,3631,3353],{},[2899,3633,3634],{},"The time-picker row",[688,3636,568],{"id":3637},"accessibility",[717,3639,3640,3650,3669,3688,3697,3707],{},[720,3641,3642,3645,3646,3649],{},[696,3643,3644],{},"Let the library own behavior."," Selection, keyboard navigation (arrow keys, Page Up\u002FDown), focus management and ",[712,3647,3648],{},"aria"," state are the headless calendar's job. The recipe styles the parts; pair it with an accessible engine like React DayPicker rather than a bare grid of buttons.",[720,3651,3652,3655,3656,3302,3659,758,3661,3664,3665,3668],{},[696,3653,3654],{},"Mark the grid."," Use ",[712,3657,3658],{},"role=\"grid\"",[712,3660,3315],{},[712,3662,3663],{},"role=\"row\""," on rows, and ",[712,3666,3667],{},"role=\"columnheader\""," on weekday labels (most libraries do this for you).",[720,3670,3671,3674,3675,3678,3679,3682,3683,1288],{},[696,3672,3673],{},"Convey selection beyond color."," Set ",[712,3676,3677],{},"aria-selected"," on selected days and ",[712,3680,3681],{},"aria-current=\"date\""," on today so the state isn't carried by color alone, satisfying ",[700,3684,3687],{"href":3685,"rel":3686},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fuse-of-color.html",[704],"WCAG 1.4.1",[720,3689,3690,3693,3694,3696],{},[696,3691,3692],{},"Mirror disabled on the element."," Set the real ",[712,3695,767],{}," attribute on disabled and booked day buttons so they leave the tab order, in addition to the recipe state.",[720,3698,3699,3702,3703,3706],{},[696,3700,3701],{},"Label the navigation."," Give the previous\u002Fnext buttons an ",[712,3704,3705],{},"aria-label"," (\"Previous month\") — they render as icon-only Button instances.",[720,3708,3709,3712,3713,3302,3716,3718,3719,1288],{},[696,3710,3711],{},"Verify contrast."," Selected and range days are ",[712,3714,3715],{},"@color.white",[712,3717,3088],{},". Default tokens meet WCAG AA; if you override the primary color, re-check with the ",[700,3720,3723],{"href":3721,"rel":3722},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[704],"WebAIM Contrast Checker",[688,3725,3727],{"id":3726},"customization","Customization",[2868,3729,3731],{"id":3730},"overriding-defaults","Overriding Defaults",[692,3733,3734],{},"Each composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only specify what changes:",[912,3736,3738],{"className":914,"code":3737,"filename":910,"language":916,"meta":917,"style":917},"import { styleframe } from 'virtual:styleframe';\nimport { useCalendarRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst calendar = useCalendarRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.xl',\n    },\n    defaultVariants: {\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[712,3739,3740,3760,3780,3784,3798,3802,3819,3828,3844,3849,3858,3873,3877,3885,3889],{"__ignoreMap":917},[921,3741,3742,3744,3746,3748,3750,3752,3754,3756,3758],{"class":923,"line":924},[921,3743,928],{"class":927},[921,3745,932],{"class":931},[921,3747,936],{"class":935},[921,3749,939],{"class":931},[921,3751,942],{"class":927},[921,3753,945],{"class":931},[921,3755,949],{"class":948},[921,3757,952],{"class":931},[921,3759,955],{"class":931},[921,3761,3762,3764,3766,3768,3770,3772,3774,3776,3778],{"class":923,"line":958},[921,3763,928],{"class":927},[921,3765,932],{"class":931},[921,3767,965],{"class":935},[921,3769,939],{"class":931},[921,3771,942],{"class":927},[921,3773,945],{"class":931},[921,3775,980],{"class":948},[921,3777,952],{"class":931},[921,3779,955],{"class":931},[921,3781,3782],{"class":923,"line":987},[921,3783,990],{"emptyLinePlaceholder":223},[921,3785,3786,3788,3790,3792,3794,3796],{"class":923,"line":993},[921,3787,997],{"class":996},[921,3789,1000],{"class":935},[921,3791,1003],{"class":931},[921,3793,936],{"class":1006},[921,3795,1009],{"class":935},[921,3797,955],{"class":931},[921,3799,3800],{"class":923,"line":1014},[921,3801,990],{"emptyLinePlaceholder":223},[921,3803,3804,3806,3808,3810,3812,3815,3817],{"class":923,"line":1019},[921,3805,997],{"class":996},[921,3807,1024],{"class":935},[921,3809,1003],{"class":931},[921,3811,965],{"class":1006},[921,3813,3814],{"class":935},"(s",[921,3816,968],{"class":931},[921,3818,1302],{"class":931},[921,3820,3821,3824,3826],{"class":923,"line":1036},[921,3822,3823],{"class":1310},"    base",[921,3825,1196],{"class":931},[921,3827,1302],{"class":931},[921,3829,3830,3833,3835,3837,3840,3842],{"class":923,"line":1052},[921,3831,3832],{"class":1310},"        borderRadius",[921,3834,1196],{"class":931},[921,3836,945],{"class":931},[921,3838,3839],{"class":948},"@border-radius.xl",[921,3841,952],{"class":931},[921,3843,1366],{"class":931},[921,3845,3846],{"class":923,"line":1057},[921,3847,3848],{"class":931},"    },\n",[921,3850,3851,3854,3856],{"class":923,"line":1369},[921,3852,3853],{"class":1310},"    defaultVariants",[921,3855,1196],{"class":931},[921,3857,1302],{"class":931},[921,3859,3860,3863,3865,3867,3869,3871],{"class":923,"line":1386},[921,3861,3862],{"class":1310},"        size",[921,3864,1196],{"class":931},[921,3866,945],{"class":931},[921,3868,2026],{"class":948},[921,3870,952],{"class":931},[921,3872,1366],{"class":931},[921,3874,3875],{"class":923,"line":1403},[921,3876,3848],{"class":931},[921,3878,3879,3881,3883],{"class":923,"line":1420},[921,3880,1986],{"class":931},[921,3882,1363],{"class":935},[921,3884,955],{"class":931},[921,3886,3887],{"class":923,"line":1437},[921,3888,990],{"emptyLinePlaceholder":223},[921,3890,3891,3893,3895,3897],{"class":923,"line":1454},[921,3892,1060],{"class":927},[921,3894,1063],{"class":927},[921,3896,1066],{"class":935},[921,3898,955],{"class":931},[2868,3900,3902],{"id":3901},"filtering-variants","Filtering Variants",[692,3904,3905,3906,3909],{},"If you only need a subset of sizes, use the ",[712,3907,3908],{},"filter"," option to limit which values are generated. This reduces the output CSS:",[912,3911,3913],{"className":914,"code":3912,"filename":910,"language":916,"meta":917,"style":917},"import { styleframe } from 'virtual:styleframe';\nimport { useCalendarRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the sm and md sizes\nconst calendar = useCalendarRecipe(s, {\n    filter: {\n        size: ['sm', 'md'],\n    },\n});\n\nexport default s;\n",[712,3914,3915,3935,3955,3959,3973,3977,3982,3998,4007,4035,4039,4047,4051],{"__ignoreMap":917},[921,3916,3917,3919,3921,3923,3925,3927,3929,3931,3933],{"class":923,"line":924},[921,3918,928],{"class":927},[921,3920,932],{"class":931},[921,3922,936],{"class":935},[921,3924,939],{"class":931},[921,3926,942],{"class":927},[921,3928,945],{"class":931},[921,3930,949],{"class":948},[921,3932,952],{"class":931},[921,3934,955],{"class":931},[921,3936,3937,3939,3941,3943,3945,3947,3949,3951,3953],{"class":923,"line":958},[921,3938,928],{"class":927},[921,3940,932],{"class":931},[921,3942,965],{"class":935},[921,3944,939],{"class":931},[921,3946,942],{"class":927},[921,3948,945],{"class":931},[921,3950,980],{"class":948},[921,3952,952],{"class":931},[921,3954,955],{"class":931},[921,3956,3957],{"class":923,"line":987},[921,3958,990],{"emptyLinePlaceholder":223},[921,3960,3961,3963,3965,3967,3969,3971],{"class":923,"line":993},[921,3962,997],{"class":996},[921,3964,1000],{"class":935},[921,3966,1003],{"class":931},[921,3968,936],{"class":1006},[921,3970,1009],{"class":935},[921,3972,955],{"class":931},[921,3974,3975],{"class":923,"line":1014},[921,3976,990],{"emptyLinePlaceholder":223},[921,3978,3979],{"class":923,"line":1019},[921,3980,3981],{"class":1955},"\u002F\u002F Only generate the sm and md sizes\n",[921,3983,3984,3986,3988,3990,3992,3994,3996],{"class":923,"line":1036},[921,3985,997],{"class":996},[921,3987,1024],{"class":935},[921,3989,1003],{"class":931},[921,3991,965],{"class":1006},[921,3993,3814],{"class":935},[921,3995,968],{"class":931},[921,3997,1302],{"class":931},[921,3999,4000,4003,4005],{"class":923,"line":1052},[921,4001,4002],{"class":1310},"    filter",[921,4004,1196],{"class":931},[921,4006,1302],{"class":931},[921,4008,4009,4011,4013,4016,4018,4020,4022,4024,4026,4028,4030,4033],{"class":923,"line":1057},[921,4010,3862],{"class":1310},[921,4012,1196],{"class":931},[921,4014,4015],{"class":935}," [",[921,4017,952],{"class":931},[921,4019,2008],{"class":948},[921,4021,952],{"class":931},[921,4023,968],{"class":931},[921,4025,945],{"class":931},[921,4027,1356],{"class":948},[921,4029,952],{"class":931},[921,4031,4032],{"class":935},"]",[921,4034,1366],{"class":931},[921,4036,4037],{"class":923,"line":1369},[921,4038,3848],{"class":931},[921,4040,4041,4043,4045],{"class":923,"line":1386},[921,4042,1986],{"class":931},[921,4044,1363],{"class":935},[921,4046,955],{"class":931},[921,4048,4049],{"class":923,"line":1403},[921,4050,990],{"emptyLinePlaceholder":223},[921,4052,4053,4055,4057,4059],{"class":923,"line":1420},[921,4054,1060],{"class":927},[921,4056,1063],{"class":927},[921,4058,1066],{"class":935},[921,4060,955],{"class":931},[3133,4062,4063,4065],{},[696,4064,3137],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,4067,73],{"id":4068},"api-reference",[2868,4070,4072],{"id":4071},"usecalendarrecipes-options",[712,4073,4074],{},"useCalendarRecipe(s, options?)",[692,4076,4077,4078,4080,4081,3422,4083,4085,4086,4088],{},"Creates the calendar root recipe — the ",[712,4079,730],{}," surface that owns the layout, the ",[712,4082,734],{},[712,4084,738],{}," \u002F ",[712,4087,742],{}," custom-property cascade, and emits the structural part classes.",[692,4090,4091],{},[696,4092,4093],{},"Parameters:",[2873,4095,4096,4109],{},[2876,4097,4098],{},[2879,4099,4100,4103,4106],{},[2882,4101,4102],{},"Parameter",[2882,4104,4105],{},"Type",[2882,4107,4108],{},"Description",[2894,4110,4111,4126,4141,4156,4170,4185],{},[2879,4112,4113,4118,4123],{},[2899,4114,4115],{},[712,4116,4117],{},"s",[2899,4119,4120],{},[712,4121,4122],{},"Styleframe",[2899,4124,4125],{},"The Styleframe instance",[2879,4127,4128,4133,4138],{},[2899,4129,4130],{},[712,4131,4132],{},"options",[2899,4134,4135],{},[712,4136,4137],{},"DeepPartial\u003CRecipeConfig>",[2899,4139,4140],{},"Optional overrides for the recipe configuration",[2879,4142,4143,4148,4153],{},[2899,4144,4145],{},[712,4146,4147],{},"options.base",[2899,4149,4150],{},[712,4151,4152],{},"VariantDeclarationsBlock",[2899,4154,4155],{},"Custom base styles for the surface",[2879,4157,4158,4163,4167],{},[2899,4159,4160],{},[712,4161,4162],{},"options.variants",[2899,4164,4165],{},[712,4166,3046],{},[2899,4168,4169],{},"Custom variant definitions for the recipe",[2879,4171,4172,4177,4182],{},[2899,4173,4174],{},[712,4175,4176],{},"options.defaultVariants",[2899,4178,4179],{},[712,4180,4181],{},"Record\u003Ckeyof Variants, string>",[2899,4183,4184],{},"Default variant values for the recipe",[2879,4186,4187,4192,4197],{},[2899,4188,4189],{},[712,4190,4191],{},"options.filter",[2899,4193,4194],{},[712,4195,4196],{},"Record\u003Cstring, string[]>",[2899,4198,4199],{},"Limit which variant values are generated",[692,4201,4202],{},[696,4203,4204],{},"Variants:",[2873,4206,4207,4219],{},[2876,4208,4209],{},[2879,4210,4211,4213,4216],{},[2882,4212,3071],{},[2882,4214,4215],{},"Options",[2882,4217,4218],{},"Default",[2894,4220,4221],{},[2879,4222,4223,4227,4235],{},[2899,4224,4225],{},[712,4226,734],{},[2899,4228,4229,758,4231,758,4233],{},[712,4230,2008],{},[712,4232,1356],{},[712,4234,2026],{},[2899,4236,4237],{},[712,4238,1356],{},[2868,4240,4242],{"id":4241},"usecalendardayrecipes-options",[712,4243,4244],{},"useCalendarDayRecipe(s, options?)",[692,4246,4247,4248,4250,4251,4253,4254,4256,4257,1288],{},"Creates the day-cell recipe — the ",[712,4249,753],{}," button. The cell reads ",[712,4252,738],{}," from the root, stays square via ",[712,4255,863],{},", and exposes the day-state axes. Accepts the same parameters as ",[712,4258,4259],{},"useCalendarRecipe",[692,4261,4262],{},[696,4263,4204],{},[2873,4265,4266,4276],{},[2876,4267,4268],{},[2879,4269,4270,4272,4274],{},[2882,4271,3071],{},[2882,4273,4215],{},[2882,4275,4218],{},[2894,4277,4278,4297,4317,4334,4350,4366,4382,4398],{},[2879,4279,4280,4284,4293],{},[2899,4281,4282],{},[712,4283,3295],{},[2899,4285,4286,758,4289,758,4291],{},[712,4287,4288],{},"day",[712,4290,3298],{},[712,4292,3301],{},[2899,4294,4295],{},[712,4296,4288],{},[2879,4298,4299,4303,4313],{},[2899,4300,4301],{},[712,4302,777],{},[2899,4304,4305,758,4307,758,4309,758,4311],{},[712,4306,781],{},[712,4308,784],{},[712,4310,787],{},[712,4312,790],{},[2899,4314,4315],{},[712,4316,781],{},[2879,4318,4319,4323,4330],{},[2899,4320,4321],{},[712,4322,757],{},[2899,4324,4325,758,4327],{},[712,4326,1605],{},[712,4328,4329],{},"false",[2899,4331,4332],{},[712,4333,4329],{},[2879,4335,4336,4340,4346],{},[2899,4337,4338],{},[712,4339,761],{},[2899,4341,4342,758,4344],{},[712,4343,1605],{},[712,4345,4329],{},[2899,4347,4348],{},[712,4349,4329],{},[2879,4351,4352,4356,4362],{},[2899,4353,4354],{},[712,4355,764],{},[2899,4357,4358,758,4360],{},[712,4359,1605],{},[712,4361,4329],{},[2899,4363,4364],{},[712,4365,4329],{},[2879,4367,4368,4372,4378],{},[2899,4369,4370],{},[712,4371,767],{},[2899,4373,4374,758,4376],{},[712,4375,1605],{},[712,4377,4329],{},[2899,4379,4380],{},[712,4381,4329],{},[2879,4383,4384,4388,4394],{},[2899,4385,4386],{},[712,4387,770],{},[2899,4389,4390,758,4392],{},[712,4391,1605],{},[712,4393,4329],{},[2899,4395,4396],{},[712,4397,4329],{},[2879,4399,4400,4404,4414],{},[2899,4401,4402],{},[712,4403,773],{},[2899,4405,4406,758,4408,758,4410,758,4412],{},[712,4407,2105],{},[712,4409,1761],{},[712,4411,1792],{},[712,4413,1823],{},[2899,4415,4416],{},[712,4417,2105],{},[692,4419,4420],{},[700,4421,4422],{"href":132},"Learn more about recipes →",[688,4424,4426],{"id":4425},"best-practices","Best Practices",[717,4428,4429,4438,4452,4458,4470],{},[720,4430,4431,4434,4435,4437],{},[696,4432,4433],{},"Pair with a headless engine",": Use the recipe for styling and a library like React DayPicker or ",[712,4436,714],{}," for the date logic and keyboard handling.",[720,4439,4440,4443,4444,3302,4446,4448,4449,4451],{},[696,4441,4442],{},"Drive size from the root",": Set ",[712,4445,734],{},[712,4447,2461],{}," and let the ",[712,4450,738],{}," cascade size every cell, rather than sizing cells individually.",[720,4453,4454,4457],{},[696,4455,4456],{},"Reuse the sibling recipes",": Style navigation and presets with Button, time fields with Input, and the month\u002Fyear selects with Select — don't re-create them.",[720,4459,4460,4463,4464,4466,4467,4469],{},[696,4461,4462],{},"Distinguish booked from disabled",": Use ",[712,4465,770],{}," for reserved-but-real dates (struck through) and ",[712,4468,767],{}," for unreachable ones (dimmed, out of tab order).",[720,4471,4472,4475,4476,4478],{},[696,4473,4474],{},"Filter what you don't need",": If your calendar only uses two sizes, pass a ",[712,4477,3908],{}," option to reduce generated CSS.",[688,4480,4482],{"id":4481},"faq","FAQ",[4484,4485,4486,4495,4524,4528,4548],"accordion",{},[4487,4488,4491,4492,4494],"accordion-item",{"icon":4489,"label":4490},"i-lucide-circle-help","Does the recipe handle date selection and navigation?","No — the Calendar is a styling layer. Selection, ranges, month navigation, week numbers and time picking are driven by the headless library you wire it to (such as React DayPicker or ",[712,4493,714],{},"). The recipe gives you the classes for every part and state; you map them onto the library's slots and modifiers.",[4487,4496,4498,4499,4501,4502,4504,4505,4507,4508,2980,4510,4512,4513,4515,4516,4518,4519,4521,4522,1288],{"icon":4489,"label":4497},"How do I set a custom cell size?","Set the ",[712,4500,738],{}," custom property with a class on the ",[712,4503,730],{}," element. The per-size defaults are emitted at zero specificity via ",[712,4506,2962],{},", so any consumer class overrides them. The day cell uses the variable as the ",[712,4509,2979],{},[712,4511,2983],{}," floor, and ",[712,4514,863],{}," keeps the cell square as it grows to fit content. The named sizes (",[712,4517,2008],{},"–",[712,4520,2026],{},") just set sensible defaults for this variable — see ",[700,4523,2967],{"href":2966},[4487,4525,4527],{"icon":4489,"label":4526},"Why is `booked` separate from `disabled`?","A booked date is a real, labelled day that happens to be unavailable (reserved) — it's struck through and muted but stays visible, often with extra content like a price. A disabled date is unreachable and is dimmed and removed from the tab order. Keeping them separate lets you style and announce the two cases differently.",[4487,4529,4531,4533,4534,4537,4538,852,4540,4542,4543,2980,4545,4547],{"icon":4489,"label":4530},"How do the day cells stay aligned and square?",[712,4532,3315],{}," lays out seven equal columns with ",[712,4535,4536],{},"minmax(var(--calendar-cell-size), 1fr)",", and each ",[712,4539,753],{},[712,4541,863],{}," with a ",[712,4544,2979],{},[712,4546,2983],{}," floor. Cells stay square and aligned, but can grow to fit their content rather than clipping it.",[4487,4549,4551,4552,4554],{"icon":4489,"label":4550},"How does filtering affect the recipe?","When you use the ",[712,4553,3908],{}," option, compound variants that reference filtered-out values are automatically removed, and default variants are adjusted if they reference a removed value — so the recipe stays consistent and only emits the CSS you use.",[4556,4557,4558],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":917,"searchDepth":958,"depth":958,"links":4560},[4561,4562,4563,4564,4567,4568,4569,4574,4577,4578,4579,4580,4581,4582,4583,4584,4588,4592,4593],{"id":690,"depth":958,"text":78},{"id":815,"depth":958,"text":816},{"id":889,"depth":958,"text":890},{"id":2843,"depth":958,"text":2844,"children":4565},[4566],{"id":2870,"depth":987,"text":2871},{"id":2970,"depth":958,"text":2967},{"id":3045,"depth":958,"text":3046},{"id":3145,"depth":958,"text":3146,"children":4570},[4571,4572,4573],{"id":3171,"depth":987,"text":3172},{"id":3186,"depth":987,"text":3187},{"id":3213,"depth":987,"text":3214},{"id":3222,"depth":958,"text":3223,"children":4575},[4576],{"id":3244,"depth":987,"text":3245},{"id":3270,"depth":958,"text":3271},{"id":3288,"depth":958,"text":3289},{"id":3331,"depth":958,"text":564},{"id":3347,"depth":958,"text":3348},{"id":3362,"depth":958,"text":3363},{"id":3382,"depth":958,"text":798},{"id":3637,"depth":958,"text":568},{"id":3726,"depth":958,"text":3727,"children":4585},[4586,4587],{"id":3730,"depth":987,"text":3731},{"id":3901,"depth":987,"text":3902},{"id":4068,"depth":958,"text":73,"children":4589},[4590,4591],{"id":4071,"depth":987,"text":4074},{"id":4241,"depth":987,"text":4244},{"id":4425,"depth":958,"text":4426},{"id":4481,"depth":958,"text":4482},"A date-grid styling recipe with selected, today, range, booked, disabled, and outside-month day states, week numbers, month\u002Fyear selectors, presets and a time-picker footer, plus a custom cell size through the recipe system.",null,{},{"icon":7},{"title":432,"description":4594},"YM6zF0sRRx-0GDPxQAnZXW5kjonVA3XMQIyyenAJYDM",[4601,4603],{"title":424,"path":425,"stem":426,"description":4602,"icon":7,"children":-1},"A loading spinner component with color, size, and optional overlay — built as a multi-part recipe system with SVG-based animation.",{"title":436,"path":437,"stem":438,"description":4604,"icon":7,"children":-1},"A custom checkbox built on the native input, with a CSS checkmark, checked, indeterminate, disabled, and focus states, light, dark, and neutral surface colors, and three sizes through the recipe system.",1781596338541]