50: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"] 51:I[544296,["/_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"],"ItemStyles"] 52:I[34002,["/_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"],"CodeEditor"] 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:T24ae,"use client" import * as React from "react" import { Button as ButtonPrimitive } from "@base-ui/react/button" import { cn } from "cn" import { Seal, Stamp } from "@/components/ui/stamp" type ApprovalState = "pending" | "approved" | "rejected" const ApprovalContext = React.createContext<{ state: ApprovalState approve: () => void reject: () => void titleId: string }>({ state: "pending", approve: () => {}, reject: () => {}, titleId: "" }) type ApprovalProps = Omit, "onReset"> & { state?: ApprovalState defaultState?: ApprovalState onApprove?: () => void onReject?: () => void } /** * An action waiting for a person: what it does, what it can't undo, who has * signed, and the seal to approve it. */ function Approval({ className, state: stateProp, defaultState = "pending", onApprove, onReject, children, ...props }: ApprovalProps) { const [uncontrolled, setUncontrolled] = React.useState(defaultState) const state = stateProp ?? uncontrolled const titleId = React.useId() const context = React.useMemo( () => ({ state, titleId, approve: () => { if (stateProp === undefined) setUncontrolled("approved") onApprove?.() }, reject: () => { if (stateProp === undefined) setUncontrolled("rejected") onReject?.() }, }), [state, stateProp, titleId, onApprove, onReject] ) return (

{children}

) } /** The outcome pressed into the card, and announced. */ function ApprovalOutcome() { const { state } = React.useContext(ApprovalContext) return (

{state === "approved" && ( <> {/* Announce one clear word; the seal's ring text is decoration. */} Approved OK )} {state === "rejected" && ( Sent back )}

) } function ApprovalTitle({ className, ...props }: React.ComponentProps<"h3">) { const { titleId } = React.useContext(ApprovalContext) return (

) } /** What happens, and what can't be undone. Say it plainly. */ function ApprovalDescription({ className, ...props }: React.ComponentProps<"p">) { return (
) } function ApprovalSignatures({ className, ...props }: React.ComponentProps<"ul">) { return (
) } /** A signature line. Signed names are written over it in marker. */ function ApprovalSignature({ name, signed = false, className, ...props }: { name: string; signed?: boolean } & Omit, "children">) { return (
{signed ? name : ""} {name} : {signed ? "signed" : "not signed yet"} {signed ? " · signed" : " · awaiting"}
) } function ApprovalActions({ className, ...props }: React.ComponentProps<"div">) { const { state } = React.useContext(ApprovalContext) if (state !== "pending") return null return (
) } /** Send it back without approving. A plain, single press. */ function ApprovalReject({ className, onClick, ...props }: ButtonPrimitive.Props) { const { reject } = React.useContext(ApprovalContext) return ( { onClick?.(event) if (!event.defaultPrevented) reject() }} className={cn( "h-9 rounded-(--bevel-radius-sm) border border-(--bevel-paper-foreground)/30 px-3 text-sm font-medium text-(--bevel-paper-foreground) outline-none", "hover:bg-(--bevel-paper-foreground)/5 focus-visible:ring-2 focus-visible:ring-(--bevel-pen-blue)/50", className )} {...props} /> ) } /** Browsers may report a custom-property duration as "1200ms" or "1.2s". / function toMilliseconds(value: string) { const n = parseFloat(value) if (Number.isNaN(n)) return 1200 return /ms\s$/.test(value) ? n : /s\s$/.test(value) ? n 1000 : n } type ApprovalSealProps = Omit & { /** Press and hold to approve (the default), or a single press. */ requireHold?: boolean } /** * The brass embosser. Press and hold (pointer, Enter or Space) until it * seals; letting go early springs it back. The hold is deliberate on * purpose: approving is hard to undo. / function ApprovalSeal({ className, requireHold = true, children, ...props }: ApprovalSealProps) { const { approve } = React.useContext(ApprovalContext) const [holding, setHolding] = React.useState(false) const timer = React.useRef(undefined) const ref = React.useRef(null) const hintId = React.useId() const start = () => { if (!requireHold) return approve() if (timer.current !== undefined) return const ms = toMilliseconds(getComputedStyle(ref.current!).getPropertyValue("--approval-hold")) setHolding(true) timer.current = window.setTimeout(() => { timer.current = undefined setHolding(false) approve() }, ms) } const cancel = () => { if (timer.current !== undefined) window.clearTimeout(timer.current) timer.current = undefined setHolding(false) } React.useEffect(() => cancel, []) return (
{requireHold ? "Press and hold to approve" : "Press to approve"} { if (event.button !== 0) return event.currentTarget.setPointerCapture(event.pointerId) start() }} onPointerUp={cancel} onPointerCancel={cancel} onLostPointerCapture={cancel} onKeyDown={(event) => { if ((event.key === "Enter" || event.key === " ") && !event.repeat) { event.preventDefault() start() } }} onKeyUp={(event) => { if (event.key === "Enter" || event.key === " ") cancel() }} className={cn( "bevel-metal bevel-object relative grid size-16 shrink-0 cursor-pointer place-items-center overflow-hidden rounded-full text-(length:--bevel-fine) font-bold tracking-(--bevel-tracking-print) text-(--bevel-ivory-foreground) uppercase outline-none select-none", "transition-[translate] duration-(--bevel-duration-press) ease-(--bevel-ease-out) data-holding:translate-y-0.5 motion-reduce:transition-none", "focus-visible:ring-3 focus-visible:ring-(--bevel-pen-blue)/50 focus-visible:ring-offset-2", className )} {...props} > {/ Fills slowly while held; drains fast on release. */} {children ?? "Seal"}
) } export { Approval, ApprovalTitle, ApprovalDescription, ApprovalSignatures, ApprovalSignature, ApprovalActions, ApprovalReject, ApprovalSeal, } export type { ApprovalProps, ApprovalState, ApprovalSealProps } 4f:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@bevel","registryDependencies":["https://bevel-ui.vercel.app/r/bevel.json","https://bevel-ui.vercel.app/r/stamp.json"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":":root {\n\t--approval-hold: 1200ms;\n\t--approval-release: 200ms;\n\t--approval-press-fill: oklch(0.42 0.08 70 / 0.55);\n\t--approval-seal-size: 5rem;\n}\n\n[data-slot=\"approval-seal\"] {\n\t--bevel-material: var(--bevel-brass);\n\t--bevel-material-edge: var(--bevel-brass-edge);\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/bevel/ui/approval.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]