@gravity-ui/aikit 0.0.1

package/dist/src/components/molecules/PromptInputHeader/PromptInputHeader.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { ContextIndicatorProps } from '../../atoms/ContextIndicator';
+import './PromptInputHeader.scss';
+/**
+ * Context item configuration
+ */
+export type ContextItemConfig = {
+    /** Unique identifier for the context item */
+    id: string;
+    /** Content to display in the context item */
+    content: ReactNode;
+    /** Callback when context item is removed */
+    onRemove: () => void;
+};
+/**
+ * Props for the PromptInputHeader component
+ */
+export type PromptInputHeaderProps = {
+    /** Array of context items to display on the left */
+    contextItems?: ContextItemConfig[];
+    /** Show context indicator */
+    showContextIndicator?: boolean;
+    /** Props for the context indicator */
+    contextIndicatorProps?: ContextIndicatorProps;
+    /** Custom content to replace the default header */
+    children?: ReactNode;
+    /** Additional CSS class */
+    className?: string;
+    /** QA/test identifier */
+    qa?: string;
+};
+/**
+ * PromptInputHeader component displays the header section of prompt input
+ * with optional context items on the left, context indicator on the right, or custom content
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export declare function PromptInputHeader(props: PromptInputHeaderProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/molecules/PromptInputHeader/PromptInputHeader.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { block } from '../../../utils/cn';
+import { ContextIndicator } from '../../atoms/ContextIndicator';
+import { ContextItem } from '../../atoms/ContextItem';
+import './PromptInputHeader.scss';
+const b = block('prompt-input-header');
+/**
+ * PromptInputHeader component displays the header section of prompt input
+ * with optional context items on the left, context indicator on the right, or custom content
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export function PromptInputHeader(props) {
+    const { contextItems = [], showContextIndicator = false, contextIndicatorProps, children, className, qa, } = props;
+    // If custom content is provided, render it
+    if (children) {
+        return (_jsx("div", { className: b(null, className), "data-qa": qa, children: children }));
+    }
+    // Check if we have anything to display
+    const hasContextItems = contextItems.length > 0;
+    const hasContextIndicator = showContextIndicator && contextIndicatorProps;
+    const shouldRender = hasContextItems || hasContextIndicator;
+    if (!shouldRender) {
+        return null;
+    }
+    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [hasContextItems && (_jsx("div", { className: b('context-items'), children: contextItems.map((item) => (_jsx(ContextItem, { content: item.content, onClick: item.onRemove, qa: `${qa}-context-item-${item.id}` }, item.id))) })), hasContextIndicator && (_jsx("div", { className: b('context-indicator'), children: _jsx(ContextIndicator, Object.assign({}, contextIndicatorProps)) }))] }));
+}

package/dist/src/components/molecules/PromptInputHeader/__stories__/PromptInputHeader.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { PromptInputHeader } from '..';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj<typeof PromptInputHeader>;
+export declare const Playground: Story;
+export declare const WithContextItems: Story;
+export declare const WithSingleContextItem: Story;
+export declare const WithManyContextItems: Story;
+export declare const WithContextItemsAndIndicator: Story;
+export declare const WithContextIndicator: Story;
+export declare const WithContextIndicatorNumber: Story;
+export declare const WithCustomContent: Story;

package/dist/src/components/molecules/PromptInputHeader/__stories__/PromptInputHeader.stories.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PromptInputHeader } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { SwapArea } from '../../../../demo/SwapArea';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/PromptInputHeader',
+    component: PromptInputHeader,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { width: "450px", children: _jsx(Story, {}) })),
+];
+export const Playground = {
+    args: {},
+    decorators: defaultDecorators,
+};
+export const WithContextItems = {
+    render: (args) => {
+        const [items, setItems] = useState([
+            { id: '1', content: 'file.tsx', onRemove: () => { } },
+            { id: '2', content: 'component.tsx', onRemove: () => { } },
+            { id: '3', content: 'utils.ts', onRemove: () => { } },
+        ]);
+        const handleRemove = (id) => {
+            setItems(items.filter((item) => item.id !== id));
+        };
+        return (_jsx(PromptInputHeader, Object.assign({}, args, { contextItems: items.map((item) => (Object.assign(Object.assign({}, item), { onRemove: () => handleRemove(item.id) }))) })));
+    },
+    decorators: defaultDecorators,
+};
+export const WithSingleContextItem = {
+    args: {
+        contextItems: [
+            {
+                id: '1',
+                content: 'README.md',
+                onRemove: () => {
+                    // Handle remove
+                },
+            },
+        ],
+    },
+    decorators: defaultDecorators,
+};
+export const WithManyContextItems = {
+    args: {
+        contextItems: [
+            { id: '1', content: 'file1.tsx', onRemove: () => { } },
+            { id: '2', content: 'file2.tsx', onRemove: () => { } },
+            { id: '3', content: 'file3.tsx', onRemove: () => { } },
+            { id: '4', content: 'file4.tsx', onRemove: () => { } },
+            { id: '5', content: 'file5.tsx', onRemove: () => { } },
+        ],
+    },
+    decorators: defaultDecorators,
+};
+export const WithContextItemsAndIndicator = {
+    args: {
+        contextItems: [
+            { id: '1', content: 'file.tsx', onRemove: () => { } },
+            { id: '2', content: 'component.tsx', onRemove: () => { } },
+        ],
+        showContextIndicator: true,
+        contextIndicatorProps: {
+            type: 'percent',
+            usedContext: 75,
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithContextIndicator = {
+    args: {
+        showContextIndicator: true,
+        contextIndicatorProps: {
+            type: 'percent',
+            usedContext: 24,
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithContextIndicatorNumber = {
+    args: {
+        showContextIndicator: true,
+        contextIndicatorProps: {
+            type: 'number',
+            usedContext: 2400,
+            maxContext: 10000,
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithCustomContent = {
+    args: {
+        children: _jsx(SwapArea, {}),
+    },
+    decorators: defaultDecorators,
+};

package/dist/src/components/molecules/PromptInputHeader/index.d.ts

@@ -0,0 +1 @@
+export { PromptInputHeader, type PromptInputHeaderProps, type ContextItemConfig, } from './PromptInputHeader';

package/dist/src/components/molecules/PromptInputHeader/index.js

@@ -0,0 +1 @@
+export { PromptInputHeader, } from './PromptInputHeader';

package/dist/src/components/molecules/PromptInputPanel/PromptInputPanel.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import './PromptInputPanel.scss';
+/**
+ * Props for the PromptInputPanel component
+ */
+export type PromptInputPanelProps = {
+    /** Panel content */
+    children?: ReactNode;
+    /** Additional CSS class */
+    className?: string;
+    /** QA/test identifier */
+    qa?: string;
+};
+/**
+ * PromptInputPanel component displays a panel with custom content
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export declare function PromptInputPanel(props: PromptInputPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/molecules/PromptInputPanel/PromptInputPanel.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { block } from '../../../utils/cn';
+import './PromptInputPanel.scss';
+const b = block('prompt-input-panel');
+/**
+ * PromptInputPanel component displays a panel with custom content
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export function PromptInputPanel(props) {
+    const { children, className, qa } = props;
+    return (_jsx("div", { className: b(null, className), "data-qa": qa, children: children }));
+}

package/dist/src/components/molecules/PromptInputPanel/__stories__/PromptInputPanel.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { PromptInputPanel } from '..';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj<typeof PromptInputPanel>;
+export declare const Playground: Story;
+export declare const WithSwapArea: Story;
+export declare const WithContentAndCloseButton: Story;

package/dist/src/components/molecules/PromptInputPanel/__stories__/PromptInputPanel.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Xmark } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { PromptInputPanel } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { SwapArea } from '../../../../demo/SwapArea';
+import { ActionButton } from '../../../atoms/ActionButton';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/PromptInputPanel',
+    component: PromptInputPanel,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Story, {}) })),
+];
+export const Playground = {
+    args: {
+        children: 'This is the panel content',
+    },
+    decorators: defaultDecorators,
+};
+export const WithSwapArea = {
+    args: {
+        children: _jsx(SwapArea, {}),
+    },
+    decorators: defaultDecorators,
+};
+export const WithContentAndCloseButton = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx("div", { style: { flex: 1 }, children: _jsx("span", { children: "Upgrade your plan to Business to unlock all features" }) }), _jsx(Button, { view: "action", size: "m", children: "Upgrade" }), _jsx(ActionButton, { view: "flat", size: "m", onClick: () => { }, children: _jsx(Icon, { data: Xmark, size: 16 }) })] })),
+    },
+    decorators: defaultDecorators,
+};

package/dist/src/components/molecules/PromptInputPanel/index.d.ts

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

package/dist/src/components/molecules/PromptInputPanel/index.js

@@ -0,0 +1 @@
+export { PromptInputPanel } from './PromptInputPanel';

package/dist/src/components/molecules/Suggestions/Suggestions.d.ts

@@ -0,0 +1,37 @@
+import { ButtonButtonProps } from '@gravity-ui/uikit';
+import './Suggestions.scss';
+export type SuggestionsItem = {
+    /** Optional unique identifier for the item */
+    id?: string;
+    /** Title text to display on the button */
+    title: string;
+    /** Button view */
+    view?: ButtonButtonProps['view'];
+    /** Icon position: 'left' for ChevronLeft, 'right' for ChevronRight */
+    icon?: 'left' | 'right';
+};
+/**
+ * Props for the Suggestions component
+ */
+export type SuggestionsProps = {
+    /** Array of suggestion items to display */
+    items: SuggestionsItem[];
+    /** Callback function called when a suggestion is clicked */
+    onClick: (content: string, id?: string) => void | Promise<void>;
+    /** Layout orientation: 'grid' for horizontal, 'list' for vertical */
+    layout?: 'grid' | 'list';
+    /** Text alignment inside buttons: 'left', 'center', or 'right' */
+    textAlign?: 'left' | 'center' | 'right';
+    /** Additional CSS class */
+    className?: string;
+    /** QA/test identifier */
+    qa?: string;
+};
+/**
+ * Suggestions component displays a group of clickable suggestion buttons
+ * arranged in either horizontal (grid) or vertical (list) layout
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export declare function Suggestions(props: SuggestionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/molecules/Suggestions/Suggestions.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from '@gravity-ui/icons';
+import { Icon, Text } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import { ActionButton } from '../../atoms';
+import './Suggestions.scss';
+const b = block('suggestions');
+/**
+ * Suggestions component displays a group of clickable suggestion buttons
+ * arranged in either horizontal (grid) or vertical (list) layout
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export function Suggestions(props) {
+    const { items, onClick, layout = 'list', textAlign = 'left', className, qa } = props;
+    const handleClick = (item) => {
+        onClick(item.title, item.id);
+    };
+    const renderButton = (item, index) => {
+        return (_jsx(ActionButton, { tooltipTitle: item.title, size: "m", view: item.view || 'outlined', onClick: () => handleClick(item), className: b('button', { layout }), width: "auto", children: _jsxs("div", { className: b('button-content', {
+                    layout,
+                    'text-align': item.icon ? undefined : textAlign,
+                }), children: [item.icon === 'left' && (_jsx("div", { className: b('button-icon'), children: _jsx(Icon, { data: ChevronLeft, size: 16 }) })), _jsx(Text, { as: "div", className: b('button-text'), children: item.title }), item.icon === 'right' && (_jsx("div", { className: b('button-icon'), children: _jsx(Icon, { data: ChevronRight, size: 16 }) }))] }) }, item.id || index));
+    };
+    return (_jsx("div", { className: b({ layout }, className), "data-qa": qa, children: items.map((item, index) => renderButton(item, index)) }));
+}

package/dist/src/components/molecules/Suggestions/__stories__/Suggestions.stories.d.ts

@@ -0,0 +1,19 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { SuggestionsProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<SuggestionsProps>;
+export declare const ListLayout: StoryFn<SuggestionsProps>;
+export declare const ListLayoutWithContainer: StoryFn<SuggestionsProps>;
+export declare const GridLayout: StoryFn<SuggestionsProps>;
+export declare const GridLayoutWithContainer: StoryFn<SuggestionsProps>;
+export declare const WithoutIds: StoryFn<SuggestionsProps>;
+export declare const SingleItem: StoryFn<SuggestionsProps>;
+export declare const TextAlignLeft: StoryFn<SuggestionsProps>;
+export declare const TextAlignCenter: StoryFn<SuggestionsProps>;
+export declare const TextAlignRight: StoryFn<SuggestionsProps>;
+export declare const WithLeftIcon: StoryFn<SuggestionsProps>;
+export declare const WithRightIcon: StoryFn<SuggestionsProps>;
+export declare const WithMixedIcons: StoryFn<SuggestionsProps>;
+export declare const IconsWithContainer: StoryFn<SuggestionsProps>;
+export declare const WithIconsInGridLayout: StoryFn<SuggestionsProps>;

package/dist/src/components/molecules/Suggestions/__stories__/Suggestions.stories.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suggestions } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/Suggestions',
+    component: Suggestions,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'Array of suggestion items to display',
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Callback function called when a suggestion is clicked',
+        },
+        layout: {
+            control: 'select',
+            options: ['grid', 'list'],
+            description: 'Layout orientation: grid for horizontal, list for vertical',
+        },
+        textAlign: {
+            control: 'select',
+            options: ['left', 'center', 'right'],
+            description: 'Text alignment inside buttons',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args)) }));
+Playground.args = {
+    items: [
+        { id: '1', title: 'First suggestion' },
+        { id: '2', title: 'Second suggestion' },
+        { id: '3', title: 'Third suggestion' },
+    ],
+    onClick: () => {
+        // onClick handler
+    },
+    layout: 'list',
+};
+export const ListLayout = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Example suggestion' },
+            { id: '2', title: 'Another one suggestion' },
+            { id: '3', title: 'Looooooong suggestion for testing' },
+        ], layout: "list", onClick: () => {
+            // onClick handler
+        } })) }));
+export const ListLayoutWithContainer = (args) => (_jsx(ContentWrapper, { width: "200px", children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Example suggestion' },
+            { id: '2', title: 'Another one suggestion' },
+            { id: '3', title: 'Looooooong suggestion for testing' },
+        ], layout: "list", onClick: () => {
+            // onClick handler
+        } })) }));
+export const GridLayout = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Option 1' },
+            { id: '2', title: 'Option 2' },
+            { id: '3', title: 'Option 3' },
+            { id: '4', title: 'Option 4' },
+        ], layout: "grid", onClick: () => {
+            // onClick handler
+        } })) }));
+export const GridLayoutWithContainer = (args) => (_jsx(ContentWrapper, { width: "300px", children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Option 1' },
+            { id: '2', title: 'Option 2' },
+            { id: '3', title: 'Option 3' },
+            { id: '4', title: 'Option 4' },
+        ], layout: "grid", onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithoutIds = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [{ title: 'First item' }, { title: 'Second item' }, { title: 'Third item' }], onClick: () => {
+            // onClick handler
+        } })) }));
+export const SingleItem = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [{ id: '1', title: 'Only one suggestion' }], onClick: () => {
+            // onClick handler
+        } })) }));
+export const TextAlignLeft = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Left aligned text' },
+            { id: '2', title: 'Another left aligned suggestion' },
+        ], textAlign: "left", onClick: () => {
+            // onClick handler
+        } })) }));
+export const TextAlignCenter = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Center aligned text' },
+            { id: '2', title: 'Another centered suggestion' },
+        ], textAlign: "center", onClick: () => {
+            // onClick handler
+        } })) }));
+export const TextAlignRight = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Right aligned text' },
+            { id: '2', title: 'Another right aligned suggestion' },
+        ], textAlign: "right", onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithLeftIcon = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Previous page', icon: 'left' },
+            { id: '2', title: 'Go back', icon: 'left' },
+            { id: '3', title: 'Return to start', icon: 'left' },
+        ], onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithRightIcon = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Next page', icon: 'right' },
+            { id: '2', title: 'Continue', icon: 'right' },
+            { id: '3', title: 'Go forward', icon: 'right' },
+        ], onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithMixedIcons = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Previous', icon: 'left' },
+            { id: '2', title: 'No action' },
+            { id: '3', title: 'Next', icon: 'right' },
+        ], layout: "grid", onClick: () => {
+            // onClick handler
+        } })) }));
+export const IconsWithContainer = (args) => (_jsx(ContentWrapper, { width: "200px", children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Example suggestion', icon: 'right' },
+            { id: '2', title: 'Another one suggestion', icon: 'right' },
+            { id: '3', title: 'Looooooong suggestion for testing', icon: 'right' },
+        ], layout: "list", onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithIconsInGridLayout = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Back', icon: 'left' },
+            { id: '2', title: 'Home' },
+            { id: '3', title: 'Settings' },
+            { id: '4', title: 'Forward', icon: 'right' },
+        ], layout: "grid", onClick: () => {
+            // onClick handler
+        } })) }));

package/dist/src/components/molecules/Suggestions/index.d.ts

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

package/dist/src/components/molecules/Suggestions/index.js

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

package/dist/src/components/molecules/Tabs/Tabs.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DOMProps, QAProps } from '@gravity-ui/uikit';
+import './Tabs.scss';
+export type TabsProps = QAProps & DOMProps & {
+    items: {
+        id: string;
+        title: string;
+        icon?: React.ReactNode;
+    }[];
+    activeId?: string;
+    onSelectItem?: (id: string) => void;
+    onDeleteItem?: (id: string) => Promise<void>;
+    allowDelete?: boolean;
+};
+export declare const Tabs: (props: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/molecules/Tabs/Tabs.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Label } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import './Tabs.scss';
+const b = block('tabs');
+export const Tabs = (props) => {
+    const { items, activeId, onSelectItem, onDeleteItem, allowDelete = false, className, style, qa, } = props;
+    const handleTabClick = useCallback((id) => {
+        if (onSelectItem) {
+            onSelectItem(id);
+        }
+    }, [onSelectItem]);
+    const handleDeleteClick = useCallback((id) => {
+        if (onDeleteItem) {
+            onDeleteItem(id);
+        }
+    }, [onDeleteItem]);
+    return (_jsx("div", { className: b(null, className), style: style, "data-qa": qa, children: items.map((item) => {
+            const isActive = item.id === activeId;
+            return (_jsx(Label, { size: "s", theme: isActive ? 'info' : 'clear', interactive: true, onClick: () => handleTabClick(item.id), type: allowDelete ? 'close' : 'default', onCloseClick: allowDelete ? () => handleDeleteClick(item.id) : undefined, icon: item.icon, className: b('tab', { active: isActive }), "data-qa": `${qa}-tab-${item.id}`, children: item.title }, item.id));
+        }) }));
+};

package/dist/src/components/molecules/Tabs/__stories__/Tabs.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { type TabsProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<TabsProps>;
+export declare const Basic: StoryObj<TabsProps>;
+export declare const WithIcons: StoryObj<TabsProps>;
+export declare const WithStyle: StoryObj<TabsProps>;
+export declare const MaxWidth: StoryObj<TabsProps>;