@tempots/beatui 0.0.5 → 0.1.0

package/dist/types/components/form/control/nullable-text-area-control.d.ts

@@ -1,7 +1,7 @@
 import { ControlOptions } from './control-options';
-import { Value } from '@tempots/dom';
+import { TNode, Value } from '@tempots/dom';
 import { Merge } from '@tempots/std';
 export type NullableTextAreaControlOptions = Merge<ControlOptions<string | null>, {
     rows?: Value<number>;
 }>;
-export declare const NullableTextAreaControl: (options: NullableTextAreaControlOptions) => import("@tempots/dom").Renderable;
+export declare const NullableTextAreaControl: (options: NullableTextAreaControlOptions, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/nullable-text-control.d.ts

@@ -1,2 +1,3 @@
 import { ControlOptions } from './control-options';
-export declare const NullableTextControl: (options: ControlOptions<string | null>) => import("@tempots/dom").Renderable;
+import { TNode } from '@tempots/dom';
+export declare const NullableTextControl: (options: ControlOptions<string | null>, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/number-control.d.ts

@@ -1,9 +1,9 @@
 import { ControlOptions } from './control-options';
 import { Merge } from '@tempots/std';
-import { Value } from '@tempots/dom';
+import { TNode, Value } from '@tempots/dom';
 export type NumberControlOptions = Merge<ControlOptions<number>, {
     step?: Value<number>;
     min?: Value<number>;
     max?: Value<number>;
 }>;
-export declare const NumberControl: (options: NumberControlOptions) => import("@tempots/dom").Renderable;
+export declare const NumberControl: (options: NumberControlOptions, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/password-control.d.ts

@@ -1,2 +1,3 @@
 import { ControlOptions } from './control-options';
-export declare const PasswordControl: (options: ControlOptions<string>) => import("@tempots/dom").Renderable;
+import { TNode } from '@tempots/dom';
+export declare const PasswordControl: (options: ControlOptions<string>, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/segmented-control.d.ts

@@ -1,12 +1,10 @@
 import { TNode, Value } from '@tempots/dom';
 import { ControlSize } from '../../theme';
-export interface SegmentedControlProps {
-    segments: {
-        label: TNode;
-        onSelect?: () => void;
-    }[];
-    activeSegment: Value<number> | Value<number | null>;
-    onSegmentChange?: (index?: number) => void;
+export interface SegmentedControlOptions<T extends Record<string, TNode>, K extends keyof T = keyof T> {
+    options: T;
+    value: Value<K>;
+    onChange?: (value: K) => void;
     size?: Value<ControlSize>;
+    disabled?: Value<boolean>;
 }
-export declare function SegmentedControl({ segments, activeSegment, onSegmentChange, size, }: SegmentedControlProps): import("@tempots/dom").Renderable;
+export declare function SegmentedControl<T extends Record<string, TNode>>({ options, value, onChange, size, disabled, }: SegmentedControlOptions<T, keyof T>, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/form/control/string-date-control.d.ts

@@ -1,2 +1,3 @@
 import { ControlOptions } from './control-options';
-export declare const StringDateControl: (options: ControlOptions<string>) => import("@tempots/dom").Renderable;
+import { TNode } from '@tempots/dom';
+export declare const StringDateControl: (options: ControlOptions<string>, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/tags-control.d.ts

@@ -1,2 +1,3 @@
 import { ControlOptions } from './control-options';
-export declare const TagsControl: (options: ControlOptions<string[]>) => import("@tempots/dom").Renderable;
+import { TNode } from '@tempots/dom';
+export declare const TagsControl: (options: ControlOptions<string[]>, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/text-area-control.d.ts

@@ -1,7 +1,7 @@
 import { ControlOptions } from './control-options';
-import { Value } from '@tempots/dom';
+import { TNode, Value } from '@tempots/dom';
 import { Merge } from '@tempots/std';
 export type TextAreaControlOptions = Merge<ControlOptions<string>, {
     rows?: Value<number>;
 }>;
-export declare const TextAreaControl: (options: TextAreaControlOptions) => import("@tempots/dom").Renderable;
+export declare const TextAreaControl: (options: TextAreaControlOptions, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/control/text-control.d.ts

@@ -1,7 +1,8 @@
 import { ControlOptions } from './control-options';
-import { ValueController } from '../controller/value-controller';
-export declare const makeOnBlurHandler: (controller: ValueController<any>, onBlur?: () => void) => () => void;
-export declare const makeOnChangeHandler: <T>(controller: ValueController<T>, onChange?: (value: T) => void) => (value: T) => void;
-export declare const makeMappedOnChangeHandler: <T, U>(controller: ValueController<T>, map: (value: U) => T, onChange?: (value: T) => void) => (value: U) => void;
-export declare const makeNullableOnChangeHandler: <T>(controller: ValueController<T | null>, isEmpty: (value: T) => boolean, onChange?: (value: T | null) => void) => (value: T) => void;
-export declare const TextControl: (options: ControlOptions<string>) => import("@tempots/dom").Renderable;
+import { Controller } from '../controller/controller';
+import { TNode } from '@tempots/dom';
+export declare const makeOnBlurHandler: (_controller: Controller<any>, onBlur?: () => void) => () => void;
+export declare const makeOnChangeHandler: <T>(controller: Controller<T>, onChange?: (value: T) => void) => (value: T) => void;
+export declare const makeMappedOnChangeHandler: <T, U>(controller: Controller<T>, map: (value: U) => T, onChange?: (value: T) => void) => (value: U) => void;
+export declare const makeNullableOnChangeHandler: <T>(controller: Controller<T | null>, isEmpty: (value: T) => boolean, onChange?: (value: T | null) => void) => (value: T) => void;
+export declare const TextControl: (options: ControlOptions<string>, ...children: TNode[]) => import("@tempots/dom").Renderable;

package/dist/types/components/form/controller/controller.d.ts

@@ -0,0 +1,50 @@
+import { Signal } from '@tempots/dom';
+import { Path, PathSegment } from './path';
+import { InvalidDependencies, ValidationResult } from './validation-result';
+export declare class Controller<In> {
+    #private;
+    readonly path: Path;
+    readonly change: (value: In) => void;
+    readonly value: Signal<In>;
+    readonly status: Signal<ValidationResult>;
+    readonly error: Signal<undefined | string>;
+    readonly hasError: Signal<boolean>;
+    readonly dependencyErrors: Signal<undefined | Record<string | number, InvalidDependencies>>;
+    protected readonly parent: {
+        disabled: Signal<boolean>;
+    };
+    readonly disabled: Signal<boolean>;
+    constructor(path: Path, change: (value: In) => void, value: Signal<In>, status: Signal<ValidationResult>, parent: {
+        disabled: Signal<boolean>;
+    });
+    get name(): string;
+    readonly onDispose: (callback: () => void) => void;
+    readonly dispose: () => void;
+    readonly disable: () => void;
+    readonly enable: () => void;
+    readonly array: (equals?: (a: In, b: In) => boolean) => ArrayController<In extends any[] ? In : never>;
+    readonly object: (equals?: (a: In, b: In) => boolean) => ObjectController<In extends Record<string, any> ? In : never>;
+    readonly transform: <Out>(transform: (value: In) => Out, untransform: (value: Out) => In, subpath?: PathSegment[], equals?: (a: Out, b: Out) => boolean) => Controller<Out>;
+}
+export declare class ObjectController<In extends Record<string, In[keyof In]>> extends Controller<In> {
+    #private;
+    constructor(path: Path, change: (value: In) => void, value: Signal<In>, status: Signal<ValidationResult>, parent: {
+        disabled: Signal<boolean>;
+    }, equals: (a: In, b: In) => boolean);
+    readonly field: <K extends keyof In & string>(field: K) => Controller<In[K]>;
+}
+export declare class ArrayController<In extends unknown[]> extends Controller<In> {
+    #private;
+    readonly length: Signal<number>;
+    constructor(path: Path, change: (value: In) => void, value: Signal<In>, status: Signal<ValidationResult>, parent: {
+        disabled: Signal<boolean>;
+    }, equals: (a: In, b: In) => boolean);
+    readonly item: (index: number) => Controller<In[number]>;
+    readonly push: (...value: In[number][]) => void;
+    readonly pop: () => void;
+    readonly shift: () => void;
+    readonly unshift: (...value: In) => void;
+    readonly removeAt: (index: number) => void;
+    readonly splice: (start: number, deleteCount?: number) => void;
+    readonly move: (from: number, to: number, length?: number) => void;
+}

package/dist/types/components/form/controller/index.d.ts

@@ -1,6 +1,5 @@
-export * from './form-controller';
-export * from './group-controller';
-export * from './list-controller';
+export * from '../control/ensure-control';
+export * from '../control/list-control';
 export * from './path';
 export * from './validation-result';
-export * from './value-controller';
+export * from './controller';

package/dist/types/components/form/controller/validation-result.d.ts

@@ -1,12 +1,13 @@
+import { PathSegment } from './path';
 export type Valid = {
     type: 'Valid';
 };
 export type InvalidDependencies = {
     error?: string;
-    dependencies?: Record<string | number, InvalidDependencies>;
+    dependencies?: Record<PathSegment, InvalidDependencies>;
 };
 export type Invalid = {
     type: 'Invalid';
 } & InvalidDependencies;
 export type ValidationResult = Valid | Invalid;
-export declare function makeMapValidationResult(field: string | number): (status: ValidationResult) => ValidationResult;
+export declare function makeMapValidationResult(fields: PathSegment[]): (status: ValidationResult) => ValidationResult;

package/dist/types/components/form/input/appearance-selector.d.ts

@@ -0,0 +1,8 @@
+import { AppearancePreference } from '@/components/theme';
+import { Value } from '@tempots/dom';
+export type AppearanceSelectorOptions = {
+    value: Value<AppearancePreference>;
+    onChange?: (value: AppearancePreference) => void;
+};
+export declare function AppearanceSelector({ value, onChange, }: AppearanceSelectorOptions): import("@tempots/dom").Renderable;
+export declare function StandaloneAppearanceSelector(): import("@tempots/dom").Renderable;

package/dist/types/components/form/input/index.d.ts

@@ -1,3 +1,4 @@
+export * from './appearance-selector';
 export * from './checkbox-input';
 export * from './date-input';
 export * from './date-time-input';
@@ -16,4 +17,4 @@ export * from './password-input';
 export * from './tags-input';
 export * from './text-area';
 export * from './text-input';
-export * from './toggle';
+export * from './switch';

package/dist/types/components/form/input/input-options.d.ts

@@ -1,6 +1,6 @@
 import { TNode, Value } from '@tempots/dom';
 import { Merge } from '@tempots/std';
-import { ValueController } from '../controller/value-controller';
+import { Controller } from '../controller/controller';
 export type CommonInputOptions = {
     autocomplete?: Value<string>;
     autofocus?: Value<boolean>;
@@ -20,13 +20,13 @@ export type InputOptions<V> = Merge<CommonInputOptions, {
     onBlur?: () => void;
 }>;
 export declare const CommonInputAttributes: ({ autocomplete, autofocus, class: cls, disabled, name, placeholder, id, }: CommonInputOptions) => import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
-export declare const inputOptionsFromController: <T>(controller: ValueController<T>) => {
+export declare const inputOptionsFromController: <T>(controller: Controller<T>) => {
     id: string;
     disabled: import("@tempots/dom").Signal<boolean>;
     value: import("@tempots/dom").Signal<T>;
     hasError: import("@tempots/dom").Signal<boolean>;
 };
-export declare const inputOptionsFromMappedController: <T, U>(controller: ValueController<U>, map: (value: U) => T) => {
+export declare const inputOptionsFromMappedController: <T, U>(controller: Controller<U>, map: (value: U) => T) => {
     value: import("@tempots/dom").Computed<T>;
     id: string;
     disabled: import("@tempots/dom").Signal<boolean>;

package/dist/types/components/form/input/{toggle.d.ts → switch.d.ts}

@@ -1,6 +1,6 @@
 import { Value, TNode } from '@tempots/dom';
 import { ControlSize } from '../../theme/types';
-export type ToggleOptions = {
+export type SwitchOptions = {
     value: Value<boolean>;
     onChange: (value: boolean) => void;
     offLabel?: TNode;
@@ -8,5 +8,6 @@ export type ToggleOptions = {
     label?: TNode;
     disabled?: Value<boolean>;
     size?: ControlSize;
+    id?: string;
 };
-export declare const Toggle: ({ value, onChange, offLabel, onLabel, label, disabled, size, }: ToggleOptions) => import("@tempots/dom").Renderable;
+export declare const Switch: ({ value, onChange, offLabel, onLabel, label, disabled, size, id, }: SwitchOptions) => import("@tempots/dom").Renderable;

package/dist/types/components/form/use-form.d.ts

@@ -1,14 +1,25 @@
 import { StandardSchemaV1 } from './schema/standard-schema-v1';
-import { FormController, ValueController } from './controller';
+import { ValidationResult, Controller } from './controller';
 export interface UseFormOptions<In, Out = In> {
     schema: StandardSchemaV1<In, Out>;
     defaultValue?: In;
 }
-export declare function connectCommonAttributes<T>(value: ValueController<T>): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
-export declare function connectStringInput(value: ValueController<string>, { triggerOn, }?: {
+export interface UseControllerOptions<In> {
+    defaultValue: In;
+    onChange?: (value: In) => void;
+    validate?: (value: In) => Promise<ValidationResult> | ValidationResult;
+}
+/**
+ * Creates a Controller instance with automatic resource cleanup.
+ * The controller will be automatically disposed when the component unmounts.
+ */
+export declare function useController<In>({ defaultValue, onChange, validate, }: UseControllerOptions<In>): Controller<In>;
+export declare function connectCommonAttributes<T>(value: Controller<T>): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
+export declare function connectStringInput(value: Controller<string>, { triggerOn, }?: {
     triggerOn?: 'change' | 'input';
 }): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
-export declare function connectNumberInput(value: ValueController<number>, { triggerOn, }?: {
+export declare function connectNumberInput(value: Controller<number>, { triggerOn, }?: {
     triggerOn?: 'change' | 'input';
 }): import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
-export declare function useForm<In extends Record<string, any>, Out = In>({ defaultValue, schema, }: UseFormOptions<In, Out>): FormController<In>;
+export declare function standardSchemaResultToValidationResult<Out>(result: StandardSchemaV1.Result<Out>): ValidationResult;
+export declare function useForm<In extends Record<string, any>, Out = In>({ defaultValue, schema, }: UseFormOptions<In, Out>): import("./controller").ObjectController<In extends Record<string, any> ? In : never>;

package/dist/types/components/layout/app-shell.d.ts

@@ -1,5 +1,5 @@
 import { TNode } from '@tempots/dom';
-import { TWBreakpoint } from './with-breakpoint';
+import { BeatUIBreakpoint } from './with-breakpoint';
 import { PanelColor, PanelShadow } from '../theme';
 export interface AppShellBreakpointOptions {
     zero: number;
@@ -36,7 +36,7 @@ export interface AppShellOptions {
     main: AppShellMainOptions;
     mainHeader?: AppShellHorizontalOptions;
     mainFooter?: AppShellHorizontalOptions;
-    mediumBreakpoint?: TWBreakpoint;
-    smallBreakpoint?: TWBreakpoint;
+    mediumBreakpoint?: BeatUIBreakpoint;
+    smallBreakpoint?: BeatUIBreakpoint;
 }
 export declare function AppShell({ smallBreakpoint, mediumBreakpoint, ...options }: AppShellOptions): import("@tempots/dom").Renderable;

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

@@ -0,0 +1,5 @@
+import { TNode, Value } from '@tempots/dom';
+export type CollapseOption = {
+    open: Value<boolean>;
+};
+export declare function Collapse({ open }: CollapseOption, ...children: TNode[]): import("@tempots/dom").Renderable;

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

@@ -1,7 +1,9 @@
 export * from './app-shell';
 export * from './card';
 export * from './center';
+export * from './collapse';
 export * from './group';
+export * from './scrollable-panel';
 export * from './sink';
 export * from './stack';
 export * from './with-breakpoint';

package/dist/types/components/layout/scrollable-panel.d.ts

@@ -0,0 +1,8 @@
+import { TNode, Value } from '@tempots/dom';
+export type ScrollablePanelOptions = {
+    header?: TNode;
+    footer?: TNode;
+    body: TNode;
+    shadowOnScroll?: Value<boolean>;
+};
+export declare function ScrollablePanel({ header, footer, body, shadowOnScroll, }: ScrollablePanelOptions): import("@tempots/dom").Renderable;

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

@@ -20,7 +20,7 @@ export interface WithBreakpointOptions<T extends Breakpoints> {
     mode?: 'element' | '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>;
-export type TWBreakpoints = {
+export type BeatUIBreakpoints = {
     zero: number;
     xs: number;
     sm: number;
@@ -28,8 +28,8 @@ export type TWBreakpoints = {
     lg: number;
     xl: number;
 };
-export type TWBreakpoint = keyof TWBreakpoints;
-export declare function WithTWBreakpoint(fn: (info: BreakpointInfo<TWBreakpoints>) => TNode): import("@tempots/dom").Renderable;
+export type BeatUIBreakpoint = keyof BeatUIBreakpoints;
+export declare function WithBeatUIBreakpoint(fn: (info: BreakpointInfo<BeatUIBreakpoints>) => TNode): import("@tempots/dom").Renderable;
 export type TWElementBreakpoints = {
     zero: number;
     '3xs': number;
@@ -45,4 +45,4 @@ export type TWElementBreakpoints = {
     '5xl': number;
     '6xl': number;
 };
-export declare function WithTWElementBreakpoint(fn: (info: BreakpointInfo<TWElementBreakpoints>) => TNode): import("@tempots/dom").Renderable;
+export declare function WithBeatUIElementBreakpoint(fn: (info: BreakpointInfo<TWElementBreakpoints>) => TNode): import("@tempots/dom").Renderable;

package/dist/types/components/navigation/flyout.d.ts

@@ -0,0 +1,44 @@
+import { TNode, Value } from '@tempots/dom';
+import { Placement } from '@tempots/ui';
+export type FlyoutTrigger = 'hover' | 'focus' | 'hover-focus' | 'click' | 'never';
+export type FlyoutTriggerFunction = (show: () => void, hide: () => void) => TNode;
+export interface PopOverArrowOptions {
+    placement: string;
+    x?: number;
+    y?: number;
+    centerOffset: number;
+    containerWidth: number;
+    containerHeight: number;
+}
+export interface FlyoutOptions {
+    /** The flyout content to display */
+    content: () => TNode;
+    /** Placement of the flyout relative to the trigger element */
+    placement?: Value<Placement>;
+    /** Delay in milliseconds before showing the flyout on hover */
+    showDelay?: Value<number>;
+    /** Delay in milliseconds before hiding the flyout after mouse leave */
+    hideDelay?: Value<number>;
+    /** Offset in pixels from the main axis (vertical for top/bottom, horizontal for left/right) */
+    mainAxisOffset?: Value<number>;
+    /** Offset in pixels from the cross axis (horizontal for top/bottom, vertical for left/right) */
+    crossAxisOffset?: Value<number>;
+    /** How to show the flyout */
+    showOn?: Value<FlyoutTrigger> | FlyoutTriggerFunction;
+    /** Whether the flyout can be closed with Escape key */
+    closable?: Value<boolean>;
+    /** Optional arrow configuration - receives a signal with PopOver positioning data */
+    arrow?: (signal: any) => TNode;
+    /** Additional role attribute for accessibility */
+    role?: Value<string>;
+}
+/**
+ * Flyout component that provides a flexible popover with various trigger options.
+ * This is the base component that powers Tooltip and other overlay components.
+ *
+ * Unlike other flyout libraries, this component is designed to be a child of the element
+ * it provides a flyout for, rather than wrapping it.
+ *
+ * Uses @tempo-ts/ui PopOver for positioning.
+ */
+export declare function Flyout(options: FlyoutOptions): TNode;

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

@@ -0,0 +1,3 @@
+export * from './flyout';
+export * from './sidebar/index';
+export * from './menu/menu';

package/dist/types/components/navigation/menu/menu.d.ts

@@ -0,0 +1,6 @@
+import { TNode } from '@tempots/dom';
+export type MenuOptions = {
+    anchor?: string | HTMLElement;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+};
+export declare function Menu(fn: (open: (options: MenuOptions) => void) => TNode, _close: () => void): TNode;

package/dist/types/components/navigation/sidebar/collapsible-sidebar-group.d.ts

@@ -0,0 +1,8 @@
+import { TNode, Value } from '@tempots/dom';
+export type CollapsibleSidebarGroupOptions = {
+    icon?: Value<string>;
+    header: TNode;
+    rail?: Value<boolean>;
+    startOpen?: Value<boolean>;
+};
+export declare function CollapsibleSidebarGroup({ rail, icon, header, startOpen, }: CollapsibleSidebarGroupOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/navigation/sidebar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './collapsible-sidebar-group';
+export * from './sidebar-link';
+export * from './sidebar-group';

package/dist/types/components/navigation/sidebar/sidebar-group.d.ts

@@ -0,0 +1,5 @@
+import { TNode, Value } from '@tempots/dom';
+export type SidebarGroupOptions = {
+    rail?: Value<boolean>;
+};
+export declare function SidebarGroup({ rail }: SidebarGroupOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/navigation/sidebar/sidebar-link.d.ts

@@ -0,0 +1,19 @@
+import { DOMContext, TNode, Value } from '@tempots/dom';
+export type UrlAction = {
+    href: Value<string>;
+};
+export type ClickAction = {
+    onClick: () => void;
+};
+export type LinkAction = UrlAction | ClickAction;
+export type SidebarLinkOptions = {
+    content: TNode;
+    icon?: Value<string>;
+    right?: TNode;
+    action?: {
+        icon: Value<string>;
+        label?: Value<string>;
+        onClick?: (ctx: DOMContext) => void;
+    };
+} & LinkAction;
+export declare function SidebarLink(options: SidebarLinkOptions): import("@tempots/dom").Renderable;

package/dist/types/components/overlay/drawer.d.ts

@@ -0,0 +1,29 @@
+import { TNode, Value } from '@tempots/dom';
+import { OverlayEffect } from '../theme/types';
+export interface DrawerOptions {
+    /** Size of the drawer */
+    size?: Value<'sm' | 'md' | 'lg' | 'xl'>;
+    /** Side of the viewport/element to anchor the drawer to */
+    side?: Value<'top' | 'right' | 'bottom' | 'left'>;
+    /** Whether the drawer can be closed by clicking outside or pressing escape */
+    dismissable?: Value<boolean>;
+    /** Whether to show the close button in header (only applies if header is provided) */
+    showCloseButton?: Value<boolean>;
+    /** Callback when drawer is closed */
+    onClose?: () => void;
+    /** Overlay effect */
+    overlayEffect?: Value<OverlayEffect>;
+    /** Container for the overlay: 'body' (default) or 'element' (current element) */
+    container?: 'body' | 'element';
+    /** Header content for the drawer */
+    header?: TNode;
+    /** Body content for the drawer */
+    body: TNode;
+    /** Footer content for the drawer */
+    footer?: TNode;
+}
+/**
+ * Drawer component that provides a slide-out panel anchored to any side
+ * Built on top of the overlay component
+ */
+export declare function Drawer(fn: (open: (options: DrawerOptions) => void, close: () => void) => TNode): TNode;

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

@@ -1 +1,4 @@
 export * from './overlay';
+export * from './modal';
+export * from './drawer';
+export * from './tooltip';

package/dist/types/components/overlay/modal.d.ts

@@ -0,0 +1,40 @@
+import { TNode, Value } from '@tempots/dom';
+import { OverlayEffect } from '../theme';
+export interface ModalOptions {
+    /** Size of the modal */
+    size?: Value<'sm' | 'md' | 'lg' | 'xl'>;
+    /** Whether the modal can be closed by clicking outside or pressing escape */
+    dismissable?: Value<boolean>;
+    /** Whether to show the close button in header (only applies if header is provided) */
+    showCloseButton?: Value<boolean>;
+    /** Callback when modal is closed */
+    onClose?: () => void;
+    /** Overlay effect */
+    overlayEffect?: Value<OverlayEffect>;
+    /** Container for the overlay: 'body' (default) or 'element' (current element) */
+    container?: 'body' | 'element';
+    /** Position of the modal: 'center' (default), 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right' */
+    position?: Value<'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>;
+}
+export interface ModalContentOptions {
+    /** Optional header content - if provided, overrides title */
+    header?: TNode;
+    /** Main body content */
+    body: TNode;
+    /** Optional footer content with action items */
+    footer?: TNode;
+}
+/**
+ * Modal component that provides a structured dialog with optional header, body, and footer
+ * Built on top of the overlay component
+ */
+export declare function Modal(options: ModalOptions, fn: (open: (content: ModalContentOptions) => void, close: () => void) => TNode): TNode;
+/**
+ * Convenience function to create a confirmation modal
+ */
+export declare function ConfirmModal(options: ModalOptions & {
+    confirmText?: Value<string>;
+    cancelText?: Value<string>;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}, fn: (open: (message: TNode) => void, close: () => void) => TNode): TNode;

package/dist/types/components/overlay/overlay.d.ts

@@ -1,14 +1,11 @@
-import { BrowserContext, TNode } from '@tempots/dom';
+import { TNode, Value } from '@tempots/dom';
 import { OverlayEffect } from '../theme/types';
 export type OverlayOptions = {
-    effect?: OverlayEffect;
-    mode: 'capturing';
+    effect?: Value<OverlayEffect>;
+    mode?: Value<'capturing' | 'non-capturing'>;
     onClickOutside?: () => void;
     onEscape?: () => void;
-} | {
-    effect?: OverlayEffect;
-    mode: 'non-capturing';
+    content?: TNode;
+    container?: 'body' | 'element';
 };
-export declare function makeOverlay(ctx: BrowserContext): ({ effect, ...rest }: OverlayOptions, fnNode: (close: () => void) => TNode) => () => void;
-export declare function OverlayElement(options: OverlayOptions, fn: (open: (renderFn: (close: () => void) => TNode) => void) => TNode): TNode;
-export declare function OverlayBody(options: OverlayOptions, fn: (open: (renderFn: (close: () => void) => TNode) => void) => TNode): TNode;
+export declare function Overlay(fn: (open: (options: OverlayOptions) => void, close: () => void) => TNode): import("@tempots/dom").Renderable;

package/dist/types/components/overlay/tooltip.d.ts

@@ -0,0 +1,37 @@
+import { TNode, Value } from '@tempots/dom';
+import { Placement } from '@tempots/ui';
+import { FlyoutTrigger } from '../navigation/flyout';
+export type TooltipTrigger = FlyoutTrigger;
+export interface TooltipOptions {
+    /** The tooltip content to display */
+    content: TNode;
+    /** Placement of the tooltip relative to the trigger element */
+    placement?: Value<Placement>;
+    /** Delay in milliseconds before showing the tooltip on hover */
+    showDelay?: Value<number>;
+    /** Delay in milliseconds before hiding the tooltip after mouse leave */
+    hideDelay?: Value<number>;
+    /** Offset in pixels from the main axis (vertical for top/bottom, horizontal for left/right) */
+    mainAxisOffset?: Value<number>;
+    /** Offset in pixels from the cross axis (horizontal for top/bottom, vertical for left/right) */
+    crossAxisOffset?: Value<number>;
+    /** How to show the tooltip */
+    showOn?: Value<TooltipTrigger>;
+}
+/**
+ * Tooltip component that provides contextual information when hovering or focusing on elements.
+ * Unlike other tooltip libraries, this component is designed to be a child of the element
+ * it provides a tooltip for, rather than wrapping it.
+ *
+ * Built on top of the Flyout component for positioning and interaction logic.
+ *
+ * @example
+ * ```typescript
+ * Button(
+ *   { onClick: () => console.log('clicked') },
+ *   'Click me',
+ *   Tooltip({ content: 'This button does something important' })
+ * )
+ * ```
+ */
+export declare function Tooltip(options: TooltipOptions): TNode;

package/dist/types/components/theme/theme.d.ts

@@ -2,4 +2,4 @@ import { Provider } from '@tempots/dom';
 import '../../styles/index.css';
 import { ThemeValue } from './types';
 export declare const Theme: Provider<ThemeValue, object>;
-export declare const ThemeAppeareance: () => import("@tempots/dom").Renderable;
+export declare const ThemeAppearance: () => import("@tempots/dom").Renderable;