@knitify/vue 0.0.9 → 2.0.0

package/dist/types/components/ChatDock/messenger-types.d.ts

@@ -0,0 +1,280 @@
+import type { ComputedRef, Ref } from 'vue';
+export type ChatConversation = {
+    id: string;
+    name: string;
+    /** Image URL; the avatar falls back to initials from `name`. */
+    avatar?: string;
+    /** Last message line, shown in the panel row. */
+    preview?: string;
+    unread?: number;
+    /** ISO timestamp; when present the panel sorts newest first. */
+    updatedAt?: string;
+    /**
+     * Untouched by the store — carry app-specific payload through to the slots.
+     * Replaced, not merged, when `refreshConversations` returns a conversation
+     * that carries one: the merge is a shallow spread.
+     */
+    meta?: unknown;
+};
+export type ChatMessage = {
+    id: string;
+    conversationId: string;
+    text: string;
+    /** `true` for the current user; drives `KChatMessage`'s `sender`. */
+    sender: boolean;
+    /** Display string, e.g. "10:42 AM". */
+    time?: string;
+    /** ISO timestamp, for ordering by the server. */
+    sentAt?: string;
+    /** Optimistic send in flight; cleared when `sendMessage` resolves. */
+    pending?: boolean;
+    /** `sendMessage` rejected; the message shows a retry control. */
+    failed?: boolean;
+    /**
+     * Untouched by the store — carry app-specific payload through to the slots.
+     * An optimistic message created by `send()` has none; the message returned
+     * by `sendMessage` replaces it wholesale, so `meta` appears when the server
+     * response does.
+     */
+    meta?: unknown;
+};
+export type ChatMessagesPage = {
+    messages: ChatMessage[];
+    /** `null` or `undefined` means there is nothing older. */
+    nextCursor?: string | null;
+};
+export type ChatDockLoaders = {
+    loadConversations: () => Promise<ChatConversation[]>;
+    /** Chronological within the page (oldest first). `cursor` asks for older. */
+    loadMessages: (id: string, cursor?: string) => Promise<ChatMessagesPage>;
+    /** Optional; without it the composer is hidden. */
+    sendMessage?: (id: string, text: string) => Promise<ChatMessage>;
+    /** Optional; called when a window expands. Unread is zeroed locally either way. */
+    markRead?: (id: string) => Promise<void>;
+};
+export type ChatDockOptions = {
+    /** Drop messages, cursor and draft when a window closes. Default `false`. */
+    evictOnClose?: boolean;
+};
+export type ChatWindowState = 'closed' | 'expanded' | 'railed';
+export type LoadState = 'idle' | 'loading' | 'loaded' | 'error';
+export type ChatEntry = {
+    conversation: ChatConversation;
+    window: ChatWindowState;
+    messages: ChatMessage[];
+    /** `undefined` until the first page loads; `null` when nothing older exists. */
+    cursor: string | null | undefined;
+    loading: LoadState;
+    loadingOlder: boolean;
+    error?: unknown;
+    draft: string;
+};
+export type ChatDockErrorKind = 'conversations' | 'messages' | 'send';
+export type ChatDockStore = {
+    /** Sorted newest first when `updatedAt` is present on every entry. */
+    conversations: ComputedRef<ChatConversation[]>;
+    entries: Record<string, ChatEntry>;
+    /** Ids whose window is not `'closed'`, most recently opened first. */
+    openIds: ComputedRef<string[]>;
+    listLoading: Ref<LoadState>;
+    listError: Ref<unknown>;
+    query: Ref<string>;
+    /** Whether a composer can be rendered at all. */
+    canSend: boolean;
+    refreshConversations: () => Promise<void>;
+    open: (id: string) => Promise<void>;
+    /**
+     * Shows a window again without treating it as a user-initiated open: no
+     * rank change, no unread reset, no `markRead`, no `'open'` event. For a
+     * reflow un-railing a window; use `open` for a real choice.
+     */
+    expand: (id: string) => Promise<void>;
+    minimize: (id: string) => void;
+    close: (id: string) => void;
+    loadOlder: (id: string) => Promise<void>;
+    send: (id: string, text: string) => Promise<void>;
+    retry: (id: string, messageId: string) => Promise<void>;
+    retryLoad: (id: string) => Promise<void>;
+    receive: (message: ChatMessage) => void;
+    setDraft: (id: string, text: string) => void;
+    setQuery: (text: string) => void;
+    /**
+     * Fires after an action outcome, so a component can mirror it as an emit.
+     * Returns an unsubscribe function.
+     */
+    onEvent: (listener: (event: ChatDockEvent) => void) => () => void;
+};
+export type ChatDockEvent = {
+    type: 'open';
+    id: string;
+} | {
+    type: 'close';
+    id: string;
+} | {
+    type: 'send';
+    message: ChatMessage;
+} | {
+    type: 'receive';
+    message: ChatMessage;
+} | {
+    type: 'error';
+    kind: ChatDockErrorKind;
+    id?: string;
+    error: unknown;
+};
+export type KMessengerProps = {
+    /** The component creates its own store. Exactly one of `loaders` or `store`. */
+    loaders?: ChatDockLoaders;
+    /** A store created with `useChatDock` elsewhere and shared. */
+    store?: ChatDockStore;
+    minWindows?: number;
+    title?: string;
+    placeholder?: string;
+    /** Passed to `useChatDock` when the component creates the store. */
+    evictOnClose?: boolean;
+    /**
+     * Passed to every window's `KChat`: stacks message actions under the bubble.
+     * Defaults to `true` — a dock window is too narrow to spare the width beside
+     * each bubble. Pass `false` to put them back at the side.
+     */
+    actionsBottom?: boolean;
+    /**
+     * Called for each message with the one before it. Return a label to render
+     * a divider above that message, or `undefined` for none. `previous` is
+     * `undefined` for the first message in the list.
+     *
+     * A boundary hook, not a date hook: an app tracking its own unread boundary
+     * returns "Unread messages" there and a day label elsewhere.
+     *
+     * Called for every message on every render, so compare pre-computed day
+     * keys here rather than parsing and formatting inside the callback.
+     */
+    dateLabel?: (message: ChatMessage, previous?: ChatMessage) => string | undefined;
+    /**
+     * Return a label to render this message as a `KChatNotice` instead of a
+     * `KChatMessage`. `undefined` renders it as a normal bubble.
+     *
+     * For an event that arrives in the same message stream as ordinary
+     * messages and is distinguished per message — "You left the meeting room",
+     * "Call ended at 01:48 PM".
+     *
+     * A notice renders no bubble, no sender side, no time and no actions row,
+     * and so no retry control either: a message carrying both `failed` and a
+     * notice label loses the way to retry it. Return `undefined` for a message
+     * still in flight. `dateLabel` still applies above a notice, so a day
+     * divider can precede one.
+     *
+     * Called for every message on every render, like `dateLabel` — read a
+     * pre-computed field here rather than deriving one inside the callback.
+     */
+    noticeLabel?: (message: ChatMessage) => string | undefined;
+};
+export type KMessengerEmits = {
+    open: [id: string];
+    close: [id: string];
+    send: [message: ChatMessage];
+    receive: [message: ChatMessage];
+    error: [kind: ChatDockErrorKind, id: string | undefined, error: unknown];
+};
+export type KMessengerSlots = {
+    /** Inside the avatar circle of a head and a panel row. */
+    avatar?(props: {
+        conversation: ChatConversation;
+    }): any;
+    /**
+     * The window header's action area, before the minimize and close controls.
+     * `window-` prefixed because an unprefixed `title` would read as the dock's
+     * own title, which is already a prop, and `actions` would collide with the
+     * panel's.
+     */
+    'window-actions'?(props: {
+        conversation: ChatConversation;
+        entry: ChatEntry;
+    }): any;
+    /** The window header's title text. */
+    'window-title'?(props: {
+        conversation: ChatConversation;
+        entry: ChatEntry;
+    }): any;
+    /** Inside a railed head's avatar circle. Falls back to `avatar`. */
+    head?(props: {
+        conversation: ChatConversation;
+        entry: ChatEntry;
+    }): any;
+    /** Inside a `+N` popover row's avatar. Falls back to `avatar`. */
+    row?(props: {
+        conversation: ChatConversation;
+        entry: ChatEntry;
+    }): any;
+    /** The panel header's action area, between the title and close. */
+    'panel-actions'?(): any;
+    /** The whole panel row. */
+    item?(props: {
+        conversation: ChatConversation;
+        entry: ChatEntry;
+    }): any;
+    /** One message bubble's content. */
+    message?(props: {
+        message: ChatMessage;
+        conversation: ChatConversation;
+    }): any;
+    /**
+     * The hover row beside a message's bubble — put a `KChatMessageActions`
+     * here. `message-` prefixed to match `window-actions` and `panel-actions`,
+     * which are the two headers rather than a message.
+     *
+     * Forwarded only when you pass it, so `KChatMessage`'s own empty actions
+     * rendering is unchanged otherwise. Not rendered for a message that
+     * `noticeLabel` turned into a notice.
+     */
+    'message-actions'?(props: {
+        message: ChatMessage;
+        conversation: ChatConversation;
+    }): any;
+    /** The window footer. */
+    composer?(props: {
+        conversation: ChatConversation;
+        draft: string;
+        send: (text: string) => void;
+        setDraft: (text: string) => void;
+    }): any;
+    /** Window body while the first page loads. */
+    loading?(props: {
+        conversation: ChatConversation;
+    }): any;
+    /**
+     * The list row shown while an older page loads. Rendered inside the
+     * message `<ul>`, so its root must be an `<li>`.
+     */
+    'loading-older'?(props: {
+        conversation: ChatConversation;
+    }): any;
+    /** Window body when the first page failed. */
+    error?(props: {
+        conversation: ChatConversation;
+        error: unknown;
+        retry: () => void;
+    }): any;
+    /** Panel text when the filter matches nothing. */
+    empty?(): any;
+    launcher?(): any;
+    /**
+     * Replaces the rendered divider while keeping `dateLabel`'s positioning.
+     * Whatever you render must be an `<li>`: it is a direct child of the
+     * message list's `<ul>`.
+     */
+    divider?(props: {
+        label: string;
+        message: ChatMessage;
+        previous?: ChatMessage;
+    }): any;
+    /**
+     * Replaces the rendered notice while keeping `noticeLabel`'s decision.
+     * Whatever you render must be an `<li>`: it is a direct child of the
+     * message list's `<ul>`.
+     */
+    notice?(props: {
+        label: string;
+        message: ChatMessage;
+    }): any;
+};

package/dist/types/components/ChatDock/store-keys.d.ts

@@ -0,0 +1,7 @@
+import { type InjectionKey } from 'vue';
+import type { ChatDockStore } from './messenger-types';
+export declare const chatDockStoreKey: InjectionKey<ChatDockStore>;
+/** Shares a store created with `useChatDock` with the component subtree. */
+export declare function provideChatDock(store: ChatDockStore): void;
+/** The store an ancestor provided, or `undefined` outside one. */
+export declare function injectChatDock(): ChatDockStore | undefined;

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

@@ -0,0 +1,134 @@
+export type KChatWindowState = 'expanded' | 'railed';
+export type KChatDockProps = {
+    /**
+     * Capacity floor, so a narrow dock still shows one window rather than
+     * nothing but heads. Gap, offset and window dimensions are deliberately not
+     * props — they are the CSS variables registered on `.KChatDock`, and the
+     * module measures them back rather than being told them twice.
+     */
+    minWindows?: number;
+};
+export type KChatDockEmits = {
+    reflow: [];
+    launcher: [];
+    /** After the panel opens or closes. */
+    panel: [open: boolean];
+    /** After each filter, including the reset when the panel closes. */
+    search: [query: string];
+    /**
+     * An item was picked. `opened` is `true` when the dock expanded an existing
+     * `KChatWindow` with that id itself; `false` means the app must mount one.
+     */
+    select: [id: string, opened: boolean];
+    /**
+     * A user expanded a railed window from its head, a `+N` popover row, or the
+     * window's own toggle. Distinct from `update:state` on the window, which
+     * also fires when a reflow un-rails by capacity.
+     */
+    activate: [id: string];
+};
+export type KChatDockSlots = {
+    default?(): any;
+    launcher?(): any;
+};
+/**
+ * `KChatWindow` teleports its head into the dock's rail, which makes it a
+ * multi-root (Fragment) component — unlike every other component in this
+ * package. A template `ref` on it resolves `$el` to the fragment's anchor
+ * text node, not the window element, so reading DOM properties (e.g.
+ * `.classList`) off that ref will throw.
+ */
+export type KChatWindowProps = {
+    closable?: boolean;
+    minimizable?: boolean;
+    title?: string;
+    unread?: number;
+    /**
+     * Links this window to its head in the rail. Core reads it from
+     * `data-kt-chat-window` to pair the two, so a window without one gets no
+     * head — which is legitimate, just headless.
+     */
+    id?: string;
+};
+export type KChatWindowEmits = {
+    close: [];
+};
+export type KChatWindowSlots = {
+    actions?(): any;
+    /**
+     * The fallback for `head` and `row` — a railed head's circle and a `+N`
+     * popover row. It does NOT appear in an open window's header: the title
+     * already names the conversation there, and the 320px header has the
+     * minimize and close controls competing for it.
+     */
+    avatar?(): any;
+    default?(): any;
+    /** A railed head's circle. Falls back to `avatar` when not given. */
+    head?(): any;
+    /** The popover row's avatar. Falls back to `avatar` when not given. */
+    row?(): any;
+    title?(): any;
+};
+export type KChatDockPanelProps = {
+    /** Header text. */
+    title?: string;
+    /** Search field placeholder. */
+    placeholder?: string;
+};
+/**
+ * `KChatDockPanel` teleports into the dock's row zone, so it is multi-root
+ * like `KChatWindow`: a template `ref` on it resolves `$el` to a fragment
+ * anchor, not the panel element.
+ */
+export type KChatDockPanelSlots = {
+    /** `KChatDockItem`s. */
+    default?(): any;
+    /**
+     * Header controls, between the title and the close button — so close stays
+     * last in the DOM and in the tab order. Rendered only when passed.
+     *
+     * Controls here bind their own handlers. Do not put
+     * `data-kt-chat-dock-item` on anything in this slot: `KChatDock`'s root
+     * click handler routes that attribute as a conversation selection.
+     */
+    actions?(): any;
+    /** Replaces the "No conversations found" text. */
+    empty?(): any;
+};
+export type KChatDockItemProps = {
+    /** Conversation id, the same page-wide id space as `KChatWindow`'s `id`. */
+    id: string;
+    name: string;
+    /** One-line last-message preview, muted and truncated. */
+    preview?: string;
+    unread?: number;
+};
+export type KChatDockItemSlots = {
+    /** Inside the avatar circle. Falls back to initials from `name`. */
+    avatar?(): any;
+    /**
+     * Replaces the avatar circle entirely, for an app that draws its own — a
+     * stack of participant avatars for a group, a presence dot overlaid on the
+     * photo. `avatar` fills the built-in circle; this one stands in for it, so
+     * use it instead of nesting a circle inside `KAvatar`.
+     *
+     * Like `trailing`, this renders inside the row's own `<button>`: keep the
+     * content non-interactive, or the parser closes the button early and breaks
+     * `data-kt-chat-dock-item` click routing for every row after it.
+     */
+    media?(): any;
+    /**
+     * After the body, where the unread badge sits. Falls back to that badge, so
+     * a row that does not use this slot is unchanged. Replacing the badge does
+     * not change the row's accessible name, which still folds in `unread` —
+     * keep the two consistent or pass a matching `unread`.
+     *
+     * This slot renders inside the row's own `<button>` — non-interactive
+     * content only (a badge, a timestamp). A nested `<button>` (e.g. a mute
+     * control) is invalid HTML: the parser repairs it by closing the outer
+     * button early, corrupting the row and breaking
+     * `data-kt-chat-dock-item` click routing for everything after it. For a
+     * real control, render it outside the row instead.
+     */
+    trailing?(): any;
+};

package/dist/types/components/ChatDock/useChatDock.d.ts

@@ -0,0 +1,11 @@
+import type { ChatDockLoaders, ChatDockOptions, ChatDockStore } from './messenger-types';
+/**
+ * Owns everything about a dock's conversations except the DOM: which windows
+ * are open, each one's messages, cursor, loading state, error and draft, and
+ * every call to the app's loaders. `KMessenger` renders it; any component can
+ * hold the same instance through `provideChatDock` / `injectChatDock`.
+ *
+ * Every action is idempotent and safe before the list has loaded. None throws:
+ * a loader rejection becomes `error` / `listError` and an `'error'` event.
+ */
+export declare function useChatDock(loaders: ChatDockLoaders, options?: ChatDockOptions): ChatDockStore;

package/dist/types/components/Checkbox/KCheckbox.vue.d.ts

@@ -0,0 +1,20 @@
+import type { KCheckboxModel, KCheckboxProps, KCheckboxSlots } from './types';
+type __VLS_Props = KCheckboxProps;
+type __VLS_Slots = KCheckboxSlots;
+type __VLS_ModelProps = {
+    modelValue?: KCheckboxModel;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: KCheckboxModel) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: KCheckboxModel) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,23 @@
+/**
+ * `boolean` for a standalone box; an array for a group, where `value` is the
+ * entry added and removed as the box is toggled.
+ *
+ * Core ships no `--error` modifier — the one in its docs helper was removed —
+ * so there is deliberately no `error` prop here.
+ */
+export type KCheckboxModel = boolean | unknown[];
+export type KCheckboxProps = {
+    disabled?: boolean;
+    /**
+     * Partially-selected, for a "select all" parent. This is a DOM property
+     * rather than an attribute, so it is written to the input imperatively.
+     */
+    indeterminate?: boolean;
+    /** Text beside the box. The default slot overrides it; omit both for a bare box. */
+    label?: string;
+    /** The entry this box contributes when the model is an array. */
+    value?: unknown;
+};
+export type KCheckboxSlots = {
+    default?(): any;
+};

package/dist/types/components/Collapse/KCollapse.vue.d.ts

@@ -0,0 +1,32 @@
+import type { KCollapseProps, KCollapseSlots } from './types';
+type __VLS_Props = KCollapseProps;
+type __VLS_Slots = KCollapseSlots;
+type __VLS_ModelProps = {
+    'expanded'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    toggle: () => void;
+    expand: () => boolean;
+    collapse: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expanded: () => any;
+    collapse: () => any;
+    collapsed: () => any;
+    expand: () => any;
+    "update:expanded": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onExpanded?: (() => any) | undefined;
+    onCollapse?: (() => any) | undefined;
+    onCollapsed?: (() => any) | undefined;
+    onExpand?: (() => any) | undefined;
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,32 @@
+export type KCollapseDirection = 'left' | 'right';
+export type KCollapseProps = {
+    /**
+     * Which edge a horizontal collapse clips from. `right` clips from the right;
+     * `left` pins the content to the right edge, which is what a right-hand
+     * sidebar wants.
+     */
+    direction?: KCollapseDirection;
+    /** Collapse along the inline axis rather than the block one. */
+    horizontal?: boolean;
+    /** Element to render as. */
+    tag?: string;
+};
+/** Mirrors core's four `kt.collapse*` events. None carries a payload. */
+export type KCollapseEmits = {
+    collapse: [];
+    collapsed: [];
+    expand: [];
+    expanded: [];
+};
+export type KCollapseSlots = {
+    /** The panel that opens and closes. */
+    default?(): any;
+    /**
+     * Anything here sits outside the collapsing region. A
+     * `data-kt-collapse-toggle` element inside it is driven by core directly.
+     */
+    toggle?(props: {
+        toggle: () => void;
+        expanded: boolean;
+    }): any;
+};

package/dist/types/components/Collapse/useCollapseSync.d.ts

@@ -0,0 +1,31 @@
+import { type Ref, type ShallowRef } from 'vue';
+export type CollapseSyncOptions = {
+    direction?: () => 'left' | 'right';
+    /** The `[data-kt-collapse]` root. */
+    element: Readonly<ShallowRef<HTMLElement | null>>;
+    expanded: Ref<boolean>;
+    horizontal?: () => boolean;
+    onEvent?: (name: 'collapse' | 'collapsed' | 'expand' | 'expanded') => void;
+};
+/**
+ * Two-way binding between a `v-model` and core's Collapse module.
+ *
+ * `data-kt-collapse` stays on the element, so `data-kt-collapse-group` keeps
+ * working: opening one pane closes its siblings inside core's `expand()` rather
+ * than through Vue. Each sibling hears its own `kt.collapse` and updates its own
+ * model, so grouping needs no coordination here.
+ *
+ * The toggle click is bound below rather than left to core's delegated handler,
+ * so a collapse works in an app that never called `Knitify.init()`.
+ *
+ * The guard is `moduleExpanded` — which way the module is actually going —
+ * rather than a flag set around the model write. Vue 3.5 batches reactive
+ * effects, so even a `sync` watcher runs at the end of the enclosing batch,
+ * by which time a flag would already have been cleared and the watcher would
+ * re-enter the module and dispatch a second event.
+ */
+export declare function useCollapseSync({ direction, element, expanded, horizontal, onEvent, }: CollapseSyncOptions): {
+    collapse: () => void;
+    expand: () => void;
+    toggle: () => void;
+};

package/dist/types/components/Drawer/KDrawer.vue.d.ts

@@ -0,0 +1,34 @@
+import type { KDrawerProps, KDrawerSlots } from './types';
+type __VLS_Props = KDrawerProps;
+type __VLS_Slots = KDrawerSlots;
+declare function hide(): void;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    show: () => boolean;
+    hide: typeof hide;
+    toggle: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+} & {
+    shown: () => any;
+    hidden: () => any;
+    hide: () => any;
+    show: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onShown?: (() => any) | undefined;
+    onHidden?: (() => any) | undefined;
+    onHide?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onShow?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,54 @@
+import { ClassValue } from 'vue';
+export type KDrawerEdge = 'left' | 'right';
+/** `md` is core's default and emits no modifier class. */
+export type KDrawerSize = 'sm' | 'md' | 'lg';
+export type KDrawerProps = {
+    bodyClass?: ClassValue;
+    /** Renders the header's dismiss button. */
+    closable?: boolean;
+    /**
+     * Confine the drawer to its nearest positioned ancestor rather than the
+     * viewport. Implies `teleport: false` — moving it to `<body>` would defeat
+     * the containment.
+     */
+    contained?: boolean;
+    /** Which side it slides in from. */
+    edge?: KDrawerEdge;
+    /**
+     * Focus the first focusable element on open. Core rebuilds its own instance
+     * for `data-kt-drawer-toggle` clicks and does not read this off the DOM, so
+     * it only applies when Vue opens the drawer.
+     */
+    focus?: boolean;
+    footerClass?: ClassValue;
+    headerClass?: ClassValue;
+    /** Defaults to a generated id. Point `data-kt-drawer-toggle` at this. */
+    id?: string;
+    /**
+     * Close on Escape. Honoured on both paths — the wrapper intercepts the key
+     * in the capture phase to hold core's own handler off.
+     */
+    keyboard?: boolean;
+    /** Leaves the page behind clickable and drops the scrim. */
+    noBackdrop?: boolean;
+    panelClass?: ClassValue;
+    size?: KDrawerSize;
+    /** Ignore backdrop clicks, leaving an explicit dismiss the only way out. */
+    staticBackdrop?: boolean;
+    /** Defaults to true, except for a `contained` drawer. */
+    teleport?: boolean;
+    title?: string;
+};
+export type KDrawerEmits = {
+    (event: 'hide'): void;
+    (event: 'hidden'): void;
+    (event: 'show'): void;
+    (event: 'shown'): void;
+};
+export type KDrawerSlots = {
+    close?(): any;
+    default?(): any;
+    footer?(): any;
+    header?(): any;
+    title?(): any;
+};