react-circular-range 1.0.93 → 1.0.94

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 type StyleSlots = 'knob' | 'knobRing' | 'knobBackground' | 'knobBackgroundPath' | 'knobIndicator' | 'knobCenter' | 'active';
 type CircularRangeThemeProps = Partial<Record<StyleSlots, string>>;
 interface CircularRangeProps {

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 type StyleSlots = 'knob' | 'knobRing' | 'knobBackground' | 'knobBackgroundPath' | 'knobIndicator' | 'knobCenter' | 'active';
 type CircularRangeThemeProps = Partial<Record<StyleSlots, string>>;
 interface CircularRangeProps {

package/dist/index.js

@@ -0,0 +1,2 @@
+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))}
+`);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}`})]})})};

package/dist/index.mjs

@@ -1,3 +1,2 @@
-"use client";
-import{useCallback as L,useEffect as y,useRef as b,useState as P}from"react";var C={};import{jsx as s,jsxs as D}from"react/jsx-runtime";var p=113.1,T=({min:o=0,max:r=100,value:u=0,step:i=.01,onChange:g,theme:n=C})=>{let x=b(null),[h,v]=P(u),[l,k]=P(!1),m=b(0),f=b(0),Y=.01;y(()=>{v(u)},[u]);let B=e=>Math.min(r,Math.max(o,e)),M=L(e=>(e-o)/(r-o),[o,r]),E=L(e=>{let t=B(e);i>0&&(t=Math.round(t/i)*i),v(t),g?.(t)},[o,r,i,g]),c=e=>{e.preventDefault(),k(!0);let t="touches"in e?e.touches[0].clientY:e.clientY;m.current=t,f.current=h},a=e=>{if(!l)return;e.preventDefault();let t="touches"in e?e.touches[0].clientY:e.clientY,$=(m.current-t)*Y*(r-o);E(f.current+$)},d=()=>{k(!1)},w=()=>{E((o+r)/2)};y(()=>{let e=x.current;if(e)return e.addEventListener("mousedown",c),e.addEventListener("touchstart",c),document.addEventListener("mousemove",a),document.addEventListener("touchmove",a),document.addEventListener("mouseup",d),document.addEventListener("touchend",d),e.addEventListener("dblclick",w),()=>{e.removeEventListener("mousedown",c),e.removeEventListener("touchstart",c),document.removeEventListener("mousemove",a),document.removeEventListener("touchmove",a),document.removeEventListener("mouseup",d),document.removeEventListener("touchend",d),e.removeEventListener("dblclick",w)}},[a,l]);let R=M(h),N=R*270-135,S=p-R*p;return s("div",{ref:x,className:`${n.knob} ${l?n.active:""}`,children:D("div",{className:`${n.knobRing}`,children:[s("svg",{className:`${n.knobBackground}`,viewBox:"0 0 60 60",children:s("path",{className:`${n.knobBackgroundPath}`,d:"M 30 6 A 24 24 0 1 1 6 30",strokeDasharray:p,strokeDashoffset:S})}),s("div",{className:`${n.knobIndicator}`,style:{transform:`translateX(-50%) rotate(${N}deg)`}}),s("div",{className:`${n.knobCenter}`})]})})};export{T as CircularRange};
-//# sourceMappingURL=index.mjs.map
+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))}
+`);import{jsx as i,jsxs as $}from"react/jsx-runtime";var h=113.1,j=({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{j as CircularRange};

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "react-circular-range",
-  "version": "1.0.93",
+  "version": "1.0.94",
   "description": "Simple VST-like circular slider/range.",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    },
-    "./style.css": "./dist/index.css" 
+      "require": "./dist/index.js"
+    }
   },
-  "files": ["dist"],
   "scripts": {
     "build": "tsup"
   },
@@ -41,7 +43,8 @@
   },
   "devDependencies": {
     "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   }
-}
+}

package/dist/index.cjs

@@ -1,3 +0,0 @@
-"use client";
-"use strict";var g=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var D=(o,t)=>{for(var r in t)g(o,r,{get:t[r],enumerable:!0})},V=(o,t,r,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of I(t))!T.call(o,a)&&a!==r&&g(o,a,{get:()=>t[a],enumerable:!(c=$(t,a))||c.enumerable});return o};var z=o=>V(g({},"__esModule",{value:!0}),o);var H={};D(H,{CircularRange:()=>y});module.exports=z(H);var n=require("react");var L={};var i=require("react/jsx-runtime"),x=113.1,y=({min:o=0,max:t=100,value:r=0,step:c=.01,onChange:a,theme:d=L})=>{let h=(0,n.useRef)(null),[v,k]=(0,n.useState)(r),[p,m]=(0,n.useState)(!1),f=(0,n.useRef)(0),E=(0,n.useRef)(0),P=.01;(0,n.useEffect)(()=>{k(r)},[r]);let Y=e=>Math.min(t,Math.max(o,e)),B=(0,n.useCallback)(e=>(e-o)/(t-o),[o,t]),w=(0,n.useCallback)(e=>{let s=Y(e);c>0&&(s=Math.round(s/c)*c),k(s),a?.(s)},[o,t,c,a]),l=e=>{e.preventDefault(),m(!0);let s="touches"in e?e.touches[0].clientY:e.clientY;f.current=s,E.current=v},u=e=>{if(!p)return;e.preventDefault();let s="touches"in e?e.touches[0].clientY:e.clientY,S=(f.current-s)*P*(t-o);w(E.current+S)},b=()=>{m(!1)},R=()=>{w((o+t)/2)};(0,n.useEffect)(()=>{let e=h.current;if(e)return e.addEventListener("mousedown",l),e.addEventListener("touchstart",l),document.addEventListener("mousemove",u),document.addEventListener("touchmove",u),document.addEventListener("mouseup",b),document.addEventListener("touchend",b),e.addEventListener("dblclick",R),()=>{e.removeEventListener("mousedown",l),e.removeEventListener("touchstart",l),document.removeEventListener("mousemove",u),document.removeEventListener("touchmove",u),document.removeEventListener("mouseup",b),document.removeEventListener("touchend",b),e.removeEventListener("dblclick",R)}},[u,p]);let C=B(v),M=C*270-135,N=x-C*x;return(0,i.jsx)("div",{ref:h,className:`${d.knob} ${p?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:N})}),(0,i.jsx)("div",{className:`${d.knobIndicator}`,style:{transform:`translateX(-50%) rotate(${M}deg)`}}),(0,i.jsx)("div",{className:`${d.knobCenter}`})]})})};0&&(module.exports={CircularRange});
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts","../src/CircularRange.tsx","../src/CircularRange.module.css"],"sourcesContent":["export { CircularRange } from './CircularRange';\r\nexport type { CircularRangeProps, CircularRangeThemeProps, StyleSlots } from './CircularRange';","import {\r\n  useCallback,\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n} from \"react\";\r\n\r\nimport 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",".knob {\r\n    width: 65px;\r\n    height: 65px;\r\n    position: relative;\r\n    cursor: pointer;\r\n    user-select: none;\r\n}\r\n\r\n.knobRing {\r\n    width: 100%;\r\n    height: 100%;\r\n    border: 3px solid #333;\r\n    border-radius: 50%;\r\n    background: linear-gradient(145deg, #1a1a1a, #252525);\r\n    box-shadow:\r\n            inset 2px 2px 5px rgba(0, 0, 0, 0.5),\r\n            inset -2px -2px 5px rgba(60, 60, 60, 0.1),\r\n            0 4px 8px rgba(0, 0, 0, 0.3);\r\n    transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n\r\n.knobBackground {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n    transform: rotate(-135deg);\r\n}\r\n\r\n.knobBackgroundPath {\r\n    fill: none;\r\n    stroke: #8b5cf6;\r\n    stroke-width: 3.5;\r\n    stroke-linecap: round;\r\n    stroke-dasharray: 113.1;\r\n    stroke-dashoffset: 113.1;\r\n    transition: stroke-dashoffset 0.1s ease-out;\r\n    filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.7));\r\n}\r\n\r\n.knobIndicator {\r\n    position: absolute;\r\n    width: 4px;\r\n    height: 20px;\r\n    background: linear-gradient(to bottom, #8b5cf6, #c084fc);\r\n    top: 5px;\r\n    left: 50%;\r\n    transform-origin: center 27.5px;\r\n    transform: translateX(-50%) rotate(-135deg);\r\n    border-radius: 2px;\r\n    z-index: 2;\r\n    /*transition: transform 0.05s ease-out;*/\r\n    box-shadow: 0 0 6px rgba(139, 92, 246, 0.8);\r\n}\r\n\r\n.knobCenter {\r\n    position: absolute;\r\n    width: 18px;\r\n    height: 18px;\r\n    background: radial-gradient(circle, #0a0a0a, #1a1a1a);\r\n    border-radius: 50%;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    box-shadow:\r\n            inset 1px 1px 3px rgba(0, 0, 0, 0.7),\r\n            0 1px 2px rgba(139, 92, 246, 0.3);\r\n    z-index: 3;\r\n}\r\n\r\n/* Hover states */\r\n.knob:hover .knobRing {\r\n    border-color: #8b5cf6;\r\n    box-shadow:\r\n            inset 2px 2px 5px rgba(0, 0, 0, 0.5),\r\n            inset -2px -2px 5px rgba(60, 60, 60, 0.1),\r\n            0 4px 12px rgba(139, 92, 246, 0.4);\r\n}\r\n\r\n.knob:hover .knobIndicator {\r\n    background: linear-gradient(to bottom, #a78bfa, #c084fc);\r\n    box-shadow: 0 0 8px rgba(167, 139, 250, 0.9);\r\n}\r\n\r\n.knob.active .knobRing {\r\n    border-color: #a78bfa;\r\n    box-shadow:\r\n            inset 2px 2px 5px rgba(0, 0, 0, 0.6),\r\n            inset -2px -2px 5px rgba(60, 60, 60, 0.15),\r\n            0 4px 16px rgba(167, 139, 250, 0.5);\r\n}\r\n\r\n.knob.active .knobIndicator {\r\n    background: linear-gradient(to bottom, #a78bfa, #c084fc);\r\n    box-shadow: 0 0 10px rgba(167, 139, 250, 1);\r\n}\r\n\r\n.knob.active .knobBackgroundPath {\r\n    stroke: #a78bfa;\r\n    filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.9));\r\n}"],"mappings":"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","names":["index_exports","__export","CircularRange","__toCommonJS","import_react","CircularRange_default","import_jsx_runtime","ARC_LENGTH","CircularRange","min","max","value","step","onChange","theme","CircularRange_default","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.css

@@ -1,2 +0,0 @@
-.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))}
-/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/CircularRange.module.css"],"sourcesContent":[".knob {\r\n    width: 65px;\r\n    height: 65px;\r\n    position: relative;\r\n    cursor: pointer;\r\n    user-select: none;\r\n}\r\n\r\n.knobRing {\r\n    width: 100%;\r\n    height: 100%;\r\n    border: 3px solid #333;\r\n    border-radius: 50%;\r\n    background: linear-gradient(145deg, #1a1a1a, #252525);\r\n    box-shadow:\r\n            inset 2px 2px 5px rgba(0, 0, 0, 0.5),\r\n            inset -2px -2px 5px rgba(60, 60, 60, 0.1),\r\n            0 4px 8px rgba(0, 0, 0, 0.3);\r\n    transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n\r\n.knobBackground {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n    transform: rotate(-135deg);\r\n}\r\n\r\n.knobBackgroundPath {\r\n    fill: none;\r\n    stroke: #8b5cf6;\r\n    stroke-width: 3.5;\r\n    stroke-linecap: round;\r\n    stroke-dasharray: 113.1;\r\n    stroke-dashoffset: 113.1;\r\n    transition: stroke-dashoffset 0.1s ease-out;\r\n    filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.7));\r\n}\r\n\r\n.knobIndicator {\r\n    position: absolute;\r\n    width: 4px;\r\n    height: 20px;\r\n    background: linear-gradient(to bottom, #8b5cf6, #c084fc);\r\n    top: 5px;\r\n    left: 50%;\r\n    transform-origin: center 27.5px;\r\n    transform: translateX(-50%) rotate(-135deg);\r\n    border-radius: 2px;\r\n    z-index: 2;\r\n    /*transition: transform 0.05s ease-out;*/\r\n    box-shadow: 0 0 6px rgba(139, 92, 246, 0.8);\r\n}\r\n\r\n.knobCenter {\r\n    position: absolute;\r\n    width: 18px;\r\n    height: 18px;\r\n    background: radial-gradient(circle, #0a0a0a, #1a1a1a);\r\n    border-radius: 50%;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    box-shadow:\r\n            inset 1px 1px 3px rgba(0, 0, 0, 0.7),\r\n            0 1px 2px rgba(139, 92, 246, 0.3);\r\n    z-index: 3;\r\n}\r\n\r\n/* Hover states */\r\n.knob:hover .knobRing {\r\n    border-color: #8b5cf6;\r\n    box-shadow:\r\n            inset 2px 2px 5px rgba(0, 0, 0, 0.5),\r\n            inset -2px -2px 5px rgba(60, 60, 60, 0.1),\r\n            0 4px 12px rgba(139, 92, 246, 0.4);\r\n}\r\n\r\n.knob:hover .knobIndicator {\r\n    background: linear-gradient(to bottom, #a78bfa, #c084fc);\r\n    box-shadow: 0 0 8px rgba(167, 139, 250, 0.9);\r\n}\r\n\r\n.knob.active .knobRing {\r\n    border-color: #a78bfa;\r\n    box-shadow:\r\n            inset 2px 2px 5px rgba(0, 0, 0, 0.6),\r\n            inset -2px -2px 5px rgba(60, 60, 60, 0.15),\r\n            0 4px 16px rgba(167, 139, 250, 0.5);\r\n}\r\n\r\n.knob.active .knobIndicator {\r\n    background: linear-gradient(to bottom, #a78bfa, #c084fc);\r\n    box-shadow: 0 0 10px rgba(167, 139, 250, 1);\r\n}\r\n\r\n.knob.active .knobBackgroundPath {\r\n    stroke: #a78bfa;\r\n    filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.9));\r\n}"],"mappings":"AAAA,CAAC,KACG,MAAO,KACP,OAAQ,KACR,SAAU,SACV,OAAQ,QACR,YAAa,IACjB,CAEA,CAAC,SACG,MAAO,KACP,OAAQ,KACR,OAAQ,IAAI,MAAM,KAXtB,cAYmB,IACf,WAAY,gBAAgB,MAAhB,CAAwB,OAAxB,CAAiC,SAC7C,WACQ,MAAM,IAAI,IAAI,IAAI,SAAkB,CACpC,MAAM,KAAK,KAAK,IAAI,SAAqB,CACzC,EAAE,IAAI,IAAI,UAClB,WAAY,aAAa,IAAK,IAAI,CAAE,WAAW,IAAK,IACxD,CAEA,CAAC,eACG,SAAU,SACV,IAAK,EACL,KAAM,EACN,MAAO,KACP,OAAQ,KACR,eAAgB,KAChB,UAAW,OAAO,QACtB,CAEA,CAAC,mBACG,KAAM,KACN,OAAQ,QACR,aAAc,IACd,eAAgB,MAChB,iBAAkB,MAClB,kBAAmB,MACnB,WAAY,kBAAkB,IAAK,SACnC,OAAQ,YAAY,EAAE,EAAE,IAAI,KAAK,GAAG,CAAE,EAAE,CAAE,GAAG,CAAE,IACnD,CAEA,CAAC,cACG,SAAU,SACV,MAAO,IACP,OAAQ,KACR,WAAY,gBAAgB,GAAG,MAAnB,CAA2B,OAA3B,CAAoC,SAChD,IAAK,IACL,KAAM,IACN,iBAAkB,OAAO,OACzB,UAAW,UAAW,MAAM,OAAO,SAlDvC,cAmDmB,IACf,QAAS,EAET,WAAY,EAAE,EAAE,IAAI,SACxB,CAEA,CAAC,WACG,SAAU,SACV,MAAO,KACP,OAAQ,KACR,WAAY,gBAAgB,MAAhB,CAAwB,OAAxB,CAAiC,SA7DjD,cA8DmB,IACf,IAAK,IACL,KAAM,IACN,UAAW,UAAU,IAAI,CAAE,MAC3B,WACQ,MAAM,IAAI,IAAI,IAAI,SAAkB,CACpC,EAAE,IAAI,IAAI,UAClB,QAAS,CACb,CAGA,CAzEC,IAyEI,OAAO,CAjEX,SAkEG,aAAc,QACd,WACQ,MAAM,IAAI,IAAI,IAAI,SAAkB,CACpC,MAAM,KAAK,KAAK,IAAI,SAAqB,CACzC,EAAE,IAAI,KAAK,SACvB,CAEA,CAjFC,IAiFI,OAAO,CAvCX,cAwCG,WAAY,gBAAgB,GAAG,MAAnB,CAA2B,OAA3B,CAAoC,SAChD,WAAY,EAAE,EAAE,IAAI,SACxB,CAEA,CAtFC,IAsFI,CAAC,OAAO,CA9EZ,SA+EG,aAAc,QACd,WACQ,MAAM,IAAI,IAAI,IAAI,KAAkB,CACpC,MAAM,KAAK,KAAK,IAAI,SAAsB,CAC1C,EAAE,IAAI,KAAK,SACvB,CAEA,CA9FC,IA8FI,CARC,OAQO,CApDZ,cAqDG,WAAY,gBAAgB,GAAG,MAAnB,CAA2B,OAA3B,CAAoC,SAChD,WAAY,EAAE,EAAE,KAAK,OACzB,CAEA,CAnGC,IAmGI,CAbC,OAaO,CApEZ,mBAqEG,OAAQ,QACR,OAAQ,YAAY,EAAE,EAAE,IAAI,KAAK,GAAG,CAAE,GAAG,CAAE,GAAG,CAAE,IACpD","names":[]}

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/CircularRange.tsx","../src/CircularRange.module.css"],"sourcesContent":["import {\r\n  useCallback,\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n} from \"react\";\r\n\r\nimport 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",".knob {\r\n    width: 65px;\r\n    height: 65px;\r\n    position: relative;\r\n    cursor: pointer;\r\n    user-select: none;\r\n}\r\n\r\n.knobRing {\r\n    width: 100%;\r\n    height: 100%;\r\n    border: 3px solid #333;\r\n    border-radius: 50%;\r\n    background: linear-gradient(145deg, #1a1a1a, #252525);\r\n    box-shadow:\r\n            inset 2px 2px 5px rgba(0, 0, 0, 0.5),\r\n            inset -2px -2px 5px rgba(60, 60, 60, 0.1),\r\n            0 4px 8px rgba(0, 0, 0, 0.3);\r\n    transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n\r\n.knobBackground {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n    transform: rotate(-135deg);\r\n}\r\n\r\n.knobBackgroundPath {\r\n    fill: none;\r\n    stroke: #8b5cf6;\r\n    stroke-width: 3.5;\r\n    stroke-linecap: round;\r\n    stroke-dasharray: 113.1;\r\n    stroke-dashoffset: 113.1;\r\n    transition: stroke-dashoffset 0.1s ease-out;\r\n    filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.7));\r\n}\r\n\r\n.knobIndicator {\r\n    position: absolute;\r\n    width: 4px;\r\n    height: 20px;\r\n    background: linear-gradient(to bottom, #8b5cf6, #c084fc);\r\n    top: 5px;\r\n    left: 50%;\r\n    transform-origin: center 27.5px;\r\n    transform: translateX(-50%) rotate(-135deg);\r\n    border-radius: 2px;\r\n    z-index: 2;\r\n    /*transition: transform 0.05s ease-out;*/\r\n    box-shadow: 0 0 6px rgba(139, 92, 246, 0.8);\r\n}\r\n\r\n.knobCenter {\r\n    position: absolute;\r\n    width: 18px;\r\n    height: 18px;\r\n    background: radial-gradient(circle, #0a0a0a, #1a1a1a);\r\n    border-radius: 50%;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    box-shadow:\r\n            inset 1px 1px 3px rgba(0, 0, 0, 0.7),\r\n            0 1px 2px rgba(139, 92, 246, 0.3);\r\n    z-index: 3;\r\n}\r\n\r\n/* Hover states */\r\n.knob:hover .knobRing {\r\n    border-color: #8b5cf6;\r\n    box-shadow:\r\n            inset 2px 2px 5px rgba(0, 0, 0, 0.5),\r\n            inset -2px -2px 5px rgba(60, 60, 60, 0.1),\r\n            0 4px 12px rgba(139, 92, 246, 0.4);\r\n}\r\n\r\n.knob:hover .knobIndicator {\r\n    background: linear-gradient(to bottom, #a78bfa, #c084fc);\r\n    box-shadow: 0 0 8px rgba(167, 139, 250, 0.9);\r\n}\r\n\r\n.knob.active .knobRing {\r\n    border-color: #a78bfa;\r\n    box-shadow:\r\n            inset 2px 2px 5px rgba(0, 0, 0, 0.6),\r\n            inset -2px -2px 5px rgba(60, 60, 60, 0.15),\r\n            0 4px 16px rgba(167, 139, 250, 0.5);\r\n}\r\n\r\n.knob.active .knobIndicator {\r\n    background: linear-gradient(to bottom, #a78bfa, #c084fc);\r\n    box-shadow: 0 0 10px rgba(167, 139, 250, 1);\r\n}\r\n\r\n.knob.active .knobBackgroundPath {\r\n    stroke: #a78bfa;\r\n    filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.9));\r\n}"],"mappings":"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","names":["useCallback","useEffect","useRef","useState","CircularRange_default","jsx","jsxs","ARC_LENGTH","CircularRange","min","max","value","step","onChange","theme","CircularRange_default","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"]}