react-circular-range 1.0.94 → 1.0.97

package/dist/CircularRange.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type StyleSlots = 'knob' | 'knobRing' | 'knobBackground' | 'knobBackgroundPath' | 'knobIndicator' | 'knobCenter' | 'active';
+export type CircularRangeThemeProps = Partial<Record<StyleSlots, string>>;
+export interface CircularRangeProps {
+    min?: number;
+    max?: number;
+    value?: number;
+    step?: number;
+    onChange?: (value: number) => void;
+    theme?: CircularRangeThemeProps;
+}
+export declare const CircularRange: React.FC<CircularRangeProps>;
+export {};

package/dist/index.d.ts

@@ -1,15 +1 @@
-import React from 'react';
-
-type StyleSlots = 'knob' | 'knobRing' | 'knobBackground' | 'knobBackgroundPath' | 'knobIndicator' | 'knobCenter' | 'active';
-type CircularRangeThemeProps = Partial<Record<StyleSlots, string>>;
-interface CircularRangeProps {
-    min?: number;
-    max?: number;
-    value?: number;
-    step?: number;
-    onChange?: (value: number) => void;
-    theme?: CircularRangeThemeProps;
-}
-declare const CircularRange: React.FC<CircularRangeProps>;
-
-export { CircularRange, type CircularRangeProps, type CircularRangeThemeProps, type StyleSlots };
+export * from './CircularRange';

package/dist/index.js

@@ -1,2 +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}`})]})})};
+/*! For license information please see index.js.LICENSE.txt */
+import{useCallback as e,useEffect as t,useRef as n,useState as r}from"react";var o={698(e,t){var n=Symbol.for("react.transitional.element");function r(e,t,r){var o=null;if(void 0!==r&&(o=""+r),void 0!==t.key&&(o=""+t.key),"key"in t)for(var a in r={},t)"key"!==a&&(r[a]=t[a]);else r=t;return t=r.ref,{$$typeof:n,type:e,key:o,ref:void 0!==t?t:null,props:r}}Symbol.for("react.fragment"),t.jsx=r,t.jsxs=r},848(e,t,n){e.exports=n(698)}},a={};function s(e){var t=a[e];if(void 0!==t)return t.exports;var n=a[e]={exports:{}};return o[e](n,n.exports,s),n.exports}s.d=(e,t)=>{for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var c={};s.r(c),s.d(c,{active:()=>i,knob:()=>d,knobBackground:()=>l,knobBackgroundPath:()=>m,knobCenter:()=>v,knobIndicator:()=>k,knobRing:()=>b});var u=s(848),i="CircularRange-module__active--BqXnY",d="CircularRange-module__knob--BAUKG",l="CircularRange-module__knobBackground--qxu1s",m="CircularRange-module__knobBackgroundPath--rxKDz",v="CircularRange-module__knobCenter--UIeoG",k="CircularRange-module__knobIndicator--lJKRO",b="CircularRange-module__knobRing--F6qGP";const f=113.1,g=({min:o=0,max:a=100,value:s=0,step:i=.01,onChange:d,theme:l=c})=>{const m=n(null),[v,k]=r(s),[b,g]=r(!1),h=n(0),p=n(0);t(()=>{k(s)},[s]);const y=e(e=>(e-o)/(a-o),[o,a]),x=e(e=>{let t=(e=>Math.min(a,Math.max(o,e)))(e);i>0&&(t=Math.round(t/i)*i),k(t),d?.(t)},[o,a,i,d]),_=e=>{e.preventDefault(),g(!0);const t="touches"in e?e.touches[0].clientY:e.clientY;h.current=t,p.current=v},E=e=>{if(!b)return;e.preventDefault();const t="touches"in e?e.touches[0].clientY:e.clientY,n=.01*(h.current-t)*(a-o);x(p.current+n)},L=()=>{g(!1)},j=()=>{x((o+a)/2)};t(()=>{const e=m.current;if(e)return e.addEventListener("mousedown",_),e.addEventListener("touchstart",_),document.addEventListener("mousemove",E),document.addEventListener("touchmove",E),document.addEventListener("mouseup",L),document.addEventListener("touchend",L),e.addEventListener("dblclick",j),()=>{e.removeEventListener("mousedown",_),e.removeEventListener("touchstart",_),document.removeEventListener("mousemove",E),document.removeEventListener("touchmove",E),document.removeEventListener("mouseup",L),document.removeEventListener("touchend",L),e.removeEventListener("dblclick",j)}},[E,b]);const C=y(v),R=270*C-135,$=f-C*f;return(0,u.jsx)("div",{ref:m,className:`${l.knob} ${b?l.active:""}`,children:(0,u.jsxs)("div",{className:`${l.knobRing}`,children:[(0,u.jsx)("svg",{className:`${l.knobBackground}`,viewBox:"0 0 60 60",children:(0,u.jsx)("path",{className:`${l.knobBackgroundPath}`,d:"M 30 6 A 24 24 0 1 1 6 30",strokeDasharray:f,strokeDashoffset:$})}),(0,u.jsx)("div",{className:`${l.knobIndicator}`,style:{transform:`translateX(-50%) rotate(${R}deg)`}}),(0,u.jsx)("div",{className:`${l.knobCenter}`})]})})};export{g as CircularRange};

package/dist/index.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/dist/styles.css

@@ -0,0 +1,103 @@
+.CircularRange-module__knob--BAUKG {
+    width: 65px;
+    height: 65px;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+}
+
+.CircularRange-module__knobRing--F6qGP {
+    width: 100%;
+    height: 100%;
+    border: 3px solid #333;
+    border-radius: 50%;
+    background: linear-gradient(145deg, #1a1a1a, #252525);
+    box-shadow:
+            inset 2px 2px 5px rgba(0, 0, 0, 0.5),
+            inset -2px -2px 5px rgba(60, 60, 60, 0.1),
+            0 4px 8px rgba(0, 0, 0, 0.3);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.CircularRange-module__knobBackground--qxu1s {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    transform: rotate(-135deg);
+}
+
+.CircularRange-module__knobBackgroundPath--rxKDz {
+    fill: none;
+    stroke: #8b5cf6;
+    stroke-width: 3.5;
+    stroke-linecap: round;
+    stroke-dasharray: 113.1;
+    stroke-dashoffset: 113.1;
+    transition: stroke-dashoffset 0.1s ease-out;
+    filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.7));
+}
+
+.CircularRange-module__knobIndicator--lJKRO {
+    position: absolute;
+    width: 4px;
+    height: 20px;
+    background: linear-gradient(to bottom, #8b5cf6, #c084fc);
+    top: 5px;
+    left: 50%;
+    transform-origin: center 27.5px;
+    transform: translateX(-50%) rotate(-135deg);
+    border-radius: 2px;
+    z-index: 2;
+    /*transition: transform 0.05s ease-out;*/
+    box-shadow: 0 0 6px rgba(139, 92, 246, 0.8);
+}
+
+.CircularRange-module__knobCenter--UIeoG {
+    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 rgba(0, 0, 0, 0.7),
+            0 1px 2px rgba(139, 92, 246, 0.3);
+    z-index: 3;
+}
+
+/* Hover states */
+.CircularRange-module__knob--BAUKG:hover .CircularRange-module__knobRing--F6qGP {
+    border-color: #8b5cf6;
+    box-shadow:
+            inset 2px 2px 5px rgba(0, 0, 0, 0.5),
+            inset -2px -2px 5px rgba(60, 60, 60, 0.1),
+            0 4px 12px rgba(139, 92, 246, 0.4);
+}
+
+.CircularRange-module__knob--BAUKG:hover .CircularRange-module__knobIndicator--lJKRO {
+    background: linear-gradient(to bottom, #a78bfa, #c084fc);
+    box-shadow: 0 0 8px rgba(167, 139, 250, 0.9);
+}
+
+.CircularRange-module__knob--BAUKG.CircularRange-module__active--BqXnY .CircularRange-module__knobRing--F6qGP {
+    border-color: #a78bfa;
+    box-shadow:
+            inset 2px 2px 5px rgba(0, 0, 0, 0.6),
+            inset -2px -2px 5px rgba(60, 60, 60, 0.15),
+            0 4px 16px rgba(167, 139, 250, 0.5);
+}
+
+.CircularRange-module__knob--BAUKG.CircularRange-module__active--BqXnY .CircularRange-module__knobIndicator--lJKRO {
+    background: linear-gradient(to bottom, #a78bfa, #c084fc);
+    box-shadow: 0 0 10px rgba(167, 139, 250, 1);
+}
+
+.CircularRange-module__knob--BAUKG.CircularRange-module__active--BqXnY .CircularRange-module__knobBackgroundPath--rxKDz {
+    stroke: #a78bfa;
+    filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.9));
+}

package/package.json

@@ -1,22 +1,26 @@
 {
   "name": "react-circular-range",
-  "version": "1.0.94",
+  "version": "1.0.97",
   "description": "Simple VST-like circular slider/range.",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "*.module.css"
+  ],
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "require": "./dist/index.js"
     }
   },
   "scripts": {
-    "build": "tsup"
+    "build": "webpack"
   },
   "repository": {
     "type": "git",
@@ -44,7 +48,12 @@
   "devDependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
+    "css-loader": "^7.1.2",
+    "mini-css-extract-plugin": "^2.9.4",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.9.3",
+    "webpack": "^5.104.1",
+    "webpack-cli": "^6.0.1"
   }
-}
+}

package/dist/index.d.mts

@@ -1,15 +0,0 @@
-import React from 'react';
-
-type StyleSlots = 'knob' | 'knobRing' | 'knobBackground' | 'knobBackgroundPath' | 'knobIndicator' | 'knobCenter' | 'active';
-type CircularRangeThemeProps = Partial<Record<StyleSlots, string>>;
-interface CircularRangeProps {
-    min?: number;
-    max?: number;
-    value?: number;
-    step?: number;
-    onChange?: (value: number) => void;
-    theme?: CircularRangeThemeProps;
-}
-declare const CircularRange: React.FC<CircularRangeProps>;
-
-export { CircularRange, type CircularRangeProps, type CircularRangeThemeProps, type StyleSlots };

package/dist/index.mjs

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