@matthiaskrijgsman/mat-ui 0.0.17 → 0.0.19

package/README.md

@@ -87,6 +87,19 @@ Define your overrides after importing the mat-ui stylesheet:
 | `--color-input-focus-ring` | Focus ring color for buttons and inputs | `rgb(17 24 39 / 0.15)` |
 | `--border-radius-input` | Border radius for inputs and selects | `var(--radius-xl)` |
 
+#### 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`.
+
+| Token | Description | sm · md · lg defaults |
+|-------|-------------|------------------------|
+| `--control-size-{size}-height` | Control height (also width for square/round icon buttons) | `2.5rem` · `3rem` · `3.5rem` |
+| `--control-size-{size}-px` | Horizontal padding | `1rem` · `1rem` · `1.25rem` |
+| `--control-size-{size}-gap` | Gap between icon and label inside buttons | `0.5rem` · `0.5rem` · `0.75rem` |
+| `--control-size-{size}-font-size` | Text size | `1rem` · `1rem` · `1rem` |
+| `--control-size-{size}-icon` | Icon glyph size inside controls | `1rem` · `1.25rem` · `1.5rem` |
+| `--control-size-{size}-icon-offset` | Distance from the input edge to a leading icon (used when an `Icon` prop is set on `Input`) | `1rem` · `1rem` · `1.25rem` |
+
 #### Buttons
 
 Each button variant (`primary`, `white`, `black`, `transparent`, `secondary`, `tertiary`) uses the same set of tokens. Replace `{variant}` with the variant name.
@@ -199,6 +212,7 @@ Each button variant (`primary`, `white`, `black`, `transparent`, `secondary`, `t
 |-------|-------------|---------------|
 | `--color-panel-bg` | Panel background | `#ffffff` |
 | `--color-panel-border` | Panel border | `#e5e7eb` |
+| `--color-panel-text` | Panel default text color (inherited by `PanelField`) | `#111827` |
 
 #### Modal & Sidebar modal
 
@@ -218,6 +232,7 @@ Each button variant (`primary`, `white`, `black`, `transparent`, `secondary`, `t
 | `--color-table-border` | Table border color | `#e5e7eb` |
 | `--color-table-row-bg` | Row background | `#ffffff` |
 | `--color-table-row-bg-hover` | Row background on hover | `#f9fafb` |
+| `--color-table-row-text` | Row text color | `#111827` |
 | `--color-table-resize-handle` | Column resize handle | `#e5e7eb` |
 | `--color-table-resize-handle-hover` | Resize handle on hover | `#d1d5db` |
 | `--color-table-resize-handle-active` | Resize handle while dragging | `#2563eb` |
@@ -240,3 +255,14 @@ Each button variant (`primary`, `white`, `black`, `transparent`, `secondary`, `t
 | `--color-badge-black-ring` | Black badge ring | `#d6d3d1` |
 
 > Colored badges (red, blue, green, etc.) use Tailwind color utility classes and are not token-based. They adapt to dark mode automatically via Tailwind's `dark:` variants.
+
+#### Status
+
+Shared color tokens for status/notification indicators. Currently used by `PanelLink`'s `status` prop, but available for any component.
+
+| Token | Description | Light default |
+|-------|-------------|---------------|
+| `--color-status-error` | Error / destructive state | `#dc2626` |
+| `--color-status-warning` | Warning state | `#f59e0b` |
+| `--color-status-success` | Success state | `#16a34a` |
+| `--color-status-info` | Informational state | `#2563eb` |

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

@@ -5,5 +5,7 @@ export type InputTextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElemen
     description?: string | React.ReactNode;
     error?: string | React.ReactNode;
     size?: Size;
+    autogrow?: boolean;
+    ref?: React.Ref<HTMLTextAreaElement>;
 };
 export declare const InputTextArea: (props: InputTextAreaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/panel/PanelField.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export type PanelFieldOrientation = 'vertical' | 'horizontal';
+export type PanelFieldProps = React.HTMLAttributes<HTMLDivElement> & {
+    label?: string | React.ReactNode;
+    children?: React.ReactNode;
+    orientation?: PanelFieldOrientation;
+};
+export declare const PanelField: (props: PanelFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/panel/PanelLink.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type TablerIcon } from "@tabler/icons-react";
+export type PanelLinkStatus = 'error' | 'warning' | 'success' | 'info';
+type PanelLinkBaseProps = {
+    Icon?: TablerIcon;
+    children?: React.ReactNode;
+    status?: PanelLinkStatus;
+};
+type PanelLinkAnchorProps = PanelLinkBaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof PanelLinkBaseProps> & {
+    href: string;
+};
+type PanelLinkButtonProps = PanelLinkBaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof PanelLinkBaseProps> & {
+    href?: undefined;
+};
+export type PanelLinkProps = PanelLinkAnchorProps | PanelLinkButtonProps;
+export declare const PanelLink: (props: PanelLinkProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/panel/PanelStack.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type PanelStackProps = React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+};
+export declare const PanelStack: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -19,7 +19,10 @@ export { InputSelect } from "./components/inputs/InputSelect.tsx";
 export { InputSelectSearchable } from "./components/inputs/InputSelectSearchable.tsx";
 export { InputSelectSearchableAsync } from "./components/inputs/InputSelectSearchableAsync.tsx";
 export { InputSelectOption } from "./components/inputs/InputSelectOption.tsx";
-export { Panel } from "./components/Panel.tsx";
+export { Panel } from "./components/panel/Panel.tsx";
+export { PanelStack } from "./components/panel/PanelStack.tsx";
+export { PanelField } from "./components/panel/PanelField.tsx";
+export { PanelLink } from "./components/panel/PanelLink.tsx";
 export { Divider } from "./components/Divider.tsx";
 export { Tooltip } from "./components/Tooltip.tsx";
 export { Modal } from "./components/Modal.tsx";