@skalar-saas/design-system 0.1.67

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

@@ -0,0 +1,49 @@
+import { ChatHistorialItemProps } from '@/shared/ui/ChatHistorialItem/ChatHistorialItem';
+/**
+ * Represents a single item in the chat history with timestamp
+ */
+export interface ChatHistorialItem extends Omit<ChatHistorialItemProps, 'onClick'> {
+    /**
+     * Timestamp of the chat (Date object or ISO string)
+     */
+    timestamp: Date | string;
+}
+/**
+ * Defines the public API for the ChatHistorial component
+ */
+export interface ChatHistorialProps {
+    /**
+     * Array of chat history items with timestamps
+     */
+    items: ChatHistorialItem[];
+    /**
+     * Callback when an item is clicked
+     */
+    onItemClick?: (item: ChatHistorialItem) => void;
+    /**
+     * Placeholder text for the search bar
+     */
+    searchPlaceholder?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    className?: string;
+    /**
+     * Optional callback for search value changes
+     */
+    onSearchChange?: (value: string) => void;
+}
+/**
+ * @file A chat history component with search and date-based grouping
+ * @description This component displays a searchable list of chat history items
+ * grouped by date ranges (today, last 7 days, last 30 days, last 90 days).
+ * Includes a search bar at the top for filtering items by title.
+ *
+ * @param {ChatHistorialItem[]} items - Array of chat history items
+ * @param {Function} [onItemClick] - Callback when item is clicked
+ * @param {string} [searchPlaceholder] - Search bar placeholder
+ * @param {string} [className] - Custom CSS classes
+ * @param {Function} [onSearchChange] - Callback for search changes
+ * @returns {JSX.Element} The rendered ChatHistorial component
+ */
+export declare const ChatHistorial: ({ items, onItemClick, searchPlaceholder, className, onSearchChange, }: ChatHistorialProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { ChatHistorial } from './ChatHistorial';
+export type { ChatHistorialProps, ChatHistorialItem } from './ChatHistorial';

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

@@ -0,0 +1,33 @@
+import { DropMenuItemProps } from '@/shared/ui/DropMenu/DropMenu';
+/**
+ * Defines the public API for the ChatHistorialItem component.
+ */
+export interface ChatHistorialItemProps {
+    /** Unique identifier for the chat item */
+    id: string;
+    /** Title of the chat */
+    title: string;
+    /** Preview or summary of the chat content */
+    preview: string;
+    /** Callback fired when the item is clicked */
+    onClick?: () => void;
+    /** Menu items for the drop menu */
+    menuItems?: DropMenuItemProps[];
+    /** Optional custom CSS classes for the container */
+    className?: string;
+}
+/**
+ * @file A chat history item component showing a chat title and preview.
+ * @description This component displays a single chat from the history with its
+ * title and preview text. It includes a drop menu for actions like edit,
+ * duplicate, and delete. The component is designed to be used in a list of chats.
+ *
+ * @param {string} id - Unique identifier for the chat
+ * @param {string} title - Title of the chat
+ * @param {string} preview - Preview or summary text
+ * @param {() => void} [onClick] - Handler for item click
+ * @param {DropMenuItemProps[]} [menuItems] - Menu items for the drop menu
+ * @param {string} [className] - Optional CSS classes
+ * @returns {JSX.Element} The rendered ChatHistorialItem component
+ */
+export declare const ChatHistorialItem: ({ id, title, preview, onClick, menuItems, className, }: ChatHistorialItemProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,36 @@
+/**
+ * Defines the public API for the ChatInputText component.
+ */
+export interface ChatInputTextProps {
+    /** The current value of the text input, making it a controlled component. */
+    inputValue?: string;
+    /** Callback function fired when the text input's value changes. */
+    onInputChange?: (value: string) => void;
+    /** Callback function fired when the send button is clicked. */
+    onSendClick?: () => void;
+    /** The placeholder text for the input field. */
+    placeholder?: string;
+    /** Visual variant of the component. 'default' shows all controls, 'minimal' hides the Switcher. */
+    variant?: 'default' | 'minimal';
+    /** Optional custom classes for the main container. */
+    className?: string;
+    containerWidth?: number;
+    /** Minimum number of lines to display when no content is present. @default 2 */
+    minLines?: number;
+    /** Maximum number of lines before scrolling. @default 10 */
+    maxLines?: number;
+}
+/**
+ * @file A composite component for the main chat input area.
+ * @description This component assembles several other UI elements (`InputField`, `Button`, `Switcher`)
+ * to create a rich input experience. It includes a primary text field at the top and a row
+ * of contextual action buttons and controls below. The state for the text input is controlled
+ * from the parent, while the `Switcher` state is managed internally.
+ *
+ * @param {string} [inputValue] - The controlled value for the text input.
+ * @param {(value: string) => void} [onInputChange] - Callback for when the input value changes.
+ * @param {() => void} [onSendClick] - Callback for when the send button is clicked.
+ * @param {string} [placeholder='Input Text'] - Placeholder text for the input field.
+ * @returns {JSX.Element} The rendered ChatInputText element.
+ */
+export declare const ChatInputText: ({ inputValue, onInputChange, onSendClick, placeholder, variant, className, minLines, maxLines, }: ChatInputTextProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { ChatInputText, type ChatInputTextProps } from './ChatInputText';

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import './ChatMessage.css';
+type ChatMessageVariant = 'sent' | 'received';
+/**
+ * Defines the public API for the ChatMessage component.
+ */
+export interface ChatMessageProps {
+    /** The visual variant of the message bubble, determining its style and alignment. */
+    variant: ChatMessageVariant;
+    /** The content of the message. Can be a simple string or complex JSX for formatted text. */
+    children: React.ReactNode;
+    /** Optional custom CSS classes for the container. */
+    className?: string;
+}
+/**
+ * @file A component for displaying a single message bubble in a chat interface.
+ * @description This component renders a message bubble with distinct styles for 'sent' (user's message)
+ * and 'received' (bot or other user's message) variants. It is designed to be placed
+ * within a flex container (`flex-col`) to handle alignment.
+ *
+ * @param {ChatMessageVariant} variant - The variant of the message, either 'sent' or 'received'.
+ * @param {React.ReactNode} children - The message content, which can include formatted text like `<strong>`.
+ * @param {string} [className] - Optional custom CSS classes for the container.
+ * @returns {JSX.Element} The rendered ChatMessage element.
+ */
+export declare const ChatMessage: ({ variant, children, className, }: ChatMessageProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,30 @@
+/**
+ * Defines the public API for the ChatMessageOptions component,
+ * including callbacks for each action button.
+ */
+export interface ChatMessageOptionsProps {
+    /** Callback function fired when the copy button is clicked. */
+    onCopyClick?: () => void;
+    /** Callback function fired when the like button is clicked. */
+    onLikeClick?: () => void;
+    /** Callback function fired when the dislike button is clicked. */
+    onDislikeClick?: () => void;
+    /** Callback function fired when the refresh button is clicked. */
+    onRefreshClick?: () => void;
+    /** Optional custom CSS classes for the container. */
+    className?: string;
+}
+/**
+ * @file A component for displaying a set of interactive options for a chat message.
+ * @description This component renders a standardized row of icon buttons (copy, like, dislike, refresh)
+ * that are typically associated with a message from an AI or bot. It is a composition of the main `Button`
+ * component to ensure visual consistency. Functionality for each button is delegated to a parent
+ * component via `onClick` callback props.
+ *
+ * @param {function} [onCopyClick] - Callback for the copy button.
+ * @param {function} [onLikeClick] - Callback for the like button.
+ * @param {function} [onDislikeClick] - Callback for the dislike button.
+ * @param {function} [onRefreshClick] - Callback for the refresh button.
+ * @returns {JSX.Element} The rendered ChatMessageOptions element.
+ */
+export declare const ChatMessageOptions: ({ className, onCopyClick, onLikeClick, onDislikeClick, onRefreshClick, }: ChatMessageOptionsProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { ChatPanelProps } from './ChatPanel.types';
+/**
+ * ChatPanel - A complete chat panel component with integrated header, content area, and input.
+ * Automatically shows ChatHistorial when activeView is 'historial' and ChatInputText in chat view.
+ *
+ * Features:
+ * - Data-driven approach with messages array from backend
+ * - Markdown rendering support with react-markdown
+ * - Integrated ChatHeader with tabs (Chat/Historial) and action buttons
+ * - Support for message attachments
+ * - Typing indicator
+ * - Responsive design with containerWidth-based layout adjustments
+ *
+ * @example
+ * ```tsx
+ * // Chat view with messages (data-driven approach)
+ * <ChatPanel
+ *   showHeader
+ *   showChatInput
+ *   showTypingIndicator
+ *   activeView="chat"
+ *   containerWidth={478}
+ *   messages={messagesArray}
+ *   chatInputValue={message}
+ *   onChatInputChange={setMessage}
+ *   onChatSendClick={handleSend}
+ *   onChatClick={() => setActiveView('chat')}
+ *   onHistorialClick={() => setActiveView('historial')}
+ * />
+ *
+ * // Historial view
+ * <ChatPanel
+ *   showHeader
+ *   activeView="historial"
+ *   containerWidth={478}
+ *   historialItems={items}
+ *   onHistorialItemClick={(item) => console.log(item)}
+ *   onChatClick={() => setActiveView('chat')}
+ *   onHistorialClick={() => setActiveView('historial')}
+ * />
+ *
+ * // Minimal variant (350px width with icon-only tabs and minimal input)
+ * <ChatPanel
+ *   showHeader
+ *   showChatInput
+ *   activeView="chat"
+ *   containerWidth={350}
+ *   messages={messagesArray}
+ *   chatInputValue={message}
+ *   chatInputVariant="minimal"
+ *   onChatInputChange={setMessage}
+ * />
+ * ```
+ */
+export declare const ChatPanel: React.NamedExoticComponent<ChatPanelProps>;
+export default ChatPanel;

package/dist/shared/ui/ChatPanel/ChatPanel.types.d.ts

@@ -0,0 +1,171 @@
+import { ReactNode } from 'react';
+import type { ChatView } from '@/shared/ui/ChatHeader';
+import type { ChatHistorialItem } from '@/shared/ui/ChatHistorial';
+/**
+ * Attachment data structure
+ */
+export interface ChatAttachmentData {
+    /** File name */
+    fileName: string;
+    /** File size (e.g., '2.4 MB') */
+    fileSize: string;
+    /** Download URL */
+    href?: string;
+}
+/**
+ * Message data structure from backend
+ */
+export interface ChatMessageData {
+    /** Unique identifier for the message */
+    id: string;
+    /** Message variant: 'sent' (user) or 'received' (bot/assistant) */
+    variant: 'sent' | 'received';
+    /** Message content (can include markdown/HTML) */
+    content: string | ReactNode;
+    /** Optional timestamp */
+    timestamp?: Date | string;
+    /** Optional attachment */
+    attachment?: ChatAttachmentData;
+}
+/**
+ * Props for the ChatPanel component
+ */
+export interface ChatPanelProps {
+    /**
+     * Array of messages to render (alternative to children)
+     * When provided, messages will be rendered automatically with proper spacing
+     */
+    messages?: ChatMessageData[];
+    /**
+     * Whether to show typing indicator at the end of messages
+     * @default false
+     */
+    showTypingIndicator?: boolean;
+    /**
+     * Content to be rendered inside the panel (shown in chat view, between header and input)
+     * Use this for custom layouts. If 'messages' prop is provided, children will be ignored.
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS classes to apply to the panel container
+     */
+    className?: string;
+    /**
+     * Which side should have a border
+     * - 'left': Left border
+     * - 'right': Right border
+     * - 'none': No border
+     */
+    borderSide?: 'left' | 'right' | 'none';
+    /**
+     * Border color style from design system
+     * - 'surface-3': Lighter border (default)
+     * - 'surface-4': Darker border
+     */
+    borderStyle?: 'surface-3' | 'surface-4';
+    /**
+     * Whether to show the header with tabs and action buttons
+     * @default false
+     */
+    showHeader?: boolean;
+    /**
+     * Height of the header in pixels
+     * @default 56
+     */
+    headerHeight?: number;
+    /**
+     * Current active view in the header tabs
+     * @default 'chat'
+     */
+    activeView?: ChatView;
+    /**
+     * Callback fired when the chat tab is clicked
+     */
+    onChatClick?: () => void;
+    /**
+     * Callback fired when the historial tab is clicked
+     */
+    onHistorialClick?: () => void;
+    /**
+     * Callback fired when the settings button is clicked
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Callback fired when the close button is clicked
+     */
+    onCloseClick?: () => void;
+    /**
+     * Width of the container to adjust header layout
+     * @default 0
+     */
+    containerWidth?: number;
+    /**
+     * Array of chat history items (shown when activeView is 'historial')
+     */
+    historialItems?: ChatHistorialItem[];
+    /**
+     * Callback when a historial item is clicked
+     */
+    onHistorialItemClick?: (item: ChatHistorialItem) => void;
+    /**
+     * Placeholder text for the historial search bar
+     */
+    historialSearchPlaceholder?: string;
+    /**
+     * Callback for historial search value changes
+     */
+    onHistorialSearchChange?: (value: string) => void;
+    /**
+     * Whether to show the chat input at the bottom (shown in chat view)
+     * @default true
+     */
+    showChatInput?: boolean;
+    /**
+     * Current value of the chat input field
+     */
+    chatInputValue?: string;
+    /**
+     * Callback when the chat input value changes
+     */
+    onChatInputChange?: (value: string) => void;
+    /**
+     * Callback when the send button is clicked
+     */
+    onChatSendClick?: () => void;
+    /**
+     * Placeholder text for the chat input
+     * @default 'Input Text'
+     */
+    chatInputPlaceholder?: string;
+    /**
+     * Variant of the chat input
+     * @default 'default'
+     */
+    chatInputVariant?: 'default' | 'minimal';
+    /**
+     * Callback when copy button is clicked on a received message
+     */
+    onMessageCopyClick?: (messageId: string) => void;
+    /**
+     * Callback when like button is clicked on a received message
+     */
+    onMessageLikeClick?: (messageId: string) => void;
+    /**
+     * Callback when dislike button is clicked on a received message
+     */
+    onMessageDislikeClick?: (messageId: string) => void;
+    /**
+     * Callback when refresh button is clicked on a received message
+     */
+    onMessageRefreshClick?: (messageId: string) => void;
+    /**
+     * Minimum number of lines for chat input textarea when empty
+     * @default 2
+     */
+    chatInputMinLines?: number;
+    /**
+     * Maximum number of lines for chat input textarea before scrolling
+     * @default 10
+     */
+    chatInputMaxLines?: number;
+}

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

@@ -0,0 +1,2 @@
+export { ChatPanel } from './ChatPanel';
+export type { ChatPanelProps, ChatMessageData, ChatAttachmentData } from './ChatPanel.types';

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

@@ -0,0 +1,17 @@
+/**
+ * Defines the public API for the ChatTypingIndicator component.
+ */
+export interface ChatTypingIndicatorProps {
+    /** Optional custom CSS classes for the container. */
+    className?: string;
+}
+/**
+ * @file A typing indicator component for chat interfaces.
+ * @description This component displays an animated ellipsis (three dots) to indicate
+ * that the assistant is currently typing or processing a response. The dots animate
+ * sequentially to create a "breathing" effect.
+ *
+ * @param {string} [className] - Optional CSS classes for the container.
+ * @returns {JSX.Element} The rendered ChatTypingIndicator element.
+ */
+export declare const ChatTypingIndicator: ({ className }: ChatTypingIndicatorProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { ChatTypingIndicator, type ChatTypingIndicatorProps } from './ChatTypingIndicator';

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

@@ -0,0 +1,26 @@
+import React from 'react';
+type CheckboxSize = 'small' | 'medium' | 'large';
+/**
+ * Defines the public API for the Checkbox component, omitting the native 'size'
+ * attribute to avoid conflicts with the custom size prop.
+ */
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** The size of the checkbox. */
+    size?: CheckboxSize;
+    /** If true, the checkbox will be in an indeterminate state. This overrides the `checked` state visually. */
+    indeterminate?: boolean;
+}
+/**
+ * @file An accessible, themeable checkbox component.
+ * @description This component renders a custom-styled checkbox that wraps a native,
+ * visually hidden `<input type="checkbox">` for accessibility. It supports `checked`,
+ * `unchecked`, and `indeterminate` states.
+ *
+ * @param {CheckboxSize} [size='medium'] - The size of the checkbox.
+ * @param {boolean} [checked=false] - The controlled checked state of the component.
+ * @param {boolean} [indeterminate=false] - If true, displays the checkbox in an indeterminate state.
+ * @param {boolean} [disabled=false] - If true, the component will be non-interactive.
+ * @returns {JSX.Element} The rendered Checkbox element.
+ */
+export declare const Checkbox: ({ size, checked, indeterminate, disabled, className, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from './Checkbox';

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

@@ -0,0 +1,35 @@
+import React from 'react';
+export type ChipSize = 'sm' | 'md';
+export type ChipType = 'unselected' | 'selected';
+export type ChipState = 'focus' | 'drag' | 'disabled' | 'hover' | 'default';
+/**
+ * Defines public API for Chip component.
+ */
+export interface ChipProps {
+    /** The size of chip. */
+    size?: ChipSize;
+    /** The selection state of chip. */
+    type?: ChipType;
+    /** The interactive state of chip. */
+    state?: ChipState;
+    /** The content to display inside chip (the main label). */
+    children?: React.ReactNode;
+    /** Optional content/icon/avatar to display on left side of chip. */
+    leftContent?: React.ReactNode;
+    /** Optional content/icon/action to display on right side of chip (e.g., a close button). */
+    rightContent?: React.ReactNode;
+    /** Handler for click event on chip (making it interactive). */
+    onClick?: () => void;
+    /** Optional custom CSS classes to apply to the container. */
+    className?: string;
+    /** Whether to show left content. */
+    showLeftContent?: boolean;
+    /** Whether to show right content. */
+    showRightContent?: boolean;
+    /** Whether to show text content. */
+    showText?: boolean;
+}
+/**
+ * @file A Chip component for interactive selection, filtering, or representing an input.
+ */
+export declare const Chip: ({ size, type, state, children, leftContent, rightContent, onClick, className, showLeftContent, showRightContent, showText, }: ChipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { Chip, type ChipProps, type ChipSize, type ChipType, type ChipState } from './Chip';

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

@@ -0,0 +1,9 @@
+interface ColorItem {
+    name: string;
+    value: string;
+}
+interface ColorPaletteProps {
+    colors?: ColorItem[];
+}
+export declare const ColorPalette: ({ colors: colorsProp }: ColorPaletteProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ColumnHandlerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the column handler is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * ColumnHandler component for dragging and reordering columns
+ *
+ * A vertical drag handle with three dots indicating draggable functionality
+ */
+export declare const ColumnHandler: ({ disabled, className, ...props }: ColumnHandlerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/ColumnHandler/PanelHandle.d.ts

@@ -0,0 +1,32 @@
+export interface PanelHandleProps {
+    /**
+     * Total height of the border with handle
+     * @default 200
+     */
+    height?: number;
+    /**
+     * Whether the handle is on the left or right side of the panel
+     * For left panels, handle protrudes to the right
+     * For right panels, handle protrudes to the left
+     * @default 'right'
+     */
+    side?: 'left' | 'right';
+    /**
+     * Fill color for the handle (should match panel background)
+     * Accepts CSS color value or CSS variable
+     * @default 'var(--surface-1)'
+     */
+    fillColor?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * PanelHandle - A panel border with integrated resize handle
+ *
+ * Creates a vertical border line with a small pill-shaped protrusion
+ * in the center where the drag indicator (3 dots) sits.
+ * The border and handle are ONE seamless piece.
+ */
+export declare const PanelHandle: ({ height, side, fillColor, className, }: PanelHandleProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { ColumnHandler } from './ColumnHandler';
+export type { ColumnHandlerProps } from './ColumnHandler';
+export { PanelHandle } from './PanelHandle';
+export type { PanelHandleProps } from './PanelHandle';

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

@@ -0,0 +1,69 @@
+import React from 'react';
+type ComboBoxLayout = 'text_icon' | 'text_image' | 'only_icon' | 'text_icon_text';
+type ComboBoxHierarchy = 'fill' | 'outlined';
+type ComboBoxVariant = 'default' | 'danger' | 'success';
+/**
+ * Defines the shape for a single selectable option in the ComboBox.
+ */
+export interface ComboBoxOption {
+    id: string | number;
+    label: string;
+    avatarUrl?: string;
+    [key: string]: unknown;
+}
+/**
+ * Defines the public API for the ComboBox component.
+ */
+export interface ComboBoxProps {
+    layout?: ComboBoxLayout;
+    hierarchy?: ComboBoxHierarchy;
+    variant?: ComboBoxVariant;
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    hint?: string;
+    disabled?: boolean;
+    leadingIcon?: React.ReactNode;
+    leadingAvatar?: string;
+    trailingAddon?: React.ReactNode;
+    options: ComboBoxOption[];
+    value: ComboBoxOption | null;
+    onChange: (value: ComboBoxOption | null) => void;
+    placeholder?: string;
+    className?: string;
+    name?: string;
+    id?: string;
+    /** Custom color for placeholder text (e.g., 'placeholder-gray-400'). Overrides variant defaults. */
+    placeholderColor?: string;
+    /** Custom color for input text (e.g., 'text-dark-300'). Overrides variant defaults. */
+    inputTextColor?: string;
+    /** Custom background color for the input wrapper (e.g., 'bg-gray-100'). Overrides variant defaults. */
+    backgroundColor?: string;
+    /** Custom color for the chevron/dropdown icon (e.g., '#64748B' or 'currentColor'). */
+    chevronColor?: string;
+    /** Custom background color for active/hovered option (e.g., 'bg-primary-500'). Defaults to 'bg-primary-500'. */
+    optionActiveColor?: string;
+    /** Custom text color for active/hovered option (e.g., 'text-white'). Defaults to 'text-white'. */
+    optionActiveTextColor?: string;
+    /** Custom text color for inactive options (e.g., 'text-gray-900'). Defaults to 'text-gray-900'. */
+    optionTextColor?: string;
+    /** Custom border radius for the input wrapper (e.g., 'rounded-md', 'rounded-xl', 'rounded-full'). Defaults to 'rounded-lg'. */
+    borderRadius?: string;
+}
+/**
+ * @file An accessible and highly configurable ComboBox component.
+ * @description This component provides a text input with an associated dropdown menu,
+ * allowing users to either type a value or select one from a filtered list. It is built
+ * on top of Headless UI for robust accessibility and state management. The visual
+ * presentation is determined by a combination of `layout`, `hierarchy`, `variant`, and `size` props.
+ *
+ * @param {ComboBoxLayout} [layout='text_icon'] - Defines the visual structure (e.g., with icon, avatar, or text addon).
+ * @param {ComboBoxHierarchy} [hierarchy='fill'] - The main visual style (filled background or outlined).
+ * @param {ComboBoxVariant} [variant='default'] - The color theme for different states (default, danger, success).
+ * @param {ComboBoxSize} [size='md'] - The dimensions of the component.
+ * @param {ComboBoxOption[]} options - The array of selectable options.
+ * @param {ComboBoxOption | null} value - The currently selected option object.
+ * @param {(value: ComboBoxOption | null) => void} onChange - Callback fired when an option is selected.
+ * @returns {JSX.Element} The rendered ComboBox element.
+ */
+export declare const ComboBox: ({ layout, hierarchy, variant, size, label, hint, disabled, leadingIcon, leadingAvatar, trailingAddon, options, value, onChange, placeholder, className, placeholderColor, inputTextColor, backgroundColor, chevronColor, optionActiveColor, optionActiveTextColor, optionTextColor, borderRadius, }: ComboBoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { ComboBox, type ComboBoxOption, type ComboBoxProps } from './ComboBox';