All components
xs
sm
md
lg
xl
Date Picker
Date input with calendar trigger, month navigation, and a selectable day grid.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556import { DatePicker, parseDate } from "#components/ui/ark-ui/date-picker.tsx";
export function Example() { return ( // the size resolves once on Root; every part inherits it via context — // Trigger and the navigation triggers ship default icons. Drop the // `inline` prop and wrap Content in <DatePicker.Positioner> for a // portalled popup instead. <DatePicker.Root inline defaultValue={[parseDate("2026-03-18")]} size="md"> <DatePicker.Label>Delivery date</DatePicker.Label> <DatePicker.Control> <DatePicker.Input /> <DatePicker.IndicatorGroup> <DatePicker.Trigger /> </DatePicker.IndicatorGroup> </DatePicker.Control> <DatePicker.Content> <DatePicker.View view="day"> <DatePicker.Context> {(api) => ( <> <DatePicker.ViewControl> <DatePicker.PrevTrigger /> <DatePicker.ViewTrigger> <DatePicker.RangeText /> </DatePicker.ViewTrigger> <DatePicker.NextTrigger /> </DatePicker.ViewControl> <DatePicker.Table> <DatePicker.TableHead> <DatePicker.TableRow> {api.weekDays.map((weekDay, i) => ( <DatePicker.TableHeader key={i}>{weekDay.narrow}</DatePicker.TableHeader> ))} </DatePicker.TableRow> </DatePicker.TableHead> <DatePicker.TableBody> {api.weeks.map((week, wi) => ( <DatePicker.TableRow key={wi}> {week.map((day, di) => ( <DatePicker.TableCell key={di} value={day}> <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger> </DatePicker.TableCell> ))} </DatePicker.TableRow> ))} </DatePicker.TableBody> </DatePicker.Table> </> )} </DatePicker.Context> </DatePicker.View> </DatePicker.Content> </DatePicker.Root> );}Sizes
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
Install
1npx stylexblocks add date-pickerSource
components/ui/ark-ui/date-picker.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875import * as stylex from "@stylexjs/stylex";import { createContext, useContext } from "react";import { DatePicker as ArkDatePicker } from "@ark-ui/react/date-picker";import { Portal } from "@ark-ui/react/portal";import { mergeProps } from "@ark-ui/react/utils";import { createSlotRecipeContext } from "#lib/ark-ui/create-slot-recipe-context.tsx";import { defineSlotRecipe, resolveSlotStyles, type SlotRecipeVariants, type StyleOverrideProps,} from "#lib/recipe-props.ts";import { semanticShadows } from "@stylexblocks/ui/semantic-tokens/shadows.stylex.ts";import { datePickerTriggerIconVars, datePickerPrevTriggerIconVars, datePickerNextTriggerIconVars, datePickerClearTriggerIconVars,} from '@stylexblocks/ui/slot-recipes/date-picker.stylex.ts'
import { colorPalette } from '@stylexblocks/ui/color-palette.stylex.ts'import { fontSizes } from '@stylexblocks/ui/tokens/font-sizes.stylex.ts'import { fontWeights } from '@stylexblocks/ui/tokens/font-weights.stylex.ts'import { lineHeights } from '@stylexblocks/ui/tokens/line-heights.stylex.ts'import { semanticColors } from '@stylexblocks/ui/semantic-tokens/colors.stylex.ts'import { semanticRadii } from '@stylexblocks/ui/semantic-tokens/radii.stylex.ts'import { sizes } from '@stylexblocks/ui/tokens/sizes.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'import { zIndices } from '@stylexblocks/ui/tokens/z-indices.stylex.ts'
const datePickerRoot = stylex.create({ base: { display: 'flex', flexDirection: 'column', gap: spacing._1_5, width: sizes.full, '--datepicker-indicators-offset': sizes._3, opacity: { default: null, ':is(:disabled, [disabled], [data-disabled])': 0.5, }, },})
const datePickerRootSizes = stylex.create({ xs: { '--datepicker-input-height': sizes._6, '--datepicker-input-px': sizes._2, '--datepicker-indicators-offset': sizes._2, }, sm: { '--datepicker-input-height': sizes._7, '--datepicker-input-px': sizes._2_5, '--datepicker-indicators-offset': sizes._2_5, }, md: { '--datepicker-input-height': sizes._8, '--datepicker-input-px': sizes._3, }, lg: { '--datepicker-input-height': sizes._10, '--datepicker-input-px': sizes._4_5, }, xl: { '--datepicker-input-height': sizes._12, '--datepicker-input-px': sizes._6, },})
const datePickerLabel = stylex.create({ base: { fontSize: fontSizes.sm, lineHeight: lineHeights.sm, fontWeight: fontWeights.medium, },})
const datePickerIndicatorGroup = stylex.create({ base: { position: 'absolute', insetInlineEnd: 'var(--datepicker-indicators-offset)', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: spacing._1, },})
const datePickerIndicatorGroupVariants = stylex.create({ flushed: { insetInlineEnd: 0, },})
const datePickerControl = stylex.create({ base: { display: 'flex', alignItems: 'center', gap: spacing._2, width: sizes.full, position: 'relative', },})
const datePickerInput = stylex.create({ base: { flex: 1, minWidth: 0, height: 'var(--datepicker-input-height)', '--input-height': 'var(--datepicker-input-height)', paddingInline: 'var(--datepicker-input-px)', paddingInlineEnd: `calc(var(--datepicker-indicators-offset) + ${sizes._6})`, fontSize: fontSizes.sm, lineHeight: lineHeights.sm, backgroundColor: 'transparent', borderRadius: semanticRadii.controlMd, outline: 'none', appearance: 'none', color: semanticColors.fg, '--focus-color': colorPalette.focusRing, '--error-color': semanticColors.borderError, '--focus-ring-color': { default: null, ':is([data-invalid], [aria-invalid="true"])': 'var(--error-color)', }, borderColor: { default: null, ':is([data-invalid], [aria-invalid="true"])': 'var(--error-color)', }, },})
const datePickerInputVariants = stylex.create({ outline: { backgroundColor: 'transparent', borderWidth: '1px', borderColor: { default: semanticColors.border, ':is([data-invalid], [aria-invalid="true"])': 'var(--error-color)', }, outlineWidth: { default: null, ':focus-visible': 'var(--focus-ring-width, 0)', }, outlineOffset: { default: null, ':focus-visible': '0px', }, outlineStyle: { default: null, ':focus-visible': 'solid', }, outlineColor: { default: null, ':focus-visible': colorPalette.focusRing, }, '--focus-ring-color': { default: 'var(--focus-color)', ':is([data-invalid], [aria-invalid="true"])': 'var(--error-color)', }, }, subtle: { borderWidth: '1px', borderColor: { default: 'transparent', ':is([data-invalid], [aria-invalid="true"])': 'var(--error-color)', }, backgroundColor: semanticColors.bgMuted, outlineWidth: { default: null, ':focus-visible': 'var(--focus-ring-width, 0)', }, outlineOffset: { default: null, ':focus-visible': '0px', }, outlineStyle: { default: null, ':focus-visible': 'solid', }, outlineColor: { default: null, ':focus-visible': colorPalette.focusRing, }, '--focus-ring-color': { default: 'var(--focus-color)', ':is([data-invalid], [aria-invalid="true"])': 'var(--error-color)', }, }, flushed: { backgroundColor: 'transparent', borderBottomWidth: '1px', borderBottomColor: semanticColors.border, borderRadius: 0, paddingInline: 0, borderColor: { default: null, ':is([data-invalid], [aria-invalid="true"])': 'var(--error-color)', ':focus-visible': { default: 'var(--focus-color)', ':is([data-invalid], [aria-invalid="true"])': 'var(--error-color)', }, }, boxShadow: { default: null, ':focus-visible': { default: '0px 1px 0px 0px var(--focus-color)', ':is([data-invalid], [aria-invalid="true"])': '0px 1px 0px 0px var(--error-color)', }, }, },})
const datePickerTrigger = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: sizes._6, height: sizes._6, borderRadius: semanticRadii.controlSm, color: { default: semanticColors.fgMuted, ':hover': semanticColors.fg, }, outline: 'none', outlineWidth: { default: null, ':focus-visible': 'var(--focus-ring-width, 0)', }, outlineOffset: { default: null, ':focus-visible': '0px', }, outlineStyle: { default: null, ':focus-visible': 'solid', }, outlineColor: { default: null, ':focus-visible': colorPalette.focusRing, }, focusRingWidth: '2px', [datePickerTriggerIconVars.width]: sizes._4, [datePickerTriggerIconVars.height]: sizes._4, },})
const datePickerTriggerIcon = stylex.create({ base: { width: datePickerTriggerIconVars.width, height: datePickerTriggerIconVars.height, },})
const datePickerContent = stylex.create({ base: { display: 'flex', flexDirection: 'column', gap: spacing._3, padding: spacing._3, minWidth: '18rem', color: semanticColors.fg, '--date-picker-z-index': zIndices.layer3, zIndex: 'calc(var(--date-picker-z-index) + var(--layer-index, 0))', outline: 'none', },})
const datePickerView = stylex.create({ base: { display: 'flex', flexDirection: 'column', gap: spacing._3, },})
const datePickerViewSizes = stylex.create({ xs: { '--table-cell-size': sizes._8, '--datepicker-nav-trigger-size': sizes._7, '--datepicker-select-height': sizes._8, }, sm: { '--table-cell-size': sizes._9, '--datepicker-nav-trigger-size': sizes._8, '--datepicker-select-height': sizes._9, }, md: { '--table-cell-size': sizes._10, '--datepicker-nav-trigger-size': sizes._8, '--datepicker-select-height': sizes._10, }, lg: { '--table-cell-size': sizes._10, '--datepicker-nav-trigger-size': sizes._9, '--datepicker-select-height': sizes._10, }, xl: { '--table-cell-size': sizes._10, '--datepicker-nav-trigger-size': sizes._9, '--datepicker-select-height': sizes._10, },})
const datePickerViewControl = stylex.create({ base: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: spacing._2, height: 'var(--datepicker-nav-trigger-size)', },})
const datePickerViewTrigger = stylex.create({ base: { display: 'inline-flex', flex: 1, alignItems: 'center', justifyContent: 'center', gap: spacing._1, paddingBlock: spacing._1_5, paddingInline: spacing._2, fontSize: fontSizes.sm, lineHeight: lineHeights.sm, fontWeight: fontWeights.semibold, borderRadius: semanticRadii.controlMd, outlineWidth: { default: null, ':focus-visible': 'var(--focus-ring-width, 0)', }, outlineOffset: { default: null, ':focus-visible': '0px', }, outlineStyle: { default: null, ':focus-visible': 'solid', }, outlineColor: { default: null, ':focus-visible': colorPalette.focusRing, }, focusRingWidth: '2px', backgroundColor: { default: null, ':hover': colorPalette.subtle, }, },})
const datePickerPrevTrigger = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 'var(--datepicker-nav-trigger-size)', height: 'var(--datepicker-nav-trigger-size)', borderRadius: semanticRadii.controlMd, color: semanticColors.fg, boxShadow: { default: null, ':focus-visible': '0 0 0 2px var(--colors-color-palette-focus-ring)', }, focusRingWidth: '2px', backgroundColor: { default: null, ':hover': colorPalette.subtle, }, opacity: { default: null, ':is(:disabled, [disabled], [data-disabled])': 0.5, }, [datePickerPrevTriggerIconVars.width]: sizes._4, [datePickerPrevTriggerIconVars.height]: sizes._4, },})
const datePickerPrevTriggerIcon = stylex.create({ base: { width: datePickerPrevTriggerIconVars.width, height: datePickerPrevTriggerIconVars.height, },})
const datePickerNextTrigger = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 'var(--datepicker-nav-trigger-size)', height: 'var(--datepicker-nav-trigger-size)', borderRadius: semanticRadii.controlMd, color: semanticColors.fg, boxShadow: { default: null, ':focus-visible': '0 0 0 2px var(--colors-color-palette-focus-ring)', }, focusRingWidth: '2px', backgroundColor: { default: null, ':hover': colorPalette.subtle, }, opacity: { default: null, ':is(:disabled, [disabled], [data-disabled])': 0.5, }, [datePickerNextTriggerIconVars.width]: sizes._4, [datePickerNextTriggerIconVars.height]: sizes._4, },})
const datePickerNextTriggerIcon = stylex.create({ base: { width: datePickerNextTriggerIconVars.width, height: datePickerNextTriggerIconVars.height, },})
const datePickerRangeText = stylex.create({ base: { fontSize: fontSizes.sm, lineHeight: lineHeights.sm, fontWeight: fontWeights.semibold, },})
const datePickerTable = stylex.create({ base: { borderCollapse: 'separate', borderSpacing: 0, },})
const datePickerTableHeader = stylex.create({ base: { width: 'var(--table-cell-size)', paddingBlock: spacing._2, fontSize: fontSizes.xs, lineHeight: lineHeights.xs, fontWeight: fontWeights.medium, color: semanticColors.fgMuted, textAlign: 'center', textTransform: 'uppercase', },})
const datePickerTableCell = stylex.create({ base: { paddingBlock: spacing._0_5, },})
const datePickerTableCellTrigger = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', minWidth: 'var(--table-cell-size)', minHeight: 'var(--table-cell-size)', fontSize: fontSizes.sm, lineHeight: lineHeights.sm, borderRadius: semanticRadii.controlMd, outlineWidth: { default: null, ':focus-visible': 'var(--focus-ring-width, 0)', }, outlineOffset: { default: null, ':focus-visible': '0px', }, outlineStyle: { default: null, ':focus-visible': 'solid', }, outlineColor: { default: null, ':focus-visible': colorPalette.focusRing, }, focusRingWidth: '2px', focusRingOffset: '0px', cursor: 'default', position: 'relative', backgroundColor: { default: null, ':hover': colorPalette.subtle, }, opacity: { default: null, ':is(:disabled, [disabled], [data-disabled])': 0.4, }, },})
const datePickerTableCellTriggerHideOutsideDays = stylex.create({ true: {},})
const datePickerMonthSelect = stylex.create({ base: { height: 'var(--datepicker-select-height)', paddingInlineStart: spacing._2, paddingInlineEnd: spacing._8, fontSize: fontSizes.sm, lineHeight: lineHeights.sm, borderWidth: '1px', borderRadius: semanticRadii.controlMd, outline: 'none', outlineWidth: { default: null, ':focus-visible': 'var(--focus-ring-width, 0)', }, outlineOffset: { default: null, ':focus-visible': '0px', }, outlineStyle: { default: null, ':focus-visible': 'solid', }, outlineColor: { default: null, ':focus-visible': colorPalette.focusRing, }, appearance: 'none', fieldSizing: 'content', backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")", backgroundRepeat: 'no-repeat', backgroundPosition: 'right 0.375rem center', backgroundSize: '1.25em', },})
const datePickerYearSelect = stylex.create({ base: { height: 'var(--datepicker-select-height)', paddingInlineStart: spacing._2, paddingInlineEnd: spacing._8, fontSize: fontSizes.sm, lineHeight: lineHeights.sm, borderWidth: '1px', borderRadius: semanticRadii.controlMd, outline: 'none', outlineWidth: { default: null, ':focus-visible': 'var(--focus-ring-width, 0)', }, outlineOffset: { default: null, ':focus-visible': '0px', }, outlineStyle: { default: null, ':focus-visible': 'solid', }, outlineColor: { default: null, ':focus-visible': colorPalette.focusRing, }, appearance: 'none', fieldSizing: 'content', backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")", backgroundRepeat: 'no-repeat', backgroundPosition: 'right 0.375rem center', backgroundSize: '1.25em', },})
const datePickerClearTrigger = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: sizes._6, height: sizes._6, flexShrink: 0, fontSize: fontSizes.xs, lineHeight: lineHeights.xs, borderRadius: semanticRadii.controlMd, color: { default: semanticColors.fgMuted, ':hover': semanticColors.fg, }, outlineWidth: { default: null, ':focus-visible': 'var(--focus-ring-width, 0)', }, outlineOffset: { default: null, ':focus-visible': '0px', }, outlineStyle: { default: null, ':focus-visible': 'solid', }, outlineColor: { default: null, ':focus-visible': colorPalette.focusRing, }, [datePickerClearTriggerIconVars.width]: sizes._4, [datePickerClearTriggerIconVars.height]: sizes._4, },})
const datePickerClearTriggerIcon = stylex.create({ base: { width: datePickerClearTriggerIconVars.width, height: datePickerClearTriggerIconVars.height, },})
export type DatePickerSize = keyof typeof datePickerRootSizes
export type DatePickerHideOutsideDays = keyof typeof datePickerTableCellTriggerHideOutsideDays
export type DatePickerVariant = keyof typeof datePickerIndicatorGroupVariants
const datePickerRecipe = defineSlotRecipe({ slots: { root: { styles: datePickerRoot, sizes: datePickerRootSizes }, label: { styles: datePickerLabel }, indicatorGroup: { styles: datePickerIndicatorGroup, variants: datePickerIndicatorGroupVariants, }, control: { styles: datePickerControl }, input: { styles: datePickerInput, variants: datePickerInputVariants }, trigger: { styles: datePickerTrigger }, content: { styles: datePickerContent }, view: { styles: datePickerView, sizes: datePickerViewSizes }, viewControl: { styles: datePickerViewControl }, viewTrigger: { styles: datePickerViewTrigger }, prevTrigger: { styles: datePickerPrevTrigger }, nextTrigger: { styles: datePickerNextTrigger }, rangeText: { styles: datePickerRangeText }, table: { styles: datePickerTable }, tableHeader: { styles: datePickerTableHeader }, tableCell: { styles: datePickerTableCell }, tableCellTrigger: { styles: datePickerTableCellTrigger }, monthSelect: { styles: datePickerMonthSelect }, yearSelect: { styles: datePickerYearSelect }, clearTrigger: { styles: datePickerClearTrigger }, }, defaultVariants: { size: "md", variant: "outline" },});
// chrome the generated recipe leaves to the composition layer: unstyled// trigger buttons and the popup panel surfaceconst chrome = stylex.create({ btnReset: { appearance: "none", backgroundColor: "transparent", borderWidth: 0, borderStyle: "none", padding: 0, margin: 0, fontFamily: "inherit", fontSize: "inherit", color: "inherit", cursor: "pointer", textAlign: "inherit", }, panel: { backgroundColor: semanticColors.bgPanel, borderRadius: semanticRadii.panel, boxShadow: semanticShadows.overlay, },});
function CalendarIcon(props: React.ComponentProps<"svg">) { return ( <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}> <rect x="2.5" y="3.5" width="11" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.5" /> <path d="M2.5 6.5h11M5.5 2v2.5M10.5 2v2.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /> </svg> );}
function ChevronLeftIcon(props: React.ComponentProps<"svg">) { return ( <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}> <path d="M10 4 6 8l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> </svg> );}
function ChevronRightIcon(props: React.ComponentProps<"svg">) { return ( <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}> <path d="m6 4 4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> </svg> );}
function CloseIcon(props: React.ComponentProps<"svg">) { return ( <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}> <path d="m4 4 8 8m0-8-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /> </svg> );}
const HideOutsideDaysContext = createContext(true);
const { withProvider, withContext } = createSlotRecipeContext(datePickerRecipe);
export type DatePickerVariantProps = Partial<SlotRecipeVariants<typeof datePickerRecipe>> & { hideOutsideDays?: boolean;};
const DatePickerRoot = withProvider(ArkDatePicker.Root, "root", "DatePickerRoot");
function Root( props: React.ComponentProps<typeof DatePickerRoot> & { hideOutsideDays?: boolean },) { const { hideOutsideDays = true, ...rest } = props; return ( <HideOutsideDaysContext.Provider value={hideOutsideDays}> <DatePickerRoot {...rest} /> </HideOutsideDaysContext.Provider> );}Root.displayName = "DatePickerRoot";
const StyledTrigger = withContext( ArkDatePicker.Trigger, (v) => [chrome.btnReset, ...resolveSlotStyles(datePickerRecipe.slots.trigger, v)], "DatePickerTrigger",);
function Trigger( props: React.ComponentProps<typeof ArkDatePicker.Trigger> & StyleOverrideProps,) { const { children, ...rest } = props; return ( <StyledTrigger {...rest}> {children ?? <CalendarIcon {...stylex.props(datePickerTriggerIcon.base)} />} </StyledTrigger> );}Trigger.displayName = "DatePickerTrigger";
const StyledClearTrigger = withContext( ArkDatePicker.ClearTrigger, (v) => [chrome.btnReset, ...resolveSlotStyles(datePickerRecipe.slots.clearTrigger, v)], "DatePickerClearTrigger",);
function ClearTrigger( props: React.ComponentProps<typeof ArkDatePicker.ClearTrigger> & StyleOverrideProps,) { const { children, ...rest } = props; return ( <StyledClearTrigger {...rest}> {children ?? <CloseIcon {...stylex.props(datePickerClearTriggerIcon.base)} />} </StyledClearTrigger> );}ClearTrigger.displayName = "DatePickerClearTrigger";
const StyledPrevTrigger = withContext( ArkDatePicker.PrevTrigger, (v) => [chrome.btnReset, ...resolveSlotStyles(datePickerRecipe.slots.prevTrigger, v)], "DatePickerPrevTrigger",);
function PrevTrigger( props: React.ComponentProps<typeof ArkDatePicker.PrevTrigger> & StyleOverrideProps,) { const { children, ...rest } = props; return ( <StyledPrevTrigger {...rest}> {children ?? <ChevronLeftIcon {...stylex.props(datePickerPrevTriggerIcon.base)} />} </StyledPrevTrigger> );}PrevTrigger.displayName = "DatePickerPrevTrigger";
const StyledNextTrigger = withContext( ArkDatePicker.NextTrigger, (v) => [chrome.btnReset, ...resolveSlotStyles(datePickerRecipe.slots.nextTrigger, v)], "DatePickerNextTrigger",);
function NextTrigger( props: React.ComponentProps<typeof ArkDatePicker.NextTrigger> & StyleOverrideProps,) { const { children, ...rest } = props; return ( <StyledNextTrigger {...rest}> {children ?? <ChevronRightIcon {...stylex.props(datePickerNextTriggerIcon.base)} />} </StyledNextTrigger> );}NextTrigger.displayName = "DatePickerNextTrigger";
function TableCellTriggerNode(props: ArkDatePicker.TableCellTriggerProps) { const hideOutsideDays = useContext(HideOutsideDaysContext); return ( <ArkDatePicker.TableCellTrigger {...mergeProps( props, stylex.props(hideOutsideDays && datePickerTableCellTriggerHideOutsideDays.true), )} /> );}
const TableCellTrigger = withContext( TableCellTriggerNode, (v) => [chrome.btnReset, ...resolveSlotStyles(datePickerRecipe.slots.tableCellTrigger, v)], "DatePickerTableCellTrigger",);
function Positioner({ children, ...rest }: ArkDatePicker.PositionerProps) { return ( <Portal> <ArkDatePicker.Positioner {...rest}>{children}</ArkDatePicker.Positioner> </Portal> );}
/** * DatePicker — Ark UI's date-picker machine wearing the generated slot * recipe. `<DatePicker.Root variant size>` resolves the recipe once; every * part inherits it through context. Use `DatePicker.Content` directly for * `inline` roots, or wrap it in `DatePicker.Positioner` for a portalled * popup. Trigger and the navigation triggers ship default icons. */export const DatePicker = { Root, Label: withContext(ArkDatePicker.Label, "label", "DatePickerLabel"), Control: withContext(ArkDatePicker.Control, "control", "DatePickerControl"), Input: withContext(ArkDatePicker.Input, "input", "DatePickerInput"), Trigger, ClearTrigger, IndicatorGroup: withContext("div", "indicatorGroup", "DatePickerIndicatorGroup"), Positioner, Content: withContext( ArkDatePicker.Content, (v) => [...resolveSlotStyles(datePickerRecipe.slots.content, v), chrome.panel], "DatePickerContent", ), View: withContext(ArkDatePicker.View, "view", "DatePickerView"), ViewControl: withContext(ArkDatePicker.ViewControl, "viewControl", "DatePickerViewControl"), ViewTrigger: withContext( ArkDatePicker.ViewTrigger, (v) => [chrome.btnReset, ...resolveSlotStyles(datePickerRecipe.slots.viewTrigger, v)], "DatePickerViewTrigger", ), RangeText: withContext(ArkDatePicker.RangeText, "rangeText", "DatePickerRangeText"), PrevTrigger, NextTrigger, Table: withContext(ArkDatePicker.Table, "table", "DatePickerTable"), TableHead: ArkDatePicker.TableHead, TableBody: ArkDatePicker.TableBody, TableRow: ArkDatePicker.TableRow, TableHeader: withContext(ArkDatePicker.TableHeader, "tableHeader", "DatePickerTableHeader"), TableCell: withContext(ArkDatePicker.TableCell, "tableCell", "DatePickerTableCell"), TableCellTrigger, MonthSelect: withContext(ArkDatePicker.MonthSelect, "monthSelect", "DatePickerMonthSelect"), YearSelect: withContext(ArkDatePicker.YearSelect, "yearSelect", "DatePickerYearSelect"), Context: ArkDatePicker.Context,};
export { parseDate } from "@ark-ui/react/date-picker";