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:T16fd,"use client"; import { CheckboxGroup } from "@base-ui/react/checkbox-group"; import { cva, type VariantProps } from "class-variance-authority"; import * as React from "react"; import { Checkbox } from "@/components/ui/checkbox"; import { cn } from "@/lib/utils"; import { PressableFeedback } from "../../feedback/pressable-feedback/pressable-feedback"; import { hiddenControl, optionCard, optionCornerIndicator, optionIcon } from "./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[]; disabled: boolean; variant: "outline" | "secondary"; ripple: boolean; }; const GroupContext = React.createContext(null); export type CheckboxButtonGroupProps = VariantProps & { value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; disabled?: boolean; /** 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 checkboxes. Built on Kobra Checkbox and Base UI's checkbox group. */ export function CheckboxButtonGroup({ value, defaultValue = [], onValueChange, disabled = false, variant = "outline", ripple = false, layout, className, children, ...aria }: CheckboxButtonGroupProps) { const [inner, setInner] = React.useState(defaultValue); const current = value ?? inner; const ctx = React.useMemo(() => ({ value: current, disabled, variant, ripple }), [current, disabled, variant, ripple]); return ( { setInner(next); onValueChange?.(next); }} className={cn(group({ layout }), className)} {...aria} > {children} ); } export type CheckboxButtonState = { checked: boolean; disabled: boolean }; export type CheckboxButtonProps = { value: string; disabled?: boolean; /** Where the checkbox 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: CheckboxButtonState) => React.ReactNode); className?: string; }; /** One card. The label wraps everything, so a tap anywhere toggles it. */ export function CheckboxButton({ value, disabled: itemDisabled = false, indicator = "start", orientation = "horizontal", ripple, children, className, }: CheckboxButtonProps) { const ctx = React.useContext(GroupContext); if (!ctx) throw new Error("CheckboxButton must be rendered inside "); const disabled = ctx.disabled || itemDisabled; const checked = ctx.value.includes(value); const custom = indicator !== "start" && indicator !== "end" && indicator !== "none"; const showBox = 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 CheckboxButtonIcon({ className, ...props }: React.ComponentProps<"span">) { return ; } export function CheckboxButtonContent({ className, ...props }: React.ComponentProps<"span">) { return ; } export function CheckboxButtonTitle({ className, ...props }: React.ComponentProps<"span">) { return ; } export function CheckboxButtonDescription({ className, ...props }: React.ComponentProps<"span">) { return ; } /** Trailing text such as a price. */ export function CheckboxButtonAddon({ className, ...props }: React.ComponentProps<"span">) { return ; } export default CheckboxButtonGroup; 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:T2083,"use client"; import { IconBolt, IconCheck, IconGift, IconMessage, IconShieldCheck } from "@tabler/icons-react"; import type { ReactNode } from "react"; import { useState } from "react"; import { DemoGroup, DemoPage } from "../../feedback/_demo-group"; import { sampleAddons, sampleInterests, samplePlans } from "../_fixtures-b"; import { CheckboxButton, CheckboxButtonAddon, CheckboxButtonContent, CheckboxButtonDescription, CheckboxButtonGroup, CheckboxButtonIcon, CheckboxButtonTitle, } from "./checkbox-button-group"; const addonIcons: Record = { gift: , insure: , rush: , tracking: , }; const money = (n: number) => (n === 0 ? "Free" : `$${n}`); function Interests({ ...props }: Partial>) { return ( {sampleInterests.map((i) => ( {i.label} ))} ); } function AddonCards({ indicator, ...props }: { indicator?: "start" | "end" | "none" | ReactNode } & Partial>) { return ( {sampleAddons.map((a) => ( {addonIcons[a.id]} {a.name} {a.description} {money(a.price)} ))} ); } function Controlled() { const [value, setValue] = useState(["hoodies", "caps"]); return (

Selected: {value.join(", ") || "none"}

); } function PlanExtras() { const [value, setValue] = useState(["studio-seat"]); const extras = [ { id: "studio-seat", name: "Extra seat", description: "Add a teammate", price: 6 }, { id: "studio-domain", name: "Custom domain", description: "Connect yours", price: 4 }, { id: "studio-export", name: "Data export", description: "CSV on demand", price: 5 }, ]; const total = samplePlans[1].price + extras.filter((e) => value.includes(e.id)).reduce((s, e) => s + e.price, 0); return (

Studio plan, {money(samplePlans[1].price)} a month. Prices are samples.

{extras.map((e) => ( {e.name} {e.description} +${e.price}/mo ))}

Total ${total} per month

); } export function CheckboxButtonGroupDemo() { return ( {sampleAddons.map((a) => ( {addonIcons[a.id]} {a.name} {money(a.price)} ))} } layout="grid" />

{["S", "M", "L", "XL"].map((s) => ( {s} ))}

Available Sold out {sampleInterests.slice(0, 3).map((i) => ( {({ checked }) => ( {i.label} {checked ? "Following" : "Tap to follow"} )} ))} ); } export default CheckboxButtonGroupDemo; 35:T7c8,import type { BlockMeta } from "../../../lib/block-meta"; export const checkboxButtonGroupMeta: BlockMeta = { slug: "checkbox-button-group", title: "Checkbox button group", description: "Card-style options on Kobra Checkbox: the whole card is the label. Icon cards, grid or stack, custom or no indicator, controlled, render-prop children, optional ripple.", group: "forms", kobraDeps: ["checkbox"], files: [ "blocks/forms/checkbox-button-group/checkbox-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 selection." }, { 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 (per card with CheckboxButton ripple)." }, { name: "disabled", type: "boolean", default: "false", description: "Disables the group." }, { name: "CheckboxButton value", type: "string", description: "The option's value." }, { name: "CheckboxButton indicator", type: "'start' | 'end' | 'none' | ReactNode", default: "'start'", description: "Checkbox position, hidden, or a node shown as a corner mark." }, { name: "CheckboxButton orientation", type: "'horizontal' | 'vertical'", default: "'horizontal'", description: "Vertical makes an icon card." }, { name: "CheckboxButton children", type: "ReactNode | (state) => ReactNode", description: "Content or a render function of { checked, disabled }." }, ], tags: ["checkbox", "cards", "options", "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":"Checkbox button group"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Checkbox 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 options on Kobra Checkbox: the whole card is the label. Icon cards, grid or stack, custom or no indicator, controlled, render-prop children, optional ripple."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"checkbox-button-group","group":"forms","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/forms/checkbox-button-group/checkbox-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/checkbox-button-group/demo.tsx","code":"$34"},{"path":"blocks/forms/checkbox-button-group/meta.ts","code":"$35"}]}],"props":"$L36"}],"$L37"]}]