@matthiaskrijgsman/mat-ui 0.0.0

package/README.md

@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/Badge.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type BadgeColorKey } from "./BadgeColors";
+import { type TablerIcon } from "@tabler/icons-react";
+export type BadgeProps = {
+    className?: string;
+    children?: React.ReactNode;
+    color?: BadgeColorKey;
+    onClick?: () => void;
+    showCloseIcon?: boolean;
+    Icon?: TablerIcon;
+};
+export declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/BadgeColors.d.ts

@@ -0,0 +1,27 @@
+export declare const BadgeColor: {
+    readonly red: "bg-red-100 text-red-700 ring-red-200";
+    readonly orange: "bg-orange-100 text-orange-700 ring-orange-200";
+    readonly amber: "bg-amber-100 text-amber-700 ring-amber-200";
+    readonly yellow: "bg-yellow-100 text-yellow-700 ring-yellow-200";
+    readonly lime: "bg-lime-100 text-lime-700 ring-lime-200";
+    readonly green: "bg-green-100 text-green-700 ring-green-200";
+    readonly emerald: "bg-emerald-100 text-emerald-700 ring-emerald-200";
+    readonly teal: "bg-teal-100 text-teal-700 ring-teal-200";
+    readonly cyan: "bg-cyan-100 text-cyan-700 ring-cyan-200";
+    readonly sky: "bg-sky-100 text-sky-700 ring-sky-200";
+    readonly blue: "bg-blue-100 text-blue-700 ring-blue-200";
+    readonly indigo: "bg-indigo-100 text-indigo-700 ring-indigo-200";
+    readonly violet: "bg-violet-100 text-violet-700 ring-violet-200";
+    readonly purple: "bg-purple-100 text-purple-700 ring-purple-200";
+    readonly fuchsia: "bg-fuchsia-100 text-fuchsia-700 ring-fuchsia-200";
+    readonly pink: "bg-pink-100 text-pink-700 ring-pink-200";
+    readonly rose: "bg-rose-100 text-rose-700 ring-rose-200";
+    readonly slate: "bg-slate-100 text-slate-700 ring-slate-200";
+    readonly gray: "bg-gray-100 text-gray-700 ring-gray-200";
+    readonly zinc: "bg-zinc-100 text-zinc-700 ring-zinc-200";
+    readonly neutral: "bg-neutral-100 text-neutral-700 ring-neutral-200";
+    readonly stone: "bg-stone-100 text-stone-700 ring-stone-200";
+    readonly white: "bg-white text-gray-900 ring-stone-200";
+    readonly black: "bg-black text-white ring-stone-200";
+};
+export type BadgeColorKey = keyof typeof BadgeColor;

package/dist/Button.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type Variant = 'primary' | 'white' | 'black' | 'transparent';
+export type Size = 'sm' | 'md' | 'lg';
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    children?: React.ReactNode;
+};
+export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/ButtonIconRound.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export type Variant = 'primary' | 'white' | 'black' | 'transparent';
+export type Size = 'sm' | 'md' | 'lg';
+import type { TablerIcon } from '@tabler/icons-react';
+export type ButtonIconRoundProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    Icon: TablerIcon;
+};
+export declare const ButtonIconRound: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    Icon: TablerIcon;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/ButtonIconSquare.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export type Variant = 'primary' | 'white' | 'black' | 'transparent';
+export type Size = 'sm' | 'md' | 'lg';
+import type { TablerIcon } from '@tabler/icons-react';
+export type ButtonIconSquareProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    Icon: TablerIcon;
+};
+export declare const ButtonIconSquare: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    Icon: TablerIcon;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/Divider.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export type DividerProps = {
+    vertical?: boolean;
+} & React.HTMLAttributes<HTMLHRElement>;
+export declare const Divider: (props: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Input.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type TablerIcon } from "@tabler/icons-react";
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    error?: string | React.ReactNode;
+    Icon?: TablerIcon;
+    buttonTray?: React.ReactNode;
+};
+export declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/InputCheck.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface InputCheckProps extends React.HTMLAttributes<HTMLInputElement> {
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    error?: string | React.ReactNode;
+}
+export declare const InputCheck: (props: InputCheckProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/InputDescription.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export type InputDescriptionProps = {
+    children?: React.ReactNode;
+};
+export declare const InputDescription: (props: InputDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/InputError.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export type InputErrorProps = {
+    children?: React.ReactNode;
+};
+export declare const InputError: (props: InputErrorProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/InputErrorIcon.d.ts

@@ -0,0 +1 @@
+export declare const InputErrorIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/InputIconButton.d.ts

@@ -0,0 +1,6 @@
+import { type TablerIcon } from "@tabler/icons-react";
+export type InputIconButtonProps = {
+    onClick?: () => void;
+    Icon: TablerIcon;
+};
+export declare const InputIconButton: (props: InputIconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/InputIconButtonTray.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export type InputIconButtonTrayProps = {
+    children?: React.ReactNode;
+    className?: string;
+};
+export declare const InputIconButtonTray: (props: InputIconButtonTrayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/InputLabel.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export type InputLabelProps = {
+    children?: React.ReactNode;
+};
+export declare const InputLabel: (props: InputLabelProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/InputPassword.d.ts

@@ -0,0 +1,5 @@
+import { type InputProps } from "@/Input.tsx";
+export type InputPasswordProps = InputProps & {
+    enableShowPasswordToggle?: boolean;
+};
+export declare const InputPassword: (props: InputPasswordProps) => import("react/jsx-runtime").JSX.Element;

package/dist/InputRadio.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export type InputRadioProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    name?: string;
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    error?: string | React.ReactNode;
+};
+export declare const InputRadio: (props: InputRadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/InputSelect.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export type InputSelectProps<T> = {
+    name?: string;
+    id?: string;
+    className?: string;
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    options: Option<T>[];
+    value: T | null;
+    onChange: (value: T | null) => void;
+    placeholder?: string;
+    maxHeight?: number;
+    error?: string | React.ReactNode;
+};
+export type Option<T> = {
+    label: string | React.ReactNode;
+    value: T;
+    disabled?: boolean;
+};
+export declare const InputSelect: <T>(props: InputSelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/InputSelectNative.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export type InputSelectNativeProps = React.InputHTMLAttributes<HTMLSelectElement> & {
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    options?: OptionNative[];
+    error?: string | React.ReactNode;
+};
+export type OptionNative = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export declare const InputSelectNative: (props: InputSelectNativeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/InputSelectOption.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+interface InputSelectOptionProps {
+    children: React.ReactNode;
+    selected: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export declare const InputSelectOption: (props: InputSelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/InputSelectSearchable.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type InputSelectSearchableProps<T> = {
+    name?: string;
+    id?: string;
+    className?: string;
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    options: Option<T>[];
+    onSearch: (search: string) => Option<T>[];
+    value: T | null;
+    onChange: (value: T | null) => void;
+    placeholder?: string;
+    maxHeight?: number;
+    error?: string | React.ReactNode;
+};
+export type Option<T> = {
+    label: string | React.ReactNode;
+    value: T;
+    disabled?: boolean;
+};
+export declare const InputSelectSearchable: <T>(props: InputSelectSearchableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/InputSelectSearchableAsync.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type InputSelectSearchableAsyncProps<T> = {
+    name?: string;
+    id?: string;
+    className?: string;
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    fetchOptionsByQuery: (search: string) => Promise<Option<T>[]>;
+    fetchOptionByValue: (value: T) => Promise<Option<T>>;
+    onSearchDebounceMs?: number;
+    value: T | null;
+    onChange: (value: T | null) => void;
+    placeholder?: string;
+    maxHeight?: number;
+    error?: string | React.ReactNode;
+};
+export type Option<T> = {
+    label: string | React.ReactNode;
+    value: T;
+    disabled?: boolean;
+};
+export declare const InputSelectSearchableAsync: <T>(props: InputSelectSearchableAsyncProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/InputTextArea.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type InputTextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    error?: string | React.ReactNode;
+};
+export declare const InputTextArea: (props: InputTextAreaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/InputToggle.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type InputToggleProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    error?: string | React.ReactNode;
+};
+export declare const InputToggle: (props: InputToggleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type ModalProps = {
+    open: boolean;
+    className?: string;
+    onOutsideClick?: () => void;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    maxWidth?: number;
+};
+export declare const Modal: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Panel.d.ts

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

package/dist/ScrollArea.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export type ScrollAreaProps = {
+    children?: React.ReactNode;
+};
+export declare const ScrollArea: (props: ScrollAreaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/TabButtons.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { TablerIcon } from "@tabler/icons-react";
+export type TabButton = {
+    label: string | React.ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+    href?: string;
+    Icon?: TablerIcon;
+};
+export type TabButtonsProps = {
+    className?: string;
+    tabs: TabButton[];
+};
+export declare const TabButtons: (props: TabButtonsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Test.d.ts

@@ -0,0 +1 @@
+export declare const Test: () => import("react/jsx-runtime").JSX.Element;

package/dist/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { Placement } from "@floating-ui/react";
+export type TooltipProps = {
+    children?: React.ReactNode;
+    content: React.ReactNode;
+    className?: string;
+    placement?: Placement;
+    minWidth?: number;
+    maxWidth?: number;
+};
+export declare const Tooltip: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/hooks/use-debounce.d.ts

@@ -0,0 +1 @@
+export declare const useDebounce: <T>(value: T, delay: number) => T;

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { Button } from "./Button.tsx";
+import { ButtonIconSquare } from "./ButtonIconSquare.tsx";
+import { ButtonIconRound } from "./ButtonIconRound.tsx";
+import { Input } from "./Input.tsx";
+import { InputCheck } from "./InputCheck.tsx";
+import { InputSelect } from "./InputSelect.tsx";
+import { InputSelectNative } from "./InputSelectNative.tsx";
+import { Panel } from "./Panel.tsx";
+import { Divider } from "./Divider.tsx";
+import { Test } from "./Test.tsx";
+export { Button, Input, InputSelectNative, InputSelect, InputCheck, Panel, ButtonIconSquare, ButtonIconRound, Divider, Test };