react-circular-range 1.0.97 → 1.1.0

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+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.d.ts

@@ -1 +1,13 @@
-export * from './CircularRange';
+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.js

@@ -1,2 +1,154 @@
-/*! 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};
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CircularRange: () => CircularRange
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/CircularRange.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ARC_LENGTH = 113.1;
+var CircularRange = ({
+  min = 0,
+  max = 100,
+  value = 0,
+  step = 0.01,
+  onChange,
+  theme
+}) => {
+  const knobRef = (0, import_react.useRef)(null);
+  const [internalValue, setInternalValue] = (0, import_react.useState)(value);
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
+  const startY = (0, import_react.useRef)(0);
+  const startValue = (0, import_react.useRef)(0);
+  const sensitivity = 0.01;
+  (0, import_react.useEffect)(() => {
+    setInternalValue(value);
+  }, [value]);
+  const clamp = (v) => Math.min(max, Math.max(min, v));
+  const getNormalizedValue = (0, import_react.useCallback)(
+    (v) => {
+      return (v - min) / (max - min);
+    },
+    [min, max]
+  );
+  const setValue = (0, import_react.useCallback)(
+    (v) => {
+      let next = clamp(v);
+      if (step > 0) {
+        next = Math.round(next / step) * step;
+      }
+      setInternalValue(next);
+      onChange?.(next);
+    },
+    [min, max, step, onChange]
+  );
+  const handleStart = (e) => {
+    e.preventDefault();
+    setIsActive(true);
+    const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+    startY.current = clientY;
+    startValue.current = internalValue;
+  };
+  const handleMove = (e) => {
+    if (!isActive) return;
+    e.preventDefault();
+    const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+    const deltaY = startY.current - clientY;
+    const deltaValue = deltaY * sensitivity * (max - min);
+    setValue(startValue.current + deltaValue);
+  };
+  const handleEnd = () => {
+    setIsActive(false);
+  };
+  const handleDoubleClick = () => {
+    setValue((min + max) / 2);
+  };
+  (0, import_react.useEffect)(() => {
+    const el = knobRef.current;
+    if (!el) return;
+    el.addEventListener("mousedown", handleStart);
+    el.addEventListener("touchstart", handleStart);
+    document.addEventListener("mousemove", handleMove);
+    document.addEventListener("touchmove", handleMove);
+    document.addEventListener("mouseup", handleEnd);
+    document.addEventListener("touchend", handleEnd);
+    el.addEventListener("dblclick", handleDoubleClick);
+    return () => {
+      el.removeEventListener("mousedown", handleStart);
+      el.removeEventListener("touchstart", handleStart);
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("touchmove", handleMove);
+      document.removeEventListener("mouseup", handleEnd);
+      document.removeEventListener("touchend", handleEnd);
+      el.removeEventListener("dblclick", handleDoubleClick);
+    };
+  }, [handleMove, isActive]);
+  const normalized = getNormalizedValue(internalValue);
+  const rotation = normalized * 270 - 135;
+  const dashOffset = ARC_LENGTH - normalized * ARC_LENGTH;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: knobRef,
+      className: `${theme.knob} ${isActive ? theme.active : ""}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${theme.knobRing}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            className: `${theme.knobBackground}`,
+            viewBox: "0 0 60 60",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                className: `${theme.knobBackgroundPath}`,
+                d: "M 30 6 A 24 24 0 1 1 6 30",
+                strokeDasharray: ARC_LENGTH,
+                strokeDashoffset: dashOffset
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: `${theme.knobIndicator}`,
+            style: {
+              transform: `translateX(-50%) rotate(${rotation}deg)`
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: `${theme.knobCenter}`
+          }
+        )
+      ] })
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CircularRange
+});

package/dist/index.mjs

@@ -0,0 +1,132 @@
+// src/CircularRange.tsx
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ARC_LENGTH = 113.1;
+var CircularRange = ({
+  min = 0,
+  max = 100,
+  value = 0,
+  step = 0.01,
+  onChange,
+  theme
+}) => {
+  const knobRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(value);
+  const [isActive, setIsActive] = useState(false);
+  const startY = useRef(0);
+  const startValue = useRef(0);
+  const sensitivity = 0.01;
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+  const clamp = (v) => Math.min(max, Math.max(min, v));
+  const getNormalizedValue = useCallback(
+    (v) => {
+      return (v - min) / (max - min);
+    },
+    [min, max]
+  );
+  const setValue = useCallback(
+    (v) => {
+      let next = clamp(v);
+      if (step > 0) {
+        next = Math.round(next / step) * step;
+      }
+      setInternalValue(next);
+      onChange?.(next);
+    },
+    [min, max, step, onChange]
+  );
+  const handleStart = (e) => {
+    e.preventDefault();
+    setIsActive(true);
+    const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+    startY.current = clientY;
+    startValue.current = internalValue;
+  };
+  const handleMove = (e) => {
+    if (!isActive) return;
+    e.preventDefault();
+    const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+    const deltaY = startY.current - clientY;
+    const deltaValue = deltaY * sensitivity * (max - min);
+    setValue(startValue.current + deltaValue);
+  };
+  const handleEnd = () => {
+    setIsActive(false);
+  };
+  const handleDoubleClick = () => {
+    setValue((min + max) / 2);
+  };
+  useEffect(() => {
+    const el = knobRef.current;
+    if (!el) return;
+    el.addEventListener("mousedown", handleStart);
+    el.addEventListener("touchstart", handleStart);
+    document.addEventListener("mousemove", handleMove);
+    document.addEventListener("touchmove", handleMove);
+    document.addEventListener("mouseup", handleEnd);
+    document.addEventListener("touchend", handleEnd);
+    el.addEventListener("dblclick", handleDoubleClick);
+    return () => {
+      el.removeEventListener("mousedown", handleStart);
+      el.removeEventListener("touchstart", handleStart);
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("touchmove", handleMove);
+      document.removeEventListener("mouseup", handleEnd);
+      document.removeEventListener("touchend", handleEnd);
+      el.removeEventListener("dblclick", handleDoubleClick);
+    };
+  }, [handleMove, isActive]);
+  const normalized = getNormalizedValue(internalValue);
+  const rotation = normalized * 270 - 135;
+  const dashOffset = ARC_LENGTH - normalized * ARC_LENGTH;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: knobRef,
+      className: `${theme.knob} ${isActive ? theme.active : ""}`,
+      children: /* @__PURE__ */ jsxs("div", { className: `${theme.knobRing}`, children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: `${theme.knobBackground}`,
+            viewBox: "0 0 60 60",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: `${theme.knobBackgroundPath}`,
+                d: "M 30 6 A 24 24 0 1 1 6 30",
+                strokeDasharray: ARC_LENGTH,
+                strokeDashoffset: dashOffset
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${theme.knobIndicator}`,
+            style: {
+              transform: `translateX(-50%) rotate(${rotation}deg)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${theme.knobCenter}`
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  CircularRange
+};

package/package.json

@@ -1,31 +1,30 @@
 {
   "name": "react-circular-range",
-  "version": "1.0.97",
+  "version": "1.1.0",
   "description": "Simple VST-like circular slider/range.",
-  "main": "./dist/index.js",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/executable1210/react-circular-range.git"
+  },
+  "homepage": "https://github.com/executable1210/react-circular-range",
+  "author": {
+    "name": "exec",
+    "url": "https://github.com/executable1210"
+  },
+  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "sideEffects": [
-    "*.css",
-    "*.module.css"
-  ],
-  "files": [
-    "dist"
-  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.js"
+      "require": "./dist/index.cjs"
     }
   },
-  "scripts": {
-    "build": "webpack"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/executable1210/react-circular-range.git"
-  },
+  "files": [
+    "dist"
+  ],
   "keywords": [
     "slider",
     "round-slider",
@@ -35,25 +34,17 @@
     "circle-slider",
     "circe-range"
   ],
-  "author": {
-    "name": "exec",
-    "url": "https://github.com/executable1210"
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts"
   },
-  "license": "ISC",
-  "homepage": "https://github.com/executable1210/react-circular-range#readme",
   "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
+    "react": ">=16 <20",
+    "react-dom": ">=16 <20"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.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"
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   }
-}
+}

package/dist/CircularRange.d.ts

@@ -1,13 +0,0 @@
-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.js.LICENSE.txt

@@ -1,9 +0,0 @@
-/**
- * @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

@@ -1,103 +0,0 @@
-.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));
-}