@salilvnair/dui 1.0.0

package/dist/lib/components/input/TabView.d.ts

@@ -0,0 +1,28 @@
+import { DuiSize, DuiRadius, DuiWidth, DuiFontStyle } from '../../core/DuiTypes';
+export interface TabItem {
+    id: string;
+    label: string;
+    badge?: number;
+    dot?: boolean;
+    dotColor?: string;
+    badgeColor?: string;
+}
+export type TabVariant = 'pill' | 'underline' | 'chip' | 'picker';
+export interface TabViewProps {
+    tabs: TabItem[];
+    activeTab: string;
+    onChange: (id: string) => void;
+    /** Falls back to DuiProvider context when omitted. */
+    size?: DuiSize;
+    variant?: TabVariant;
+    accentColor?: string;
+    className?: string;
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    /** Text color for inactive tabs */
+    color?: string;
+    /** Color for the active tab indicator and text */
+    activeColor?: string;
+    fontStyle?: DuiFontStyle;
+}
+export declare function TabView({ tabs, activeTab, onChange, size, variant, accentColor, className, width, borderRadius, color, activeColor, fontStyle, }: TabViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TagInputView.d.ts

@@ -0,0 +1,10 @@
+export interface TagInputViewProps {
+    tags: string[];
+    onChange: (tags: string[]) => void;
+    placeholder?: string;
+    accentColor?: string;
+    maxTags?: number;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function TagInputView({ tags, onChange, placeholder, accentColor, maxTags, disabled, className, }: TagInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TextInputView.d.ts

@@ -0,0 +1,36 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { DuiSize, DuiRadius, DuiWidth, DuiFontStyle } from '../../core/DuiTypes';
+/** `'default'` is kept for backwards-compat and resolves to context size. */
+export type TextInputSize = 'default' | DuiSize;
+export interface TextInputViewProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: TextInputSize;
+    /** true = token border-radius (default), false = 0px square */
+    rounded?: boolean;
+    /** Override focus border / ring color (CSS var or raw) */
+    accentColor?: string;
+    /** Red border state */
+    error?: boolean;
+    /** Icon rendered inside the left edge (alias: prefixIcon) */
+    iconLeft?: ReactNode;
+    /** Icon rendered inside the right edge (alias: suffixIcon). Ignored when masked=true. */
+    iconRight?: ReactNode;
+    /** Alias for iconLeft */
+    prefixIcon?: ReactNode;
+    /** Alias for iconRight. Ignored when masked=true. */
+    suffixIcon?: ReactNode;
+    /** When true, value is hidden (type=password) with an eye toggle button on the right */
+    masked?: boolean;
+    /** Custom icons for the masked toggle. Defaults to EyeOffIcon (hidden) / EyeIcon (shown). */
+    maskIcon?: {
+        hidden?: ReactNode;
+        shown?: ReactNode;
+    };
+    /** When true: no border, transparent bg, no focus ring — for embedding inside containers that supply their own chrome */
+    naked?: boolean;
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    /** Text color override */
+    color?: string;
+    fontStyle?: DuiFontStyle;
+}
+export declare const TextInputView: import('react').ForwardRefExoticComponent<TextInputViewProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/lib/components/input/ThemeCardSelectorView.d.ts

@@ -0,0 +1,18 @@
+export interface ThemeOption {
+    value: string;
+    label: string;
+    description?: string;
+    preview?: {
+        bg: string;
+        panel: string;
+        accent: string;
+        text: string;
+    };
+}
+export interface ThemeCardSelectorViewProps {
+    options: ThemeOption[];
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+}
+export declare function ThemeCardSelectorView({ options, value, onChange, className, }: ThemeCardSelectorViewProps): import("react").JSX.Element;

package/dist/lib/components/input/ToggleSwitchView.d.ts

@@ -0,0 +1,19 @@
+import { DuiSize } from '../../core/DuiTypes';
+/** Accepts all 4 canonical sizes (maps to DuiToggle tokens). */
+export type ToggleSwitchSize = DuiSize;
+export interface ToggleSwitchViewProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    /** Falls back to DuiProvider context when omitted. */
+    size?: ToggleSwitchSize;
+    accentColor?: string;
+    label?: string;
+    labelPosition?: 'left' | 'right';
+    className?: string;
+    /** Color when checked — alias for accentColor with context-level support */
+    activeColor?: string;
+    /** Label text color override */
+    color?: string;
+}
+export declare function ToggleSwitchView({ checked, onChange, disabled, size, accentColor, label, labelPosition, className, activeColor, color, }: ToggleSwitchViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/BottomPanelView.d.ts

@@ -0,0 +1,16 @@
+export interface BottomPanelTab {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    content: React.ReactNode;
+}
+export interface BottomPanelViewProps {
+    tabs: BottomPanelTab[];
+    defaultHeight?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    defaultCollapsed?: boolean;
+    accentColor?: string;
+    className?: string;
+}
+export declare function BottomPanelView({ tabs, defaultHeight, minHeight, maxHeight, defaultCollapsed, accentColor, className, }: BottomPanelViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/CollapsibleSectionView.d.ts

@@ -0,0 +1,14 @@
+export interface CollapsibleSectionViewProps {
+    title: string;
+    expanded: boolean;
+    onToggle: () => void;
+    /** Count badge shown next to title */
+    badge?: number;
+    /** Accent color for title chip + badge. Accepts any CSS color or var(). */
+    accentColor?: string;
+    /** Slot rendered on the far right of the header (action buttons etc.) */
+    headerRight?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CollapsibleSectionView({ title, expanded, onToggle, badge, accentColor, headerRight, children, className, }: CollapsibleSectionViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/DebugView.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+export interface DebugVariable {
+    name: string;
+    value: unknown;
+    type?: string;
+}
+export interface DebugCallFrame {
+    fn: string;
+    file?: string;
+    line?: number | null;
+    col?: number;
+    isUser?: boolean;
+}
+export interface DebugBreakpoint {
+    /** Consumer-defined key that groups breakpoints (e.g. "tabId:phase"). */
+    key: string;
+    line: number;
+    disabled?: boolean;
+    condition?: string;
+    /** Display label shown in the breakpoints list. */
+    label?: string;
+    /** Optional badge rendered before the label (e.g. HTTP method chip). */
+    badge?: ReactNode;
+}
+/** Current state of the debug session — provided by consumer. */
+export interface DebugSession {
+    active: boolean;
+    status: 'idle' | 'running' | 'paused';
+    pausedLine?: number | null;
+    variables?: DebugVariable[];
+    callStack?: DebugCallFrame[];
+    breakpoints?: DebugBreakpoint[];
+    breakpointsMuted?: boolean;
+}
+/** All action callbacks — consumer provides implementations. */
+export interface DebugActions {
+    onContinue?: () => void;
+    onStepOver?: () => void;
+    onStepInto?: () => void;
+    onStepOut?: () => void;
+    onRestart?: () => void;
+    onStop?: () => void;
+    onAddWatchExpression?: (expr: string) => void;
+    onRemoveWatchExpression?: (expr: string) => void;
+    onClearWatchExpressions?: () => void;
+    onToggleBreakpoint?: (key: string, line: number, currentlyDisabled: boolean) => void;
+    onRemoveBreakpoint?: (key: string, line: number) => void;
+    onNavigateBreakpoint?: (key: string, line: number) => void;
+    onToggleMuteBreakpoints?: () => void;
+    onClearAllBreakpoints?: () => void;
+    /** Called when user clicks Restart Frame in call stack. */
+    onRestartFrame?: (frameIndex: number) => void;
+}
+export interface DebugViewProps {
+    session: DebugSession;
+    actions?: DebugActions;
+    /** Controlled watch expressions — managed externally. */
+    watchExpressions?: string[];
+    accentColor?: string;
+    title?: string;
+    className?: string;
+}
+export declare function DebugView({ session, actions, watchExpressions, accentColor, title, className, }: DebugViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/FolderView.d.ts

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react';
+import { ContextMenuItem } from '../modal/ContextMenuView';
+export interface FolderNode<T = unknown> {
+    id: string;
+    label: string;
+    children?: FolderNode<T>[];
+    items?: T[];
+    data?: unknown;
+}
+export interface FolderAction<T = unknown> {
+    id: string;
+    icon: ReactNode;
+    tooltip?: string;
+    disabled?: boolean | ((node: FolderNode<T>) => boolean);
+    onClick: (node: FolderNode<T>, e: React.MouseEvent) => void;
+}
+export interface FolderRunnerTab {
+    id: string;
+    label: string;
+    badge?: number;
+    dot?: boolean;
+    content: ReactNode;
+}
+export interface FolderRunnerConfig<T = unknown> {
+    title?: string;
+    subtitle?: string | ((node: FolderNode<T>) => string);
+    tabs: FolderRunnerTab[];
+    saveLabel?: string;
+    onSave?: (tabId: string, node: FolderNode<T>) => void;
+    accentColor?: string;
+}
+export type DropPosition = 'before' | 'inside' | 'after';
+/** Summary entry shown in the folder-move confirm modal */
+export interface MoveSummaryEntry {
+    label: string;
+    /** 'folder' shows a folder icon; 'item' shows the accent-color dot */
+    type: 'folder' | 'item';
+}
+export interface FolderViewProps<T = unknown> {
+    nodes: FolderNode<T>[];
+    accentColor?: string;
+    folderActions?: FolderAction<T>[];
+    contextMenuItems?: (node: FolderNode<T>) => ContextMenuItem[];
+    runner?: FolderRunnerConfig<T>;
+    defaultExpandedIds?: Set<string>;
+    expandedIds?: Set<string>;
+    onToggle?: (id: string) => void;
+    renderItem?: (item: T, node: FolderNode<T>, depth: number) => ReactNode;
+    onRename?: (id: string, newName: string) => void;
+    onFolderClick?: (node: FolderNode<T>) => void;
+    emptyLabel?: string;
+    className?: string;
+    indentPx?: number;
+    onContextMenu?: (e: React.MouseEvent, node: FolderNode<T>) => void;
+    /** Enable HTML5 drag-and-drop reordering/nesting of folder nodes */
+    draggable?: boolean;
+    /** Guard per-node draggability (e.g. pinned/protected folders) */
+    isDraggableNode?: (node: FolderNode<T>) => boolean;
+    /** Called when a folder node is dropped. position = where relative to targetId. */
+    onMove?: (dragId: string, targetId: string, position: DropPosition) => void;
+    /** Show a confirm modal before calling onMove */
+    confirmFolderMove?: boolean;
+    /** Return extra entries shown in the confirm modal body (sub-folders + items that will move) */
+    getMoveSummary?: (dragId: string) => MoveSummaryEntry[];
+    /** Enable HTML5 drag-and-drop for items inside nodes */
+    draggableItems?: boolean;
+    /** Required when draggableItems=true — stable unique ID per item */
+    getItemId?: (item: T) => string;
+    /**
+     * Called when an item is dropped.
+     * targetKind='node'  → dropped onto a folder node (position is always 'inside')
+     * targetKind='item'  → dropped onto a sibling item (position is 'before'|'after')
+     */
+    onItemMove?: (itemId: string, targetId: string, targetKind: 'node' | 'item', position: DropPosition) => void;
+    inlineCreate?: {
+        parentId: string | null;
+    } | null;
+    onInlineCreateCommit?: (parentId: string | null, name: string) => void;
+    onInlineCreateCancel?: () => void;
+    /** Pass a folder node id to trigger inline rename mode on that folder */
+    renamingNodeId?: string | null;
+    /** Called after the rename input is committed or cancelled so the caller can clear renamingNodeId */
+    onRenameDone?: () => void;
+}
+export declare function FolderView<T = unknown>({ nodes, accentColor, folderActions, contextMenuItems, runner, defaultExpandedIds, expandedIds: controlled, onToggle, renderItem, onRename, onFolderClick, onContextMenu, emptyLabel, className, indentPx, draggable, isDraggableNode, onMove, confirmFolderMove, getMoveSummary, draggableItems, getItemId, onItemMove, inlineCreate, onInlineCreateCommit, onInlineCreateCancel, renamingNodeId, onRenameDone, }: FolderViewProps<T>): import("react").JSX.Element;

package/dist/lib/components/layout/ResizablePanelView.d.ts

@@ -0,0 +1,10 @@
+export interface ResizablePanelViewProps {
+    defaultHeight: number;
+    minHeight?: number;
+    maxHeight?: number;
+    borderRadius?: number;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function ResizablePanelView({ defaultHeight, minHeight, maxHeight, borderRadius, children, className, style, }: ResizablePanelViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/SettingsNavView.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { DuiSize, DuiRadius, DuiFontStyle } from '../../core/DuiTypes';
+export interface SettingsNavItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    badge?: string;
+}
+export interface SettingsNavGroup {
+    title?: string;
+    items: SettingsNavItem[];
+}
+export interface SettingsNavViewProps {
+    groups: SettingsNavGroup[];
+    activeId?: string;
+    onSelect?: (id: string) => void;
+    accentColor?: string;
+    className?: string;
+    /** Falls back to DuiProvider size when omitted. */
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    /** Text color for inactive items */
+    color?: string;
+    /** Color for active item text and indicator */
+    activeColor?: string;
+    fontStyle?: DuiFontStyle;
+}
+export declare function SettingsNavView({ groups, activeId, onSelect, accentColor, className, size, borderRadius, color, activeColor, fontStyle, }: SettingsNavViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/SideNavView.d.ts

@@ -0,0 +1,39 @@
+import { DuiSize } from '../../core/DuiTypes';
+export interface SideNavItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    /** Accent-colored pill badge — e.g. "New", 3 */
+    badge?: number | string;
+    /** Plain muted count shown right of group header label */
+    count?: number;
+    /** When true: renders as uppercase section header (non-selectable, collapsible) */
+    isGroup?: boolean;
+    children?: SideNavItem[];
+}
+export interface SideNavViewProps {
+    items: SideNavItem[];
+    activeId?: string;
+    onSelect?: (id: string) => void;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    /** Controlled collapsed state — overrides internal state when provided */
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    defaultOpenIds?: string[];
+    width?: number;
+    collapsedWidth?: number;
+    accentColor?: string;
+    /** Render a search box above the nav items */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Message shown when no items match the search */
+    emptyText?: string;
+    /** Falls back to DuiProvider context when omitted. */
+    size?: DuiSize;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function countLeaves(items: SideNavItem[]): number;
+export declare function filterItems(items: SideNavItem[], q: string): SideNavItem[];
+export declare function SideNavView({ items, activeId, onSelect, collapsible, defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, defaultOpenIds, width, collapsedWidth, accentColor, searchable, searchPlaceholder, emptyText, size, className, style, }: SideNavViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/SpacerView.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface SpacerViewProps {
+    orientation?: 'horizontal' | 'vertical';
+    spacing?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function SpacerView({ orientation, spacing, className }: SpacerViewProps): React.JSX.Element;

package/dist/lib/components/layout/SplitPanelView.d.ts

@@ -0,0 +1,33 @@
+export type SplitDirection = 'horizontal' | 'vertical';
+export interface SplitPanelViewProps {
+    direction?: SplitDirection;
+    first: React.ReactNode;
+    second: React.ReactNode;
+    /** Initial split (0–100%) for the first panel. Uncontrolled default. */
+    defaultSplit?: number;
+    /** Controlled split value. When provided, overrides internal state — wire with onResize. */
+    split?: number;
+    /** Min px size for first panel */
+    minFirst?: number;
+    /** Min px size for second panel */
+    minSecond?: number;
+    /** Min % size for first panel (0–100). Takes precedence over minFirst when set — the divider can't drag below this. */
+    minFirstPct?: number;
+    /** Min % size for second panel (0–100). Takes precedence over minSecond when set. */
+    minSecondPct?: number;
+    accentColor?: string;
+    /** Fired on every drag move and on double-click reset */
+    onResize?: (split: number) => void;
+    /** Fired once when drag ends (pointer up) or on double-click reset */
+    onResizeEnd?: (split: number) => void;
+    /** Fired when the handle is clicked without dragging (e.g. to collapse/expand) */
+    onHandleClick?: () => void;
+    /**
+     * Tooltip shown on pill hover. Pass `null` to suppress.
+     * Defaults to "Double-click to reset Alt+/ / Drag to resize" with a styled kbd badge.
+     */
+    pillTooltip?: React.ReactNode | null;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare function SplitPanelView({ direction, first, second, defaultSplit, split: splitProp, minFirst, minSecond, minFirstPct, minSecondPct, accentColor, onResize, onResizeEnd, onHandleClick, pillTooltip, style, className, }: SplitPanelViewProps): import("react").JSX.Element;

package/dist/lib/components/modal/ContextMenuView.d.ts

@@ -0,0 +1,28 @@
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    iconColor?: string;
+    shortcut?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    separator?: boolean;
+    children?: ContextMenuItem[];
+    onClick?: () => void;
+}
+export type ContextMenuWidth = 'auto' | 'sm' | 'md' | 'lg' | number;
+export interface ContextMenuViewProps {
+    items: ContextMenuItem[];
+    anchorEl: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    width?: ContextMenuWidth;
+    rounded?: boolean;
+    matchAnchorWidth?: boolean;
+    position?: {
+        x: number;
+        y: number;
+    };
+    align?: 'auto' | 'left' | 'right';
+}
+export declare function ContextMenuView({ items, anchorEl, open, onClose, width, rounded, matchAnchorWidth, position, align, }: ContextMenuViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/InfoPopupView.d.ts

@@ -0,0 +1,17 @@
+export interface InfoPopupItem {
+    code: string;
+    description: string;
+}
+export interface InfoPopupViewProps {
+    open: boolean;
+    onClose: () => void;
+    anchorEl?: HTMLElement | null;
+    title: string;
+    description?: string;
+    items?: InfoPopupItem[];
+    footer?: string;
+    wikiLabel?: string;
+    wikiHref?: string;
+    width?: number;
+}
+export declare function InfoPopupView({ open, onClose, anchorEl, title, description, items, footer, wikiLabel, wikiHref, width, }: InfoPopupViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/ModalView.d.ts

@@ -0,0 +1,41 @@
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * 'popout' — centered overlay with backdrop, portalled to document.body (default)
+ * 'inline' — bare card with no backdrop, no portal; parent controls positioning
+ */
+export type ModalMode = 'popout' | 'inline';
+export interface ModalViewProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    /** Secondary text shown below the title in the header */
+    subtitle?: string;
+    /** Node rendered to the left of the title block — e.g. a coloured icon circle */
+    headerIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    footerLeft?: React.ReactNode;
+    footerRight?: React.ReactNode;
+    size?: ModalSize;
+    showCloseIcon?: boolean;
+    /** Optional CSS color value for a tinted header background (e.g. 'var(--color-protocol-rest)') */
+    headerColor?: string;
+    /** When true, renders the header as a left→right gradient (accent tint → surface) instead of a flat tint */
+    headerGradient?: boolean;
+    /** Optional node rendered in the header right area, before the X button */
+    headerRight?: React.ReactNode;
+    /** When true, removes body padding (e.g. for full-bleed editor modals) */
+    noPadding?: boolean;
+    /** When true, uses var(--color-elevated) for the card background instead of var(--color-surface) */
+    elevated?: boolean;
+    className?: string;
+    /**
+     * 'popout' (default) — portal + backdrop + centered overlay
+     * 'inline' — bare card, no portal, no backdrop; parent div handles positioning
+     */
+    mode?: ModalMode;
+    /** Override the default 85vh max-height of the modal card */
+    maxHeight?: string;
+    /** Extra styles merged onto the body div (e.g. flex column layout for nested flex children) */
+    bodyStyle?: React.CSSProperties;
+}
+export declare function ModalView({ open, onClose, title, subtitle, headerIcon, children, footerLeft, footerRight, size, showCloseIcon, headerColor, headerGradient, headerRight, noPadding, elevated, mode, maxHeight, bodyStyle, }: ModalViewProps): import("react").JSX.Element | null;

package/dist/lib/components/rearrange/RearrangeView.d.ts

@@ -0,0 +1,34 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface RearrangeItem {
+    /** Stable unique id. */
+    id: string;
+    /** Visible label (or pass `render` for custom content). */
+    label?: string;
+    /** Enabled state — shows a checkbox when `selectable` is on. */
+    enabled?: boolean;
+    /** Optional leading glyph / emoji. */
+    icon?: string;
+    /** Optional custom row content (overrides label). */
+    render?: () => React.ReactNode;
+    /** Lock this row from being reordered or toggled. */
+    locked?: boolean;
+}
+export interface RearrangeViewProps {
+    items: RearrangeItem[];
+    /** Fired with the new ordered/toggled list on any change. */
+    onChange: (items: RearrangeItem[]) => void;
+    /** Show an enable/disable checkbox per row. Default: true. */
+    selectable?: boolean;
+    /** Accent color (CSS var or value) for the active drop indicator + checkbox. */
+    accentColor?: string;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * RearrangeView — a drag-to-reorder list with an optional enable/disable checkbox
+ * per row. Theme-aware (DUI CSS variables). Reordering uses native HTML5 drag and
+ * drop with a live drop indicator; the checkbox uses DUI's CheckboxView.
+ */
+export declare function RearrangeView({ items, onChange, selectable, accentColor, size, className, style, }: RearrangeViewProps): import("react").JSX.Element;

package/dist/lib/components/tabs/PilledTabView.d.ts

@@ -0,0 +1,19 @@
+export interface PilledTab {
+    id: string;
+    label: string;
+}
+export interface PilledTabViewProps {
+    tabs: PilledTab[];
+    activeId: string;
+    onChange: (id: string) => void;
+    /** CSS color or variable for the active pill background. Defaults to indigo. */
+    accentColor?: string;
+    /**
+     * `'rounded'` — subtle rounded corners (default, border-radius 8/6).
+     * `'pill'`    — fully pill-shaped corners (border-radius 999).
+     */
+    mode?: 'rounded' | 'pill';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function PilledTabView({ tabs, activeId, onChange, accentColor, mode, className, style, }: PilledTabViewProps): import("react").JSX.Element;

package/dist/lib/components/tabs/TabBarView.d.ts

@@ -0,0 +1,28 @@
+import { DuiSize } from '../../core/DuiTypes';
+export type TabBarProtocol = 'rest' | 'graphql' | 'websocket' | 'grpc' | 'soap' | 'ai' | 'mcp';
+export type TabBarTabType = 'request' | 'settings' | 'mock-server' | 'daakia-ai';
+export type RealtimeProtocol = 'websocket' | 'sse' | 'socketio' | 'mqtt';
+export interface TabBarTab {
+    id: string;
+    label: string;
+    type?: TabBarTabType;
+    protocol?: TabBarProtocol;
+    method?: string;
+    dirty?: boolean;
+    pinned?: boolean;
+    rtProtocol?: RealtimeProtocol;
+}
+export interface TabBarViewProps {
+    tabs: TabBarTab[];
+    activeTabId: string;
+    onTabClick: (id: string) => void;
+    onTabClose?: (id: string) => void;
+    onAddTab?: () => void;
+    accentColor?: string;
+    /** Falls back to DuiProvider size when omitted. Overrides `height`. */
+    size?: DuiSize;
+    /** Raw pixel height — prefer `size` for token-aligned sizing. */
+    height?: number;
+    className?: string;
+}
+export declare function TabBarView({ tabs, activeTabId, onTabClick, onTabClose, onAddTab, accentColor, size, height, className, }: TabBarViewProps): import("react").JSX.Element;

package/dist/lib/components/tabs/TabView.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { DuiSize, DuiRadius, DuiWidth, DuiFontStyle } from '../../core/DuiTypes';
+export interface TabItem {
+    id: string;
+    label: string;
+    badge?: number;
+    dot?: boolean;
+    dotColor?: string;
+    badgeColor?: string;
+    closeable?: boolean;
+    /** Custom content rendered after the label */
+    extra?: ReactNode;
+}
+export type TabViewVariant = 'pill' | 'underline' | 'gql';
+export interface TabViewProps {
+    tabs: TabItem[];
+    active: string;
+    onChange: (id: string) => void;
+    onClose?: (id: string) => void;
+    onAdd?: () => void;
+    variant?: TabViewVariant;
+    /** Falls back to DuiProvider size when omitted. */
+    size?: DuiSize;
+    accentColor?: string;
+    className?: string;
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    /** Text color for inactive tabs */
+    color?: string;
+    /** Color for active tab and indicator */
+    activeColor?: string;
+    fontStyle?: DuiFontStyle;
+}
+export declare function TabView({ variant, width, ...props }: TabViewProps): import("react").JSX.Element;

package/dist/lib/core/ButtonBase.d.ts

@@ -0,0 +1,28 @@
+import { DuiSize, DuiRadius, DuiWidth, DuiFontStyle } from './DuiTypes';
+export interface ButtonBaseConfig {
+    height: string;
+    fontSize: string;
+    iconSize: number;
+    borderRadius: string;
+    paddingX: string;
+    gap: string;
+    width: string;
+    color: string | undefined;
+    defaultColor: string | undefined;
+    activeColor: string | undefined;
+    fontStyle: DuiFontStyle | undefined;
+}
+/** Local override props that any button component can accept. */
+export interface ButtonContainerProps {
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    defaultColor?: string;
+    activeColor?: string;
+    fontStyle?: DuiFontStyle;
+}
+/**
+ * Category base for: ButtonView, IconButtonView, SplitButtonView, AIButtonView, DropDownButtonView.
+ * Falls back to DuiProvider values when no local prop is given.
+ */
+export declare function useButtonBase(sizeProp?: DuiSize, overrides?: ButtonContainerProps): ButtonBaseConfig;