@matthiaskrijgsman/mat-ui 0.0.28 → 0.0.30

package/README.md

@@ -49,6 +49,112 @@ function App() {
 }
 ```
 
+## Rich text editor (`InputLexical`)
+
+`InputLexical` is a [Lexical](https://lexical.dev)-powered rich text editor styled like the rest of the kit. It ships with two toolbar variants that share the exact same controls:
+
+- **`static`** (default) — a light toolbar fixed at the top of the editor.
+- **`floating`** — a dark bar that appears above the editor while it is focused, matching the editor width.
+
+Lexical and its plugins are **peer dependencies** — install them alongside the library:
+
+```bash
+pnpm add lexical @lexical/react @lexical/rich-text @lexical/list @lexical/link @lexical/selection @lexical/utils
+```
+
+### Basic usage
+
+The value is a **serialized Lexical editor state** (a JSON string). Pass the last `onChange` value back as `value` to restore content.
+
+```tsx
+import { useState } from "react";
+import { InputLexical } from "@matthiaskrijgsman/mat-ui";
+
+function Editor() {
+  const [value, setValue] = useState<string>();
+
+  return (
+    <InputLexical
+      label={"Description"}
+      placeholder={"Write something…"}
+      toolbar={"floating"}     // or "static" (default)
+      value={value}
+      onChange={setValue}
+      autogrow                 // grow with content…
+      minRows={4}              // …from a 4-row floor…
+      maxRows={12}             // …up to 12 rows, then scroll
+    />
+  );
+}
+```
+
+Sizing mirrors `InputTextArea`: `minRows` sets a height floor, `maxRows` caps the height (content beyond it scrolls), and `autogrow` lets the editor grow with its content between the two. Without `autogrow` the editor is fixed at `minRows`.
+
+### Extending the toolbar
+
+The toolbar is assembled from exported **building blocks**, so you can reorder, drop, or add controls via the `renderToolbar` slot. It receives `{ editor, state, tone }` and renders into whichever variant is active — the same render function drives both the static and floating bars.
+
+```tsx
+import {
+  InputLexical,
+  LexicalBlockTypeSelect,
+  LexicalFormatButtons,
+  LexicalListButtons,
+  LexicalLinkButton,
+  LexicalHistoryButtons,
+  LexicalToolbarDivider,
+} from "@matthiaskrijgsman/mat-ui";
+
+<InputLexical
+  renderToolbar={() => (
+    <>
+      <LexicalFormatButtons/>
+      <LexicalToolbarDivider/>
+      <LexicalListButtons/>
+      <LexicalLinkButton/>
+      <LexicalToolbarDivider/>
+      <LexicalHistoryButtons/>
+    </>
+  )}
+/>;
+```
+
+Building blocks read the active editor and formatting `state`/`tone` from context, so they work in either variant with no extra wiring. Dividers automatically flip orientation (and the whole toolbar collapses overflowing controls into a vertical `⋮` dropdown) when space runs out — return each control as a top-level child so it stays individually measurable.
+
+#### Custom controls
+
+Build your own control with `LexicalToolbarButton` plus Lexical's editor context. `useLexicalToolbar()` exposes the current `{ state, tone }`:
+
+```tsx
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import { IconStrikethrough } from "@tabler/icons-react";
+import { LexicalToolbarButton, useLexicalToolbar } from "@matthiaskrijgsman/mat-ui";
+
+const StrikethroughButton = () => {
+  const [editor] = useLexicalComposerContext();
+  const { tone } = useLexicalToolbar();
+  return (
+    <LexicalToolbarButton
+      Icon={IconStrikethrough}
+      tone={tone}
+      aria-label={"Strikethrough"}
+      onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough")}
+    />
+  );
+};
+```
+
+#### Registering extra Lexical nodes
+
+If a plugin needs additional nodes (tables, mentions, code blocks, …), pass them via the `nodes` prop — they are registered alongside the built-in set (headings, lists, links, quotes):
+
+```tsx
+import { CodeNode } from "@lexical/code";
+
+<InputLexical nodes={[CodeNode]} renderToolbar={/* … */} />;
+```
+
 ## Dark Theme
 
 mat-ui ships with built-in dark theme support. Add the `dark` class to the `<html>` element to activate it:

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

@@ -3,4 +3,4 @@ export type InputIconButtonTrayProps = {
     children?: React.ReactNode;
     className?: string;
 };
-export declare const InputIconButtonTray: (props: InputIconButtonTrayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputIconButtonTray: React.ForwardRefExoticComponent<InputIconButtonTrayProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type SelectItem } from "@/components/inputs/select-item.ts";
 export type Size = 'sm' | 'md' | 'lg';
 export type InputSelectProps<T> = {
     name?: string;
@@ -6,7 +7,7 @@ export type InputSelectProps<T> = {
     className?: string;
     label?: string | React.ReactNode;
     description?: string | React.ReactNode;
-    options: Option<T>[];
+    options: SelectItem<T>[];
     value: T | null;
     onChange: (value: T | null) => void;
     placeholder?: string;
@@ -14,9 +15,5 @@ export type InputSelectProps<T> = {
     error?: string | React.ReactNode;
     size?: Size;
 };
-export type Option<T> = {
-    label: string | React.ReactNode;
-    value: T;
-    disabled?: boolean;
-};
+export type { Option, SelectGroupHeader, SelectDivider, SelectItem } from "@/components/inputs/select-item.ts";
 export declare const InputSelect: <T>(props: InputSelectProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+export type InputSelectDividerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const InputSelectDivider: React.ForwardRefExoticComponent<InputSelectDividerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface InputSelectGroupHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare const InputSelectGroupHeader: React.ForwardRefExoticComponent<InputSelectGroupHeaderProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type BadgeColorKey } from "@/components/BadgeColors.tsx";
+import { type SelectItem } from "@/components/inputs/select-item.ts";
+export type Size = 'sm' | 'md' | 'lg';
+export type InputSelectMultipleProps<T> = {
+    name?: string;
+    id?: string;
+    className?: string;
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    options: SelectItem<T>[];
+    onSearch?: (search: string) => SelectItem<T>[];
+    value: T[];
+    onChange: (value: T[]) => void;
+    placeholder?: string;
+    maxHeight?: number;
+    error?: string | React.ReactNode;
+    size?: Size;
+    singleLine?: boolean;
+    color?: BadgeColorKey;
+};
+export declare const InputSelectMultiple: <T>(props: InputSelectMultipleProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,9 @@
 import * as React from "react";
-export interface InputSelectOptionProps {
+export interface InputSelectOptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
     children: React.ReactNode;
     selected: boolean;
     disabled?: boolean;
+    active?: boolean;
     onClick?: () => void;
 }
-export declare const InputSelectOption: (props: InputSelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputSelectOption: React.ForwardRefExoticComponent<InputSelectOptionProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { type SelectItem } from "@/components/inputs/select-item.ts";
+export type { Option } from "@/components/inputs/select-item.ts";
 export type Size = 'sm' | 'md' | 'lg';
 export type InputSelectSearchableProps<T> = {
     name?: string;
@@ -6,8 +8,8 @@ export type InputSelectSearchableProps<T> = {
     className?: string;
     label?: string | React.ReactNode;
     description?: string | React.ReactNode;
-    options: Option<T>[];
-    onSearch: (search: string) => Option<T>[];
+    options: SelectItem<T>[];
+    onSearch: (search: string) => SelectItem<T>[];
     value: T | null;
     onChange: (value: T | null) => void;
     placeholder?: string;
@@ -15,9 +17,4 @@ export type InputSelectSearchableProps<T> = {
     error?: string | React.ReactNode;
     size?: Size;
 };
-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/components/inputs/InputSelectSearchableAsync.d.ts

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { type Option, type SelectItem } from "@/components/inputs/select-item.ts";
+export type { Option } from "@/components/inputs/select-item.ts";
 export type Size = 'sm' | 'md' | 'lg';
 export type InputSelectSearchableAsyncProps<T> = {
     name?: string;
@@ -6,7 +8,7 @@ export type InputSelectSearchableAsyncProps<T> = {
     className?: string;
     label?: string | React.ReactNode;
     description?: string | React.ReactNode;
-    fetchOptionsByQuery: (search: string) => Promise<Option<T>[]>;
+    fetchOptionsByQuery: (search: string) => Promise<SelectItem<T>[]>;
     fetchOptionByValue: (value: T) => Promise<Option<T>>;
     onSearchDebounceMs?: number;
     value: T | null;
@@ -16,9 +18,4 @@ export type InputSelectSearchableAsyncProps<T> = {
     error?: string | React.ReactNode;
     size?: Size;
 };
-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/components/inputs/input-lexical/InputLexical.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { Klass, LexicalNode } from "lexical";
+import type { LexicalToolbarRender } from "@/components/inputs/input-lexical/use-lexical-toolbar.ts";
+export type Size = "sm" | "md" | "lg";
+export type LexicalToolbarVariant = "static" | "floating";
+export type InputLexicalProps = {
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    error?: string | React.ReactNode;
+    placeholder?: string;
+    /** Serialized editor state (JSON string from a previous onChange), or undefined for empty. */
+    value?: string;
+    onChange?: (value: string) => void;
+    size?: Size;
+    toolbar?: LexicalToolbarVariant;
+    /** Override the default toolbar content. Drop in the exported building blocks. */
+    renderToolbar?: LexicalToolbarRender;
+    /** Minimum visible rows — sets a height floor for the editable area. */
+    minRows?: number;
+    /** Maximum visible rows. Content beyond this scrolls. */
+    maxRows?: number;
+    /** Grow the editor with its content (between minRows and maxRows). */
+    autogrow?: boolean;
+    namespace?: string;
+    /** Extra Lexical nodes to register alongside the built-in set. */
+    nodes?: Array<Klass<LexicalNode>>;
+    autoFocus?: boolean;
+    className?: string;
+};
+export declare const InputLexical: (props: InputLexicalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalBlockTypeSelect.d.ts

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

package/dist/components/inputs/input-lexical/LexicalFloatingToolbar.d.ts

@@ -0,0 +1,5 @@
+import { type LexicalToolbarRender } from "@/components/inputs/input-lexical/use-lexical-toolbar.ts";
+export type LexicalFloatingToolbarProps = {
+    render?: LexicalToolbarRender;
+};
+export declare const LexicalFloatingToolbar: (props: LexicalFloatingToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalFormatButtons.d.ts

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

package/dist/components/inputs/input-lexical/LexicalHistoryButtons.d.ts

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

package/dist/components/inputs/input-lexical/LexicalLinkButton.d.ts

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

package/dist/components/inputs/input-lexical/LexicalListButtons.d.ts

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

package/dist/components/inputs/input-lexical/LexicalToolbar.d.ts

@@ -0,0 +1,8 @@
+import { type LexicalToolbarRender } from "@/components/inputs/input-lexical/use-lexical-toolbar.ts";
+export declare const lexicalDefaultToolbarItems: () => import("react/jsx-runtime").JSX.Element;
+export declare const LexicalDefaultToolbarContent: () => import("react/jsx-runtime").JSX.Element;
+export type LexicalToolbarProps = {
+    render?: LexicalToolbarRender;
+    className?: string;
+};
+export declare const LexicalToolbar: (props: LexicalToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalToolbarButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { TablerIcon } from "@tabler/icons-react";
+import type { LexicalToolbarTone } from "@/components/inputs/input-lexical/use-lexical-toolbar.ts";
+export type LexicalToolbarButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    Icon: TablerIcon;
+    active?: boolean;
+    tone?: LexicalToolbarTone;
+};
+export declare const LexicalToolbarButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    Icon: TablerIcon;
+    active?: boolean;
+    tone?: LexicalToolbarTone;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/inputs/input-lexical/LexicalToolbarDivider.d.ts

@@ -0,0 +1,6 @@
+import { type LexicalToolbarTone } from "@/components/inputs/input-lexical/use-lexical-toolbar.ts";
+export type LexicalToolbarDividerProps = {
+    tone?: LexicalToolbarTone;
+    className?: string;
+};
+export declare const LexicalToolbarDivider: (props: LexicalToolbarDividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalToolbarItems.d.ts

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

package/dist/components/inputs/input-lexical/lexical-theme.d.ts

@@ -0,0 +1,26 @@
+import type { Klass, LexicalNode } from "lexical";
+export declare const LEXICAL_NODES: Array<Klass<LexicalNode>>;
+export declare const lexicalTheme: {
+    paragraph: string;
+    heading: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+    };
+    quote: string;
+    list: {
+        ul: string;
+        ol: string;
+        listitem: string;
+        nested: {
+            listitem: string;
+        };
+    };
+    link: string;
+    text: {
+        bold: string;
+        italic: string;
+        underline: string;
+    };
+};

package/dist/components/inputs/input-lexical/use-lexical-toolbar.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { type LexicalEditor } from "lexical";
+export type LexicalBlockType = "paragraph" | "h1" | "h2" | "h3" | "h4";
+export type LexicalToolbarState = {
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+    isLink: boolean;
+    isUnorderedList: boolean;
+    isOrderedList: boolean;
+    blockType: LexicalBlockType;
+    canUndo: boolean;
+    canRedo: boolean;
+};
+export declare const DEFAULT_LEXICAL_TOOLBAR_STATE: LexicalToolbarState;
+export type LexicalToolbarTone = "light" | "dark";
+export type LexicalToolbarOrientation = "horizontal" | "vertical";
+export type LexicalToolbarContextValue = {
+    state: LexicalToolbarState;
+    tone: LexicalToolbarTone;
+    orientation?: LexicalToolbarOrientation;
+};
+export declare const LexicalToolbarContext: React.Context<LexicalToolbarContextValue>;
+export declare const useLexicalToolbar: () => LexicalToolbarContextValue;
+export declare const useLexicalToolbarState: () => LexicalToolbarState;
+export type LexicalToolbarRenderContext = {
+    editor: LexicalEditor;
+    state: LexicalToolbarState;
+    tone: LexicalToolbarTone;
+};
+export type LexicalToolbarRender = (ctx: LexicalToolbarRenderContext) => React.ReactNode;

package/dist/components/inputs/select-item.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type Option<T> = {
+    label: string | React.ReactNode;
+    value: T;
+    disabled?: boolean;
+};
+export type SelectGroupHeader = {
+    kind: 'header';
+    label: string | React.ReactNode;
+};
+export type SelectDivider = {
+    kind: 'divider';
+};
+export type SelectItem<T> = Option<T> | SelectGroupHeader | SelectDivider;
+export declare const isSelectOption: <T>(item: SelectItem<T>) => item is Option<T>;

package/dist/control-size/control-size.util.d.ts

@@ -7,6 +7,7 @@ export declare const sizePaddingXClasses: Record<ControlSize, string>;
 export declare const sizePaddingLeftClasses: Record<ControlSize, string>;
 export declare const sizePaddingRightClasses: Record<ControlSize, string>;
 export declare const sizePaddingRightWithTrayClasses: Record<ControlSize, string>;
+export declare const sizePaddingRightWithTrayTwoClasses: Record<ControlSize, string>;
 export declare const sizePaddingLeftWithIconClasses: Record<ControlSize, string>;
 export declare const sizeIconLeftPositionClasses: Record<ControlSize, string>;
 export declare const sizeTrayRightPositionClasses: Record<ControlSize, string>;

package/dist/hooks/use-overflow-fit.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from "react";
+type UseOverflowFitOptions = {
+    enabled: boolean;
+    triggerRef: RefObject<HTMLElement | null>;
+    measureRef: RefObject<HTMLElement | null>;
+    trayRef?: RefObject<HTMLElement | null>;
+    itemCount: number;
+    deps?: ReadonlyArray<unknown>;
+    gap?: number;
+};
+export declare function useOverflowFit(options: UseOverflowFitOptions): number;
+export {};

package/dist/index.d.ts

@@ -18,11 +18,28 @@ 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 { InputLexical } from "./components/inputs/input-lexical/InputLexical.tsx";
+export { LexicalToolbar, LexicalDefaultToolbarContent } from "./components/inputs/input-lexical/LexicalToolbar.tsx";
+export { LexicalFloatingToolbar } from "./components/inputs/input-lexical/LexicalFloatingToolbar.tsx";
+export { LexicalToolbarItems } from "./components/inputs/input-lexical/LexicalToolbarItems.tsx";
+export { LexicalToolbarButton } from "./components/inputs/input-lexical/LexicalToolbarButton.tsx";
+export { LexicalToolbarDivider } from "./components/inputs/input-lexical/LexicalToolbarDivider.tsx";
+export { LexicalBlockTypeSelect } from "./components/inputs/input-lexical/LexicalBlockTypeSelect.tsx";
+export { LexicalFormatButtons } from "./components/inputs/input-lexical/LexicalFormatButtons.tsx";
+export { LexicalListButtons } from "./components/inputs/input-lexical/LexicalListButtons.tsx";
+export { LexicalLinkButton } from "./components/inputs/input-lexical/LexicalLinkButton.tsx";
+export { LexicalHistoryButtons } from "./components/inputs/input-lexical/LexicalHistoryButtons.tsx";
+export { useLexicalToolbar, useLexicalToolbarState } from "./components/inputs/input-lexical/use-lexical-toolbar.ts";
+export { lexicalTheme, LEXICAL_NODES } from "./components/inputs/input-lexical/lexical-theme.ts";
 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 { InputSelectMultiple } from "./components/inputs/InputSelectMultiple.tsx";
 export { InputSelectOption } from "./components/inputs/InputSelectOption.tsx";
+export { InputSelectGroupHeader } from "./components/inputs/InputSelectGroupHeader.tsx";
+export { InputSelectDivider } from "./components/inputs/InputSelectDivider.tsx";
+export { isSelectOption } from "./components/inputs/select-item.ts";
 export { Panel } from "./components/panel/Panel.tsx";
 export { PanelStack } from "./components/panel/PanelStack.tsx";
 export { PanelField } from "./components/panel/PanelField.tsx";
@@ -43,6 +60,7 @@ export { DropdownButtonGroup } from "./components/dropdown-menu/DropdownButtonGr
 export { DropdownPanel } from "./components/dropdown-menu/DropdownPanel.tsx";
 export { DropdownMenu } from "./components/dropdown-menu/DropdownMenu.tsx";
 export { usePopover } from "./popover/use-popover.tsx";
+export { useSelectPopover } from "./popover/use-select-popover.tsx";
 export { PopoverBase } from "./popover/PopoverBase.tsx";
 export { Test } from "./components/Test.tsx";
 export * from "./types.ts";