@designbyadrian/react-interactive-input 2.0.3 → 3.0.0

package/dist/types/InteractiveInput.d.ts

@@ -10,7 +10,14 @@ interface InteractiveInputProps extends React.InputHTMLAttributes<HTMLInputEleme
     value?: number;
 }
 /**
- * Main component for the InteractiveInput
+ * Main component for the InteractiveInput.
+ *
+ * Click and drag horizontally to scrub the value; a plain click focuses the
+ * field for manual text editing (drags while focused select text instead of
+ * scrubbing). Scrubbing works with mouse, touch and pen via Pointer Events,
+ * survives the pointer leaving the element thanks to pointer capture, applies
+ * modifier keys (read live from each pointer event) and can be cancelled with
+ * Escape, restoring the value from before the drag.
  */
-export default function InteractiveInput({ value, modifiers, style: _style, ...props }: InteractiveInputProps): import("react/jsx-runtime").JSX.Element;
+export default function InteractiveInput({ value, modifiers, style: _style, onBlur, onFocus, onKeyDown, onPointerCancel, onPointerDown, onPointerMove, onPointerUp, ...props }: InteractiveInputProps): import("react").JSX.Element;
 export {};

package/dist/types/MaskedInput.d.ts

@@ -1,13 +1,25 @@
 import { type MaskFunction } from './masks';
 interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /**
-     * Masking function to apply to the input value. Defaults to `numberMask` which ensures that the input value is a valid number, including negative numbers.
+     * Masking function applied to the input text. Receives the raw text and the
+     * previous (valid) text, and returns the text to display. Defaults to
+     * `maskNumber`, which accepts complete and in-progress decimal numbers,
+     * including negative ones.
      */
     mask?: MaskFunction;
     value?: string;
 }
 /**
- * A React input component featuring input masking specifically designed to address limitations with negative numbers in standard HTML input elements. This component ensures that negative values are properly formatted and accepted by the input field, preventing unexpected behavior or errors when handling signed numbers.
+ * A React input component featuring input masking specifically designed to
+ * address limitations with negative numbers in standard HTML input elements.
+ *
+ * The displayed text is owned locally while the field is focused, so
+ * in-progress states like "", "-" or "1." are never overwritten by a
+ * controlled host echoing parsed values back. The `value` prop is synced to
+ * the display only while the field is not focused.
+ *
+ * All change events delivered to `onChange` are genuine React ChangeEvents
+ * whose `target.value` is the canonical (dot-decimal) string.
  */
 declare const MaskedInput: import("react").ForwardRefExoticComponent<MaskedInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default MaskedInput;

package/dist/types/masks.d.ts

@@ -1,2 +1,9 @@
-export type MaskFunction = (rawValue: string) => string;
-export declare function createNumberMask(): (rawValue: string) => string;
+export type MaskFunction = (rawValue: string, previousValue: string) => string;
+/**
+ * Pure number mask: returns the raw value when it is a valid (possibly
+ * in-progress) decimal number, otherwise returns the previous valid value.
+ *
+ * Being pure, it holds no internal state, so mask behavior can never leak
+ * between input instances.
+ */
+export declare const maskNumber: MaskFunction;

package/dist/types/utils.d.ts

@@ -1,2 +1,26 @@
-export declare const getDecimalPlaces: (step: number) => number;
-export declare const createChangeEvent: (e: React.ChangeEvent<HTMLInputElement>, value: string) => React.ChangeEvent<HTMLInputElement>;
+export declare const getDecimalPlaces: (value: number) => number;
+/**
+ * Convert display text to the canonical machine format: dot decimal
+ * separator, mirroring how native number inputs expose a locale-independent
+ * DOM value.
+ */
+export declare const toCanonicalText: (text: string) => string;
+/** Parse display text (dot or comma decimal separator) into a number. */
+export declare const parseNumber: (text: string) => number;
+/** Format a numeric value as canonical display text. Non-finite values become "". */
+export declare const formatNumber: (value: number) => string;
+/**
+ * Normalize an in-progress editing string into its canonical representation:
+ * collapses leading zeros ("007" becomes "7"), strips trailing decimal
+ * separators ("1." becomes "1") and lone minus signs ("-" becomes ""), and
+ * converts a comma decimal separator to a dot. Unparseable text becomes "".
+ */
+export declare const normalizeNumberText: (text: string) => string;
+/**
+ * Set an input's value through the native HTMLInputElement value setter and
+ * dispatch a bubbling `input` event. Using the prototype setter bypasses
+ * React's internal value tracking, so React treats the dispatched event like
+ * genuine user input and fires `onChange` with a real ChangeEvent whose
+ * target is the actual input element.
+ */
+export declare const setNativeValue: (input: HTMLInputElement, value: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designbyadrian/react-interactive-input",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "description": "Adjust values in numeric input boxes by clicking and dragging horizontally, just like in Blender and similar 3D applications.",
   "keywords": [
     "react",
@@ -26,6 +26,8 @@
     "build-storybook": "storybook build",
     "build": "vite build && tsc --project tsconfig.json",
     "build:types": "tsc --emitDeclarationOnly",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "prepublishOnly": "npm run build",
     "deploy-storybook": "npm run build-storybook && touch ./storybook-static/.nojekyll && gh-pages -d storybook-static -t true"
   },
@@ -44,27 +46,35 @@
     "dist/types"
   ],
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "3.2.2",
-    "@storybook/addon-a11y": "^8.5.0-alpha.3",
-    "@storybook/addon-essentials": "8.5.0-alpha.3",
-    "@storybook/addon-interactions": "8.5.0-alpha.3",
-    "@storybook/addon-links": "8.5.0-alpha.3",
-    "@storybook/addon-onboarding": "8.5.0-alpha.3",
-    "@storybook/blocks": "8.5.0-alpha.3",
-    "@storybook/react": "8.5.0-alpha.3",
-    "@storybook/react-vite": "8.5.0-alpha.3",
-    "@storybook/test": "8.5.0-alpha.3",
-    "@types/react": "18.3.12",
-    "@vitejs/plugin-react": "4.3.3",
-    "eslint": "9.14.0",
-    "gh-pages": "6.2.0",
-    "storybook": "8.5.0-alpha.3",
-    "typescript": "5.6.3",
-    "vite": "5.4.10"
+    "@chromatic-com/storybook": "^3.2.6",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@storybook/addon-a11y": "^8.6.9",
+    "@storybook/addon-essentials": "^8.6.9",
+    "@storybook/addon-interactions": "^8.6.9",
+    "@storybook/addon-links": "^8.6.9",
+    "@storybook/addon-onboarding": "^8.6.9",
+    "@storybook/blocks": "^8.6.9",
+    "@storybook/react": "^8.6.9",
+    "@storybook/react-vite": "^8.6.9",
+    "@storybook/test": "^8.6.9",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.23.0",
+    "gh-pages": "^6.3.0",
+    "jsdom": "^26.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.6.9",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.3",
+    "vitest": "^3.0.9"
   },
   "engines": {
     "node": ">=20.0.0"