@kenlo/kdls-design-system 2.0.0

package/dist/components/Popover/Popover.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { InputFeedback } from '../Input/Input';
+import './Radio.css';
+export type RadioSize = 'sm' | 'md';
+/**
+ * @internal
+ * Visual primitive for a single option — used only by RadioGroup (not exported publicly).
+ * The public API is RadioGroup (options). All props here are defined by the group.
+ */
+export interface RadioProps {
+    value: string;
+    label: string;
+    hint?: string;
+    size?: RadioSize;
+    checked?: boolean;
+    disabled?: boolean;
+    feedback?: InputFeedback;
+    onChange?: () => void;
+}
+export declare const Radio: React.FC<RadioProps>;
+export default Radio;

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

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export type { RadioProps, RadioSize } from './Radio';

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { InputFeedback } from '../Input/Input';
+import type { RadioSize } from '../Radio/Radio';
+import './RadioGroup.css';
+export type { RadioSize };
+export interface RadioOption {
+    /** Option value — what RadioGroup returns in onChange and stores as selected */
+    value: string;
+    /** Text shown next to the circle */
+    label: string;
+    /** Helper text shown below this option's label */
+    hint?: string;
+    /** Disables only this option */
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    /** Group's options — each becomes a radio */
+    options: RadioOption[];
+    /** Group label shown above the options — anchor for the required asterisk */
+    label?: string;
+    /** Size applied to all radios in the group */
+    size?: RadioSize;
+    /** Selected value (controlled) — the active option's value. Use with onChange */
+    value?: string;
+    /** Initial selected value (uncontrolled) — ignored when value is passed */
+    defaultValue?: string;
+    /** Callback when the selection changes — receives the chosen option's value */
+    onChange?: (value: string) => void;
+    /** Disables all radios in the group */
+    disabled?: boolean;
+    /** Validation visual state — cascades to the radios and colors the hint */
+    feedback?: InputFeedback;
+    /** Message shown below the options — hint or error (color follows the feedback) */
+    hint?: string;
+    /** Field name for native form submission — renders an input[type=hidden] with the selected value */
+    name?: string;
+    /** Marks the field as required — asterisk on the label and aria-required on the group */
+    required?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default RadioGroup;

package/dist/components/RadioGroup/RadioGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup';
+export type { RadioGroupProps, RadioOption, RadioSize } from './RadioGroup';

package/dist/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import './SearchBar.css';
+export interface SearchBarProps {
+    /** Controlled field value — the component is controlled */
+    value: string;
+    /** Called on every text change — updates the external state (required) */
+    onChange: (value: string) => void;
+    /** Floating label (size 'lg') or placeholder text (size 'md'/'sm') */
+    label?: string;
+    /** Height: 'lg' = floating label · 'md' and 'sm' = label as placeholder */
+    size?: 'sm' | 'md' | 'lg';
+    /** 'fill' = 100% of the container · 'hug' = fits content */
+    width?: 'hug' | 'fill';
+    /** Suggestions shown in the panel's "Suggestions" section on focus */
+    suggestions?: string[];
+    /** Previous searches in the panel's "Recent" section (clock icon) */
+    recentSearches?: string[];
+    /** Called when pressing Enter — triggers the search */
+    onSearch?: (value: string) => void;
+    /** Called when selecting a suggestion or recent search from the panel */
+    onSuggestionSelect?: (value: string) => void;
+    /** Called on every keystroke — fires after internal Enter/Escape handling */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Shows a spinner and blocks typing while the async search loads */
+    isLoading?: boolean;
+    /** Disables the field and blocks typing */
+    disabled?: boolean;
+    /** Additional CSS class on the root element */
+    className?: string;
+}
+export declare function SearchBar({ value, onChange, label, size, width, suggestions, recentSearches, onSearch, onSuggestionSelect, onKeyDown, isLoading, disabled, className, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchBar/SearchBar.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+import { IconElement } from '../Icon/Icon';
+import './Select.css';
+import '../../foundations/Scrollbar/Scrollbar.css';
+import { InputFeedback } from '../Input/Input';
+export interface SelectFieldNames {
+    label?: string;
+    value?: string;
+    /** Field of the option object that holds the icon (an IconElement, e.g. <DocumentPdfRegular />). Default: 'icon' */
+    icon?: string;
+}
+export interface SelectLabeledValue {
+    label: string;
+    value: string;
+}
+type RawOption = Record<string, any>;
+type SelectValue = string | string[] | SelectLabeledValue | SelectLabeledValue[] | null;
+interface SelectBase {
+    /** List of options — flat or grouped (item with `options[]`) */
+    options: RawOption[];
+    /** Maps the label/value fields when the API uses different names */
+    fieldNames?: SelectFieldNames;
+    /** Selected value (controlled). Single: string | null. Multiple: string[]. With labelInValue: equivalent SelectLabeledValue */
+    value?: SelectValue;
+    /** Initial value (uncontrolled) — same shape as value; ignored when value is passed */
+    defaultValue?: SelectValue;
+    /** Callback on select or clear. Receives the same shape as value */
+    onChange?: (value: SelectValue) => void;
+    /** When true, onChange returns { label, value } instead of just the value */
+    labelInValue?: boolean;
+    /** Enables multiple selection */
+    multiple?: boolean;
+    /** Shows a search field inside the menu */
+    searchable?: boolean;
+    /** Search field placeholder */
+    searchPlaceholder?: string;
+    /** When false, disables the frontend filter — dev controls the options via onSearch + options */
+    filterOption?: boolean;
+    /** Callback fired on every change in the search field */
+    onSearch?: (query: string) => void;
+    /** Shows a loading state in the menu — use with server-side search */
+    loading?: boolean;
+    /** Callback fired when scrolling the list — use for infinite scroll */
+    onMenuScroll?: (e: React.UIEvent<HTMLUListElement>) => void;
+    /** Shows a "Select all" checkbox as the list's first row — requires multiple */
+    showSelectAll?: boolean;
+    /** Shows a spinner on the trigger and blocks interaction — use while the initial options are loading from the API */
+    isLoading?: boolean;
+    /** Disables interaction and applies disabled visual style */
+    disabled?: boolean;
+    /** Shows a clear button when a value is selected — default true */
+    clearable?: boolean;
+    /** Controlled open state — overrides the internal toggle */
+    open?: boolean;
+    /** Trigger element ID — auto-generated when omitted */
+    id?: string;
+    /** Field name for native form submission */
+    name?: string;
+    /** Additional CSS classes applied to the trigger (pill or input) */
+    triggerClassName?: string;
+    /** Additional CSS classes applied to the menu */
+    menuClassName?: string;
+    /** Additional CSS classes applied to the wrapper */
+    className?: string;
+    /** Maximum menu height in pixels (plain number, no unit) — default 360 */
+    menuMaxHeight?: number;
+}
+/**
+ * Width properties — menuMaxWidth and triggerMaxWidth only take effect with width="hug".
+ * Passing these props with width="fill" is a type error.
+ */
+type SelectWidthProps = {
+    width?: 'hug';
+    triggerMaxWidth?: number;
+    menuMaxWidth?: number;
+} | {
+    width: 'fill';
+    triggerMaxWidth?: never;
+    menuMaxWidth?: never;
+};
+/**
+ * Form validation props — only exist on trigger="input".
+ * On trigger="pill" they're forbidden (never) → using feedback/hint/required
+ * with pill is a type error.
+ */
+interface SelectFormProps {
+    /** Validation visual state — input trigger only */
+    feedback?: InputFeedback;
+    /** Message shown below the input trigger */
+    hint?: string;
+    /** Marks the field as required — asterisk on the label and aria-required. Input trigger only */
+    required?: boolean;
+}
+type SelectNoFormProps = {
+    [K in keyof SelectFormProps]?: never;
+};
+/** trigger="input" — label required, iconLeft optional, form props allowed */
+export type SelectInputProps = SelectBase & SelectWidthProps & SelectFormProps & {
+    trigger: 'input';
+    label: string;
+    iconLeft?: IconElement;
+};
+/** trigger="pill" with label — iconLeft optional, no form props */
+export type SelectPillWithLabel = SelectBase & SelectWidthProps & SelectNoFormProps & {
+    trigger?: 'pill';
+    label: string;
+    iconLeft?: IconElement;
+};
+/** trigger="pill" with icon — label optional, no form props */
+export type SelectPillWithIcon = SelectBase & SelectWidthProps & SelectNoFormProps & {
+    trigger?: 'pill';
+    label?: string;
+    iconLeft: IconElement;
+};
+export type SelectProps = SelectInputProps | SelectPillWithLabel | SelectPillWithIcon;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
+export default Select;

package/dist/components/Select/Select.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './Separator.css';
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export interface SeparatorProps {
+    /** Separator direction: horizontal = full-width line | vertical = full-height line */
+    orientation?: SeparatorOrientation;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Separator: React.FC<SeparatorProps>;
+export default Separator;

package/dist/components/Separator/Separator.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { Separator, type SeparatorProps, type SeparatorOrientation } from './Separator';
+export { default } from './Separator';

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import './Skeleton.css';
+export interface SkeletonProps {
+    /** Real content, shown when loading is false. Without children, the skeleton works on its own as a placeholder — useful in lists before data arrives */
+    children?: React.ReactNode;
+    /** Number of lines in the paragraph block, below the title */
+    rows?: number;
+    /** Shows an avatar circle to the left of the title — always round, no shape option */
+    avatar?: boolean;
+    /** Shows the title line, wider and taller than the paragraph lines */
+    title?: boolean;
+    /** Turns on the shimmer animation sweeping across the blocks. Without it, the blocks stay static */
+    active?: boolean;
+    /** Shows the skeleton in place of children. false displays children normally */
+    loading?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface SkeletonAvatarProps {
+    /** Circle size — same scale as the real Avatar */
+    size?: 'sm' | 'md' | 'lg';
+    /** Turns on the shimmer animation */
+    active?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface SkeletonButtonProps {
+    /** Block height — sm = 40px (same as Button variant="pill"), md = 48px (default, same as the default Button), lg = 56px (same as Button lg) */
+    size?: 'sm' | 'md' | 'lg';
+    /** Turns on the shimmer animation */
+    active?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface SkeletonInputProps {
+    /** Block height — sm = 40px, md = 48px, lg = 56px (default, same as the real Input, which has no size prop) */
+    size?: 'sm' | 'md' | 'lg';
+    /** Turns on the shimmer animation */
+    active?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface SkeletonImageProps {
+    /** Fills 100% of the parent's width and height, instead of the default fixed size — use when the real container (e.g. a Card's cover) has a variable size */
+    fill?: boolean;
+    /** Turns on the shimmer animation */
+    active?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const SkeletonAvatar: React.FC<SkeletonAvatarProps>;
+declare const SkeletonButton: React.FC<SkeletonButtonProps>;
+declare const SkeletonInput: React.FC<SkeletonInputProps>;
+declare const SkeletonImage: React.FC<SkeletonImageProps>;
+export interface SkeletonComponent extends React.FC<SkeletonProps> {
+    Avatar: typeof SkeletonAvatar;
+    Button: typeof SkeletonButton;
+    Input: typeof SkeletonInput;
+    Image: typeof SkeletonImage;
+}
+declare const Skeleton: SkeletonComponent;
+export { Skeleton };

package/dist/components/Skeleton/Skeleton.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './Spinner.css';
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export type SpinnerVariant = 'gradient' | 'solid';
+export interface SpinnerProps {
+    /** Arc style: solid scheme color or animated gradient (scheme→secondary→tertiary). Default: 'solid' */
+    variant?: SpinnerVariant;
+    /** Spinner size: 'sm' = 24px · 'md' = 40px · 'lg' = 56px. Default: 'md' */
+    size?: SpinnerSize;
+    /** When true, stops the animation and shows a filled circle with a checkmark — use to confirm an action's completion */
+    done?: boolean;
+    /** Fired once when the completion (done) animation finishes playing — use to hide the spinner or advance to the next step */
+    onComplete?: () => void;
+    /** When true, shows the spinner centered in a fixed overlay covering the whole screen — use to block the UI during a global loading state */
+    fullscreen?: boolean;
+    /** Additional CSS class applied to the root element */
+    className?: string;
+}
+export declare const Spinner: React.FC<SpinnerProps>;
+export default Spinner;

package/dist/components/Spinner/Spinner.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/StatCard/StatCard.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IconElement } from '../Icon/Icon';
+import './StatCard.css';
+export interface StatCardProps {
+    /** Numeric value or highlighted text — the card's big number */
+    value: string | number;
+    /** Descriptive label shown below the value */
+    label: string;
+    /** Icon (24px) shown next to the value */
+    icon?: IconElement;
+    /** Card width — 'hug' hugs the content (clamped 200–240px), 'fill' takes the container's width */
+    width?: 'hug' | 'fill';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const StatCard: React.FC<StatCardProps>;
+export interface StatCardGroupProps {
+    /** The group's StatCards — as many as you want; they adjust per row (2 per row on mobile) */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const StatCardGroup: React.FC<StatCardGroupProps>;

package/dist/components/StatCard/StatCard.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import './Switch.css';
+export type SwitchSize = 'sm' | 'md';
+export interface SwitchProps {
+    /** Text associated with the switch */
+    label?: string;
+    /** Switch's visual size */
+    size?: SwitchSize;
+    /** Width: 'hug' = fits content | 'fill' = 100% */
+    width?: 'hug' | 'fill';
+    /** Helper text shown below the label */
+    hint?: string;
+    /** On/off state (controlled) — use with onChange */
+    checked?: boolean;
+    /** Initial state (uncontrolled) — ignored when checked is passed */
+    defaultChecked?: boolean;
+    /** Callback fired when toggling — receives the new state */
+    onChange?: (value: boolean) => void;
+    /** Shows a wrapper with padding and border */
+    container?: boolean;
+    /** Disables interaction and applies disabled visual style */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Switch: React.FC<SwitchProps>;
+export default Switch;

package/dist/components/Switch/Switch.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps, SwitchSize } from './Switch';

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import './Table.css';
+import '../../foundations/Scrollbar/Scrollbar.css';
+import { type PaginationProps } from '../Pagination';
+export interface TableColumn<T = Record<string, unknown>> {
+    /** Unique key — matches the row object's property and identifies the column */
+    key: string;
+    /** Title shown in the header. '' or omitted shows no visible label — the column stays aligned with the grid */
+    title?: string;
+    /** Fixed column width — number (px) or any grid-track value ('120px', '1fr'). Don't combine with minWidth/maxWidth */
+    width?: number | string;
+    /** Floor of the flexible column — ignored when width is set */
+    minWidth?: number;
+    /** Ceiling of the flexible column — ignored when width is set */
+    maxWidth?: number;
+    /** Content alignment — omitted = start (default) */
+    align?: 'center' | 'end';
+    /** Truncates the content to one line with ellipsis and shows the full value in a Tooltip on hover */
+    ellipsis?: boolean;
+    /** true = sortable, sorting done by the backend (the component only reports state via onSortChange, doesn't reorder `rows`) · function = sorts on the frontend using this comparator — handle dates and numbers inside it, don't let the component guess the type */
+    sortable?: boolean | ((a: T, b: T) => number);
+    /** Custom cell rendering — when omitted, displays row[key] directly */
+    render?: (value: unknown, row: T, index: number) => React.ReactNode;
+}
+export interface TableSort {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+export interface TableProps<T extends Record<string, unknown> = Record<string, unknown>> {
+    /** Column definitions */
+    columns: TableColumn<T>[];
+    /** Row data */
+    rows: T[];
+    /**
+     * Shows a 1px neutral-20 border around the component. `false` by default.
+     * Use `true` when the surrounding background matches the Table's background (--color-neutral-00) —
+     * the border is what distinguishes the two.
+     */
+    bordered?: boolean;
+    /** Header with title and/or filters, rendered inside the Table itself, above the list — use Table.Header */
+    header?: React.ReactNode;
+    /** Field used as each row's unique identifier */
+    keyField?: string;
+    /** Enables multi-select checkbox on all rows */
+    rowSelection?: boolean;
+    /** Set of selected ids — controlled mode */
+    selectedIds?: string[];
+    /** Fired when checking or unchecking rows */
+    onSelectionChange?: (ids: string[]) => void;
+    /** Controlled sorting — { key, direction } or null (no sorting) */
+    sort?: TableSort | null;
+    /** Initial sorting — uncontrolled mode */
+    defaultSort?: TableSort | null;
+    /** Fired when clicking a sortable header, with the new state (or null when returning to the neutral state) */
+    onSortChange?: (sort: TableSort | null) => void;
+    /** Makes the entire row clickable (cursor, focus, and highlight) — like Card's hoverable. No effect without onRowClick */
+    hoverable?: boolean;
+    /** Fired when clicking anywhere on the row that isn't an interactive element (button, link, checkbox) — use with hoverable */
+    onRowClick?: (row: T) => void;
+    /** Pagination config — passed straight through to the Pagination component, rendered below the list */
+    pagination?: Omit<PaginationProps, 'className'>;
+    className?: string;
+}
+export interface TableHeaderProps {
+    /** Title shown on the left */
+    title?: React.ReactNode;
+    /** Filters and other controls — always right-aligned. When it doesn't fit next to the title, wraps to a line below it */
+    filters?: React.ReactNode;
+    /** Extra free-form content, rendered after title/filters */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const TableHeader: React.FC<TableHeaderProps>;
+export interface TableCellProps {
+    /** Primary line */
+    primary?: React.ReactNode;
+    /** Secondary / complement line */
+    secondary?: React.ReactNode;
+    /** Highlight secondary as alert (error color) */
+    alert?: boolean;
+}
+export declare const TableCell: React.FC<TableCellProps>;
+export interface TableComponent {
+    <T extends Record<string, unknown>>(props: TableProps<T>): React.ReactElement;
+    Header: typeof TableHeader;
+}
+export declare const Table: TableComponent;

package/dist/components/Table/Table.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import './Text.css';
+export type TextVariant = 'displayLg' | 'displayMd' | 'displaySm' | 'titleLg' | 'titleMd' | 'titleSm' | 'bodyMd' | 'bodySm' | 'labelSemiBold' | 'labelRegular';
+export type TextColor = 'default' | 'inherit' | 'primary' | 'error' | 'success' | 'alert';
+export interface TextProps {
+    /** Displayed text content — free-form */
+    children: React.ReactNode;
+    /** Typographic style — brings font-size, line-height, and weight from the matching token */
+    variant?: TextVariant;
+    /** Rendered HTML tag (required) — the dev chooses the semantic element (h1..h6, p, span, label…). Doesn't change the style, only the DOM */
+    as: React.ElementType;
+    /** Text color (token). 'inherit' takes the parent's computed color — use when the real color is
+     *  decided by an ancestor (e.g. a component's own variant, like Alert's tinted surface).
+     *  'primary' follows the selected scheme/custom — automatically becomes a gradient when the active scheme is lya */
+    color?: TextColor;
+    /** Associates a <label> with its control by id — only meaningful when as="label" */
+    htmlFor?: string;
+    /** Element id — e.g. to be referenced by another element's aria-labelledby/aria-describedby */
+    id?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+export default Text;

package/dist/components/Text/Text.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/TextEditor/TextEditor.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './TextEditor.css';
+export interface TextEditorProps {
+    placeholder?: string;
+    defaultValue?: string;
+    onChange?: (html: string) => void;
+    minHeight?: number;
+    className?: string;
+}
+export declare const TextEditor: React.FC<TextEditorProps>;
+export default TextEditor;

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

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

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TooltipPosition } from '../Tooltip';
+import './Toast.css';
+export type ToastFeedback = 'neutral' | 'success' | 'alert' | 'error';
+export interface ToastProps {
+    /** Message text shown in the toast */
+    message: string;
+    /** Visual state — defines icon and color: success (green), alert (yellow), error (red), neutral (no icon) */
+    feedback?: ToastFeedback;
+    /** Action button label shown to the right of the message */
+    actionLabel?: string;
+    /** Callback for the action button click */
+    onAction?: () => void;
+    /** Disables the action button */
+    actionDisabled?: boolean;
+    /** Tooltip text shown when the action button is disabled */
+    actionDisabledTooltip?: string;
+    /** Position of the disabled action button's tooltip — default 'top' */
+    actionDisabledTooltipPosition?: TooltipPosition;
+    /** Shows the close (✕) button on the right — on by default */
+    showDismiss?: boolean;
+    /** Callback for the close button click */
+    onDismiss?: () => void;
+    /** @internal Applies the exit animation — controlled by Toaster, don't use directly */
+    leaving?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Toast: React.FC<ToastProps>;
+export default Toast;

package/dist/components/Toast/Toast.imperative.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toast/Toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Toast/Toaster.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './Toast.css';
+export declare const Toaster: React.FC;
+export default Toaster;

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

@@ -0,0 +1,5 @@
+export { toast } from './toast-api';
+export { Toaster } from './Toaster';
+export { Toast } from './Toast';
+export type { ToastProps, ToastFeedback } from './Toast';
+export type { ToastOptions } from './toast-store';

package/dist/components/Toast/toast-api.d.ts

@@ -0,0 +1,19 @@
+import { type ToastOptions } from './toast-store';
+/** Options for the shortcuts — the feedback is already defined by the shortcut itself */
+type ShorthandOptions = Omit<ToastOptions, 'feedback'>;
+interface ToastApi {
+    /** Fires a toast. Returns the id (use it with toast.dismiss). */
+    (message: string, opts?: ToastOptions): number;
+    /** Green success shortcut */
+    success: (message: string, opts?: ShorthandOptions) => number;
+    /** Red error shortcut (stays 8s instead of 4s) */
+    error: (message: string, opts?: ShorthandOptions) => number;
+    /** Yellow alert shortcut */
+    alert: (message: string, opts?: ShorthandOptions) => number;
+    /** Neutral shortcut (no icon) */
+    neutral: (message: string, opts?: ShorthandOptions) => number;
+    /** Closes a toast by id (triggers the exit animation) */
+    dismiss: (id: number) => void;
+}
+export declare const toast: ToastApi;
+export type { ToastOptions };