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:T1485,"use client" import type * as React from "react" import { Input } from "@/components/ui/input" import { useControllableState } from "@/hooks/use-controllable-state" import { normalizePersianDigits } from "@/lib/normalize-persian-digits" import { cn } from "@/lib/utils" export interface PriceInputProps extends Omit< React.ComponentProps, "value" | "defaultValue" | "onChange" | "type" > { /** The numeric value. Use when controlled. */ value?: number | null /** The initial numeric value when uncontrolled. */ defaultValue?: number | null /** Called with the numeric value whenever it changes. */ onValueChange?: (value: number | null) => void /** The minimum allowed value, applied on blur. */ min?: number /** The maximum allowed value, applied on blur. */ max?: number /** The locale used to group digits as you type. @default "en-US" */ locale?: Intl.LocalesArgument } function clamp(value: number, min?: number, max?: number) { let next = value if (min !== undefined) next = Math.max(next, min) if (max !== undefined) next = Math.min(next, max) return next } function formatValue(value: number | null, locale: Intl.LocalesArgument) { if (value === null) return "" return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format( value ) } function countDigits(text: string) { return (text.match(/\d/g) ?? []).length } /** The index right after the Nth digit in `text` (commas/signs don't count). */ function offsetAfterDigitCount(text: string, digitCount: number) { if (digitCount <= 0) return 0 let seen = 0 for (let i = 0; i < text.length; i++) { if (/\d/.test(text.charAt(i))) { seen++ if (seen === digitCount) return i + 1 } } return text.length } /** * Deleting a thousands separator removes zero digits, so reformatting * would snap the text right back and the keystroke would visibly do * nothing. When that happens, extend the deletion to the nearest digit * in the same direction, so Delete/Backspace always removes one digit * no matter which character the caret sits next to. */ function extendDeletionToDigit( raw: string, cursor: number, direction: "forward" | "backward" ) { if (direction === "forward") { const after = raw.slice(cursor) const relativeIndex = after.search(/\d/) if (relativeIndex === -1) return raw const index = cursor + relativeIndex return raw.slice(0, index) + raw.slice(index + 1) } const before = raw.slice(0, cursor) const digitMatches = [...before.matchAll(/\d/g)] const lastDigit = digitMatches.at(-1) if (!lastDigit || lastDigit.index === undefined) return raw return raw.slice(0, lastDigit.index) + raw.slice(lastDigit.index + 1) } function PriceInput({ value, defaultValue = null, onValueChange, min, max, locale = "en-US", placeholder = "0", className, onBlur, ...props }: PriceInputProps) { const [numericValue, setNumericValue] = useControllableState({ prop: value, defaultProp: defaultValue, onChange: onValueChange, caller: "PriceInput", }) function handleChange(event: React.ChangeEvent) { const input = event.target const cursor = input.selectionStart ?? input.value.length let raw = normalizePersianDigits(input.value) const inputType = (event.nativeEvent as InputEvent).inputType const previousDigitCount = numericValue === null ? 0 : String(Math.abs(numericValue)).length let digits = raw.replace(/\D/g, "") if ( (inputType === "deleteContentForward" || inputType === "deleteContentBackward") && digits.length === previousDigitCount ) { raw = extendDeletionToDigit( raw, cursor, inputType === "deleteContentForward" ? "forward" : "backward" ) digits = raw.replace(/\D/g, "") } const digitsBeforeCursor = countDigits(raw.slice(0, cursor)) const negative = min === undefined || min < 0 ? raw.trimStart().startsWith("-") : false if (!digits) { setNumericValue(null) return } const nextValue = (negative ? -1 : 1) * Number(digits) const formatted = formatValue(nextValue, locale) // Reformatting shifts thousands separators around, which would // otherwise reset the caret to the end of the input on every // keystroke — restore it based on digit count instead of raw offset. if (formatted !== input.value) { const nextPos = offsetAfterDigitCount(formatted, digitsBeforeCursor) input.value = formatted input.setSelectionRange(nextPos, nextPos) } setNumericValue(nextValue) } function handleBlur(event: React.FocusEvent) { if (numericValue !== null) { const clamped = clamp(numericValue, min, max) if (clamped !== numericValue) setNumericValue(clamped) } onBlur?.(event) } return ( = 0 ? "numeric" : "text"} dir="ltr" value={formatValue(numericValue, locale)} onChange={handleChange} onBlur={handleBlur} placeholder={placeholder} className={cn("font-mono", className)} /> ) } export { PriceInput } 55:Ted4,// Thanks @radix-ui import * as React from "react" // use-layout-effect.tsx // https://github.com/radix-ui/primitives/blob/main/packages/react/use-layout-effect/src/use-layout-effect.tsx /** * On the server, React emits a warning when calling `useLayoutEffect`. * This is because neither `useLayoutEffect` nor `useEffect` run on the server. * We use this safe version which suppresses the warning by replacing it with a noop on the server. * * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect */ const useLayoutEffect = globalThis?.document ? React.useLayoutEffect : () => {} // use-controllable-state.tsx // https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/use-controllable-state.tsx // Prevent bundlers from trying to optimize the import const useInsertionEffect: typeof useLayoutEffect = (React as never)[" useInsertionEffect ".trim().toString()] || useLayoutEffect type ChangeHandler = (state: T) => void type SetStateFn = React.Dispatch> interface UseControllableStateParams { prop?: T | undefined defaultProp: T onChange?: ChangeHandler caller?: string } export function useControllableState({ prop, defaultProp, onChange = () => {}, caller, }: UseControllableStateParams): [T, SetStateFn] { const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({ defaultProp, onChange, }) const isControlled = prop !== undefined const value = isControlled ? prop : uncontrolledProp // OK to disable conditionally calling hooks here because they will always run // consistently in the same environment. Bundlers should be able to remove the // code block entirely in production. /* eslint-disable react-hooks/rules-of-hooks */ if (process.env.NODE_ENV !== "production") { const isControlledRef = React.useRef(prop !== undefined) React.useEffect(() => { const wasControlled = isControlledRef.current if (wasControlled !== isControlled) { const from = wasControlled ? "controlled" : "uncontrolled" const to = isControlled ? "controlled" : "uncontrolled" console.warn( `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.` ) } isControlledRef.current = isControlled }, [isControlled, caller]) } /* eslint-enable react-hooks/rules-of-hooks */ const setValue = React.useCallback>( (nextValue) => { if (isControlled) { const value = isFunction(nextValue) ? nextValue(prop) : nextValue if (value !== prop) { onChangeRef.current?.(value) } } else { setUncontrolledProp(nextValue) } }, [isControlled, prop, setUncontrolledProp, onChangeRef] ) return [value, setValue] } function useUncontrolledState({ defaultProp, onChange, }: Omit, "prop">): [ Value: T, setValue: React.Dispatch>, OnChangeRef: React.RefObject | undefined>, ] { const [value, setValue] = React.useState(defaultProp) const prevValueRef = React.useRef(value) const onChangeRef = React.useRef(onChange) useInsertionEffect(() => { onChangeRef.current = onChange }, [onChange]) React.useEffect(() => { if (prevValueRef.current !== value) { onChangeRef.current?.(value) prevValueRef.current = value } }, [value, prevValueRef]) return [value, setValue, onChangeRef] } function isFunction(value: unknown): value is (...args: never[]) => unknown { return typeof value === "function" } 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":[null,["$","$L52",null,{"namespace":"@persianlabsui","registryDependencies":["utils","@persianlabsui/input","@persianlabsui/normalize-persian-digits"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/base/ui/price-input.tsx","content":"$54","type":"registry:ui"},{"path":"registry/base/hooks/use-controllable-state.ts","content":"$55","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]