@anyemp/ui-kit 1.3.1

package/dist/index.d.ts

@@ -0,0 +1,2435 @@
+import { CSSProperties } from 'react';
+import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { RefObject } from 'react';
+
+export declare const Accordion: default_2.FC<AccordionProps>;
+
+export declare const AccordionContent: default_2.FC<AccordionContentProps>;
+
+export declare interface AccordionContentProps {
+    children: default_2.ReactNode;
+    /** Extra CSS classes on the inner content div */
+    sx?: string;
+    /** Inline styles on the inner content div */
+    style?: default_2.CSSProperties;
+}
+
+export declare const AccordionItem: default_2.FC<AccordionItemProps>;
+
+export declare interface AccordionItemData {
+    id: string;
+    /** Header — string or any React node */
+    title: default_2.ReactNode;
+    /** Body content */
+    content: default_2.ReactNode;
+    /** Optional leading icon (convenience — put it inside title for more control) */
+    icon?: default_2.ReactNode;
+    isDisabled?: boolean;
+}
+
+export declare interface AccordionItemProps {
+    /** Unique identifier — used for open state tracking and ARIA */
+    id: string;
+    children: default_2.ReactNode;
+    /** Prevents expanding/collapsing */
+    isDisabled?: boolean;
+    /** Extra CSS classes on the item wrapper */
+    sx?: string;
+    /** Inline styles on the item wrapper */
+    style?: default_2.CSSProperties;
+}
+
+export declare interface AccordionProps extends Omit<AccordionRootProps, 'children'> {
+    items: AccordionItemData[];
+}
+
+export declare const AccordionRoot: default_2.FC<AccordionRootProps>;
+
+export declare interface AccordionRootProps {
+    children: default_2.ReactNode;
+    /** Visual style variant */
+    variant?: 'filled' | 'outlined' | 'ghost';
+    /** Scale of the component */
+    size?: 'small' | 'medium' | 'large';
+    /** Allow multiple panels open at the same time */
+    allowMultiple?: boolean;
+    /** IDs of panels open on initial render */
+    defaultOpenIds?: string[];
+    /** Called when a panel is toggled */
+    onToggle?: (id: string, isOpen: boolean) => void;
+    /** Show a divider line between trigger and content (default true) */
+    divider?: boolean;
+    /** Extra CSS classes on the root element */
+    sx?: string;
+    /** Inline styles on the root element */
+    style?: default_2.CSSProperties;
+}
+
+export declare const AccordionTrigger: default_2.FC<AccordionTriggerProps>;
+
+export declare interface AccordionTriggerProps {
+    children: default_2.ReactNode;
+    /** Show rotating chevron icon at the end (default true) */
+    showChevron?: boolean;
+    /**
+     * Custom node rendered before the toggle button, outside of it.
+     * Use this when the leading slot must contain interactive elements (e.g. a checkbox),
+     * since nesting `<button>` inside the trigger button is invalid HTML.
+     */
+    startAdornment?: default_2.ReactNode;
+    /**
+     * Custom node rendered after the toggle button, outside of it.
+     * Use this for trailing actions (edit, delete, menu, etc.) — interactive elements
+     * here are siblings of the toggle button, not children, which keeps HTML valid.
+     */
+    endAdornment?: default_2.ReactNode;
+    /** Extra CSS classes on the button */
+    sx?: string;
+    /** Inline styles on the button */
+    style?: default_2.CSSProperties;
+}
+
+export declare const Autocomplete: default_2.FC<AutocompleteProps>;
+
+declare type AutocompleteChipProps = Pick<ChipProps, 'variant' | 'color' | 'size' | 'leadingIcon' | 'sx'>;
+
+export declare interface AutocompleteProps {
+    options: SelectOption[] | SelectOptionGroup[];
+    value?: string | string[] | null;
+    defaultValue?: string | string[];
+    multiple?: boolean;
+    onChange?: (value: string | string[] | null) => void;
+    onSearchChange?: (query: string) => void;
+    filterOptions?: (options: SelectOption[], query: string) => SelectOption[];
+    label?: string;
+    placeholder?: string;
+    noOptionsText?: string;
+    size?: 'small' | 'normal' | 'large';
+    error?: boolean;
+    helperText?: string;
+    fullWidth?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    /** Props forwarded to each <Chip> in multi-select mode */
+    chipProps?: AutocompleteChipProps;
+    id?: string;
+    sx?: Partial<Record<'root' | 'trigger' | 'listbox' | 'option' | 'label' | 'helperText', string>>;
+}
+
+export declare const Avatar: default_2.FC<AvatarProps>;
+
+export declare const AvatarGroup: default_2.FC<AvatarGroupProps>;
+
+export declare interface AvatarGroupProps {
+    /** Avatar children. Non-Avatar nodes are still rendered as-is (but won't get size/colour propagation). */
+    children?: default_2.ReactNode;
+    /**
+     * Max avatars to show before collapsing the rest into a surplus indicator.
+     * When children exceed this, only `max - 1` avatars are rendered and the
+     * remainder appears as a single `+N` avatar. Default: `5`.
+     */
+    max?: number;
+    /**
+     * Total count of avatars the group represents — useful when you only render
+     * a few children but know how many exist in total (e.g. only the first 3
+     * users are loaded, but 50 are in the team). When omitted, the count is
+     * inferred from `children.length`.
+     */
+    total?: number;
+    /**
+     * Horizontal overlap between adjacent avatars. Either a preset
+     * (`'small'` = -4px, `'medium'` = -8px, default) or an exact pixel number.
+     */
+    spacing?: 'small' | 'medium' | number;
+    /** Default size applied to children that don't set their own. */
+    size?: AvatarProps['size'];
+    /** Default shape applied to children that don't set their own. */
+    shape?: AvatarProps['shape'];
+    /** Background colour for the `+N` surplus indicator. */
+    surplusColor?: AvatarProps['color'];
+    /** Custom render for the surplus indicator. Receives the overflow count. */
+    renderSurplus?: (surplus: number) => default_2.ReactNode;
+    /** Extra utility classes on the root */
+    sx?: string;
+    /** Inline styles on the root */
+    style?: default_2.CSSProperties;
+}
+
+export declare interface AvatarProps {
+    /** Person/entity name — used for initials when no image is provided */
+    name?: string;
+    /** Image URL — if provided and loadable, replaces the initials/fallback */
+    src?: string;
+    /** Alt text for the image. Falls back to `name`. */
+    alt?: string;
+    /** Avatar size */
+    size?: 'small' | 'medium' | 'large';
+    /** Shape variant */
+    shape?: 'circle' | 'square';
+    /**
+     * Background colour for the initials fallback. Uses theme tokens, so it
+     * adapts to light/dark themes automatically. For brand colours or per-name
+     * deterministic colours, pass `style={{ backgroundColor: '...' }}` instead —
+     * the colour class is skipped when a custom background is provided.
+     */
+    color?: 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning' | 'error' | 'info' | 'neutral';
+    /**
+     * Custom fallback node rendered when there is no image AND no usable initials
+     * from `name`. Common pattern: a profile icon (e.g. `<MdPerson />`).
+     * If `fallback` is omitted, the avatar shows `?`.
+     */
+    fallback?: default_2.ReactNode;
+    /**
+     * Forwarded to the `<img>` element. Useful for cross-origin avatars such as
+     * Google Account photos which require `'anonymous'` or `''`.
+     */
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
+    /**
+     * Forwarded to the `<img>` element. Google Account photos (and several
+     * other 3rd-party CDNs) return 403 unless `'no-referrer'` is sent.
+     */
+    referrerPolicy?: default_2.HTMLAttributeReferrerPolicy;
+    /** Native lazy/eager loading hint forwarded to the `<img>` element. */
+    loading?: 'eager' | 'lazy';
+    /** Extra utility classes on the root */
+    sx?: string;
+    /** Inline styles on the root (e.g. custom backgroundColor) */
+    style?: default_2.CSSProperties;
+}
+
+export declare const Badge: default_2.FC<BadgeProps>;
+
+export declare interface BadgeProps {
+    label: string;
+    icon?: default_2.ReactNode;
+    variant?: 'filled' | 'outlined' | 'subtle';
+    color?: 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning' | 'error' | 'info' | 'neutral';
+    /**
+     * Gradient configuration for the badge
+     * Can be a predefined variant (e.g., "primary-horizontal") or a custom gradient object
+     * When gradient is specified, it takes priority over the color prop
+     */
+    gradient?: GradientConfig;
+    size?: 'small' | 'medium' | 'large';
+    sx?: string;
+    style?: default_2.CSSProperties;
+}
+
+declare interface BaseFilterSection {
+    id: string;
+    title: string;
+}
+
+export declare type BreakpointTokens = {
+    '--breakpoint-mobile-min': string;
+    '--breakpoint-mobile-max': string;
+    '--breakpoint-tablet-min': string;
+    '--breakpoint-tablet-max': string;
+    '--breakpoint-desktop-min': string;
+    '--breakpoint-desktop-max': string;
+    '--breakpoint-large-desktop-min': string;
+    '--breakpoint-large-desktop-max': string;
+    '--breakpoint-extra-large-min': string;
+};
+
+export declare const Button: default_2.FC<ButtonProps>;
+
+export declare interface ButtonProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {
+    variant?: 'filled' | 'outlined' | 'ghost' | 'text';
+    color?: 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning' | 'error' | 'info' | 'neutral';
+    /**
+     * Gradient configuration for the button
+     * Can be a predefined variant (e.g., "primary-horizontal") or a custom gradient object
+     * When gradient is specified, it takes priority over the color prop
+     */
+    gradient?: GradientConfig;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    children: default_2.ReactNode;
+    /** Utility classes (e.g., "rounded-full", "rounded-xl") */
+    sx?: string;
+    /** Custom inline styles (background, color, borderColor, etc.) */
+    style?: default_2.CSSProperties;
+}
+
+export declare const Calendar: default_2.FC<CalendarProps>;
+
+declare interface CalendarDateRange {
+    start: Date | null;
+    end: Date | null;
+}
+
+export declare interface CalendarEvent {
+    id: string;
+    category: CalendarEventCategory;
+    /** Auto-generated from category meta label if not provided */
+    title?: string;
+    /** YYYY-MM-DD — start day */
+    date: string;
+    /**
+     * YYYY-MM-DD — inclusive last day for multi-day range events.
+     * When set and greater than `date`, the event is rendered as a horizontal
+     * range bar spanning days in month/week views (and in the all-day section
+     * of the day view). `time`/`duration` are ignored for range events.
+     */
+    endDate?: string;
+    /** HH:mm */
+    time?: string;
+    /** Duration in minutes */
+    duration?: number;
+    notes?: string;
+    urgent?: boolean;
+    /** google_meet | zoom | discord | whatsapp | teams | phone | in_person | any string */
+    platform?: string;
+    meetLink?: string;
+    /** Arbitrary custom fields — accessible in render props */
+    data?: Record<string, unknown>;
+}
+
+/** Open string type — pass any category string */
+export declare type CalendarEventCategory = string;
+
+export declare interface CalendarFilterOption {
+    id?: string;
+    value: string;
+    label: string;
+}
+
+export declare type CalendarFilterSection = PillsFilterSection | SelectFilterSection | DateRangeFilterSection;
+
+export declare const CalendarKPIStrip: default_2.FC<CalendarKPIStripProps>;
+
+declare interface CalendarKPIStripProps {
+    metrics: KPIMetric[];
+}
+
+export declare interface CalendarProps {
+    events?: CalendarEvent[];
+    defaultView?: CalendarView;
+    initialDate?: Date;
+    /**
+     * Category styling metadata.
+     * No built-in categories are applied by default — pass your own.
+     * Export CATEGORY_META from '@anyemp/ui-kit' for the recruitment preset.
+     */
+    categoryMeta?: Record<string, CategoryMetaItem>;
+    /**
+     * Custom filter sections for the filter panel.
+     * When provided, replaces the auto-generated sections.
+     */
+    filterSections?: CalendarFilterSection[];
+    /**
+     * Controlled filter values. When provided together with `onFilterValuesChange`,
+     * the Calendar operates in controlled mode — the parent owns the filter state.
+     * Use this when you need to programmatically update filter values from outside
+     * (e.g. clear `statusIds` when `talentTypes` selection changes).
+     */
+    filterValues?: Record<string, FilterSectionValue>;
+    /**
+     * Called whenever the user changes any filter value (controlled mode).
+     * Must be provided together with `filterValues`.
+     */
+    onFilterValuesChange?: (values: Record<string, FilterSectionValue>) => void;
+    /**
+     * Called when the user clicks "+ Add" or presses N.
+     * When provided, shows the "+ Add" button.
+     */
+    onAddClick?: (date?: string) => void;
+    /**
+     * Called when the user clicks "Edit" in the event sidebar.
+     * When provided, shows the Edit button in the sidebar.
+     */
+    onEditClick?: (event: CalendarEvent) => void;
+    /**
+     * Called by the parent after a new event is created.
+     * Also used as a signal to show "+ Add" button if onAddClick is absent.
+     */
+    onEventCreate?: (event: Omit<CalendarEvent, 'id'>) => void;
+    /** Called when sidebar Delete button is clicked */
+    onEventDelete?: (id: string) => void;
+    /**
+     * Custom event card renderer for all views (month, week, day).
+     * Replaces the built-in CalendarEventCard.
+     * compact=true in month grid cells and day all-day section.
+     */
+    renderEvent?: (event: CalendarEvent, compact: boolean) => React.ReactNode;
+    /**
+     * Custom KPI strip renderer.
+     * When provided, replaces the built-in CalendarKPIStrip.
+     */
+    renderKPI?: () => React.ReactNode;
+    /**
+     * Custom body renderer for the single-event sidebar detail view.
+     * Replaces only the scrollable body section; header and footer stay built-in.
+     */
+    renderSidebarDetail?: (event: CalendarEvent) => React.ReactNode;
+    /**
+     * Replaces the built-in filter panel entirely.
+     * Receives `isOpen` and `onClose` so it can react to the filter button toggle.
+     * When provided, `filterSections` and `onFilterChange` are ignored.
+     */
+    renderFilterPanel?: (props: {
+        isOpen: boolean;
+        onClose: () => void;
+    }) => React.ReactNode;
+    /**
+     * Replaces only the body (sections area) of the built-in filter panel.
+     * Header and footer (Apply / Reset) remain.
+     * When provided, `filterSections` is ignored.
+     */
+    renderFilterPanelBody?: () => React.ReactNode;
+    /**
+     * Custom renderer for each event row in the sidebar day-list view.
+     */
+    renderSidebarItem?: (event: CalendarEvent) => React.ReactNode;
+    /**
+     * Called when the user changes any filter value.
+     * When provided, internal client-side filtering is disabled.
+     */
+    onFilterChange?: (filters: Record<string, FilterSectionValue>) => void;
+    /**
+     * Called on mount and whenever the user navigates (prev/next) or switches view.
+     * Provides the exact date range visible on screen so the parent can fetch events.
+     * - month: includes padding days from adjacent months shown in the grid
+     * - week: Monday–Sunday of the visible week
+     * - day: the single selected day
+     */
+    onNavigate?: (range: {
+        start: Date;
+        end: Date;
+    }) => void;
+    /** Show Ctrl+K search overlay. Default: true */
+    showSearch?: boolean;
+    /** Show filter panel button. Default: true */
+    showFilters?: boolean;
+    /** Show right sidebar when an event is clicked. Default: true */
+    showSidebar?: boolean;
+    /**
+     * When true, the calendar fills the full viewport height (`100dvh`).
+     * Use when the Calendar is the primary page content.
+     * Default: false.
+     */
+    pageMode?: boolean;
+    sx?: string;
+    style?: React.CSSProperties;
+}
+
+export declare type CalendarView = 'month' | 'week' | 'day';
+
+export declare interface CategoryMetaItem {
+    label: string;
+    short: string;
+    /** Required for variant 'icon'; used as decoration in search/sidebar */
+    icon?: string;
+    color: string;
+    bg: string;
+    /** 'bar' = colored left bar (default), 'icon' = emoji icon + dashed border */
+    variant?: 'bar' | 'icon';
+}
+
+export declare const Checkbox: default_2.FC<CheckboxProps>;
+
+export declare interface CheckboxProps {
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Uncontrolled initial checked state */
+    defaultChecked?: boolean;
+    /** Called when the checkbox value changes */
+    onChange?: (checked: boolean, event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    /** Label text or node rendered beside the checkbox */
+    label?: default_2.ReactNode;
+    /** Colour theme applied to the checked/indeterminate state */
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    /** Checkbox size */
+    size?: 'small' | 'medium' | 'large';
+    /** Indeterminate state — overrides the visual appearance regardless of checked */
+    isIndeterminate?: boolean;
+    /** Disables all interaction */
+    isDisabled?: boolean;
+    /** name attribute forwarded to the native input */
+    name?: string;
+    /** value attribute forwarded to the native input */
+    value?: string;
+    /** id forwarded to the native input (label htmlFor uses this) */
+    id?: string;
+    /** Additional CSS class(es) appended to the root element */
+    sx?: string;
+    /** Inline styles applied directly to the root element */
+    style?: default_2.CSSProperties;
+}
+
+export declare const Chip: default_2.FC<ChipProps>;
+
+export declare interface ChipProps {
+    /** Text label displayed inside the chip */
+    label: string;
+    /** Icon rendered before the label */
+    leadingIcon?: default_2.ReactNode;
+    /** Icon rendered after the label (ignored when onDelete is set) */
+    trailingIcon?: default_2.ReactNode;
+    /** Visual style variant */
+    variant?: 'filled' | 'outlined' | 'ghost';
+    /** Colour theme */
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    /** Chip size */
+    size?: 'small' | 'medium' | 'large';
+    /** Whether the chip is in a selected / active state */
+    selected?: boolean;
+    /** Disables all interaction and dims the chip */
+    disabled?: boolean;
+    /** Makes the chip interactive – called when the chip body is clicked */
+    onClick?: (event: default_2.MouseEvent<HTMLDivElement>) => void;
+    /** Shows a delete (×) button and calls this handler when it is clicked */
+    onDelete?: (event: default_2.MouseEvent<HTMLButtonElement>) => void;
+    /** Additional CSS class(es) appended to the root element */
+    sx?: string;
+    /** Inline styles applied directly to the root element */
+    style?: default_2.CSSProperties;
+}
+
+export declare type ColorToken = 'primary-main' | 'primary-light' | 'primary-dark' | 'secondary-main' | 'secondary-light' | 'secondary-dark' | 'success-main' | 'success-light' | 'success-dark' | 'tertiary-main' | 'tertiary-light' | 'tertiary-dark' | 'warning-main' | 'warning-light' | 'warning-dark' | 'error-main' | 'error-light' | 'error-dark' | 'info-main' | 'info-light' | 'info-dark' | 'background-default' | 'background-paper' | 'text-primary' | 'text-secondary';
+
+/** Granular toggles for the built-in column menu. Anything omitted defaults
+ *  to `true` when the menu is enabled. `manage` controls visibility of the
+ *  "Manage columns" footer item; turning it off leaves only the small
+ *  per-action items in the header context menu. */
+declare interface ColumnMenuConfig {
+    pin?: boolean;
+    hide?: boolean;
+    reorder?: boolean;
+    manage?: boolean;
+}
+
+declare interface ColumnMenuDefaults {
+    pinned?: string[];
+    hidden?: string[];
+    order?: string[];
+}
+
+declare interface ColumnMenuLabels {
+    /** Small-menu items */
+    pin?: string;
+    unpin?: string;
+    hide?: string;
+    manage?: string;
+    /** Manage-columns popover */
+    manageTitle?: string;
+    unpinAll?: string;
+    showAll?: string;
+    reset?: string;
+    lockedHint?: string;
+    /** Drag handle a11y label in the Manage popover. Default `'Reorder'`. */
+    dragHandle?: string;
+    /** Close-button a11y label in the Manage popover. Default `'Close'`. */
+    close?: string;
+}
+
+export declare type CombinedGradientType = 'primary-secondary' | 'primary-tertiary' | 'primary-success' | 'success-tertiary' | 'warning-error' | 'info-primary';
+
+export declare type CombinedGradientVariant = `${CombinedGradientType}-${GradientDirection}`;
+
+export declare type ComponentTokens = {
+    '--button-padding-x'?: string;
+    '--button-padding-y'?: string;
+    '--button-border-width'?: string;
+    '--button-border-radius'?: string;
+    '--textfield-border-color'?: string;
+    '--textfield-border-radius'?: string;
+    '--textfield-padding-x'?: string;
+    '--textfield-padding-y'?: string;
+};
+
+export declare interface ConfirmContextValue {
+    /** Open a confirmation dialog. Resolves with `true` on Confirm, `false` on Cancel/Escape/backdrop. */
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+}
+
+export declare const ConfirmDialog: default_2.FC<ConfirmDialogProps>;
+
+export declare interface ConfirmDialogProps {
+    /** Whether the dialog is visible */
+    open: boolean;
+    /** Title displayed at the top of the dialog */
+    title?: string;
+    /** Body text or content */
+    message?: default_2.ReactNode;
+    /** Confirm button label. Default: "Confirm" */
+    confirmLabel?: string;
+    /** Cancel button label. Default: "Cancel" */
+    cancelLabel?: string;
+    /** Confirm button colour — use 'error' for destructive actions */
+    confirmColor?: ButtonProps['color'];
+    /** Called when the user clicks Confirm */
+    onConfirm: () => void;
+    /** Called when the user clicks Cancel, the backdrop, the close button, or presses Escape */
+    onCancel: () => void;
+    /** Hide the Cancel button (e.g. for an OK-only acknowledgement) */
+    hideCancel?: boolean;
+    /**
+     * Whether clicking the backdrop dismisses the dialog (treated as Cancel).
+     * Default: `true`. Set to `false` to force an explicit Cancel / Confirm / Close-icon click.
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether pressing Escape dismisses the dialog (treated as Cancel).
+     * Default: `true`. Set to `false` to force an explicit button click.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Return focus to the element that opened the dialog when it closes.
+     * Defaults to `false` — useful when the trigger element is unmounted or
+     * the user is moving on to a different area (e.g. after deleting a row).
+     * Set to `true` to restore focus (helpful for keyboard-only flows where
+     * the trigger is still visible).
+     */
+    returnFocusOnClose?: boolean;
+}
+
+export declare interface ConfirmOptions {
+    title?: string;
+    message?: React.ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmColor?: ButtonProps['color'];
+    hideCancel?: boolean;
+    /**
+     * Whether clicking the backdrop dismisses the dialog (treated as Cancel).
+     * Default: `true`. Set to `false` to require an explicit Cancel/Confirm/Close-icon click.
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether pressing Escape dismisses the dialog (treated as Cancel).
+     * Default: `true`.
+     */
+    closeOnEscape?: boolean;
+}
+
+export declare const ConfirmProvider: default_2.FC<ConfirmProviderProps>;
+
+export declare interface ConfirmProviderProps {
+    children: default_2.ReactNode;
+}
+
+declare interface CourseAuthor {
+    username: string;
+    avatarUrl?: string;
+}
+
+export declare const CourseCard: default_2.FC<CourseCardProps>;
+
+export declare interface CourseCardProps {
+    title: string;
+    description?: string;
+    imageUrl?: string;
+    difficulty?: 'beginner' | 'intermediate' | 'advanced';
+    durationMinutes?: number;
+    lessonCount?: number;
+    testCount?: number;
+    videoCount?: number;
+    presentationCount?: number;
+    professions?: CourseProfession[];
+    progress?: number;
+    rating?: number;
+    author?: CourseAuthor;
+    isCompleted?: boolean;
+    isDraft?: boolean;
+    isRecommended?: boolean;
+    badgeSlot?: default_2.ReactNode;
+    isBookmarked?: boolean;
+    onBookmarkToggle?: (isBookmarked: boolean) => void;
+    href?: string;
+    target?: string;
+    onClick?: () => void;
+    sx?: string;
+}
+
+export declare interface CourseProfession {
+    name: string;
+    color?: string;
+}
+
+/**
+ * Custom gradient configuration
+ * Supports both hex colors and color tokens
+ */
+export declare interface CustomGradient {
+    /** Start color - hex (#FF6B6B) or color token (primary-main) */
+    from: string | ColorToken;
+    /** End color - hex (#4ECDC4) or color token (secondary-main) */
+    to: string | ColorToken;
+    /** Optional gradient direction - defaults to 'diagonal' */
+    direction?: GradientDirection;
+    /** Optional middle color for 3-stop gradients */
+    via?: string | ColorToken;
+}
+
+export declare const DatePicker: default_2.ForwardRefExoticComponent<DatePickerProps & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface DatePickerProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'className' | 'type'> {
+    /** 'single' selects one date, 'range' selects start + end */
+    mode?: 'single' | 'range';
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    rangeValue?: DateRange;
+    onRangeChange?: (range: DateRange) => void;
+    /** 'input' renders a text field with calendar icon; 'icon' renders only the icon button */
+    triggerVariant?: 'input' | 'icon';
+    /** Date format string using DD, MM, YYYY tokens. With `showTime`, append ` HH:mm` (or include HH and mm in `format`). Default: 'DD.MM.YYYY' */
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    /** Specific dates that are not selectable */
+    disabledDates?: Date[];
+    /** Days of week that are not selectable (0 = Sunday, 1 = Monday, …, 6 = Saturday) */
+    disabledDaysOfWeek?: number[];
+    /** Custom function to determine if a date is disabled */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Show hour / minute inputs below the calendar */
+    showTime?: boolean;
+    /**
+     * Minute step for the time lists and validation (`1` = every minute; `30` = half-hour grid from
+     * midnight; `60` = hourly). Choose per screen or data source — nothing is fixed inside the component.
+     * @default 1
+     */
+    timeStep?: number;
+    /**
+     * Returns inclusive min/max **local** time for the given calendar date.
+     * Omit `getTimeBounds` entirely for **no** time-of-day limits (full 00:00–23:59, subject to `timeStep`).
+     * Omit only `min`/`max` inside the object for open-ended start or end of the allowed window.
+     * Return `null` if that calendar day has no selectable times (day is disabled when `showTime`).
+     */
+    getTimeBounds?: (selectedDay: Date) => TimeBounds | null;
+    /** Custom preset buttons. Used only when showPresets is true */
+    presets?: DatePreset[];
+    /** Show a preset panel on the left of the popup */
+    showPresets?: boolean;
+    /** Show two calendar months side by side. Defaults to true when mode='range' */
+    multiMonth?: boolean;
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    size?: 'small' | 'normal' | 'large';
+    fullWidth?: boolean;
+    /** Custom node rendered inside the input wrapper, before the input. Ignored when `triggerVariant='icon'`. */
+    startAdornment?: default_2.ReactNode;
+    /** Custom node rendered between the input and the built-in clear/calendar buttons. Ignored when `triggerVariant='icon'`. */
+    endAdornment?: default_2.ReactNode;
+    /** Extra CSS classes targeting individual parts. */
+    sx?: Partial<Record<'root' | 'wrapper' | 'input' | 'label' | 'helperText' | 'popup', string>>;
+    style?: default_2.CSSProperties;
+}
+
+export declare interface DatePreset {
+    label: string;
+    getValue: () => Date | DateRange;
+}
+
+export declare interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+
+declare interface DateRangeFilterSection extends BaseFilterSection {
+    type: 'daterange';
+    minDate?: Date;
+    maxDate?: Date;
+}
+
+export declare type DepartmentTokens = {
+    '--department-all-default': string;
+    '--department-all-hover': string;
+    '--department-all-active': string;
+    '--department-design-default': string;
+    '--department-design-hover': string;
+    '--department-design-active': string;
+    '--department-development-default': string;
+    '--department-development-hover': string;
+    '--department-development-active': string;
+    '--department-management-default': string;
+    '--department-management-hover': string;
+    '--department-management-active': string;
+    '--department-marketing-default': string;
+    '--department-marketing-hover': string;
+    '--department-marketing-active': string;
+    '--department-video-default': string;
+    '--department-video-hover': string;
+    '--department-video-active': string;
+};
+
+export declare type DepartmentType = 'all' | 'design' | 'development' | 'management' | 'marketing' | 'video';
+
+export declare const Drawer: default_2.FC<DrawerProps>;
+
+export declare interface DrawerProps {
+    /** Controls whether the drawer is visible */
+    open: boolean;
+    /** Callback fired when the drawer requests to be closed */
+    onClose?: () => void;
+    /** Whether clicking the backdrop closes the drawer */
+    closeOnBackdropClick?: boolean;
+    /** Whether pressing Escape key closes the drawer */
+    closeOnEscape?: boolean;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Position from which the drawer slides in */
+    anchor?: 'left' | 'right' | 'top' | 'bottom';
+    /** Width of the drawer (for left/right anchors) */
+    width?: string;
+    /** Height of the drawer (for top/bottom anchors) */
+    height?: string;
+    /** Drawer content */
+    children: default_2.ReactNode;
+    /** Utility classes (e.g., "rounded-xl") */
+    sx?: string;
+    /** Custom inline styles for the drawer content */
+    style?: default_2.CSSProperties;
+    /** Custom inline styles for the backdrop */
+    backdropStyle?: default_2.CSSProperties;
+    /** Hide the dark backdrop overlay */
+    hideBackdrop?: boolean;
+    /** Custom portal container ID */
+    portalContainerId?: string;
+    /** Element to focus when drawer opens */
+    initialFocusRef?: default_2.RefObject<HTMLElement>;
+    /** Whether to return focus to trigger element on close */
+    returnFocusOnClose?: boolean;
+    /** Whether to trap focus within drawer */
+    trapFocus?: boolean;
+    /** Title text displayed in the drawer header */
+    title?: string;
+}
+
+export declare const Dropdown: default_2.FC<DropdownProps>;
+
+export declare const DropdownItem: default_2.FC<DropdownItemProps>;
+
+export declare interface DropdownItemProps {
+    children: default_2.ReactNode;
+    disabled?: boolean;
+    selected?: boolean;
+    onClick?: () => void;
+    /** Extra CSS class applied to the item wrapper div */
+    sx?: string;
+    /** Inline styles applied to the item wrapper div */
+    style?: default_2.CSSProperties;
+}
+
+export declare interface DropdownProps {
+    /** Trigger element — any ReactNode; click is captured by the Dropdown wrapper */
+    trigger: default_2.ReactNode;
+    /** Menu content — free-form */
+    children: default_2.ReactNode;
+    /** Placement relative to trigger (default: 'bottom-end') */
+    placement?: 'bottom-start' | 'bottom-end' | 'bottom';
+    /** Show dividers between items (default: false) */
+    divider?: boolean;
+    /**
+     * 'menu' — items are selectable: hover highlight + pointer cursor + keyboard nav (default)
+     * 'info' — read-only list: no hover, no pointer cursor, no focus on items
+     */
+    variant?: 'menu' | 'info';
+    /**
+     * Render the menu in a portal (attached to <body>) with `position: fixed`
+     * coordinates computed from the trigger. Use this when the Dropdown lives
+     * inside a scroll container (e.g. Table viewport with `overflow: auto`) or
+     * inside a Modal — otherwise the menu is clipped by ancestor overflow /
+     * covered by the Modal backdrop.
+     *
+     * Default: `false` (in-flow, `position: absolute` inside the trigger).
+     */
+    portal?: boolean;
+    /** Custom CSS classes for root and/or menu container */
+    sx?: {
+        root?: string;
+        menu?: string;
+    };
+    /** Inline styles for root and/or menu container */
+    style?: {
+        root?: default_2.CSSProperties;
+        menu?: default_2.CSSProperties;
+    };
+}
+
+export declare interface Employee {
+    talentId: string;
+    shortName: string | null;
+    slug: string;
+    avatarUrl?: string;
+    profession?: string;
+    rate?: EmployeeRate | null;
+    summary?: string;
+    currency?: string;
+    pricingTiers?: PricingTier[];
+    prices_discounted?: PricingTier[];
+    discount?: string;
+    department?: {
+        name: string;
+        color: string;
+    };
+    tools?: Tool[];
+    languages?: EmployeeLanguage[];
+    tasks?: {
+        id?: string;
+        text: string;
+    }[];
+    slogan?: string;
+    is_pinned?: boolean;
+}
+
+export declare const EmployeeCard: default_2.FC<EmployeeCardProps>;
+
+export declare interface EmployeeCardProps {
+    employee: Employee;
+    profileUrl?: string;
+    onClick?: () => void;
+    talkMode?: TalkModeConfig;
+    selectedToolIds?: string[];
+    onToolToggle?: (toolId: string) => void;
+    isInCart?: boolean;
+    onCartToggle?: () => void;
+    selectedTierValue?: string;
+    onTierChange?: (value: string) => void;
+    share?: boolean;
+    onShare?: () => void;
+    sx?: {
+        root?: string;
+        header?: string;
+        avatar?: string;
+        content?: string;
+    };
+}
+
+export declare interface EmployeeLanguage {
+    id?: number;
+    name: string;
+    /** 2-letter country code for flagcdn, e.g. "gb" (English), "ua" (Ukrainian) */
+    iso2: string;
+    /** Level short name, e.g. "C1", "Native", "A1" */
+    level: string;
+    /** Custom icon URL from API; falls back to flagcdn if null/undefined */
+    icon?: string | null;
+}
+
+declare interface EmployeeRate {
+    id: number;
+    name: string;
+    value: string;
+    hours: number;
+}
+
+export declare interface FilterOption {
+    value: string;
+    label: string;
+    /** Image URL — flag for languages, icon for departments */
+    icon?: string;
+    /** ReactNode icon — for SVG icons in tiles (takes priority over `icon` string) */
+    iconNode?: ReactNode;
+    /** Accent colour for department cards */
+    color?: string;
+    /** Secondary label — e.g. "~160 h/mo" for availability tiles */
+    sublabel?: string;
+}
+
+export declare function FilterPanel({ sections, value, onChange, resultCount, isOpen, onClose, onReset, }: FilterPanelProps): JSX.Element;
+
+export declare interface FilterPanelProps {
+    sections: FilterSection[];
+    /** Currently applied (committed) filter values, keyed by section id */
+    value: Record<string, string[]>;
+    /** Called when the user clicks Apply. Receives the new filter values. */
+    onChange: (value: Record<string, string[]>) => void;
+    /** Total result count shown in header (reflects last applied state) */
+    resultCount?: number;
+    isOpen: boolean;
+    onClose: () => void;
+    /**
+     * Called when the user clicks "Reset all".
+     * The consumer is responsible for clearing filters and closing the panel.
+     * If not provided, filters are cleared locally without closing.
+     */
+    onReset?: () => void;
+}
+
+export declare interface FilterSection {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    /** cards = department grid, pills = toggle buttons, tiles = availability (visual only) */
+    type: 'pills' | 'cards' | 'tiles';
+    columns?: 2 | 3;
+    options: FilterOption[];
+    initiallyOpen?: boolean;
+    showSearch?: boolean;
+    /** Called (debounced) when the user types in the section search input */
+    onSearch?: (query: string) => void;
+    showMoreLimit?: number;
+    /** When true the section is rendered but its selections are not passed to onChange */
+    disabled?: boolean;
+}
+
+/** Value shape per filter section */
+declare type FilterSectionValue = string[] | string | null | CalendarDateRange;
+
+export declare type FloatingPlacement = 'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top';
+
+export declare interface FloatingPositionResult {
+    /** Style to apply to the floating element (position: fixed, coords, maxHeight, z-index). */
+    style: CSSProperties;
+    /** Resolved vertical side after flip logic. */
+    side: ResolvedSide;
+    /** True once the first measurement is done — use it to render visibility. */
+    ready: boolean;
+}
+
+declare type FluidSpacingTokens = {
+    '--space-fluid-xs': string;
+    '--space-fluid-sm': string;
+    '--space-fluid-md': string;
+    '--space-fluid-lg': string;
+    '--space-fluid-xl': string;
+    '--space-fluid-2xl': string;
+    '--space-fluid-3xl': string;
+};
+
+/**
+ * Get CSS class name for predefined gradients
+ * Returns null for custom gradients
+ */
+export declare function getGradientClassName(gradient: GradientConfig): string | null;
+
+/**
+ * Generate inline gradient style for custom gradients
+ * Supports 2-color and 3-color gradients
+ */
+export declare function getGradientStyle(gradient: CustomGradient): string;
+
+export declare type GradientColorType = 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning' | 'error' | 'info';
+
+/**
+ * Gradient configuration for components
+ * Can be either a predefined variant or a custom gradient
+ */
+export declare type GradientConfig = GradientVariant | CustomGradient;
+
+/**
+ * Gradient system types and utilities
+ * Provides type-safe API for predefined and custom gradients
+ */
+export declare type GradientDirection = 'horizontal' | 'vertical' | 'diagonal' | 'radial';
+
+export declare type GradientTokens = {
+    '--gradient-primary-start': string;
+    '--gradient-primary-end': string;
+    '--gradient-secondary-start': string;
+    '--gradient-secondary-end': string;
+    '--gradient-success-start': string;
+    '--gradient-success-end': string;
+    '--gradient-tertiary-start': string;
+    '--gradient-tertiary-end': string;
+    '--gradient-warning-start': string;
+    '--gradient-warning-end': string;
+    '--gradient-error-start': string;
+    '--gradient-error-end': string;
+    '--gradient-info-start': string;
+    '--gradient-info-end': string;
+    '--gradient-primary-secondary-start': string;
+    '--gradient-primary-secondary-end': string;
+    '--gradient-primary-tertiary-start': string;
+    '--gradient-primary-tertiary-end': string;
+    '--gradient-primary-success-start': string;
+    '--gradient-primary-success-end': string;
+    '--gradient-success-tertiary-start': string;
+    '--gradient-success-tertiary-end': string;
+    '--gradient-warning-error-start': string;
+    '--gradient-warning-error-end': string;
+    '--gradient-info-primary-start': string;
+    '--gradient-info-primary-end': string;
+    '--gradient-primary-horizontal': string;
+    '--gradient-primary-vertical': string;
+    '--gradient-primary-diagonal': string;
+    '--gradient-primary-radial': string;
+    '--gradient-secondary-horizontal': string;
+    '--gradient-secondary-vertical': string;
+    '--gradient-secondary-diagonal': string;
+    '--gradient-secondary-radial': string;
+    '--gradient-success-horizontal': string;
+    '--gradient-success-vertical': string;
+    '--gradient-success-diagonal': string;
+    '--gradient-success-radial': string;
+    '--gradient-tertiary-horizontal': string;
+    '--gradient-tertiary-vertical': string;
+    '--gradient-tertiary-diagonal': string;
+    '--gradient-tertiary-radial': string;
+    '--gradient-warning-horizontal': string;
+    '--gradient-warning-vertical': string;
+    '--gradient-warning-diagonal': string;
+    '--gradient-warning-radial': string;
+    '--gradient-error-horizontal': string;
+    '--gradient-error-vertical': string;
+    '--gradient-error-diagonal': string;
+    '--gradient-error-radial': string;
+    '--gradient-info-horizontal': string;
+    '--gradient-info-vertical': string;
+    '--gradient-info-diagonal': string;
+    '--gradient-info-radial': string;
+    '--gradient-primary-secondary-horizontal': string;
+    '--gradient-primary-secondary-vertical': string;
+    '--gradient-primary-secondary-diagonal': string;
+    '--gradient-primary-secondary-radial': string;
+    '--gradient-primary-tertiary-horizontal': string;
+    '--gradient-primary-tertiary-vertical': string;
+    '--gradient-primary-tertiary-diagonal': string;
+    '--gradient-primary-tertiary-radial': string;
+    '--gradient-primary-success-horizontal': string;
+    '--gradient-primary-success-vertical': string;
+    '--gradient-primary-success-diagonal': string;
+    '--gradient-primary-success-radial': string;
+    '--gradient-success-tertiary-horizontal': string;
+    '--gradient-success-tertiary-vertical': string;
+    '--gradient-success-tertiary-diagonal': string;
+    '--gradient-success-tertiary-radial': string;
+    '--gradient-warning-error-horizontal': string;
+    '--gradient-warning-error-vertical': string;
+    '--gradient-warning-error-diagonal': string;
+    '--gradient-warning-error-radial': string;
+    '--gradient-info-primary-horizontal': string;
+    '--gradient-info-primary-vertical': string;
+    '--gradient-info-primary-diagonal': string;
+    '--gradient-info-primary-radial': string;
+};
+
+export declare type GradientVariant = SingleGradientVariant | CombinedGradientVariant;
+
+export declare const Header: default_2.FC<HeaderProps>;
+
+export declare interface HeaderNavItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+
+export declare interface HeaderProps {
+    navItems?: HeaderNavItem[];
+    logoText?: string;
+    logoSrc?: string;
+    logoAlt?: string;
+    onLogoClick?: () => void;
+    sx?: {
+        root?: string;
+        nav?: string;
+        logo?: string;
+        navItem?: string;
+    };
+}
+
+/**
+ * IconButton component for icon-only buttons
+ * Designed for actions represented by an icon without text
+ *
+ * @example
+ * ```tsx
+ * import { MdClose, MdNotifications } from 'react-icons/md';
+ *
+ * <IconButton
+ *   icon={<MdClose />}
+ *   aria-label="Close"
+ *   onClick={handleClose}
+ * />
+ *
+ * // With badge
+ * <IconButton
+ *   icon={<MdNotifications />}
+ *   aria-label="Notifications"
+ *   badge={5}
+ *   badgeColor="error"
+ * />
+ * ```
+ */
+export declare const IconButton: default_2.FC<IconButtonProps>;
+
+export declare interface IconButtonProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> {
+    /** Icon element to display (typically from react-icons) */
+    icon: default_2.ReactNode;
+    /** Size variant of the icon button */
+    size?: 'small' | 'medium' | 'large';
+    /** Color theme of the button */
+    color?: 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning' | 'error' | 'info' | 'neutral';
+    /** Visual style variant */
+    variant?: 'filled' | 'outlined' | 'ghost';
+    /** Accessible label for screen readers (REQUIRED for accessibility) */
+    'aria-label': string;
+    /** Utility classes (e.g., "rounded-full") */
+    sx?: string;
+    /** Custom inline styles */
+    style?: default_2.CSSProperties;
+    /** Badge content (number or string). If provided, displays a badge on the button */
+    badge?: number | string;
+    /** Badge color variant */
+    badgeColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+}
+
+/**
+ * Type guard to check if gradient is custom
+ */
+export declare function isCustomGradient(gradient: GradientConfig): gradient is CustomGradient;
+
+export declare interface KPIMetric {
+    label: string;
+    value: number | string;
+    /** CSS color string or one of: 'primary' | 'success' | 'warning' | 'error' | 'info' */
+    color?: string;
+    onClick?: () => void;
+}
+
+export declare const Layout: default_2.FC<LayoutProps>;
+
+export declare interface LayoutProps {
+    /** Page content */
+    children: default_2.ReactNode;
+    /**
+     * - `'sidebar'` — authenticated layout with fixed left sidebar (default)
+     * - `'centered'` — unauthenticated layout with centered card content
+     */
+    variant?: 'sidebar' | 'centered';
+    /** Sidebar configuration (used when variant='sidebar') */
+    sidebar?: SidebarProps;
+    /** Header slot (used when variant='centered') */
+    header?: default_2.ReactNode;
+    /** Extra CSS class on the root element */
+    sx?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare type LayoutTokens = {
+    '--layout-columns': string | number;
+    '--layout-gutter': string;
+    '--layout-max-width': string;
+};
+
+declare interface LessonAuthor {
+    username: string;
+    avatarUrl?: string;
+}
+
+export declare const LessonCard: default_2.FC<LessonCardProps>;
+
+export declare interface LessonCardProps {
+    title: string;
+    description?: string;
+    imageUrl?: string;
+    type?: string;
+    contentType?: string;
+    durationMinutes?: number;
+    author?: LessonAuthor;
+    module?: string;
+    course?: string;
+    skills?: string[];
+    professions?: LessonProfession[];
+    testCount?: number;
+    rating?: number;
+    isBookmarked?: boolean;
+    onBookmarkToggle?: (isBookmarked: boolean) => void;
+    isCompleted?: boolean;
+    isDraft?: boolean;
+    isRecommended?: boolean;
+    badgeSlot?: default_2.ReactNode;
+    href?: string;
+    target?: string;
+    onClick?: () => void;
+    customButtons?: default_2.ReactNode;
+    sx?: string;
+}
+
+export declare interface LessonProfession {
+    name: string;
+    color?: string;
+}
+
+export declare const Logo: default_2.FC<LogoProps>;
+
+export declare interface LogoProps {
+    /**
+     * Path to logo image
+     */
+    src?: string;
+    /**
+     * Alt text for logo image
+     */
+    alt?: string;
+    /**
+     * Text to display below the logo
+     */
+    text?: string;
+    /**
+     * Click handler for logo
+     */
+    onClick?: () => void;
+    /**
+     * Size of the logo
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+
+export declare const Modal: default_2.FC<ModalProps>;
+
+export declare interface ModalProps {
+    /** Controls whether the modal is visible */
+    open: boolean;
+    /** Callback fired when the modal requests to be closed */
+    onClose?: () => void;
+    /** Whether clicking the backdrop closes the modal */
+    closeOnBackdropClick?: boolean;
+    /** Whether pressing Escape key closes the modal */
+    closeOnEscape?: boolean;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Size variant of the modal */
+    size?: 'small' | 'medium' | 'large' | 'fullscreen';
+    /** Modal content */
+    children: default_2.ReactNode;
+    /** Utility classes (e.g., "rounded-xl") */
+    sx?: string;
+    /** Custom inline styles for the modal content */
+    style?: default_2.CSSProperties;
+    /** Custom inline styles for the backdrop */
+    backdropStyle?: default_2.CSSProperties;
+    /** Custom portal container ID */
+    portalContainerId?: string;
+    /** Element to focus when modal opens */
+    initialFocusRef?: default_2.RefObject<HTMLElement>;
+    /** Whether to return focus to trigger element on close */
+    returnFocusOnClose?: boolean;
+    /** Whether to trap focus within modal */
+    trapFocus?: boolean;
+}
+
+export declare type MotionTokens = {
+    '--motion-fast': string;
+    '--motion-normal': string;
+    '--motion-slow': string;
+    '--motion-easing': string;
+};
+
+export declare interface NavItem {
+    id: string;
+    label: string;
+    icon?: default_2.ReactNode;
+    path?: string;
+    children?: NavItem[];
+    badge?: string | number;
+    /**
+     * When true, render the item as an external link: opens in a new tab and
+     * skips both `preventDefault` and `onItemClick` so the browser handles it.
+     */
+    external?: boolean;
+}
+
+/**
+ * Pagination — server-driven page controls.
+ *
+ * Composable footer for paginated lists/tables: prev/next, sliding page-number
+ * window, optional first/last jumps, results summary, per-page select, and
+ * a "Go to" input. All sub-features are independently toggleable.
+ */
+export declare const Pagination: default_2.FC<PaginationProps>;
+
+export declare interface PaginationPerPageOption {
+    /** Numeric per-page value */
+    value: number;
+    /** Display label for the option (e.g. `'10'`, `'25 rows'`) */
+    label: string;
+}
+
+export declare interface PaginationProps {
+    /** Current 1-based page */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Total number of items across all pages — used by `showResults` */
+    totalItems?: number;
+    /** Items per page — used to compute the displayed range */
+    itemsPerPage?: number;
+    /** Called when user picks another page */
+    onPageChange: (page: number) => void;
+    /** Show « » buttons jumping to first/last (default `true`) */
+    hasFirstLast?: boolean;
+    /** Show "Go to" page input (default `false`) */
+    hasGoToPage?: boolean;
+    /** How to render the results summary (default `'none'`) */
+    showResults?: PaginationResultsDisplay;
+    /** When `totalPages <= 1`, the component normally returns `null`. Set this
+     *  to `true` to keep the footer visible on a single page, rendering only the
+     *  results summary and per-page selector (page nav + Go-To stay hidden).
+     *  Default `false`. */
+    showOnSinglePage?: boolean;
+    /** Per-page select options. Renders the dropdown when both `perPageOptions`
+     *  and `onPerPageChange` are provided. */
+    perPageOptions?: PaginationPerPageOption[];
+    /** Current per-page value (controlled) */
+    perPage?: number;
+    /** Called when user picks another per-page value */
+    onPerPageChange?: (value: number) => void;
+    /** How many pages to show on each side of `currentPage` in the middle
+     *  range, before collapsing to `…`. Default `1` (i.e. `1 … 4 5 6 … 20`). */
+    siblingCount?: number;
+    /** Component scale */
+    size?: 'small' | 'medium';
+    /** Extra CSS classes on the root element */
+    sx?: string;
+    /** Inline styles on the root element */
+    style?: default_2.CSSProperties;
+}
+
+export declare type PaginationResultsDisplay = 'range' | 'total' | 'none';
+
+export declare type PaletteTokens = {
+    '--palette-primary-main': string;
+    '--palette-primary-light': string;
+    '--palette-primary-dark': string;
+    '--palette-primary-contrast-text': string;
+    '--palette-secondary-main': string;
+    '--palette-secondary-light': string;
+    '--palette-secondary-dark': string;
+    '--palette-secondary-contrast-text': string;
+    '--palette-success-main': string;
+    '--palette-success-light': string;
+    '--palette-success-dark': string;
+    '--palette-success-contrast-text': string;
+    '--palette-tertiary-main': string;
+    '--palette-tertiary-light': string;
+    '--palette-tertiary-dark': string;
+    '--palette-tertiary-contrast-text': string;
+    '--palette-warning-main': string;
+    '--palette-warning-light': string;
+    '--palette-warning-dark': string;
+    '--palette-warning-contrast-text': string;
+    '--palette-error-main': string;
+    '--palette-error-light': string;
+    '--palette-error-dark': string;
+    '--palette-error-contrast-text': string;
+    '--palette-info-main': string;
+    '--palette-info-light': string;
+    '--palette-info-dark': string;
+    '--palette-info-contrast-text': string;
+    '--palette-common-white': string;
+    '--palette-common-black': string;
+    '--palette-background-default': string;
+    '--palette-background-paper': string;
+    '--palette-text-primary': string;
+    '--palette-text-secondary': string;
+    '--palette-divider': string;
+    '--palette-action-hover': string;
+    '--palette-action-selected': string;
+    '--palette-action-disabled': string;
+    '--palette-action-disabledBackground': string;
+    '--palette-overlay-subtle': string;
+    '--palette-overlay-subtle-hover': string;
+    '--palette-badge-bg': string;
+    '--palette-primary-shadow': string;
+    '--palette-primary-shadow-strong': string;
+    '--palette-primary-overlay': string;
+    '--palette-primary-border': string;
+    '--palette-overlay-on-dark': string;
+};
+
+declare interface PillsFilterSection extends BaseFilterSection {
+    /** Omitting `type` defaults to pills for backward compatibility */
+    type?: 'pills';
+    options: CalendarFilterOption[];
+    /** Default true. Set to false for single-select (radio) behaviour. */
+    multiple?: boolean;
+}
+
+/**
+ * Portal component for rendering children outside the DOM hierarchy
+ * Uses React's createPortal to mount content to a container element
+ * Commonly used for modals, drawers, tooltips, and other overlay components
+ *
+ * @example
+ * ```tsx
+ * <Portal>
+ *   <Modal>Content</Modal>
+ * </Portal>
+ * ```
+ */
+export declare const Portal: React.FC<PortalProps>;
+
+export declare interface PortalProps {
+    /** Content to render in the portal */
+    children: ReactNode;
+    /** Custom ID for the portal container */
+    containerId?: string;
+    /** Existing HTML element to use as container */
+    containerElement?: HTMLElement;
+}
+
+declare interface PricingTier {
+    value: string;
+    price: string;
+    hours: number;
+    name: string;
+}
+
+export declare type RadiusTokens = {
+    '--radius-xs': string;
+    '--radius-sm': string;
+    '--radius-md': string;
+    '--radius-lg': string;
+    '--radius-xl': string;
+    '--radius-2xl': string;
+    '--radius-3xl': string;
+    '--radius-full': string;
+};
+
+declare type ResolvedSide = 'bottom' | 'top';
+
+export declare const Select: default_2.ForwardRefExoticComponent<SelectProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+declare type SelectChipProps = Pick<ChipProps, 'variant' | 'color' | 'size' | 'leadingIcon' | 'sx'>;
+
+declare interface SelectFilterSection extends BaseFilterSection {
+    type: 'select';
+    options: CalendarFilterOption[];
+    placeholder?: string;
+    multiple?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+}
+
+export declare interface SelectOption {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+}
+
+export declare interface SelectOptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+
+export declare interface SelectProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value' | 'defaultValue'> {
+    label?: string;
+    placeholder?: string;
+    size?: 'small' | 'normal' | 'large';
+    sx?: Partial<Record<'root' | 'trigger' | 'listbox' | 'option' | 'label' | 'popup' | 'helperText', string>>;
+    options: SelectOption[] | SelectOptionGroup[];
+    value?: string | string[] | null;
+    defaultValue?: string | string[];
+    multiple?: boolean;
+    onChange?: (value: string | string[] | null) => void;
+    error?: boolean;
+    helperText?: string;
+    fullWidth?: boolean;
+    clearable?: boolean;
+    chipDisplay?: 'inside' | 'outside';
+    /** Props forwarded to each <Chip> in multi-select mode */
+    chipProps?: SelectChipProps;
+    required?: boolean;
+}
+
+export declare type ShadowTokens = {
+    '--shadow-light': string;
+    '--shadow-card': string;
+    '--shadow-card-elevated': string;
+    '--shadow-card-hover': string;
+    '--shadow-medium': string;
+    '--shadow-heavy': string;
+    '--shadow-avatar': string;
+    '--shadow-badge': string;
+    '--shadow-primary-glow': string;
+    '--shadow-primary-glow-strong': string;
+};
+
+export declare interface ShowToastOptions {
+    type?: ToastType;
+    message: React.ReactNode;
+    title?: string;
+    /** Auto-dismiss delay in ms. Pass 0 to keep open until dismissed manually. */
+    duration?: number;
+    icon?: React.ReactNode;
+}
+
+export declare const Sidebar: default_2.FC<SidebarProps>;
+
+export declare interface SidebarProps {
+    /** Navigation items */
+    items: NavItem[];
+    /** Controlled collapsed state */
+    collapsed?: boolean;
+    /** Uncontrolled initial collapsed state */
+    defaultCollapsed?: boolean;
+    /** Called when collapsed state changes */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Controls mobile drawer visibility */
+    mobileOpen?: boolean;
+    /** Called when mobile drawer should close */
+    onMobileClose?: () => void;
+    /** Logo / brand area at the top — custom ReactNode, replaces logoIcon + logoTitle */
+    logo?: default_2.ReactNode;
+    /** Project icon shown in the header */
+    logoIcon?: default_2.ReactNode;
+    /** Project / app name shown next to the icon, hidden when collapsed */
+    logoTitle?: string;
+    /**
+     * Custom footer slot. When provided, replaces the built-in
+     * user-info / theme-toggle / logout row entirely.
+     */
+    footer?: default_2.ReactNode;
+    /** Logged-in user info shown in the footer */
+    user?: SidebarUser;
+    /** Called when the logout button is clicked */
+    onLogout?: () => void;
+    /** Called when the login button is clicked (shown only when user is falsy) */
+    onLogin?: () => void;
+    /** Current theme — drives the Sun/Moon icon */
+    theme?: 'light' | 'dark';
+    /** Called when the theme toggle button is clicked */
+    onThemeToggle?: () => void;
+    /** ID of the currently active nav item. Wins over `activePath` if both are set. */
+    activeItemId?: string;
+    /**
+     * Convenience: instead of computing `activeItemId` yourself, pass the current
+     * pathname and the Sidebar will resolve the deepest-matching item. Ignored
+     * when `activeItemId` is provided.
+     */
+    activePath?: string;
+    /** Called when a nav item is clicked */
+    onItemClick?: (item: NavItem) => void;
+    /**
+     * Controls what happens when clicking a nav item that has `children`.
+     * - `accordion`: click toggles expand/collapse (default, current behavior)
+     * - `navigate`: click triggers navigation (via `path`/`onItemClick`), chevron toggles expand/collapse
+     */
+    parentItemBehavior?: 'accordion' | 'navigate';
+    /** Extra CSS class on the root aside */
+    sx?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare interface SidebarUser {
+    name?: string;
+    email?: string;
+    /** URL to avatar image */
+    avatar?: string;
+    roles?: string[];
+}
+
+export declare type SingleGradientVariant = `${GradientColorType}-${GradientDirection}`;
+
+export declare type SpacingTokens = {
+    '--space-xs': string;
+    '--space-sm': string;
+    '--space-md': string;
+    '--space-lg': string;
+    '--space-xl': string;
+    '--space-2xl': string;
+    '--space-3xl': string;
+};
+
+export declare const Spinner: default_2.FC<SpinnerProps>;
+
+export declare interface SpinnerProps {
+    /** Spinner size — applies to inline variant only */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Stroke colour.
+     * Use `'inherit'` when placing the spinner inside coloured surfaces (e.g. a
+     * filled button) — the spinner will then take its colour from the parent's
+     * text colour via `currentColor` and match the surrounding content.
+     */
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'inherit';
+    /**
+     * Render mode.
+     * - 'inline' (default): plain rotating ring, sized by `size`
+     * - 'page': portalled full-viewport overlay with backdrop and a centered large spinner
+     */
+    variant?: 'inline' | 'page';
+    /** Accessible label. Defaults to "Loading". */
+    label?: string;
+    /** Extra utility classes appended to the root */
+    sx?: string;
+    /** Inline styles applied to the root */
+    style?: default_2.CSSProperties;
+}
+
+export declare const Tab: default_2.FC<TabProps>;
+
+export declare function Table<T>({ columns, data, isLoading, hasBorder, hasRowDividers, hasColumnDividers, isStriped, size, variant, color, radius, visibleColumns, stickyColumns, columnMenu, enableColumnMenu, defaultStickyColumns, defaultHiddenColumns, columnOrder, defaultColumnOrder, onStickyColumnsChange, onHiddenColumnsChange, onColumnOrderChange, columnMenuLabels, columnMenuDefaults, sorting, onSort, footer, onRowClick, rowKey, minWidth, height, maxHeight, stickyHeaderOffset, stickyFooterOffset, emptyState, loadingState, sx, style, }: TableProps<T>): JSX.Element;
+
+export declare namespace Table {
+    var displayName: string;
+}
+
+export declare type TableAlign = 'left' | 'center' | 'right';
+
+export declare interface TableColumn<T> {
+    /** Unique column identifier */
+    key: string;
+    /** Header label */
+    label: default_2.ReactNode;
+    /** Custom cell renderer; defaults to `row[key]` */
+    render?: (row: T, rowIndex: number) => default_2.ReactNode;
+    /** Toggle sorting (only active when `onSort` is provided) */
+    sortable?: boolean;
+    /** Cell + header alignment */
+    align?: TableAlign;
+    /** Allow body cell text to wrap (default: nowrap) */
+    wrap?: boolean;
+    /** Fixed CSS width — applied via <col> for stable column sizing */
+    width?: string | number;
+    /** Accessible header label */
+    ariaLabel?: string;
+    /** Lock the column as pinned: forces sticky regardless of state, and the
+     *  column menu's "Unpin column" / "Unpin all" actions skip it. */
+    alwaysPinned?: boolean;
+    /** Lock the column as visible: the column menu's "Hide column" action is
+     *  disabled, and controlled `visibleColumns[key] === false` is ignored. */
+    alwaysVisible?: boolean;
+}
+
+export declare interface TableProps<T> {
+    /** Column definitions in render order */
+    columns: TableColumn<T>[];
+    /** Row data */
+    data: T[];
+    /** Show loading state instead of rows */
+    isLoading?: boolean;
+    /** Outer border around the table (default `true`) */
+    hasBorder?: boolean;
+    /** Horizontal divider lines between rows (default `true`) */
+    hasRowDividers?: boolean;
+    /** Vertical divider lines between columns (default `false`) */
+    hasColumnDividers?: boolean;
+    /** Alternating row background (default `false`) */
+    isStriped?: boolean;
+    /** Row size scale */
+    size?: 'small' | 'medium' | 'large';
+    /** Visual style variant. `'filled'` (default) uses the palette `paper`
+     *  background under header/body/footer. `'ghost'` makes all surfaces
+     *  transparent and removes the outer border — the table reads as a thin
+     *  grid (header text, dividers, rows). Use ghost when the parent panel
+     *  already provides background and frame. */
+    variant?: 'filled' | 'ghost';
+    /** Semantic color preset — tints header / body / footer backgrounds via the
+     *  `--ui-table-*` CSS variables. `'default'` keeps the neutral palette
+     *  look. Cherry-pick individual vars via `style={{}}` to override. */
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    /** Border-radius preset for the table outer container. Default `'md'`. */
+    radius?: 'none' | 'sm' | 'md' | 'lg';
+    /** Hide columns by key — `false` removes the matching column.
+     *  Controlled. For uncontrolled state with the built-in column menu, use
+     *  `defaultHiddenColumns` + `columnMenu`. */
+    visibleColumns?: Record<string, boolean>;
+    /** Indices of columns pinned to the left (Excel-style frozen columns).
+     *  Controlled. Internally normalised to keys, so hiding columns later
+     *  does not shift the pin. For uncontrolled state with the built-in
+     *  column menu, use `defaultStickyColumns` + `columnMenu`. */
+    stickyColumns?: number[];
+    /** Enable the built-in column menu. Pass `true` (or omit the older
+     *  `enableColumnMenu`) to enable everything; pass an object to disable
+     *  individual capabilities (`{ pin, hide, reorder, manage }`). Default
+     *  `false`. The legacy `enableColumnMenu` boolean stays supported. */
+    columnMenu?: boolean | ColumnMenuConfig;
+    /** @deprecated use `columnMenu` instead. Kept for backwards-compat. */
+    enableColumnMenu?: boolean;
+    /** Initial pinned columns by `col.key` — uncontrolled state used by the
+     *  column menu when `stickyColumns` (controlled) is not provided. */
+    defaultStickyColumns?: string[];
+    /** Initial hidden columns by `col.key` — uncontrolled state used by the
+     *  column menu when `visibleColumns` (controlled) is not provided. */
+    defaultHiddenColumns?: string[];
+    /** Column order by `col.key`. Controlled. `alwaysPinned` columns are
+     *  always forced to the front in their natural definition order
+     *  regardless of what this array says (and don't appear in callback
+     *  output). Unknown / extra keys are tolerated. */
+    columnOrder?: string[];
+    /** Initial column order — uncontrolled state used by the column menu's
+     *  drag-and-drop when `columnOrder` (controlled) is not provided. */
+    defaultColumnOrder?: string[];
+    /** Called after the column menu changes the pinned set. Receives the
+     *  full next list of pinned keys (in column order). */
+    onStickyColumnsChange?: (keys: string[]) => void;
+    /** Called after the column menu changes the hidden set. Receives the
+     *  full next list of hidden keys. */
+    onHiddenColumnsChange?: (keys: string[]) => void;
+    /** Called after the user drags a column to a new position in the
+     *  Manage popover. Receives the full next list of keys in render order
+     *  (pinned block then unpinned block — `alwaysPinned` columns are NOT
+     *  included since their position is fixed). */
+    onColumnOrderChange?: (keys: string[]) => void;
+    /** Override built-in menu labels (i18n). All optional. */
+    columnMenuLabels?: ColumnMenuLabels;
+    /** Snapshot used by the Manage popover's `Reset` action. Falls back to
+     *  `defaultStickyColumns` / `defaultHiddenColumns` / `defaultColumnOrder`
+     *  when the table is uncontrolled. When none are set, Reset clears all. */
+    columnMenuDefaults?: ColumnMenuDefaults;
+    /** Current sort state (controlled) */
+    sorting?: TableSorting;
+    /** Called when a sortable header is clicked */
+    onSort?: (columnKey: string) => void;
+    /** Footer slot — typically a `<Pagination>`, but accepts any node (bulk
+     *  actions toolbar, summary, etc.). The consumer owns the state, so any
+     *  pagination configuration / feature toggle is set on the node directly. */
+    footer?: default_2.ReactNode;
+    /** Row click handler — makes rows focusable + clickable */
+    onRowClick?: (row: T, rowIndex: number) => void;
+    /** Stable row key (defaults to row index) */
+    rowKey?: (row: T, rowIndex: number) => string | number;
+    /** Minimum table width — drives horizontal scroll inside the viewport */
+    minWidth?: string | number;
+    /** Viewport explicit height (overrides `maxHeight`) */
+    height?: string | number;
+    /** Viewport max-height — drives vertical scroll inside the viewport.
+     *  Unset by default: the table grows with its content and the page scrolls.
+     *  Pass an explicit value (e.g. `'70vh'`) to confine the body to a scrollable
+     *  region. */
+    maxHeight?: string | number;
+    /** When set, the table's header is replicated as a fixed overlay pinned to
+     *  the browser viewport at this offset (px) from the top whenever the
+     *  table's own header has scrolled out of view. Use this when the page
+     *  itself scrolls vertically (rather than the table's own viewport).
+     *  Setting this prop disables the default internal vertical scroll
+     *  (`maxHeight` is ignored). Horizontal scroll inside the table viewport
+     *  is preserved and synchronised with the overlay. */
+    stickyHeaderOffset?: number;
+    /** When set, the table's footer is replicated as a fixed overlay pinned to
+     *  the browser viewport at this offset (px) from the bottom whenever the
+     *  original footer is below the visible area. Requires `footer` to be set. */
+    stickyFooterOffset?: number;
+    /** Empty state node */
+    emptyState?: default_2.ReactNode;
+    /** Loading state node */
+    loadingState?: default_2.ReactNode;
+    /** Extra CSS classes on the root element */
+    sx?: string;
+    /** Inline styles on the root element */
+    style?: default_2.CSSProperties;
+}
+
+export declare interface TableSorting {
+    sort_by: string;
+    sort_order: TableSortOrder;
+}
+
+export declare type TableSortOrder = 'ASC' | 'DESC';
+
+export declare const TabList: default_2.FC<TabListProps>;
+
+export declare interface TabListProps {
+    /** Accessible label for the tablist — read by screen readers */
+    'aria-label'?: string;
+    /** id of an element that labels the tablist */
+    'aria-labelledby'?: string;
+    children: default_2.ReactNode;
+    sx?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare const TabPanel: default_2.FC<TabPanelProps>;
+
+export declare interface TabPanelProps {
+    /** Value identifying this panel — must match the corresponding `<Tab value>` */
+    value: string;
+    /**
+     * Render the panel even when inactive (keeps internal state mounted) and just
+     * hide it with `hidden`. Default `false` — inactive panels are unmounted.
+     */
+    keepMounted?: boolean;
+    children: default_2.ReactNode;
+    sx?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare interface TabProps {
+    /** Value identifying this tab — must match the corresponding `<TabPanel value>` */
+    value: string;
+    /** Disable this tab — keyboard navigation skips it */
+    isDisabled?: boolean;
+    /** Optional icon rendered before the label */
+    icon?: default_2.ReactNode;
+    /** Optional badge (number or short string) rendered after the label */
+    badge?: default_2.ReactNode;
+    children: default_2.ReactNode;
+    sx?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare const Tabs: default_2.FC<TabsProps>;
+
+declare type TabsColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+
+export declare interface TabsProps {
+    /** Currently active tab value (controlled) */
+    value?: string;
+    /** Initial active tab value (uncontrolled) */
+    defaultValue?: string;
+    /** Called when the active tab changes */
+    onChange?: (value: string) => void;
+    /** Visual variant of the tab triggers */
+    variant?: TabsVariant;
+    /** Size variant — controls font and trigger padding */
+    size?: TabsSize;
+    /** Active colour for indicator/pill */
+    color?: TabsColor;
+    /** Disable all tabs in the group */
+    isDisabled?: boolean;
+    children: default_2.ReactNode;
+    /** Extra utility classes on the root */
+    sx?: string;
+    /** Inline styles on the root */
+    style?: default_2.CSSProperties;
+}
+
+declare type TabsSize = 'small' | 'medium' | 'large';
+
+declare type TabsVariant = 'underline' | 'pills';
+
+export declare const Tags: default_2.FC<TagsProps>;
+
+declare type TagSize = 'small' | 'medium' | 'large';
+
+export declare interface TagsProps {
+    tags: Array<{
+        label: string;
+        department?: DepartmentType;
+    }>;
+    size?: TagSize;
+    sx?: string;
+}
+
+export declare interface TalkModeConfig {
+    isConnected: boolean;
+    isConnecting: boolean;
+    micDenied?: boolean;
+    agentName?: string;
+    onStart: () => void;
+    onEnd: () => void;
+    /** Chat messages shown in the built-in side panel */
+    messages?: TalkModeMessage[];
+    /** If provided, shows chat input bar in side panel */
+    onSendMessage?: (text: string) => void;
+    /** Quick question chips shown above the messages */
+    faqChips?: string[];
+    /** External mic mute state (if provided, panel mic button uses this) */
+    isMicMuted?: boolean;
+    /** Toggle mic mute (if provided, panel mic button calls this) */
+    onMicToggle?: () => void;
+    /** Share chat history callback — if provided, shows a share icon in the panel header */
+    onShareChat?: () => void;
+    /** Override: replaces built-in panel content (consuming app provides full UI) */
+    chatSlot?: default_2.ReactNode;
+}
+
+export declare interface TalkModeMessage {
+    role: 'user' | 'ai';
+    text: string;
+}
+
+export declare const TaskCard: default_2.FC<TaskCardProps>;
+
+export declare interface TaskCardAssignee {
+    user_id: number | string;
+    user?: {
+        fullName?: string;
+        name?: string;
+        avatar?: string;
+    };
+}
+
+export declare interface TaskCardDragHandleProps {
+    ref?: (el: HTMLElement | null) => void;
+    attributes?: Record<string, unknown>;
+    listeners?: Record<string, unknown>;
+}
+
+export declare interface TaskCardLabel {
+    id: number | string;
+    name: string;
+    color?: string;
+}
+
+declare interface TaskCardMilestone {
+    name: string;
+    color?: string | null;
+}
+
+export declare interface TaskCardProject {
+    name: string;
+    color?: string | null;
+}
+
+export declare interface TaskCardProps {
+    /** Task to render — accepts the wire shape from task-manager API */
+    task: TaskCardTask;
+    /** Called when the card body is clicked (skipped while pending or dragging) */
+    onClick?: () => void;
+    /**
+     * Optional visual status pill rendered top-right of the title. Consumer
+     * resolves color/label from their own statuses map (task-manager
+     * `GET /task-statuses`) and passes it in. When omitted, no pill is rendered —
+     * appropriate for Kanban views where the column already implies the status.
+     */
+    statusInfo?: TaskCardStatusInfo;
+    /**
+     * Format a due-date for display. Defaults to `dd.MM` in browser locale.
+     * Consumers with timezone requirements should pass their own formatter.
+     */
+    formatDate?: (date: Date | string) => string;
+    /** True while the card is being dragged elsewhere — root becomes invisible */
+    isDragging?: boolean;
+    /**
+     * dnd-kit-style handle props. Spread `ref`/`attributes`/`listeners` onto
+     * the root. When omitted, the card is not draggable.
+     */
+    dragHandleProps?: TaskCardDragHandleProps;
+    /** Extra utility classes appended to the root */
+    sx?: string;
+}
+
+declare interface TaskCardStatusInfo {
+    label: string;
+    color?: string;
+}
+
+/**
+ * Shape of a task as returned by the task-manager list endpoints
+ * (`GET /tasks`, `GET /projects/:id/tasks`, `GET /tasks/my`) — the "list"
+ * variant of `Task.toApiFormat` on the server. Detail-only fields (description,
+ * hours, metadata, audit fields, full milestone) are intentionally absent.
+ */
+export declare interface TaskCardTask {
+    id: number | string;
+    title: string;
+    priority?: 'urgent' | 'high' | 'medium' | 'low' | string;
+    start_date?: string | Date | null;
+    due_date?: string | Date | null;
+    project?: TaskCardProject | null;
+    /** Not returned by list endpoints; kept for detail-shape consumers */
+    milestone?: TaskCardMilestone | null;
+    assignees?: TaskCardAssignee[];
+    controllers?: TaskCardAssignee[];
+    labels?: TaskCardLabel[];
+    /** Task's status name — kept for legacy overdue-suppression fallback */
+    status?: string | null;
+    /** Preferred flag for "done": terminal status for top-level, `is_completed` for subtasks */
+    is_done?: boolean;
+    _commentCount?: number;
+    _attachmentCount?: number;
+    _subtaskCount?: number;
+    /** When provided, subtasks render as `done/total` */
+    _completedSubtaskCount?: number;
+    /** Number of open work sessions on this task — shows a pulsing Play badge */
+    _activeSessions?: number;
+    _pending?: boolean;
+}
+
+export declare const TextField: default_2.ForwardRefExoticComponent<TextFieldProps & default_2.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
+
+export declare interface TextFieldProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'size' | 'className'> {
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    startAdornment?: default_2.ReactNode;
+    endAdornment?: default_2.ReactNode;
+    fullWidth?: boolean;
+    size?: 'small' | 'normal' | 'large';
+    sx?: Partial<Record<'root' | 'wrapper' | 'input' | 'label' | 'helperText', string>>;
+}
+
+export declare type Theme = 'light' | 'dark';
+
+/**
+ * Helper type for theme overrides.
+ * Use this when creating a custom theme that only overrides specific tokens.
+ */
+export declare type ThemeOverrides = Partial<ThemeTokens>;
+
+/**
+ * All available design tokens in the UI-kit.
+ * Use Partial<ThemeTokens> when overriding only specific tokens.
+ *
+ * @example
+ * ```tsx
+ * const customTheme: Partial<ThemeTokens> = {
+ *   '--palette-primary-main': '#FF6B6B',
+ *   '--palette-secondary-main': '#4ECDC4',
+ *   '--font-family-base': 'Inter, sans-serif'
+ * };
+ * ```
+ */
+export declare type ThemeTokens = PaletteTokens & DepartmentTokens & LayoutTokens & SpacingTokens & FluidSpacingTokens & BreakpointTokens & TypographyTokens & ZIndexTokens & MotionTokens & ShadowTokens & RadiusTokens & GradientTokens & ComponentTokens;
+
+/**
+ * Inclusive min/max time. Omit a field for open-ended start/end.
+ * Pass `null` (where accepted) to indicate "no times available."
+ */
+export declare type TimeBounds = {
+    min?: TimeOfDay;
+    max?: TimeOfDay;
+};
+
+/**
+ * Pure time-math utilities shared by DatePicker (`showTime` mode) and TimePicker.
+ * No React, no DOM. Imported by both components.
+ */
+/** Clock time in local hours / minutes (0–23 / 0–59). */
+export declare type TimeOfDay = {
+    hour: number;
+    minute: number;
+};
+
+export declare const TimePicker: default_2.ForwardRefExoticComponent<TimePickerProps & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface TimePickerProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'className' | 'type'> {
+    /** 'single' selects one time, 'range' selects start + end. */
+    mode?: 'single' | 'range';
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    rangeValue?: TimeRange;
+    onRangeChange?: (range: TimeRange) => void;
+    /** 'input' renders a text field with a clock icon; 'icon' renders only the icon button. */
+    triggerVariant?: 'input' | 'icon';
+    /** Format using `HH` (00–23) and `mm` (00–59) tokens. Default `'HH:mm'`. */
+    format?: string;
+    placeholder?: string;
+    /**
+     * Minute step (`1` = every minute, `15` = quarter-hour grid, `60` = hourly).
+     * @default 1
+     */
+    timeStep?: number;
+    /**
+     * Inclusive min/max time. Same bounds apply to both ends in `range` mode;
+     * end is additionally clamped to be `>= start` after each change.
+     * Pass `null` to indicate no available times (picker shows empty state).
+     * Omit entirely for full 00:00–23:59 (subject to `timeStep`).
+     */
+    bounds?: TimeBounds | null;
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    size?: 'small' | 'normal' | 'large';
+    fullWidth?: boolean;
+    /** Custom node rendered inside the input wrapper, before the input. Ignored when `triggerVariant='icon'`. */
+    startAdornment?: default_2.ReactNode;
+    /** Custom node rendered between the input and the built-in clear/clock buttons. Ignored when `triggerVariant='icon'`. */
+    endAdornment?: default_2.ReactNode;
+    /** Extra CSS classes targeting individual parts. */
+    sx?: Partial<Record<'root' | 'wrapper' | 'input' | 'label' | 'helperText' | 'popup', string>>;
+    style?: default_2.CSSProperties;
+}
+
+export declare interface TimeRange {
+    start: Date | null;
+    end: Date | null;
+}
+
+export declare const Toast: default_2.FC<ToastProps>;
+
+export declare interface ToastContextValue {
+    /** Show a toast and return its id (useful for manual dismissal) */
+    showToast: (options: ShowToastOptions) => string;
+    /** Dismiss a single toast by id */
+    dismissToast: (id: string) => void;
+    /** Dismiss all toasts */
+    dismissAll: () => void;
+}
+
+export declare type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+
+export declare interface ToastProps {
+    /** Visual variant — controls colour and default icon */
+    type?: ToastType;
+    /** Body text or content node */
+    message: default_2.ReactNode;
+    /** Optional bold title rendered above the message */
+    title?: string;
+    /** Override the default type icon */
+    icon?: default_2.ReactNode;
+    /** Called when the user clicks the close button. Omit to hide the button. */
+    onClose?: () => void;
+    /**
+     * If > 0, renders a thin progress bar at the bottom that animates from full to empty
+     * over this many ms — visual countdown until auto-dismiss. Omit or pass 0 to hide.
+     */
+    duration?: number;
+    /** Extra utility classes on the root */
+    sx?: string;
+    /** Inline styles on the root */
+    style?: default_2.CSSProperties;
+}
+
+export declare const ToastProvider: default_2.FC<ToastProviderProps>;
+
+export declare interface ToastProviderProps {
+    children: default_2.ReactNode;
+    /** Container position on screen. Default: 'top-right' */
+    position?: ToastPosition;
+    /** Default auto-dismiss in ms. Default: 5000 */
+    defaultDuration?: number;
+    /** Optional portal container id */
+    portalContainerId?: string;
+}
+
+export declare type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+export declare const Toggle: default_2.FC<ToggleProps>;
+
+export declare interface ToggleProps {
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Uncontrolled initial state */
+    defaultChecked?: boolean;
+    /** Called when the user toggles the switch */
+    onChange?: (checked: boolean, event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    /** Label rendered next to the switch */
+    label?: default_2.ReactNode;
+    /** Position of the label relative to the switch */
+    labelPosition?: 'start' | 'end';
+    /** Colour applied to the ON state */
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    /** Switch size */
+    size?: 'small' | 'medium' | 'large';
+    /** Disable all interaction */
+    isDisabled?: boolean;
+    /** name attribute forwarded to the native input */
+    name?: string;
+    /** value attribute forwarded to the native input */
+    value?: string;
+    /** id forwarded to the native input (label htmlFor uses this) */
+    id?: string;
+    /** Extra utility classes on the root */
+    sx?: string;
+    /** Inline styles on the root */
+    style?: default_2.CSSProperties;
+}
+
+/**
+ * Token names grouped by category for easier access.
+ */
+export declare const TOKEN_CATEGORIES: Record<TokenCategory, readonly string[]>;
+
+/**
+ * Token category names for organization and validation.
+ */
+export declare type TokenCategory = 'palette' | 'department' | 'layout' | 'spacing' | 'fluidSpacing' | 'breakpoint' | 'typography' | 'zIndex' | 'motion' | 'shadow' | 'radius' | 'gradient' | 'component';
+
+declare interface Tool {
+    id: string;
+    name: string;
+    icon?: string | null;
+}
+
+export declare const Tooltip: default_2.FC<TooltipProps>;
+
+export declare type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+
+export declare interface TooltipProps {
+    /** Content to display inside the tooltip */
+    title: default_2.ReactNode;
+    /** Placement of the tooltip relative to the child element */
+    placement?: TooltipPlacement;
+    /** Whether to show a directional arrow */
+    arrow?: boolean;
+    /** Single child element that triggers the tooltip */
+    children: default_2.ReactElement;
+    /** Additional CSS class on the wrapper span */
+    sx?: string;
+}
+
+export declare type TypographyTokens = {
+    '--font-family-base': string;
+    '--font-weight-regular': string | number;
+    '--font-weight-medium': string | number;
+    '--font-weight-semibold': string | number;
+    '--h1-font-size': string;
+    '--h1-font-line-height': string;
+    '--h2-font-size': string;
+    '--h2-font-line-height': string;
+    '--h3-font-size': string;
+    '--h3-font-line-height': string;
+    '--h4-font-size': string;
+    '--h4-font-line-height': string;
+    '--h5-font-size': string;
+    '--h5-font-line-height': string;
+    '--body-regular-font-size': string;
+    '--body-regular-font-line-height': string;
+    '--body-medium-font-size': string;
+    '--body-medium-font-line-height': string;
+    '--body-small-font-size': string;
+    '--body-small-font-line-height': string;
+    '--caption-font-size': string;
+    '--caption-font-line-height': string;
+};
+
+export declare const useConfirm: () => ConfirmContextValue;
+
+/**
+ * Hook to handle Escape key press
+ * @param enabled - Whether the escape key handler is active
+ * @param onEscape - Callback function to call when Escape is pressed
+ */
+export declare function useEscapeKey({ enabled, onEscape }: UseEscapeKeyOptions): void;
+
+export declare interface UseEscapeKeyOptions {
+    enabled: boolean;
+    onEscape: () => void;
+}
+
+/**
+ * Positions a floating element (menu, listbox, popover) relative to a trigger,
+ * using `position: fixed` coordinates computed from the trigger's viewport rect.
+ *
+ * Listens to `scroll` (capture, catches nested scroll containers too) and
+ * `resize` to keep the floating element attached to the trigger while the user
+ * scrolls the page or a nested overflow container.
+ *
+ * Applies flip logic on the vertical axis when there isn't enough room on the
+ * preferred side.
+ */
+export declare function useFloatingPosition(options: UseFloatingPositionOptions): FloatingPositionResult;
+
+export declare interface UseFloatingPositionOptions {
+    /** Ref to the anchor element (usually the trigger button/wrapper). */
+    triggerRef: RefObject<HTMLElement | null>;
+    /** Ref to the floating element — used to measure its height for flip logic. */
+    floatingRef: RefObject<HTMLElement | null>;
+    /** Whether the floating element is currently rendered. */
+    open: boolean;
+    /** Placement relative to trigger (default: 'bottom-start'). Vertical side may flip if there's not enough room. */
+    placement?: FloatingPlacement;
+    /** Gap in px between trigger and floating element (default: 8). */
+    gap?: number;
+    /** Hard cap for popup max-height when computing available space (default: 320). */
+    maxHeight?: number;
+    /** When true, floating element width is set to the trigger's width (like Select). */
+    matchWidth?: boolean;
+    /** Optional z-index override. Falls back to `var(--z-index-dropdown, 1000)`. */
+    zIndex?: number | string;
+}
+
+/**
+ * Hook to trap focus within a container element
+ * Useful for modals, drawers, and other overlay components to meet accessibility requirements
+ *
+ * @param options - Configuration options for the focus trap
+ * @param options.enabled - Whether the focus trap is active
+ * @param options.containerRef - Reference to the container element to trap focus within
+ * @param options.initialFocusRef - Optional element to focus initially
+ * @param options.returnFocusOnCleanup - Whether to return focus to the previously focused element on cleanup (default: true)
+ */
+export declare function useFocusTrap({ enabled, containerRef, initialFocusRef, returnFocusOnCleanup, }: UseFocusTrapOptions): void;
+
+export declare interface UseFocusTrapOptions {
+    enabled: boolean;
+    containerRef: React.RefObject<HTMLElement | null>;
+    initialFocusRef?: React.RefObject<HTMLElement | null>;
+    returnFocusOnCleanup?: boolean;
+}
+
+/**
+ * Hook to lock page scroll when enabled
+ * Prevents scrolling on both body and html elements, useful for modals and drawers
+ * @param enabled - Whether scroll should be locked
+ * @param mediaQuery - Optional media query to restrict locking to specific viewports
+ */
+export declare function useLockScroll({ enabled, mediaQuery }: UseLockScrollOptions): void;
+
+export declare interface UseLockScrollOptions {
+    enabled: boolean;
+    /** Optional media query — lock only when it matches, e.g. '(max-width: 767px)' */
+    mediaQuery?: string;
+}
+
+/**
+ * Hook to create and manage a portal container element
+ * @param options - Configuration options for the portal
+ * @param options.containerId - Custom ID for the portal container
+ * @param options.containerElement - Existing HTML element to use as container
+ * @returns The portal container element, or null if document is not available (SSR)
+ */
+export declare function usePortal(options?: UsePortalOptions): HTMLElement | null;
+
+export declare interface UsePortalOptions {
+    containerId?: string;
+    containerElement?: HTMLElement;
+}
+
+/**
+ * Manages light/dark theme.
+ * - Reads from localStorage (`ui-kit-theme`) on init
+ * - Falls back to system preference
+ * - Syncs to `document.documentElement.dataset.theme`
+ * - Persists changes to localStorage
+ */
+export declare function useTheme(): UseThemeReturn;
+
+export declare interface UseThemeReturn {
+    theme: Theme;
+    isDark: boolean;
+    toggleTheme: () => void;
+    setTheme: (theme: Theme) => void;
+}
+
+export declare const useToast: () => ToastContextValue;
+
+export declare interface VideoAuthor {
+    name: string;
+    initials: string;
+    avatarColor?: string;
+    department?: DepartmentType;
+}
+
+export declare const VideoCard: default_2.FC<VideoCardProps>;
+
+export declare interface VideoCardProps {
+    videoUrl: string;
+    thumbnailUrl?: string;
+    title: string;
+    author: VideoAuthor;
+    description: string;
+    tags: VideoTag[];
+    duration?: string;
+    views?: string;
+    publishedAt?: string;
+    isInPlaylist?: boolean;
+    onClick?: () => void;
+    sx?: string;
+}
+
+export declare interface VideoTag {
+    label: string;
+    department?: DepartmentType;
+}
+
+export declare type ZIndexTokens = {
+    '--z-index-dropdown': string | number;
+    '--z-index-sticky': string | number;
+    '--z-index-fixed': string | number;
+    '--z-index-backdrop': string | number;
+    '--z-index-modal': string | number;
+    '--z-index-popover': string | number;
+    '--z-index-tooltip': string | number;
+};
+
+export { }
+
+
+export declare namespace Table {
+    var displayName: string;
+}
+