@matthiaskrijgsman/mat-ui 0.0.24 → 0.0.26

package/README.md

@@ -89,7 +89,7 @@ Define your overrides after importing the mat-ui stylesheet:
 
 #### Control sizing
 
-`Button`, `ButtonIconSquare`, `ButtonIconRound`, `Input`, `InputTextArea`, `InputSelectNative`, `InputSelect`, `InputSelectSearchable`, and `InputSelectSearchableAsync` accept a `size?: 'sm' | 'md' | 'lg'` prop (default `'md'`) and read their dimensions from a single shared scale. Override these to adjust heights, padding, font size, and icon sizing consistently across all controls. Replace `{size}` with `sm`, `md`, or `lg`.
+`Button`, `ButtonIconSquare`, `ButtonIconRound`, `Input`, `InputColor`, `InputTextArea`, `InputSelectNative`, `InputSelect`, `InputSelectSearchable`, and `InputSelectSearchableAsync` accept a `size?: 'sm' | 'md' | 'lg'` prop (default `'md'`) and read their dimensions from a single shared scale. Override these to adjust heights, padding, font size, and icon sizing consistently across all controls. Replace `{size}` with `sm`, `md`, or `lg`.
 
 | Token | Description | sm · md · lg defaults |
 |-------|-------------|------------------------|
@@ -156,6 +156,10 @@ Each button variant (`primary`, `white`, `black`, `transparent`, `secondary`, `t
 
 All three components also rely on the shared `--color-status-success` / `--color-status-error` tokens for the green check / red error icons in their upload-state slots.
 
+#### Color input
+
+`InputColor` reuses the standard input tokens — the color swatch in the field and the outline of the picker's saturation/value plane both derive from `--color-input-border`, and the field itself uses the same `--color-input-*` tokens as `Input`. The picker's hue/brightness gradients and indicator rings are intrinsic to the color-picking UI (not theme-based) and are intentionally not tokenized.
+
 #### Select options
 
 | Token | Description | Light default |

package/dist/components/inputs/InputColor.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type Size = 'sm' | 'md' | 'lg';
+export type InputColorProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    error?: string | React.ReactNode;
+    buttonTray?: React.ReactNode;
+    size?: Size;
+};
+export declare const InputColor: (props: InputColorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/hooks/use-pointer-drag.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export declare const usePointerDrag: (onPosition: (clientX: number, clientY: number, rect: DOMRect) => void) => {
+    isDragging: boolean;
+    bind: {
+        onPointerDown: (e: React.PointerEvent) => void;
+        onPointerMove: (e: React.PointerEvent) => void;
+        onPointerUp: (e: React.PointerEvent) => void;
+        onPointerCancel: (e: React.PointerEvent) => void;
+    };
+};

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { Button } from "./components/button/Button.tsx";
 export { ButtonIconSquare } from "./components/button-icon-square/ButtonIconSquare.tsx";
 export { ButtonIconRound } from "./components/button-icon-round/ButtonIconRound.tsx";
 export { Input } from "./components/inputs/Input.tsx";
+export { InputColor } from "./components/inputs/InputColor.tsx";
 export { InputPassword } from "./components/inputs/InputPassword.tsx";
 export { InputTextArea } from "./components/inputs/InputTextArea.tsx";
 export { InputRadio } from "./components/inputs/InputRadio.tsx";