62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T4b1,

Price with open breakdown disclosure

pricingdetailsdisclosure

React ↗

$1,850 per project

See the breakdown

Materials$620
Labour$980
Margin$250

Say: "give me a price with a breakdown disclosure" — a headline price with a native, JS-free details toggle underneath that opens a line-item breakdown; reach for it when the number needs to defend itself on demand, not by default.

64:Ta7a,.card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; } .card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); } .card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; } .card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; } .tags { display: flex; gap: .35rem; } .tags i { font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap; } .demo { min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center; background: var(--bg2); overflow: hidden; flex: 1; } .order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); } .order b { color: var(--txt); font-weight: 500; } .demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; } .ai-card .num { color: var(--acc2) !important; } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; } /* ---------- 362 · Price with open breakdown disclosure ---------- */ .pmd-wrap { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1.4rem; box-sizing: border-box; } .pmd-price { margin: 0; font: 700 clamp(1.4rem, 6.5vw, 1.9rem)/1 var(--mono); color: var(--txt); } .pmd-per { font: 500 .6rem/1 var(--mono); color: var(--dim); margin-left: .2em; } .pmd-details { width: 100%; max-width: 15rem; } .pmd-summary { list-style: none; cursor: pointer; text-align: center; font: 500 .64rem/1 var(--mono); color: var(--dim); padding: .3rem 0; transition: color .2s; } .pmd-summary::-webkit-details-marker { display: none; } .pmd-summary::after { content: '+'; margin-left: .4em; } .pmd-details[open] .pmd-summary::after { content: '−'; } .pmd-summary:hover { color: var(--acc); } .pmd-summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .pmd-lines { margin: .5rem 0 0; padding: .5rem 0 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; border-top: 1px solid var(--line); } .pmd-line { display: flex; justify-content: space-between; font: 400 .64rem/1.2 var(--sans); color: var(--dim); } .pmd-line span:last-child { font-family: var(--mono); color: var(--txt); } .pmd-summary { transition: none; }65:T8d1,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // Price with open breakdown disclosure — Motion Menu import { useEffect, useRef } from "react"; const MARKUP = "

362

Price with open breakdown disclosure

pricingdetailsdisclosure

React \u2197

$1,850 per project

See the breakdown

Materials$620
Labour$980
Margin$250

Say: "give me a price with a breakdown disclosure" \u2014 a headline price with a native, JS-free details toggle underneath that opens a line-item breakdown; reach for it when the number needs to defend itself on demand, not by default.

"; export function PriceOpenBreakdownDisclosure() { const hostRef = useRef(null); useEffect(() => { const host = hostRef.current; if (!host) return; const $ = (s: string) => host.querySelector(s) as HTMLElement | null; let disposed = false; const cleanup: Array<() => void> = []; (async () => { if (disposed) return; try { } catch (err: any) { console.warn("[motion-menu] price-open-breakdown-disclosure failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default PriceOpenBreakdownDisclosure; 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L62",null,{"files":[{"path":"motion-menu/price-open-breakdown-disclosure.html","content":"$63","type":"registry:file","target":"motion-menu/price-open-breakdown-disclosure.html"},{"path":"motion-menu/price-open-breakdown-disclosure.css","content":"$64","type":"registry:file","target":"motion-menu/price-open-breakdown-disclosure.css"},{"path":"components/motion-menu/price-open-breakdown-disclosure.tsx","content":"$65","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]