react-circular-range 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";var h=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var D=(t,o)=>{for(var r in o)h(t,r,{get:o[r],enumerable:!0})},V=(t,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of S(o))!$.call(t,s)&&s!==r&&h(t,s,{get:()=>o[s],enumerable:!(n=M(o,s))||n.enumerable});return t};var z=t=>V(h({},"__esModule",{value:!0}),t);var H={};D(H,{CircularRange:()=>A});module.exports=z(H);var a=require("react");var R={};function f(t,{insertAt:o}={}){if(!t||typeof document>"u")return;let r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",o==="top"&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}f(`.knob{width:65px;height:65px;position:relative;cursor:pointer;user-select:none}.knobRing{width:100%;height:100%;border:3px solid #333;border-radius:50%;background:linear-gradient(145deg,#1a1a1a,#252525);box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 8px #0000004d;transition:border-color .2s ease,box-shadow .2s ease}.knobBackground{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:rotate(-135deg)}.knobBackgroundPath{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .1s ease-out;filter:drop-shadow(0 0 3px rgba(139,92,246,.7))}.knobIndicator{position:absolute;width:4px;height:20px;background:linear-gradient(to bottom,#8b5cf6,#c084fc);top:5px;left:50%;transform-origin:center 27.5px;transform:translate(-50%) rotate(-135deg);border-radius:2px;z-index:2;box-shadow:0 0 6px #8b5cf6cc}.knobCenter{position:absolute;width:18px;height:18px;background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 1px 1px 3px #000000b3,0 1px 2px #8b5cf64d;z-index:3}.knob:hover .knobRing{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 12px #8b5cf666}.knob:hover .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 8px #a78bfae6}.knob.active .knobRing{border-color:#a78bfa;box-shadow:inset 2px 2px 5px #0009,inset -2px -2px 5px #3c3c3c26,0 4px 16px #a78bfa80}.knob.active .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.knob.active .knobBackgroundPath{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}
|
|
1
|
+
"use strict";var h=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var D=(t,o)=>{for(var r in o)h(t,r,{get:o[r],enumerable:!0})},V=(t,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of S(o))!$.call(t,s)&&s!==r&&h(t,s,{get:()=>o[s],enumerable:!(n=M(o,s))||n.enumerable});return t};var z=t=>V(h({},"__esModule",{value:!0}),t);var H={};D(H,{CircularRange:()=>A});module.exports=z(H);var a=require("react");var R={};function f(t,{insertAt:o}={}){if(!t||typeof document>"u")return;let r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",o==="top"&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}f(`.crc-knob{width:65px;height:65px;position:relative;cursor:pointer;user-select:none}.crc-knobRing{width:100%;height:100%;border:3px solid #333;border-radius:50%;background:linear-gradient(145deg,#1a1a1a,#252525);box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 8px #0000004d;transition:border-color .2s ease,box-shadow .2s ease}.crc-knobBackground{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:rotate(-135deg)}.crc-knobBackgroundPath{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .1s ease-out;filter:drop-shadow(0 0 3px rgba(139,92,246,.7))}.crc-knobIndicator{position:absolute;width:4px;height:20px;background:linear-gradient(to bottom,#8b5cf6,#c084fc);top:5px;left:50%;transform-origin:center 27.5px;transform:translate(-50%) rotate(-135deg);border-radius:2px;z-index:2;box-shadow:0 0 6px #8b5cf6cc}.crc-knobCenter{position:absolute;width:18px;height:18px;background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 1px 1px 3px #000000b3,0 1px 2px #8b5cf64d;z-index:3}.crc-knob:hover .knobRing{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 12px #8b5cf666}.crc-knob:hover .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 8px #a78bfae6}.crc-knob.active .knobRing{border-color:#a78bfa;box-shadow:inset 2px 2px 5px #0009,inset -2px -2px 5px #3c3c3c26,0 4px 16px #a78bfa80}.crc-knob.active .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.crc-knob.active .knobBackgroundPath{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}
|
|
2
2
|
`);var i=require("react/jsx-runtime"),x=113.1,A=({min:t=0,max:o=100,value:r=0,step:n=.01,onChange:s,theme:d=R})=>{let m=(0,a.useRef)(null),[v,k]=(0,a.useState)(r),[b,g]=(0,a.useState)(!1),E=(0,a.useRef)(0),w=(0,a.useRef)(0),B=.01;(0,a.useEffect)(()=>{k(r)},[r]);let N=e=>Math.min(o,Math.max(t,e)),I=(0,a.useCallback)(e=>(e-t)/(o-t),[t,o]),y=(0,a.useCallback)(e=>{let c=N(e);n>0&&(c=Math.round(c/n)*n),k(c),s?.(c)},[t,o,n,s]),u=e=>{e.preventDefault(),g(!0);let c="touches"in e?e.touches[0].clientY:e.clientY;E.current=c,w.current=v},l=e=>{if(!b)return;e.preventDefault();let c="touches"in e?e.touches[0].clientY:e.clientY,Y=(E.current-c)*B*(o-t);y(w.current+Y)},p=()=>{g(!1)},C=()=>{y((t+o)/2)};(0,a.useEffect)(()=>{let e=m.current;if(e)return e.addEventListener("mousedown",u),e.addEventListener("touchstart",u),document.addEventListener("mousemove",l),document.addEventListener("touchmove",l),document.addEventListener("mouseup",p),document.addEventListener("touchend",p),e.addEventListener("dblclick",C),()=>{e.removeEventListener("mousedown",u),e.removeEventListener("touchstart",u),document.removeEventListener("mousemove",l),document.removeEventListener("touchmove",l),document.removeEventListener("mouseup",p),document.removeEventListener("touchend",p),e.removeEventListener("dblclick",C)}},[l,b]);let L=I(v),P=L*270-135,T=x-L*x;return(0,i.jsx)("div",{ref:m,className:`${d.knob} ${b?d.active:""}`,children:(0,i.jsxs)("div",{className:`${d.knobRing}`,children:[(0,i.jsx)("svg",{className:`${d.knobBackground}`,viewBox:"0 0 60 60",children:(0,i.jsx)("path",{className:`${d.knobBackgroundPath}`,d:"M 30 6 A 24 24 0 1 1 6 30",strokeDasharray:x,strokeDashoffset:T})}),(0,i.jsx)("div",{className:`${d.knobIndicator}`,style:{transform:`translateX(-50%) rotate(${P}deg)`}}),(0,i.jsx)("div",{className:`${d.knobCenter}`})]})})};0&&(module.exports={CircularRange});
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/CircularRange.tsx","../src/CircularRange.module.css","#style-inject:#style-inject"],"sourcesContent":["// export { CircularRange } from './CircularRange';\r\n// export type { CircularRangeProps, CircularRangeThemeProps, StyleSlots } from './CircularRange';\r\n\r\nexport * from './CircularRange';","import {\r\n useCallback,\r\n useEffect,\r\n useRef,\r\n useState,\r\n} from \"react\";\r\n\r\nimport * as styles from \"./CircularRange.module.css\";\r\n\r\nexport type StyleSlots =\r\n | 'knob'\r\n | 'knobRing'\r\n | 'knobBackground'\r\n | 'knobBackgroundPath'\r\n | 'knobIndicator'\r\n | 'knobCenter'\r\n | 'active'\r\n\r\nexport type CircularRangeThemeProps = Partial<Record<StyleSlots, string>>;\r\n\r\nexport interface CircularRangeProps {\r\n min?: number;\r\n max?: number;\r\n value?: number;\r\n step?: number;\r\n onChange?: (value: number) => void;\r\n\r\n // override styles with css module\r\n theme?: CircularRangeThemeProps;\r\n}\r\n\r\nconst ARC_LENGTH = 113.1; // 270°\r\n\r\nexport const CircularRange: React.FC<CircularRangeProps> = ({\r\n min = 0,\r\n max = 100,\r\n value = 0,\r\n step = 0.01,\r\n onChange,\r\n theme = styles\r\n}) => {\r\n const knobRef = useRef<HTMLDivElement | null>(null);\r\n\r\n const [internalValue, setInternalValue] = useState(value);\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n const startY = useRef(0);\r\n const startValue = useRef(0);\r\n const sensitivity = 0.01;\r\n useEffect(() => {\r\n setInternalValue(value);\r\n }, [value]);\r\n\r\n const clamp = (v: number) => Math.min(max, Math.max(min, v));\r\n\r\n const getNormalizedValue = useCallback(\r\n (v: number) => {\r\n return (v - min) / (max - min);\r\n },\r\n [min, max],\r\n );\r\n\r\n const setValue = useCallback(\r\n (v: number) => {\r\n let next = clamp(v);\r\n if (step > 0) {\r\n next = Math.round(next / step) * step;\r\n }\r\n setInternalValue(next);\r\n onChange?.(next);\r\n },\r\n [min, max, step, onChange],\r\n );\r\n\r\n const handleStart = (e: MouseEvent | TouchEvent) => {\r\n e.preventDefault();\r\n setIsActive(true);\r\n const clientY = \"touches\" in e ? e.touches[0].clientY : e.clientY;\r\n startY.current = clientY;\r\n startValue.current = internalValue;\r\n };\r\n\r\n const handleMove = (e: MouseEvent | TouchEvent) => {\r\n if (!isActive) return;\r\n e.preventDefault();\r\n\r\n const clientY = \"touches\" in e ? e.touches[0].clientY : e.clientY;\r\n const deltaY = startY.current - clientY;\r\n const deltaValue = deltaY * sensitivity * (max - min);\r\n\r\n setValue(startValue.current + deltaValue);\r\n };\r\n\r\n const handleEnd = () => {\r\n setIsActive(false);\r\n };\r\n\r\n const handleDoubleClick = () => {\r\n setValue((min + max) / 2);\r\n };\r\n\r\n useEffect(() => {\r\n const el = knobRef.current;\r\n if (!el) return;\r\n\r\n el.addEventListener(\"mousedown\", handleStart);\r\n el.addEventListener(\"touchstart\", handleStart);\r\n\r\n document.addEventListener(\"mousemove\", handleMove);\r\n document.addEventListener(\"touchmove\", handleMove);\r\n document.addEventListener(\"mouseup\", handleEnd);\r\n document.addEventListener(\"touchend\", handleEnd);\r\n\r\n el.addEventListener(\"dblclick\", handleDoubleClick);\r\n\r\n return () => {\r\n el.removeEventListener(\"mousedown\", handleStart);\r\n el.removeEventListener(\"touchstart\", handleStart);\r\n\r\n document.removeEventListener(\"mousemove\", handleMove);\r\n document.removeEventListener(\"touchmove\", handleMove);\r\n document.removeEventListener(\"mouseup\", handleEnd);\r\n document.removeEventListener(\"touchend\", handleEnd);\r\n\r\n el.removeEventListener(\"dblclick\", handleDoubleClick);\r\n };\r\n }, [handleMove, isActive]);\r\n\r\n const normalized = getNormalizedValue(internalValue);\r\n const rotation = normalized * 270 - 135;\r\n const dashOffset = ARC_LENGTH - normalized * ARC_LENGTH;\r\n\r\n return (\r\n <div\r\n ref={knobRef}\r\n className={`${theme.knob} ${isActive ? theme.active : \"\"}`}\r\n >\r\n <div className={`${theme.knobRing}`}>\r\n <svg\r\n className={`${theme.knobBackground}`}\r\n viewBox=\"0 0 60 60\"\r\n >\r\n <path\r\n className={`${theme.knobBackgroundPath}`}\r\n d=\"M 30 6 A 24 24 0 1 1 6 30\"\r\n strokeDasharray={ARC_LENGTH}\r\n strokeDashoffset={dashOffset}\r\n />\r\n </svg>\r\n\r\n <div\r\n className={`${theme.knobIndicator}`}\r\n style={{\r\n transform: `translateX(-50%) rotate(${rotation}deg)`,\r\n }}\r\n />\r\n\r\n <div\r\n className={`${theme.knobCenter}`}\r\n />\r\n </div>\r\n </div>\r\n );\r\n};\r\n","import styleInject from '#style-inject';styleInject(\".knob{width:65px;height:65px;position:relative;cursor:pointer;user-select:none}.knobRing{width:100%;height:100%;border:3px solid #333;border-radius:50%;background:linear-gradient(145deg,#1a1a1a,#252525);box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 8px #0000004d;transition:border-color .2s ease,box-shadow .2s ease}.knobBackground{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:rotate(-135deg)}.knobBackgroundPath{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .1s ease-out;filter:drop-shadow(0 0 3px rgba(139,92,246,.7))}.knobIndicator{position:absolute;width:4px;height:20px;background:linear-gradient(to bottom,#8b5cf6,#c084fc);top:5px;left:50%;transform-origin:center 27.5px;transform:translate(-50%) rotate(-135deg);border-radius:2px;z-index:2;box-shadow:0 0 6px #8b5cf6cc}.knobCenter{position:absolute;width:18px;height:18px;background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 1px 1px 3px #000000b3,0 1px 2px #8b5cf64d;z-index:3}.knob:hover .knobRing{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 12px #8b5cf666}.knob:hover .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 8px #a78bfae6}.knob.active .knobRing{border-color:#a78bfa;box-shadow:inset 2px 2px 5px #0009,inset -2px -2px 5px #3c3c3c26,0 4px 16px #a78bfa80}.knob.active .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.knob.active .knobBackgroundPath{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}\\n\")","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n "],"mappings":"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","names":["index_exports","__export","CircularRange","__toCommonJS","import_react","CircularRange_exports","styleInject","css","insertAt","head","style","styleInject","import_jsx_runtime","ARC_LENGTH","CircularRange","min","max","value","step","onChange","theme","CircularRange_exports","knobRef","internalValue","setInternalValue","isActive","setIsActive","startY","startValue","sensitivity","clamp","v","getNormalizedValue","setValue","next","handleStart","clientY","handleMove","deltaValue","handleEnd","handleDoubleClick","el","normalized","rotation","dashOffset"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/CircularRange.tsx","../src/CircularRange.module.css","#style-inject:#style-inject"],"sourcesContent":["// export { CircularRange } from './CircularRange';\r\n// export type { CircularRangeProps, CircularRangeThemeProps, StyleSlots } from './CircularRange';\r\n\r\nexport * from './CircularRange';","import {\r\n useCallback,\r\n useEffect,\r\n useRef,\r\n useState,\r\n} from \"react\";\r\n\r\nimport * as styles from \"./CircularRange.module.css\";\r\n\r\nexport type StyleSlots =\r\n | 'knob'\r\n | 'knobRing'\r\n | 'knobBackground'\r\n | 'knobBackgroundPath'\r\n | 'knobIndicator'\r\n | 'knobCenter'\r\n | 'active'\r\n\r\nexport type CircularRangeThemeProps = Partial<Record<StyleSlots, string>>;\r\n\r\nexport interface CircularRangeProps {\r\n min?: number;\r\n max?: number;\r\n value?: number;\r\n step?: number;\r\n onChange?: (value: number) => void;\r\n\r\n // override styles with css module\r\n theme?: CircularRangeThemeProps;\r\n}\r\n\r\nconst ARC_LENGTH = 113.1; // 270°\r\n\r\nexport const CircularRange: React.FC<CircularRangeProps> = ({\r\n min = 0,\r\n max = 100,\r\n value = 0,\r\n step = 0.01,\r\n onChange,\r\n theme = styles\r\n}) => {\r\n const knobRef = useRef<HTMLDivElement | null>(null);\r\n\r\n const [internalValue, setInternalValue] = useState(value);\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n const startY = useRef(0);\r\n const startValue = useRef(0);\r\n const sensitivity = 0.01;\r\n useEffect(() => {\r\n setInternalValue(value);\r\n }, [value]);\r\n\r\n const clamp = (v: number) => Math.min(max, Math.max(min, v));\r\n\r\n const getNormalizedValue = useCallback(\r\n (v: number) => {\r\n return (v - min) / (max - min);\r\n },\r\n [min, max],\r\n );\r\n\r\n const setValue = useCallback(\r\n (v: number) => {\r\n let next = clamp(v);\r\n if (step > 0) {\r\n next = Math.round(next / step) * step;\r\n }\r\n setInternalValue(next);\r\n onChange?.(next);\r\n },\r\n [min, max, step, onChange],\r\n );\r\n\r\n const handleStart = (e: MouseEvent | TouchEvent) => {\r\n e.preventDefault();\r\n setIsActive(true);\r\n const clientY = \"touches\" in e ? e.touches[0].clientY : e.clientY;\r\n startY.current = clientY;\r\n startValue.current = internalValue;\r\n };\r\n\r\n const handleMove = (e: MouseEvent | TouchEvent) => {\r\n if (!isActive) return;\r\n e.preventDefault();\r\n\r\n const clientY = \"touches\" in e ? e.touches[0].clientY : e.clientY;\r\n const deltaY = startY.current - clientY;\r\n const deltaValue = deltaY * sensitivity * (max - min);\r\n\r\n setValue(startValue.current + deltaValue);\r\n };\r\n\r\n const handleEnd = () => {\r\n setIsActive(false);\r\n };\r\n\r\n const handleDoubleClick = () => {\r\n setValue((min + max) / 2);\r\n };\r\n\r\n useEffect(() => {\r\n const el = knobRef.current;\r\n if (!el) return;\r\n\r\n el.addEventListener(\"mousedown\", handleStart);\r\n el.addEventListener(\"touchstart\", handleStart);\r\n\r\n document.addEventListener(\"mousemove\", handleMove);\r\n document.addEventListener(\"touchmove\", handleMove);\r\n document.addEventListener(\"mouseup\", handleEnd);\r\n document.addEventListener(\"touchend\", handleEnd);\r\n\r\n el.addEventListener(\"dblclick\", handleDoubleClick);\r\n\r\n return () => {\r\n el.removeEventListener(\"mousedown\", handleStart);\r\n el.removeEventListener(\"touchstart\", handleStart);\r\n\r\n document.removeEventListener(\"mousemove\", handleMove);\r\n document.removeEventListener(\"touchmove\", handleMove);\r\n document.removeEventListener(\"mouseup\", handleEnd);\r\n document.removeEventListener(\"touchend\", handleEnd);\r\n\r\n el.removeEventListener(\"dblclick\", handleDoubleClick);\r\n };\r\n }, [handleMove, isActive]);\r\n\r\n const normalized = getNormalizedValue(internalValue);\r\n const rotation = normalized * 270 - 135;\r\n const dashOffset = ARC_LENGTH - normalized * ARC_LENGTH;\r\n\r\n return (\r\n <div\r\n ref={knobRef}\r\n className={`${theme.knob} ${isActive ? theme.active : \"\"}`}\r\n >\r\n <div className={`${theme.knobRing}`}>\r\n <svg\r\n className={`${theme.knobBackground}`}\r\n viewBox=\"0 0 60 60\"\r\n >\r\n <path\r\n className={`${theme.knobBackgroundPath}`}\r\n d=\"M 30 6 A 24 24 0 1 1 6 30\"\r\n strokeDasharray={ARC_LENGTH}\r\n strokeDashoffset={dashOffset}\r\n />\r\n </svg>\r\n\r\n <div\r\n className={`${theme.knobIndicator}`}\r\n style={{\r\n transform: `translateX(-50%) rotate(${rotation}deg)`,\r\n }}\r\n />\r\n\r\n <div\r\n className={`${theme.knobCenter}`}\r\n />\r\n </div>\r\n </div>\r\n );\r\n};\r\n","import styleInject from '#style-inject';styleInject(\".crc-knob{width:65px;height:65px;position:relative;cursor:pointer;user-select:none}.crc-knobRing{width:100%;height:100%;border:3px solid #333;border-radius:50%;background:linear-gradient(145deg,#1a1a1a,#252525);box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 8px #0000004d;transition:border-color .2s ease,box-shadow .2s ease}.crc-knobBackground{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:rotate(-135deg)}.crc-knobBackgroundPath{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .1s ease-out;filter:drop-shadow(0 0 3px rgba(139,92,246,.7))}.crc-knobIndicator{position:absolute;width:4px;height:20px;background:linear-gradient(to bottom,#8b5cf6,#c084fc);top:5px;left:50%;transform-origin:center 27.5px;transform:translate(-50%) rotate(-135deg);border-radius:2px;z-index:2;box-shadow:0 0 6px #8b5cf6cc}.crc-knobCenter{position:absolute;width:18px;height:18px;background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 1px 1px 3px #000000b3,0 1px 2px #8b5cf64d;z-index:3}.crc-knob:hover .knobRing{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 12px #8b5cf666}.crc-knob:hover .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 8px #a78bfae6}.crc-knob.active .knobRing{border-color:#a78bfa;box-shadow:inset 2px 2px 5px #0009,inset -2px -2px 5px #3c3c3c26,0 4px 16px #a78bfa80}.crc-knob.active .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.crc-knob.active .knobBackgroundPath{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}\\n\")","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n "],"mappings":"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","names":["index_exports","__export","CircularRange","__toCommonJS","import_react","CircularRange_exports","styleInject","css","insertAt","head","style","styleInject","import_jsx_runtime","ARC_LENGTH","CircularRange","min","max","value","step","onChange","theme","CircularRange_exports","knobRef","internalValue","setInternalValue","isActive","setIsActive","startY","startValue","sensitivity","clamp","v","getNormalizedValue","setValue","next","handleStart","clientY","handleMove","deltaValue","handleEnd","handleDoubleClick","el","normalized","rotation","dashOffset"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{useCallback as R,useEffect as B,useRef as b,useState as N}from"react";var L={};function p(o,{insertAt:r}={}){if(!o||typeof document>"u")return;let n=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",r==="top"&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=o:t.appendChild(document.createTextNode(o))}p(`.knob{width:65px;height:65px;position:relative;cursor:pointer;user-select:none}.knobRing{width:100%;height:100%;border:3px solid #333;border-radius:50%;background:linear-gradient(145deg,#1a1a1a,#252525);box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 8px #0000004d;transition:border-color .2s ease,box-shadow .2s ease}.knobBackground{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:rotate(-135deg)}.knobBackgroundPath{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .1s ease-out;filter:drop-shadow(0 0 3px rgba(139,92,246,.7))}.knobIndicator{position:absolute;width:4px;height:20px;background:linear-gradient(to bottom,#8b5cf6,#c084fc);top:5px;left:50%;transform-origin:center 27.5px;transform:translate(-50%) rotate(-135deg);border-radius:2px;z-index:2;box-shadow:0 0 6px #8b5cf6cc}.knobCenter{position:absolute;width:18px;height:18px;background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 1px 1px 3px #000000b3,0 1px 2px #8b5cf64d;z-index:3}.knob:hover .knobRing{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 12px #8b5cf666}.knob:hover .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 8px #a78bfae6}.knob.active .knobRing{border-color:#a78bfa;box-shadow:inset 2px 2px 5px #0009,inset -2px -2px 5px #3c3c3c26,0 4px 16px #a78bfa80}.knob.active .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.knob.active .knobBackgroundPath{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}
|
|
1
|
+
import{useCallback as R,useEffect as B,useRef as b,useState as N}from"react";var L={};function p(o,{insertAt:r}={}){if(!o||typeof document>"u")return;let n=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",r==="top"&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=o:t.appendChild(document.createTextNode(o))}p(`.crc-knob{width:65px;height:65px;position:relative;cursor:pointer;user-select:none}.crc-knobRing{width:100%;height:100%;border:3px solid #333;border-radius:50%;background:linear-gradient(145deg,#1a1a1a,#252525);box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 8px #0000004d;transition:border-color .2s ease,box-shadow .2s ease}.crc-knobBackground{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:rotate(-135deg)}.crc-knobBackgroundPath{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .1s ease-out;filter:drop-shadow(0 0 3px rgba(139,92,246,.7))}.crc-knobIndicator{position:absolute;width:4px;height:20px;background:linear-gradient(to bottom,#8b5cf6,#c084fc);top:5px;left:50%;transform-origin:center 27.5px;transform:translate(-50%) rotate(-135deg);border-radius:2px;z-index:2;box-shadow:0 0 6px #8b5cf6cc}.crc-knobCenter{position:absolute;width:18px;height:18px;background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 1px 1px 3px #000000b3,0 1px 2px #8b5cf64d;z-index:3}.crc-knob:hover .knobRing{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 12px #8b5cf666}.crc-knob:hover .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 8px #a78bfae6}.crc-knob.active .knobRing{border-color:#a78bfa;box-shadow:inset 2px 2px 5px #0009,inset -2px -2px 5px #3c3c3c26,0 4px 16px #a78bfa80}.crc-knob.active .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.crc-knob.active .knobBackgroundPath{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}
|
|
2
2
|
`);import{jsx as i,jsxs as $}from"react/jsx-runtime";var h=113.1,H=({min:o=0,max:r=100,value:n=0,step:t=.01,onChange:f,theme:s=L})=>{let x=b(null),[m,v]=N(n),[u,k]=N(!1),g=b(0),E=b(0),I=.01;B(()=>{v(n)},[n]);let P=e=>Math.min(r,Math.max(o,e)),T=R(e=>(e-o)/(r-o),[o,r]),w=R(e=>{let a=P(e);t>0&&(a=Math.round(a/t)*t),v(a),f?.(a)},[o,r,t,f]),d=e=>{e.preventDefault(),k(!0);let a="touches"in e?e.touches[0].clientY:e.clientY;g.current=a,E.current=m},c=e=>{if(!u)return;e.preventDefault();let a="touches"in e?e.touches[0].clientY:e.clientY,S=(g.current-a)*I*(r-o);w(E.current+S)},l=()=>{k(!1)},y=()=>{w((o+r)/2)};B(()=>{let e=x.current;if(e)return e.addEventListener("mousedown",d),e.addEventListener("touchstart",d),document.addEventListener("mousemove",c),document.addEventListener("touchmove",c),document.addEventListener("mouseup",l),document.addEventListener("touchend",l),e.addEventListener("dblclick",y),()=>{e.removeEventListener("mousedown",d),e.removeEventListener("touchstart",d),document.removeEventListener("mousemove",c),document.removeEventListener("touchmove",c),document.removeEventListener("mouseup",l),document.removeEventListener("touchend",l),e.removeEventListener("dblclick",y)}},[c,u]);let C=T(m),Y=C*270-135,M=h-C*h;return i("div",{ref:x,className:`${s.knob} ${u?s.active:""}`,children:$("div",{className:`${s.knobRing}`,children:[i("svg",{className:`${s.knobBackground}`,viewBox:"0 0 60 60",children:i("path",{className:`${s.knobBackgroundPath}`,d:"M 30 6 A 24 24 0 1 1 6 30",strokeDasharray:h,strokeDashoffset:M})}),i("div",{className:`${s.knobIndicator}`,style:{transform:`translateX(-50%) rotate(${Y}deg)`}}),i("div",{className:`${s.knobCenter}`})]})})};export{H as CircularRange};
|
|
3
3
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/CircularRange.tsx","../src/CircularRange.module.css","#style-inject:#style-inject"],"sourcesContent":["import {\r\n useCallback,\r\n useEffect,\r\n useRef,\r\n useState,\r\n} from \"react\";\r\n\r\nimport * as styles from \"./CircularRange.module.css\";\r\n\r\nexport type StyleSlots =\r\n | 'knob'\r\n | 'knobRing'\r\n | 'knobBackground'\r\n | 'knobBackgroundPath'\r\n | 'knobIndicator'\r\n | 'knobCenter'\r\n | 'active'\r\n\r\nexport type CircularRangeThemeProps = Partial<Record<StyleSlots, string>>;\r\n\r\nexport interface CircularRangeProps {\r\n min?: number;\r\n max?: number;\r\n value?: number;\r\n step?: number;\r\n onChange?: (value: number) => void;\r\n\r\n // override styles with css module\r\n theme?: CircularRangeThemeProps;\r\n}\r\n\r\nconst ARC_LENGTH = 113.1; // 270°\r\n\r\nexport const CircularRange: React.FC<CircularRangeProps> = ({\r\n min = 0,\r\n max = 100,\r\n value = 0,\r\n step = 0.01,\r\n onChange,\r\n theme = styles\r\n}) => {\r\n const knobRef = useRef<HTMLDivElement | null>(null);\r\n\r\n const [internalValue, setInternalValue] = useState(value);\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n const startY = useRef(0);\r\n const startValue = useRef(0);\r\n const sensitivity = 0.01;\r\n useEffect(() => {\r\n setInternalValue(value);\r\n }, [value]);\r\n\r\n const clamp = (v: number) => Math.min(max, Math.max(min, v));\r\n\r\n const getNormalizedValue = useCallback(\r\n (v: number) => {\r\n return (v - min) / (max - min);\r\n },\r\n [min, max],\r\n );\r\n\r\n const setValue = useCallback(\r\n (v: number) => {\r\n let next = clamp(v);\r\n if (step > 0) {\r\n next = Math.round(next / step) * step;\r\n }\r\n setInternalValue(next);\r\n onChange?.(next);\r\n },\r\n [min, max, step, onChange],\r\n );\r\n\r\n const handleStart = (e: MouseEvent | TouchEvent) => {\r\n e.preventDefault();\r\n setIsActive(true);\r\n const clientY = \"touches\" in e ? e.touches[0].clientY : e.clientY;\r\n startY.current = clientY;\r\n startValue.current = internalValue;\r\n };\r\n\r\n const handleMove = (e: MouseEvent | TouchEvent) => {\r\n if (!isActive) return;\r\n e.preventDefault();\r\n\r\n const clientY = \"touches\" in e ? e.touches[0].clientY : e.clientY;\r\n const deltaY = startY.current - clientY;\r\n const deltaValue = deltaY * sensitivity * (max - min);\r\n\r\n setValue(startValue.current + deltaValue);\r\n };\r\n\r\n const handleEnd = () => {\r\n setIsActive(false);\r\n };\r\n\r\n const handleDoubleClick = () => {\r\n setValue((min + max) / 2);\r\n };\r\n\r\n useEffect(() => {\r\n const el = knobRef.current;\r\n if (!el) return;\r\n\r\n el.addEventListener(\"mousedown\", handleStart);\r\n el.addEventListener(\"touchstart\", handleStart);\r\n\r\n document.addEventListener(\"mousemove\", handleMove);\r\n document.addEventListener(\"touchmove\", handleMove);\r\n document.addEventListener(\"mouseup\", handleEnd);\r\n document.addEventListener(\"touchend\", handleEnd);\r\n\r\n el.addEventListener(\"dblclick\", handleDoubleClick);\r\n\r\n return () => {\r\n el.removeEventListener(\"mousedown\", handleStart);\r\n el.removeEventListener(\"touchstart\", handleStart);\r\n\r\n document.removeEventListener(\"mousemove\", handleMove);\r\n document.removeEventListener(\"touchmove\", handleMove);\r\n document.removeEventListener(\"mouseup\", handleEnd);\r\n document.removeEventListener(\"touchend\", handleEnd);\r\n\r\n el.removeEventListener(\"dblclick\", handleDoubleClick);\r\n };\r\n }, [handleMove, isActive]);\r\n\r\n const normalized = getNormalizedValue(internalValue);\r\n const rotation = normalized * 270 - 135;\r\n const dashOffset = ARC_LENGTH - normalized * ARC_LENGTH;\r\n\r\n return (\r\n <div\r\n ref={knobRef}\r\n className={`${theme.knob} ${isActive ? theme.active : \"\"}`}\r\n >\r\n <div className={`${theme.knobRing}`}>\r\n <svg\r\n className={`${theme.knobBackground}`}\r\n viewBox=\"0 0 60 60\"\r\n >\r\n <path\r\n className={`${theme.knobBackgroundPath}`}\r\n d=\"M 30 6 A 24 24 0 1 1 6 30\"\r\n strokeDasharray={ARC_LENGTH}\r\n strokeDashoffset={dashOffset}\r\n />\r\n </svg>\r\n\r\n <div\r\n className={`${theme.knobIndicator}`}\r\n style={{\r\n transform: `translateX(-50%) rotate(${rotation}deg)`,\r\n }}\r\n />\r\n\r\n <div\r\n className={`${theme.knobCenter}`}\r\n />\r\n </div>\r\n </div>\r\n );\r\n};\r\n","import styleInject from '#style-inject';styleInject(\".knob{width:65px;height:65px;position:relative;cursor:pointer;user-select:none}.knobRing{width:100%;height:100%;border:3px solid #333;border-radius:50%;background:linear-gradient(145deg,#1a1a1a,#252525);box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 8px #0000004d;transition:border-color .2s ease,box-shadow .2s ease}.knobBackground{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:rotate(-135deg)}.knobBackgroundPath{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .1s ease-out;filter:drop-shadow(0 0 3px rgba(139,92,246,.7))}.knobIndicator{position:absolute;width:4px;height:20px;background:linear-gradient(to bottom,#8b5cf6,#c084fc);top:5px;left:50%;transform-origin:center 27.5px;transform:translate(-50%) rotate(-135deg);border-radius:2px;z-index:2;box-shadow:0 0 6px #8b5cf6cc}.knobCenter{position:absolute;width:18px;height:18px;background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 1px 1px 3px #000000b3,0 1px 2px #8b5cf64d;z-index:3}.knob:hover .knobRing{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 12px #8b5cf666}.knob:hover .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 8px #a78bfae6}.knob.active .knobRing{border-color:#a78bfa;box-shadow:inset 2px 2px 5px #0009,inset -2px -2px 5px #3c3c3c26,0 4px 16px #a78bfa80}.knob.active .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.knob.active .knobBackgroundPath{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}\\n\")","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n "],"mappings":"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","names":["useCallback","useEffect","useRef","useState","CircularRange_exports","styleInject","css","insertAt","head","style","styleInject","jsx","jsxs","ARC_LENGTH","CircularRange","min","max","value","step","onChange","theme","CircularRange_exports","knobRef","useRef","internalValue","setInternalValue","useState","isActive","setIsActive","startY","startValue","sensitivity","useEffect","clamp","v","getNormalizedValue","useCallback","setValue","next","handleStart","clientY","handleMove","deltaValue","handleEnd","handleDoubleClick","el","normalized","rotation","dashOffset"]}
|
|
1
|
+
{"version":3,"sources":["../src/CircularRange.tsx","../src/CircularRange.module.css","#style-inject:#style-inject"],"sourcesContent":["import {\r\n useCallback,\r\n useEffect,\r\n useRef,\r\n useState,\r\n} from \"react\";\r\n\r\nimport * as styles from \"./CircularRange.module.css\";\r\n\r\nexport type StyleSlots =\r\n | 'knob'\r\n | 'knobRing'\r\n | 'knobBackground'\r\n | 'knobBackgroundPath'\r\n | 'knobIndicator'\r\n | 'knobCenter'\r\n | 'active'\r\n\r\nexport type CircularRangeThemeProps = Partial<Record<StyleSlots, string>>;\r\n\r\nexport interface CircularRangeProps {\r\n min?: number;\r\n max?: number;\r\n value?: number;\r\n step?: number;\r\n onChange?: (value: number) => void;\r\n\r\n // override styles with css module\r\n theme?: CircularRangeThemeProps;\r\n}\r\n\r\nconst ARC_LENGTH = 113.1; // 270°\r\n\r\nexport const CircularRange: React.FC<CircularRangeProps> = ({\r\n min = 0,\r\n max = 100,\r\n value = 0,\r\n step = 0.01,\r\n onChange,\r\n theme = styles\r\n}) => {\r\n const knobRef = useRef<HTMLDivElement | null>(null);\r\n\r\n const [internalValue, setInternalValue] = useState(value);\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n const startY = useRef(0);\r\n const startValue = useRef(0);\r\n const sensitivity = 0.01;\r\n useEffect(() => {\r\n setInternalValue(value);\r\n }, [value]);\r\n\r\n const clamp = (v: number) => Math.min(max, Math.max(min, v));\r\n\r\n const getNormalizedValue = useCallback(\r\n (v: number) => {\r\n return (v - min) / (max - min);\r\n },\r\n [min, max],\r\n );\r\n\r\n const setValue = useCallback(\r\n (v: number) => {\r\n let next = clamp(v);\r\n if (step > 0) {\r\n next = Math.round(next / step) * step;\r\n }\r\n setInternalValue(next);\r\n onChange?.(next);\r\n },\r\n [min, max, step, onChange],\r\n );\r\n\r\n const handleStart = (e: MouseEvent | TouchEvent) => {\r\n e.preventDefault();\r\n setIsActive(true);\r\n const clientY = \"touches\" in e ? e.touches[0].clientY : e.clientY;\r\n startY.current = clientY;\r\n startValue.current = internalValue;\r\n };\r\n\r\n const handleMove = (e: MouseEvent | TouchEvent) => {\r\n if (!isActive) return;\r\n e.preventDefault();\r\n\r\n const clientY = \"touches\" in e ? e.touches[0].clientY : e.clientY;\r\n const deltaY = startY.current - clientY;\r\n const deltaValue = deltaY * sensitivity * (max - min);\r\n\r\n setValue(startValue.current + deltaValue);\r\n };\r\n\r\n const handleEnd = () => {\r\n setIsActive(false);\r\n };\r\n\r\n const handleDoubleClick = () => {\r\n setValue((min + max) / 2);\r\n };\r\n\r\n useEffect(() => {\r\n const el = knobRef.current;\r\n if (!el) return;\r\n\r\n el.addEventListener(\"mousedown\", handleStart);\r\n el.addEventListener(\"touchstart\", handleStart);\r\n\r\n document.addEventListener(\"mousemove\", handleMove);\r\n document.addEventListener(\"touchmove\", handleMove);\r\n document.addEventListener(\"mouseup\", handleEnd);\r\n document.addEventListener(\"touchend\", handleEnd);\r\n\r\n el.addEventListener(\"dblclick\", handleDoubleClick);\r\n\r\n return () => {\r\n el.removeEventListener(\"mousedown\", handleStart);\r\n el.removeEventListener(\"touchstart\", handleStart);\r\n\r\n document.removeEventListener(\"mousemove\", handleMove);\r\n document.removeEventListener(\"touchmove\", handleMove);\r\n document.removeEventListener(\"mouseup\", handleEnd);\r\n document.removeEventListener(\"touchend\", handleEnd);\r\n\r\n el.removeEventListener(\"dblclick\", handleDoubleClick);\r\n };\r\n }, [handleMove, isActive]);\r\n\r\n const normalized = getNormalizedValue(internalValue);\r\n const rotation = normalized * 270 - 135;\r\n const dashOffset = ARC_LENGTH - normalized * ARC_LENGTH;\r\n\r\n return (\r\n <div\r\n ref={knobRef}\r\n className={`${theme.knob} ${isActive ? theme.active : \"\"}`}\r\n >\r\n <div className={`${theme.knobRing}`}>\r\n <svg\r\n className={`${theme.knobBackground}`}\r\n viewBox=\"0 0 60 60\"\r\n >\r\n <path\r\n className={`${theme.knobBackgroundPath}`}\r\n d=\"M 30 6 A 24 24 0 1 1 6 30\"\r\n strokeDasharray={ARC_LENGTH}\r\n strokeDashoffset={dashOffset}\r\n />\r\n </svg>\r\n\r\n <div\r\n className={`${theme.knobIndicator}`}\r\n style={{\r\n transform: `translateX(-50%) rotate(${rotation}deg)`,\r\n }}\r\n />\r\n\r\n <div\r\n className={`${theme.knobCenter}`}\r\n />\r\n </div>\r\n </div>\r\n );\r\n};\r\n","import styleInject from '#style-inject';styleInject(\".crc-knob{width:65px;height:65px;position:relative;cursor:pointer;user-select:none}.crc-knobRing{width:100%;height:100%;border:3px solid #333;border-radius:50%;background:linear-gradient(145deg,#1a1a1a,#252525);box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 8px #0000004d;transition:border-color .2s ease,box-shadow .2s ease}.crc-knobBackground{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:rotate(-135deg)}.crc-knobBackgroundPath{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .1s ease-out;filter:drop-shadow(0 0 3px rgba(139,92,246,.7))}.crc-knobIndicator{position:absolute;width:4px;height:20px;background:linear-gradient(to bottom,#8b5cf6,#c084fc);top:5px;left:50%;transform-origin:center 27.5px;transform:translate(-50%) rotate(-135deg);border-radius:2px;z-index:2;box-shadow:0 0 6px #8b5cf6cc}.crc-knobCenter{position:absolute;width:18px;height:18px;background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 1px 1px 3px #000000b3,0 1px 2px #8b5cf64d;z-index:3}.crc-knob:hover .knobRing{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px #00000080,inset -2px -2px 5px #3c3c3c1a,0 4px 12px #8b5cf666}.crc-knob:hover .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 8px #a78bfae6}.crc-knob.active .knobRing{border-color:#a78bfa;box-shadow:inset 2px 2px 5px #0009,inset -2px -2px 5px #3c3c3c26,0 4px 16px #a78bfa80}.crc-knob.active .knobIndicator{background:linear-gradient(to bottom,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.crc-knob.active .knobBackgroundPath{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}\\n\")","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n "],"mappings":"AAAA,OACE,eAAAA,EACA,aAAAC,EACA,UAAAC,EACA,YAAAC,MACK,QCLP,IAAAC,EAAA,GCCyB,SAARC,EAA6BC,EAAK,CAAE,SAAAC,CAAS,EAAI,CAAC,EAAG,CAC1D,GAAI,CAACD,GAAO,OAAO,SAAa,IAAa,OAE7C,IAAME,EAAO,SAAS,MAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC,EAC/DC,EAAQ,SAAS,cAAc,OAAO,EAC5CA,EAAM,KAAO,WAETF,IAAa,OACXC,EAAK,WACPA,EAAK,aAAaC,EAAOD,EAAK,UAAU,EAK1CA,EAAK,YAAYC,CAAK,EAGpBA,EAAM,WACRA,EAAM,WAAW,QAAUH,EAE3BG,EAAM,YAAY,SAAS,eAAeH,CAAG,CAAC,CAElD,CDvB8BI,EAAY;AAAA,CAA4wD,EDyI1zD,OAKI,OAAAC,EALJ,QAAAC,MAAA,oBA1GN,IAAMC,EAAa,MAENC,EAA8C,CAAC,CAC1D,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,EACR,KAAAC,EAAO,IACP,SAAAC,EACA,MAAAC,EAAQC,CACV,IAAM,CACJ,IAAMC,EAAUC,EAA8B,IAAI,EAE5C,CAACC,EAAeC,CAAgB,EAAIC,EAAST,CAAK,EAClD,CAACU,EAAUC,CAAW,EAAIF,EAAS,EAAK,EAExCG,EAASN,EAAO,CAAC,EACjBO,EAAaP,EAAO,CAAC,EACrBQ,EAAc,IACpBC,EAAU,IAAM,CACdP,EAAiBR,CAAK,CACxB,EAAG,CAACA,CAAK,CAAC,EAEV,IAAMgB,EAASC,GAAc,KAAK,IAAIlB,EAAK,KAAK,IAAID,EAAKmB,CAAC,CAAC,EAErDC,EAAqBC,EACxBF,IACSA,EAAInB,IAAQC,EAAMD,GAE5B,CAACA,EAAKC,CAAG,CACX,EAEMqB,EAAWD,EACdF,GAAc,CACb,IAAII,EAAOL,EAAMC,CAAC,EACdhB,EAAO,IACToB,EAAO,KAAK,MAAMA,EAAOpB,CAAI,EAAIA,GAEnCO,EAAiBa,CAAI,EACrBnB,IAAWmB,CAAI,CACjB,EACA,CAACvB,EAAKC,EAAKE,EAAMC,CAAQ,CAC3B,EAEMoB,EAAe,GAA+B,CAClD,EAAE,eAAe,EACjBX,EAAY,EAAI,EAChB,IAAMY,EAAU,YAAa,EAAI,EAAE,QAAQ,CAAC,EAAE,QAAU,EAAE,QAC1DX,EAAO,QAAUW,EACjBV,EAAW,QAAUN,CACvB,EAEMiB,EAAc,GAA+B,CACjD,GAAI,CAACd,EAAU,OACf,EAAE,eAAe,EAEjB,IAAMa,EAAU,YAAa,EAAI,EAAE,QAAQ,CAAC,EAAE,QAAU,EAAE,QAEpDE,GADSb,EAAO,QAAUW,GACJT,GAAef,EAAMD,GAEjDsB,EAASP,EAAW,QAAUY,CAAU,CAC1C,EAEMC,EAAY,IAAM,CACtBf,EAAY,EAAK,CACnB,EAEMgB,EAAoB,IAAM,CAC9BP,GAAUtB,EAAMC,GAAO,CAAC,CAC1B,EAEAgB,EAAU,IAAM,CACd,IAAMa,EAAKvB,EAAQ,QACnB,GAAKuB,EAEL,OAAAA,EAAG,iBAAiB,YAAaN,CAAW,EAC5CM,EAAG,iBAAiB,aAAcN,CAAW,EAE7C,SAAS,iBAAiB,YAAaE,CAAU,EACjD,SAAS,iBAAiB,YAAaA,CAAU,EACjD,SAAS,iBAAiB,UAAWE,CAAS,EAC9C,SAAS,iBAAiB,WAAYA,CAAS,EAE/CE,EAAG,iBAAiB,WAAYD,CAAiB,EAE1C,IAAM,CACXC,EAAG,oBAAoB,YAAaN,CAAW,EAC/CM,EAAG,oBAAoB,aAAcN,CAAW,EAEhD,SAAS,oBAAoB,YAAaE,CAAU,EACpD,SAAS,oBAAoB,YAAaA,CAAU,EACpD,SAAS,oBAAoB,UAAWE,CAAS,EACjD,SAAS,oBAAoB,WAAYA,CAAS,EAElDE,EAAG,oBAAoB,WAAYD,CAAiB,CACtD,CACF,EAAG,CAACH,EAAYd,CAAQ,CAAC,EAEzB,IAAMmB,EAAaX,EAAmBX,CAAa,EAC7CuB,EAAWD,EAAa,IAAM,IAC9BE,EAAanC,EAAaiC,EAAajC,EAE7C,OACEF,EAAC,OACC,IAAKW,EACL,UAAW,GAAGF,EAAM,IAAI,IAAIO,EAAWP,EAAM,OAAS,EAAE,GAExD,SAAAR,EAAC,OAAI,UAAW,GAAGQ,EAAM,QAAQ,GAC/B,UAAAT,EAAC,OACC,UAAW,GAAGS,EAAM,cAAc,GAClC,QAAQ,YAER,SAAAT,EAAC,QACC,UAAW,GAAGS,EAAM,kBAAkB,GACtC,EAAE,4BACF,gBAAiBP,EACjB,iBAAkBmC,EACpB,EACF,EAEArC,EAAC,OACC,UAAW,GAAGS,EAAM,aAAa,GACjC,MAAO,CACL,UAAW,2BAA2B2B,CAAQ,MAChD,EACF,EAEApC,EAAC,OACC,UAAW,GAAGS,EAAM,UAAU,GAChC,GACF,EACF,CAEJ","names":["useCallback","useEffect","useRef","useState","CircularRange_exports","styleInject","css","insertAt","head","style","styleInject","jsx","jsxs","ARC_LENGTH","CircularRange","min","max","value","step","onChange","theme","CircularRange_exports","knobRef","useRef","internalValue","setInternalValue","useState","isActive","setIsActive","startY","startValue","sensitivity","useEffect","clamp","v","getNormalizedValue","useCallback","setValue","next","handleStart","clientY","handleMove","deltaValue","handleEnd","handleDoubleClick","el","normalized","rotation","dashOffset"]}
|