@pablo-v/number-field 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pablo Viniegra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,16 @@
-# Temporary Holding Version
+# @pablo-v/number-field
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Numeric input with stepper buttons and keyboard increments
+
+```bash
+pnpm add @pablo-v/number-field @pablo-v/tokens
+```
+
+It reuses the styles of `@pablo-v/input`; import those stylesheets before its own.
+
+```tsx
+import '@pablo-v/tokens/styles.css';
+import '@pablo-v/input/style.css';
+import '@pablo-v/number-field/style.css';
+import { NumberField } from '@pablo-v/number-field';
+```

package/dist/NumberField.d.ts

@@ -0,0 +1,25 @@
+import { type PixelSize } from '@pablo-v/core';
+import { type ComponentPropsWithRef, type CSSProperties } from 'react';
+export interface NumberFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step' | 'type'> {
+    value?: number | null;
+    defaultValue?: number | null;
+    /** Fires when a typed value is committed (blur or Enter) and on every step. */
+    onChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    /** @default 'md' */
+    size?: PixelSize;
+    /** Shows the error style. Inside a `Field` with `error` this is automatic. */
+    invalid?: boolean;
+    /** Applied to the outer box; `className` goes there too. */
+    style?: CSSProperties;
+}
+/**
+ * Numeric entry (`spinbutton`) between decrement and increment compartments.
+ * Arrow keys step, Page keys step ×10, Home and End jump to the bounds. Shares
+ * the Input box, so import `@pablo-v/input/style.css` too.
+ */
+export declare function NumberField({ value: valueProp, defaultValue, onChange, min, max, step, size, invalid, className, style, onBlur, onKeyDown, readOnly, ...rest }: NumberFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=NumberField.d.ts.map

package/dist/NumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../src/NumberField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,SAAS,EAAwB,MAAM,eAAe,CAAC;AAGhF,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAGnB,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,qBAAqB,CAAC,OAAO,CAAC,EAC9B,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CACjF;IACD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAMD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,SAAS,EAChB,YAAmB,EACnB,QAAQ,EACR,GAA8B,EAC9B,GAA8B,EAC9B,IAAQ,EACR,IAAW,EACX,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAkGlB"}

package/dist/NumberField.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clamp, cx, useControllableState } from '@pablo-v/core';
+import { useFieldControl } from '@pablo-v/field';
+import { MinusIcon, PlusIcon } from '@pablo-v/pixel-icons';
+import { useState, } from 'react';
+function decimals(n) {
+    return (String(n).split('.')[1] ?? '').length;
+}
+/**
+ * Numeric entry (`spinbutton`) between decrement and increment compartments.
+ * Arrow keys step, Page keys step ×10, Home and End jump to the bounds. Shares
+ * the Input box, so import `@pablo-v/input/style.css` too.
+ */
+export function NumberField({ value: valueProp, defaultValue = null, onChange, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, size = 'md', invalid, className, style, onBlur, onKeyDown, readOnly, ...rest }) {
+    const [value, setValue] = useControllableState({
+        value: valueProp,
+        defaultValue,
+        onChange,
+    });
+    const [draft, setDraft] = useState(null);
+    const props = useFieldControl(rest, invalid);
+    const locked = props.disabled || readOnly;
+    const precision = decimals(step);
+    const commit = (next) => {
+        setDraft(null);
+        const normalized = next == null ? null : Number(clamp(next, min, max).toFixed(precision));
+        if (normalized !== value)
+            setValue(normalized);
+    };
+    const parse = () => {
+        if (draft == null)
+            return value;
+        const n = Number(draft.trim().replace(',', '.'));
+        return draft.trim() === '' ? null : Number.isFinite(n) ? n : value;
+    };
+    const stepBy = (delta) => {
+        const base = parse();
+        commit(base == null ? (Number.isFinite(min) ? min : 0) : base + delta * step);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || locked)
+            return;
+        const steps = { ArrowUp: 1, ArrowDown: -1, PageUp: 10, PageDown: -10 };
+        if (event.key in steps) {
+            event.preventDefault();
+            stepBy(steps[event.key] ?? 0);
+        }
+        else if (event.key === 'Enter')
+            commit(parse());
+        else if (event.key === 'Home' && Number.isFinite(min)) {
+            event.preventDefault();
+            commit(min);
+        }
+        else if (event.key === 'End' && Number.isFinite(max)) {
+            event.preventDefault();
+            commit(max);
+        }
+    };
+    return (_jsxs("span", { className: cx('pxl-input', 'pxl-number-field', className), style: style, "data-size": size, "data-invalid": props['aria-invalid'] ? true : undefined, "data-disabled": props.disabled || undefined, children: [_jsx("span", { className: "pxl-input__affix", children: _jsx("button", { type: "button", tabIndex: -1, className: "pxl-number-field__step", "aria-label": "Decrease", disabled: locked || (value != null && value <= min), onClick: () => stepBy(-1), children: _jsx(MinusIcon, {}) }) }), _jsx("input", { type: "text", inputMode: precision > 0 || min < 0 ? 'decimal' : 'numeric', role: "spinbutton", autoComplete: "off", className: "pxl-input__control", "aria-valuenow": value ?? undefined, "aria-valuemin": Number.isFinite(min) ? min : undefined, "aria-valuemax": Number.isFinite(max) ? max : undefined, readOnly: readOnly, ...props, value: draft ?? (value == null ? '' : String(value)), onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown, onBlur: (event) => {
+                    onBlur?.(event);
+                    if (draft != null)
+                        commit(parse());
+                } }), _jsx("span", { className: "pxl-input__affix", children: _jsx("button", { type: "button", tabIndex: -1, className: "pxl-number-field__step", "aria-label": "Increase", disabled: locked || (value != null && value >= max), onClick: () => stepBy(1), children: _jsx(PlusIcon, {}) }) })] }));
+}
+//# sourceMappingURL=NumberField.js.map

package/dist/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../src/NumberField.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberField, type NumberFieldProps } from './NumberField.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { NumberField } from './NumberField.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAkB,CAAC"}

package/dist/number-field.css

@@ -0,0 +1,39 @@
+.pxl-number-field .pxl-input__affix:has(> .pxl-number-field__step) {
+  padding: 0;
+}
+
+.pxl-number-field .pxl-input__control {
+  text-align: center;
+  font-family: var(--pxl-font-mono);
+}
+
+.pxl-number-field__step {
+  display: grid;
+  place-items: center;
+  align-self: stretch;
+  aspect-ratio: 1;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition:
+    background-color var(--pxl-dur-fast) linear,
+    color var(--pxl-dur-fast) linear;
+}
+
+.pxl-number-field__step:hover:not(:disabled) {
+  background: var(--pxl-accent-subtle);
+  color: var(--pxl-accent-text);
+}
+
+.pxl-number-field__step:active:not(:disabled) {
+  background: color-mix(in srgb, var(--pxl-accent-subtle), var(--pxl-accent) 12%);
+}
+
+.pxl-number-field__step:disabled {
+  opacity: var(--pxl-opacity-disabled);
+  cursor: not-allowed;
+}

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@pablo-v/number-field",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Numeric input with stepper buttons and keyboard increments",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PabloViniegra/pixel-ui.git",
+    "directory": "packages/number-field"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./style.css": {
+      "source": "./src/number-field.css",
+      "default": "./dist/number-field.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pablo-v/core": "^0.2.1",
+    "@pablo-v/input": "^1.0.2",
+    "@pablo-v/pixel-icons": "^1.3.0",
+    "@pablo-v/field": "^1.1.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "@pablo-v/tokens": "^0.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b && node ../../scripts/copy-assets.mjs",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
 }