@tempots/beatui 0.82.1 → 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/code/language-selector.d.ts

@@ -1,4 +1,4 @@
-import { Signal, TNode } from '@tempots/dom';
+import { Signal } from '@tempots/dom';
 import type { LexicalEditor } from 'lexical';
 export interface LanguageSelectorOptions {
     editor: Signal<LexicalEditor | null>;
@@ -10,4 +10,4 @@ export interface LanguageSelectorOptions {
  * 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): TNode;
+export declare function LanguageSelector({ editor, stateUpdate, readOnly, languages, }: LanguageSelectorOptions): import("@tempots/dom").Renderable;

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

@@ -1,4 +1,4 @@
-import { Signal, TNode } from '@tempots/dom';
+import { Signal } from '@tempots/dom';
 import type { LexicalEditor } from 'lexical';
 export interface BlockCommand {
     id: string;
@@ -13,4 +13,4 @@ export interface BlockHandleOptions {
     readOnly?: Signal<boolean>;
     commands?: BlockCommand[];
 }
-export declare function BlockHandle({ editor, stateUpdate, readOnly, commands, }: BlockHandleOptions): TNode;
+export declare function BlockHandle({ editor, stateUpdate, readOnly, commands, }: BlockHandleOptions): import("@tempots/dom").Renderable;

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

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

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

@@ -1,4 +1,4 @@
-import { Signal, Prop, TNode } from '@tempots/dom';
+import { Signal, Prop } from '@tempots/dom';
 import type { LexicalEditor } from 'lexical';
 import type { SlashCommandDefinition } from '../../../lexical/types';
 export interface SlashCommandPaletteOptions {
@@ -17,4 +17,4 @@ export interface SlashCommandPaletteOptions {
  * Default slash commands for the editor
  */
 export declare const DEFAULT_SLASH_COMMANDS: SlashCommandDefinition[];
-export declare function SlashCommandPalette({ commands, isVisible, filterText, position, onSelect, onDismiss, }: SlashCommandPaletteOptions): TNode;
+export declare function SlashCommandPalette({ commands, isVisible, filterText, position, onSelect, onDismiss, }: SlashCommandPaletteOptions): import("@tempots/dom").Renderable;

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

@@ -1,4 +1,4 @@
-import { Signal, TNode } from '@tempots/dom';
+import { Signal } from '@tempots/dom';
 import type { LexicalEditor } from 'lexical';
 export interface TableControlsOptions {
     editor: Signal<LexicalEditor | null>;
@@ -9,4 +9,4 @@ export interface TableControlsOptions {
  * 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): TNode;
+export declare function TableControls({ editor, stateUpdate, readOnly, }: TableControlsOptions): import("@tempots/dom").Renderable;

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

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

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

@@ -5,7 +5,9 @@ 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>): {
+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>;
@@ -25,6 +27,6 @@ export declare function createToolbarHelpers(ed: Signal<LexicalEditor>, stateUpd
 export declare function createButtonFactory(readOnly: Signal<boolean>, size: Value<ControlSize>): (display: Signal<boolean>) => (opts: {
     active: Signal<boolean>;
     onClick: () => void;
-    label: string;
+    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;

package/dist/types/components/misc/expando.d.ts

@@ -1,4 +1,85 @@
 import { Renderable, Value } from '@tempots/dom';
+/**
+ * Attaches a reactive value to the nearest parent DOM element as an
+ * "expando" property (a dynamic property on the element object). This
+ * allows passing arbitrary typed data through the DOM without relying
+ * on `data-*` attributes or custom events.
+ *
+ * The value is kept in sync: whenever the reactive `value` changes, the
+ * expando property on the element is updated. The property is keyed by
+ * an internal prefix plus the provided `name`.
+ *
+ * @typeParam T - The type of the value to store on the element.
+ * @param name - A unique name for the expando property.
+ * @param value - A reactive or static value to bind to the element.
+ * @returns A renderable that, when mounted, attaches the expando property.
+ *
+ * @example
+ * ```typescript
+ * // Attach a typed value to a list item
+ * const items = [{ id: 1, label: 'Apple' }, { id: 2, label: 'Banana' }]
+ *
+ * html.ul(
+ *   ...items.map(item =>
+ *     html.li(
+ *       Expando('item', item),
+ *       on.click(emitExpando('item', (clicked: typeof item) => {
+ *         console.log('Selected:', clicked.label)
+ *       })),
+ *       item.label
+ *     )
+ *   )
+ * )
+ * ```
+ */
 export declare const Expando: <T>(name: string, value: Value<T>) => Renderable;
+/**
+ * Creates an event handler that reads an expando property from `event.target`
+ * and passes it to the provided callback. Use this with {@link Expando} to
+ * retrieve typed data from DOM event targets.
+ *
+ * @typeParam T - The type of the expando value to retrieve.
+ * @param name - The expando property name (must match the name used in {@link Expando}).
+ * @param fn - Callback receiving the typed expando value.
+ * @returns An event handler function suitable for use with `on.*` bindings.
+ *
+ * @example
+ * ```typescript
+ * html.button(
+ *   Expando('id', 42),
+ *   on.click(emitExpando('id', (id: number) => {
+ *     console.log('Clicked item with id:', id)
+ *   })),
+ *   'Click me'
+ * )
+ * ```
+ */
 export declare const emitExpando: <T>(name: string, fn: (text: T) => void) => (event: Event) => void;
+/**
+ * Creates an event handler that reads an expando property from the currently
+ * selected `<option>` element within a `<select>`. Use this with {@link Expando}
+ * on individual `<option>` elements to retrieve typed data when the selection changes.
+ *
+ * @typeParam T - The type of the expando value stored on each option.
+ * @param name - The expando property name (must match the name used in {@link Expando}).
+ * @param fn - Callback receiving the typed expando value from the selected option.
+ * @returns An event handler function suitable for use with `on.change` on a `<select>`.
+ *
+ * @example
+ * ```typescript
+ * const fruits = [
+ *   { id: 1, name: 'Apple' },
+ *   { id: 2, name: 'Banana' },
+ * ]
+ *
+ * html.select(
+ *   on.change(emitOptionExpando('fruit', (fruit: typeof fruits[0]) => {
+ *     console.log('Selected:', fruit.name)
+ *   })),
+ *   ...fruits.map(fruit =>
+ *     html.option(Expando('fruit', fruit), fruit.name)
+ *   )
+ * )
+ * ```
+ */
 export declare const emitOptionExpando: <T>(name: string, fn: (text: T) => void) => (event: Event) => void;

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

@@ -1,8 +1,9 @@
+export * from './empty-state';
 export * from './expando';
 export * from './style-portal';
 export * from './link-portal';
 export * from './notice';
 export * from './opengraph';
 export * from './notification';
+export * from './notification-panel';
 export * from './notification-provider';
-export * from './notification';

package/dist/types/components/misc/link-portal.d.ts

@@ -1,11 +1,49 @@
 import { Renderable, Value } from '@tempots/dom';
+/**
+ * Configuration options for the {@link LinkPortal} component.
+ */
 export type LinkPortalOptions = {
+    /**
+     * Optional `id` attribute for the injected `<link>` element, useful for
+     * deduplication or later removal.
+     */
     id?: Value<string>;
+    /**
+     * The URL of the linked resource (e.g., a stylesheet URL).
+     */
     href: Value<string>;
+    /**
+     * The relationship type of the linked resource.
+     * @default 'stylesheet'
+     */
     rel?: Value<string>;
 };
 /**
- * Injects a <link rel="stylesheet"> tag with the provided href into <head> via Portal.
- * Keeps styling SSR/SSG-friendly while leveraging browser caching of CSS assets.
+ * Injects a `<link>` tag into `<head>` via a Portal. By default, the `rel`
+ * attribute is set to `"stylesheet"`, making this ideal for dynamically loading
+ * CSS files. The portal approach keeps styling SSR/SSG-friendly while
+ * leveraging browser caching of CSS assets.
+ *
+ * @param options - Configuration for the link element.
+ * @returns A renderable that portals a `<link>` element into `<head>`.
+ *
+ * @example
+ * ```typescript
+ * // Load an external stylesheet
+ * LinkPortal({ href: 'https://cdn.example.com/styles.css' })
+ *
+ * // Load a font with a custom id for deduplication
+ * LinkPortal({
+ *   id: 'google-fonts',
+ *   href: 'https://fonts.googleapis.com/css2?family=Inter',
+ *   rel: 'stylesheet',
+ * })
+ *
+ * // Preconnect to a CDN
+ * LinkPortal({
+ *   href: 'https://cdn.example.com',
+ *   rel: 'preconnect',
+ * })
+ * ```
  */
 export declare const LinkPortal: ({ id, href, rel, }: LinkPortalOptions) => Renderable;