@matthiaskrijgsman/mat-ui 0.0.18 → 0.0.20

package/README.md

@@ -146,6 +146,16 @@ Each button variant (`primary`, `white`, `black`, `transparent`, `secondary`, `t
 | `--color-input-icon-button-ring` | Ring color for icon buttons inside inputs | `#e5e7eb` |
 | `--color-input-icon-button-icon` | Icon color for icon buttons inside inputs | `#6b7280` |
 
+#### File inputs
+
+`InputFileSingle` and `UploadFileTile` are composed from existing primitives (input tokens, `Button` for the inset "Choose" button, `ButtonIconSquare` for the remove (X) button) — no dedicated tokens of their own. `InputFileMultiple` adds:
+
+| Token | Description | Light default |
+|-------|-------------|---------------|
+| `--color-input-file-icon-bg` | Background of the central icon frame inside `InputFileMultiple`'s dropzone | `#f3f4f6` |
+
+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.
+
 #### Select options
 
 | Token | Description | Light default |
@@ -212,6 +222,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
 
@@ -231,6 +242,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` |
@@ -253,3 +265,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/inputs/input-file/InputFileMultiple.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type Accept, type FileRejection } from "react-dropzone";
+import { type TablerIcon } from "@tabler/icons-react";
+import { type UploadFileTileProps } from "@/components/inputs/input-file/UploadFileTile.tsx";
+export type InputFileMultipleProps = {
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    error?: string | React.ReactNode;
+    title?: string;
+    hint?: React.ReactNode;
+    Icon?: TablerIcon;
+    onUpload?: (file: File) => Promise<void> | void;
+    onFileRemoved?: (file: File) => void;
+    onDropRejected?: (fileRejections: FileRejection[]) => void;
+    renderFileTile?: (file: File, defaultProps: UploadFileTileProps) => React.ReactNode;
+    accept?: Accept;
+    maxSize?: number;
+    minSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    className?: string;
+};
+export declare const InputFileMultiple: (props: InputFileMultipleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-file/InputFileSingle.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { type Accept, type FileRejection } from "react-dropzone";
+import { type TablerIcon } from "@tabler/icons-react";
+export type Size = 'sm' | 'md' | 'lg';
+export type InputFileSingleProps = {
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    error?: string | React.ReactNode;
+    placeholder?: string;
+    buttonText?: string;
+    Icon?: TablerIcon;
+    size?: Size;
+    value?: File | null;
+    isUploaded?: boolean;
+    isUploading?: boolean;
+    onChange?: (file: File | null) => void | Promise<void>;
+    onDropRejected?: (fileRejections: FileRejection[]) => void;
+    accept?: Accept;
+    maxSize?: number;
+    minSize?: number;
+    disabled?: boolean;
+    className?: string;
+};
+export declare const InputFileSingle: (props: InputFileSingleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-file/UploadFileTile.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type UploadFileTileProps = {
+    file: File;
+    isUploaded?: boolean;
+    isUploading?: boolean;
+    error?: string | React.ReactNode;
+    onRemove?: () => void;
+    className?: string;
+};
+export declare const UploadFileTile: (props: UploadFileTileProps) => 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

@@ -14,12 +14,18 @@ export { InputError } from "./components/inputs/InputError.tsx";
 export { InputErrorIcon } from "./components/inputs/InputErrorIcon.tsx";
 export { InputIconButton } from "./components/inputs/InputIconButton.tsx";
 export { InputIconButtonTray } from "./components/inputs/InputIconButtonTray.tsx";
+export { InputFileSingle } from "./components/inputs/input-file/InputFileSingle.tsx";
+export { InputFileMultiple } from "./components/inputs/input-file/InputFileMultiple.tsx";
+export { UploadFileTile } from "./components/inputs/input-file/UploadFileTile.tsx";
 export { InputSelectNative } from "./components/inputs/InputSelectNative.tsx";
 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";