tuiuiu.js 0.1.1

package/dist/design-system/layout/stack.d.ts

@@ -0,0 +1,189 @@
+/**
+ * Stack Layouts - Basic stacking and arrangement components
+ *
+ * Provides simple, composable layout primitives:
+ * - VStack: Vertical stack with configurable gap
+ * - HStack: Horizontal stack with configurable gap
+ * - Center: Centers content horizontally and/or vertically
+ * - FullScreen: Container that fills the terminal
+ * - Spacer: Flexible space that pushes siblings apart
+ */
+import type { VNode } from '../../utils/types.js';
+export interface VStackProps {
+    /** Gap between children (in lines) */
+    gap?: number;
+    /** Horizontal alignment */
+    align?: 'left' | 'center' | 'right' | 'stretch';
+    /** Padding inside the stack */
+    padding?: number;
+    /** Padding horizontal */
+    paddingX?: number;
+    /** Padding vertical */
+    paddingY?: number;
+    /** Fixed width */
+    width?: number | string;
+    /** Fixed height */
+    height?: number | string;
+    /** Border around stack */
+    border?: boolean;
+    /** Border style */
+    borderStyle?: 'single' | 'double' | 'round' | 'bold';
+    /** Border color */
+    borderColor?: string;
+    /** Children nodes */
+    children: VNode[];
+}
+/**
+ * Vertical Stack - Arranges children vertically with optional gap
+ *
+ * @example
+ * ```typescript
+ * VStack({ gap: 1 }, [
+ *   Text({}, 'Line 1'),
+ *   Text({}, 'Line 2'),
+ *   Text({}, 'Line 3'),
+ * ])
+ *
+ * // With alignment
+ * VStack({ gap: 1, align: 'center' }, [
+ *   Header(),
+ *   Content(),
+ *   Footer(),
+ * ])
+ * ```
+ */
+export declare function VStack(props: VStackProps): VNode;
+export declare function VStack(children: VNode[]): VNode;
+export interface HStackProps {
+    /** Gap between children (in characters) */
+    gap?: number;
+    /** Vertical alignment */
+    align?: 'top' | 'center' | 'bottom' | 'stretch';
+    /** Horizontal distribution */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    /** Padding inside the stack */
+    padding?: number;
+    /** Padding horizontal */
+    paddingX?: number;
+    /** Padding vertical */
+    paddingY?: number;
+    /** Fixed width */
+    width?: number | string;
+    /** Fixed height */
+    height?: number | string;
+    /** Border around stack */
+    border?: boolean;
+    /** Border style */
+    borderStyle?: 'single' | 'double' | 'round' | 'bold';
+    /** Border color */
+    borderColor?: string;
+    /** Children nodes */
+    children: VNode[];
+}
+/**
+ * Horizontal Stack - Arranges children horizontally with optional gap
+ *
+ * @example
+ * ```typescript
+ * HStack({ gap: 2 }, [
+ *   Button({ label: 'Cancel' }),
+ *   Button({ label: 'OK' }),
+ * ])
+ *
+ * // Space between items
+ * HStack({ justify: 'between' }, [
+ *   Logo(),
+ *   Navigation(),
+ *   UserMenu(),
+ * ])
+ * ```
+ */
+export declare function HStack(props: HStackProps): VNode;
+export declare function HStack(children: VNode[]): VNode;
+export interface CenterProps {
+    /** Center horizontally */
+    horizontal?: boolean;
+    /** Center vertically */
+    vertical?: boolean;
+    /** Fixed width (defaults to terminal width) */
+    width?: number;
+    /** Fixed height (defaults to terminal height) */
+    height?: number;
+    /** Child node */
+    children: VNode;
+}
+/**
+ * Center - Centers content horizontally and/or vertically
+ *
+ * @example
+ * ```typescript
+ * // Center both ways (full screen)
+ * Center({ children: Modal({ content: '...' }) })
+ *
+ * // Center only horizontally
+ * Center({ horizontal: true, vertical: false, children: Title() })
+ *
+ * // Center in a specific area
+ * Center({ width: 40, height: 10, children: Spinner() })
+ * ```
+ */
+export declare function Center(props: CenterProps): VNode;
+export interface FullScreenProps {
+    /** Background character */
+    background?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Padding from edges */
+    padding?: number;
+    /** Child node */
+    children: VNode;
+}
+/**
+ * FullScreen - Container that fills the entire terminal
+ *
+ * @example
+ * ```typescript
+ * FullScreen({
+ *   padding: 1,
+ *   children: AppContent()
+ * })
+ *
+ * // With background
+ * FullScreen({
+ *   backgroundColor: 'blue',
+ *   children: MainView()
+ * })
+ * ```
+ */
+export declare function FullScreen(props: FullScreenProps): VNode;
+export interface SpacerProps {
+    /** Flex grow value (default: 1) */
+    flex?: number;
+    /** Minimum size */
+    minSize?: number;
+}
+/**
+ * Spacer - Flexible space that pushes siblings apart
+ *
+ * @example
+ * ```typescript
+ * // Push items to opposite ends
+ * HStack({ children: [
+ *   Logo(),
+ *   Spacer(),
+ *   UserMenu(),
+ * ]})
+ *
+ * // Equal spacing
+ * HStack({ children: [
+ *   Item1(),
+ *   Spacer(),
+ *   Item2(),
+ *   Spacer(),
+ *   Item3(),
+ * ]})
+ * ```
+ */
+export declare function Spacer(props?: SpacerProps): VNode;
+export { Divider, type DividerProps } from '../../primitives/divider.js';
+//# sourceMappingURL=stack.d.ts.map

package/dist/design-system/layout/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../src/design-system/layout/stack.ts"],"names":[],"mappings":"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"}

package/dist/design-system/layout/stack.js

@@ -0,0 +1,170 @@
+/**
+ * Stack Layouts - Basic stacking and arrangement components
+ *
+ * Provides simple, composable layout primitives:
+ * - VStack: Vertical stack with configurable gap
+ * - HStack: Horizontal stack with configurable gap
+ * - Center: Centers content horizontally and/or vertically
+ * - FullScreen: Container that fills the terminal
+ * - Spacer: Flexible space that pushes siblings apart
+ */
+import { Box } from '../../primitives/nodes.js';
+export function VStack(propsOrChildren) {
+    // Handle both signatures
+    const isArray = Array.isArray(propsOrChildren);
+    const props = isArray ? { children: propsOrChildren } : propsOrChildren;
+    const { gap = 0, align = 'stretch', padding, paddingX, paddingY, width, height, border = false, borderStyle = 'single', borderColor, children, } = props;
+    // Map alignment to flexbox
+    const alignItems = align === 'left' ? 'flex-start'
+        : align === 'right' ? 'flex-end'
+            : align === 'center' ? 'center'
+                : 'stretch';
+    // Insert spacers between children for gap
+    const spacedChildren = [];
+    for (let i = 0; i < children.length; i++) {
+        spacedChildren.push(children[i]);
+        if (gap > 0 && i < children.length - 1) {
+            spacedChildren.push(Box({ height: gap }));
+        }
+    }
+    return Box({
+        flexDirection: 'column',
+        alignItems,
+        padding,
+        paddingX,
+        paddingY,
+        width,
+        height,
+        borderStyle: border ? borderStyle : undefined,
+        borderColor: border ? borderColor : undefined,
+    }, ...spacedChildren);
+}
+export function HStack(propsOrChildren) {
+    const isArray = Array.isArray(propsOrChildren);
+    const props = isArray ? { children: propsOrChildren } : propsOrChildren;
+    const { gap = 0, align = 'stretch', justify = 'start', padding, paddingX, paddingY, width, height, border = false, borderStyle = 'single', borderColor, children, } = props;
+    // Map alignment
+    const alignItems = align === 'top' ? 'flex-start'
+        : align === 'bottom' ? 'flex-end'
+            : align === 'center' ? 'center'
+                : 'stretch';
+    // Map justify
+    const justifyContent = justify === 'start' ? 'flex-start'
+        : justify === 'end' ? 'flex-end'
+            : justify === 'center' ? 'center'
+                : justify === 'between' ? 'space-between'
+                    : justify === 'around' ? 'space-around'
+                        : 'flex-start';
+    // Insert spacers between children for gap
+    const spacedChildren = [];
+    for (let i = 0; i < children.length; i++) {
+        spacedChildren.push(children[i]);
+        if (gap > 0 && i < children.length - 1) {
+            spacedChildren.push(Box({ width: gap }));
+        }
+    }
+    return Box({
+        flexDirection: 'row',
+        alignItems,
+        justifyContent,
+        padding,
+        paddingX,
+        paddingY,
+        width,
+        height,
+        borderStyle: border ? borderStyle : undefined,
+        borderColor: border ? borderColor : undefined,
+    }, ...spacedChildren);
+}
+/**
+ * Center - Centers content horizontally and/or vertically
+ *
+ * @example
+ * ```typescript
+ * // Center both ways (full screen)
+ * Center({ children: Modal({ content: '...' }) })
+ *
+ * // Center only horizontally
+ * Center({ horizontal: true, vertical: false, children: Title() })
+ *
+ * // Center in a specific area
+ * Center({ width: 40, height: 10, children: Spinner() })
+ * ```
+ */
+export function Center(props) {
+    const { horizontal = true, vertical = true, width, height, children, } = props;
+    const termWidth = width ?? (process.stdout.columns || 80);
+    const termHeight = height ?? (process.stdout.rows || 24);
+    return Box({
+        width: termWidth,
+        height: termHeight,
+        flexDirection: 'column',
+        alignItems: horizontal ? 'center' : 'flex-start',
+        justifyContent: vertical ? 'center' : 'flex-start',
+    }, children);
+}
+/**
+ * FullScreen - Container that fills the entire terminal
+ *
+ * @example
+ * ```typescript
+ * FullScreen({
+ *   padding: 1,
+ *   children: AppContent()
+ * })
+ *
+ * // With background
+ * FullScreen({
+ *   backgroundColor: 'blue',
+ *   children: MainView()
+ * })
+ * ```
+ */
+export function FullScreen(props) {
+    const { backgroundColor, padding = 0, children, } = props;
+    const termWidth = process.stdout.columns || 80;
+    const termHeight = process.stdout.rows || 24;
+    return Box({
+        width: termWidth,
+        height: termHeight,
+        padding,
+        backgroundColor,
+        flexDirection: 'column',
+    }, children);
+}
+/**
+ * Spacer - Flexible space that pushes siblings apart
+ *
+ * @example
+ * ```typescript
+ * // Push items to opposite ends
+ * HStack({ children: [
+ *   Logo(),
+ *   Spacer(),
+ *   UserMenu(),
+ * ]})
+ *
+ * // Equal spacing
+ * HStack({ children: [
+ *   Item1(),
+ *   Spacer(),
+ *   Item2(),
+ *   Spacer(),
+ *   Item3(),
+ * ]})
+ * ```
+ */
+export function Spacer(props = {}) {
+    const { flex = 1, minSize = 0 } = props;
+    return Box({
+        flexGrow: flex,
+        flexShrink: 0,
+        minWidth: minSize,
+        minHeight: minSize,
+    });
+}
+// =============================================================================
+// DIVIDER - Re-export from primitives (canonical implementation)
+// =============================================================================
+export { Divider } from '../../primitives/divider.js';
+//# sourceMappingURL=stack.js.map

package/dist/design-system/layout/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../../src/design-system/layout/stack.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAqDhD,MAAM,UAAU,MAAM,CAAC,eAAsC;IAC3D,yBAAyB;IACzB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAgB,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC;IAErF,MAAM,EACJ,GAAG,GAAG,CAAC,EACP,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,EACN,MAAM,GAAG,KAAK,EACd,WAAW,GAAG,QAAQ,EACtB,WAAW,EACX,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,2BAA2B;IAC3B,MAAM,UAAU,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY;QAChD,CAAC,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU;YAChC,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ;gBAC/B,CAAC,CAAC,SAAS,CAAC;IAEd,0CAA0C;IAC1C,MAAM,cAAc,GAAY,EAAE,CAAC;IACnC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAED,OAAO,GAAG,CACR;QACE,aAAa,EAAE,QAAQ;QACvB,UAAU;QACV,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,KAAK;QACL,MAAM;QACN,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;QAC7C,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;KAC9C,EACD,GAAG,cAAc,CAClB,CAAC;AACJ,CAAC;AAqDD,MAAM,UAAU,MAAM,CAAC,eAAsC;IAC3D,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAgB,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC;IAErF,MAAM,EACJ,GAAG,GAAG,CAAC,EACP,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,OAAO,EACjB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,EACN,MAAM,GAAG,KAAK,EACd,WAAW,GAAG,QAAQ,EACtB,WAAW,EACX,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,gBAAgB;IAChB,MAAM,UAAU,GAAG,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY;QAC/C,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU;YACjC,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ;gBAC/B,CAAC,CAAC,SAAS,CAAC;IAEd,cAAc;IACd,MAAM,cAAc,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY;QACvD,CAAC,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU;YAChC,CAAC,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ;gBACjC,CAAC,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe;oBACzC,CAAC,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc;wBACvC,CAAC,CAAC,YAAY,CAAC;IAEjB,0CAA0C;IAC1C,MAAM,cAAc,GAAY,EAAE,CAAC;IACnC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAED,OAAO,GAAG,CACR;QACE,aAAa,EAAE,KAAK;QACpB,UAAU;QACV,cAAc;QACd,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,KAAK;QACL,MAAM;QACN,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;QAC7C,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;KAC9C,EACD,GAAG,cAAc,CAClB,CAAC;AACJ,CAAC;AAmBD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,EACJ,UAAU,GAAG,IAAI,EACjB,QAAQ,GAAG,IAAI,EACf,KAAK,EACL,MAAM,EACN,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,KAAK,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IAEzD,OAAO,GAAG,CACR;QACE,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,UAAU;QAClB,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY;QAChD,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY;KACnD,EACD,QAAQ,CACT,CAAC;AACJ,CAAC;AAiBD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,eAAe,EACf,OAAO,GAAG,CAAC,EACX,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC;IAC/C,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;IAE7C,OAAO,GAAG,CACR;QACE,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,UAAU;QAClB,OAAO;QACP,eAAe;QACf,aAAa,EAAE,QAAQ;KACxB,EACD,QAAQ,CACT,CAAC;AACJ,CAAC;AAaD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,MAAM,CAAC,QAAqB,EAAE;IAC5C,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IAExC,OAAO,GAAG,CAAC;QACT,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,OAAO;QACjB,SAAS,EAAE,OAAO;KACnB,CAAC,CAAC;AACL,CAAC;AAED,gFAAgF;AAChF,iEAAiE;AACjE,gFAAgF;AAEhF,OAAO,EAAE,OAAO,EAAqB,MAAM,6BAA6B,CAAC"}

package/dist/design-system/layout/tabs.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Tabs - Tabbed content switcher
+ *
+ * Features:
+ * - Tab header bar with clickable tabs
+ * - Content panels that switch based on selection
+ * - Top/bottom tab bar position
+ * - Multiple visual styles (line, box, pills)
+ * - Keyboard navigation (arrows)
+ * - Closable tabs (optional)
+ */
+import type { VNode, ColorValue } from '../../utils/types.js';
+export interface Tab<T = string> {
+    /** Unique key */
+    key: T;
+    /** Tab label */
+    label: string;
+    /** Tab icon (optional) */
+    icon?: string;
+    /** Content to render when active */
+    content: VNode | (() => VNode);
+    /** Disabled state */
+    disabled?: boolean;
+    /** Closable (if tabs.closable is true) */
+    closable?: boolean;
+}
+export interface TabsOptions<T = string> {
+    /** Tab definitions */
+    tabs: Tab<T>[];
+    /** Initially active tab key */
+    initialTab?: T;
+    /** Tab bar position */
+    position?: 'top' | 'bottom';
+    /** Visual style */
+    style?: 'line' | 'box' | 'pills';
+    /** Active tab color */
+    activeColor?: ColorValue;
+    /** Inactive tab color */
+    inactiveColor?: ColorValue;
+    /** Allow closing tabs */
+    closable?: boolean;
+    /** Show tab count badge */
+    showCount?: boolean;
+    /** Callbacks */
+    onChange?: (key: T) => void;
+    onClose?: (key: T) => void;
+    /** Is component active (receives keyboard input) */
+    isActive?: boolean;
+}
+export interface TabsState<T = string> {
+    activeTab: () => T;
+    focusIndex: () => number;
+    tabs: () => Tab<T>[];
+    setActiveTab: (key: T) => void;
+    movePrev: () => void;
+    moveNext: () => void;
+    selectFocused: () => void;
+    closeTab: (key: T) => void;
+    addTab: (tab: Tab<T>) => void;
+}
+/**
+ * Create a Tabs state manager
+ */
+export declare function createTabs<T = string>(options: TabsOptions<T>): TabsState<T>;
+export interface TabsProps<T = string> extends TabsOptions<T> {
+    /** Pre-created state */
+    state?: TabsState<T>;
+    /** Height of content area (optional) */
+    contentHeight?: number;
+    /** Width of tabs (optional) */
+    width?: number;
+}
+/**
+ * Tabs - Tabbed content switcher
+ *
+ * @example
+ * // Basic tabs
+ * Tabs({
+ *   tabs: [
+ *     { key: 'home', label: 'Home', content: Text({}, 'Home content') },
+ *     { key: 'settings', label: 'Settings', content: Text({}, 'Settings') },
+ *   ],
+ * })
+ *
+ * @example
+ * // With style and icons
+ * Tabs({
+ *   tabs: [
+ *     { key: 'code', label: 'Code', icon: '📝', content: codeView() },
+ *     { key: 'output', label: 'Output', icon: '▶️', content: outputView() },
+ *   ],
+ *   style: 'pills',
+ *   activeColor: 'cyan',
+ * })
+ */
+export declare function Tabs<T = string>(props: TabsProps<T>): VNode;
+export interface TabPanelProps {
+    /** Content */
+    children: VNode;
+    /** Is currently active */
+    active?: boolean;
+    /** Padding */
+    padding?: number;
+}
+/**
+ * TabPanel - Wrapper for tab content
+ */
+export declare function TabPanel(props: TabPanelProps): VNode | null;
+export interface VerticalTabsOptions<T = string> extends TabsOptions<T> {
+    /** Tab bar width */
+    tabWidth?: number;
+    /** Content width */
+    contentWidth?: number;
+}
+/**
+ * VerticalTabs - Tabs with vertical tab bar on the left
+ */
+export declare function VerticalTabs<T = string>(props: VerticalTabsOptions<T>): VNode;
+export interface LazyTabsProps<T = string> extends TabsProps<T> {
+    /** Render loading placeholder */
+    loadingContent?: VNode;
+}
+/**
+ * LazyTabs - Tabs that only render content when activated
+ *
+ * Content functions are called lazily, only when the tab becomes active.
+ */
+export declare function LazyTabs<T = string>(props: LazyTabsProps<T>): VNode;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/design-system/layout/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/design-system/layout/tabs.ts"],"names":[],"mappings":"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"}