@tempots/beatui 0.82.0 → 0.83.0

package/dist/types/components/layout/sink.d.ts

@@ -1,9 +1,55 @@
 import { TNode, Value } from '@tempots/dom';
 import { SinkVariant, ControlSize } from '../theme';
 import { RadiusName } from '../../tokens/radius';
+/**
+ * Configuration options for the {@link Sink} component.
+ */
 export interface SinkOptions {
+    /**
+     * The visual depth variant controlling the inset shadow appearance.
+     *
+     * - `'default'` - Standard inset effect
+     * - `'deep'` - Stronger inset shadow for more depth
+     * - `'shallow'` - Subtle inset shadow
+     * - `'flat'` - No inset shadow
+     *
+     * @default 'default'
+     */
     variant?: Value<SinkVariant>;
+    /**
+     * Padding size applied to the sink container.
+     * @default 'md'
+     */
     size?: Value<ControlSize>;
+    /**
+     * Border radius token controlling corner roundedness.
+     * @default 'lg'
+     */
     roundedness?: Value<RadiusName>;
 }
+/**
+ * Renders a sunken/inset container with configurable depth, padding, and
+ * border radius. A sink provides a recessed visual appearance, useful for
+ * grouping content in a visually distinct area (e.g., code blocks, input
+ * areas, or nested sections).
+ *
+ * @param options - Configuration options for the sink.
+ * @param children - Content nodes rendered inside the sink container.
+ * @returns A `<div>` element with the appropriate sink styling classes.
+ *
+ * @example
+ * ```typescript
+ * // Default sink with content
+ * Sink({}, html.p('This content appears in a recessed area'))
+ *
+ * // Deep sink with small padding
+ * Sink(
+ *   { variant: 'deep', size: 'sm', roundedness: 'md' },
+ *   html.pre('const x = 42;')
+ * )
+ *
+ * // Flat sink (no inset effect)
+ * Sink({ variant: 'flat' }, html.div('Flat container'))
+ * ```
+ */
 export declare function Sink({ variant, size, roundedness }?: SinkOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/layout/stack.d.ts

@@ -1,2 +1,18 @@
 import { TNode } from '@tempots/dom';
+/**
+ * Vertical stack layout that arranges children in a column with consistent spacing.
+ * Uses the `bc-stack` CSS class for flexbox column layout with gap.
+ *
+ * @param children - Child nodes to stack vertically
+ * @returns A div element with vertical stack layout
+ *
+ * @example
+ * ```typescript
+ * Stack(
+ *   html.h1('Page Title'),
+ *   html.p('Some introductory text'),
+ *   Button({ variant: 'filled' }, 'Get Started')
+ * )
+ * ```
+ */
 export declare function Stack(...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/layout/with-breakpoint.d.ts

@@ -1,25 +1,150 @@
 import { Signal, TNode } from '@tempots/dom';
+/**
+ * A record mapping breakpoint names to their minimum width thresholds in pixels.
+ * Keys are string breakpoint names and values are numeric pixel widths.
+ */
 export type Breakpoints = {
     [_ in string]: number;
 };
+/**
+ * Information object provided to the callback in {@link WithBreakpoint},
+ * containing the current breakpoint state and comparison utilities.
+ *
+ * @typeParam T - The breakpoints record type.
+ * @typeParam K - The union of breakpoint name keys.
+ */
 export interface BreakpointInfo<T extends Breakpoints, K extends keyof T = keyof T & string> {
+    /**
+     * Reactive signal containing the current width and the matching breakpoint name.
+     * Updates automatically when the viewport or element is resized.
+     */
     value: Signal<{
         width: number;
         breakpoint: K;
     }>;
+    /** The original breakpoints definition record. */
     breakpoints: T;
+    /** The breakpoints as a sorted `[width, name]` tuple array (ascending by width). */
     asList: [number, K][];
+    /**
+     * Tests whether a given width matches a breakpoint comparison expression.
+     *
+     * @param value - A breakpoint name or comparison expression (e.g., `'>=md'`, `'<lg'`).
+     * @param width - The width in pixels to test against.
+     * @returns `true` if the width satisfies the comparison.
+     */
     is: <K extends string & keyof T>(value: BreakPointComparison<K>, width: number) => boolean;
 }
+/**
+ * Comparison operators supported in breakpoint comparison expressions.
+ *
+ * - `'='` - Exact match (width falls within the breakpoint range)
+ * - `'!='` - Not equal (width does not fall within the breakpoint range)
+ * - `'<='` - Less than or equal to the breakpoint threshold
+ * - `'>='` - Greater than or equal to the breakpoint threshold
+ * - `'<'` - Strictly less than the breakpoint threshold
+ * - `'>'` - Strictly greater than the breakpoint threshold
+ */
 export type Operator = '!=' | '<=' | '>=' | '<' | '>' | '=';
+/**
+ * A breakpoint comparison expression. Can be a plain breakpoint name (treated
+ * as exact match) or an operator-prefixed breakpoint name (e.g., `'>=md'`, `'<lg'`).
+ *
+ * @typeParam K - The breakpoint name type.
+ */
 export type BreakPointComparison<K extends string> = K | `${Operator}${K}`;
+/**
+ * Compares a given width against a breakpoint comparison expression using
+ * the provided sorted breakpoint list.
+ *
+ * @typeParam T - The breakpoints record type.
+ * @typeParam K - The union of breakpoint name keys.
+ * @param sortedList - Breakpoints sorted ascending by width as `[width, name]` tuples.
+ * @param value - A breakpoint comparison expression (e.g., `'md'`, `'>=lg'`, `'<sm'`).
+ * @param width - The width in pixels to evaluate.
+ * @returns `true` if the width satisfies the comparison expression.
+ * @throws Error if the breakpoint name in the comparison is not found.
+ *
+ * @example
+ * ```typescript
+ * const breakpoints: [number, string][] = [[0, 'sm'], [768, 'md'], [1024, 'lg']]
+ * compareBreakpoint(breakpoints, '>=md', 800)  // true
+ * compareBreakpoint(breakpoints, '<md', 500)    // true
+ * compareBreakpoint(breakpoints, 'lg', 1024)    // true
+ * ```
+ */
 export declare function compareBreakpoint<T extends Breakpoints, K extends string & keyof T = keyof T & string>(sortedList: [number, keyof T][], value: BreakPointComparison<K>, width: number): boolean;
+/**
+ * Finds the breakpoint name that a given width falls into, based on a sorted
+ * breakpoint list. Returns the last breakpoint whose threshold is less than
+ * or equal to the width.
+ *
+ * @typeParam T - The breakpoints record type.
+ * @param sortedList - Breakpoints sorted ascending by width as `[width, name]` tuples.
+ * @param width - The width in pixels to look up.
+ * @returns The matching breakpoint name.
+ */
 export declare function findBreakpoint<T extends Breakpoints>(sortedList: [number, keyof T][], width: number): keyof T;
+/**
+ * Configuration options for the {@link WithBreakpoint} component.
+ *
+ * @typeParam T - The breakpoints record type.
+ */
 export interface WithBreakpointOptions<T extends Breakpoints> {
+    /** The breakpoints definition mapping names to pixel width thresholds. */
     breakpoints: T;
+    /**
+     * Whether to track the viewport (window) size or the parent element size.
+     * Use `'element'` for container-query-like behavior.
+     * @default 'viewport'
+     */
     mode?: 'element' | 'viewport';
 }
+/**
+ * Provides reactive breakpoint information to a callback function. Monitors
+ * either the viewport width or the parent element width (depending on `mode`)
+ * and determines which breakpoint range the current width falls into.
+ *
+ * The callback receives a {@link BreakpointInfo} object with the current
+ * breakpoint signal, the breakpoints definition, and a comparison utility.
+ *
+ * @typeParam T - The breakpoints record type.
+ * @param fn - Callback receiving breakpoint info and returning renderable content.
+ * @param options - Breakpoint definitions and tracking mode.
+ * @returns A renderable that tracks size and provides breakpoint info.
+ *
+ * @example
+ * ```typescript
+ * WithBreakpoint(
+ *   ({ value, is }) =>
+ *     html.div(
+ *       value.map(({ breakpoint }) =>
+ *         is('>=md', value.value.width)
+ *           ? 'Desktop layout'
+ *           : 'Mobile layout'
+ *       )
+ *     ),
+ *   {
+ *     breakpoints: { sm: 0, md: 768, lg: 1024 },
+ *     mode: 'viewport',
+ *   }
+ * )
+ * ```
+ */
 export declare function WithBreakpoint<T extends Breakpoints>(fn: (info: BreakpointInfo<T>) => TNode, { breakpoints, mode }: WithBreakpointOptions<T>): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
+/**
+ * Standard BeatUI viewport breakpoint thresholds. Values are read from
+ * CSS custom properties (`--breakpoint-*`) with sensible defaults.
+ *
+ * | Name   | Default (px) |
+ * |--------|-------------|
+ * | `zero` | 0           |
+ * | `xs`   | 640         |
+ * | `sm`   | 768         |
+ * | `md`   | 1024        |
+ * | `lg`   | 1280        |
+ * | `xl`   | 1536        |
+ */
 export type BeatUIBreakpoints = {
     zero: number;
     xs: number;
@@ -28,8 +153,53 @@ export type BeatUIBreakpoints = {
     lg: number;
     xl: number;
 };
+/**
+ * Union type of all standard BeatUI viewport breakpoint names.
+ */
 export type BeatUIBreakpoint = keyof BeatUIBreakpoints;
+/**
+ * Convenience wrapper around {@link WithBreakpoint} that uses the standard
+ * BeatUI viewport breakpoints. Reads breakpoint thresholds from CSS custom
+ * properties (`--breakpoint-xs`, `--breakpoint-sm`, etc.) with sensible
+ * fallback values.
+ *
+ * @param fn - Callback receiving BeatUI breakpoint info and returning renderable content.
+ * @returns A renderable that tracks viewport size against BeatUI breakpoints.
+ *
+ * @example
+ * ```typescript
+ * WithBeatUIBreakpoint(({ value, is }) =>
+ *   html.div(
+ *     value.map(({ width, breakpoint }) =>
+ *       is('>=md', width)
+ *         ? html.div(attr.class('desktop'), 'Wide layout')
+ *         : html.div(attr.class('mobile'), 'Narrow layout')
+ *     )
+ *   )
+ * )
+ * ```
+ */
 export declare function WithBeatUIBreakpoint(fn: (info: BreakpointInfo<BeatUIBreakpoints>) => TNode): import("@tempots/dom").Renderable;
+/**
+ * BeatUI element-level (container query) breakpoint thresholds. Values are
+ * read from CSS custom properties (`--container-*`) with Tailwind-inspired defaults.
+ *
+ * | Name   | Default (px) |
+ * |--------|-------------|
+ * | `zero` | 0           |
+ * | `3xs`  | 256         |
+ * | `2xs`  | 288         |
+ * | `xs`   | 320         |
+ * | `sm`   | 384         |
+ * | `md`   | 448         |
+ * | `lg`   | 512         |
+ * | `xl`   | 640         |
+ * | `2xl`  | 768         |
+ * | `3xl`  | 1024        |
+ * | `4xl`  | 1280        |
+ * | `5xl`  | 1536        |
+ * | `6xl`  | 2048        |
+ */
 export type TWElementBreakpoints = {
     zero: number;
     '3xs': number;
@@ -45,4 +215,28 @@ export type TWElementBreakpoints = {
     '5xl': number;
     '6xl': number;
 };
+/**
+ * Convenience wrapper around {@link WithBreakpoint} that uses BeatUI
+ * element-level (container query) breakpoints. Tracks the parent element's
+ * width rather than the viewport, enabling component-local responsive behavior.
+ *
+ * Reads breakpoint thresholds from CSS custom properties (`--container-3xs`,
+ * `--container-2xs`, etc.) with Tailwind-inspired fallback values.
+ *
+ * @param fn - Callback receiving element breakpoint info and returning renderable content.
+ * @returns A renderable that tracks element size against container breakpoints.
+ *
+ * @example
+ * ```typescript
+ * WithBeatUIElementBreakpoint(({ value, is }) =>
+ *   html.div(
+ *     value.map(({ width, breakpoint }) =>
+ *       is('>=md', width)
+ *         ? html.div('Wide container layout')
+ *         : html.div('Narrow container layout')
+ *     )
+ *   )
+ * )
+ * ```
+ */
 export declare function WithBeatUIElementBreakpoint(fn: (info: BreakpointInfo<TWElementBreakpoints>) => TNode): import("@tempots/dom").Renderable;

package/dist/types/components/lexical/bare-editor.d.ts

@@ -0,0 +1,29 @@
+import { Renderable } from '@tempots/dom';
+import type { BareEditorOptions } from '../../lexical/types';
+/**
+ * BareEditor - Foundational headless rich text editor component
+ *
+ * A minimal Lexical editor surface with no UI chrome. This is the base component
+ * that Docked and Contextual presets will build upon.
+ *
+ * Features:
+ * - Headless editor surface (contenteditable)
+ * - Plugin-based architecture (rich-text, plain-text, history, clipboard, list, link)
+ * - Multiple content formats (markdown, JSON)
+ * - Theme integration (light/dark)
+ * - Reactive value binding
+ * - Read-only mode support
+ * - Event callbacks (onInput, onChange, onBlur, onReady, onError)
+ *
+ * @example
+ * ```ts
+ * const content = prop('')
+ * BareEditor({
+ *   value: content,
+ *   format: 'markdown',
+ *   plugins: { richText: true, history: true },
+ *   onInput: (value) => console.log('Input:', value),
+ * })
+ * ```
+ */
+export declare const BareEditor: (options: BareEditorOptions) => Renderable;

package/dist/types/components/lexical/code/index.d.ts

@@ -0,0 +1 @@
+export * from './language-selector';

package/dist/types/components/lexical/code/language-selector.d.ts

@@ -0,0 +1,13 @@
+import { Signal } from '@tempots/dom';
+import type { LexicalEditor } from 'lexical';
+export interface LanguageSelectorOptions {
+    editor: Signal<LexicalEditor | null>;
+    stateUpdate: Signal<number>;
+    readOnly?: Signal<boolean>;
+    languages?: string[];
+}
+/**
+ * Language selector that appears when a code block is selected.
+ * Allows changing the programming language for syntax highlighting.
+ */
+export declare function LanguageSelector({ editor, stateUpdate, readOnly, languages, }: LanguageSelectorOptions): import("@tempots/dom").Renderable;

package/dist/types/components/lexical/contextual-editor.d.ts

@@ -0,0 +1,22 @@
+import { Renderable } from '@tempots/dom';
+import type { ContextualEditorOptions } from '../../lexical/types';
+/**
+ * ContextualEditor - Rich text editor with floating toolbar and block handle
+ *
+ * A clean editor surface that shows a floating toolbar when text is selected
+ * and a block handle at the left of each block for changing block types.
+ * No permanent UI chrome.
+ *
+ * Default plugins: richText, history, clipboard, list, link
+ *
+ * @example
+ * ```ts
+ * const content = prop('')
+ * ContextualEditor({
+ *   value: content,
+ *   format: 'markdown',
+ *   onInput: (value) => console.log('Input:', value),
+ * })
+ * ```
+ */
+export declare const ContextualEditor: (options: ContextualEditorOptions) => Renderable;

package/dist/types/components/lexical/docked-editor.d.ts

@@ -0,0 +1,23 @@
+import { Renderable } from '@tempots/dom';
+import type { DockedEditorOptions } from '../../lexical/types';
+/**
+ * DockedEditor - Rich text editor with a persistent toolbar
+ *
+ * Extends the BareEditor pattern by adding a configurable toolbar above
+ * (or below) the editor surface. Includes all standard formatting groups:
+ * text-formatting, headings, lists, blocks, links, and history.
+ *
+ * Default plugins: richText, history, clipboard, list, link
+ *
+ * @example
+ * ```ts
+ * const content = prop('')
+ * DockedEditor({
+ *   value: content,
+ *   format: 'markdown',
+ *   toolbar: { maxHeadingLevel: 3, hiddenGroups: ['tables'] },
+ *   onInput: (value) => console.log('Input:', value),
+ * })
+ * ```
+ */
+export declare const DockedEditor: (options: DockedEditorOptions) => Renderable;

package/dist/types/components/lexical/floating/block-handle.d.ts

@@ -0,0 +1,16 @@
+import { Signal } from '@tempots/dom';
+import type { LexicalEditor } from 'lexical';
+export interface BlockCommand {
+    id: string;
+    label: string;
+    icon: string;
+    handler: (editor: LexicalEditor) => void;
+}
+export declare const DEFAULT_BLOCK_COMMANDS: BlockCommand[];
+export interface BlockHandleOptions {
+    editor: Signal<LexicalEditor | null>;
+    stateUpdate: Signal<number>;
+    readOnly?: Signal<boolean>;
+    commands?: BlockCommand[];
+}
+export declare function BlockHandle({ editor, stateUpdate, readOnly, commands, }: BlockHandleOptions): import("@tempots/dom").Renderable;

package/dist/types/components/lexical/floating/floating-toolbar.d.ts

@@ -0,0 +1,12 @@
+import { Signal } from '@tempots/dom';
+import type { LexicalEditor } from 'lexical';
+import type { ToolbarGroupId } from '../../../lexical/types';
+import { ControlSize } from '../../theme';
+export interface FloatingToolbarOptions {
+    editor: Signal<LexicalEditor | null>;
+    stateUpdate: Signal<number>;
+    groups?: ToolbarGroupId[];
+    readOnly?: Signal<boolean>;
+    size?: ControlSize;
+}
+export declare function FloatingToolbar({ editor, stateUpdate, groups, readOnly, size, }: FloatingToolbarOptions): import("@tempots/dom").Renderable;

package/dist/types/components/lexical/floating/index.d.ts

@@ -0,0 +1,6 @@
+export { FloatingToolbar } from './floating-toolbar';
+export type { FloatingToolbarOptions } from './floating-toolbar';
+export { SlashCommandPalette, DEFAULT_SLASH_COMMANDS, } from './slash-command-palette';
+export type { SlashCommandPaletteOptions } from './slash-command-palette';
+export { BlockHandle, DEFAULT_BLOCK_COMMANDS } from './block-handle';
+export type { BlockHandleOptions, BlockCommand } from './block-handle';

package/dist/types/components/lexical/floating/slash-command-palette.d.ts

@@ -0,0 +1,20 @@
+import { Signal, Prop } from '@tempots/dom';
+import type { LexicalEditor } from 'lexical';
+import type { SlashCommandDefinition } from '../../../lexical/types';
+export interface SlashCommandPaletteOptions {
+    editor: Signal<LexicalEditor | null>;
+    commands: SlashCommandDefinition[];
+    isVisible: Prop<boolean>;
+    filterText: Signal<string>;
+    position: Signal<{
+        top: number;
+        left: number;
+    }>;
+    onSelect: (command: SlashCommandDefinition) => void;
+    onDismiss: () => void;
+}
+/**
+ * Default slash commands for the editor
+ */
+export declare const DEFAULT_SLASH_COMMANDS: SlashCommandDefinition[];
+export declare function SlashCommandPalette({ commands, isVisible, filterText, position, onSelect, onDismiss, }: SlashCommandPaletteOptions): import("@tempots/dom").Renderable;

package/dist/types/components/lexical/index.d.ts

@@ -0,0 +1,8 @@
+export { BareEditor } from './bare-editor';
+export { DockedEditor } from './docked-editor';
+export { LexicalToolbar } from './toolbar';
+export type { LexicalToolbarOptions } from './toolbar';
+export { ContextualEditor } from './contextual-editor';
+export { LexicalEditorInput } from './lexical-editor-input';
+export { FloatingToolbar, SlashCommandPalette, DEFAULT_SLASH_COMMANDS, BlockHandle, DEFAULT_BLOCK_COMMANDS, } from './floating';
+export type { FloatingToolbarOptions, SlashCommandPaletteOptions, BlockHandleOptions, BlockCommand, } from './floating';

package/dist/types/components/lexical/lexical-editor-input.d.ts

@@ -0,0 +1,30 @@
+import { Renderable } from '@tempots/dom';
+import type { LexicalInputOptions } from '../../lexical/types';
+/**
+ * LexicalEditorInput - Form-compatible rich text editor input
+ *
+ * Wraps BareEditor with BeatUI's form system integration (InputContainer).
+ * Supports markdown, HTML, and JSON formats. Compatible with form controllers
+ * and validation.
+ *
+ * @example
+ * ```ts
+ * const content = prop('')
+ * LexicalEditorInput({
+ *   value: content,
+ *   format: 'markdown',
+ *   placeholder: 'Enter text...',
+ *   onInput: (v) => console.log(v),
+ * })
+ * ```
+ *
+ * @example With form controller:
+ * ```ts
+ * Control(LexicalEditorInput, {
+ *   controller: formController.field('description'),
+ *   label: 'Description',
+ *   format: 'markdown',
+ * })
+ * ```
+ */
+export declare const LexicalEditorInput: (options: LexicalInputOptions) => Renderable;

package/dist/types/components/lexical/table/index.d.ts

@@ -0,0 +1 @@
+export * from './table-controls';

package/dist/types/components/lexical/table/table-controls.d.ts

@@ -0,0 +1,12 @@
+import { Signal } from '@tempots/dom';
+import type { LexicalEditor } from 'lexical';
+export interface TableControlsOptions {
+    editor: Signal<LexicalEditor | null>;
+    stateUpdate: Signal<number>;
+    readOnly?: Signal<boolean>;
+}
+/**
+ * Table context menu that appears when a table cell is selected.
+ * Provides operations like insert/delete rows/columns.
+ */
+export declare function TableControls({ editor, stateUpdate, readOnly, }: TableControlsOptions): import("@tempots/dom").Renderable;

package/dist/types/components/lexical/toolbar/index.d.ts

@@ -0,0 +1,6 @@
+export { LexicalToolbar } from './lexical-toolbar';
+export type { LexicalToolbarOptions } from './lexical-toolbar';
+export { LexicalToolbarButton } from './toolbar-button';
+export type { LexicalToolbarButtonOptions } from './toolbar-button';
+export { LexicalToolbarGroup } from './toolbar-group';
+export { createToolbarHelpers, createButtonFactory } from './toolbar-helpers';

package/dist/types/components/lexical/toolbar/lexical-toolbar.d.ts

@@ -0,0 +1,12 @@
+import { Signal, Value } from '@tempots/dom';
+import { type LexicalEditor } from 'lexical';
+import type { ToolbarConfig } from '../../../lexical/types';
+import { ControlSize } from '../../theme';
+export interface LexicalToolbarOptions {
+    editor: Signal<LexicalEditor | null>;
+    stateUpdate: Signal<number>;
+    toolbar?: ToolbarConfig;
+    readOnly?: Signal<boolean>;
+    size?: Value<ControlSize>;
+}
+export declare function LexicalToolbar({ editor, stateUpdate, toolbar, readOnly, size, }: LexicalToolbarOptions): import("@tempots/dom").Renderable;

package/dist/types/components/lexical/toolbar/toolbar-button.d.ts

@@ -0,0 +1 @@
+export { EditorToolbarButton as LexicalToolbarButton, type EditorToolbarButtonOptions as LexicalToolbarButtonOptions, } from '../../editor-toolbar';

package/dist/types/components/lexical/toolbar/toolbar-group.d.ts

@@ -0,0 +1 @@
+export { EditorToolbarGroup as LexicalToolbarGroup } from '../../editor-toolbar';

package/dist/types/components/lexical/toolbar/toolbar-helpers.d.ts

@@ -0,0 +1,32 @@
+import { Signal, Value } from '@tempots/dom';
+import { type LexicalEditor, type TextFormatType, type RangeSelection, type ElementNode, type LexicalCommand } from 'lexical';
+import { ControlSize } from '../../theme';
+/**
+ * Create reactive state and action helpers for Lexical toolbar integration.
+ * Both the docked toolbar and floating toolbar share these helpers.
+ */
+export declare function createToolbarHelpers(ed: Signal<LexicalEditor>, stateUpdate: Signal<number>, options?: {
+    enterUrlMessage?: () => string;
+}): {
+    withSelection: <T>(fn: (sel: RangeSelection) => T, fallback: T) => Signal<T>;
+    getAnchorElement: (sel: RangeSelection) => ElementNode | import("lexical").TextNode;
+    textFormatActive: (fmt: TextFormatType) => Signal<boolean>;
+    blockTypeActive: (type: string) => Signal<boolean>;
+    listTypeActive: (listType: string) => Signal<boolean>;
+    headingActive: (level: number) => import("@tempots/dom").Computed<boolean>;
+    linkActive: () => Signal<boolean>;
+    dispatch: <T>(command: LexicalCommand<T>, payload: T) => () => void;
+    toggleBlock: (type: string, create: () => ElementNode) => () => void;
+    toggleLink: () => void;
+};
+/**
+ * Create a button factory bound to shared readOnly and size props.
+ * Returns a function that takes a display signal and produces
+ * a group-specific button builder.
+ */
+export declare function createButtonFactory(readOnly: Signal<boolean>, size: Value<ControlSize>): (display: Signal<boolean>) => (opts: {
+    active: Signal<boolean>;
+    onClick: () => void;
+    label: Value<string>;
+    icon: string;
+}) => import("@tempots/dom").Renderable;

package/dist/types/components/misc/empty-state.d.ts

@@ -0,0 +1,86 @@
+import { TNode, Value } from '@tempots/dom';
+/**
+ * Size options for the EmptyState component.
+ */
+export type EmptyStateSize = 'sm' | 'md' | 'lg';
+/**
+ * Configuration options for the {@link EmptyState} component.
+ */
+export interface EmptyStateOptions {
+    /**
+     * Icon identifier string (Iconify format) to display above the title.
+     * When `undefined`, no icon is rendered.
+     */
+    icon?: Value<string | undefined>;
+    /**
+     * Main heading text for the empty state.
+     */
+    title: Value<string>;
+    /**
+     * Optional description text displayed below the title.
+     */
+    description?: Value<string | undefined>;
+    /**
+     * Visual size of the empty state component.
+     * @default 'md'
+     */
+    size?: Value<EmptyStateSize>;
+    /**
+     * Optional action element (e.g., a button) displayed below the description.
+     */
+    action?: TNode;
+    /**
+     * Additional CSS class name(s) to apply to the root element.
+     */
+    class?: Value<string>;
+}
+/**
+ * Renders an empty state UI component used to communicate when no content or
+ * data is available. Typically includes an icon, title, description, and an
+ * optional call-to-action button.
+ *
+ * Empty states improve UX by explaining why content is missing and suggesting
+ * next steps, rather than showing a blank screen.
+ *
+ * @param options - Configuration options for the empty state
+ * @returns A centered empty state element with icon, text, and optional action
+ *
+ * @example
+ * ```typescript
+ * import { EmptyState } from '@tempots/beatui'
+ * import { Button } from '@tempots/beatui'
+ *
+ * EmptyState({
+ *   icon: 'material-symbols:inbox-outline',
+ *   title: 'No messages',
+ *   description: 'You have no messages in your inbox.',
+ *   size: 'md'
+ * })
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With action button
+ * EmptyState({
+ *   icon: 'material-symbols:add-circle-outline',
+ *   title: 'No projects yet',
+ *   description: 'Create your first project to get started.',
+ *   size: 'lg',
+ *   action: Button(
+ *     { variant: 'filled', color: 'primary' },
+ *     'Create Project'
+ *   )
+ * })
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Minimal empty state without icon
+ * EmptyState({
+ *   title: 'Nothing to see here',
+ *   description: 'Try adjusting your filters.',
+ *   size: 'sm'
+ * })
+ * ```
+ */
+export declare function EmptyState({ icon, title, description, size, action, class: cls, }: EmptyStateOptions): import("@tempots/dom").Renderable;