2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T173a,"use client"; import { cva, type VariantProps } from "class-variance-authority"; import * as React from "react"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { cn } from "@/lib/utils"; import { PressableFeedback } from "../../feedback/pressable-feedback/pressable-feedback"; import { hiddenControl, optionCard, optionCornerIndicator, optionIcon } from "../checkbox-button-group/option-card"; const group = cva("w-full gap-3", { variants: { layout: { stack: "grid", grid: "grid grid-cols-[repeat(auto-fill,minmax(min(100%,var(--option-min,15rem)),1fr))]", }, }, defaultVariants: { layout: "stack" }, }); type GroupContextValue = { value: string | null; disabled: boolean; variant: "outline" | "secondary"; ripple: boolean; }; const GroupContext = React.createContext(null); export type RadioButtonGroupProps = VariantProps & { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; disabled?: boolean; required?: boolean; name?: string; /** Card surface: hairline outline, or a quiet filled panel. */ variant?: "outline" | "secondary"; /** Add a pointer-origin ripple (from pressable-feedback) to every card. */ ripple?: boolean; "aria-label"?: string; "aria-labelledby"?: string; className?: string; children?: React.ReactNode; }; /** A group of card-style radios. Built on Kobra RadioGroup, so the selection dot travels between cards. */ export function RadioButtonGroup({ value, defaultValue, onValueChange, disabled = false, required, name, variant = "outline", ripple = false, layout, className, children, ...aria }: RadioButtonGroupProps) { const [inner, setInner] = React.useState(defaultValue ?? null); const current = value ?? inner; const ctx = React.useMemo(() => ({ value: current, disabled, variant, ripple }), [current, disabled, variant, ripple]); return ( { const v = String(next); setInner(v); onValueChange?.(v); }} className={cn(group({ layout }), className)} {...aria} > {children} ); } export type RadioButtonState = { checked: boolean; disabled: boolean }; export type RadioButtonProps = { value: string; disabled?: boolean; /** Where the radio sits, `none` hides it (the card itself shows the state), or pass a node to use as a corner indicator. */ indicator?: "start" | "end" | "none" | React.ReactNode; /** `vertical` stacks and centers the content: icon cards. */ orientation?: "horizontal" | "vertical"; /** Override the group's ripple setting for this card. */ ripple?: boolean; /** Content, or a function of the card's state. */ children?: React.ReactNode | ((state: RadioButtonState) => React.ReactNode); className?: string; }; /** One card. The label wraps everything, so a tap anywhere selects it. */ export function RadioButton({ value, disabled: itemDisabled = false, indicator = "start", orientation = "horizontal", ripple, children, className, }: RadioButtonProps) { const ctx = React.useContext(GroupContext); if (!ctx) throw new Error("RadioButton must be rendered inside "); const disabled = ctx.disabled || itemDisabled; const checked = ctx.value === value; const custom = indicator !== "start" && indicator !== "end" && indicator !== "none"; const showDot = indicator === "start" || indicator === "end"; const card = ( {custom ? ( {indicator as React.ReactNode} ) : null} {typeof children === "function" ? children({ checked, disabled }) : children} ); return (ripple ?? ctx.ripple) && !disabled ? ( {card} ) : ( card ); } export function RadioButtonIcon({ className, ...props }: React.ComponentProps<"span">) { return ; } export function RadioButtonContent({ className, ...props }: React.ComponentProps<"span">) { return ; } export function RadioButtonTitle({ className, ...props }: React.ComponentProps<"span">) { return ; } export function RadioButtonDescription({ className, ...props }: React.ComponentProps<"span">) { return ; } /** Trailing text such as a price. */ export function RadioButtonAddon({ className, ...props }: React.ComponentProps<"span">) { return ; } export default RadioButtonGroup; 32:T897,import { cva } from "class-variance-authority"; /** Card chrome shared by checkbox-button-group and radio-button-group. The whole card is the label. */ export const optionCard = cva( "group/option group/field-label relative flex w-full cursor-pointer gap-3 rounded-xl border p-4 text-start text-sm outline-none select-none transition-[background-color,border-color,box-shadow,scale] duration-150 ease-(--ease-out) has-focus-visible:ring-3 has-focus-visible:ring-ring/50 has-data-checked:border-primary has-data-checked:bg-primary/5 has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50 active:scale-[0.99] has-data-disabled:active:scale-100 motion-reduce:transition-none motion-reduce:active:scale-100 [@media(hover:hover)]:hover:not-has-data-checked:not-has-data-disabled:bg-muted/50", { variants: { variant: { outline: "border-input bg-transparent dark:bg-input/30", secondary: "border-transparent bg-muted dark:bg-muted/60", }, orientation: { horizontal: "items-start", vertical: "flex-col items-center justify-center text-center", }, }, defaultVariants: { variant: "outline", orientation: "horizontal" }, }, ); /** Hides the real control visually while keeping it focusable and in the form. */ export const hiddenControl = "pointer-events-none absolute size-px overflow-hidden opacity-0 after:hidden"; export const optionIcon = "grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-foreground transition-[background-color,color] duration-150 ease-(--ease-out) group-has-data-checked/option:bg-primary group-has-data-checked/option:text-primary-foreground motion-reduce:transition-none [&_svg:not([class*='size-'])]:size-5"; export const optionCornerIndicator = "pointer-events-none absolute -end-2 -top-2 grid size-5 ring-2 ring-background scale-90 place-items-center rounded-full bg-primary text-primary-foreground opacity-0 transition-[opacity,scale] duration-150 ease-(--ease-out) group-has-data-checked/option:scale-100 group-has-data-checked/option:opacity-100 motion-reduce:transition-none motion-reduce:group-has-data-checked/option:scale-100 [&_svg:not([class*='size-'])]:size-3"; 33:T3b6d,"use client"; import { cva, type VariantProps } from "class-variance-authority"; import { useReducedMotion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; /* ------------------------------------------------------------------------------------------------ * PressableFeedback * * A wrapper that answers a press with layers drawn over whatever it wraps (a Button, a Card, any * element): a ripple that grows from the pointer, a highlight, and a sweep that fills while the press * is held. The wrapped element keeps its own click handling; the wrapper only listens. * * Everything that moves is a transform or opacity animation, so it stays on the compositor. * Reduced motion keeps the state change (the layer still appears, the sweep still fills) and drops the travel * (the ripple fades in at full size instead of growing). * ---------------------------------------------------------------------------------------------- */ const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)"; const EASE_EXIT = "cubic-bezier(0.4, 0, 0.6, 1)"; type RippleState = { id: number; x: number; y: number; size: number; released: boolean }; type PressableFeedbackContextValue = { disabled: boolean; ripples: RippleState[]; dropRipple: (id: number) => void; registerSweep: (animation: Animation | null) => void; holdDuration: number | undefined; }; const PressableFeedbackContext = React.createContext(null); function useFeedback(part: string) { const ctx = React.useContext(PressableFeedbackContext); if (!ctx) throw new Error(`${part} must be rendered inside `); return ctx; } const root = cva("group/pf relative isolate touch-manipulation select-none [-webkit-touch-callout:none] data-disabled:pointer-events-none", { variants: { tone: { /** Light surfaces (cards, outline and secondary buttons): layers drawn in `--foreground`. */ foreground: "[--pf-color:var(--foreground)] [--pf-blend:normal] [--pf-sweep:20%]", /** The default (primary) button: a screen blend lightens the dark surface and leaves the label white. */ primary: "[--pf-color:var(--primary-foreground)] [--pf-blend:screen] [--pf-sweep:24%] dark:[--pf-blend:multiply] dark:[--pf-sweep:22%]", /** Destructive buttons: an overlay blend of a darkened `--destructive` deepens the red and leaves the label white. */ destructive: "[--pf-color:color-mix(in_oklab,var(--destructive),black_70%)] [--pf-blend:overlay] [--pf-sweep:80%]", }, }, defaultVariants: { tone: "foreground" }, }); export type PressableFeedbackProps = VariantProps & { /** Element the root renders as. Defaults to a `div`. */ render?: React.ReactElement>; /** Stops all feedback and the hold timer. Disable the wrapped control as well. */ disabled?: boolean; /** Draw a ripple that grows from the pointer (or from the center for keyboard presses). */ ripple?: boolean; /** Tint the whole surface while hovered and pressed. */ highlight?: boolean; /** Milliseconds a press must be held to confirm. Turns on the hold behavior and the sweep layer. */ holdDuration?: number; /** Draw the sweep layer while holding. Turn off to drive your own visual from `onHoldProgress`-free state via `data-holding`. */ sweep?: boolean; /** When false, releasing early keeps the progress where it reached (progress feedback). Default true: releasing cancels. */ resetOnRelease?: boolean; /** Called once the hold completes. */ onHoldConfirm?: () => void; /** Called when a hold begins. */ onHoldStart?: () => void; /** Called when a hold ends before it completed and the progress reset. */ onHoldCancel?: () => void; /** Announced to assistive tech when the hold completes. */ confirmLabel?: string; className?: string; children?: React.ReactNode; }; /** Wrap a Button or a Card. Add `ripple`, `highlight` or `holdDuration`, or compose the layer parts yourself. */ export function PressableFeedback({ render, disabled = false, ripple = true, highlight = false, holdDuration, sweep = true, resetOnRelease = true, onHoldConfirm, onHoldStart, onHoldCancel, confirmLabel = "Confirmed", tone, className, children, }: PressableFeedbackProps) { const rootRef = React.useRef(null); const [pressed, setPressed] = React.useState(false); const [holding, setHolding] = React.useState(false); const [confirmed, setConfirmed] = React.useState(false); const [ripples, setRipples] = React.useState([]); const nextId = React.useRef(0); const sweepAnim = React.useRef(null); const resetTimer = React.useRef(0); const activeRipple = React.useRef(null); const holdActive = React.useRef(false); const completed = React.useRef(false); const pressInput = React.useRef<"pointer" | "key" | null>(null); const callbacks = React.useRef({ onHoldConfirm, onHoldStart, onHoldCancel, resetOnRelease }); React.useEffect(() => { callbacks.current = { onHoldConfirm, onHoldStart, onHoldCancel, resetOnRelease }; }); React.useEffect(() => () => window.clearTimeout(resetTimer.current), []); const registerSweep = React.useCallback((animation: Animation | null) => { sweepAnim.current = animation; if (animation) { animation.onfinish = () => { if (animation.playbackRate <= 0) return; holdActive.current = false; completed.current = true; setHolding(false); setConfirmed(true); callbacks.current.onHoldConfirm?.(); // Rest on the full sweep for a beat so the confirmation reads, then ease back to empty. window.clearTimeout(resetTimer.current); resetTimer.current = window.setTimeout(() => { animation.playbackRate = -2; animation.play(); setConfirmed(false); }, 800); }; } }, []); const dropRipple = React.useCallback((id: number) => setRipples((all) => all.filter((r) => r.id !== id)), []); const startRipple = (x: number, y: number) => { const el = rootRef.current; if (!el) return; const { width, height } = el.getBoundingClientRect(); const size = Math.hypot(Math.max(x, width - x), Math.max(y, height - y)) * 2; const id = nextId.current++; activeRipple.current = id; setRipples((all) => [...all, { id, x, y, size, released: false }]); }; const releaseRipple = () => { const id = activeRipple.current; activeRipple.current = null; if (id === null) return; setRipples((all) => all.map((r) => (r.id === id ? { ...r, released: true } : r))); }; const startHold = () => { const animation = sweepAnim.current; if (!holdDuration || disabled || holdActive.current) return; window.clearTimeout(resetTimer.current); holdActive.current = true; setHolding(true); setConfirmed(false); callbacks.current.onHoldStart?.(); if (animation) { // A new press starts from empty, synchronously, unless it is resuming kept progress (resetOnRelease off, // not yet confirmed). This also cancels any drain that is still running from the last press. if (callbacks.current.resetOnRelease || completed.current) animation.currentTime = 0; completed.current = false; animation.playbackRate = 1; animation.play(); } else { // No sweep layer: still honour the duration. resetTimer.current = window.setTimeout(() => { holdActive.current = false; setHolding(false); setConfirmed(true); callbacks.current.onHoldConfirm?.(); resetTimer.current = window.setTimeout(() => setConfirmed(false), 800); }, holdDuration); } }; const endHold = () => { if (!holdActive.current) return; holdActive.current = false; setHolding(false); const animation = sweepAnim.current; if (!animation) { window.clearTimeout(resetTimer.current); callbacks.current.onHoldCancel?.(); return; } if (callbacks.current.resetOnRelease) { animation.playbackRate = -4; animation.play(); callbacks.current.onHoldCancel?.(); } else { animation.pause(); } }; const endPress = () => { pressInput.current = null; setPressed(false); releaseRipple(); endHold(); }; const onPointerDown = (e: React.PointerEvent) => { if (disabled || e.button !== 0) return; pressInput.current = "pointer"; setPressed(true); if (ripple) { const rect = e.currentTarget.getBoundingClientRect(); startRipple(e.clientX - rect.left, e.clientY - rect.top); } startHold(); const up = () => { window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up); endPress(); }; window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up); }; const onKeyDown = (e: React.KeyboardEvent) => { if (disabled || e.repeat || (e.key !== "Enter" && e.key !== " ")) return; if (pressInput.current) return; pressInput.current = "key"; setPressed(true); if (ripple) { const rect = e.currentTarget.getBoundingClientRect(); startRipple(rect.width / 2, rect.height / 2); } startHold(); }; const onKeyUp = (e: React.KeyboardEvent) => { if (pressInput.current !== "key") return; if (e.key !== "Enter" && e.key !== " ") return; endPress(); }; const onPointerLeave = () => { // A hold is a commitment to one control: sliding off it cancels, like releasing. if (pressInput.current === "pointer" && holdDuration) endPress(); }; const ctx = React.useMemo( () => ({ disabled, ripples, dropRipple, registerSweep, holdDuration }), [disabled, ripples, dropRipple, registerSweep, holdDuration], ); const props: React.HTMLAttributes & Record = { "data-slot": "pressable-feedback", "data-pressed": pressed ? "" : undefined, "data-holding": holding ? "" : undefined, "data-confirmed": confirmed ? "" : undefined, "data-disabled": disabled ? "" : undefined, onPointerDown, onPointerLeave, onKeyDown, onKeyUp, onContextMenu: holdDuration ? (e: React.MouseEvent) => e.preventDefault() : undefined, className: cn(root({ tone }), "inline-flex rounded-lg", className), children: ( {children} {highlight ? : null} {ripple ? : null} {holdDuration && sweep ? : null} {confirmed ? confirmLabel : ""} ), }; const setRef = (node: HTMLElement | null) => { rootRef.current = node; }; return render ? React.cloneElement(render, { ...props, ref: setRef } as React.HTMLAttributes, props.children as React.ReactNode) : React.createElement("div", { ...props, ref: setRef }); } const layer = "pointer-events-none absolute inset-0 z-10 overflow-hidden rounded-[inherit] [mix-blend-mode:var(--pf-blend,normal)]"; /** Tints the surface while hovered (hover devices only) and pressed. */ export function PressableFeedbackHighlight({ className }: { className?: string }) { useFeedback("PressableFeedbackHighlight"); return ( ); } /** Ripples that grow from where the press started and fade on release. Transform and opacity only. */ export function PressableFeedbackRipple({ className }: { className?: string }) { const { ripples, dropRipple } = useFeedback("PressableFeedbackRipple"); return ( {ripples.map((r) => ( ))} ); } function RippleDot({ ripple, onDone }: { ripple: RippleState; onDone: (id: number) => void }) { const ref = React.useRef(null); const reduce = useReducedMotion(); const [grown, setGrown] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const a = el.animate( reduce ? [{ opacity: 0 }, { opacity: 1 }] : [ { transform: "scale(0.12)", opacity: 1 }, { transform: "scale(1)", opacity: 1 }, ], { duration: reduce ? 120 : 480, easing: EASE_OUT, fill: "forwards" }, ); let live = true; a.finished.then(() => live && setGrown(true), () => {}); return () => { live = false; a.cancel(); }; }, [reduce]); React.useEffect(() => { if (!ripple.released || !grown) return; const el = ref.current; if (!el) return; const f = el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 320, easing: EASE_EXIT, fill: "forwards" }); f.finished.then(() => onDone(ripple.id), () => {}); }, [ripple.released, ripple.id, grown, onDone]); return ( ); } /** Fills from the inline start while a hold is in progress. Driven by a paused Web Animation on transform. */ export function PressableFeedbackSweep({ className }: { className?: string }) { const { holdDuration, registerSweep } = useFeedback("PressableFeedbackSweep"); const ref = React.useRef(null); React.useLayoutEffect(() => { const el = ref.current; if (!el || !holdDuration) return; const animation = el.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], { duration: holdDuration, easing: "linear", fill: "both", }); animation.pause(); animation.currentTime = 0; registerSweep(animation); return () => { registerSweep(null); animation.cancel(); }; }, [holdDuration, registerSweep]); return ( ); } export default PressableFeedback; 34:T221e,"use client"; import { IconBuildingBank, IconBuildingStore, IconCash, IconCheck, IconCreditCard, IconPackage, IconTruckDelivery } from "@tabler/icons-react"; import type { ReactNode } from "react"; import { useState } from "react"; import { DemoGroup, DemoPage } from "../../feedback/_demo-group"; import { sampleDelivery, samplePayment, samplePlans } from "../_fixtures-b"; import { RadioButton, RadioButtonAddon, RadioButtonContent, RadioButtonDescription, RadioButtonGroup, RadioButtonIcon, RadioButtonTitle, } from "./radio-button-group"; const money = (n: number) => (n === 0 ? "Free" : `$${n}`); const deliveryIcons: Record = { standard: , express: , pickup: }; const payIcons: Record = { card: , bank: , cod: }; function Plans(props: Partial> & { indicator?: "start" | "end" | "none" | ReactNode }) { const { indicator, ...rest } = props; return ( {samplePlans.map((p) => ( {p.name} {p.badge ? {p.badge} : null} {p.blurb} {p.price === 0 ? "Free" : `$${p.price}/mo`} ))} ); } function Delivery() { const [value, setValue] = useState("standard"); return ( {sampleDelivery.map((d) => ( {deliveryIcons[d.id]} {d.name} {d.disabled ? "Unavailable for this address" : d.description} {money(d.price)} ))} ); } function DeliveryAndPayment() { const [delivery, setDelivery] = useState("standard"); const [pay, setPay] = useState("card"); const price = sampleDelivery.find((d) => d.id === delivery)?.price ?? 0; const sub = 42; return (

Delivery

{sampleDelivery.map((d) => ( {d.name} {d.description} {money(d.price)} ))}

Payment

{samplePayment.map((p) => ( {payIcons[p.id]} {p.name} {p.description} ))}

Subtotal ${sub} (sample), shipping {money(price)}, total ${sub + price}

); } export function RadioButtonGroupDemo() { const [plan, setPlan] = useState("studio"); return ( {samplePayment.map((p) => ( {payIcons[p.id]} {p.name} ))} } /> {["S", "M", "L", "XL"].map((s) => ( {s} ))} Available Sold out

Selected: {plan}

{sampleDelivery.slice(0, 2).map((d) => ( {({ checked }) => ( {d.name} {checked ? "Selected" : d.description} )} ))} {samplePlans.map((p) => ( {p.name} {p.price === 0 ? "$0" : `$${p.price}`} /mo {p.features.join(", ")} ))} ); } export default RadioButtonGroupDemo; 35:T7a2,import type { BlockMeta } from "../../../lib/block-meta"; export const radioButtonGroupMeta: BlockMeta = { slug: "radio-button-group", title: "Radio button group", description: "Card-style single choice on Kobra RadioGroup: the selection dot travels between cards. Icon cards, grid, custom or no indicator, subscription plans, delivery and payment.", group: "forms", kobraDeps: ["radio-group"], files: [ "blocks/forms/radio-button-group/radio-button-group.tsx", "blocks/forms/checkbox-button-group/option-card.ts", "blocks/feedback/pressable-feedback/pressable-feedback.tsx", ], props: [ { name: "value / defaultValue", type: "string", description: "Controlled and uncontrolled selection." }, { name: "onValueChange", type: "(value: string) => void", description: "Called with the new value." }, { name: "layout", type: "'stack' | 'grid'", default: "'stack'", description: "One column, or a responsive grid of cards." }, { name: "variant", type: "'outline' | 'secondary'", default: "'outline'", description: "Card surface." }, { name: "ripple", type: "boolean", default: "false", description: "Pointer-origin ripple on every card." }, { name: "disabled / required / name", type: "boolean / boolean / string", description: "Group state and form name." }, { name: "RadioButton value", type: "string", description: "The option's value." }, { name: "RadioButton indicator", type: "'start' | 'end' | 'none' | ReactNode", default: "'start'", description: "Radio position, hidden, or a node shown as a corner mark." }, { name: "RadioButton orientation", type: "'horizontal' | 'vertical'", default: "'horizontal'", description: "Vertical makes an icon card." }, { name: "RadioButton children", type: "ReactNode | (state) => ReactNode", description: "Content or a render function of { checked, disabled }." }, ], tags: ["radio", "cards", "plans", "checkout", "form"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#forms","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Forms"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Radio button group"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Radio button group"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Card-style single choice on Kobra RadioGroup: the selection dot travels between cards. Icon cards, grid, custom or no indicator, subscription plans, delivery and payment."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"radio-button-group","group":"forms","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/forms/radio-button-group/radio-button-group.tsx","code":"$31"},{"path":"blocks/forms/checkbox-button-group/option-card.ts","code":"$32"},{"path":"blocks/feedback/pressable-feedback/pressable-feedback.tsx","code":"$33"},{"path":"blocks/forms/radio-button-group/demo.tsx","code":"$34"},{"path":"blocks/forms/radio-button-group/meta.ts","code":"$35"}]}],"props":"$L36"}],"$L37"]}]