4f: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:Tcda,"use client"; // karaui.kamisama-v0.my.id/components/motion/date-picker import { CalendarDays } from "lucide-react"; import { useMemo, useState } from "react"; import { Calendar } from "@/components/motion/calendar"; import { MorphPopover, MorphPopoverContent, MorphPopoverTrigger, } from "@/components/motion/popover-morph"; import { cn } from "@/lib/utils"; const MEDIUM_DATE: Intl.DateTimeFormatOptions = { dateStyle: "medium" }; export interface DatePickerProps { value?: Date | null; defaultValue?: Date | null; onValueChange?: (date: Date) => void; placeholder?: string; /** Intl options for the trigger label. Default: medium date. */ formatOptions?: Intl.DateTimeFormatOptions; /** Default "en-US". */ locale?: string; minDate?: Date; maxDate?: Date; isDateDisabled?: (date: Date) => boolean; weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6; align?: "start" | "end"; disabled?: boolean; className?: string; "aria-label"?: string; } /** * Date field whose calendar morphs open from the trigger corner and closes * as soon as a day is picked. Controlled or uncontrolled. */ export function DatePicker({ value: controlledValue, defaultValue = null, onValueChange, placeholder = "Pick a date", formatOptions = MEDIUM_DATE, locale = "en-US", minDate, maxDate, isDateDisabled, weekStartsOn, align = "start", disabled, className, "aria-label": ariaLabel = "Choose date", }: DatePickerProps) { const [open, setOpen] = useState(false); const [internalValue, setInternalValue] = useState( defaultValue, ); const value = controlledValue !== undefined ? controlledValue : internalValue; const label = useMemo( () => value ? new Intl.DateTimeFormat(locale, formatOptions).format(value) : null, [value, locale, formatOptions], ); return ( { if (controlledValue === undefined) setInternalValue(d); onValueChange?.(d); setOpen(false); }} locale={locale} minDate={minDate} maxDate={maxDate} isDateDisabled={isDateDisabled} weekStartsOn={weekStartsOn} className="border-0 bg-transparent" /> ); } 52:T889a,"use client"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type KeyboardEvent, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react"; import { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease"; import { cn } from "@/lib/utils"; export type DateRange = { from: Date; to?: Date }; /** A whole week row: `from` is its first day, `to` its seventh. */ export type WeekRange = { from: Date; to: Date }; /** Per-day extras from `getDayMeta`. */ export type CalendarDayMeta = { /** Short text under the day number (a price, a count). Cells grow taller * when any day has meta; the label is also read after the date. */ label?: string; /** "accent" tints the label (deals, highlights); "muted" fades it. */ tone?: "muted" | "accent"; /** Blocks the day and strikes it through, like `isDateDisabled`. */ disabled?: boolean; }; type CalendarBaseProps = { /** Earliest selectable day (inclusive). */ minDate?: Date; /** Latest selectable day (inclusive). */ maxDate?: Date; /** Extra per-day rule, e.g. weekends or booked dates. */ isDateDisabled?: (date: Date) => boolean; /** 0 = Sunday … 6 = Saturday. Default 0. */ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6; /** BCP 47 locale for month, weekday and day labels. Default "en-US" — a * fixed default keeps server and client output identical for hydration. */ locale?: string; /** Controlled visible month (any day inside it). */ month?: Date; /** Uncontrolled initial visible month. Default: the selection or today. */ defaultMonth?: Date; onMonthChange?: (month: Date) => void; /** Months shown side by side (stacked below `sm`). Default 1. With more * than one, days outside each month are left blank so none repeats. */ numberOfMonths?: number; /** Adds an ISO 8601 week-number column ("Wk") before each row. */ showWeekNumber?: boolean; /** Per-day label, tone and blocking, e.g. nightly prices or booked days. * Passing it switches the grid to taller cells that fit the label. */ getDayMeta?: (date: Date) => CalendarDayMeta | null | undefined; className?: string; "aria-label"?: string; }; export type CalendarSingleProps = CalendarBaseProps & { mode?: "single"; value?: Date | null; defaultValue?: Date | null; onValueChange?: (date: Date) => void; }; export type CalendarRangeProps = CalendarBaseProps & { mode: "range"; value?: DateRange | null; defaultValue?: DateRange | null; onValueChange?: (range: DateRange) => void; /** Fewest nights (days between start and end) a finished range may span. * While the end is being chosen, days too close are blocked. */ minNights?: number; /** Most nights a finished range may span; farther days are blocked. */ maxNights?: number; }; export type CalendarWeekProps = CalendarBaseProps & { mode: "week"; value?: WeekRange | null; defaultValue?: WeekRange | null; /** Called with the picked day's whole row, honouring `weekStartsOn`. */ onValueChange?: (week: WeekRange) => void; }; export type CalendarMultipleProps = CalendarBaseProps & { mode: "multiple"; value?: Date[] | null; defaultValue?: Date[] | null; /** Called with the selection sorted by date. */ onValueChange?: (dates: Date[]) => void; /** Most days that can be picked; further picks are ignored. */ max?: number; }; export type CalendarProps = | CalendarSingleProps | CalendarRangeProps | CalendarWeekProps | CalendarMultipleProps; // ── date helpers (local time, day precision) ────────────────────────────── const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()); const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1); const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n); /** Adds months, clamping the day so Jan 31 + 1 month lands on Feb 28/29. */ function addMonths(d: Date, n: number) { const target = new Date(d.getFullYear(), d.getMonth() + n, 1); const lastDay = new Date( target.getFullYear(), target.getMonth() + 1, 0, ).getDate(); target.setDate(Math.min(d.getDate(), lastDay)); return target; } const sameDay = (a?: Date | null, b?: Date | null) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); const sameMonth = (a: Date, b: Date) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth(); const dayKey = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; const monthKey = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`; /** Whole days from `a` to `b`; rounding absorbs DST hour shifts. */ const daysBetween = (a: Date, b: Date) => Math.round((startOfDay(b).getTime() - startOfDay(a).getTime()) / 86_400_000); /** ISO 8601 week number: weeks start Monday, week 1 holds Jan 4. */ function isoWeek(d: Date) { const thursday = addDays(d, 3 - ((d.getDay() + 6) % 7)); const jan4 = new Date(thursday.getFullYear(), 0, 4); const firstThursday = addDays(jan4, 3 - ((jan4.getDay() + 6) % 7)); return 1 + Math.round(daysBetween(firstThursday, thursday) / 7); } /** Always 6 weeks, so the panel never changes height between months. */ function buildWeeks(month: Date, weekStartsOn: number) { const first = startOfMonth(month); const offset = (first.getDay() - weekStartsOn + 7) % 7; const start = addDays(first, -offset); return Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, d) => addDays(start, w * 7 + d)), ); } // Month swap is a short directional slide; the exit is quicker than the entry. const MONTH_ENTER = { duration: 0.26, ease: EASE_OUT } as const; const MONTH_EXIT = { duration: 0.16, ease: EASE_OUT } as const; /** * Month-grid calendar for single dates, ranges, whole weeks or several * separate days, one or more months wide. The selected day is a pill that * glides between days on a shared-layout spring; a picked week is one pill * across its row; months slide in from the direction you travel. Optional ISO * week numbers, per-day labels (`getDayMeta`) and night limits for ranges. * Full keyboard grid navigation (arrows, Home/End, PageUp/PageDown, * Shift+Page for years). Controlled or uncontrolled for both the selection * and the visible month; reduced-motion safe. */ export function Calendar(props: CalendarProps) { const { minDate, maxDate, isDateDisabled, weekStartsOn = 0, locale = "en-US", month: controlledMonth, defaultMonth, onMonthChange, numberOfMonths = 1, showWeekNumber = false, getDayMeta, className, "aria-label": ariaLabel, } = props; const isRange = props.mode === "range"; const isWeek = props.mode === "week"; const isMultiple = props.mode === "multiple"; const count = Math.max(1, Math.floor(numberOfMonths)); const minNights = isRange ? ((props as CalendarRangeProps).minNights ?? 0) : 0; const maxNights = isRange ? (props as CalendarRangeProps).maxNights : undefined; // Taller cells only when there is something to put under the number. const tall = !!getDayMeta; const uid = useId(); const reduce = useReducedMotion(); // ── selection ── const [internalValue, setInternalValue] = useState< Date | DateRange | WeekRange | Date[] | null >(props.defaultValue ?? null); const valueControlled = props.value !== undefined; const value = valueControlled ? (props.value ?? null) : internalValue; const single = isRange || isWeek || isMultiple ? null : (value as Date | null); const range = isRange ? (value as DateRange | null) : null; const week = isWeek ? (value as WeekRange | null) : null; const picked = isMultiple ? ((value as Date[] | null) ?? []) : []; const isPicked = (d: Date) => picked.some((p) => sameDay(p, d)); // ── visible months ── const anchor = single ?? range?.from ?? week?.from ?? picked[0] ?? null; const [internalMonth, setInternalMonth] = useState(() => startOfMonth(defaultMonth ?? anchor ?? new Date()), ); const month = controlledMonth ? startOfMonth(controlledMonth) : internalMonth; const [direction, setDirection] = useState(1); const lastMonth = addMonths(month, count - 1); const inWindow = (d: Date) => { const m = startOfMonth(d); return m >= month && m <= lastMonth; }; const setMonth = useCallback( (next: Date) => { const m = startOfMonth(next); if (sameMonth(m, month)) return; setDirection(m > month ? 1 : -1); if (!controlledMonth) setInternalMonth(m); onMonthChange?.(m); }, [month, controlledMonth, onMonthChange], ); // "Today" is read after mount: the server's clock and timezone can disagree // with the viewer's, and a mismatched marker would break hydration. const [today, setToday] = useState(null); useEffect(() => setToday(startOfDay(new Date())), []); // ── roving focus ── const [focused, setFocused] = useState(() => startOfDay(anchor ?? defaultMonth ?? new Date()), ); const gridRef = useRef(null); const shouldFocus = useRef(false); // Range hover preview: the band follows the pointer until the end is picked. // In week mode it is the row under the pointer or keyboard focus. const [hovered, setHovered] = useState(null); // Keep the tab stop inside the visible months when they change by buttons. const focusInMonth = inWindow(focused) ? focused : anchor && inWindow(anchor) ? anchor : month; useEffect(() => { if (!shouldFocus.current) return; shouldFocus.current = false; gridRef.current ?.querySelector( `[data-month="${monthKey(focusInMonth)}"] [data-date="${dayKey(focusInMonth)}"]`, ) ?.focus(); }, [focusInMonth]); const isDisabled = useCallback( (d: Date) => (minDate && d < startOfDay(minDate)) || (maxDate && d > startOfDay(maxDate)) || !!isDateDisabled?.(d) || !!getDayMeta?.(d)?.disabled, [minDate, maxDate, isDateDisabled, getDayMeta], ); // While a range end is being chosen, days that would make it too short or // too long are blocked (earlier days stay open: they restart the range). const choosingEnd = !!range && !range.to; const nightsAllowed = (n: number) => n >= minNights && (maxNights === undefined || n <= maxNights); const blockedByNights = (d: Date) => choosingEnd && !!range && d > range.from && !nightsAllowed(daysBetween(range.from, d)); const weekStart = (d: Date) => addDays(d, -((d.getDay() - weekStartsOn + 7) % 7)); const select = (d: Date) => { if (isDisabled(d) || blockedByNights(d)) return; if (!inWindow(d)) setMonth(d); setFocused(d); if (isWeek) { const from = weekStart(d); const next: WeekRange = { from, to: addDays(from, 6) }; if (!valueControlled) setInternalValue(next); (props as CalendarWeekProps).onValueChange?.(next); return; } if (isMultiple) { const max = (props as CalendarMultipleProps).max; const next = isPicked(d) ? picked.filter((p) => !sameDay(p, d)) : max !== undefined && picked.length >= max ? null : [...picked, d].sort((a, b) => a.getTime() - b.getTime()); if (!next) return; if (!valueControlled) setInternalValue(next); (props as CalendarMultipleProps).onValueChange?.(next); return; } if (!isRange) { if (!valueControlled) setInternalValue(d); (props as CalendarSingleProps).onValueChange?.(d); return; } // First click starts a range; a later day closes it; an earlier day, the // start again when it would be too short, or a click on a finished range // starts over. const next: DateRange = range && !range.to && d >= range.from && nightsAllowed(daysBetween(range.from, d)) ? { from: range.from, to: d } : { from: d }; if (!valueControlled) setInternalValue(next); (props as CalendarRangeProps).onValueChange?.(next); }; const onGridKeyDown = (e: KeyboardEvent) => { const base = focusInMonth; let next: Date | null = null; switch (e.key) { case "ArrowLeft": next = addDays(base, -1); break; case "ArrowRight": next = addDays(base, 1); break; case "ArrowUp": next = addDays(base, -7); break; case "ArrowDown": next = addDays(base, 7); break; case "Home": next = addDays(base, -((base.getDay() - weekStartsOn + 7) % 7)); break; case "End": next = addDays(base, 6 - ((base.getDay() - weekStartsOn + 7) % 7)); break; case "PageUp": next = addMonths(base, e.shiftKey ? -12 : -1); break; case "PageDown": next = addMonths(base, e.shiftKey ? 12 : 1); break; default: return; } e.preventDefault(); shouldFocus.current = true; setFocused(next); // Scroll the window only when focus leaves it, by as little as needed. if (!inWindow(next)) setMonth(next < month ? next : addMonths(startOfMonth(next), 1 - count)); }; // ── labels ── const monthFormat = useMemo( () => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }), [locale], ); const weekdays = useMemo(() => { const short = new Intl.DateTimeFormat(locale, { weekday: "short" }); const long = new Intl.DateTimeFormat(locale, { weekday: "long" }); // 2023-01-01 was a Sunday. return Array.from({ length: 7 }, (_, i) => { const d = new Date(2023, 0, 1 + ((i + weekStartsOn) % 7)); return { short: short.format(d).slice(0, 2), long: long.format(d) }; }); }, [locale, weekStartsOn]); const dayLabel = useMemo( () => new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric", }), [locale], ); const prevDisabled = !!minDate && startOfMonth(minDate) >= month; const nextDisabled = !!maxDate && startOfMonth(maxDate) <= lastMonth; // Range band end: the picked end, or the hovered day while choosing one. // A day that can't close the range doesn't stretch the band to it. const bandEnd = range && !range.to && hovered && hovered > range.from && !isDisabled(hovered) && !blockedByNights(hovered) ? hovered : range?.to; // Week mode: the row being previewed (pointer or keyboard focus). const previewWeek = isWeek && hovered ? weekStart(hovered) : null; const navButton = "inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"; const months = Array.from({ length: count }, (_, i) => addMonths(month, i)); // Weekday index of the column, so connecting bands stop at the row ends. const column = (d: Date) => (d.getDay() - weekStartsOn + 7) % 7; const cellSize = tall ? "h-12 w-10" : "size-9"; return (

setHovered(null)} className="flex flex-col gap-x-6 gap-y-4 sm:flex-row" > {months.map((m, i) => { const mk = monthKey(m); const weeks = buildWeeks(m, weekStartsOn); const labelId = `${uid}-label-${i}`; return (

{i === 0 ? ( ) : ( )}

{monthFormat.format(m)}

{i === count - 1 ? ( ) : ( )}

({ opacity: 0, x: reduce ? 0 : dir * 28, filter: reduce ? "blur(0px)" : "blur(4px)", }), center: { opacity: 1, x: 0, filter: "blur(0px)", transition: MONTH_ENTER, }, exit: (dir: number) => ({ opacity: 0, x: reduce ? 0 : dir * -28, filter: reduce ? "blur(0px)" : "blur(4px)", transition: MONTH_EXIT, }), }} initial="enter" animate="center" exit="exit" className="border-collapse" > {showWeekNumber && ( Wk )} {weekdays.map((w) => ( {w.short} ))} {weeks.map((row) => { // Days this row actually draws: side-by-side months // leave the other month's days blank. const shown = count > 1 ? row.filter((d) => sameMonth(d, m)) : row; const weekSelected = !!week && sameDay(row[0], weekStart(week.from)); const weekPreview = !weekSelected && sameDay(row[0], previewWeek); // ISO weeks run Monday–Sunday; the row's Thursday // decides which one a differently started row is. const thursday = row.find((d) => d.getDay() === 4) ?? row[0]; return ( {showWeekNumber && ( {shown.length > 0 ? isoWeek(thursday) : null} )} {row.map((d) => { const outside = !sameMonth(d, m); // Side-by-side months would show these days twice. if (outside && count > 1) return ( ); const meta = getDayMeta?.(d) ?? null; const disabled = isDisabled(d); const nightsBlocked = !disabled && blockedByNights(d); const isToday = sameDay(d, today); const isFrom = sameDay(d, range?.from); const isTo = sameDay(d, bandEnd); const inBand = !!range?.from && !!bandEnd && d > range.from && d < bandEnd; const chosen = isMultiple && isPicked(d); const inWeek = !!week && d >= startOfDay(week.from) && d <= startOfDay(week.to); const selected = isRange ? isFrom || (isTo && !!range?.to) : isWeek ? inWeek : isMultiple ? chosen : sameDay(d, single); const endpoint = isFrom || isTo; // Picked neighbours in the same row merge into one // pill, so a run of days reads as a block. const joinPrev = chosen && column(d) > 0 && sameMonth(addDays(d, -1), m) && isPicked(addDays(d, -1)); const joinNext = chosen && column(d) < 6 && sameMonth(addDays(d, 1), m) && isPicked(addDays(d, 1)); // The week pill lives in the row's first drawn // cell and spans every drawn day after it. const weekPill = isWeek && (weekSelected || weekPreview) && sameDay(d, shown[0]); return ( {(inBand || (endpoint && bandEnd && !sameDay(range?.from, bandEnd))) && ( )} {weekPill && ( )} ); })} ); })}

); })}

); } 53:T28bf,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { cloneElement, createContext, isValidElement, type ReactElement, type ReactNode, type Ref, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { usePopoverPortalPosition } from "@/components/motion/popover-position"; import { EASE_OUT, SPRING_PANEL } from "@/lib/ease"; import { cn } from "@/lib/utils"; type Side = "top" | "bottom"; type Align = "start" | "end"; type MorphContextValue = { open: boolean; setOpen: (open: boolean) => void; toggle: () => void; triggerId: string; contentId: string; /** The element the panel measures against — see `registerTrigger`. */ triggerRef: React.MutableRefObject; registerTrigger: (node: HTMLElement | null) => void; contentRef: React.MutableRefObject; }; const MorphContext = createContext(null); function useMorphContext(component: string) { const ctx = useContext(MorphContext); if (!ctx) throw new Error(`${component} must be used within `); return ctx; } export interface MorphPopoverProps { children: ReactNode; /** Controlled open state. */ open?: boolean; /** Uncontrolled initial open state. */ defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; className?: string; } /** * A popover whose panel morphs open from the trigger corner: it's laid out at * full size but clipped to the corner nearest the trigger, then unclips as one * piece. Closes on outside pointer / Escape. Controlled or uncontrolled. */ export function MorphPopover({ children, open: controlledOpen, defaultOpen = false, onOpenChange, className, }: MorphPopoverProps) { const baseId = useId(); const [root, setRoot] = useState(null); const [trigger, setTrigger] = useState(null); const contentRef = useRef(null); const [internalOpen, setInternalOpen] = useState(defaultOpen); const controlled = controlledOpen !== undefined; const open = controlled ? controlledOpen : internalOpen; const setOpen = useCallback( (next: boolean) => { if (!controlled) setInternalOpen(next); onOpenChange?.(next); }, [controlled, onOpenChange], ); const toggle = useCallback(() => setOpen(!open), [setOpen, open]); // A trigger normally registers itself through MorphPopoverTrigger. It can't // when something else already clones the element — a Tooltip wrapping the // button, say — and an unregistered trigger leaves the panel with nothing to // measure against, so it renders permanently invisible. The root boxes the // trigger exactly (the content portals out of it), so it stands in until a // real trigger registers, and stands in again if that one unmounts. Both are // state, so a trigger arriving while the panel is open re-anchors it. const anchorRef = useMemo>( () => ({ current: trigger ?? root }), [root, trigger], ); // The panel is a `role="dialog"` and goes inert the moment it closes, so // focus cannot be left sitting inside it: a dismissal hands it back to the // trigger, the way the ARIA dialog pattern asks. A pointer dismissal takes // the focus onward itself when it lands on something focusable — this only // catches the case where it would otherwise be stranded. When no trigger has // registered, the root anchor stands in only if it can actually hold focus; // there is nowhere better than where the keyboard already is, so leave it. const close = useCallback(() => { setOpen(false); const focused = document.activeElement; const inPanel = focused instanceof HTMLElement && contentRef.current?.contains(focused); if (!inPanel) return; const restore = trigger ?? (root && root.tabIndex >= 0 ? root : null); restore?.focus(); }, [root, setOpen, trigger]); useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && close(); const onPointer = (e: PointerEvent) => { const target = e.target as Node; if ( root && !root.contains(target) && !contentRef.current?.contains(target) ) close(); }; window.addEventListener("keydown", onKey); window.addEventListener("pointerdown", onPointer); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("pointerdown", onPointer); }; }, [open, root, close]); const ctx = useMemo( () => ({ open, setOpen, toggle, triggerId: `${baseId}-trigger`, contentId: `${baseId}-content`, triggerRef: anchorRef, registerTrigger: setTrigger, contentRef, }), [open, setOpen, toggle, baseId, anchorRef], ); return (

{children}

); } export interface MorphPopoverTriggerProps { children: ReactElement; } function mergeRefs(...refs: Array | undefined>) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref && typeof ref === "object") (ref as React.MutableRefObject).current = node; } }; } /** Wraps a single element, toggling the popover on click. */ export function MorphPopoverTrigger({ children }: MorphPopoverTriggerProps) { const ctx = useMorphContext("MorphPopoverTrigger"); if (!isValidElement(children)) return children; const child = children as ReactElement>; const childOnClick = child.props.onClick as | ((e: unknown) => void) | undefined; const childRef = (child.props as { ref?: Ref }).ref; return cloneElement(child, { id: ctx.triggerId, ref: mergeRefs(childRef, ctx.registerTrigger), onClick: (e: unknown) => { childOnClick?.(e); ctx.toggle(); }, "aria-haspopup": "dialog", "aria-expanded": ctx.open, "aria-controls": ctx.open ? ctx.contentId : undefined, }); } const originFor = (side: Side, align: Align) => `${side === "bottom" ? "top" : "bottom"} ${align === "end" ? "right" : "left"}`; // A clip that hides everything but the corner nearest the trigger, so the // panel appears to grow out of it. inset(top right bottom left). function clipHidden(side: Side, align: Align, radius: number) { const top = side === "bottom" ? "0%" : "92%"; const bottom = side === "bottom" ? "92%" : "0%"; const right = align === "end" ? "0%" : "92%"; const left = align === "end" ? "92%" : "0%"; return `inset(${top} ${right} ${bottom} ${left} round ${radius}px)`; } const clipShown = (radius: number) => `inset(0% 0% 0% 0% round ${radius}px)`; // Preserve the original spring character on the wrapper, but tween the complex // clip-path so it cannot snap when the spring resolves its final distance. const MORPH_CLIP_TRANSITION = { duration: 0.32, ease: EASE_OUT } as const; export interface MorphPopoverContentProps { children: ReactNode; side?: Side; align?: Align; /** Gap between trigger and panel, in px. Default 8. */ sideOffset?: number; /** Panel corner radius, in px. Default 16. */ radius?: number; className?: string; } export function MorphPopoverContent({ children, side = "bottom", align = "end", sideOffset = 8, radius = 16, className, }: MorphPopoverContentProps) { const ctx = useMorphContext("MorphPopoverContent"); const reduce = useReducedMotion() ?? false; const [portalReady, setPortalReady] = useState(false); const layout = usePopoverPortalPosition( ctx.triggerRef, ctx.contentRef, portalReady && ctx.open, ); useEffect(() => setPortalReady(true), []); const left = layout ? align === "end" ? layout.trigger.left + layout.trigger.width - layout.content.width : layout.trigger.left : 0; const top = layout ? side === "bottom" ? layout.trigger.top + layout.trigger.height + sideOffset : layout.trigger.top - layout.content.height - sideOffset : 0; // Both directions travel between the exact same hidden/show states. Exit // targets "hidden" directly instead of introducing separate choreography. const wrap = reduce ? undefined : { hidden: { opacity: 0, scale: 0.96, transition: SPRING_PANEL }, show: { opacity: 1, scale: 1, transition: SPRING_PANEL }, }; const clip = reduce ? undefined : { hidden: { clipPath: clipHidden(side, align, radius), transition: MORPH_CLIP_TRANSITION, }, show: { clipPath: clipShown(radius), transition: MORPH_CLIP_TRANSITION, }, }; // Keep the server and first client render identical, then mount the portal. if (!portalReady) return null; return createPortal( {ctx.open ? ( ) : null} , document.body, ); } 54:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 55:T8af,"use client"; import { type MutableRefObject, useCallback, useLayoutEffect, useState, } from "react"; export type PortalLayout = { trigger: { left: number; top: number; width: number; height: number; }; content: { width: number; height: number; }; }; function sameLayout(a: PortalLayout | null, b: PortalLayout) { return ( a?.trigger.left === b.trigger.left && a.trigger.top === b.trigger.top && a.trigger.width === b.trigger.width && a.trigger.height === b.trigger.height && a.content.width === b.content.width && a.content.height === b.content.height ); } /** Measures a trigger and portalled panel in viewport coordinates. */ export function usePopoverPortalPosition< TriggerElement extends HTMLElement, ContentElement extends HTMLElement, >( triggerRef: MutableRefObject, contentRef: MutableRefObject, active: boolean, ) { const [layout, setLayout] = useState(null); const update = useCallback(() => { const trigger = triggerRef.current; const content = contentRef.current; if (!trigger || !content) return; const rect = trigger.getBoundingClientRect(); const next: PortalLayout = { trigger: { left: rect.left, top: rect.top, width: rect.width, height: rect.height, }, content: { width: content.offsetWidth, height: content.offsetHeight, }, }; setLayout((current) => (sameLayout(current, next) ? current : next)); }, [contentRef, triggerRef]); useLayoutEffect(() => { update(); if (!active) return; const trigger = triggerRef.current; const content = contentRef.current; const observer = new ResizeObserver(update); if (trigger) observer.observe(trigger); if (content) observer.observe(content); window.addEventListener("scroll", update, true); window.addEventListener("resize", update); return () => { observer.disconnect(); window.removeEventListener("scroll", update, true); window.removeEventListener("resize", update); }; }, [active, contentRef, triggerRef, update]); return layout; } 4e:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/motion/date-picker.tsx","content":"$51","type":"registry:component","target":"@components/motion/date-picker.tsx"},{"path":"components/motion/calendar.tsx","content":"$52","type":"registry:component","target":"@components/motion/calendar.tsx"},{"path":"components/motion/popover-morph.tsx","content":"$53","type":"registry:component","target":"@components/motion/popover-morph.tsx"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"lib/ease.ts","content":"$54","type":"registry:lib","target":"@lib/ease.ts"},{"path":"components/motion/popover-position.ts","content":"$55","type":"registry:component","target":"@components/motion/popover-position.ts"}],"className":"h-[70svh] min-h-80"}]]}]