claritykit-svelte/dist/components/navigation/ChannelSidebar/ChannelSidebar.svelte.d.ts

A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility

type $$ComponentProps = {
    channels?: ChannelNode[];
    selectedChannelId?: string;
    collapsed?: boolean;
    showSearch?: boolean;
    searchPlaceholder?: string;
    allowDragDrop?: boolean;
    class?: string;
};
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
        $$bindings?: Bindings;
    } & Exports;
    (internal: unknown, props: Props & {
        $$events?: Events;
        $$slots?: Slots;
    }): Exports & {
        $set?: any;
        $on?: any;
    };
    z_$$bindings?: Bindings;
}
/**
 * ChannelSidebar
 *
 * Discord/Slack-style collapsible tree navigation component for channel organization.
 * Features hierarchical channel structure, drag-and-drop reordering, keyboard navigation,
 * and status indicators using existing ClarityKit patterns.
 *
 * @prop {ChannelNode[]} channels - Array of channel nodes with hierarchical structure
 * @prop {string} [selectedChannelId] - ID of currently selected channel
 * @prop {boolean} [collapsed=false] - Whether the sidebar is collapsed
 * @prop {boolean} [showSearch=true] - Whether to show the search input
 * @prop {string} [searchPlaceholder='Search channels...'] - Placeholder text for search
 * @prop {boolean} [allowDragDrop=true] - Whether to enable drag and drop reordering
 * @prop {string} [className] - Additional CSS classes
 *
 * @event channel-select - Fired when a channel is selected
 * @event channel-context-menu - Fired when right-clicking a channel
 * @event channels-reorder - Fired when channels are reordered via drag-and-drop
 * @event search-change - Fired when search input changes
 * @event toggle-collapse - Fired when sidebar collapse state changes
 */
declare const ChannelSidebar: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
    'channel-select': CustomEvent<{
        channel: ChannelNode;
    }>;
    'channel-context-menu': CustomEvent<{
        channel: ChannelNode;
        event: MouseEvent;
    }>;
    'channels-reorder': CustomEvent<{
        draggedChannel: ChannelNode;
        targetChannel: ChannelNode;
        position: "before" | "after" | "inside";
    }>;
    'search-change': CustomEvent<{
        query: string;
    }>;
    'toggle-collapse': CustomEvent<{
        collapsed: boolean;
    }>;
} & {
    [evt: string]: CustomEvent<any>;
}, {}, {}, "">;
type ChannelSidebar = InstanceType<typeof ChannelSidebar>;
export default ChannelSidebar;
//# sourceMappingURL=ChannelSidebar.svelte.d.ts.map