4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T271e,"use client" import * as React from "react" import { Drawer, DrawerPanel, DrawerPopup, DrawerTrigger, } from "@/components/ui/drawer" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import type { WheelPickerOption } from "@/components/ui/wheel-picker" import { WheelPicker, WheelPickerWrapper } from "@/components/ui/wheel-picker" import { useIsMobile } from "@/hooks/use-media-query" import { daysInMonth, formatDate, fromParts, toParts, toPersianDigits, type CalendarType, type DigitStyle, } from "@/lib/persian-date" import { cn } from "@/lib/utils" /** Mirrors persian-date's `DigitStyle`, kept local so this file has no digit-only dependency on it. */ export type DateWheelPickerDigits = DigitStyle const DEFAULT_MIN_YEAR: Record = { shamsi: 1300, miladi: 1921, } const DEFAULT_MAX_YEAR: Record = { shamsi: 1450, miladi: 2071, } // A fixed, non-"today" default -- reading the current date at module load or // in a bare useState initializer would embed whatever date the server // happened to build/start at, which can differ from whatever date the client // happens to hydrate at and trigger a hydration mismatch. Nowruz 1403 is an // arbitrary, static stand-in; consumers that actually want "today" as the // initial value should compute it themselves, deferred via useEffect (see // the Demo example on the doc page), not rely on this component to do it. const DEFAULT_VALUE = fromParts({ year: 1403, month: 1, day: 1 }, "shamsi") function label(value: number, digits: DateWheelPickerDigits): string { const text = String(value) return digits === "fa" ? toPersianDigits(text) : text } export interface DateWheelPickerProps { /** Current value in controlled mode. */ value?: Date /** Initial value in uncontrolled mode. @default 1403/01/01 (Nowruz) */ defaultValue?: Date onValueChange?: (date: Date) => void /** @default "shamsi" */ calendarType?: CalendarType /** Wheel label digit style. @default "fa" */ digits?: DateWheelPickerDigits /** Lower bound of the year wheel, in `calendarType`'s years. @default 1300 (shamsi) / 1921 (miladi) */ minYear?: number /** Upper bound of the year wheel, in `calendarType`'s years. @default 1450 (shamsi) / 2071 (miladi) */ maxYear?: number /** * Interval between year wheel options, e.g. 5 for a decade-jump picker. * When greater than 1, `value`/`defaultValue`'s year must land on the * stepped sequence (`minYear + n * yearStep`) to be selectable. * @default 1 */ yearStep?: number /** * Whether the wheels loop past their ends (December back to January, the * last day of the month back to the 1st, the last year back to the * first). @default false */ loop?: boolean className?: string } function DateWheelPicker({ value: valueProp, defaultValue = DEFAULT_VALUE, onValueChange, calendarType = "shamsi", digits = "fa", minYear, maxYear, yearStep = 1, loop = false, className, }: DateWheelPickerProps) { const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue) const isControlled = valueProp !== undefined const value = isControlled ? valueProp : uncontrolledValue const setValue = React.useCallback( (next: Date) => { if (!isControlled) setUncontrolledValue(next) onValueChange?.(next) }, [isControlled, onValueChange] ) const resolvedMinYear = minYear ?? DEFAULT_MIN_YEAR[calendarType] const resolvedMaxYear = maxYear ?? DEFAULT_MAX_YEAR[calendarType] const parts = toParts(value, calendarType) const yearOptions = React.useMemo[]>(() => { const years: WheelPickerOption[] = [] for ( let year = resolvedMinYear; year <= resolvedMaxYear; year += yearStep ) { years.push({ label: label(year, digits), value: year }) } return years }, [resolvedMinYear, resolvedMaxYear, yearStep, digits]) const monthOptions = React.useMemo[]>(() => { return Array.from({ length: 12 }, (_, index) => { const month = index + 1 const sample = fromParts( { year: parts.year, month, day: 1 }, calendarType ) return { label: formatDate(sample, "MMMM", { calendarType, digits }), value: month, } }) }, [parts.year, calendarType, digits]) const dayCount = daysInMonth( fromParts({ year: parts.year, month: parts.month, day: 1 }, calendarType), calendarType ) const dayOptions = React.useMemo[]>( () => Array.from({ length: dayCount }, (_, index) => { const day = index + 1 return { label: label(day, digits), value: day } }), [dayCount, digits] ) const day = Math.min(parts.day, dayCount) function handleYearChange(nextYear: number) { const nextDayCount = daysInMonth( fromParts({ year: nextYear, month: parts.month, day: 1 }, calendarType), calendarType ) setValue( fromParts( { year: nextYear, month: parts.month, day: Math.min(day, nextDayCount), }, calendarType ) ) } function handleMonthChange(nextMonth: number) { const nextDayCount = daysInMonth( fromParts({ year: parts.year, month: nextMonth, day: 1 }, calendarType), calendarType ) setValue( fromParts( { year: parts.year, month: nextMonth, day: Math.min(day, nextDayCount), }, calendarType ) ) } function handleDayChange(nextDay: number) { setValue( fromParts( { year: parts.year, month: parts.month, day: nextDay }, calendarType ) ) } return ( ) } /** * A responsive wrapper around DateWheelPicker: a Popover trigger + content on * desktop, a Drawer trigger + panel on mobile. Follows the same * root/trigger/content composition as ResponsiveTimePicker, ResponsiveDialog, * and ResponsiveMenu. * * Note: Base UI's `render` prop only picks up children placed *inside* the * render target, not children passed to the wrapping trigger -- * `}>{icon}` * silently renders an empty button. Put trigger content on the target * element itself instead: `{icon}} />`. */ type ResponsiveDateWheelPickerContextValue = { isDesktop: boolean } const ResponsiveDateWheelPickerContext = React.createContext(null) function useResponsiveDateWheelPickerContext() { const context = React.useContext(ResponsiveDateWheelPickerContext) if (!context) { throw new Error( "ResponsiveDateWheelPicker components must be used within " ) } return context } type ResponsiveDateWheelPickerProps = { children: React.ReactNode open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void } function ResponsiveDateWheelPicker({ children, open, defaultOpen, onOpenChange, }: ResponsiveDateWheelPickerProps) { const isDesktop = !useIsMobile() const contextValue = React.useMemo(() => ({ isDesktop }), [isDesktop]) return ( {isDesktop ? ( {children} ) : ( {children} )} ) } function ResponsiveDateWheelPickerTrigger( props: React.ComponentProps ) { const { isDesktop } = useResponsiveDateWheelPickerContext() return isDesktop ? ( ) : ( )} /> ) } type ResponsiveDateWheelPickerContentProps = DateWheelPickerProps & { align?: React.ComponentProps["align"] side?: React.ComponentProps["side"] sideOffset?: number } function ResponsiveDateWheelPickerContent({ align = "center", side = "bottom", sideOffset = 6, className, ...dateWheelPickerProps }: ResponsiveDateWheelPickerContentProps) { const { isDesktop } = useResponsiveDateWheelPickerContext() if (isDesktop) { return ( ) } return ( ) } export { DateWheelPicker, ResponsiveDateWheelPicker, ResponsiveDateWheelPickerContent, ResponsiveDateWheelPickerTrigger, } 53:Ta88,"use client" import { useCallback, useSyncExternalStore } from "react" const BREAKPOINTS = { "2xl": 1536, "3xl": 1600, "4xl": 2000, lg: 1024, md: 800, sm: 640, xl: 1280, } as const type Breakpoint = keyof typeof BREAKPOINTS type BreakpointQuery = Breakpoint | `max-${Breakpoint}` | `${Breakpoint}:max-${Breakpoint}` function resolveMin(value: Breakpoint | number): string { const px = typeof value === "number" ? value : BREAKPOINTS[value] return `(min-width: ${px}px)` } function resolveMax(value: Breakpoint | number): string { const px = typeof value === "number" ? value : BREAKPOINTS[value] return `(max-width: ${px - 1}px)` } function parseQuery( query: BreakpointQuery | MediaQueryInput | (string & {}) ): string { if (typeof query !== "string") { const parts: string[] = [] if (query.min != null) parts.push(resolveMin(query.min)) if (query.max != null) parts.push(resolveMax(query.max)) if (query.pointer === "coarse") parts.push("(pointer: coarse)") if (query.pointer === "fine") parts.push("(pointer: fine)") if (parts.length === 0) return "(min-width: 0px)" return parts.join(" and ") } if (query.startsWith("(")) return query const parts: string[] = [] for (const segment of query.split(":")) { if (segment.startsWith("max-")) { const bp = segment.slice(4) if (bp in BREAKPOINTS) parts.push(resolveMax(bp as Breakpoint)) } else if (segment in BREAKPOINTS) { parts.push(resolveMin(segment as Breakpoint)) } } return parts.length > 0 ? parts.join(" and ") : query } function getServerSnapshot(): boolean { return false } export type MediaQueryInput = { min?: Breakpoint | number max?: Breakpoint | number /** Touch-like input (finger). Use "fine" for mouse/trackpad. */ pointer?: "coarse" | "fine" } /** Tracks a CSS media query with Tailwind-like breakpoint syntax. Returns `false` during SSR. */ export function useMediaQuery( query: BreakpointQuery | MediaQueryInput | (string & {}) ): boolean { const mediaQuery = parseQuery(query) const subscribe = useCallback( (callback: () => void) => { if (typeof window === "undefined") return () => {} const mql = window.matchMedia(mediaQuery) mql.addEventListener("change", callback) return () => mql.removeEventListener("change", callback) }, [mediaQuery] ) const getSnapshot = useCallback(() => { if (typeof window === "undefined") return false return window.matchMedia(mediaQuery).matches }, [mediaQuery]) return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) } export function useIsMobile(): boolean { return useMediaQuery("max-md") } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@ncdai/react-wheel-picker",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ncdai%2Freact-wheel-picker","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"@ncdai/react-wheel-picker"}]]}]}],["$","li","@base-ui/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"@base-ui/react"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["utils","https://ui.persian-labs.ir/r/wheel-picker.json","https://ui.persian-labs.ir/r/popover.json","https://ui.persian-labs.ir/r/drawer.json","https://ui.persian-labs.ir/r/persian-date.json"]}]]}],["$","$L50",null,{"sourceUrl":"https://ui.persian-labs.ir/r/date-wheel-picker.json","proxyUrl":"https://shadcnregistry.com/r/persianlabsui/date-wheel-picker","itemId":"@persianlabsui/date-wheel-picker"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/base/ui/date-wheel-picker.tsx","content":"$52","type":"registry:ui"},{"path":"registry/base/hooks/use-media-query.ts","content":"$53","type":"registry:hook"}]}]]}],"$L54"]}]

Date Wheel Picker

Installation

Files

components

hooks

Styles