); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { DateValue } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Calendar } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState, "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" JSX } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { RangeValue } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'@react-types/shared'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { startOfDay, subDays, subWeeks, subMonths, endOfDay } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'date-fns'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-3-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 3 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subDays"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-7-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 7 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-14-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 14 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-month'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last Month'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subMonths"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"RangeValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"DateValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">>();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex justify-center py-12"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Calendar"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"isDocsPage"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{setDate} "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{presets} "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{date} />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,e.jsxs)(l.div,{className:"component-preview",children:[(0,e.jsx)(l.h2,{children:"Compact"}),` `,(0,e.jsx)(s,{name:"calendar-compact",children:(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { DateValue } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Calendar } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { useState, "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" JSX } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { RangeValue } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'@react-types/shared'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { startOfDay, subDays, subWeeks, subMonths, endOfDay } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'date-fns'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-3-days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last 3 Days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subDays"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-7-days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last 7 Days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-14-days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last 14 Days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-month'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last Month'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subMonths"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"RangeValue"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"DateValue"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">>();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"flex justify-center py-12"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Calendar"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"compact"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"isDocsPage"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{setDate}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{presets}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{date}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import type { DateValue } from 'geist/components'; import { Calendar } from 'geist/components'; import { useState, type JSX } from 'react'; import type { RangeValue } from '@react-types/shared'; import { startOfDay, subDays, subWeeks, subMonths, endOfDay } from 'date-fns'; const presets = { 'last-3-days': { text: 'Last 3 Days', start: startOfDay(subDays(new Date(), 3)), end: endOfDay(new Date()), }, 'last-7-days': { text: 'Last 7 Days', start: startOfDay(subWeeks(new Date(), 1)), end: endOfDay(new Date()), }, 'last-14-days': { text: 'Last 14 Days', start: startOfDay(subWeeks(new Date(), 2)), end: endOfDay(new Date()), }, 'last-month': { text: 'Last Month', start: startOfDay(subMonths(new Date(), 1)), end: endOfDay(new Date()), }, }; export function Component(): JSX.Element { const [date, setDate] = useState>(); return (

); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { DateValue } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Calendar } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState, "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" JSX } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { RangeValue } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'@react-types/shared'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { startOfDay, subDays, subWeeks, subMonths, endOfDay } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'date-fns'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-3-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 3 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subDays"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-7-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 7 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-14-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 14 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-month'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last Month'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subMonths"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"RangeValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"DateValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">>();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex justify-center py-12"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Calendar"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"compact"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"isDocsPage"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{setDate}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{presets}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{date}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,e.jsxs)(l.div,{className:"component-preview",children:[(0,e.jsx)(l.h2,{children:"Stacked"}),` `,(0,e.jsx)(s,{name:"calendar-stacked",children:(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { DateValue } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Calendar } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { useState, "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" JSX } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { RangeValue } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'@react-types/shared'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { startOfDay, subDays, subWeeks, subMonths, endOfDay } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'date-fns'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-3-days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last 3 Days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subDays"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-7-days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last 7 Days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-14-days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last 14 Days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-month'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last Month'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subMonths"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"RangeValue"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"DateValue"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">>();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"flex justify-center py-12"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Calendar"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"isDocsPage"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{setDate}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{presets}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"stacked"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{date}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import type { DateValue } from 'geist/components'; import { Calendar } from 'geist/components'; import { useState, type JSX } from 'react'; import type { RangeValue } from '@react-types/shared'; import { startOfDay, subDays, subWeeks, subMonths, endOfDay } from 'date-fns'; const presets = { 'last-3-days': { text: 'Last 3 Days', start: startOfDay(subDays(new Date(), 3)), end: endOfDay(new Date()), }, 'last-7-days': { text: 'Last 7 Days', start: startOfDay(subWeeks(new Date(), 1)), end: endOfDay(new Date()), }, 'last-14-days': { text: 'Last 14 Days', start: startOfDay(subWeeks(new Date(), 2)), end: endOfDay(new Date()), }, 'last-month': { text: 'Last Month', start: startOfDay(subMonths(new Date(), 1)), end: endOfDay(new Date()), }, }; export function Component(): JSX.Element { const [date, setDate] = useState>(); return (

); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { DateValue } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Calendar } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState, "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" JSX } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { RangeValue } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'@react-types/shared'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { startOfDay, subDays, subWeeks, subMonths, endOfDay } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'date-fns'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-3-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 3 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subDays"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-7-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 7 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-14-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 14 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-month'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last Month'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subMonths"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"RangeValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"DateValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">>();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex justify-center py-12"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Calendar"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"isDocsPage"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{setDate}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{presets}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"stacked"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{date}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,e.jsxs)(l.div,{className:"component-preview",children:[(0,e.jsx)(l.h2,{children:"Presets with default value"}),` `,(0,e.jsx)(l.p,{children:"Provide common date ranges with an additional default value."}),` `,(0,e.jsx)(s,{name:"calendar-default-value",children:(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { DateValue } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Calendar } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { useState, "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" JSX } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { RangeValue } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'@react-types/shared'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { startOfDay, subDays, subWeeks, subMonths, endOfDay } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'date-fns'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-3-days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last 3 Days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subDays"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-7-days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last 7 Days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-14-days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last 14 Days'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'last-month'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'Last Month'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subMonths"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"RangeValue"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"DateValue"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">>();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"flex justify-center py-12"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Calendar"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"isDocsPage"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{setDate}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"presetIndex"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{presets}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"stacked"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{date}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import type { DateValue } from 'geist/components'; import { Calendar } from 'geist/components'; import { useState, type JSX } from 'react'; import type { RangeValue } from '@react-types/shared'; import { startOfDay, subDays, subWeeks, subMonths, endOfDay } from 'date-fns'; const presets = { 'last-3-days': { text: 'Last 3 Days', start: startOfDay(subDays(new Date(), 3)), end: endOfDay(new Date()), }, 'last-7-days': { text: 'Last 7 Days', start: startOfDay(subWeeks(new Date(), 1)), end: endOfDay(new Date()), }, 'last-14-days': { text: 'Last 14 Days', start: startOfDay(subWeeks(new Date(), 2)), end: endOfDay(new Date()), }, 'last-month': { text: 'Last Month', start: startOfDay(subMonths(new Date(), 1)), end: endOfDay(new Date()), }, }; export function Component(): JSX.Element { const [date, setDate] = useState>(); return (

); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { DateValue } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Calendar } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState, "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" JSX } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { RangeValue } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'@react-types/shared'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { startOfDay, subDays, subWeeks, subMonths, endOfDay } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'date-fns'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-3-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 3 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subDays"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-7-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 7 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-14-days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last 14 Days'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subWeeks"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'last-month'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" text: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'Last Month'"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" start: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"startOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"subMonths"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" end: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"endOfDay"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"RangeValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"DateValue"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">>();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex justify-center py-12"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Calendar"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"isDocsPage"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{setDate}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"presetIndex"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"presets"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{presets}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"stacked"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{date}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,e.jsxs)(l.div,{className:"component-preview",children:[(0,e.jsx)(l.h2,{children:"Min and max dates"}),` `,(0,e.jsx)(l.p,{children:"Provide common date ranges with an additional default value."}),` `,(0,e.jsx)(s,{name:"calendar-min-and-max-dates",children:(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { DateValue } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Calendar } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { useState, "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" JSX } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { RangeValue } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'@react-types/shared'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { addDays, subDays } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"'date-fns'"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"setDate"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"RangeValue"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"DateValue"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">>();"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"minValue"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"subDays"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"setHours"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"5"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"); "}),(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// 2 days ago"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"maxValue"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"addDays"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"Date"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"); "}),(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:"// 2 days from now"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"flex justify-center py-12"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Calendar"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"isDocsPage"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"maxValue"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{maxValue}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"minValue"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{minValue}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{setDate}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{date}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import type { DateValue } from 'geist/components'; import { Calendar } from 'geist/components'; import { useState, type JSX } from 'react'; import type { RangeValue } from '@react-types/shared'; import { addDays, subDays } from 'date-fns'; export function Component(): JSX.Element { const [date, setDate] = useState>(); const minValue = subDays(new Date().setHours(5), 1); // 2 days ago const maxValue = addDays(new Date(), 1); // 2 days from now return (

Calendar

Default

Presets

Compact

Stacked

Presets with default value

Min and max dates