52: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"] 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:T57dc,"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { cn } from "@/lib/utils"; import { valueToAngle, getThumbPosition, describeArc, roundToStep, clamp, } from "./lib/angle-calculations"; import { SVG_CONFIG, RADIUS_CONFIG, SLOT_NAMES, VARIANT_COLOR_MAP, } from "./lib/svg-constants"; import { pixelsToSvgUnits, createSvgOverlayProps, strokeWidthToSvgUnits, getTrackInnerEdge, } from "./lib/svg-utils"; import { getValueFromPointerPosition } from "./lib/pointer-utils"; export type ChangeReason = "drag" | "keyboard" | "click"; interface CircularSliderContextValue { value: number; min: number; max: number; step: number; startAngle: number; direction: "clockwise" | "counterclockwise"; continuous: boolean; disabled: boolean; size: number; variant: "default" | "filled"; isDragging: boolean; isFocused: boolean; handleValueChange: (newValue: number, reason: ChangeReason) => void; handleValueCommitted: (value: number) => void; } const CircularSliderContext = React.createContext< CircularSliderContextValue | undefined >(undefined); function useCircularSliderContext() { const context = React.useContext(CircularSliderContext); if (!context) { throw new Error( "CircularSlider components must be used within CircularSliderRoot", ); } return context; } const circularSliderVariants = cva( "group relative inline-block touch-none select-none outline-none", { variants: { variant: { default: "", filled: "", }, disabled: { true: "opacity-60 cursor-not-allowed pointer-events-none", false: "", }, }, defaultVariants: { variant: "default", disabled: false, }, }, ); const thumbVariants = cva( "absolute transition-[box-shadow] duration-200 ease-out", { variants: { variant: { default: "rounded-full border-3 border-primary bg-background group-data-focused:z-10 group-data-focused:ring-2 group-data-focused:ring-ring group-data-focused:ring-offset-2 group-data-focused:ring-offset-background", filled: "rounded-none bg-foreground", }, dragging: { true: "cursor-grabbing", false: "cursor-grab", }, }, defaultVariants: { variant: "default", dragging: false, }, }, ); /** * Wraps `value` into [min, max] for continuous mode, detecting boundary * crossings via `previousValue` so crossing max→min resolves to min (not max) * and vice-versa. */ function wrapValueWithDirection( value: number, min: number, max: number, previousValue: number | null, ): number { const range = max - min; if (previousValue !== null) { const diff = value - previousValue; const absDiff = Math.abs(diff); if (absDiff > range / 2) { if (previousValue > min + range * 0.75 && value < min + range * 0.25) { return min; } if (previousValue < min + range * 0.25 && value > min + range * 0.75) { return max; } } } if (value > max) { return min + (value - max); } if (value < min) { return max - (min - value); } return value; } export interface CircularSliderRootProps extends Omit< useRender.ComponentProps<"div">, "onChange" | "defaultValue" | "aria-valuetext" >, VariantProps { value?: number; defaultValue?: number; onValueChange?: (value: number, reason: ChangeReason) => void; onValueCommitted?: (value: number) => void; min?: number; max?: number; step?: number; largeStep?: number; startAngle?: number; direction?: "clockwise" | "counterclockwise"; continuous?: boolean; disabled?: boolean; size?: number; // Form integration props name?: string; id?: string; required?: boolean; form?: string; // Accessibility props "aria-label"?: string; "aria-labelledby"?: string; "aria-describedby"?: string; "aria-valuetext"?: string | ((value: number) => string); } export function CircularSliderRoot({ className, render, ref: forwardedRef, value: valueProp, defaultValue = 0, onValueChange, onValueCommitted, min = 0, max = 100, step = 1, largeStep = 10, startAngle = 0, direction = "clockwise", continuous = true, disabled = false, size = 96, variant = "default", // Form integration props name, id, required, form: formProp, // Accessibility props "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, ...props }: CircularSliderRootProps) { const isControlled = valueProp !== undefined; const [internalValue, setInternalValue] = React.useState(defaultValue); const value = isControlled ? valueProp : internalValue; const [isDragging, setIsDragging] = React.useState(false); const [isFocused, setIsFocused] = React.useState(false); const inputRef = React.useRef(null); const previousValue = React.useRef(null); // Focus modality: `:focus-visible` can't distinguish pointer-initiated // programmatic focus on a range input (inputs that accept keyboard always // match it), so track it ourselves. Set before the pointer-down focus call, // consumed by the input's onFocus. const focusFromPointer = React.useRef(false); const handleValueChange = React.useCallback( (newValue: number, reason: ChangeReason) => { if (disabled) return; let processedValue = roundToStep(newValue, step, min); if (continuous) { processedValue = wrapValueWithDirection( processedValue, min, max, previousValue.current, ); } else { processedValue = clamp(processedValue, min, max); } previousValue.current = processedValue; if (!isControlled) { setInternalValue(processedValue); } onValueChange?.(processedValue, reason); }, [disabled, step, min, max, continuous, isControlled, onValueChange], ); const handleValueCommitted = React.useCallback( (committedValue: number) => { if (disabled) return; onValueCommitted?.(committedValue); }, [disabled, onValueCommitted], ); const handlePointerDown = React.useCallback( (e: React.PointerEvent) => { if (disabled) return; // `currentTarget` is always the root div; no element ref needed. const container = e.currentTarget; const newValue = getValueFromPointerPosition( e, container, min, max, startAngle, direction, continuous, ); previousValue.current = value; setIsDragging(true); (e.target as HTMLElement).setPointerCapture(e.pointerId); // Move focus to the hidden input so arrow keys work right after a // pointer interaction. `preventDefault` stops the compatibility // mousedown's native focus action from undoing it a moment later; // `focusFromPointer` keeps the focus ring hidden for this path (see the // input's onFocus). e.preventDefault(); focusFromPointer.current = true; inputRef.current?.focus({ preventScroll: true }); handleValueChange(newValue, "drag"); }, [ disabled, value, min, max, startAngle, direction, continuous, handleValueChange, ], ); const handlePointerMove = React.useCallback( (e: React.PointerEvent) => { if (!isDragging || disabled) return; const container = e.currentTarget; const newValue = getValueFromPointerPosition( e, container, min, max, startAngle, direction, continuous, ); handleValueChange(newValue, "drag"); }, [ isDragging, disabled, min, max, startAngle, direction, continuous, handleValueChange, ], ); const handlePointerUp = React.useCallback( (e: React.PointerEvent) => { if (!isDragging) return; setIsDragging(false); // Guarded: on the cancel/lost-capture paths capture may already be gone, // and releasing an inactive pointer throws `NotFoundError`. const target = e.target as HTMLElement; if (target.hasPointerCapture(e.pointerId)) { target.releasePointerCapture(e.pointerId); } handleValueCommitted(value); }, [isDragging, value, handleValueCommitted], ); const handleInputChange = React.useCallback( (e: React.ChangeEvent) => { previousValue.current = value; handleValueChange(parseFloat(e.target.value), "keyboard"); }, [value, handleValueChange], ); // Only PageUp/PageDown need handling — arrows, Home, End are native range input behavior. const handleInputKeyDown = React.useCallback( (e: React.KeyboardEvent) => { if (disabled) return; // Keyboard use while focused = keyboard modality: show the ring even if // focus originally arrived via pointer (mirrors :focus-visible). setIsFocused(true); previousValue.current = value; if (e.key === "PageUp") { e.preventDefault(); handleValueChange(value + largeStep, "keyboard"); } else if (e.key === "PageDown") { e.preventDefault(); handleValueChange(value - largeStep, "keyboard"); } }, [disabled, value, largeStep, handleValueChange], ); const contextValue: CircularSliderContextValue = React.useMemo( () => ({ value, min, max, step, startAngle, direction, continuous, disabled, size, variant: variant ?? "default", isDragging, isFocused, handleValueChange, handleValueCommitted, }), [ value, min, max, step, startAngle, direction, continuous, disabled, size, variant, isDragging, isFocused, handleValueChange, handleValueCommitted, ], ); const defaultProps = { "data-slot": SLOT_NAMES.ROOT, "data-size": size, "data-variant": variant, "data-dragging": isDragging || undefined, "data-disabled": disabled || undefined, "data-continuous": continuous || undefined, "data-focused": isFocused || undefined, className: cn(circularSliderVariants({ disabled }), className), style: { width: `${size}px`, height: `${size}px`, }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, // Mirror pointer-up so an OS-cancelled gesture (touch interruption, context // menu) or any lost capture still clears `isDragging` and commits — without // these, `pointerup` never fires and the drag stays stuck. `handlePointerUp`'s // `isDragging` guard makes the post-`pointerup` `lostpointercapture` a no-op. onPointerCancel: handlePointerUp, onLostPointerCapture: handlePointerUp, }; const element = useRender({ defaultTagName: "div", render, ref: forwardedRef ?? null, // Pointer handlers close over `previousValue` (a ref). mergeProps never // invokes them or reads `.current` — the React Compiler false-positive is safe. // eslint-disable-next-line react-hooks/refs props: mergeProps<"div">(defaultProps, props), }); const resolvedAriaValuetext = typeof ariaValuetext === "function" ? ariaValuetext(value) : ariaValuetext; return ( { setIsFocused(!focusFromPointer.current); focusFromPointer.current = false; }} onBlur={() => { setIsFocused(false); handleValueCommitted(value); }} disabled={disabled} name={name} id={id} required={required} form={formProp} aria-label={ariaLabel} aria-labelledby={ariaLabelledby} aria-describedby={ariaDescribedby} aria-valuetext={resolvedAriaValuetext} className="sr-only" /> {element} ); } export interface CircularSliderTrackProps extends useRender.ComponentProps<"svg"> { strokeWidth?: number; } export function CircularSliderTrack({ className, render, strokeWidth, ...props }: CircularSliderTrackProps) { const { continuous, size, variant } = useCircularSliderContext(); const svgStrokeWidth = strokeWidthToSvgUnits(strokeWidth, size); // For non-continuous mode, render 270° arc from 225° to 135° (gap at bottom) const trackArcPath = continuous ? null : describeArc( SVG_CONFIG.CENTER_X, SVG_CONFIG.CENTER_Y, RADIUS_CONFIG.TRACK, 225, 135, ); const trackElement = ( <> {variant === "filled" && ( )} {continuous ? ( ) : ( )} ); const defaultProps = createSvgOverlayProps(SLOT_NAMES.TRACK, className); const element = useRender({ defaultTagName: "svg", render, props: mergeProps<"svg">(defaultProps, { ...props, children: trackElement, }), }); return element; } export interface CircularSliderIndicatorProps extends useRender.ComponentProps<"svg"> { strokeWidth?: number; } export function CircularSliderIndicator({ className, render, strokeWidth, ...props }: CircularSliderIndicatorProps) { const { value, min, max, startAngle, direction, continuous, size, variant } = useCircularSliderContext(); const svgStrokeWidth = strokeWidthToSvgUnits(strokeWidth, size); // At max in continuous mode, a zero-length arc degenerates — use a full circle instead. const isFullCircle = continuous && value === max; let indicatorElement: React.ReactNode = null; if (isFullCircle) { indicatorElement = ( ); } else { const arcStartAngle = valueToAngle( min, min, max, startAngle, direction, continuous, ); const arcEndAngle = valueToAngle( value, min, max, startAngle, direction, continuous, ); const arcPath = describeArc( SVG_CONFIG.CENTER_X, SVG_CONFIG.CENTER_Y, RADIUS_CONFIG.TRACK, arcStartAngle, arcEndAngle, direction, ); indicatorElement = arcPath ? ( ) : null; } const defaultProps = createSvgOverlayProps( SLOT_NAMES.INDICATOR, className, false, ); const element = useRender({ defaultTagName: "svg", render, props: mergeProps<"svg">(defaultProps, { ...props, children: indicatorElement, }), }); return element; } export interface CircularSliderThumbProps extends useRender.ComponentProps<"div"> { size?: number; } export function CircularSliderThumb({ className, render, size: thumbSize = 16, ...props }: CircularSliderThumbProps) { const { value, min, max, startAngle, direction, continuous, isDragging, size: containerSize, variant, } = useCircularSliderContext(); const angle = valueToAngle( value, min, max, startAngle, direction, continuous, ); let radius = RADIUS_CONFIG.TRACK; if (variant === "filled") { const thumbSizeInSvgUnits = pixelsToSvgUnits(thumbSize, containerSize); // Center offset so the thumb's outer tip aligns with the background circle edge. radius = RADIUS_CONFIG.FILLED_BACKGROUND - thumbSizeInSvgUnits / 2; } const thumbPos = getThumbPosition( angle, radius, SVG_CONFIG.CENTER_X, SVG_CONFIG.CENTER_Y, ); const leftPercent = (thumbPos.x / SVG_CONFIG.VIEWBOX_SIZE) * 100; const topPercent = (thumbPos.y / SVG_CONFIG.VIEWBOX_SIZE) * 100; // Filled thumb is a radial line — rotate by `angle` so it points toward the center. const transform = variant === "filled" ? `translate(-50%, -50%) rotate(${angle}deg)` : "translate(-50%, -50%)"; // Dynamic sizing styles const thumbStyles: React.CSSProperties = { left: `${leftPercent}%`, top: `${topPercent}%`, transform, ...(variant === "default" ? { width: `${thumbSize}px`, height: `${thumbSize}px`, } : { width: "2px", height: `${thumbSize}px`, }), }; const defaultProps = { "data-slot": SLOT_NAMES.THUMB, className: cn(thumbVariants({ variant, dragging: isDragging }), className), style: thumbStyles, role: "presentation", "aria-hidden": true, }; const element = useRender({ defaultTagName: "div", render, props: mergeProps<"div">(defaultProps, props), }); return element; } export interface CircularSliderValueProps extends useRender.ComponentProps<"div"> { formatValue?: (value: number) => string; } export function CircularSliderValue({ className, render, formatValue: formatValueProp, ...props }: CircularSliderValueProps) { const { value } = useCircularSliderContext(); const displayValue = formatValueProp ? formatValueProp(value) : Math.round(value).toString(); const defaultProps = { "data-slot": SLOT_NAMES.VALUE, className: cn( "absolute inset-0 flex items-center justify-center font-medium tabular-nums text-sm", className, ), }; const element = useRender({ defaultTagName: "div", render, props: mergeProps<"div">(defaultProps, { ...props, children: displayValue, }), }); return element; } export interface CircularSliderMarkersProps extends useRender.ComponentProps<"svg"> { count?: number; length?: number; } export function CircularSliderMarkers({ className, render, count = 12, length, ...props }: CircularSliderMarkersProps) { const { min, max, startAngle, direction, continuous, size, variant } = useCircularSliderContext(); // Default marker length: 10px (filled) / 5px (default) const defaultLength = variant === "filled" ? 10 : 5; const markerLengthInPixels = length ?? defaultLength; const markerLengthInSvgUnits = pixelsToSvgUnits(markerLengthInPixels, size); const markers = Array.from({ length: count }, (_, i) => { const value = min + (i / count) * (max - min); const angle = valueToAngle( value, min, max, startAngle, direction, continuous, ); let outerRadius: number; let innerRadius: number; if (variant === "filled") { outerRadius = RADIUS_CONFIG.FILLED_BACKGROUND; innerRadius = RADIUS_CONFIG.FILLED_BACKGROUND - markerLengthInSvgUnits; } else { const trackInnerEdge = getTrackInnerEdge(16, size); outerRadius = trackInnerEdge; innerRadius = trackInnerEdge - markerLengthInSvgUnits; } const outerPos = getThumbPosition( angle, outerRadius, SVG_CONFIG.CENTER_X, SVG_CONFIG.CENTER_Y, ); const innerPos = getThumbPosition( angle, innerRadius, SVG_CONFIG.CENTER_X, SVG_CONFIG.CENTER_Y, ); return { value, angle, outerPos, innerPos, }; }); // Calculate dynamic marker strokeWidth: scales from md baseline (1.5 at 96px) const markerStrokeWidth = (size / 96) * 1.5; const markerElements = ( {markers.map((marker, i) => ( ))} ); const defaultProps = createSvgOverlayProps( SLOT_NAMES.MARKERS, className, false, ); const element = useRender({ defaultTagName: "svg", render, props: mergeProps<"svg">(defaultProps, { ...props, children: markerElements, }), }); return element; } 55:T1996,/** * Utility functions for circular slider angle and position calculations */ /** * Normalize an angle to 0-360 range */ export function normalizeAngle(angle: number): number { const normalized = angle % 360; return normalized < 0 ? normalized + 360 : normalized; } /** * Convert a value to an angle based on min/max range * @param value - The value to convert * @param min - Minimum value * @param max - Maximum value * @param startAngle - Starting angle in degrees (0 = top) * @param direction - Direction of rotation * @param continuous - Whether the slider is in continuous mode (360° arc) or non-continuous mode (270° arc) * @returns Angle in degrees */ export function valueToAngle( value: number, min: number, max: number, startAngle: number = 0, direction: "clockwise" | "counterclockwise" = "clockwise", continuous: boolean = true, ): number { const range = max - min; // Use 270° arc for non-continuous mode so min and max are visually separated // Use 360° arc for continuous mode (full circle) const arcDegrees = continuous ? 360 : 270; // For non-continuous mode, offset by 225° to center the gap at bottom (180°) // Gap will be from 135° to 225° (90° gap centered at 180° = bottom) const offset = continuous ? 0 : 225; const normalizedValue = ((value - min) / range) * arcDegrees; const angle = direction === "clockwise" ? startAngle + normalizedValue + offset : startAngle - normalizedValue + offset; return normalizeAngle(angle); } /** * Convert an angle to a value based on min/max range * @param angle - Angle in degrees * @param min - Minimum value * @param max - Maximum value * @param startAngle - Starting angle in degrees * @param direction - Direction of rotation * @param continuous - Whether the slider is in continuous mode (360° arc) or non-continuous mode (270° arc) * @returns The calculated value */ export function angleToValue( angle: number, min: number, max: number, startAngle: number = 0, direction: "clockwise" | "counterclockwise" = "clockwise", continuous: boolean = true, ): number { // For non-continuous mode, clamp angles that fall in the gap area if (!continuous) { const normalizedAngle = normalizeAngle(angle); // Gap is centered at 180° (bottom), spanning 135° to 225° (90° gap) if (normalizedAngle >= 135 && normalizedAngle <= 225) { // Clamp to nearest edge of the gap // 135° to 180° → clamp to 135° (max value position) // 180° to 225° → clamp to 225° (min value position) angle = normalizedAngle <= 180 ? 135 : 225; } } // For non-continuous mode, subtract the 225° offset to account for gap positioning const offset = continuous ? 0 : 225; const adjustedAngle = angle - offset; const normalizedAngle = normalizeAngle(adjustedAngle); const normalizedStart = normalizeAngle(startAngle); let diff = direction === "clockwise" ? normalizedAngle - normalizedStart : normalizedStart - normalizedAngle; if (diff < 0) diff += 360; const range = max - min; // Use 270° arc for non-continuous mode so min and max are visually separated // Use 360° arc for continuous mode (full circle) const arcDegrees = continuous ? 360 : 270; const value = min + (diff / arcDegrees) * range; return value; } /** * Calculate angle from mouse/touch position relative to circle center * @param x - X coordinate * @param y - Y coordinate * @param centerX - Circle center X * @param centerY - Circle center Y * @returns Angle in degrees (0 = top, increases clockwise) */ export function positionToAngle( x: number, y: number, centerX: number, centerY: number, ): number { const radians = Math.atan2(y - centerY, x - centerX); // Convert to degrees and adjust so 0° is at top (subtract 90°) const degrees = radians * (180 / Math.PI) + 90; return normalizeAngle(degrees); } /** * Calculate thumb position on circle based on angle * @param angle - Angle in degrees (0 = top) * @param radius - Circle radius * @param centerX - Circle center X * @param centerY - Circle center Y * @returns Object with x and y coordinates */ export function getThumbPosition( angle: number, radius: number, centerX: number = 100, centerY: number = 100, ): { x: number; y: number } { // Subtract 90° because 0° should be at top const radians = ((angle - 90) * Math.PI) / 180; // Round to 4 decimal places to avoid hydration errors from floating-point precision const round = (n: number) => Math.round(n * 10000) / 10000; return { x: round(centerX + radius * Math.cos(radians)), y: round(centerY + radius * Math.sin(radians)), }; } /** * Create SVG arc path for the indicator * @param centerX - Circle center X * @param centerY - Circle center Y * @param radius - Circle radius * @param startAngle - Start angle in degrees (0 = top) * @param endAngle - End angle in degrees * @param direction - Direction to draw the arc (clockwise or counterclockwise) * @returns SVG path string */ export function describeArc( centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number, direction: "clockwise" | "counterclockwise" = "clockwise", ): string { const start = getThumbPosition(startAngle, radius, centerX, centerY); const end = getThumbPosition(endAngle, radius, centerX, centerY); const normalizedStart = normalizeAngle(startAngle); const normalizedEnd = normalizeAngle(endAngle); let arcAngle = direction === "clockwise" ? normalizedEnd - normalizedStart : normalizedStart - normalizedEnd; if (arcAngle < 0) arcAngle += 360; const largeArcFlag = arcAngle > 180 ? 1 : 0; // Sweep flag: 1 for clockwise, 0 for counterclockwise const sweepFlag = direction === "clockwise" ? 1 : 0; if (arcAngle === 0) { return ""; } return [ "M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, sweepFlag, end.x, end.y, ].join(" "); } /** * Round a value to the nearest step * @param value - Value to round * @param step - Step size * @param min - Minimum value (for precision) * @returns Rounded value */ export function roundToStep(value: number, step: number, min: number): number { const steps = Math.round((value - min) / step); return min + steps * step; } /** * Clamp a value between min and max */ export function clamp(value: number, min: number, max: number): number { return Math.min(Math.max(value, min), max); } 56:T54f,import { cn } from "@/lib/utils"; import { SVG_CONFIG, RADIUS_CONFIG, DEFAULT_STROKE_WIDTH, } from "./svg-constants"; /** * Convert pixels to SVG viewBox units */ export function pixelsToSvgUnits( pixels: number, containerSize: number, ): number { return pixels * (SVG_CONFIG.VIEWBOX_SIZE / containerSize); } /** * Calculate the inner edge of the track based on stroke width */ export function getTrackInnerEdge( strokeWidthInPixels: number, containerSize: number, ): number { const strokeWidthInSvgUnits = pixelsToSvgUnits( strokeWidthInPixels, containerSize, ); return RADIUS_CONFIG.TRACK - strokeWidthInSvgUnits / 2; } /** * Create common props for SVG overlay elements */ export function createSvgOverlayProps( slot: string, className?: string, pointerEvents: boolean = true, ) { return { "data-slot": slot, viewBox: SVG_CONFIG.VIEWBOX_STRING, className: cn( "absolute inset-0 w-full h-full", !pointerEvents && "pointer-events-none", className, ), }; } /** * Convert strokeWidth prop (in pixels) to SVG units * Returns the converted value or default if not provided */ export function strokeWidthToSvgUnits( strokeWidth: number | undefined, size: number, ): number { const pixels = strokeWidth ?? DEFAULT_STROKE_WIDTH; return pixelsToSvgUnits(pixels, size); } 51:["$","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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L52",null,{"namespace":"@cubby-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/circular-slider/circular-slider.tsx","content":"$54","type":"registry:ui","target":"components/ui/cubby-ui/circular-slider/circular-slider.tsx"},{"path":"registry/default/circular-slider/lib/angle-calculations.ts","content":"$55","type":"registry:lib","target":"components/ui/cubby-ui/circular-slider/lib/angle-calculations.ts"},{"path":"registry/default/circular-slider/lib/pointer-utils.ts","content":"import * as React from \"react\";\nimport { positionToAngle, angleToValue } from \"./angle-calculations\";\n\n/**\n * Get the center coordinates of a circle container\n */\nexport function getCircleCenter(container: HTMLElement): {\n x: number;\n y: number;\n} {\n const rect = container.getBoundingClientRect();\n return {\n x: rect.left + rect.width / 2,\n y: rect.top + rect.height / 2,\n };\n}\n\n/**\n * Convert pointer position to slider value\n * Consolidates the angle and value calculation logic\n */\nexport function getValueFromPointerPosition(\n e: React.PointerEvent,\n container: HTMLElement,\n min: number,\n max: number,\n startAngle: number,\n direction: \"clockwise\" | \"counterclockwise\",\n continuous: boolean,\n): number {\n const { x: centerX, y: centerY } = getCircleCenter(container);\n const angle = positionToAngle(e.clientX, e.clientY, centerX, centerY);\n return angleToValue(angle, min, max, startAngle, direction, continuous);\n}\n","type":"registry:lib","target":"components/ui/cubby-ui/circular-slider/lib/pointer-utils.ts"},{"path":"registry/default/circular-slider/lib/svg-constants.ts","content":"/**\n * SVG Constants for Circular Slider\n * Centralized configuration for SVG coordinates, dimensions, and styling\n */\n\nexport const DEFAULT_STROKE_WIDTH = 16;\n\nexport const SVG_CONFIG = {\n VIEWBOX_SIZE: 200,\n CENTER_X: 100,\n CENTER_Y: 100,\n VIEWBOX_STRING: \"0 0 200 200\",\n} as const;\n\nexport const RADIUS_CONFIG = {\n TRACK: 80,\n FILLED_BACKGROUND: 90,\n} as const;\n\nexport const SLOT_NAMES = {\n ROOT: \"circular-slider\",\n TRACK: \"circular-slider-track\",\n INDICATOR: \"circular-slider-indicator\",\n THUMB: \"circular-slider-thumb\",\n VALUE: \"circular-slider-value\",\n MARKERS: \"circular-slider-markers\",\n} as const;\n\nexport const VARIANT_COLOR_MAP = {\n track: {\n default: \"stroke-border\",\n filled: \"stroke-transparent\",\n },\n indicator: {\n default: \"stroke-primary\",\n filled: \"stroke-transparent\",\n },\n} as const;\n","type":"registry:lib","target":"components/ui/cubby-ui/circular-slider/lib/svg-constants.ts"},{"path":"registry/default/circular-slider/lib/svg-utils.ts","content":"$56","type":"registry:lib","target":"components/ui/cubby-ui/circular-slider/lib/svg-utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]