55: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"] 56:T3c19,"use client" import * as React from "react" import { Button as ButtonPrimitive } from "@base-ui/react/button" import { mergeProps } from "@base-ui/react/merge-props" import { Meter as MeterPrimitive } from "@base-ui/react/meter" import { Radio as RadioPrimitive } from "@base-ui/react/radio" import { RadioGroup } from "@base-ui/react/radio-group" import { Separator as SeparatorPrimitive } from "@base-ui/react/separator" import { useRender } from "@base-ui/react/use-render" import { cn } from "cn" import { Amount } from "@/components/ui/amount" import { isDigitPart, useAmountParts, type AmountFormat } from "@/lib/format-amount" import { PaymentCard, type PaymentCardProps, type PaymentCardTone } from "@/components/ui/payment-card" type WalletVariant = "saddle" | "noir" | "oxblood" type WalletStatus = "default" | "low" | "empty" | "insufficient" type WalletProps = useRender.ComponentProps<"div"> & { /** Leather finish. */ variant?: WalletVariant /** Drives the status light, meter fill and any `group-data-[status=*]/wallet` styling. */ status?: WalletStatus } function cssVars(vars: Record<`--${string}`, string | number>) { return vars as React.CSSProperties } const WalletContext = React.createContext<{ status: WalletStatus }>({ status: "default" }) function Wallet({ className, render, variant = "saddle", status = "default", ...props }: WalletProps) { const context = React.useMemo(() => ({ status }), [status]) const element = useRender({ defaultTagName: "div", render, props: mergeProps<"div">( { "data-slot": "wallet", "data-variant": variant, "data-status": status, className: cn( "group/wallet bevel-leather bevel-object relative isolate flex w-full max-w-sm flex-col rounded-(--bevel-radius-lg) text-left text-(--wallet-foreground) outline-none", "focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background", // Stitching follows the outline: inner radius = outer radius - inset. "before:bevel-stitch before:pointer-events-none before:absolute before:inset-(--bevel-stitch-inset) before:rounded-[calc(var(--bevel-radius-lg)-var(--bevel-stitch-inset))]", "forced-colors:border forced-colors:border-[CanvasText]", className ), } as React.ComponentProps<"div">, props ), }) return {element} } type WalletCardsContextValue = { selectable: boolean /** True once the stack has mounted; read by each card on its first render only. */ mountedRef: React.RefObject } const WalletCardsContext = React.createContext({ selectable: false, mountedRef: { current: false }, }) const WalletCardPositionContext = React.createContext({ index: 0, count: 1 }) type WalletCardsProps = Omit, "render" | "style"> & { style?: React.CSSProperties /** Cards the slot shows spread out. More than this bunch together; the slot never grows. */ slots?: number } /** * The cards tucked in the wallet, back to front. Passing `value`, * `defaultValue` or `onValueChange` makes them a radio group: the chosen * card is pulled up out of the pocket. */ function WalletCards({ className, style, children, value, defaultValue, onValueChange, slots = 3, ...props }: WalletCardsProps) { const selectable = value !== undefined || defaultValue !== undefined || onValueChange !== undefined const items = React.Children.toArray(children) // Cards present on first render are already in the wallet; only cards // added afterwards slide in. const mountedRef = React.useRef(false) React.useEffect(() => { mountedRef.current = true }, []) const context = React.useMemo(() => ({ selectable, mountedRef }), [selectable]) const shared = { "data-slot": "wallet-cards", "data-selectable": selectable ? "" : undefined, // Crowded: cards behind the front one show only their edges, so their print hides. "data-crowded": !selectable && items.length > slots ? "" : undefined, // Height and card spacing live in wallet.css; the slot never animates its size. className: cn("relative mx-5 mt-4 shrink-0", !selectable && "pointer-events-none", className), style: { ...cssVars({ "--wallet-card-count": items.length, "--wallet-card-slots": slots }), ...style }, children: items.map((child, index) => ( {child} )), } return ( {selectable ? ( ) : (

)} {...shared} /> )} ) } // Resting tilt for each card behind the front one; the front card sits square. const cardTilts = [-1.25, 0.75, -0.5, 1, -0.75] const cardTones: PaymentCardTone[] = ["sapphire", "gold", "graphite"] type WalletCardProps = Omit & { /** Selection value when the cards are a radio group. Defaults to the card's position. */ value?: string disabled?: boolean } /** A PaymentCard placed in the wallet's stack. */ function WalletCard({ className, style, value, disabled, tone, children, ...props }: WalletCardProps) { const { selectable, mountedRef } = React.useContext(WalletCardsContext) const { index, count } = React.useContext(WalletCardPositionContext) const [enters] = React.useState(() => mountedRef.current) const fromFront = count - 1 - index return ( ) : undefined } aria-hidden={selectable || children ? undefined : true} data-wallet-card="" data-enter={enters ? "" : undefined} className={cn( // Only the top strip shows above the pocket, so the card is shorter than a real one. "absolute inset-x-0 top-0 aspect-auto h-32", "[translate:0_calc(var(--wallet-card-index)*var(--wallet-card-gap)+var(--wallet-card-lift))] rotate-(--wallet-card-tilt)", "transition-[translate,rotate,opacity,filter] duration-(--bevel-duration-move) ease-(--bevel-ease-out) motion-reduce:transition-none", "group-hover/wallet:not-data-checked:[--wallet-card-lift:calc(var(--bevel-lift)*-1)] group-hover/wallet:not-data-checked:delay-[calc(var(--wallet-card-index)*var(--bevel-stagger))]", // Pulled out with a spring; it straightens as it comes up. "data-checked:rotate-0 data-checked:ease-(--bevel-ease-spring) data-checked:[--wallet-card-lift:calc(var(--wallet-card-pull)*-1)]", "data-enter:starting:opacity-0 data-enter:starting:[--wallet-card-lift:calc(var(--wallet-card-enter)*-1)]", "[&[role=radio]]:cursor-pointer [&[role=radio]]:not-data-checked:brightness-(--bevel-dim)", // In a crowded slot only the front card's print shows; the rest stay readable to screen readers. "in-data-crowded:not-last:*:opacity-0", className )} style={{ ...cssVars({ "--wallet-card-index": index, "--wallet-card-tilt": `${fromFront === 0 ? 0 : cardTilts[(fromFront - 1) % cardTilts.length]}deg`, }), ...style, }} {...props} > {children} ) } function WalletPocket({ className, children, ...props }: React.ComponentProps<"div">) { return (

{/* The pocket's top is a fold, so it is stitched on three sides only. */} {children}

) } function WalletHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function WalletLabel({ className, ...props }: React.ComponentProps<"p">) { return (

) } const statusText: Record = { default: "Active", low: "Low balance", empty: "Empty", insufficient: "Insufficient", } /** Status light. Reads the wallet's `status`; pass children to override the text. */ function WalletStatusLight({ className, children, ...props }: React.ComponentProps<"span">) { const { status } = React.useContext(WalletContext) return ( {children ?? statusText[status]} ) } const isMinor = (type: Intl.NumberFormatPartTypes) => type === "currency" || type === "decimal" || type === "fraction" || type === "literal" const isMuted = (type: Intl.NumberFormatPartTypes) => type === "currency" || type === "decimal" || type === "fraction" function WalletBalance({ value, currency, locale, format, className, ...props }: AmountFormat & Omit, "children">) { const parts = useAmountParts({ value, currency, locale, format }) return (

{parts.map((part, i) => ( {part.value} ))}

) } /** Inline amount for detail rows; same formatting as the balance. */ function WalletAmount(props: React.ComponentProps) { return } function WalletDetails({ className, ...props }: React.ComponentProps<"dl">) { return (

) } function WalletDetailValue({ className, ...props }: React.ComponentProps<"dd">) { return: } function WalletSeparator({ className, ...props }: SeparatorPrimitive.Props) { return ( ) } function WalletMeter({ className, children, ...props }: MeterPrimitive.Root.Props) { return ( {children} ) } function WalletMeterLabel({ className, ...props }: MeterPrimitive.Label.Props) { return ( ) } function WalletMeterValue({ className, ...props }: MeterPrimitive.Value.Props) { return ( ) } function WalletFooter({ className, ...props }: React.ComponentProps<"div">) { return (
) } function WalletAction({ className, ...props }: ButtonPrimitive.Props) { return ( ) } export { Wallet, WalletCards, WalletCard, WalletPocket, WalletHeader, WalletLabel, WalletStatusLight as WalletStatus, WalletBalance, WalletAmount, WalletDetails, WalletDetail, WalletDetailLabel, WalletDetailValue, WalletSeparator, WalletMeter, WalletMeterLabel, WalletMeterValue, WalletFooter, WalletAction, } export type { WalletProps, WalletCardsProps, WalletCardProps, WalletVariant, WalletStatus as WalletStatusValue, } 54:["$","$L55",null,{"files":[{"path":"registry/bevel/ui/wallet.tsx","content":"$56","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]