@gravity-ui/aikit 0.6.0 → 1.0.0

package/dist/components/atoms/MessageBalloon/__stories__/MessageBalloon.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { type MessageBalloonProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<MessageBalloonProps>;
+export declare const User: StoryFn<MessageBalloonProps>;

package/dist/components/atoms/MessageBalloon/__stories__/MessageBalloon.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MessageBalloon } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/MessageBalloon',
+    component: MessageBalloon,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'Content of message',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(MessageBalloon, Object.assign({}, args)) }));
+Playground.args = {
+    children: 'User question',
+};
+export const User = (args) => (_jsx(ContentWrapper, { children: _jsx(MessageBalloon, Object.assign({}, args, { children: "User question" })) }));

package/dist/components/atoms/Shimmer/__stories__/Shimmer.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { ShimmerProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ShimmerProps>;

package/dist/components/atoms/Shimmer/__stories__/Shimmer.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Shimmer } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/Shimmer',
+    component: Shimmer,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'Content to apply shimmer to',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(Shimmer, Object.assign({}, args, { children: _jsx("span", { children: "Awaiting confirmation" }) })) }));

package/dist/components/atoms/SubmitButton/__stories__/SubmitButton.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { SubmitButtonProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<SubmitButtonProps>;
+export declare const Enabled: StoryFn<SubmitButtonProps>;
+export declare const Disabled: StoryFn<SubmitButtonProps>;
+export declare const Loading: StoryFn<SubmitButtonProps>;
+export declare const Cancelable: StoryFn<SubmitButtonProps>;
+export declare const CancelableWithText: StoryFn<SubmitButtonProps>;
+export declare const Size: StoryObj<SubmitButtonProps>;
+export declare const States: StoryObj<SubmitButtonProps>;
+export declare const Interactive: StoryFn<SubmitButtonProps>;

package/dist/components/atoms/SubmitButton/__stories__/SubmitButton.stories.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SubmitButton } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/SubmitButton',
+    component: SubmitButton,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        size: {
+            control: 'radio',
+            options: ['s', 'm', 'l'],
+            description: 'Button size',
+        },
+        state: {
+            control: 'radio',
+            options: ['enabled', 'disabled', 'loading', 'cancelable'],
+            description: 'Button state',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+];
+// Mock function for demonstration
+const mockOnClick = async () => {
+    // eslint-disable-next-line no-console
+    console.log('Button clicked');
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    // eslint-disable-next-line no-console
+    console.log('Action completed');
+};
+export const Playground = (args) => {
+    return (_jsx(ContentWrapper, { children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick })) }));
+};
+Playground.args = {
+    size: 'm',
+    state: 'enabled',
+};
+export const Enabled = (args) => {
+    return (_jsx(ContentWrapper, { children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, state: "enabled" })) }));
+};
+export const Disabled = (args) => {
+    return (_jsx(ContentWrapper, { children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, state: "disabled" })) }));
+};
+export const Loading = (args) => {
+    return (_jsx(ContentWrapper, { children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, state: "loading" })) }));
+};
+export const Cancelable = (args) => {
+    return (_jsx(ContentWrapper, { children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, state: "cancelable" })) }));
+};
+export const CancelableWithText = (args) => {
+    return (_jsx(ContentWrapper, { children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, state: "cancelable", cancelableText: "Stop" })) }));
+};
+export const Size = {
+    render: (args) => {
+        return (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Size s", children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, size: "s" })) }), _jsx(ShowcaseItem, { title: "Size m", children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, size: "m" })) }), _jsx(ShowcaseItem, { title: "Size l", children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, size: "l" })) })] }));
+    },
+    decorators: defaultDecorators,
+};
+export const States = {
+    render: (args) => {
+        return (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Enabled", children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, state: "enabled" })) }), _jsx(ShowcaseItem, { title: "Disabled", children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, state: "disabled" })) }), _jsx(ShowcaseItem, { title: "Loading", children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, state: "loading" })) }), _jsx(ShowcaseItem, { title: "Cancelable", children: _jsx(SubmitButton, Object.assign({}, args, { onClick: mockOnClick, state: "cancelable" })) })] }));
+    },
+    decorators: defaultDecorators,
+};
+// Interactive story to demonstrate loading and cancelable states
+export const Interactive = (args) => {
+    const [state, setState] = useState('enabled');
+    const handleClick = async () => {
+        if (state === 'enabled') {
+            setState('loading');
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            setState('cancelable');
+        }
+        else if (state === 'cancelable') {
+            // eslint-disable-next-line no-console
+            console.log('Cancelled');
+            setState('enabled');
+        }
+    };
+    return (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(ShowcaseItem, { title: "Click the button to see loading and cancelable states", children: _jsx(SubmitButton, Object.assign({}, args, { onClick: handleClick, state: state })) }) }) }));
+};

package/dist/components/atoms/ToolIndicator/__stories__/ToolIndicator.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { ToolIndicatorProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ToolIndicatorProps>;
+export declare const Success: StoryFn<ToolIndicatorProps>;
+export declare const Error: StoryFn<ToolIndicatorProps>;
+export declare const Info: StoryFn<ToolIndicatorProps>;
+export declare const Loading: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/ToolIndicator/__stories__/ToolIndicator.stories.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToolIndicator } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/ToolIndicator',
+    component: ToolIndicator,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        status: {
+            control: 'radio',
+            options: ['success', 'error', 'info', 'loading'],
+            description: 'Current status of the tool execution',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(ToolIndicator, Object.assign({}, args)) }));
+Playground.args = { status: 'success' };
+export const Success = (args) => (_jsx(ContentWrapper, { children: _jsx(ToolIndicator, Object.assign({}, args, { status: "success" })) }));
+export const Error = (args) => (_jsx(ContentWrapper, { children: _jsx(ToolIndicator, Object.assign({}, args, { status: "error" })) }));
+export const Info = (args) => (_jsx(ContentWrapper, { children: _jsx(ToolIndicator, Object.assign({}, args, { status: "info" })) }));
+export const Loading = () => (_jsx(ContentWrapper, { children: _jsx(ToolIndicator, { status: "loading" }) }));

package/dist/components/molecules/BaseMessage/__stories__/BaseMessage.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import type { BaseMessageProps } from '../../../../types/messages';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<BaseMessageProps>;
+export declare const Variant: StoryObj<BaseMessageProps>;
+export declare const ShowActionsOnHover: StoryFn<BaseMessageProps>;
+export declare const ShowTimestamp: StoryObj<BaseMessageProps>;
+export declare const WithCustomAction: StoryFn<BaseMessageProps>;

package/dist/components/molecules/BaseMessage/__stories__/BaseMessage.stories.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@gravity-ui/uikit';
+import { BaseMessage } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/BaseMessage',
+    component: BaseMessage,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'radio',
+            options: ['user', 'assistant', 'system'],
+            description: 'Type of message',
+        },
+        showActionsOnHover: {
+            control: 'boolean',
+            description: 'Show actions on hover',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+];
+const buttons = [
+    // eslint-disable-next-line no-console
+    { actionType: 'copy', onClick: () => console.log('copy') },
+    // eslint-disable-next-line no-console
+    { actionType: 'edit', onClick: () => console.log('edit') },
+    // eslint-disable-next-line no-console
+    { actionType: 'delete', onClick: () => console.log('delete') },
+    // eslint-disable-next-line no-console
+    { actionType: 'custom', onClick: () => console.log('custom') },
+    // eslint-disable-next-line no-console
+    { actionType: 'like', onClick: () => console.log('like') },
+    // eslint-disable-next-line no-console
+    { actionType: 'unlike', onClick: () => console.log('unlike') },
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(BaseMessage, Object.assign({}, args)) }));
+Playground.args = {
+    children: 'My message',
+    actions: buttons,
+    role: 'assistant',
+};
+export const Variant = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "User", width: "300px", children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "user", children: 'My message' })) }), _jsx(ShowcaseItem, { title: "Assistant", width: "300px", children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "assistant", children: 'My message' })) }), _jsx(ShowcaseItem, { title: "System", width: "300px", children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "system", children: 'My message' })) })] })),
+    decorators: defaultDecorators,
+};
+export const ShowActionsOnHover = (args) => (_jsx(ContentWrapper, { children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "assistant", showActionsOnHover: true, children: 'My message' })) }));
+export const ShowTimestamp = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "User", width: "350px", children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "user", showTimestamp: true, timestamp: "1705312234567", children: 'My message' })) }), _jsx(ShowcaseItem, { title: "Assistant", width: "350px", children: _jsx(BaseMessage, Object.assign({}, args, { actions: buttons, role: "assistant", showTimestamp: true, timestamp: "1705312234567", children: 'My message' })) })] })),
+    decorators: defaultDecorators,
+};
+export const WithCustomAction = (args) => (_jsx(ContentWrapper, { children: _jsx(BaseMessage, Object.assign({}, args, { actions: [
+            // eslint-disable-next-line no-console
+            { actionType: 'copy', onClick: () => console.log('copy') },
+            // eslint-disable-next-line no-console
+            { actionType: 'edit', onClick: () => console.log('edit') },
+            // Custom ReactNode action
+            _jsx(Button, { view: "outlined-info", size: "s", 
+                // eslint-disable-next-line no-console
+                onClick: () => console.log('custom'), children: "Custom" }, "custom"),
+        ], role: "assistant", children: 'Message with custom action button' })) }));

package/dist/components/molecules/BaseMessage/index.d.ts

@@ -1,6 +1,6 @@
 import type { BaseMessageProps } from '../../../types/messages';
 import './BaseMessage.scss';
-export declare enum BaseMessageAction {
+export declare enum BaseMessageActionType {
     Copy = "copy",
     Edit = "edit",
     Retry = "retry",

package/dist/components/molecules/BaseMessage/index.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { ArrowRotateLeft, Copy as CopyIcon, Pencil, ThumbsDown, ThumbsUp, TrashBin, } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
+import { isActionConfig } from '../../../utils/actionUtils';
 import { block } from '../../../utils/cn';
 import { ActionButton } from '../../atoms';
 import { ChatDate } from '../../atoms/ChatDate';
@@ -8,27 +10,30 @@ import { ButtonGroup } from '../ButtonGroup';
 import { i18n } from './i18n';
 import './BaseMessage.scss';
 const b = block('base-message');
-export var BaseMessageAction;
-(function (BaseMessageAction) {
-    BaseMessageAction["Copy"] = "copy";
-    BaseMessageAction["Edit"] = "edit";
-    BaseMessageAction["Retry"] = "retry";
-    BaseMessageAction["Like"] = "like";
-    BaseMessageAction["Unlike"] = "unlike";
-    BaseMessageAction["Delete"] = "delete";
-})(BaseMessageAction || (BaseMessageAction = {}));
+export var BaseMessageActionType;
+(function (BaseMessageActionType) {
+    BaseMessageActionType["Copy"] = "copy";
+    BaseMessageActionType["Edit"] = "edit";
+    BaseMessageActionType["Retry"] = "retry";
+    BaseMessageActionType["Like"] = "like";
+    BaseMessageActionType["Unlike"] = "unlike";
+    BaseMessageActionType["Delete"] = "delete";
+})(BaseMessageActionType || (BaseMessageActionType = {}));
 const BaseMessageActionIcons = {
-    [BaseMessageAction.Copy]: CopyIcon,
-    [BaseMessageAction.Edit]: Pencil,
-    [BaseMessageAction.Retry]: ArrowRotateLeft,
-    [BaseMessageAction.Like]: ThumbsUp,
-    [BaseMessageAction.Unlike]: ThumbsDown,
-    [BaseMessageAction.Delete]: TrashBin,
+    [BaseMessageActionType.Copy]: CopyIcon,
+    [BaseMessageActionType.Edit]: Pencil,
+    [BaseMessageActionType.Retry]: ArrowRotateLeft,
+    [BaseMessageActionType.Like]: ThumbsUp,
+    [BaseMessageActionType.Unlike]: ThumbsDown,
+    [BaseMessageActionType.Delete]: TrashBin,
 };
 export const BaseMessage = (props) => {
     const { className, qa, showActionsOnHover, actions, children, role: variant, showTimestamp, timestamp = '', } = props;
     // Get tooltip text for action
     const getTooltipText = (actionType) => {
+        if (!actionType) {
+            return '';
+        }
         const tooltipKey = `action-tooltip-${actionType}`;
         // Check if tooltip exists in i18n, otherwise return empty string
         try {
@@ -39,10 +44,36 @@ export const BaseMessage = (props) => {
         }
     };
     const hasActions = actions && actions.length > 0;
-    return (_jsxs("div", { className: b({ variant, 'btn-hover': showActionsOnHover }, className), "data-qa": qa, children: [children, hasActions && (_jsxs("div", { className: b('actions', { reverse: variant !== 'user' }), children: [showTimestamp ? _jsx(ChatDate, { date: timestamp, format: "HH:mm", showTime: true }) : null, _jsx(ButtonGroup, { children: actions === null || actions === void 0 ? void 0 : actions.map((action) => {
-                            const tooltipText = getTooltipText(action.type);
-                            return (_jsx(ActionButton, { tooltipTitle: tooltipText && action.type !== 'custom'
-                                    ? tooltipText
-                                    : undefined, view: "flat-secondary", onClick: action.onClick, children: action.icon || BaseMessageActionIcons[action.type] ? (_jsx(Icon, { size: 16, data: action.icon || BaseMessageActionIcons[action.type] })) : (action.type) }, action.type));
+    return (_jsxs("div", { className: b({ variant, 'btn-hover': showActionsOnHover }, className), "data-qa": qa, children: [children, hasActions && (_jsxs("div", { className: b('actions', { reverse: variant !== 'user' }), children: [showTimestamp ? _jsx(ChatDate, { date: timestamp, format: "HH:mm", showTime: true }) : null, _jsx(ButtonGroup, { children: actions === null || actions === void 0 ? void 0 : actions.map((action, index) => {
+                            if (!isActionConfig(action)) {
+                                return _jsx(React.Fragment, { children: action }, index);
+                            }
+                            const tooltipText = getTooltipText(action.actionType);
+                            const defaultIcon = action.actionType
+                                ? BaseMessageActionIcons[action.actionType]
+                                : undefined;
+                            // Determine tooltip title
+                            let tooltipTitle;
+                            if (action.label) {
+                                tooltipTitle = action.label;
+                            }
+                            else if (tooltipText && action.actionType !== 'custom') {
+                                tooltipTitle = tooltipText;
+                            }
+                            // Determine button content
+                            let buttonContent;
+                            if (action.icon) {
+                                buttonContent = action.icon;
+                            }
+                            else if (defaultIcon) {
+                                buttonContent = _jsx(Icon, { size: 16, data: defaultIcon });
+                            }
+                            else if (action.label) {
+                                buttonContent = action.label;
+                            }
+                            else {
+                                buttonContent = action.actionType;
+                            }
+                            return (_jsx(ActionButton, Object.assign({}, action, { tooltipTitle: tooltipTitle, view: action.view || 'flat-secondary', children: buttonContent }), action.actionType || index));
                         }) })] }))] }));
 };

package/dist/components/molecules/ButtonGroup/__stories__/ButtonGroup.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { type ButtonGroupProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ButtonGroupProps>;
+export declare const Orientation: StoryObj<ButtonGroupProps>;

package/dist/components/molecules/ButtonGroup/__stories__/ButtonGroup.stories.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@gravity-ui/uikit';
+import { ButtonGroup } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/ButtonGroup',
+    component: ButtonGroup,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        orientation: {
+            control: 'radio',
+            options: ['horizontal', 'vertical'],
+            description: 'Orientation of buttons',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+];
+const buttonChildren = (_jsxs(_Fragment, { children: [_jsx(Button, { children: "Button 1" }), _jsx(Button, { children: "Button 2" }), _jsx(Button, { children: "Button 3" })] }));
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(ButtonGroup, Object.assign({}, args)) }));
+Playground.args = {
+    children: buttonChildren,
+    orientation: 'horizontal',
+};
+export const Orientation = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Horizontal", children: _jsx(ButtonGroup, Object.assign({}, args, { orientation: "horizontal", children: buttonChildren })) }), _jsx(ShowcaseItem, { title: "Vertical", children: _jsx(ButtonGroup, Object.assign({}, args, { orientation: "vertical", children: buttonChildren })) })] })),
+    decorators: defaultDecorators,
+};

package/dist/components/molecules/PromptInputBody/__stories__/PromptInputBody.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { PromptInputBody } from '..';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj<typeof PromptInputBody>;
+export declare const Playground: Story;
+export declare const WithValue: Story;
+export declare const MultiLine: Story;
+export declare const WithMaxLength: Story;
+export declare const WithCustomContent: Story;
+export declare const Disabled: Story;

package/dist/components/molecules/PromptInputBody/__stories__/PromptInputBody.stories.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PromptInputBody } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { SwapArea } from '../../../../demo/SwapArea';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/PromptInputBody',
+    component: PromptInputBody,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { width: "450px", children: _jsx(Story, {}) })),
+];
+export const Playground = {
+    args: {
+        placeholder: 'Plan, code, build and test anything',
+    },
+    decorators: defaultDecorators,
+};
+export const WithValue = {
+    render: (args) => {
+        const [value, setValue] = useState('Hello, this is a test message!');
+        return (_jsx(PromptInputBody, Object.assign({}, args, { value: value, onChange: setValue, placeholder: "Plan, code, build and test anything" })));
+    },
+    decorators: defaultDecorators,
+};
+export const MultiLine = {
+    render: (args) => {
+        const [value, setValue] = useState('This is a multi-line\ntext input\nwith several lines\nof content');
+        return (_jsx(PromptInputBody, Object.assign({}, args, { value: value, onChange: setValue, placeholder: "Plan, code, build and test anything", minRows: 3, maxRows: 10 })));
+    },
+    decorators: defaultDecorators,
+};
+export const WithMaxLength = {
+    render: (args) => {
+        const [value, setValue] = useState('');
+        return (_jsxs(_Fragment, { children: [_jsx(PromptInputBody, Object.assign({}, args, { value: value, onChange: setValue, placeholder: "Maximum 100 characters", maxLength: 100 })), _jsxs("div", { style: {
+                        marginTop: '8px',
+                        fontSize: '12px',
+                        color: 'var(--g-color-text-secondary)',
+                    }, children: [value.length, " / 100 characters"] })] }));
+    },
+    decorators: defaultDecorators,
+};
+export const WithCustomContent = {
+    args: {
+        children: _jsx(SwapArea, {}),
+    },
+    decorators: defaultDecorators,
+};
+export const Disabled = {
+    render: (args) => {
+        const [value, setValue] = useState('This input is disabled');
+        return (_jsx(PromptInputBody, Object.assign({}, args, { value: value, onChange: setValue, placeholder: "Plan, code, build and test anything", disabledInput: true })));
+    },
+    decorators: defaultDecorators,
+};

package/dist/components/molecules/PromptInputFooter/__stories__/PromptInputFooter.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { PromptInputFooter } from '..';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj<typeof PromptInputFooter>;
+export declare const Playground: Story;
+export declare const WithAllIcons: Story;
+export declare const DisabledButton: Story;
+export declare const LoadingButton: Story;
+export declare const CancelableButton: Story;
+export declare const WithCustomContent: Story;