@skalar-saas/design-system 0.1.67

package/dist/shared/ui/Badge/Badge.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export type BadgeTheme = 'surface' | 'warning' | 'info' | 'success' | 'danger' | 'disabled';
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+export type BadgeVariant = 'outlined' | 'simple' | 'status';
+export type StatusSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type StatusState = 'success' | 'disabled' | 'danger' | 'warning';
+/**
+ * Defines public API for Badge component.
+ */
+export interface BadgeProps {
+    /** The theme color of badge. */
+    theme?: BadgeTheme;
+    /** The size of badge. */
+    size?: BadgeSize;
+    /** The variant style of badge. */
+    variant?: BadgeVariant;
+    /** The content to display inside badge. */
+    children?: React.ReactNode;
+    /** Optional custom CSS classes to apply to the container. */
+    className?: string;
+    /** The state for status variant (success, disabled, danger, warning). */
+    statusState?: StatusState;
+    /** The size for status variant (xs, sm, md, lg, xl). */
+    statusSize?: StatusSize;
+}
+/**
+ * @file A Badge component for displaying status, categories, or labels.
+ * @description This component renders a badge with various themes, sizes, and variants.
+ * It supports outlined, simple, and status-dot styles with customizable colors and sizes.
+ *
+ * @param {'primary' | 'surface' | 'secondary' | 'warning' | 'info' | 'success' | 'danger' | 'pink' | 'purple' | 'sky' | 'cyan' | 'emerald' | 'lime' | 'yellow' | 'disabled'} [theme='primary'] - The color theme of badge.
+ * @param {'xs' | 'sm' | 'md' | 'lg' } [size='sm'] - The size of badge.
+ * @param {'outlined' | 'simple' | 'status-dot' | 'status'} [variant='simple'] - The style variant of badge.
+ * @param {React.ReactNode} [children] - The content to display inside badge (not used for status variant).
+ * @param {string} [className] - Optional CSS classes for additional styling.
+ * @param {'success' | 'disabled' | 'danger' | 'warning'} [statusState='success'] - The state for status variant.
+ * @param {'xs' | 'sm' | 'md' | 'lg' | 'xl'} [statusSize='md'] - The size for status variant.
+ * @returns {JSX.Element} The rendered Badge element.
+ */
+export declare const Badge: ({ theme, size, variant, children, className, statusState, statusSize, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/Badge/index.d.ts

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

package/dist/shared/ui/BreadCrumb/BreadCrumb.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+interface BreadcrumbLinkProps extends React.ComponentProps<"a"> {
+    asChild?: boolean;
+}
+declare function BreadcrumbLink({ asChild, className, ...props }: BreadcrumbLinkProps): import("react/jsx-runtime").JSX.Element | null;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/shared/ui/BreadCrumb/index.d.ts

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

package/dist/shared/ui/Button/Button.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export type ButtonVariant = 'brand' | 'neutral' | 'danger' | 'success' | 'secondary';
+export type ButtonHierarchy = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonIcons = 'both' | 'leading' | 'trailing' | 'none' | 'only';
+/**
+ * Map of available hierarchies for each variant
+ */
+export declare const VARIANT_HIERARCHIES: Record<ButtonVariant, ButtonHierarchy[]>;
+/**
+ * Defines the public API for the Button component, extending standard button attributes.
+ */
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    hierarchy?: ButtonHierarchy;
+    size?: ButtonSize;
+    icons?: ButtonIcons;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    /** Toggle state for buttons that need to show different icons based on state */
+    isToggled?: boolean;
+    /** Icon to show when the button is in toggled state */
+    toggledLeadingIcon?: React.ReactNode;
+    /** Icon to show when trailing icon is in toggled state */
+    toggledTrailingIcon?: React.ReactNode;
+    borderRadius?: string;
+    color?: string;
+}
+/**
+ * A versatile and themeable button component for the application's design system.
+ *
+ * This component generates its appearance by combining a `variant` (color scheme),
+ * a `hierarchy` (visual style like filled or outline), and a `size`. It includes
+ * robust support for leading, trailing, or icon-only configurations. All styles are
+ * derived from a predefined map using Tailwind CSS classes.
+ *
+ * @param {ButtonVariant} [variant='brand'] - The color theme of the button.
+ * @param {ButtonHierarchy} [hierarchy='primary'] - The visual style of the button.
+ * @param {ButtonSize} [size='xs'] - The size of the button, affecting padding, font size, and height.
+ * @param {ButtonIcons} [icons='none'] - Controls the visibility and position of icons.
+ * @param {React.ReactNode} [leadingIcon] - The icon component to display before the text.
+ * @param {React.ReactNode} [trailingIcon] - The icon component to display after the text.
+ * @param {React.ReactNode} [children] - The text or content to display inside the button.
+ * @returns {JSX.Element} The rendered button element.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/shared/ui/Button/index.d.ts

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

package/dist/shared/ui/ButtonDropdown/ButtonDropdown.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+/**
+ * Defines the shape of a single dropdown item.
+ */
+export type DropdownItem = {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+};
+/**
+ * Defines the public API for the ButtonDropdown component.
+ */
+interface ButtonDropdownProps {
+    /** The button label */
+    label: string;
+    /** Leading icon for the button */
+    leadingIcon?: React.ReactNode;
+    /** Trailing icon for the button (defaults to chevron) */
+    trailingIcon?: React.ReactNode;
+    /** Array of dropdown items */
+    items: DropdownItem[];
+    /** Whether the button is active */
+    isActive?: boolean;
+    /** Custom CSS classes for the button */
+    className?: string;
+    /** Custom CSS classes for the dropdown */
+    dropdownClassName?: string;
+    /** Dropdown placement */
+    placement?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    /** Whether to show backdrop */
+    showBackdrop?: boolean;
+}
+/**
+ * @file A reusable button with dropdown component.
+ * @description ButtonDropdown provides a button that opens a dropdown menu with items.
+ * It handles all the state management for open/close and click outside behavior.
+ *
+ * @param {string} label - The button text
+ * @param {React.ReactNode} [leadingIcon] - Optional leading icon
+ * @param {React.ReactNode} [trailingIcon] - Optional trailing icon (defaults to chevron)
+ * @param {DropdownItem[]} items - Array of dropdown items
+ * @param {boolean} [isActive] - Whether the button is in active state
+ * @param {string} [className] - Custom CSS classes for button
+ * @param {string} [dropdownClassName] - Custom CSS classes for dropdown
+ * @param {string} [placement] - Dropdown placement position
+ * @param {boolean} [showBackdrop] - Whether to show backdrop overlay
+ * @returns {JSX.Element} The rendered ButtonDropdown element.
+ */
+export declare const ButtonDropdown: ({ label, leadingIcon, trailingIcon, items, isActive, className, dropdownClassName, placement, showBackdrop }: ButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/ButtonDropdown/index.d.ts

@@ -0,0 +1 @@
+export { ButtonDropdown, type DropdownItem } from './ButtonDropdown';

package/dist/shared/ui/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+/**
+ * Defines the shape for a single option within the ButtonGroup.
+ * Each object represents one button.
+ */
+export interface ButtonGroupOption {
+    value: string | number;
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+/**
+ * Defines the public API for the ButtonGroup component.
+ */
+export interface ButtonGroupProps {
+    /** The array of button configurations to render. */
+    options: ButtonGroupOption[];
+    /** The value of the currently selected button. */
+    value: string | number;
+    /** Callback function that is fired when a button is clicked. Receives the new value. */
+    onChange: (value: string | number) => void;
+    /** The size of the buttons in the group. */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** The style variant for the button group. */
+    variant?: 'neutral' | 'brand' | 'secondary';
+    /** Optional custom classes for the container. */
+    className?: string;
+}
+/**
+ * @file A controlled ButtonGroup component that functions as a segmented control.
+ * @description This component renders a group of buttons from an `options` array and manages
+ * its state through the `value` and `onChange` props, following the controlled component pattern.
+ *
+ * @param {ButtonGroupOption[]} options - The data used to generate the buttons.
+ * @param {string | number} value - The value of the currently active button.
+ * @param {(value: string | number) => void} onChange - The callback fired when a button is clicked.
+ * @param {'xs' | 'sm' | 'md' | 'lg'} [size='md'] - The size variant for the buttons.
+ * @returns {JSX.Element} The rendered ButtonGroup element.
+ */
+export declare const ButtonGroup: ({ options, value, onChange, size, variant, className, }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/ButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export { ButtonGroup, type ButtonGroupOption, type ButtonGroupProps } from './ButtonGroup';

package/dist/shared/ui/Card/Card.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+/**
+ * Defines the public API for the Card component.
+ */
+export interface CardProps {
+    /** The icon to display at the top left. Should be an Iconsax icon component. */
+    icon?: React.ReactNode;
+    /** The title text displayed next to the icon. */
+    title: string;
+    /** The description text displayed below the title and icon. */
+    description: string;
+    /** The text for the link at the bottom of the card. */
+    linkText?: string;
+    /** The href for the link. */
+    linkHref?: string;
+    /** Controlled checked state for the checkbox. */
+    checked?: boolean;
+    /** Callback fired when the checkbox state changes. */
+    onCheckboxChange?: (checked: boolean) => void;
+    /** Callback fired when the link is clicked. */
+    onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** Optional custom CSS classes for the card container. */
+    className?: string;
+    /** If true, the card will be non-interactive. */
+    disabled?: boolean;
+}
+/**
+ * @deprecated This component has been deprecated.
+ *
+ * @file A card component for displaying content with an icon, title, description, checkbox, and link.
+ * @description This component renders a flexible card with a header section containing an icon, title, and checkbox,
+ * a description section, and a footer with a link. The card has a border and rounded corners following the design system.
+ *
+ * @param {React.ReactNode} [icon] - The icon to display (32x32px Iconsax icon).
+ * @param {string} title - The title text.
+ * @param {string} description - The description text.
+ * @param {string} [linkText='Link'] - The link text.
+ * @param {string} [linkHref='#'] - The link href.
+ * @param {boolean} [checked=false] - Checkbox checked state.
+ * @param {(checked: boolean) => void} [onCheckboxChange] - Checkbox change callback.
+ * @param {(e: React.MouseEvent<HTMLAnchorElement>) => void} [onLinkClick] - Link click callback.
+ * @param {string} [className] - Custom container classes.
+ * @param {boolean} [disabled=false] - Disabled state.
+ * @returns {JSX.Element} The rendered Card element.
+ */
+export declare const Card: ({ icon, title, description, linkText, linkHref, checked, onCheckboxChange, onLinkClick, className, disabled, }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps } from './Card';

package/dist/shared/ui/CardAction/CardAction.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { ProductIconType, ProductIconSize, ProductIconVariant } from "../ProductIcon/ProductIcon";
+import { LinkProps } from "../Link/Link";
+export interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: React.ReactNode;
+    label: string;
+    description?: string;
+    actions?: React.ReactNode;
+    iconType?: ProductIconType;
+    iconVariant?: ProductIconVariant;
+    iconSize?: ProductIconSize;
+    linkProps?: Omit<LinkProps, 'children'>;
+    /** Optional badge to display inline with the label */
+    badge?: React.ReactNode;
+    /** Optional content to display below the label/description (e.g., progress bar) */
+    bottomContent?: React.ReactNode;
+    /** Optional content to display inline next to the label (e.g., tag, chip) */
+    labelInlineContent?: React.ReactNode;
+    /** Gap between content sections. Default is 2 (8px). Accepts values 0-8. */
+    contentGap?: number;
+    /** Optional className for the actions section */
+    classNameActions?: string;
+}
+/**
+ * A flexible action card/row component with optional icon, label, description, and actions.
+ * Can be used standalone or within larger containers. All sections except label are optional.
+ */
+export declare const CardAction: ({ className, icon, label, description, actions, iconType, iconVariant, iconSize, linkProps, badge, bottomContent, labelInlineContent, contentGap, classNameActions, ...props }: CardActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/CardAction/index.d.ts

@@ -0,0 +1,2 @@
+export { CardAction } from './CardAction';
+export type { CardActionProps } from './CardAction';

package/dist/shared/ui/ChatCollapsibleCheck/ChatCollapsibleCheck.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+export interface ChecklistItem {
+    /**
+     * Unique identifier for the item
+     */
+    id: string | number;
+    /**
+     * Label text to display next to the checkbox
+     */
+    label: string;
+    /**
+     * Checked state of the item
+     */
+    checked: boolean;
+    /**
+     * Optional: disable specific items
+     */
+    disabled?: boolean;
+}
+export interface ChatCollapsibleCheckProps {
+    /**
+     * Title displayed in the header (default: "Todo:")
+     */
+    title?: React.ReactNode;
+    /**
+     * Array of checklist items
+     */
+    items: ChecklistItem[];
+    /**
+     * Callback when an item's checked state changes
+     */
+    onItemChange?: (itemId: string | number, checked: boolean) => void;
+    /**
+     * Controlled collapsed state
+     */
+    isCollapsed?: boolean;
+    /**
+     * Callback when collapse state changes
+     */
+    onToggle?: (collapsed: boolean) => void;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Default collapsed state (uncontrolled)
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const ChatCollapsibleCheck: React.ForwardRefExoticComponent<ChatCollapsibleCheckProps & React.RefAttributes<HTMLDivElement>>;

package/dist/shared/ui/ChatCollapsibleCheck/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatCollapsibleCheck } from './ChatCollapsibleCheck';
+export type { ChatCollapsibleCheckProps, ChecklistItem } from './ChatCollapsibleCheck';

package/dist/shared/ui/ChatCollapsibleContainer/ChatCollapsibleContainer.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+export interface ChatCollapsibleContainerProps {
+    /**
+     * Title displayed in the header center (can be text or a custom component)
+     */
+    title: React.ReactNode;
+    /**
+     * Custom content to render when expanded
+     */
+    children: React.ReactNode;
+    /**
+     * Controlled collapsed state
+     */
+    isCollapsed?: boolean;
+    /**
+     * Callback when collapse state changes
+     */
+    onToggle?: (collapsed: boolean) => void;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Default collapsed state (uncontrolled)
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Additional CSS classes for the container
+     */
+    className?: string;
+}
+export declare const ChatCollapsibleContainer: React.ForwardRefExoticComponent<ChatCollapsibleContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/shared/ui/ChatCollapsibleContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatCollapsibleContainer } from './ChatCollapsibleContainer';
+export type { ChatCollapsibleContainerProps } from './ChatCollapsibleContainer';

package/dist/shared/ui/ChatCollapsibleDialog/ChatCollapsibleDialog.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { type ButtonProps } from '@/shared/ui/Button/Button';
+export interface ChatCollapsibleDialogAction {
+    label: string;
+    onClick?: () => void;
+    variant?: ButtonProps['variant'];
+    hierarchy?: ButtonProps['hierarchy'];
+}
+export interface ChatCollapsibleDialogProps {
+    /**
+     * Dialog title displayed in the header (can be text or a custom component)
+     */
+    title: React.ReactNode;
+    /**
+     * Content to display in the dialog body
+     */
+    children: React.ReactNode;
+    /**
+     * Actions to display in the footer (max 2 buttons recommended)
+     */
+    actions?: ChatCollapsibleDialogAction[];
+    /**
+     * Controlled collapsed state
+     */
+    isCollapsed?: boolean;
+    /**
+     * Callback when collapse state changes
+     */
+    onToggle?: (collapsed: boolean) => void;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Default collapsed state (uncontrolled)
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const ChatCollapsibleDialog: React.ForwardRefExoticComponent<ChatCollapsibleDialogProps & React.RefAttributes<HTMLDivElement>>;

package/dist/shared/ui/ChatCollapsibleDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatCollapsibleDialog } from './ChatCollapsibleDialog';
+export type { ChatCollapsibleDialogProps, ChatCollapsibleDialogAction } from './ChatCollapsibleDialog';

package/dist/shared/ui/ChatCommandList/ChatCommandList.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+import { ChatCommandListItemSize } from '../ChatCommandListItem/ChatCommandListItem';
+import { TagProps } from '../Tag/Tag';
+export type ChatCommandListSize = ChatCommandListItemSize;
+/**
+ * Represents a single item within a category
+ */
+export interface CategoryItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Title of the item */
+    title: string;
+    /** Optional tag configuration */
+    tag?: {
+        content: string;
+        variant?: TagProps['variant'];
+        size?: TagProps['size'];
+    };
+    /** Optional description text */
+    description?: string;
+}
+/**
+ * Represents a category with its items
+ */
+export interface Category {
+    /** Unique identifier for the category */
+    id: string;
+    /** Leading tag configuration for the category */
+    leadingTag: {
+        content: string;
+        variant?: TagProps['variant'];
+    };
+    /** Title of the category */
+    title: string;
+    /** Items within this category */
+    items: CategoryItem[];
+}
+/**
+ * Defines the public API for the ChatCommandList component
+ */
+export interface ChatCommandListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Array of categories with their items */
+    categories: Category[];
+    /** Size to apply to all child ChatCommandListItems */
+    size?: ChatCommandListSize;
+    /** Callback when a category is selected */
+    onCategorySelect?: (categoryId: string) => void;
+    /** Callback when an item is selected */
+    onItemSelect?: (categoryId: string, itemId: string) => void;
+    /** Callback when the close button is clicked */
+    onClose?: () => void;
+    /** If true, uses absolute positioning for dropdown behavior */
+    floating?: boolean;
+    /** Additional CSS classes for the container */
+    className?: string;
+}
+/**
+ * @file A dropdown menu component for chat slash commands with category navigation
+ * @description This component renders a navigable menu with two views:
+ * - Categories view: Shows all available categories using type-1 ChatCommandListItem
+ * - Items view: Shows items within a selected category using type-2 ChatCommandListItem
+ *
+ * Features:
+ * - Internal state management for navigation
+ * - Dynamic headers based on current view
+ * - Keyboard shortcuts footer
+ * - Category and item selection callbacks
+ *
+ * @param {Category[]} categories - Array of categories with their items (required)
+ * @param {ChatCommandListSize} [size='md'] - Size to apply to all elements
+ * @param {Function} [onCategorySelect] - Callback when a category is selected
+ * @param {Function} [onItemSelect] - Callback when an item is selected
+ * @param {Function} [onClose] - Callback when close button is clicked
+ * @param {boolean} [floating=false] - If true, uses absolute positioning
+ * @param {string} [className] - Additional CSS classes
+ * @returns {JSX.Element} The rendered ChatCommandList element
+ */
+export declare const ChatCommandList: ({ categories, size, onCategorySelect, onItemSelect, onClose, floating, className, ...props }: ChatCommandListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/ChatCommandList/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatCommandList } from './ChatCommandList';
+export type { ChatCommandListProps, ChatCommandListSize, Category, CategoryItem } from './ChatCommandList';

package/dist/shared/ui/ChatCommandListItem/ChatCommandListItem.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { TagProps } from '../Tag/Tag';
+import { ButtonProps } from '../Button/Button';
+export type ChatCommandListItemSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ChatCommandListItemVariant = 'type-1' | 'type-2';
+/**
+ * Props for leading tag (used in type-1)
+ */
+export interface LeadingTagProps {
+    content: string;
+    variant?: TagProps['variant'];
+    size?: TagProps['size'];
+}
+/**
+ * Props for trailing button (used in type-1)
+ */
+export interface TrailingButtonProps {
+    icon: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    variant?: ButtonProps['variant'];
+    hierarchy?: ButtonProps['hierarchy'];
+}
+/**
+ * Props for inline tag (used in type-2)
+ */
+export interface InlineTagProps {
+    content: string;
+    variant?: TagProps['variant'];
+    size?: TagProps['size'];
+}
+/**
+ * Base props shared by both variants
+ */
+interface BaseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+    /** The size of the item (affects height and child component sizes) */
+    size?: ChatCommandListItemSize;
+    /** Main text content */
+    title: string;
+    /** If true, the item will be non-interactive */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Props for type-1: Tag + Text + Button
+ */
+interface Type1Props extends BaseProps {
+    variant: 'type-1';
+    /** Leading tag configuration */
+    leadingTag?: LeadingTagProps;
+    /** Trailing button configuration */
+    trailingButton?: TrailingButtonProps;
+}
+/**
+ * Props for type-2: Text + Tag (inline) + Description
+ */
+interface Type2Props extends BaseProps {
+    variant: 'type-2';
+    /** Inline tag next to title */
+    tag?: InlineTagProps;
+    /** Description text below title */
+    description?: string;
+}
+/**
+ * Union type for all ChatCommandListItem props
+ */
+export type ChatCommandListItemProps = Type1Props | Type2Props;
+/**
+ * @file A specialized component for chat slash command menu items
+ * @description This component supports two distinct layouts:
+ *
+ * **Type 1**: Tag + Text + Button with Icon
+ * - Leading tag on the left
+ * - Title text in the center
+ * - Icon-only button on the right
+ *
+ * **Type 2**: Text + Tag + Description
+ * - First row: Title with inline tag (small gap)
+ * - Second row: Description text
+ *
+ * @param {ChatCommandListItemVariant} variant - The layout variant to use
+ * @param {ChatCommandListItemSize} [size='md'] - The size of the item
+ * @param {string} title - The main title text (required)
+ * @param {boolean} [disabled=false] - If true, the item will be non-interactive
+ * @returns {JSX.Element} The rendered ChatCommandListItem element
+ */
+export declare const ChatCommandListItem: (props: ChatCommandListItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/shared/ui/ChatCommandListItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatCommandListItem } from './ChatCommandListItem';
+export type { ChatCommandListItemProps, ChatCommandListItemSize, ChatCommandListItemVariant, LeadingTagProps, TrailingButtonProps, InlineTagProps } from './ChatCommandListItem';

package/dist/shared/ui/ChatHeader/ChatHeader.d.ts

@@ -0,0 +1,38 @@
+/**
+ * View mode for the chat interface.
+ */
+export type ChatView = 'chat' | 'historial';
+/**
+ * Defines the public API for the ChatHeader component.
+ */
+export interface ChatHeaderProps {
+    /** Optional custom CSS classes for the container. */
+    className?: string;
+    /** Current active view */
+    activeView?: ChatView;
+    /** Callback function fired when the chat button is clicked. */
+    onChatClick?: () => void;
+    /** Callback function fired when the historial button is clicked. */
+    onHistorialClick?: () => void;
+    /** Callback function fired when the settings button is clicked. */
+    onSettingsClick?: () => void;
+    /** Callback function fired when the close button is clicked. */
+    onCloseClick?: () => void;
+    /** The width of the container */
+    containerWidth?: number;
+}
+/**
+ * @file A header component for the main chat interface.
+ * @description This component renders the primary navigation (e.g., "Chat", "Historial")
+ * and action controls (e.g., "Settings", "Close") for the chat panel. It is composed
+ * of pre-styled `Button` components. Only one view can be active at a time.
+ *
+ * @param {string} [className] - Optional CSS classes to apply to the header container.
+ * @param {ChatView} [activeView='chat'] - Current active view (chat or historial).
+ * @param {function} [onChatClick] - Callback for the chat button click event.
+ * @param {function} [onHistorialClick] - Callback for the historial button click event.
+ * @param {function} [onSettingsClick] - Callback for the settings button click event.
+ * @param {function} [onCloseClick] - Callback for the close button click event.
+ * @returns {JSX.Element} The rendered ChatHeader element.
+ */
+export declare const ChatHeader: ({ className, activeView, onChatClick, onHistorialClick, onSettingsClick, onCloseClick, containerWidth, }: ChatHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/ChatHeader/index.d.ts

@@ -0,0 +1 @@
+export { ChatHeader, type ChatHeaderProps, type ChatView } from './ChatHeader';