agentic-ui-kit 0.5.1 → 0.7.0

package/dist/types/react/src/hooks/use-chat.d.ts

@@ -24,6 +24,12 @@ export interface Transport {
     send(request: SendRequest): AsyncIterable<StreamEvent>;
     /** Tells the server to stop the run. The stream is aborted locally either way. */
     stop?(runId: string): Promise<void>;
+    /**
+     * Joins a run that is already going for the conversation (a page opened mid-reply, or a chat just created
+     * whose reply has started) and yields its events from the start of the run: `run.start` first, then the parts
+     * so far and the rest as they come. Used by `useChat({ resume: true })`; the stream ends with the run.
+     */
+    resume?(conversationId: string, signal: AbortSignal): AsyncIterable<StreamEvent>;
 }
 export interface UseChatOptions {
     transport: Transport;
@@ -34,6 +40,13 @@ export interface UseChatOptions {
     agent?: AgentRegistry | null;
     /** Continuations allowed per user message, so a looping model stops. Default 12. */
     maxSteps?: number;
+    /**
+     * Join the run already going for `conversationId` when the hook mounts, through `transport.resume`. The reply
+     * is rebuilt from the replayed events; a trailing assistant message that is still streaming (e.g. an empty
+     * placeholder, or the part seen so far) is replaced. Does nothing without `transport.resume` or a
+     * `conversationId`. Safe in React StrictMode: the run is joined once and survives the double mount.
+     */
+    resume?: boolean;
 }
 export interface SendOptions {
     model?: string;
@@ -65,4 +78,4 @@ export declare function userMessage(text: string, parentId: string | null, attac
  * retries. With an `AgentProvider` it also runs the agent loop: client tools run in the page, approvals
  * wait for the user, then the reply continues; every finished tool call reaches its tool's `onResult`.
  */
-export declare function useChat({ transport, conversationId, initialMessages, onTitle, agent, maxSteps }: UseChatOptions): UseChat;
+export declare function useChat({ transport, conversationId, initialMessages, onTitle, agent, maxSteps, resume }: UseChatOptions): UseChat;

package/dist/types/react/src/index.d.ts

@@ -10,7 +10,7 @@ export type { SegmentedControlProps, SegmentedOption } from "./primitives/segmen
 export { Caret } from "./primitives/caret";
 export { Disclosure } from "./primitives/disclosure";
 export type { DisclosureProps } from "./primitives/disclosure";
-export { Popover, Menu, MenuItem, MenuSearch, MenuSection, MenuSeparator, MenuNote, MenuTrigger, SubmenuTrigger } from "./primitives/menu";
+export { Popover, Menu, MenuItem, MenuSearch, MenuSection, MenuSeparator, MenuNote, MenuTrigger, SubmenuTrigger, DialogTrigger, PopoverTrigger } from "./primitives/menu";
 export type { MenuSearchProps, PopoverProps, MenuProps, MenuItemProps, MenuSectionProps } from "./primitives/menu";
 export { ContextMenu } from "./primitives/context-menu";
 export type { ContextMenuProps } from "./primitives/context-menu";
@@ -38,7 +38,7 @@ export type { SidebarState } from "./hooks/sidebar-state";
 export { UserMessage, AssistantMessage, formatRelativeTime, messageText } from "./components/messages";
 export type { UserMessageProps, AssistantMessageProps, Feedback, MessageActions } from "./components/messages";
 export { Markdown, MarkdownLinksProvider } from "./components/markdown";
-export type { MarkdownProps, RenderLink } from "./components/markdown";
+export type { LinkList, MarkdownProps, RenderLink, RenderLinkList } from "./components/markdown";
 export { ActivityGroup } from "./components/activity-group";
 export type { ActivityGroupProps } from "./components/activity-group";
 export { ToolViewsProvider, useToolView, useToolViews, activityLabel, activityHeading, commandTool, webSearchTool, webFetchTool, memoryTool, defaultToolViews, formatDuration, useChatTool, } from "./components/tools";
@@ -53,12 +53,18 @@ export { TokenCounter, useCountUp, formatTokens } from "./components/token-count
 export type { TokenCounterProps } from "./components/token-counter";
 export { ContextPanel } from "./components/context-panel";
 export type { ContextPanelProps } from "./components/context-panel";
+export { ContextMeter } from "./components/context-meter";
+export type { ContextMeterProps } from "./components/context-meter";
+export { CopyField } from "./components/copy-field";
+export type { CopyFieldProps } from "./components/copy-field";
 export { Composer, AttachButton } from "./components/composer";
+export { DictationButton, DictationControls, VoiceMeter, encodeWav, useDictation } from "./components/dictation";
+export type { Dictation, DictationButtonProps, DictationState, UseDictationOptions, VoiceMeterProps } from "./components/dictation";
 export { EffortSlider, EffortButton } from "./components/effort-slider";
 export type { EffortSliderProps, EffortButtonProps } from "./components/effort-slider";
 export type { ComposerProps, AttachButtonProps } from "./components/composer";
 export { ModelPicker } from "./components/model-picker";
-export type { ModelPickerProps } from "./components/model-picker";
+export type { ModelOption, ModelPickerProps } from "./components/model-picker";
 export { useAttachments, AttachmentCard, AttachmentRow, PastedTextDialog } from "./components/attachments";
 export type { DraftAttachment, UploadResult, UseAttachments, UseAttachmentsOptions, AttachmentCardData, AttachmentCardProps, AttachmentRowProps, PastedTextDialogProps, } from "./components/attachments";
 export { MessageList } from "./components/message-list";
@@ -75,5 +81,5 @@ export { ChatTranscript } from "./views/chat-transcript";
 export type { ChatTranscriptProps } from "./views/chat-transcript";
 export { AppShell, SidebarToggle } from "./views/app-shell";
 export type { AppShellProps, SidebarToggleProps } from "./views/app-shell";
-export { Sidebar, SidebarItem, SidebarUser } from "./views/sidebar";
-export type { SidebarProps, SidebarItemProps, SidebarUserProps } from "./views/sidebar";
+export { Sidebar, SidebarItem, SidebarList, SidebarUser } from "./views/sidebar";
+export type { SidebarProps, SidebarItemProps, SidebarListProps, SidebarUserProps } from "./views/sidebar";

package/dist/types/react/src/primitives/button.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { type ButtonProps as AriaButtonProps } from "react-aria-components";
 declare const variants: {
     /** Plain text button, highlights on hover. Sidebar rows, header buttons. */
@@ -24,9 +24,15 @@ declare const sizes: {
 export interface ButtonProps extends Omit<AriaButtonProps, "className"> {
     variant?: keyof typeof variants;
     size?: keyof typeof sizes;
+    /**
+     * Why the button is disabled. Only used with `isDisabled`: the button then stays focusable (`aria-disabled`,
+     * no press handlers, never submits), shows the reason in a tooltip on hover and focus, and exposes it as its
+     * accessible description.
+     */
+    disabledReason?: ReactNode;
     className?: string;
 }
-export declare function Button({ variant, size, className, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, size, className, disabledReason, ...rest }: ButtonProps): import("react").JSX.Element;
 export interface IconButtonProps extends Omit<AriaButtonProps, "className" | "children"> {
     /** Accessible name, also shown as the tooltip. */
     label: string;
@@ -35,7 +41,9 @@ export interface IconButtonProps extends Omit<AriaButtonProps, "className" | "ch
     size?: "sm" | "md";
     /** Show the label as a tooltip on hover. On by default. */
     tooltip?: boolean;
+    /** Why the button is disabled; see `Button`. Replaces the label tooltip while the button is disabled. */
+    disabledReason?: ReactNode;
     className?: string;
 }
-export declare function IconButton({ label, variant, size, tooltip, className, ...props }: IconButtonProps): import("react").JSX.Element;
+export declare function IconButton({ label, variant, size, tooltip, className, disabledReason, ...rest }: IconButtonProps): import("react").JSX.Element;
 export {};

package/dist/types/react/src/primitives/cx.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+/** `clsx` plus tailwind-merge: later classes win over earlier ones that set the same property, so a caller's `h-7` or `rounded-none` beats the kit's. */
+export declare function cx(...inputs: ClassValue[]): string;

package/dist/types/react/src/primitives/icons.d.ts

@@ -25,6 +25,12 @@ export interface ChatIcons {
     stop: ReactNode;
     /** Open the attach menu in the composer. */
     attach: ReactNode;
+    /** Start dictation in the composer. */
+    mic: ReactNode;
+    /** Cancel dictation. */
+    dictationCancel: ReactNode;
+    /** Accept dictation: put the transcript in the box. */
+    dictationAccept: ReactNode;
     /** Jump to the newest message. */
     scrollToBottom: ReactNode;
     /** Prefix of the token counter. */

package/dist/types/react/src/primitives/labels.d.ts

@@ -25,6 +25,12 @@ export interface ChatLabels {
     ranCommandLabel: string;
     /** Heading phrase for command calls, lowercase: "ran a command", "ran 3 commands". */
     ranCommands: (count: number) => string;
+    /** Approval question for the command tool, present tense. */
+    runCommandAsk: string;
+    /** Approval question for the web search tool. */
+    searchWebAsk: string;
+    /** Approval question for the page fetch tool. */
+    readPageAsk: string;
     /** Row label of the web search tool. */
     searchedWebLabel: string;
     readPageLabel: string;
@@ -61,12 +67,22 @@ export interface ChatLabels {
     expandSidebar: string;
     /** Sidebar toggle, full width. */
     collapseSidebar: string;
+    /** Accessible name of the sidebar's resize handle. */
+    resizeSidebar: string;
+    /** A label with its keyboard shortcut, e.g. "Collapse sidebar (⌘ B)". */
+    withShortcut: (label: string, keys: string) => string;
+    /** The Ctrl key's name in shortcut hints (non-Mac). */
+    ctrlKey: string;
     /** Default title of the context panel. */
     context: string;
     /** Accessible name of the usage meter. */
     contextUsed: string;
     /** "42% used". */
     percentUsed: (percent: number) => string;
+    /** Context meter summary, also its accessible name: "Context: 13.8k / 200k (7%)". */
+    contextSummary: (used: string, limit: string, percent: number) => string;
+    /** Context meter while the numbers are still loading. */
+    contextLoading: string;
     /** Row for the unused part of the window. */
     freeSpace: string;
     /** "1.2k tokens"; `count` is already formatted. */
@@ -81,6 +97,16 @@ export interface ChatLabels {
     stop: string;
     /** Send button. */
     send: string;
+    /** Composer placeholder while dictating. */
+    listening: string;
+    /** Composer placeholder while the last words are transcribed. */
+    transcribing: string;
+    /** The mic button. */
+    dictate: string;
+    /** Dictation's cancel button. */
+    dictationCancel: string;
+    /** Dictation's accept button. */
+    dictationAccept: string;
     /** The `+` button of the composer. */
     addFiles: string;
     /** Accessible name of an attachment list. */
@@ -145,6 +171,8 @@ export interface ChatLabels {
     copy: string;
     /** Copy button right after copying. */
     copied: string;
+    /** Accessible name of a copy field's read-only input. */
+    copyFieldLabel: string;
     /** Retry button. */
     retry: string;
     /** Edit button. */

package/dist/types/react/src/primitives/menu.d.ts

@@ -1,6 +1,12 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { type MenuItemProps as AriaMenuItemProps, type MenuProps as AriaMenuProps, type PopoverProps as AriaPopoverProps, type Key, type Selection } from "react-aria-components";
-export { MenuTrigger, SubmenuTrigger } from "react-aria-components";
+import { DialogTrigger } from "react-aria-components";
+export { MenuTrigger, SubmenuTrigger, DialogTrigger } from "react-aria-components";
+/**
+ * Wraps a trigger button and a kit `Popover` (or `Modal`) so that pressing the button toggles it, without
+ * importing react-aria. The same component as `DialogTrigger`; use whichever name reads better.
+ */
+export declare const PopoverTrigger: typeof DialogTrigger;
 export interface MenuSearchProps {
     placeholder: string;
     /** A `Menu`; its items are filtered by what the user types. */
@@ -13,9 +19,19 @@ export interface MenuSearchProps {
 export declare function MenuSearch({ placeholder, children, value, onChange }: MenuSearchProps): import("react").JSX.Element;
 export interface PopoverProps extends Omit<AriaPopoverProps, "className"> {
     className?: string;
+    /**
+     * Below this viewport width (px, default 768) the popover opens as a bottom sheet over a dimmed page instead
+     * of floating at the trigger; keyboard, focus and dismissing work the same. `false` always floats. Placement
+     * props are ignored in the sheet.
+     */
+    sheet?: number | false;
+    /** "trigger" makes the popover as wide as its trigger (react-aria's `--trigger-width`). Default "auto". */
+    width?: "auto" | "trigger";
+    /** When floating on a phone (`sheet={false}`), stretch to the viewport width. */
+    fullWidthOnPhones?: boolean;
 }
-/** Floating panel for menus and pickers: surface color, rounded, soft shadow, fades in. */
-export declare function Popover({ className, offset, ...props }: PopoverProps): import("react").JSX.Element;
+/** Floating panel for menus and pickers: surface color, rounded, soft shadow, fades in. On phones it's a bottom sheet. */
+export declare function Popover({ className, offset, sheet, width, fullWidthOnPhones, children, ...props }: PopoverProps): import("react").JSX.Element;
 export interface MenuProps<T> extends Omit<AriaMenuProps<T>, "className"> {
     className?: string;
 }
@@ -33,9 +49,11 @@ export interface MenuItemProps extends Omit<AriaMenuItemProps, "className" | "ch
     shortcut?: string;
     /** "danger" colors the item red, for Delete. */
     tone?: "default" | "danger";
+    /** In a selection menu, how the selected state shows: a "check" mark (default) or an on/off "switch" for settings rows. */
+    indicator?: "check" | "switch";
     className?: string;
 }
-export declare function MenuItem({ children, icon, description, descriptionPlacement, detail, shortcut, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuItem({ children, icon, description, descriptionPlacement, detail, shortcut, tone, indicator, className, ...props }: MenuItemProps): import("react").JSX.Element;
 export interface MenuSectionProps {
     children: ReactNode;
     title?: ReactNode;

package/dist/types/react/src/primitives/overlay.d.ts

@@ -7,12 +7,24 @@ interface OverlayProps {
     children: ReactNode;
     className?: string;
 }
+declare const modalSizes: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    /** Fills the page inside the overlay's padding. */
+    full: string;
+};
 export interface ModalProps extends OverlayProps {
     /** Heading at the top, also the dialog's accessible name. */
     title?: ReactNode;
+    /** Width of the dialog: sm 24rem, md 32rem, lg 42rem (default), xl 64rem, full fills the page. */
+    size?: keyof typeof modalSizes;
+    /** "center" (default) vertically centers the dialog; "top" puts it near the top edge, e.g. a command palette. */
+    placement?: "center" | "top";
 }
 /** A centered dialog over a dimmed page. Escape and clicking outside close it; focus stays inside. */
-export declare function Modal({ isOpen, onOpenChange, title, children, className, ...props }: ModalProps): import("react").JSX.Element;
+export declare function Modal({ isOpen, onOpenChange, title, size, placement, children, className, ...props }: ModalProps): import("react").JSX.Element;
 export interface DrawerProps extends OverlayProps {
     side?: "left" | "right";
 }

package/dist/types/react/src/primitives/segmented-control.d.ts

@@ -5,18 +5,43 @@ export interface SegmentedOption<T extends string = string> {
     icon?: ReactNode;
     /** Show only the icon; the label becomes its accessible name and tooltip. */
     iconOnly?: boolean;
+    /** Disable just this option. */
+    isDisabled?: boolean;
 }
-export interface SegmentedControlProps<T extends string = string> {
+declare const sizes: {
+    sm: {
+        button: string;
+        iconOnly: string;
+    };
+    md: {
+        button: string;
+        iconOnly: string;
+    };
+};
+interface SegmentedControlBase<T extends string> {
     /** Accessible name of the group, e.g. "Mode". */
     label: string;
     options: readonly SegmentedOption<T>[];
-    value: T;
-    onChange: (value: T) => void;
+    /** Disable the whole control. */
+    isDisabled?: boolean;
+    /** "sm" (default, 24px tall) or "md" (32px). */
+    size?: keyof typeof sizes;
     className?: string;
 }
+export type SegmentedControlProps<T extends string = string> = SegmentedControlBase<T> & ({
+    /** Pressing the selected option again clears the selection: `value` may be `null` and `onChange` gets `null`. */
+    clearable?: false;
+    value: T;
+    onChange: (value: T) => void;
+} | {
+    clearable: true;
+    value: T | null;
+    onChange: (value: T | null) => void;
+});
 /**
- * One of a few options, side by side on a track, like claude.ai's Chat / Cowork switch. Themed with
+ * One of a few options, side by side on a track, similar to claude.ai's Chat / Cowork switch. Themed with
  * `--chat-segment-track` (default: a shade darker than the surface it sits on) and `--chat-segment-selected`
  * (default `--chat-raised`).
  */
-export declare function SegmentedControl<T extends string>({ label, options, value, onChange, className }: SegmentedControlProps<T>): import("react").JSX.Element;
+export declare function SegmentedControl<T extends string>({ label, options, value, onChange, clearable, isDisabled, size, className }: SegmentedControlProps<T>): import("react").JSX.Element;
+export {};

package/dist/types/react/src/views/app-shell.d.ts

@@ -2,19 +2,47 @@ import { type ReactNode } from "react";
 export interface AppShellProps {
     sidebar: ReactNode;
     children: ReactNode;
-    /** Defaults to collapsed below 1024px. */
+    /** Defaults to collapsed below 1024px. Only the initial value; use `collapsed` to control it. */
     defaultCollapsed?: boolean;
+    /** Controls whether the pinned sidebar is the icon rail. Pair with `onCollapsedChange`. */
+    collapsed?: boolean;
+    /** Called with the new value when the user collapses or expands the pinned sidebar (button or shortcut). */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Where the page scrolls. `"inner"` (default): the shell is exactly the window tall and `main` scrolls inside.
+     * `"window"`: the shell grows with its content, the window scrolls (sticky headers and `position: sticky` in the
+     * page keep working) and the sidebar sticks to the top at window height.
+     */
+    scroll?: "inner" | "window";
+    /**
+     * Lets the user drag the sidebar's right edge (or use the arrow keys on it) to change its width, in px.
+     * Without it the width is `--chat-sidebar-width`.
+     */
+    resizable?: {
+        min: number;
+        max: number;
+    };
+    /** Controls the width in px while `resizable`. Pair with `onWidthChange`. */
+    width?: number;
+    /** Initial width in px while `resizable`, 288 (18rem) otherwise. */
+    defaultWidth?: number;
+    /** Called with the width in px when a drag ends or a key changes it (not on every pointer move). */
+    onWidthChange?: (width: number) => void;
+    /** Keeps the width in localStorage under this key, so it survives reloads. */
+    persistKey?: string;
+    /** Cmd+B (Ctrl+B off Apple platforms) toggles the sidebar. Default true. */
+    shortcut?: boolean;
     className?: string;
 }
 /**
  * A page with a sidebar: pinned and collapsible to an icon rail from tablet width up, a drawer over the
  * content on phones. Children get `useSidebar()` and `<SidebarToggle>`.
  */
-export declare function AppShell({ sidebar, children, defaultCollapsed, className }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ sidebar, children, defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, scroll, resizable, width: widthProp, defaultWidth, onWidthChange, persistKey, shortcut, className, }: AppShellProps): import("react").JSX.Element;
 export interface SidebarToggleProps {
     /** Render only when the sidebar is a drawer, e.g. in the chat header. */
     drawerOnly?: boolean;
     className?: string;
 }
-/** Opens the drawer on phones, collapses / expands the pinned sidebar elsewhere. */
+/** Opens the drawer on phones, collapses / expands the pinned sidebar elsewhere. Its label names the shortcut, e.g. "(⌘ B)". */
 export declare function SidebarToggle({ drawerOnly, className }: SidebarToggleProps): import("react").JSX.Element | null;

package/dist/types/react/src/views/chat-view.d.ts

@@ -35,8 +35,12 @@ export interface ChatViewProps {
     widgets?: WidgetHost;
     /** Usually a `<ChatHeader>`. */
     header?: ReactNode;
-    /** Passed to the composer: toolbar slots, placeholder, controlled text. */
-    composer?: Partial<Omit<ComposerProps, "onSubmit" | "onStop" | "busy">>;
+    /**
+     * Passed to the composer: toolbar slots, placeholder, controlled text. `false` shows no composer (a chat you
+     * can only read or answer through approvals and message actions): `renderComposer` is not called, the empty
+     * state gets `null` in place of the composer and nothing shows if there is none.
+     */
+    composer?: Partial<Omit<ComposerProps, "onSubmit" | "onStop" | "busy">> | false;
     /**
      * Shown instead of the list while there are no messages; gets the centered composer to place, e.g.
      * `(composer) => <EmptyState greeting="Good evening">{composer}</EmptyState>`. Defaults to the composer.

package/dist/types/react/src/views/sidebar.d.ts

@@ -4,8 +4,10 @@ export interface SidebarProps {
     brand?: ReactNode;
     /** A logo mark left of `brand`, sized 1.25rem. It stays at the top of the collapsed rail. */
     brandIcon?: ReactNode;
-    /** Buttons at the top right next to the collapse toggle, e.g. a mode switch. */
+    /** Buttons at the top right next to the collapse toggle, e.g. a mode switch. Hidden when collapsed; see `railActions`. */
     headerActions?: ReactNode;
+    /** Icon-only buttons shown under the toggle on the collapsed rail, e.g. the same actions as `headerActions`. */
+    railActions?: ReactNode;
     /** Fixed items under the header: New chat, Search, Projects… (`SidebarItem`s). */
     nav?: ReactNode;
     /** The scrolling middle, usually `ChatList`. Hidden when collapsed. */
@@ -15,18 +17,42 @@ export interface SidebarProps {
     className?: string;
 }
 /** The claude.ai sidebar frame. Collapses to an icon rail inside `AppShell`; a drawer on phones. */
-export declare function Sidebar({ brand, brandIcon, headerActions, nav, children, footer, className }: SidebarProps): import("react").JSX.Element;
+export declare function Sidebar({ brand, brandIcon, headerActions, railActions, nav, children, footer, className }: SidebarProps): import("react").JSX.Element;
+export interface SidebarListProps {
+    children: ReactNode;
+    className?: string;
+}
+/** The `<ul>` for `SidebarItem`s outside `Sidebar`'s `nav` slot (e.g. inside a section): no bullets, no padding. */
+export declare function SidebarList({ children, className }: SidebarListProps): import("react").JSX.Element;
 export interface SidebarItemProps {
     icon: ReactNode;
     label: string;
     onPress?: () => void;
+    /**
+     * Renders the row as a link. For client-side navigation wrap the app in react-aria's `RouterProvider`;
+     * otherwise a press reloads the page.
+     */
     href?: string;
     active?: boolean;
-    /** Shown on the right, e.g. "⌘K". */
+    /** Shown on the right on hover, e.g. "⌘K". */
     shortcut?: string;
+    /** Always shown on the right, e.g. an unread count. On the collapsed rail it becomes a dot. */
+    badge?: ReactNode;
+    /** A second, smaller line under the label. */
+    description?: ReactNode;
+    /** Row actions (a `…` button, say), shown on hover and focus, outside the link so they can be buttons. Hidden when collapsed. */
+    trailing?: ReactNode;
+    /** Native tooltip on the row. Without it, the label shows as a tooltip only while it is cut off by `…`. */
+    title?: string;
+    className?: string;
+    /** Any `data-*` attribute goes on the row's `<li>`, e.g. `data-testid`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
 }
-/** A nav row: icon and label; just the icon with a tooltip when collapsed. Closes the drawer when picked. */
-export declare function SidebarItem({ icon, label, onPress, href, active, shortcut }: SidebarItemProps): import("react").JSX.Element;
+/**
+ * A nav row: icon and label; just the icon with a tooltip when collapsed. Closes the drawer when picked.
+ * Icons are 1rem, or `--chat-sidebar-icon-size`.
+ */
+export declare function SidebarItem({ icon, label, onPress, href, active, shortcut, badge, description, trailing, title, className: extra, ...rest }: SidebarItemProps): import("react").JSX.Element;
 export interface SidebarUserProps {
     name: string;
     /** Second line, e.g. the plan. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-ui-kit",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "React UI kit for LLM chat and agentic apps: streaming messages, tool calls, approvals, themable with CSS variables.",
   "license": "MIT",
   "type": "module",
@@ -59,7 +59,8 @@
     "react-aria": "3.53.1",
     "react-aria-components": "1.22.1",
     "shiki": "4.6.0",
-    "streamdown": "2.7.1"
+    "streamdown": "2.7.1",
+    "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.4",