react-circular-range 1.0.6 → 1.0.8

package/dist/index.cjs.css

@@ -0,0 +1,2 @@
+.CircularRange-module__knob___2nLWp{cursor:pointer;height:65px;position:relative;user-select:none;width:65px}.CircularRange-module__knobRing___H-KV6{background:linear-gradient(145deg,#1a1a1a,#252525);border:3px solid #333;border-radius:50%;box-shadow:inset 2px 2px 5px rgba(0,0,0,.5),inset -2px -2px 5px rgba(60,60,60,.1),0 4px 8px rgba(0,0,0,.3);height:100%;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.CircularRange-module__knobBackground___t2lGs{height:100%;left:0;pointer-events:none;position:absolute;top:0;transform:rotate(-135deg);width:100%}.CircularRange-module__knobBackgroundPath___ySqrn{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;filter:drop-shadow(0 0 3px rgba(139,92,246,.7));transition:stroke-dashoffset .1s ease-out}.CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#8b5cf6,#c084fc);border-radius:2px;box-shadow:0 0 6px rgba(139,92,246,.8);height:20px;left:50%;position:absolute;top:5px;transform:translateX(-50%) rotate(-135deg);transform-origin:center 27.5px;width:4px;z-index:2}.CircularRange-module__knobCenter___DftjA{background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;box-shadow:inset 1px 1px 3px rgba(0,0,0,.7),0 1px 2px rgba(139,92,246,.3);height:18px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;z-index:3}.CircularRange-module__knob___2nLWp:hover .CircularRange-module__knobRing___H-KV6{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px rgba(0,0,0,.5),inset -2px -2px 5px rgba(60,60,60,.1),0 4px 12px rgba(139,92,246,.4)}.CircularRange-module__knob___2nLWp:hover .CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#a78bfa,#c084fc);box-shadow:0 0 8px rgba(167,139,250,.9)}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobRing___H-KV6{border-color:#a78bfa;box-shadow:inset 2px 2px 5px rgba(0,0,0,.6),inset -2px -2px 5px rgba(60,60,60,.15),0 4px 16px rgba(167,139,250,.5)}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobBackgroundPath___ySqrn{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}
+/*# sourceMappingURL=index.cjs.css.map */

package/dist/index.cjs.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CircularRange.module.css"],"names":[],"mappings":"AAAA,oCAII,cAAe,CAFf,WAAY,CACZ,iBAAkB,CAElB,gBAAiB,CAJjB,UAKJ,CAEA,wCAKI,kDAAqD,CAFrD,qBAAsB,CACtB,iBAAkB,CAElB,0GAGoC,CAPpC,WAAY,CAQZ,oDAAwD,CATxD,UAUJ,CAEA,8CAKI,WAAY,CAFZ,MAAO,CAGP,mBAAoB,CALpB,iBAAkB,CAClB,KAAM,CAKN,yBAA0B,CAH1B,UAIJ,CAEA,kDACI,SAAU,CACV,cAAe,CACf,gBAAiB,CACjB,oBAAqB,CACrB,sBAAuB,CACvB,uBAAwB,CAExB,+CAAoD,CADpD,yCAEJ,CAEA,6CAII,kDAAwD,CAKxD,iBAAkB,CAGlB,sCAA2C,CAT3C,WAAY,CAGZ,QAAS,CALT,iBAAkB,CAIlB,OAAQ,CAGR,0CAA2C,CAD3C,8BAA+B,CAL/B,SAAU,CAQV,SAGJ,CAEA,0CAII,kDAAqD,CACrD,iBAAkB,CAIlB,yEAEyC,CARzC,WAAY,CAIZ,QAAS,CANT,iBAAkB,CAKlB,OAAQ,CAER,8BAAgC,CANhC,UAAW,CAUX,SACJ,CAGA,kFACI,oBAAqB,CACrB,gHAIJ,CAEA,uFACI,kDAAwD,CACxD,uCACJ,CAEA,iHACI,oBAAqB,CACrB,kHAIJ,CAEA,sHACI,kDAAwD,CACxD,2BACJ,CAEA,2HACI,cAAe,CACf,gDACJ","file":"index.cjs.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}"]}

package/dist/index.cjs.js

@@ -0,0 +1,504 @@
+'use strict';
+
+require('react-circular-range/dist/CircularRange.css');
+var require$$0 = require('react');
+
+var jsxRuntime = {exports: {}};
+
+var reactJsxRuntime_production = {};
+
+/**
+ * @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.
+ */
+
+var hasRequiredReactJsxRuntime_production;
+
+function requireReactJsxRuntime_production () {
+	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
+	hasRequiredReactJsxRuntime_production = 1;
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	function jsxProd(type, config, maybeKey) {
+	  var key = null;
+	  void 0 !== maybeKey && (key = "" + maybeKey);
+	  void 0 !== config.key && (key = "" + config.key);
+	  if ("key" in config) {
+	    maybeKey = {};
+	    for (var propName in config)
+	      "key" !== propName && (maybeKey[propName] = config[propName]);
+	  } else maybeKey = config;
+	  config = maybeKey.ref;
+	  return {
+	    $$typeof: REACT_ELEMENT_TYPE,
+	    type: type,
+	    key: key,
+	    ref: void 0 !== config ? config : null,
+	    props: maybeKey
+	  };
+	}
+	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+	reactJsxRuntime_production.jsx = jsxProd;
+	reactJsxRuntime_production.jsxs = jsxProd;
+	return reactJsxRuntime_production;
+}
+
+var reactJsxRuntime_development = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.development.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.
+ */
+
+var hasRequiredReactJsxRuntime_development;
+
+function requireReactJsxRuntime_development () {
+	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+	hasRequiredReactJsxRuntime_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function getComponentNameFromType(type) {
+	      if (null == type) return null;
+	      if ("function" === typeof type)
+	        return type.$$typeof === REACT_CLIENT_REFERENCE
+	          ? null
+	          : type.displayName || type.name || null;
+	      if ("string" === typeof type) return type;
+	      switch (type) {
+	        case REACT_FRAGMENT_TYPE:
+	          return "Fragment";
+	        case REACT_PROFILER_TYPE:
+	          return "Profiler";
+	        case REACT_STRICT_MODE_TYPE:
+	          return "StrictMode";
+	        case REACT_SUSPENSE_TYPE:
+	          return "Suspense";
+	        case REACT_SUSPENSE_LIST_TYPE:
+	          return "SuspenseList";
+	        case REACT_ACTIVITY_TYPE:
+	          return "Activity";
+	      }
+	      if ("object" === typeof type)
+	        switch (
+	          ("number" === typeof type.tag &&
+	            console.error(
+	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+	            ),
+	          type.$$typeof)
+	        ) {
+	          case REACT_PORTAL_TYPE:
+	            return "Portal";
+	          case REACT_CONTEXT_TYPE:
+	            return type.displayName || "Context";
+	          case REACT_CONSUMER_TYPE:
+	            return (type._context.displayName || "Context") + ".Consumer";
+	          case REACT_FORWARD_REF_TYPE:
+	            var innerType = type.render;
+	            type = type.displayName;
+	            type ||
+	              ((type = innerType.displayName || innerType.name || ""),
+	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
+	            return type;
+	          case REACT_MEMO_TYPE:
+	            return (
+	              (innerType = type.displayName || null),
+	              null !== innerType
+	                ? innerType
+	                : getComponentNameFromType(type.type) || "Memo"
+	            );
+	          case REACT_LAZY_TYPE:
+	            innerType = type._payload;
+	            type = type._init;
+	            try {
+	              return getComponentNameFromType(type(innerType));
+	            } catch (x) {}
+	        }
+	      return null;
+	    }
+	    function testStringCoercion(value) {
+	      return "" + value;
+	    }
+	    function checkKeyStringCoercion(value) {
+	      try {
+	        testStringCoercion(value);
+	        var JSCompiler_inline_result = !1;
+	      } catch (e) {
+	        JSCompiler_inline_result = true;
+	      }
+	      if (JSCompiler_inline_result) {
+	        JSCompiler_inline_result = console;
+	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
+	        var JSCompiler_inline_result$jscomp$0 =
+	          ("function" === typeof Symbol &&
+	            Symbol.toStringTag &&
+	            value[Symbol.toStringTag]) ||
+	          value.constructor.name ||
+	          "Object";
+	        JSCompiler_temp_const.call(
+	          JSCompiler_inline_result,
+	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+	          JSCompiler_inline_result$jscomp$0
+	        );
+	        return testStringCoercion(value);
+	      }
+	    }
+	    function getTaskName(type) {
+	      if (type === REACT_FRAGMENT_TYPE) return "<>";
+	      if (
+	        "object" === typeof type &&
+	        null !== type &&
+	        type.$$typeof === REACT_LAZY_TYPE
+	      )
+	        return "<...>";
+	      try {
+	        var name = getComponentNameFromType(type);
+	        return name ? "<" + name + ">" : "<...>";
+	      } catch (x) {
+	        return "<...>";
+	      }
+	    }
+	    function getOwner() {
+	      var dispatcher = ReactSharedInternals.A;
+	      return null === dispatcher ? null : dispatcher.getOwner();
+	    }
+	    function UnknownOwner() {
+	      return Error("react-stack-top-frame");
+	    }
+	    function hasValidKey(config) {
+	      if (hasOwnProperty.call(config, "key")) {
+	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
+	        if (getter && getter.isReactWarning) return false;
+	      }
+	      return void 0 !== config.key;
+	    }
+	    function defineKeyPropWarningGetter(props, displayName) {
+	      function warnAboutAccessingKey() {
+	        specialPropKeyWarningShown ||
+	          ((specialPropKeyWarningShown = true),
+	          console.error(
+	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+	            displayName
+	          ));
+	      }
+	      warnAboutAccessingKey.isReactWarning = true;
+	      Object.defineProperty(props, "key", {
+	        get: warnAboutAccessingKey,
+	        configurable: true
+	      });
+	    }
+	    function elementRefGetterWithDeprecationWarning() {
+	      var componentName = getComponentNameFromType(this.type);
+	      didWarnAboutElementRef[componentName] ||
+	        ((didWarnAboutElementRef[componentName] = true),
+	        console.error(
+	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+	        ));
+	      componentName = this.props.ref;
+	      return void 0 !== componentName ? componentName : null;
+	    }
+	    function ReactElement(type, key, props, owner, debugStack, debugTask) {
+	      var refProp = props.ref;
+	      type = {
+	        $$typeof: REACT_ELEMENT_TYPE,
+	        type: type,
+	        key: key,
+	        props: props,
+	        _owner: owner
+	      };
+	      null !== (void 0 !== refProp ? refProp : null)
+	        ? Object.defineProperty(type, "ref", {
+	            enumerable: false,
+	            get: elementRefGetterWithDeprecationWarning
+	          })
+	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
+	      type._store = {};
+	      Object.defineProperty(type._store, "validated", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: 0
+	      });
+	      Object.defineProperty(type, "_debugInfo", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: null
+	      });
+	      Object.defineProperty(type, "_debugStack", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugStack
+	      });
+	      Object.defineProperty(type, "_debugTask", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugTask
+	      });
+	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
+	      return type;
+	    }
+	    function jsxDEVImpl(
+	      type,
+	      config,
+	      maybeKey,
+	      isStaticChildren,
+	      debugStack,
+	      debugTask
+	    ) {
+	      var children = config.children;
+	      if (void 0 !== children)
+	        if (isStaticChildren)
+	          if (isArrayImpl(children)) {
+	            for (
+	              isStaticChildren = 0;
+	              isStaticChildren < children.length;
+	              isStaticChildren++
+	            )
+	              validateChildKeys(children[isStaticChildren]);
+	            Object.freeze && Object.freeze(children);
+	          } else
+	            console.error(
+	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+	            );
+	        else validateChildKeys(children);
+	      if (hasOwnProperty.call(config, "key")) {
+	        children = getComponentNameFromType(type);
+	        var keys = Object.keys(config).filter(function (k) {
+	          return "key" !== k;
+	        });
+	        isStaticChildren =
+	          0 < keys.length
+	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
+	            : "{key: someKey}";
+	        didWarnAboutKeySpread[children + isStaticChildren] ||
+	          ((keys =
+	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
+	          console.error(
+	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
+	            isStaticChildren,
+	            children,
+	            keys,
+	            children
+	          ),
+	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
+	      }
+	      children = null;
+	      void 0 !== maybeKey &&
+	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
+	      hasValidKey(config) &&
+	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
+	      if ("key" in config) {
+	        maybeKey = {};
+	        for (var propName in config)
+	          "key" !== propName && (maybeKey[propName] = config[propName]);
+	      } else maybeKey = config;
+	      children &&
+	        defineKeyPropWarningGetter(
+	          maybeKey,
+	          "function" === typeof type
+	            ? type.displayName || type.name || "Unknown"
+	            : type
+	        );
+	      return ReactElement(
+	        type,
+	        children,
+	        maybeKey,
+	        getOwner(),
+	        debugStack,
+	        debugTask
+	      );
+	    }
+	    function validateChildKeys(node) {
+	      isValidElement(node)
+	        ? node._store && (node._store.validated = 1)
+	        : "object" === typeof node &&
+	          null !== node &&
+	          node.$$typeof === REACT_LAZY_TYPE &&
+	          ("fulfilled" === node._payload.status
+	            ? isValidElement(node._payload.value) &&
+	              node._payload.value._store &&
+	              (node._payload.value._store.validated = 1)
+	            : node._store && (node._store.validated = 1));
+	    }
+	    function isValidElement(object) {
+	      return (
+	        "object" === typeof object &&
+	        null !== object &&
+	        object.$$typeof === REACT_ELEMENT_TYPE
+	      );
+	    }
+	    var React = require$$0,
+	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
+	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
+	      ReactSharedInternals =
+	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+	      hasOwnProperty = Object.prototype.hasOwnProperty,
+	      isArrayImpl = Array.isArray,
+	      createTask = console.createTask
+	        ? console.createTask
+	        : function () {
+	            return null;
+	          };
+	    React = {
+	      react_stack_bottom_frame: function (callStackForError) {
+	        return callStackForError();
+	      }
+	    };
+	    var specialPropKeyWarningShown;
+	    var didWarnAboutElementRef = {};
+	    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
+	      React,
+	      UnknownOwner
+	    )();
+	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+	    var didWarnAboutKeySpread = {};
+	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+	    reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        false,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        true,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	  })();
+	return reactJsxRuntime_development;
+}
+
+var hasRequiredJsxRuntime;
+
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+	hasRequiredJsxRuntime = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  jsxRuntime.exports = requireReactJsxRuntime_production();
+	} else {
+	  jsxRuntime.exports = requireReactJsxRuntime_development();
+	}
+	return jsxRuntime.exports;
+}
+
+var jsxRuntimeExports = requireJsxRuntime();
+
+var styles = {"knob":"CircularRange-module__knob___2nLWp","knobRing":"CircularRange-module__knobRing___H-KV6","knobBackground":"CircularRange-module__knobBackground___t2lGs","knobBackgroundPath":"CircularRange-module__knobBackgroundPath___ySqrn","knobIndicator":"CircularRange-module__knobIndicator___FxbT4","knobCenter":"CircularRange-module__knobCenter___DftjA","active":"CircularRange-module__active___SFotz"};
+
+const ARC_LENGTH = 113.1; // 270°
+const CircularRange = ({ min = 0, max = 100, value = 0, step = 0.01, onChange, theme = styles }) => {
+    const knobRef = require$$0.useRef(null);
+    const [internalValue, setInternalValue] = require$$0.useState(value);
+    const [isActive, setIsActive] = require$$0.useState(false);
+    const startY = require$$0.useRef(0);
+    const startValue = require$$0.useRef(0);
+    const sensitivity = 0.01;
+    require$$0.useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
+    const clamp = (v) => Math.min(max, Math.max(min, v));
+    const getNormalizedValue = require$$0.useCallback((v) => {
+        return (v - min) / (max - min);
+    }, [min, max]);
+    const setValue = require$$0.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);
+    };
+    require$$0.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 (jsxRuntimeExports.jsx("div", { ref: knobRef, className: `${theme.knob} ${isActive ? theme.active : ""}`, children: jsxRuntimeExports.jsxs("div", { className: `${theme.knobRing}`, children: [jsxRuntimeExports.jsx("svg", { className: `${theme.knobBackground}`, viewBox: "0 0 60 60", children: jsxRuntimeExports.jsx("path", { className: `${theme.knobBackgroundPath}`, d: "M 30 6 A 24 24 0 1 1 6 30", strokeDasharray: ARC_LENGTH, strokeDashoffset: dashOffset }) }), jsxRuntimeExports.jsx("div", { className: `${theme.knobIndicator}`, style: {
+                        transform: `translateX(-50%) rotate(${rotation}deg)`,
+                    } }), jsxRuntimeExports.jsx("div", { className: `${theme.knobCenter}` })] }) }));
+};
+
+exports.CircularRange = CircularRange;

package/dist/index.esm.css

@@ -0,0 +1,2 @@
+.CircularRange-module__knob___2nLWp{cursor:pointer;height:65px;position:relative;user-select:none;width:65px}.CircularRange-module__knobRing___H-KV6{background:linear-gradient(145deg,#1a1a1a,#252525);border:3px solid #333;border-radius:50%;box-shadow:inset 2px 2px 5px rgba(0,0,0,.5),inset -2px -2px 5px rgba(60,60,60,.1),0 4px 8px rgba(0,0,0,.3);height:100%;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.CircularRange-module__knobBackground___t2lGs{height:100%;left:0;pointer-events:none;position:absolute;top:0;transform:rotate(-135deg);width:100%}.CircularRange-module__knobBackgroundPath___ySqrn{fill:none;stroke:#8b5cf6;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;filter:drop-shadow(0 0 3px rgba(139,92,246,.7));transition:stroke-dashoffset .1s ease-out}.CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#8b5cf6,#c084fc);border-radius:2px;box-shadow:0 0 6px rgba(139,92,246,.8);height:20px;left:50%;position:absolute;top:5px;transform:translateX(-50%) rotate(-135deg);transform-origin:center 27.5px;width:4px;z-index:2}.CircularRange-module__knobCenter___DftjA{background:radial-gradient(circle,#0a0a0a,#1a1a1a);border-radius:50%;box-shadow:inset 1px 1px 3px rgba(0,0,0,.7),0 1px 2px rgba(139,92,246,.3);height:18px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;z-index:3}.CircularRange-module__knob___2nLWp:hover .CircularRange-module__knobRing___H-KV6{border-color:#8b5cf6;box-shadow:inset 2px 2px 5px rgba(0,0,0,.5),inset -2px -2px 5px rgba(60,60,60,.1),0 4px 12px rgba(139,92,246,.4)}.CircularRange-module__knob___2nLWp:hover .CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#a78bfa,#c084fc);box-shadow:0 0 8px rgba(167,139,250,.9)}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobRing___H-KV6{border-color:#a78bfa;box-shadow:inset 2px 2px 5px rgba(0,0,0,.6),inset -2px -2px 5px rgba(60,60,60,.15),0 4px 16px rgba(167,139,250,.5)}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobIndicator___FxbT4{background:linear-gradient(180deg,#a78bfa,#c084fc);box-shadow:0 0 10px #a78bfa}.CircularRange-module__knob___2nLWp.CircularRange-module__active___SFotz .CircularRange-module__knobBackgroundPath___ySqrn{stroke:#a78bfa;filter:drop-shadow(0 0 4px rgba(167,139,250,.9))}
+/*# sourceMappingURL=index.esm.css.map */

package/dist/index.esm.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CircularRange.module.css"],"names":[],"mappings":"AAAA,oCAII,cAAe,CAFf,WAAY,CACZ,iBAAkB,CAElB,gBAAiB,CAJjB,UAKJ,CAEA,wCAKI,kDAAqD,CAFrD,qBAAsB,CACtB,iBAAkB,CAElB,0GAGoC,CAPpC,WAAY,CAQZ,oDAAwD,CATxD,UAUJ,CAEA,8CAKI,WAAY,CAFZ,MAAO,CAGP,mBAAoB,CALpB,iBAAkB,CAClB,KAAM,CAKN,yBAA0B,CAH1B,UAIJ,CAEA,kDACI,SAAU,CACV,cAAe,CACf,gBAAiB,CACjB,oBAAqB,CACrB,sBAAuB,CACvB,uBAAwB,CAExB,+CAAoD,CADpD,yCAEJ,CAEA,6CAII,kDAAwD,CAKxD,iBAAkB,CAGlB,sCAA2C,CAT3C,WAAY,CAGZ,QAAS,CALT,iBAAkB,CAIlB,OAAQ,CAGR,0CAA2C,CAD3C,8BAA+B,CAL/B,SAAU,CAQV,SAGJ,CAEA,0CAII,kDAAqD,CACrD,iBAAkB,CAIlB,yEAEyC,CARzC,WAAY,CAIZ,QAAS,CANT,iBAAkB,CAKlB,OAAQ,CAER,8BAAgC,CANhC,UAAW,CAUX,SACJ,CAGA,kFACI,oBAAqB,CACrB,gHAIJ,CAEA,uFACI,kDAAwD,CACxD,uCACJ,CAEA,iHACI,oBAAqB,CACrB,kHAIJ,CAEA,sHACI,kDAAwD,CACxD,2BACJ,CAEA,2HACI,cAAe,CACf,gDACJ","file":"index.esm.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}"]}

package/dist/index.esm.js

@@ -0,0 +1,502 @@
+import 'react-circular-range/dist/CircularRange.css';
+import require$$0, { useRef, useState, useEffect, useCallback } from 'react';
+
+var jsxRuntime = {exports: {}};
+
+var reactJsxRuntime_production = {};
+
+/**
+ * @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.
+ */
+
+var hasRequiredReactJsxRuntime_production;
+
+function requireReactJsxRuntime_production () {
+	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
+	hasRequiredReactJsxRuntime_production = 1;
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	function jsxProd(type, config, maybeKey) {
+	  var key = null;
+	  void 0 !== maybeKey && (key = "" + maybeKey);
+	  void 0 !== config.key && (key = "" + config.key);
+	  if ("key" in config) {
+	    maybeKey = {};
+	    for (var propName in config)
+	      "key" !== propName && (maybeKey[propName] = config[propName]);
+	  } else maybeKey = config;
+	  config = maybeKey.ref;
+	  return {
+	    $$typeof: REACT_ELEMENT_TYPE,
+	    type: type,
+	    key: key,
+	    ref: void 0 !== config ? config : null,
+	    props: maybeKey
+	  };
+	}
+	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+	reactJsxRuntime_production.jsx = jsxProd;
+	reactJsxRuntime_production.jsxs = jsxProd;
+	return reactJsxRuntime_production;
+}
+
+var reactJsxRuntime_development = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.development.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.
+ */
+
+var hasRequiredReactJsxRuntime_development;
+
+function requireReactJsxRuntime_development () {
+	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+	hasRequiredReactJsxRuntime_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function getComponentNameFromType(type) {
+	      if (null == type) return null;
+	      if ("function" === typeof type)
+	        return type.$$typeof === REACT_CLIENT_REFERENCE
+	          ? null
+	          : type.displayName || type.name || null;
+	      if ("string" === typeof type) return type;
+	      switch (type) {
+	        case REACT_FRAGMENT_TYPE:
+	          return "Fragment";
+	        case REACT_PROFILER_TYPE:
+	          return "Profiler";
+	        case REACT_STRICT_MODE_TYPE:
+	          return "StrictMode";
+	        case REACT_SUSPENSE_TYPE:
+	          return "Suspense";
+	        case REACT_SUSPENSE_LIST_TYPE:
+	          return "SuspenseList";
+	        case REACT_ACTIVITY_TYPE:
+	          return "Activity";
+	      }
+	      if ("object" === typeof type)
+	        switch (
+	          ("number" === typeof type.tag &&
+	            console.error(
+	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+	            ),
+	          type.$$typeof)
+	        ) {
+	          case REACT_PORTAL_TYPE:
+	            return "Portal";
+	          case REACT_CONTEXT_TYPE:
+	            return type.displayName || "Context";
+	          case REACT_CONSUMER_TYPE:
+	            return (type._context.displayName || "Context") + ".Consumer";
+	          case REACT_FORWARD_REF_TYPE:
+	            var innerType = type.render;
+	            type = type.displayName;
+	            type ||
+	              ((type = innerType.displayName || innerType.name || ""),
+	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
+	            return type;
+	          case REACT_MEMO_TYPE:
+	            return (
+	              (innerType = type.displayName || null),
+	              null !== innerType
+	                ? innerType
+	                : getComponentNameFromType(type.type) || "Memo"
+	            );
+	          case REACT_LAZY_TYPE:
+	            innerType = type._payload;
+	            type = type._init;
+	            try {
+	              return getComponentNameFromType(type(innerType));
+	            } catch (x) {}
+	        }
+	      return null;
+	    }
+	    function testStringCoercion(value) {
+	      return "" + value;
+	    }
+	    function checkKeyStringCoercion(value) {
+	      try {
+	        testStringCoercion(value);
+	        var JSCompiler_inline_result = !1;
+	      } catch (e) {
+	        JSCompiler_inline_result = true;
+	      }
+	      if (JSCompiler_inline_result) {
+	        JSCompiler_inline_result = console;
+	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
+	        var JSCompiler_inline_result$jscomp$0 =
+	          ("function" === typeof Symbol &&
+	            Symbol.toStringTag &&
+	            value[Symbol.toStringTag]) ||
+	          value.constructor.name ||
+	          "Object";
+	        JSCompiler_temp_const.call(
+	          JSCompiler_inline_result,
+	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+	          JSCompiler_inline_result$jscomp$0
+	        );
+	        return testStringCoercion(value);
+	      }
+	    }
+	    function getTaskName(type) {
+	      if (type === REACT_FRAGMENT_TYPE) return "<>";
+	      if (
+	        "object" === typeof type &&
+	        null !== type &&
+	        type.$$typeof === REACT_LAZY_TYPE
+	      )
+	        return "<...>";
+	      try {
+	        var name = getComponentNameFromType(type);
+	        return name ? "<" + name + ">" : "<...>";
+	      } catch (x) {
+	        return "<...>";
+	      }
+	    }
+	    function getOwner() {
+	      var dispatcher = ReactSharedInternals.A;
+	      return null === dispatcher ? null : dispatcher.getOwner();
+	    }
+	    function UnknownOwner() {
+	      return Error("react-stack-top-frame");
+	    }
+	    function hasValidKey(config) {
+	      if (hasOwnProperty.call(config, "key")) {
+	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
+	        if (getter && getter.isReactWarning) return false;
+	      }
+	      return void 0 !== config.key;
+	    }
+	    function defineKeyPropWarningGetter(props, displayName) {
+	      function warnAboutAccessingKey() {
+	        specialPropKeyWarningShown ||
+	          ((specialPropKeyWarningShown = true),
+	          console.error(
+	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+	            displayName
+	          ));
+	      }
+	      warnAboutAccessingKey.isReactWarning = true;
+	      Object.defineProperty(props, "key", {
+	        get: warnAboutAccessingKey,
+	        configurable: true
+	      });
+	    }
+	    function elementRefGetterWithDeprecationWarning() {
+	      var componentName = getComponentNameFromType(this.type);
+	      didWarnAboutElementRef[componentName] ||
+	        ((didWarnAboutElementRef[componentName] = true),
+	        console.error(
+	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+	        ));
+	      componentName = this.props.ref;
+	      return void 0 !== componentName ? componentName : null;
+	    }
+	    function ReactElement(type, key, props, owner, debugStack, debugTask) {
+	      var refProp = props.ref;
+	      type = {
+	        $$typeof: REACT_ELEMENT_TYPE,
+	        type: type,
+	        key: key,
+	        props: props,
+	        _owner: owner
+	      };
+	      null !== (void 0 !== refProp ? refProp : null)
+	        ? Object.defineProperty(type, "ref", {
+	            enumerable: false,
+	            get: elementRefGetterWithDeprecationWarning
+	          })
+	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
+	      type._store = {};
+	      Object.defineProperty(type._store, "validated", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: 0
+	      });
+	      Object.defineProperty(type, "_debugInfo", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: null
+	      });
+	      Object.defineProperty(type, "_debugStack", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugStack
+	      });
+	      Object.defineProperty(type, "_debugTask", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugTask
+	      });
+	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
+	      return type;
+	    }
+	    function jsxDEVImpl(
+	      type,
+	      config,
+	      maybeKey,
+	      isStaticChildren,
+	      debugStack,
+	      debugTask
+	    ) {
+	      var children = config.children;
+	      if (void 0 !== children)
+	        if (isStaticChildren)
+	          if (isArrayImpl(children)) {
+	            for (
+	              isStaticChildren = 0;
+	              isStaticChildren < children.length;
+	              isStaticChildren++
+	            )
+	              validateChildKeys(children[isStaticChildren]);
+	            Object.freeze && Object.freeze(children);
+	          } else
+	            console.error(
+	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+	            );
+	        else validateChildKeys(children);
+	      if (hasOwnProperty.call(config, "key")) {
+	        children = getComponentNameFromType(type);
+	        var keys = Object.keys(config).filter(function (k) {
+	          return "key" !== k;
+	        });
+	        isStaticChildren =
+	          0 < keys.length
+	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
+	            : "{key: someKey}";
+	        didWarnAboutKeySpread[children + isStaticChildren] ||
+	          ((keys =
+	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
+	          console.error(
+	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
+	            isStaticChildren,
+	            children,
+	            keys,
+	            children
+	          ),
+	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
+	      }
+	      children = null;
+	      void 0 !== maybeKey &&
+	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
+	      hasValidKey(config) &&
+	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
+	      if ("key" in config) {
+	        maybeKey = {};
+	        for (var propName in config)
+	          "key" !== propName && (maybeKey[propName] = config[propName]);
+	      } else maybeKey = config;
+	      children &&
+	        defineKeyPropWarningGetter(
+	          maybeKey,
+	          "function" === typeof type
+	            ? type.displayName || type.name || "Unknown"
+	            : type
+	        );
+	      return ReactElement(
+	        type,
+	        children,
+	        maybeKey,
+	        getOwner(),
+	        debugStack,
+	        debugTask
+	      );
+	    }
+	    function validateChildKeys(node) {
+	      isValidElement(node)
+	        ? node._store && (node._store.validated = 1)
+	        : "object" === typeof node &&
+	          null !== node &&
+	          node.$$typeof === REACT_LAZY_TYPE &&
+	          ("fulfilled" === node._payload.status
+	            ? isValidElement(node._payload.value) &&
+	              node._payload.value._store &&
+	              (node._payload.value._store.validated = 1)
+	            : node._store && (node._store.validated = 1));
+	    }
+	    function isValidElement(object) {
+	      return (
+	        "object" === typeof object &&
+	        null !== object &&
+	        object.$$typeof === REACT_ELEMENT_TYPE
+	      );
+	    }
+	    var React = require$$0,
+	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
+	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
+	      ReactSharedInternals =
+	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+	      hasOwnProperty = Object.prototype.hasOwnProperty,
+	      isArrayImpl = Array.isArray,
+	      createTask = console.createTask
+	        ? console.createTask
+	        : function () {
+	            return null;
+	          };
+	    React = {
+	      react_stack_bottom_frame: function (callStackForError) {
+	        return callStackForError();
+	      }
+	    };
+	    var specialPropKeyWarningShown;
+	    var didWarnAboutElementRef = {};
+	    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
+	      React,
+	      UnknownOwner
+	    )();
+	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+	    var didWarnAboutKeySpread = {};
+	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+	    reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        false,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        true,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	  })();
+	return reactJsxRuntime_development;
+}
+
+var hasRequiredJsxRuntime;
+
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+	hasRequiredJsxRuntime = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  jsxRuntime.exports = requireReactJsxRuntime_production();
+	} else {
+	  jsxRuntime.exports = requireReactJsxRuntime_development();
+	}
+	return jsxRuntime.exports;
+}
+
+var jsxRuntimeExports = requireJsxRuntime();
+
+var styles = {"knob":"CircularRange-module__knob___2nLWp","knobRing":"CircularRange-module__knobRing___H-KV6","knobBackground":"CircularRange-module__knobBackground___t2lGs","knobBackgroundPath":"CircularRange-module__knobBackgroundPath___ySqrn","knobIndicator":"CircularRange-module__knobIndicator___FxbT4","knobCenter":"CircularRange-module__knobCenter___DftjA","active":"CircularRange-module__active___SFotz"};
+
+const ARC_LENGTH = 113.1; // 270°
+const CircularRange = ({ min = 0, max = 100, value = 0, step = 0.01, onChange, theme = styles }) => {
+    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 (jsxRuntimeExports.jsx("div", { ref: knobRef, className: `${theme.knob} ${isActive ? theme.active : ""}`, children: jsxRuntimeExports.jsxs("div", { className: `${theme.knobRing}`, children: [jsxRuntimeExports.jsx("svg", { className: `${theme.knobBackground}`, viewBox: "0 0 60 60", children: jsxRuntimeExports.jsx("path", { className: `${theme.knobBackgroundPath}`, d: "M 30 6 A 24 24 0 1 1 6 30", strokeDasharray: ARC_LENGTH, strokeDashoffset: dashOffset }) }), jsxRuntimeExports.jsx("div", { className: `${theme.knobIndicator}`, style: {
+                        transform: `translateX(-50%) rotate(${rotation}deg)`,
+                    } }), jsxRuntimeExports.jsx("div", { className: `${theme.knobCenter}` })] }) }));
+};
+
+export { CircularRange };

package/dist/types/CircularRange.d.ts

@@ -0,0 +1,11 @@
+export 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>;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+import 'react-circular-range/dist/CircularRange.css';
+export { CircularRange } from './CircularRange';
+export type { CircularRangeProps, CircularRangeThemeProps, StyleSlots } from './CircularRange';

package/package.json

@@ -1,24 +1,15 @@
 {
   "name": "react-circular-range",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Simple VST-like circular slider/range.",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
   "files": [
     "dist"
   ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
-  },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --minify --clean --inject-style",
-    "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
-    "lint": "tsc"
+    "build": "rollup -c"
   },
   "repository": {
     "type": "git",
@@ -39,16 +30,19 @@
   },
   "license": "ISC",
   "homepage": "https://github.com/executable1210/react-circular-range#readme",
-  "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "tsup": "^8.5.1",
+    "postcss": "^8.5.6",
+    "postcss-modules": "^6.0.1",
+    "rollup": "^4.54.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
   }
 }

package/dist/index.d.mts

@@ -1,13 +0,0 @@
-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,13 +0,0 @@
-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,3 +0,0 @@
-"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))}
-`);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});
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,3 +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(`.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))}
-`);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};
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"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":"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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"]}