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:T23ea,"use client" import * as React from "react" import { Meter as MeterPrimitive } from "@base-ui/react/meter" import { cn } from "cn" import { formatAmount } from "@/lib/format-amount" /* The needle sweeps 270°, from bottom-left (-135°) to bottom-right (135°). */ const SWEEP = 270 const START = -SWEEP / 2 type Scale = { min: number; max: number } const ScaleContext = React.createContext({ min: 0, max: 100, value: 0 }) function angleFor(value: number, { min, max }: Scale) { const t = max === min ? 0 : (Math.min(Math.max(value, min), max) - min) / (max - min) return START + t * SWEEP } /** Ticks, marks, needle and glass. Shared by Gauge and Dial. */ function Face({ ticks, dragging, children, }: { ticks: number dragging?: boolean children?: React.ReactNode }) { const { value, ...scale } = React.useContext(ScaleContext) return ( {children} ) } type DialMarkProps = Omit, "children"> & { value: number tone?: "red" | "amber" | "green" } /** A painted mark on the scale: a threshold, a limit, a target. Decorative; describe it in text too. */ function DialMark({ value, tone = "red", className, style, ...props }: DialMarkProps) { const scale = React.useContext(ScaleContext) return ( ) } type GaugeProps = MeterPrimitive.Root.Props & { /** Number of tick intervals on the scale. */ ticks?: number /** Marks (DialMark) painted on the face. */ marks?: React.ReactNode } /** A read-only instrument: the needle shows a value on a scale. Announced as a meter. */ function Gauge({ className, value, min = 0, max = 100, ticks = 20, marks, children, ...props }: GaugeProps) { return ( {marks} {children} ) } function GaugeLabel({ className, ...props }: MeterPrimitive.Label.Props) { return ( ) } function GaugeValue({ className, ...props }: MeterPrimitive.Value.Props) { return ( ) } type DialProps = Omit, "defaultValue" | "onChange" | "children"> & { value?: number defaultValue?: number onValueChange?: (value: number) => void min?: number max?: number step?: number /** Number of tick intervals on the scale. */ ticks?: number /** Formats the value for the readout and for screen readers. */ currency?: string format?: Intl.NumberFormatOptions locale?: Intl.LocalesArgument /** Marks (DialMark) painted on the face. */ marks?: React.ReactNode /** A name for the control, shown below the dial. */ label: React.ReactNode disabled?: boolean } /** * An adjustable dial: turn it with a drag, or arrow keys, Page Up/Down, Home and End. * Announced as a slider. */ function Dial({ className, value: valueProp, defaultValue, onValueChange, min = 0, max = 100, step = 1, ticks = 20, currency, format, locale, marks, label, disabled, ...props }: DialProps) { const [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? min) const value = valueProp ?? uncontrolled const [dragging, setDragging] = React.useState(false) const labelId = React.useId() const text = formatAmount({ value, currency, format, locale }) const commit = (next: number) => { const snapped = Math.min(max, Math.max(min, Math.round((next - min) / step) * step + min)) if (snapped === value) return if (valueProp === undefined) setUncontrolled(snapped) onValueChange?.(snapped) } const fromPointer = (event: React.PointerEvent) => { const rect = event.currentTarget.getBoundingClientRect() const dx = event.clientX - (rect.left + rect.width / 2) const dy = event.clientY - (rect.top + rect.height / 2) // 0° points up; clockwise is positive. Below the scale, snap to the nearer end. let angle = (Math.atan2(dx, -dy) * 180) / Math.PI if (angle > SWEEP / 2) angle = SWEEP / 2 if (angle < -SWEEP / 2) angle = -SWEEP / 2 commit(min + ((angle - START) / SWEEP) * (max - min)) } const onKeyDown = (event: React.KeyboardEvent) => { const big = Math.max(step, (max - min) / 10) const next = { ArrowUp: value + step, ArrowRight: value + step, ArrowDown: value - step, ArrowLeft: value - step, PageUp: value + big, PageDown: value - big, Home: min, End: max, }[event.key] if (next === undefined) return event.preventDefault() commit(next) } return (

{ if (disabled || event.button !== 0) return event.currentTarget.setPointerCapture(event.pointerId) setDragging(true) fromPointer(event) }} onPointerMove={(event) => { if (dragging) fromPointer(event) }} onPointerUp={() => setDragging(false)} onPointerCancel={() => setDragging(false)} > {marks}

{label} {text}

) } export { Gauge, GaugeLabel, GaugeValue, Dial, DialMark } export type { GaugeProps, DialProps, DialMarkProps } 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/amount.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--dial-mark-red: oklch(0.58 0.2 27);\n\t--dial-mark-amber: oklch(0.75 0.16 70);\n\t--dial-mark-green: oklch(0.6 0.15 150);\n}\n\n[data-slot=\"gauge\"], [data-slot=\"dial\"] {\n\t--bevel-material: var(--bevel-brass);\n\t--bevel-material-edge: var(--bevel-brass-edge);\n}\n\n[data-slot=\"dial-mark\"] {\n\t--dial-mark: var(--dial-mark-red);\n}\n\n[data-slot=\"dial-mark\"][data-tone=\"amber\"] {\n\t--dial-mark: var(--dial-mark-amber);\n}\n\n[data-slot=\"dial-mark\"][data-tone=\"green\"] {\n\t--dial-mark: var(--dial-mark-green);\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/bevel/ui/dial.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]