@matthiaskrijgsman/mat-ui 0.0.1 → 0.0.3

package/README.md

@@ -1,129 +0,0 @@
-# Mat UI
-
-Reusable React UI components built with TypeScript, Vite, and Tailwind.
-
-## Installation
-
-```
-pnpm add mat-ui
-```
-
-## Using with Tailwind
-
-This library uses Tailwind utility classes inside its components. When you consume it in another project, make sure your Tailwind build scans the library so those classes are included in your consumer’s CSS output.
-
-- Tailwind v4 (with `@tailwindcss/vite`): add an `@source` directive in your Tailwind entry CSS (the file that contains `@import "tailwindcss";`). Adjust the path if your setup differs.
-
-  ```css
-  /* e.g. src/styles/tailwind.css in your app */
-  @import "tailwindcss";
-  @source "./node_modules/mat-ui/dist/**/*.{js,jsx,ts,tsx}";
-  ```
-
-- Tailwind v3 (classic config): include `mat-ui` in your `content` globs so the scanner sees class names inside the library.
-
-  ```ts
-  // tailwind.config.{js,ts}
-  export default {
-    content: [
-      "./src/**/*.{js,jsx,ts,tsx}",
-      "./node_modules/mat-ui/dist/**/*.{js,jsx,ts,tsx}",
-    ],
-    // ...rest
-  }
-  ```
-
-Notes
-
-- The classes in this library are static strings (no dynamic `pl-${n}` patterns), so Tailwind will pick them up as long as your scanner points at the files.
-- If your app does NOT use Tailwind but you still want to use these components, open an issue. We can expose an optional compiled CSS you can import, but see the theming note below.
-
-## Theming (future-friendly)
-
-To support consumer-driven theming, prefer the scanning approach above so the consumer’s Tailwind config remains the source of truth for tokens (colors, spacing, etc.). This allows:
-
-- Tailwind v4 tokens via `@theme` in the consumer’s CSS to affect all utilities (including those used by `mat-ui`).
-- Tailwind v3 theme customization via the consumer’s `tailwind.config`.
-
-Why CSS isn’t auto-shipped by default: bundling compiled Tailwind CSS inside the library locks in the generated values and can conflict with the consumer’s theme. By letting the consumer generate the utilities, they stay in control of colors, spacing, radii, etc.
-
-Optional path (on request): we can add an opt-in CSS artifact (e.g., `mat-ui/dist/style.css`) for non-Tailwind consumers to import:
-
-```ts
-// Consumer app
-import '@matthiaskrijgsman/mat-ui/style.css';
-```
-
-This is convenient but won’t reflect the consumer’s Tailwind theme tokens.
-
----
-
-# 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 → components/Badge.d.ts}

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type BadgeColorKey } from "./BadgeColors";
+import { type BadgeColorKey } from "./BadgeColors.tsx";
 import { type TablerIcon } from "@tabler/icons-react";
 export type BadgeProps = {
     className?: string;
@@ -9,4 +9,4 @@ export type BadgeProps = {
     showCloseIcon?: boolean;
     Icon?: TablerIcon;
 };
-export declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/{Modal.d.ts → components/Modal.d.ts}

@@ -2,8 +2,10 @@ import * as React from "react";
 export type ModalProps = {
     open: boolean;
     className?: string;
-    onOutsideClick?: () => void;
-    onClose?: () => void;
+    onDismiss?: () => void;
+    enableDismissOnOutsideClick?: boolean;
+    enableDismissOnEscKey?: boolean;
+    enableDismissButton?: boolean;
     children?: React.ReactNode;
     maxWidth?: number;
 };

package/dist/{Button.d.ts → components/button/Button.d.ts}

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type Variant = 'primary' | 'white' | 'black' | 'transparent';
+export type Variant = 'primary' | 'secondary' | 'tertiary' | 'white' | 'black' | 'transparent';
 export type Size = 'sm' | 'md' | 'lg';
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: Variant;

package/dist/{ButtonIconRound.d.ts → components/button-icon-round/ButtonIconRound.d.ts}

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type Variant = 'primary' | 'white' | 'black' | 'transparent';
+export type Variant = 'primary' | 'secondary' | 'tertiary' | 'white' | 'black' | 'transparent';
 export type Size = 'sm' | 'md' | 'lg';
 import type { TablerIcon } from '@tabler/icons-react';
 export type ButtonIconRoundProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {

package/dist/{ButtonIconSquare.d.ts → components/button-icon-square/ButtonIconSquare.d.ts}

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type Variant = 'primary' | 'white' | 'black' | 'transparent';
+export type Variant = 'primary' | 'secondary' | 'tertiary' | 'white' | 'black' | 'transparent';
 export type Size = 'sm' | 'md' | 'lg';
 import type { TablerIcon } from '@tabler/icons-react';
 export type ButtonIconSquareProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {

package/dist/{InputCheck.d.ts → components/inputs/InputCheck.d.ts}

@@ -1,8 +1,7 @@
 import * as React from "react";
-interface InputCheckProps extends React.HTMLAttributes<HTMLInputElement> {
+export 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/{InputPassword.d.ts → components/inputs/InputPassword.d.ts}

@@ -1,4 +1,4 @@
-import { type InputProps } from "@/Input.tsx";
+import { type InputProps } from "@/components/inputs/Input.tsx";
 export type InputPasswordProps = InputProps & {
     enableShowPasswordToggle?: boolean;
 };

package/dist/{InputSelectOption.d.ts → components/inputs/InputSelectOption.d.ts}

@@ -1,9 +1,8 @@
 import * as React from "react";
-interface InputSelectOptionProps {
+export 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/hooks/use-dismiss.d.ts

@@ -0,0 +1 @@
+export declare const useDismiss: (active: boolean, onDismiss: () => void) => void;

package/dist/index.d.ts

@@ -1,11 +1,13 @@
-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";
+import "./style.css";
+import { Button } from "./components/button/Button.tsx";
+import { ButtonIconSquare } from "./components/button-icon-square/ButtonIconSquare.tsx";
+import { ButtonIconRound } from "./components/button-icon-round/ButtonIconRound.tsx";
+import { Input } from "./components/inputs/Input.tsx";
+import { InputCheck } from "./components/inputs/InputCheck.tsx";
+import { InputSelect } from "./components/inputs/InputSelect.tsx";
+import { InputSelectNative } from "./components/inputs/InputSelectNative.tsx";
+import { Panel } from "./components/Panel.tsx";
+import { Divider } from "./components/Divider.tsx";
+import { Test } from "./components/Test.tsx";
 export { Button, Input, InputSelectNative, InputSelect, InputCheck, Panel, ButtonIconSquare, ButtonIconRound, Divider, Test };
+export * from "./types.ts";