4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T470e,'use client' import { IconChevronLeft, IconChevronRight, IconChevronDown, IconCalendarEvent } from '@tabler/icons-react' // Title: Event Calendar Nav // Description: Composable navigation - Today, prev/next, period title, view switcher dropdown, and a free toolbar slot. import { useState, type ReactNode } from 'react' import { useEventCalendarNavigation, useEventCalendarSettings, useEventCalendarView, useEventCalendarViewConfig, } from '@/components/spaceui/event-calendar' import { toZoned } from '@/components/spaceui/event-calendar-lib' import type { CalendarView } from '@/components/spaceui/event-calendar-types' import { mergeProps } from '@base-ui/react/merge-props' import { useRender } from '@base-ui/react/use-render' import { addDays, format } from 'date-fns' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Calendar } from '@/components/ui/calendar' import { Menu, MenuPopup, MenuGroup, MenuItem, MenuGroupLabel, MenuTrigger } from '@/components/ui/menu' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' /** Configured nav button variant/size (viewConfig.navButtonVariant/Size) * plus the shared classNames.navButton hook, merged on every nav button. */ function useNavButtonProps(): { variant: 'ghost' | 'outline' | 'secondary' | 'default' size: 'sm' | 'default' iconSize: 'icon-sm' | 'icon' className: string | undefined } { const viewConfig = useEventCalendarViewConfig() return { variant: viewConfig.navButtonVariant, size: viewConfig.navButtonSize, iconSize: viewConfig.navButtonSize === 'sm' ? 'icon-sm' : 'icon', className: viewConfig.classNames?.navButton, } } /** Resolved nav tooltip policy (viewConfig.navTooltips + classNames.navTooltip). */ function useNavTooltipConfig(): { disabled: boolean side: 'top' | 'bottom' | 'left' | 'right' delay: number closeDelay: number timeout: number className: string | undefined } { const viewConfig = useEventCalendarViewConfig() const config = viewConfig.navTooltips === false ? undefined : viewConfig.navTooltips return { disabled: viewConfig.navTooltips === false, // the nav sits at the top of the calendar, so tooltips open upward by // default (away from the grid); collision flipping still drops them below // when there is no room above side: config?.side ?? 'top', delay: config?.delay ?? 600, closeDelay: config?.closeDelay ?? 0, timeout: config?.timeout ?? 300, className: viewConfig.classNames?.navTooltip, } } type NavButtonProps = Omit, 'children'> & { children?: ReactNode /** * Tooltip policy (the part that usually goes wrong on clickable elements): * tooltips appear ONLY on hover or keyboard focus-visible - a pointer click * never re-triggers them. Buttons that open overlays (the view switcher) * use a hover-only tooltip that is force-closed while the overlay is up and * ignores focus, so nothing flashes when focus returns after selection. * Icon-only buttons default to their accessible label; Today defaults to * the actual current date (info the label doesn't carry). Pass null to * disable one, or any node to override; viewConfig.navTooltips=false turns * them all off (its object form tunes side/delay/closeDelay/timeout). */ tooltip?: ReactNode | null } /** Hover/focus-visible tooltip wrapper; renders the bare button when disabled * (per-button content=null or viewConfig.navTooltips=false). */ function NavTooltip({ content, children }: { content: ReactNode | null; children: React.ReactElement }) { const tooltips = useNavTooltipConfig() if (tooltips.disabled || content === null || content === undefined) return children return ( {content} ) } function EventCalendarNavToday({ className, render, children, tooltip, ...props }: NavButtonProps) { const { today, isToday } = useEventCalendarNavigation() const settings = useEventCalendarSettings() const nav = useNavButtonProps() // display-zone "today", like every other today derivation in the calendar // (a system-zone new Date() can name a different day than Today opens) const defaultTooltip = format(toZoned(new Date(), settings.timeZone), settings.i18n.formats.dayTitle, { locale: settings.locale, }) return ( ) } function EventCalendarNavPrev({ className, render, children, tooltip, ...props }: NavButtonProps) { const { prev } = useEventCalendarNavigation() const settings = useEventCalendarSettings() const nav = useNavButtonProps() return ( ) } function EventCalendarNavNext({ className, render, children, tooltip, ...props }: NavButtonProps) { const { next } = useEventCalendarNavigation() const settings = useEventCalendarSettings() const nav = useNavButtonProps() return ( ) } interface EventCalendarTitleProps extends useRender.ComponentProps<'div'> { format?: (ctx: { title: string }) => ReactNode } function EventCalendarTitle({ className, render, format: formatTitle, ...props }: EventCalendarTitleProps) { const { title } = useEventCalendarNavigation() const viewConfig = useEventCalendarViewConfig() const defaultProps = { 'data-slot': 'event-calendar-title', 'aria-live': 'polite' as const, className: cn('min-w-0 truncate text-sm font-semibold', viewConfig.classNames?.title, className), children: formatTitle?.({ title }) ?? title, } return useRender({ defaultTagName: 'div', render, props: mergeProps<'div'>(defaultProps, props), }) } interface EventCalendarViewSwitcherProps extends Omit, 'children'> { children?: ReactNode /** Hover/focus-visible hint; defaults to the "Select view" label. Pass * null to disable (overlay-opener policy). */ tooltip?: ReactNode | null } function EventCalendarViewSwitcher({ className, render, children, tooltip, ...props }: EventCalendarViewSwitcherProps) { const { view, dayCount, availableViews, setView } = useEventCalendarView() const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const nav = useNavButtonProps() const tooltips = useNavTooltipConfig() const labels = settings.i18n.labels // Controlled open: selecting a view swaps the whole content subtree in the // same click, so closing must not depend on the menu's internal handler. const [open, setOpen] = useState(false) // Hover-only tooltip: when the menu closes, Base UI focuses the trigger // again and a focus-opened tooltip would flash - ignore focus opens. const [tipOpen, setTipOpen] = useState(false) const selectView = (v: CalendarView, opts?: { dayCount?: number }) => { setOpen(false) setView(v, opts) } const viewLabel = (v: CalendarView) => v === 'days' ? settings.i18n.viewNames.days(dayCount) : settings.i18n.viewNames[v] return ( { setOpen(next) if (next) setTipOpen(false) }} > {/* Tooltip on an overlay-opener: hover-only (focus opens ignored) and force-closed while the menu is up, so it never lingers or flashes when focus returns on close. Inherits the nav TooltipProvider's delay/closeDelay/timeout. */} { // opens are hover-only; the trigger-focus open that follows a // menu close is ignored, closes always land if (next && details?.reason !== 'trigger-hover') return setTipOpen(next) }} > } /> } {...props} > {children ?? ( <> {viewLabel(view)} {tipOpen && !open && tooltip !== null && !tooltips.disabled && ( {tooltip ?? labels.selectView} )} {/* Base UI contract: GroupLabel must live inside Menu.Group */} {settings.i18n.labels.selectView} {availableViews.map((v) => v === 'days' ? ( viewConfig.dayCountPresets.map((count) => ( selectView('days', { dayCount: count })} > {settings.i18n.viewNames.days(count)} {/* hint derived from the preset itself, not i18n's default */} {viewConfig.enableShortcuts && {count}} )) ) : ( selectView(v)}> {viewLabel(v)} {viewConfig.enableShortcuts && ( {labels.viewShortcuts[v]} )} ), )} ) } /** Outline key badge; theme-token only, so it adapts to every style. */ function EventCalendarViewShortcut({ children }: { children: ReactNode }) { const viewConfig = useEventCalendarViewConfig() return ( {children} ) } interface EventCalendarDatePickerProps extends Omit, 'children'> { children?: ReactNode /** "auto" (default) resolves per view: range for week/N-days/agenda. */ mode?: 'auto' | 'single' | 'range' /** Hover/focus-visible hint; defaults to null - no tooltip, because the * button opens an overlay (see the NavButtonProps tooltip policy). */ tooltip?: ReactNode | null } /** Views whose period reads better as a highlighted range. */ const RANGE_VIEWS: CalendarView[] = ['week', 'days', 'agenda'] /** * Optional go-to-date picker (shadcn Calendar in a popover), view-aware: * week/N-days/agenda highlight the whole active range (any click re-anchors * the period), other views select a single date. Not part of the default * nav - compose it yourself (or any external picker driving * useEventCalendarNavigation().goTo). No tooltip by default: it opens an * overlay (see the NavButtonProps tooltip policy); pass `tooltip` to opt in. */ function EventCalendarDatePicker({ className, render, children, tooltip = null, mode, ...props }: EventCalendarDatePickerProps) { const { date, goTo, activeRange } = useEventCalendarNavigation() const { view } = useEventCalendarView() const settings = useEventCalendarSettings() const viewConfig = useEventCalendarViewConfig() const nav = useNavButtonProps() const [open, setOpen] = useState(false) const zoned = toZoned(date, settings.timeZone) const configured = mode ?? 'auto' const resolved = configured === 'auto' ? (RANGE_VIEWS.includes(view) ? 'range' : 'single') : configured const pick = (next: Date | undefined) => { if (!next) return goTo(next) setOpen(false) } return ( } {...props} > {children ?? {resolved === 'range' ? ( ) : ( )} ) } type EventCalendarToolbarProps = useRender.ComponentProps<'div'> /** Free slot for consumer toolbar buttons; pure layout shell. */ function EventCalendarToolbar({ className, render, ...props }: EventCalendarToolbarProps) { const viewConfig = useEventCalendarViewConfig() const defaultProps = { 'data-slot': 'event-calendar-toolbar', className: cn('flex items-center gap-2', viewConfig.classNames?.toolbar, className), children: props.children, } return useRender({ defaultTagName: 'div', render, props: mergeProps<'div'>(defaultProps, props), }) } interface EventCalendarNavProps extends useRender.ComponentProps<'div'> { /** * Render the view switcher in the composed layout. Turn off when the * calendar ships with a fixed view (e.g. a month-only embed) and users * should not be able to change it. * @default true */ showViewSwitcher?: boolean } /** * Default composed nav: Today, prev/next, title, spacer, view switcher. * Pass children to use it as a pure layout shell instead. */ function EventCalendarNav({ className, render, children, showViewSwitcher = true, ...props }: EventCalendarNavProps) { const viewConfig = useEventCalendarViewConfig() const tooltips = useNavTooltipConfig() const defaultProps = { 'data-slot': 'event-calendar-nav', className: cn( 'flex min-w-0 flex-wrap items-center gap-1 px-2 py-2', viewConfig.stickyNav && 'bg-background sticky top-0 z-30', viewConfig.classNames?.nav, className, ), children: children ?? ( // Shared provider: first tooltip waits, moving between buttons is instant {showViewSwitcher && }

{/* ms-3 sets the title apart from the tight control cluster so the period reads as its own group, not another button */}

), } return useRender({ defaultTagName: 'div', render, props: mergeProps<'div'>(defaultProps, props), }) } export { EventCalendarDatePicker, EventCalendarNav, EventCalendarNavNext, EventCalendarNavPrev, EventCalendarNavToday, EventCalendarTitle, EventCalendarToolbar, EventCalendarViewSwitcher, } export type { EventCalendarNavProps, EventCalendarTitleProps, EventCalendarToolbarProps, EventCalendarViewSwitcherProps, } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}],["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}]]}],["$","$L4d",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-event-calendar.json","https://www.spaceui.one/r/components-spaceui-event-calendar-lib.json","https://www.spaceui.one/r/components-spaceui-event-calendar-types.json","https://www.spaceui.one/r/lib-utils.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-calendar.json","https://www.spaceui.one/r/primitives-menu.json","https://www.spaceui.one/r/primitives-popover.json","https://www.spaceui.one/r/primitives-tooltip.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/registry/components/spaceui/event-calendar/event-calendar-nav/index.tsx","content":"$4f","type":"registry:component","target":"components/spaceui/event-calendar-nav.tsx"}],"className":"h-[70svh] min-h-80"}]]}]