52: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"] 53: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"] 54:T2add,"use client" import { CheckIcon } from "lucide-react" import * as React from "react" import { Button } from "@/components/ui/button" import { Drawer, DrawerFooter, DrawerPanel, DrawerPopup, DrawerTitle, 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 { toPersianDigits, type DigitStyle } from "@/lib/persian-date" import { cn } from "@/lib/utils" /** Time-of-day value. Plain fields, not a `Date` -- a clock has no calendar date. */ export interface TimePickerValue { hour: number minute: number second?: number } /** Mirrors persian-date's `DigitStyle`, kept local so this file has no digit-only dependency on it. */ export type TimePickerDigits = DigitStyle export type TimePickerHourFormat = "24" | "12" const DEFAULT_VALUE: TimePickerValue = { hour: 0, minute: 0 } function clamp(value: number, min: number, max: number): number { return Math.min(max, Math.max(min, value)) } function pad(value: number): string { return value.toString().padStart(2, "0") } function label(value: number, digits: TimePickerDigits): string { const text = pad(value) return digits === "fa" ? toPersianDigits(text) : text } function to12Hour(hour: number): { hour12: number; period: "AM" | "PM" } { const period: "AM" | "PM" = hour >= 12 ? "PM" : "AM" const hour12 = hour % 12 === 0 ? 12 : hour % 12 return { hour12, period } } function from12Hour(hour12: number, period: "AM" | "PM"): number { const base = hour12 % 12 return period === "PM" ? base + 12 : base } function periodOptions( digits: TimePickerDigits ): WheelPickerOption<"AM" | "PM">[] { return digits === "fa" ? [ { label: "ق.ظ", value: "AM" }, { label: "ب.ظ", value: "PM" }, ] : [ { label: "AM", value: "AM" }, { label: "PM", value: "PM" }, ] } /** Formats a `TimePickerValue` for display, e.g. "09:30" or "09:30 ب.ظ". */ export function formatTimePickerValue( value: TimePickerValue, options: { hourFormat?: TimePickerHourFormat showSeconds?: boolean digits?: TimePickerDigits } = {} ): string { const hourFormat = options.hourFormat ?? "24" const showSeconds = options.showSeconds ?? false const digits = options.digits ?? "fa" const second = value.second ?? 0 const parts: string[] = [] if (hourFormat === "12") { const { hour12, period } = to12Hour(value.hour) parts.push(label(hour12, digits)) parts.push(label(value.minute, digits)) if (showSeconds) parts.push(label(second, digits)) const periodLabel = periodOptions(digits).find( (o) => o.value === period )?.label return `${parts.join(":")} ${periodLabel}` } parts.push(label(value.hour, digits)) parts.push(label(value.minute, digits)) if (showSeconds) parts.push(label(second, digits)) return parts.join(":") } export interface TimePickerProps { /** Current value in controlled mode. */ value?: TimePickerValue /** Initial value in uncontrolled mode. @default { hour: 0, minute: 0 } */ defaultValue?: TimePickerValue onValueChange?: (value: TimePickerValue) => void /** Adds a seconds wheel. @default false */ showSeconds?: boolean /** Shows h, m, and s labels above their wheel columns. @default false */ showLabels?: boolean /** 24-hour or 12-hour (with an AM/PM wheel) display. @default "24" */ hourFormat?: TimePickerHourFormat /** Wheel label digit style. @default "fa" */ digits?: TimePickerDigits className?: string } function TimePicker({ value: valueProp, defaultValue = DEFAULT_VALUE, onValueChange, showSeconds = false, showLabels = false, hourFormat = "24", digits = "fa", className, }: TimePickerProps) { const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue) const isControlled = valueProp !== undefined const value = isControlled ? valueProp : uncontrolledValue const setValue = React.useCallback( (next: TimePickerValue) => { if (!isControlled) setUncontrolledValue(next) onValueChange?.(next) }, [isControlled, onValueChange] ) const hourOptions = React.useMemo[]>(() => { if (hourFormat === "12") { return Array.from({ length: 12 }, (_, index) => { const hour12 = index + 1 return { label: label(hour12, digits), value: hour12 } }) } return Array.from({ length: 24 }, (_, hour) => ({ label: label(hour, digits), value: hour, })) }, [hourFormat, digits]) const minuteOptions = React.useMemo[]>( () => Array.from({ length: 60 }, (_, minute) => ({ label: label(minute, digits), value: minute, })), [digits] ) const secondOptions = minuteOptions const { hour12, period } = to12Hour(value.hour) const second = clamp(value.second ?? 0, 0, 59) return (

{showLabels && ( )} { const hour = hourFormat === "12" ? from12Hour(nextHour, period) : nextHour setValue({ ...value, hour }) }} infinite /> setValue({ ...value, minute })} infinite /> {showSeconds && ( setValue({ ...value, second: nextSecond }) } infinite /> )} {hourFormat === "12" && ( setValue({ ...value, hour: from12Hour(hour12, nextPeriod) }) } /> )}

) } /** * A responsive wrapper around TimePicker: a Popover trigger + content on * desktop, a Drawer trigger + panel on mobile. Follows the same * root/trigger/content composition as 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 ResponsiveTimePickerContextValue = { isDesktop: boolean } const ResponsiveTimePickerContext = React.createContext(null) function useResponsiveTimePickerContext() { const context = React.useContext(ResponsiveTimePickerContext) if (!context) { throw new Error( "ResponsiveTimePicker components must be used within " ) } return context } type ResponsiveTimePickerProps = { children: React.ReactNode open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void } function ResponsiveTimePicker({ children, open, defaultOpen, onOpenChange, }: ResponsiveTimePickerProps) { const isDesktop = !useIsMobile() const contextValue = React.useMemo(() => ({ isDesktop }), [isDesktop]) return ( {isDesktop ? ( {children} ) : ( {children} )} ) } function ResponsiveTimePickerTrigger( props: React.ComponentProps ) { const { isDesktop } = useResponsiveTimePickerContext() return isDesktop ? ( ) : ( )} /> ) } type ResponsiveTimePickerContentProps = TimePickerProps & { align?: React.ComponentProps["align"] side?: React.ComponentProps["side"] sideOffset?: number drawerTitle?: React.ReactNode drawerConfirmLabel?: React.ReactNode onDrawerConfirm?: () => void } function ResponsiveTimePickerContent({ align = "center", side = "bottom", sideOffset = 6, drawerTitle = "انتخاب زمان", drawerConfirmLabel, onDrawerConfirm, className, ...timePickerProps }: ResponsiveTimePickerContentProps) { const { isDesktop } = useResponsiveTimePickerContext() if (isDesktop) { return ( {onDrawerConfirm && (

)} ) } return ( {drawerTitle} {drawerConfirmLabel && ( )} ) } export { ResponsiveTimePicker, ResponsiveTimePickerContent, ResponsiveTimePickerTrigger, TimePicker, } 55:Tad9,"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)` } /** * @internal exported for unit tests; not part of the public API. */ export 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") } 51:["$","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","@ncdai/react-wheel-picker",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ncdai%2Freact-wheel-picker","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":"@ncdai/react-wheel-picker"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@persianlabsui","registryDependencies":["utils","@persianlabsui/button","@persianlabsui/wheel-picker","@persianlabsui/popover","@persianlabsui/drawer","@persianlabsui/persian-date"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/base/ui/time-picker.tsx","content":"$54","type":"registry:ui"},{"path":"registry/base/hooks/use-media-query.ts","content":"$55","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]