@tremolo-ui/react 0.1.6 → 0.2.0

package/dist/index.cjs

@@ -586,13 +586,6 @@ const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defau
 				stroke: inactiveLine || "currentColor",
 				strokeWidth: lineWeight
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				className: (0, clsx.default)("tremolo-knob-active-line", classes?.activeLine),
-				d: `M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`,
-				fill: "none",
-				stroke: activeLine || "currentColor",
-				strokeWidth: lineWeight
-			}),
 			startValue < max && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				className: (0, clsx.default)("tremolo-knob-inactive-line", classes?.inactiveLine),
 				d: `M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4}, ${y4}`,
@@ -600,6 +593,13 @@ const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defau
 				stroke: inactiveLine || "currentColor",
 				strokeWidth: lineWeight
 			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				className: (0, clsx.default)("tremolo-knob-active-line", classes?.activeLine),
+				d: `M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`,
+				fill: "none",
+				stroke: activeLine || "currentColor",
+				strokeWidth: lineWeight
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 				className: (0, clsx.default)("tremolo-knob-thumb", classes?.thumb),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
@@ -745,6 +745,111 @@ function useNumberInputContext(selector) {
 	return (0, zustand.useStore)(store, selector);
 }
 
+//#endregion
+//#region src/hooks/useInterval.ts
+/**
+* @category hooks
+*/
+function useInterval(callback, delay) {
+	const savedCallback = (0, react.useRef)(callback);
+	(0, react.useEffect)(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+	(0, react.useEffect)(() => {
+		if (delay === null) return;
+		const id = setInterval(() => {
+			savedCallback.current();
+		}, delay);
+		return () => {
+			clearInterval(id);
+		};
+	}, [delay]);
+}
+
+//#endregion
+//#region src/hooks/useLongPress.ts
+/**
+* @category hooks
+*/
+function useLongPress(callback, initialDelay = 500, interval = 40) {
+	const [pressed, setPressed] = (0, react.useState)(false);
+	const [delay, setDelay] = (0, react.useState)(initialDelay);
+	useInterval(() => {
+		callback();
+		setDelay(interval);
+	}, pressed ? delay : null);
+	useEventListener(globalThis.window, "pointerup", () => {
+		setPressed(false);
+		setDelay(initialDelay);
+	});
+	return (0, react.useCallback)(() => {
+		callback();
+		setPressed(true);
+	}, [callback]);
+}
+
+//#endregion
+//#region src/components/NumberInput/DecrementStepper.tsx
+/** @category NumberInput */
+function DecrementStepper({ size = 12, children, className,...props }) {
+	const min = useNumberInputContext((s) => s.min);
+	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+	const readonly = useNumberInputContext((s) => s.readonly);
+	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
+	const press = useLongPress(useNumberInputContext((s) => s.decrement));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("tremolo-number-input-decrement-stepper", className),
+		role: "button",
+		tabIndex: -1,
+		"aria-disabled": keepWithinRange && valueAsNumber <= (min ?? Number.MIN_SAFE_INTEGER),
+		"aria-readonly": readonly,
+		onPointerDown: press,
+		...props,
+		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			width: size,
+			height: size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "6 9 12 15 18 9" })
+		})
+	});
+}
+
+//#endregion
+//#region src/components/NumberInput/IncrementStepper.tsx
+/** @category NumberInput */
+function IncrementStepper({ size = 12, children, className,...props }) {
+	const max = useNumberInputContext((s) => s.max);
+	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+	const readonly = useNumberInputContext((s) => s.readonly);
+	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
+	const press = useLongPress(useNumberInputContext((s) => s.increment));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("tremolo-number-input-increment-stepper", className),
+		role: "button",
+		tabIndex: -1,
+		"aria-disabled": keepWithinRange && valueAsNumber >= (max ?? Number.MAX_SAFE_INTEGER),
+		"aria-readonly": readonly,
+		onPointerDown: press,
+		...props,
+		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			width: size,
+			height: size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "18 15 12 9 6 15" })
+		})
+	});
+}
+
 //#endregion
 //#region src/components/NumberInput/InternalInput.tsx
 const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFocus, blurOnEnter, clampValueOnBlur, wheel, keyboard, className, onChange, onFocus, onBlur, onKeyDown, children: _children,...props }, ref) => {
@@ -886,118 +991,9 @@ function Stepper({ dynamic = true, children, className,...props }) {
 	});
 }
 
-//#endregion
-//#region src/hooks/useInterval.ts
-/**
-* @category hooks
-*/
-function useInterval(callback, delay) {
-	const savedCallback = (0, react.useRef)(callback);
-	(0, react.useEffect)(() => {
-		savedCallback.current = callback;
-	}, [callback]);
-	(0, react.useEffect)(() => {
-		if (delay === null) return;
-		const id = setInterval(() => {
-			savedCallback.current();
-		}, delay);
-		return () => {
-			clearInterval(id);
-		};
-	}, [delay]);
-}
-
-//#endregion
-//#region src/hooks/useLongPress.ts
-/**
-* @category hooks
-*/
-function useLongPress(callback, initialDelay = 500, interval = 40) {
-	const [pressed, setPressed] = (0, react.useState)(false);
-	const [delay, setDelay] = (0, react.useState)(initialDelay);
-	useInterval(() => {
-		callback();
-		setDelay(interval);
-	}, pressed ? delay : null);
-	useEventListener(globalThis.window, "pointerup", () => {
-		setPressed(false);
-		setDelay(initialDelay);
-	});
-	return (0, react.useCallback)(() => {
-		callback();
-		setPressed(true);
-	}, [callback]);
-}
-
-//#endregion
-//#region src/components/NumberInput/IncrementStepper.tsx
-/** @category NumberInput */
-function IncrementStepper({ size = 12, children, className,...props }) {
-	const max = useNumberInputContext((s) => s.max);
-	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
-	const readonly = useNumberInputContext((s) => s.readonly);
-	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
-	const press = useLongPress(useNumberInputContext((s) => s.increment));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("tremolo-number-input-increment-stepper", className),
-		role: "button",
-		tabIndex: -1,
-		"aria-disabled": keepWithinRange && valueAsNumber >= (max ?? Number.MAX_SAFE_INTEGER),
-		"aria-readonly": readonly,
-		onPointerDown: press,
-		...props,
-		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-			width: size,
-			height: size,
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "18 15 12 9 6 15" })
-		})
-	});
-}
-
-//#endregion
-//#region src/components/NumberInput/DecrementStepper.tsx
-/** @category NumberInput */
-function DecrementStepper({ size = 12, children, className,...props }) {
-	const min = useNumberInputContext((s) => s.min);
-	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
-	const readonly = useNumberInputContext((s) => s.readonly);
-	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
-	const press = useLongPress(useNumberInputContext((s) => s.decrement));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("tremolo-number-input-decrement-stepper", className),
-		role: "button",
-		tabIndex: -1,
-		"aria-disabled": keepWithinRange && valueAsNumber <= (min ?? Number.MIN_SAFE_INTEGER),
-		"aria-readonly": readonly,
-		onPointerDown: press,
-		...props,
-		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-			width: size,
-			height: size,
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "6 9 12 15 18 9" })
-		})
-	});
-}
-
 //#endregion
 //#region src/components/NumberInput/index.tsx
-/**
-* Input with some useful functions for entering numerical values.
-* @category NumberInput
-*/
-const NumberInput = (0, react.forwardRef)(({ value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = "outline", selectWithFocus = "none", blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ["raw", 1], keyboard = ["raw", 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children,...props }, forwardedRef) => {
+const NumberInputImpl = (0, react.forwardRef)(({ value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = "outline", selectWithFocus = "none", blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ["raw", 1], keyboard = ["raw", 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children,...props }, forwardedRef) => {
 	const colors = { "--active-color": activeColor };
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputProvider, {
 		value: String(value),
@@ -1033,6 +1029,15 @@ const NumberInput = (0, react.forwardRef)(({ value, min, max, step = 1, units, r
 		})
 	});
 });
+/**
+* Input with some useful functions for entering numerical values.
+* @category NumberInput
+*/
+const NumberInput = Object.assign(NumberInputImpl, {
+	Stepper,
+	IncrementStepper,
+	DecrementStepper
+});
 
 //#endregion
 //#region src/hooks/useDragWithElement.ts
@@ -1254,11 +1259,7 @@ function getNoteRangeArray(noteRange) {
 	return Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
 }
 const blackPerWhiteWidth = defaultBlackKeyWidth / defaultWhiteKeyWidth;
-/**
-* Customizable piano component.
-* @category Piano
-*/
-const Piano = (0, react.forwardRef)(({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? "100%" : 160, whiteNoteWidth: _whiteNoteWidth = defaultWhiteKeyWidth, style, className, onPlayNote, onStopNote, label, children, onPointerDown,...props }, forwardedRef) => {
+const PianoImpl = (0, react.forwardRef)(({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? "100%" : 160, whiteNoteWidth: _whiteNoteWidth = defaultWhiteKeyWidth, style, className, onPlayNote, onStopNote, label, children, onPointerDown,...props }, forwardedRef) => {
 	const [whiteNoteWidth, setWhiteNoteWidth] = (0, react.useState)(_whiteNoteWidth);
 	const keyRefs = (0, react.useRef)([]);
 	for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) keyRefs.current[i] = (0, react.createRef)();
@@ -1439,6 +1440,15 @@ const Piano = (0, react.forwardRef)(({ noteRange, glissando = true, midiMax = 12
 		})
 	});
 });
+/**
+* Customizable piano component.
+* @category Piano
+*/
+const Piano = Object.assign(PianoImpl, {
+	WhiteKey,
+	BlackKey,
+	KeyLabel
+});
 
 //#endregion
 //#region src/components/Slider/context.tsx
@@ -1575,7 +1585,7 @@ function Scale({ gap = 6, options, children, className, style,...props }) {
 /** @category Slider */
 const defaultThumbSize = 22;
 /** @category Slider */
-const SliderThumb = (0, react.forwardRef)(({ size, width = defaultThumbSize, height = defaultThumbSize, color, children, className, style, __percent }, ref) => {
+const Thumb$1 = (0, react.forwardRef)(({ size, width = defaultThumbSize, height = defaultThumbSize, color, children, className, style, __percent }, ref) => {
 	const wrapperRef = (0, react.useRef)(null);
 	const vertical = useSliderContext((s) => s.vertical);
 	const disabled = useSliderContext((s) => s.disabled);
@@ -1617,7 +1627,7 @@ const SliderThumb = (0, react.forwardRef)(({ size, width = defaultThumbSize, hei
 const defaultLength = 140;
 const defaultThickness = 10;
 /** @category Slider */
-function SliderTrack({ length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, defaultStyle = true, __thumb, __percent = 0,...props }) {
+function Track({ length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, defaultStyle = true, __thumb, __percent = 0,...props }) {
 	const vertical = useSliderContext((s) => s.vertical);
 	const reverse = useSliderContext((s) => s.reverse);
 	const disabled = useSliderContext((s) => s.disabled);
@@ -1645,11 +1655,7 @@ function SliderTrack({ length = defaultLength, thickness = defaultThickness, act
 
 //#endregion
 //#region src/components/Slider/index.tsx
-/**
-* Customizable slider
-* @category Slider
-*/
-const Slider = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, vertical = false, reverse = false, bodyNoSelect = true, wheel = ["raw", 1], keyboard = ["raw", 1], disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown,...props }, forwardedRef) => {
+const SliderImpl = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, vertical = false, reverse = false, bodyNoSelect = true, wheel = ["raw", 1], keyboard = ["raw", 1], disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown,...props }, forwardedRef) => {
 	const trackElementRef = (0, react.useRef)(null);
 	const thumbRef = (0, react.useRef)(null);
 	const p = (0, __tremolo_ui_functions.toFixed)((0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew) * 100);
@@ -1660,8 +1666,8 @@ const Slider = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, ver
 	let thumbProps = {};
 	let scaleComponent = void 0;
 	if (children != void 0) react.default.Children.forEach(children, (child) => {
-		if (react.default.isValidElement(child)) if (child.type == SliderThumb) thumbProps = child.props;
-		else if (child.type == SliderTrack) trackProps = child.props;
+		if (react.default.isValidElement(child)) if (child.type == Thumb$1) thumbProps = child.props;
+		else if (child.type == Track) trackProps = child.props;
 		else if (child.type == Scale) scaleComponent = child;
 		else throw new Error("only <SliderThumb> or <SliderTrack>");
 		else throw new Error("children is an invalid element.");
@@ -1810,9 +1816,9 @@ const Slider = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, ver
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "tremolo-slider-track-wrapper",
 					ref: trackElementRef,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderTrack, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Track, {
 						__percent: percent,
-						__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderThumb, {
+						__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb$1, {
 							ref: thumbRef,
 							__percent: percent,
 							...thumbProps
@@ -1824,6 +1830,16 @@ const Slider = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, ver
 		})
 	});
 });
+/**
+* Customizable slider
+* @category Slider
+*/
+const Slider = Object.assign(SliderImpl, {
+	Thumb: Thumb$1,
+	Track,
+	Scale,
+	ScaleOption
+});
 
 //#endregion
 //#region src/components/WheelObserver/index.tsx
@@ -1842,7 +1858,7 @@ function WheelObserver(props) {
 //#endregion
 //#region src/components/XYPad/Area.tsx
 /** @category XYPad */
-function XYPadArea({ width = 120, height = 120, color, children, className, style, __thumb,...props }) {
+function Area({ width = 120, height = 120, color, children, className, style, __thumb,...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, clsx.default)("tremolo-xy-pad-area", className),
 		style: {
@@ -1859,7 +1875,7 @@ function XYPadArea({ width = 120, height = 120, color, children, className, styl
 //#endregion
 //#region src/components/XYPad/Thumb.tsx
 /** @category XYPad */
-const XYPadThumb = (0, react.forwardRef)(({ size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __css,...props }, ref) => {
+const Thumb = (0, react.forwardRef)(({ size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __readonly, __css,...props }, ref) => {
 	const wrapperRef = (0, react.useRef)(null);
 	(0, react.useImperativeHandle)(ref, () => {
 		return {
@@ -1883,6 +1899,7 @@ const XYPadThumb = (0, react.forwardRef)(({ size, width = 22, height = 22, color
 			className: (0, clsx.default)("tremolo-xy-pad-thumb", className),
 			tabIndex: 0,
 			"aria-disabled": __disabled,
+			"aria-readonly": __readonly,
 			style: {
 				"--color": color,
 				width: size ?? width,
@@ -1902,11 +1919,7 @@ const defaultValueOptions = {
 	wheel: ["raw", 1],
 	keyboard: ["raw", 1]
 };
-/**
-* Simple XYPad
-* @category XYPad
-*/
-const XYPad = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSelect = true, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children,...props }, forwardedRef) => {
+const XYPadImpl = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSelect = true, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children,...props }, forwardedRef) => {
 	const x = (0, react.useMemo)(() => {
 		return {
 			...defaultValueOptions,
@@ -1928,8 +1941,8 @@ const XYPad = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSel
 	let areaProps = {};
 	let thumbProps = {};
 	if (children != void 0) react.default.Children.forEach(children, (child) => {
-		if (react.default.isValidElement(child)) if (child.type == XYPadThumb) thumbProps = child.props;
-		else if (child.type == XYPadArea) areaProps = child.props;
+		if (react.default.isValidElement(child)) if (child.type == Thumb) thumbProps = child.props;
+		else if (child.type == Area) areaProps = child.props;
 		else throw new Error("only <XYPadThumb> or <XYPadArea>");
 		else throw new Error("children is an invalid element.");
 	});
@@ -2067,10 +2080,11 @@ const XYPad = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSel
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "tremolo-xy-pad-area-wrapper",
 			ref: areaElementRef,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYPadArea, {
-				__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYPadThumb, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Area, {
+				__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb, {
 					ref: thumbRef,
 					__disabled: disabled,
+					__readonly: readonly,
 					__css: {
 						top: `${percentY}%`,
 						left: `${percentX}%`
@@ -2082,6 +2096,14 @@ const XYPad = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSel
 		})
 	});
 });
+/**
+* Simple XYPad
+* @category XYPad
+*/
+const XYPad = Object.assign(XYPadImpl, {
+	Thumb,
+	Area
+});
 
 //#endregion
 //#region src/hooks/useAnimationFrame.ts
@@ -2176,28 +2198,16 @@ function useMIDIInput(midiAccess, onNoteOnEvent, onNoteOffEvent, onPitchBendEven
 //#endregion
 exports.AnimationCanvas = AnimationCanvas;
 exports.AnimationKnob = AnimationKnob;
-exports.BlackKey = BlackKey;
-exports.DecrementStepper = DecrementStepper;
 exports.DragObserver = DragObserver;
-exports.IncrementStepper = IncrementStepper;
-exports.KeyLabel = KeyLabel;
 exports.Knob = Knob;
 exports.NOT_SUPPORTED = NOT_SUPPORTED;
 exports.NumberInput = NumberInput;
 exports.PERMISSION_DENIED = PERMISSION_DENIED;
 exports.Piano = Piano;
 exports.SHORTCUTS = SHORTCUTS;
-exports.Scale = Scale;
-exports.ScaleOption = ScaleOption;
 exports.Slider = Slider;
-exports.SliderThumb = SliderThumb;
-exports.SliderTrack = SliderTrack;
-exports.Stepper = Stepper;
 exports.WheelObserver = WheelObserver;
-exports.WhiteKey = WhiteKey;
 exports.XYPad = XYPad;
-exports.XYPadArea = XYPadArea;
-exports.XYPadThumb = XYPadThumb;
 exports.getNoteRangeArray = getNoteRangeArray;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useDrag = useDrag;