@matthiaskrijgsman/mat-ui 0.0.19 → 0.0.21

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 |

package/dist/components/AutoScroll.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type AutoScrollProps = {
+    duration?: number;
+    ease?: "linear" | "easeIn" | "easeOut" | "easeInOut";
+    horizontal?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const AutoScroll: (props: AutoScrollProps) => 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/index.d.ts

@@ -14,6 +14,9 @@ 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";
@@ -30,6 +33,7 @@ export { SidebarModal } from "./components/SidebarModal.tsx";
 export { Badge } from "./components/Badge.tsx";
 export { BadgeColor } from "./components/BadgeColors.tsx";
 export { TabButtons } from "./components/TabButtons.tsx";
+export { AutoScroll } from "./components/AutoScroll.tsx";
 export { Spinner } from "./spinner/Spinner.tsx";
 export { DropdownButton } from "./components/dropdown-menu/DropdownButton.tsx";
 export { DropdownButtonGroup } from "./components/dropdown-menu/DropdownButtonGroup.tsx";