@forthtilliath/forth-ui 0.4.0 → 0.4.1

package/dist/components/color-picker/color-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,KAAK,QAAQ,EAAiB,MAAM,wBAAwB,CAAC;AAEtE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAwB,EACxB,aAAa,EACb,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,MAAM,GACP,EAAE,gBAAgB,qBAsDlB"}
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,KAAK,QAAQ,EAAiB,MAAM,wBAAwB,CAAC;AAEtE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAwB,EACxB,aAAa,EACb,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,MAAM,GACP,EAAE,gBAAgB,qBA6DlB"}

package/dist/components/color-picker/color-picker.js

@@ -22,8 +22,14 @@ const HEX_PATTERN = /^#[0-9a-f]{6}$/i;
 export function ColorPicker({ value, defaultValue = "#000000", onValueChange, disabled = false, className, ariaLabel, locale, }) {
     const messages = useUiMessages(locale);
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
-    const [textValue, setTextValue] = React.useState(defaultValue);
     const color = value ?? uncontrolledValue;
+    // Hex text being typed; resynced when the color changes from outside.
+    const [textValue, setTextValue] = React.useState(color);
+    const [shownColor, setShownColor] = React.useState(color);
+    if (color !== shownColor) {
+        setShownColor(color);
+        setTextValue(color);
+    }
     function commit(next) {
         setUncontrolledValue(next);
         setTextValue(next);

package/dist/components/number-input/number-input.d.ts

@@ -17,6 +17,10 @@ export type NumberInputProps = Omit<React.ComponentProps<"input">, "type" | "val
  * A numeric input with increment/decrement stepper buttons, clamped to
  * `min`/`max`.
  *
+ * Typing stays free: in-range values are reported as you type, and the value
+ * is only clamped when the field loses focus or on Enter — so `600` can be
+ * typed with `min={128}` without the first `6` jumping to `128`.
+ *
  * _Inspired from multiple sources, to make a consistent and reusable component._
  * @see https://www.heroui.com/docs/components/number-input
  *
@@ -24,5 +28,5 @@ export type NumberInputProps = Omit<React.ComponentProps<"input">, "type" | "val
  * @author Forth
  * @copyright 2026 Forth
  */
-export declare function NumberInput({ className, value, defaultValue, onValueChange, min, max, step, disabled, locale, ...props }: NumberInputProps): React.JSX.Element;
+export declare function NumberInput({ className, value, defaultValue, onValueChange, min, max, step, disabled, locale, onBlur, onKeyDown, ...props }: NumberInputProps): React.JSX.Element;
 //# sourceMappingURL=number-input.d.ts.map

package/dist/components/number-input/number-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/number-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,KAAK,QAAQ,EAAiB,MAAM,wBAAwB,CAAC;AAGtE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAC/C,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,YAAgB,EAChB,aAAa,EACb,GAAe,EACf,GAAc,EACd,IAAQ,EACR,QAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA8DlB"}
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/number-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,KAAK,QAAQ,EAAiB,MAAM,wBAAwB,CAAC;AAGtE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAC/C,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB,CAAC;AAcF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,YAAgB,EAChB,aAAa,EACb,GAAe,EACf,GAAc,EACd,IAAQ,EACR,QAAgB,EAChB,MAAM,EACN,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAuFlB"}

package/dist/components/number-input/number-input.js

@@ -6,10 +6,24 @@ import { Input } from "@forthtilliath/shadcn-ui/components/input";
 import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
 import { useUiMessages } from "../../locale/locale.js";
 import { Button } from "../button/index.js";
+/** Number typed by the user, accepting a comma as decimal separator. */
+function parseTyped(text) {
+    const normalized = text.trim().replace(",", ".");
+    return normalized === "" ? Number.NaN : Number(normalized);
+}
+/** Drops float noise from stepping (0.4 + 0.01) at the step's precision. */
+function roundToStep(value, step) {
+    const decimals = String(step).split(".")[1]?.length ?? 0;
+    return Number(value.toFixed(decimals));
+}
 /**
  * A numeric input with increment/decrement stepper buttons, clamped to
  * `min`/`max`.
  *
+ * Typing stays free: in-range values are reported as you type, and the value
+ * is only clamped when the field loses focus or on Enter — so `600` can be
+ * typed with `min={128}` without the first `6` jumping to `128`.
+ *
  * _Inspired from multiple sources, to make a consistent and reusable component._
  * @see https://www.heroui.com/docs/components/number-input
  *
@@ -17,22 +31,48 @@ import { Button } from "../button/index.js";
  * @author Forth
  * @copyright 2026 Forth
  */
-export function NumberInput({ className, value, defaultValue = 0, onValueChange, min = -Infinity, max = Infinity, step = 1, disabled = false, locale, ...props }) {
+export function NumberInput({ className, value, defaultValue = 0, onValueChange, min = -Infinity, max = Infinity, step = 1, disabled = false, locale, onBlur, onKeyDown, ...props }) {
     const messages = useUiMessages(locale);
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
     const current = value ?? uncontrolledValue;
+    // Raw text while typing; resynced when the value changes from outside.
+    const [text, setText] = React.useState(String(current));
+    const [shownValue, setShownValue] = React.useState(current);
+    if (current !== shownValue) {
+        setShownValue(current);
+        if (parseTyped(text) !== current)
+            setText(String(current));
+    }
     function commit(next) {
-        const clamped = Math.min(max, Math.max(min, next));
+        const clamped = roundToStep(Math.min(max, Math.max(min, next)), step);
         setUncontrolledValue(clamped);
-        onValueChange?.(clamped);
+        setText(String(clamped));
+        if (clamped !== current)
+            onValueChange?.(clamped);
+    }
+    function commitText() {
+        const parsed = parseTyped(text);
+        if (Number.isFinite(parsed))
+            commit(parsed);
+        else
+            setText(String(current));
     }
     return (_jsxs("div", { "data-slot": "number-input", className: cn("flex w-fit items-stretch", className), children: [_jsx(Button, { type: "button", variant: "outline", size: "icon", disabled: disabled || current <= min, onClick: () => {
                     commit(current - step);
-                }, "aria-label": messages.numberInput.decrement, className: "rounded-r-none", children: _jsx(MinusIcon, {}) }), _jsx(Input, { type: "number", inputMode: "numeric", value: current, min: min === -Infinity ? undefined : min, max: max === Infinity ? undefined : max, step: step, disabled: disabled, onChange: (e) => {
-                    const parsed = Number(e.target.value);
-                    if (!Number.isNaN(parsed)) {
-                        commit(parsed);
+                }, "aria-label": messages.numberInput.decrement, className: "rounded-r-none", children: _jsx(MinusIcon, {}) }), _jsx(Input, { type: "number", inputMode: Number.isInteger(step) ? "numeric" : "decimal", value: text, min: min === -Infinity ? undefined : min, max: max === Infinity ? undefined : max, step: step, disabled: disabled, onChange: (e) => {
+                    setText(e.target.value);
+                    const parsed = parseTyped(e.target.value);
+                    if (Number.isFinite(parsed) && parsed >= min && parsed <= max) {
+                        setUncontrolledValue(parsed);
+                        onValueChange?.(parsed);
                     }
+                }, onBlur: (e) => {
+                    commitText();
+                    onBlur?.(e);
+                }, onKeyDown: (e) => {
+                    if (e.key === "Enter")
+                        commitText();
+                    onKeyDown?.(e);
                 }, className: "w-16 rounded-none text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", ...props }), _jsx(Button, { type: "button", variant: "outline", size: "icon", disabled: disabled || current >= max, onClick: () => {
                     commit(current + step);
                 }, "aria-label": messages.numberInput.increment, className: "rounded-l-none", children: _jsx(PlusIcon, {}) })] }));

package/dist/globals.css

@@ -2123,6 +2123,10 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -4158,6 +4162,59 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -4355,6 +4412,19 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/forth-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -28,7 +28,7 @@
     "lucide-react": "^1.31.0",
     "qrcode": "^1.5.4",
     "shiki": "^4.4.3",
-    "@forthtilliath/react-kit": "^0.5.0",
+    "@forthtilliath/react-kit": "^0.6.0",
     "@forthtilliath/shadcn-ui": "^0.3.0",
     "@forthtilliath/ts-types": "^0.3.0"
   },
@@ -59,8 +59,8 @@
     "size-limit": "^14.1.0",
     "tailwindcss": "4.3.3",
     "typescript": "^5.9.3",
-    "@forthtilliath/typescript-config": "0.1.1",
-    "@forthtilliath/eslint-config": "0.8.0"
+    "@forthtilliath/eslint-config": "0.9.0",
+    "@forthtilliath/typescript-config": "0.1.1"
   },
   "files": [
     "dist"