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:T18fe,"use client" import * as React from "react" import * as BankIcons from "@persianlabs/icons/react" import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, } from "@/components/ui/input-group" import { useControllableState } from "@/hooks/use-controllable-state" import { formatCardNumber, formatShaba, getIranianBankByCardNumber, getIranianBankByShaba, normalizeCardNumber, normalizeShaba, type IranianBank, type IranianBankId, } from "@/lib/iranian-bank" import { cn } from "@/lib/utils" export type BankLogoVariant = "color" | "mono" | false type BaseBankInputProps = Omit< React.ComponentProps, "value" | "defaultValue" | "onChange" | "type" | "dir" > & { /** Renders a color or monochrome logo once a bank is detected. @default "color" */ bankLogo?: BankLogoVariant /** Receives the detected bank as soon as enough digits are entered. */ onBankChange?: (bank: IranianBank | undefined) => void /** The separator inserted after each four-digit group. */ separator?: string } export interface CardNumberInputProps extends BaseBankInputProps { value?: string defaultValue?: string onValueChange?: (value: string) => void } export interface ShabaInputProps extends BaseBankInputProps { /** The account portion only, without the visible IR prefix. */ value?: string defaultValue?: string onValueChange?: (value: string) => void } const iconNames: Record = { blubank: "BankBlubank", dey: "BankDey", eghtesad_novin: "BankEghtesadNovin", gardeshgari: "BankGardeshgari", ghavvamin: "BankGhavamin", hekmat: "BankHekmat", iranzamin: "BankIranZamin", kar_afarin: "BankKarafarin", keshavarzi: "BankKeshavarzi", khavarmianeh: "BankKhavarMianeh", maskan: "BankMaskan", mehr_e_iranian: "BankMehrIran", meli: "BankMelall", mellat: "BankMellat", melli: "BankMelli", parsian: "BankParsian", pasargad: "BankPasargad", post_bank: "BankPostbank", refah: "BankRefah", resalat: "BankResalat", saderat: "BankSaderat", saman: "BankSaman", sarmayeh: "BankSarmayeh", sepah: "BankSepah", shahr: "BankShahr", sina: "BankSina", tejarat: "BankTejarat", tosee_saderat: "BankToseeSaderat", tosee_taavon: "BankToseeTaavon", } function offsetAfterDigits(value: string, digitCount: number) { if (digitCount <= 0) return 0 let seen = 0 for (let index = 0; index < value.length; index++) { if (/\d/.test(value[index]!)) seen++ if (seen === digitCount) return index + 1 } return value.length } function restoreCaret( input: HTMLInputElement, formatted: string, digitsBeforeCaret: number ) { requestAnimationFrame(() => { const offset = offsetAfterDigits(formatted, digitsBeforeCaret) input.setSelectionRange(offset, offset) }) } function BankIdentity({ bank, logo, }: { bank: IranianBank | undefined logo: BankLogoVariant }) { if (!bank) return null const Logo = BankIcons[ `${iconNames[bank.id]}${logo === "mono" ? "Mono" : "Color"}` as keyof typeof BankIcons ] as React.ComponentType> return ( ) } function CardNumberInput({ value, defaultValue = "", onValueChange, bankLogo = "color", onBankChange, separator = " ", className, ...props }: CardNumberInputProps) { const [number, setNumber] = useControllableState({ prop: value, defaultProp: defaultValue, onChange: onValueChange, caller: "CardNumberInput", }) const normalized = normalizeCardNumber(number) const bank = getIranianBankByCardNumber(normalized) function handleChange(event: React.ChangeEvent) { const digitsBeforeCaret = normalizeCardNumber( event.target.value.slice(0, event.target.selectionStart ?? 0) ).length const next = normalizeCardNumber(event.target.value) setNumber(next) onBankChange?.(getIranianBankByCardNumber(next)) restoreCaret( event.target, formatCardNumber(next, separator), digitsBeforeCaret ) } return ( {bankLogo && } ) } function ShabaInput({ value, defaultValue = "", onValueChange, bankLogo = "color", onBankChange, separator = " ", className, ...props }: ShabaInputProps) { const [account, setAccount] = useControllableState({ prop: value, defaultProp: defaultValue, onChange: onValueChange, caller: "ShabaInput", }) const normalized = normalizeShaba(account) const bank = getIranianBankByShaba(normalized) function handleChange(event: React.ChangeEvent) { const digitsBeforeCaret = normalizeShaba( event.target.value.slice(0, event.target.selectionStart ?? 0) ).length const next = normalizeShaba(event.target.value) setAccount(next) onBankChange?.(getIranianBankByShaba(next)) restoreCaret(event.target, formatShaba(next, separator), digitsBeforeCaret) } return ( IR {bankLogo && } ) } export { CardNumberInput, ShabaInput } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@persianlabs/icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40persianlabs%2Ficons","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":"@persianlabs/icons"}]]}]}]]}],["$","$L52",null,{"namespace":"@persianlabsui","registryDependencies":["utils","@persianlabsui/input-group","@persianlabsui/iranian-bank"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/base/ui/bank-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"}]]}]