@bfrs/agentic-components 0.2.0 → 0.2.1

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

@@ -51,3 +51,6 @@ export * from './patterns/ChatComposer';
 export * from './patterns/FullPageLoader';
 export * from './patterns/BusinessInfoDisplayCard';
 export * from './patterns/StepProgressCard';
+export * from './patterns/CommandMenu';
+export * from './patterns/WorkspaceHeader';
+export * from './patterns/SideNav';

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

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+export type CommandMenuTone = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
+export type CommandMenuItem = {
+    /** Stable id for the item. */
+    id: string;
+    /** Primary label, e.g. a command name. */
+    label: ReactNode;
+    /** Secondary description line. */
+    description?: ReactNode;
+    /** Leading icon node, rendered inside a tinted square. */
+    icon?: ReactNode;
+    /** Extra text used for filtering (in addition to a string `label`). */
+    keywords?: string;
+    /** Optional trailing status badge. */
+    status?: {
+        label: ReactNode;
+        tone?: CommandMenuTone;
+    };
+    disabled?: boolean;
+};
+export type CommandMenuProps = {
+    /** Items to render. */
+    items: CommandMenuItem[];
+    /** Current filter query. When set and `filter` is not false, items are filtered. */
+    query?: string;
+    /** Optional uppercase title shown above the list. */
+    title?: ReactNode;
+    /** Text shown when no items match. */
+    emptyText?: ReactNode;
+    /** Whether to internally filter `items` by `query`. Defaults to true. */
+    filter?: boolean;
+    /** Called when an item is selected. */
+    onSelect?: (item: CommandMenuItem) => void;
+    className?: string;
+};
+/**
+ * Searchable command / option palette. Renders a floating-style surface with a
+ * list of icon + label + description rows and optional status badges. Filtering
+ * is internal by default; pass `filter={false}` to control the list yourself.
+ *
+ * The component is position-agnostic — wrap it (or pass `className`) to place it
+ * as a popover above an input, in a dropdown, etc.
+ */
+export declare function CommandMenu({ items, query, title, emptyText, filter, onSelect, className }: CommandMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CommandMenu {
+    var displayName: string;
+}

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

@@ -0,0 +1 @@
+export * from './CommandMenu';

package/dist/components/ui/patterns/SideNav/SideNav.d.ts

@@ -0,0 +1,52 @@
+import { CSSProperties, ReactNode } from 'react';
+export type SideNavSubItem = {
+    id: string;
+    label: ReactNode;
+    onSelect?: () => void;
+};
+export type SideNavItem = {
+    id: string;
+    label: ReactNode;
+    /** Leading icon node. */
+    icon?: ReactNode;
+    active?: boolean;
+    /** Trailing badge/slot (hidden when collapsed). */
+    badge?: ReactNode;
+    /** Hover flyout entries. When present, clicking the row does not call `onSelect`. */
+    nested?: SideNavSubItem[];
+    onSelect?: () => void;
+};
+export type SideNavSection = {
+    id?: string;
+    /** Uppercase section title (hidden when collapsed). */
+    title?: ReactNode;
+    items: SideNavItem[];
+    /** Optional action row shown under the items (e.g. "Create new"). Hidden when collapsed. */
+    action?: ReactNode;
+};
+export type SideNavProps = {
+    sections: SideNavSection[];
+    collapsed?: boolean;
+    /** Expanded width in px. Defaults to 240. */
+    width?: number;
+    /** Collapsed width in px. Defaults to 56. */
+    collapsedWidth?: number;
+    /** Top slot, above the scrollable nav (e.g. a primary CTA). */
+    header?: ReactNode;
+    /** Extra content rendered inside the scroll area after the sections (e.g. a recents list). */
+    children?: ReactNode;
+    /** Bottom slot (e.g. user + settings). */
+    footer?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Collapsible application sidebar navigation. Renders grouped sections of items
+ * with active state, optional badges, and hover flyouts for nested items, plus
+ * dedicated `header` and `footer` slots. All data (labels, icons, handlers) is
+ * passed in — the component owns layout, collapse behavior, and chrome only.
+ */
+export declare function SideNav({ sections, collapsed, width, collapsedWidth, header, children, footer, className, style }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNav {
+    var displayName: string;
+}

package/dist/components/ui/patterns/SideNav/index.d.ts

@@ -0,0 +1 @@
+export * from './SideNav';

package/dist/components/ui/patterns/WorkspaceHeader/WorkspaceHeader.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties, ReactNode } from 'react';
+export type WorkspaceHeaderProps = {
+    /** Brand block (logo + product name) rendered at the far left. */
+    brand?: ReactNode;
+    /** Fixed width (px) for the brand rail, e.g. to align with a sidebar. Auto when omitted. */
+    brandWidth?: number;
+    /** When provided, renders a sidebar-toggle button next to the brand. */
+    onToggleSidebar?: () => void;
+    /** Accessible label for the sidebar-toggle button. */
+    toggleLabel?: string;
+    /** Optional tab strip, rendered as its own bordered column after the brand. */
+    tabs?: ReactNode;
+    /** Fixed width (px) for the tabs column, e.g. to align with a secondary pane. Auto when omitted. */
+    tabsWidth?: number;
+    /** Search control, placed at the start of the trailing actions area. */
+    search?: ReactNode;
+    /** Trailing action controls (wallet, apps, avatar, …). */
+    actions?: ReactNode;
+    /** Free-form content placed in the main (flex) region before the spacer. */
+    children?: ReactNode;
+    /** Header height in px. Defaults to 52. */
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Application top bar for workspace-style layouts. Slot-based: drop in a brand
+ * block, an optional sidebar toggle, a tab strip, a search control, and trailing
+ * actions. All product-specific logic (which tabs exist, wallet balance, etc.)
+ * stays in the consuming app — this component only owns layout and chrome.
+ */
+export declare function WorkspaceHeader({ brand, brandWidth, onToggleSidebar, toggleLabel, tabs, tabsWidth, search, actions, children, height, className, style }: WorkspaceHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace WorkspaceHeader {
+    var displayName: string;
+}

package/dist/components/ui/patterns/WorkspaceHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './WorkspaceHeader';

package/dist/custom-elements.d.ts

@@ -422,6 +422,24 @@ export declare class BfrsStepProgressCardSkeletonElement extends ReactCustomElem
     static get observedAttributes(): string[];
     protected renderElement(): unknown;
 }
+export declare class BfrsCommandMenuElement extends ReactCustomElement {
+    static readonly tagName = "command-menu";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsWorkspaceHeaderElement extends ReactCustomElement {
+    static readonly tagName = "workspace-header";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsSideNavElement extends ReactCustomElement {
+    static readonly tagName = "side-nav";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
 export declare function defineBfrsAgenticElements(options?: BfrsCustomElementRegistryOptions): void;
 declare global {
     interface HTMLElementTagNameMap {
@@ -442,6 +460,7 @@ declare global {
         "bfrs-chat-composer": BfrsChatComposerElement;
         "bfrs-checkbox": BfrsCheckboxElement;
         "bfrs-chip": BfrsChipElement;
+        "bfrs-command-menu": BfrsCommandMenuElement;
         "bfrs-confirm-dialog": BfrsConfirmDialogElement;
         "bfrs-container": BfrsContainerElement;
         "bfrs-data-table": BfrsDataTableElement;
@@ -474,6 +493,7 @@ declare global {
         "bfrs-searchable-select": BfrsSearchableSelectElement;
         "bfrs-section-header": BfrsSectionHeaderElement;
         "bfrs-select": BfrsSelectElement;
+        "bfrs-side-nav": BfrsSideNavElement;
         "bfrs-skeleton": BfrsSkeletonElement;
         "bfrs-spinner": BfrsSpinnerElement;
         "bfrs-stack": BfrsStackElement;
@@ -486,6 +506,7 @@ declare global {
         "bfrs-textarea": BfrsTextareaElement;
         "bfrs-toast-manager": BfrsToastManagerElement;
         "bfrs-tooltip": BfrsTooltipElement;
+        "bfrs-workspace-header": BfrsWorkspaceHeaderElement;
     }
 }
 export {};