react-knob-headless/dist/index.js

Unstyled & accessible knob primitive for React

'use strict';

var react = require('react');
var react$1 = require('@use-gesture/react');
var q = require('merge-props');
var math = require('@dsp-ts/math');
var jsxRuntime = require('react/jsx-runtime');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var q__default = /*#__PURE__*/_interopDefault(q);

var C=Object.defineProperty;var p=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var x=(e,r,o)=>r in e?C(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,s=(e,r)=>{for(var o in r||(r={}))P.call(r,o)&&x(e,o,r[o]);if(p)for(var o of p(r))H.call(r,o)&&x(e,o,r[o]);return e};var v=(e,r)=>{var o={};for(var n in e)P.call(e,n)&&r.indexOf(n)<0&&(o[n]=e[n]);if(e!=null&&p)for(var n of p(e))r.indexOf(n)<0&&H.call(e,n)&&(o[n]=e[n]);return o};var w="y",L=!1,D=math.mapTo01Linear,T=math.mapFrom01Linear,f=react.forwardRef((M,A)=>{var K=M,{valueRaw:e,valueMin:r,valueMax:o,dragSensitivity:n,valueRawRoundFn:i,valueRawDisplayFn:t,onValueRawChange:l,orientation:u,axis:a=w,includeIntoTabOrder:y=L,mapTo01:N=D,mapFrom01:R=T}=K,g=v(K,["valueRaw","valueMin","valueMax","dragSensitivity","valueRawRoundFn","valueRawDisplayFn","onValueRawChange","orientation","axis","includeIntoTabOrder","mapTo01","mapFrom01"]);let k=i(e),F=react$1.useDrag(({delta:b})=>{let c=0;c+=b[0]*n,c+=b[1]*-n;let h=N(e,r,o),z=math.clamp01(h+c),I=math.clamp(R(z,r,o),r,o);l(I);},{pointer:{keys:!1},axis:S(u,a)});return jsxRuntime.jsx("div",s({ref:A,role:"slider","aria-valuenow":k,"aria-valuemin":r,"aria-valuemax":o,"aria-orientation":W(u,a),"aria-valuetext":t(e),tabIndex:y?0:-1},q__default.default(F(),{style:{touchAction:"none"},onPointerDown(b){b.currentTarget.focus();}},g)))});f.displayName="KnobHeadless";f.defaultProps={axis:w,includeIntoTabOrder:L,mapTo01:D,mapFrom01:T};var S=(e,r)=>e?e==="horizontal"?"x":"y":r==="xy"?void 0:r,W=(e,r)=>{if(e)return e;if(r!=="xy")return r==="x"?"horizontal":"vertical"};var O=react.forwardRef((e,r)=>jsxRuntime.jsx("label",s({ref:r},e)));O.displayName="KnobHeadlessLabel";var E=react.forwardRef((e,r)=>jsxRuntime.jsx("output",s({ref:r},e)));E.displayName="KnobHeadlessOutput";var j=({valueRaw:e,valueMin:r,valueMax:o,step:n,stepLarger:i,onValueRawChange:t,noDefaultPrevention:l=!1})=>({onKeyDown:a=>{let{code:y}=a;switch(y){case"ArrowUp":case"ArrowRight":t(math.clamp(e+n,r,o),a),d({event:a,noDefaultPrevention:l});break;case"ArrowDown":case"ArrowLeft":t(math.clamp(e-n,r,o),a),d({event:a,noDefaultPrevention:l});break;case"PageUp":t(math.clamp(e+i,r,o),a),d({event:a,noDefaultPrevention:l});break;case"PageDown":t(math.clamp(e-i,r,o),a),d({event:a,noDefaultPrevention:l});break;case"Home":t(r,a),d({event:a,noDefaultPrevention:l});break;case"End":t(o,a),d({event:a,noDefaultPrevention:l});break;}}}),d=({event:e,noDefaultPrevention:r})=>{r||e.preventDefault();};

exports.KnobHeadless = f;
exports.KnobHeadlessLabel = O;
exports.KnobHeadlessOutput = E;
exports.useKnobKeyboardControls = j;
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map