@sakaniui/react 0.11.2 → 0.13.0

package/dist/components/CommandMenu/CommandMenu.d.ts

@@ -0,0 +1,175 @@
+import { default as React } from 'react';
+import { IconComponent } from '../../icons/types';
+export type CommandMenuItemType = 'page' | 'action' | 'file' | 'person' | 'ai';
+export interface CommandMenuItem {
+    /** Unique within the menu. */
+    id: string;
+    label: string;
+    /** A second line under the label (a path, a role, a hint). */
+    description?: string;
+    /** What kind of result it is. Sets the default icon and the scope it belongs to ("pages", "people", "files", "actions"). */
+    type?: CommandMenuItemType;
+    /** Overrides the scope this item belongs to (the `value` of a scope). */
+    scope?: string;
+    /** The icon in the leading tile. Defaults by `type`. */
+    icon?: IconComponent;
+    /** For a person: shows an Avatar (and a status dot) instead of an icon. */
+    avatar?: {
+        src?: string;
+        initials?: string;
+        alt?: string;
+        status?: 'online' | 'away';
+    };
+    /** Small text on the right, e.g. "Page" or "Edited 2h ago". */
+    meta?: string;
+    /** Shortcut keys on the right, e.g. ['⌘', 'N']. */
+    shortcut?: string[];
+    /** Extra words the built-in filter matches. */
+    keywords?: string[];
+    /** Matched by filter tokens: a token whose `value` (or label) is in `tags` keeps the item. */
+    tags?: string[];
+    /** Called when the item is chosen, in addition to the menu's `onSelect`. */
+    onSelect?: () => void;
+    disabled?: boolean;
+}
+export interface CommandMenuGroup {
+    id: string;
+    /** The small heading above the items. */
+    label?: string;
+    /** A link on the right of the heading, e.g. "See all". */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    items: CommandMenuItem[];
+}
+export interface CommandMenuScope {
+    /** "all" is the unfiltered scope. */
+    value: string;
+    label: string;
+    /** The count shown on the tab. Computed from the items when you leave it out (and `filter` is on); `null` shows no count. */
+    count?: number | null;
+}
+export interface CommandMenuFilter {
+    id: string;
+    /** Shown in the token, e.g. "People" or "team: Design". */
+    label: string;
+    /** What `tags` are matched against. Defaults to the label. */
+    value?: string;
+    icon?: IconComponent;
+}
+export interface CommandMenuSuggestion {
+    label: string;
+    icon?: IconComponent;
+    /** Where the icon sits: before the label (default) or after it (e.g. the × on "Remove the Files filter"). */
+    iconPosition?: 'start' | 'end';
+    /** A word inside `label` to set in the strong weight ("invoice" in "Did you mean invoice?"). */
+    emphasis?: string;
+    onSelect: () => void;
+}
+export interface CommandMenuProps {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The key that opens it with ⌘ / Ctrl. `false` turns the shortcut off. Defaults to "k". */
+    hotkey?: string | false;
+    /** "default" has scopes and a workspace footer; "simple" is just the field, the rows and the key hints. */
+    variant?: 'default' | 'simple';
+    /** The field's text (controlled). */
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    placeholder?: string;
+    /** Results, in groups. */
+    groups: CommandMenuGroup[];
+    /** Filter the groups by the query, scope and tokens here. Pass a function to match your own way, or `false` to show `groups` as given. Defaults to true. */
+    filter?: boolean | ((item: CommandMenuItem, query: string) => boolean);
+    /** Wrap the matched letters of each label in the strong weight. Defaults to true. */
+    highlightMatches?: boolean;
+    /** "loading" shows skeleton rows, "error" the error message. */
+    state?: 'ready' | 'loading' | 'error';
+    /** Called when an item is chosen (click or ↵). */
+    onSelect?: (item: CommandMenuItem) => void;
+    /** Close the menu when an item is chosen. Defaults to true. */
+    closeOnSelect?: boolean;
+    /** Scope tabs under the field (not shown in the simple variant). */
+    scopes?: CommandMenuScope[];
+    scope?: string;
+    defaultScope?: string;
+    onScopeChange?: (scope: string) => void;
+    /** Filter tokens shown in the field. */
+    filters?: CommandMenuFilter[];
+    onFiltersChange?: (filters: CommandMenuFilter[]) => void;
+    /** Typing `key:value` and a space turns it into a token for these keys, e.g. ["team", "status"]. */
+    filterKeys?: string[];
+    /** Adds ⌘↵ and the "Ask AI" hint; called with the current query. */
+    onAskAI?: (query: string) => void;
+    /** Shown above the results (an answer card, a Chain of Thought). */
+    answer?: React.ReactNode;
+    /** Shows a preview pane beside the list for the active item. Return null for no pane. */
+    renderPreview?: (item: CommandMenuItem) => React.ReactNode;
+    /** Buttons or links pinned to the bottom of the detail pane. They stay put while the content above changes from row to row
+     *  (only `renderPreview`'s content cross-fades); pass a function to read the previewed row. Hidden when a row has no preview. */
+    previewActions?: React.ReactNode | ((item: CommandMenuItem) => React.ReactNode);
+    /** Shown in the detail pane when the active row has nothing to preview (`renderPreview` returned nothing). */
+    previewEmpty?: React.ReactNode;
+    /** The "No results" message. */
+    emptyTitle?: React.ReactNode;
+    emptyDescription?: React.ReactNode;
+    /** Quick fixes under the empty message, e.g. "Did you mean invoice?". */
+    suggestions?: CommandMenuSuggestion[];
+    /** Shown under the empty or error message, and navigable like any group (e.g. "Try instead"). */
+    fallbackGroups?: CommandMenuGroup[];
+    errorTitle?: React.ReactNode;
+    errorDescription?: React.ReactNode;
+    onRetry?: () => void;
+    /** A second, quieter action beside "Try again" in the error state ("Report"). */
+    onReport?: () => void;
+    retryLabel?: React.ReactNode;
+    reportLabel?: React.ReactNode;
+    /** The workspace switcher in the footer (default variant). */
+    workspace?: React.ReactNode;
+    /** Hide the footer of key hints. */
+    hideFooter?: boolean;
+    /** Accessible name of the dialog. Defaults to "Command menu". */
+    'aria-label'?: string;
+    className?: string;
+}
+export interface CommandMenuTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** The text in the pill. Defaults to "Search or jump to…". */
+    placeholder?: string;
+    /** The key caps on the right. Defaults to ["⌘", "K"]. */
+    shortcut?: string[];
+}
+/** The ⌘K pill for a top bar or sidebar. Give it `onClick` to open your CommandMenu. */
+export declare const CommandMenuTrigger: React.ForwardRefExoticComponent<CommandMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface CommandMenuAnswerProps {
+    /** Defaults to "SakaniUI AI". */
+    title?: string;
+    /** e.g. "Thought for 2.4s". With `stream` it appears once the text has been written. */
+    status?: string;
+    /** The answer text. */
+    children: React.ReactNode;
+    /** Writes the answer in word by word, the way a chat reply arrives, and brings in the sources and the follow-up once it is
+     *  written. Needs `children` to be a plain string; reduced motion shows it at once. */
+    stream?: boolean;
+    /** Called once when the text has been written (or at once when it is not streamed). */
+    onStreamEnd?: () => void;
+    /** Sources as chips under the answer. */
+    sources?: {
+        label: string;
+        icon?: IconComponent;
+    }[];
+    /** Adds an "Ask a follow-up" button. */
+    onFollowUp?: () => void;
+    /** Adds an "Open in chat" hint with ⌘↵. */
+    onOpenInChat?: () => void;
+    onCopy?: () => void;
+    className?: string;
+}
+/** An answer card for the Ask AI state: the answer, its sources and a follow-up. Pass it as the menu's `answer`. */
+export declare const CommandMenuAnswer: React.FC<CommandMenuAnswerProps>;
+export declare const CommandMenu: React.FC<CommandMenuProps>;
+export default CommandMenu;

package/dist/components/CommandMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { CommandMenu, CommandMenuTrigger, CommandMenuAnswer, default } from './CommandMenu';
+export type { CommandMenuProps, CommandMenuItem, CommandMenuItemType, CommandMenuGroup, CommandMenuScope, CommandMenuFilter, CommandMenuSuggestion, CommandMenuTriggerProps, CommandMenuAnswerProps, } from './CommandMenu';