@beydesign/storybook 0.0.37 → 0.0.38

package/dist/index.d.ts

@@ -12,8 +12,8 @@ export { NavItem } from './stories/NavItem';
 export { CreditsCard } from './stories/CreditsCard';
 export { Sidebar } from './stories/Sidebar';
 export { Menu } from './stories/Menu';
-export { AgentCard } from './stories/AgentCard';
-export { SkeletonLoader, AgentCardSkeleton } from './stories/SkeletonLoader';
+export { SkeletonLoader } from './stories/SkeletonLoader';
+export { HintBubble } from './stories/HintBubble';
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, type MainButtonProps, } from './stories/types/button';
 export { BadgeColor, BadgeSize, type BadgeProps } from './stories/types/badge';
 export { AvatarStyle, AvatarSize, type AvatarProps, } from './stories/types/avatar';
@@ -28,5 +28,5 @@ export { NavItemState, NavItemSize, type NavItemProps, } from './stories/types/n
 export { CreditsCardSize, type CreditsCardProps, } from './stories/types/credits-card';
 export { SidebarSize, type SidebarProps, type NavItemConfig, type NavSection, } from './stories/types/sidebar';
 export { type MenuProps, type MenuItemProps } from './stories/types/menu';
-export { type AgentCardProps, AgentState } from './stories/types/agent-card';
-export { type SkeletonLoaderProps, type AgentCardSkeletonProps, } from './stories/SkeletonLoader';
+export { HintBubbleType, HintBubbleSize, type HintBubbleProps, } from './stories/types/hint-bubble';
+export { AgentCard, type AgentCardProps, type AgentState, AgentCardSkeleton, type AgentCardSkeletonProps, } from './stories/AgentCard';

package/dist/index.js

@@ -13,8 +13,8 @@ export { NavItem } from './stories/NavItem';
 export { CreditsCard } from './stories/CreditsCard';
 export { Sidebar } from './stories/Sidebar';
 export { Menu } from './stories/Menu';
-export { AgentCard } from './stories/AgentCard';
-export { SkeletonLoader, AgentCardSkeleton } from './stories/SkeletonLoader';
+export { SkeletonLoader } from './stories/SkeletonLoader';
+export { HintBubble } from './stories/HintBubble';
 // Button Types
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';
 // Badge Types
@@ -40,4 +40,6 @@ export { CreditsCardSize, } from './stories/types/credits-card';
 // Sidebar Types
 export { SidebarSize, } from './stories/types/sidebar';
 // Agent Card Types
-export { AgentState } from './stories/types/agent-card';
+// Hint Bubble Types
+export { HintBubbleType, HintBubbleSize, } from './stories/types/hint-bubble';
+export { AgentCard, AgentCardSkeleton, } from './stories/AgentCard';

package/dist/stories/AgentCard/AgentCard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AgentCardProps } from './types';
+export declare const AgentCard: React.FC<AgentCardProps>;

package/dist/stories/{AgentCard.js → AgentCard/AgentCard.js}

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { AgentState, } from './types/agent-card';
+import { AgentState } from './types';
 import { Box } from '@mui/material';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
-import { Toggle } from './Toggle';
-import { TogglePosition } from './types/toggle';
-import { Badge } from './Bagde';
-import { BadgeColor, BadgeSize } from './types/badge';
-import { MainButton } from './Button';
-import { ButtonHierarchy, ButtonSize } from './types/button';
-import { Menu } from './Menu';
+import { Typography } from '../Typography';
+import { TypographySize, TypographyWeight } from '../types/typography';
+import { Toggle } from '../Toggle';
+import { TogglePosition } from '../types/toggle';
+import { Badge } from '../Bagde';
+import { BadgeColor, BadgeSize } from '../types/badge';
+import { MainButton } from '../Button';
+import { ButtonHierarchy, ButtonSize } from '../types/button';
+import { Menu } from '../Menu';
 import { ArrowsCounterClockwise } from '@phosphor-icons/react';
-import { ProgressIndicator } from './ProgressIndicator';
-import { ProgressIndicatorMode } from './types/progress-indicator';
+import { ProgressIndicator } from '../ProgressIndicator';
+import { ProgressIndicatorMode } from '../types/progress-indicator';
 export const AgentCard = ({ title, description = '', date = '', showDate = false, badges = [], showBadges = false, showTimeBadge = false, showDescription = false, showMenu = false, menuItems = [], active = false, showActiveToggle = false, onActiveToggleChange, activeToggleDisabled = false, agentImage, time, onPreview, agentState, previewButtonText = 'Preview', }) => {
     const [hovered, setHovered] = useState(false);
     const [imageError, setImageError] = useState(false);
@@ -78,8 +78,5 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
                             position: 'absolute',
                             right: '8px',
                             top: '8px',
-                        } })), isReady && hovered && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', sx: { opacity: 0.5, zIndex: 1 } })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsCounterClockwise, { size: 24, weight: "bold", color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Agent creation in progress", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: 50, maxValue: 100, textColor: 'var(--primitives-desktop-primary-white-100)' })] })), isReady && onPreview && (_jsx(Box, { position: 'absolute', sx: { zIndex: 2 }, children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' } }) }))] }), _jsx(Typography, { text: title, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { flex: 1 } })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge, index) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }, `badge-${index}-${badge}`))) })), showDescription && (_jsx(Typography, { text: description, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }))] }));
-};
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Avatars" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsx("div", { children: _jsx("h2", { children: "Size: sm, Avatar Style: Letters" }) }) })] }));
+                        } })), isReady && hovered && onPreview && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', sx: { zIndex: 1 }, display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' } }) })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsCounterClockwise, { size: 24, weight: "bold", color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Agent creation in progress", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: 50, maxValue: 100, textColor: 'var(--primitives-desktop-primary-white-100)' })] }))] }), _jsx(Typography, { text: title, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { flex: 1 } })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge, index) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }, `badge-${index}-${badge}`))) })), showDescription && (_jsx(Typography, { text: description, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }))] }));
 };

package/dist/stories/{AgentCard.stories.js → AgentCard/AgentCard.stories.js}

@@ -1,7 +1,7 @@
 import { AgentCard } from './AgentCard';
-import { AgentState } from './types/agent-card';
+import { AgentState } from './types';
 const meta = {
-    title: 'Design System/Components/AgentCard',
+    title: 'Design System/Components/Agent/AgentCard',
     component: AgentCard,
     parameters: {
         layout: 'centered',

package/dist/stories/AgentCard/AgentCardSkeleton.d.ts

@@ -0,0 +1,2 @@
+import { AgentCardSkeletonProps } from './types';
+export declare const AgentCardSkeleton: React.FC<AgentCardSkeletonProps>;

package/dist/stories/AgentCard/AgentCardSkeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { SkeletonLoader } from '../SkeletonLoader';
+export const AgentCardSkeleton = ({ width = '300px', showDate = false, showBadges = false, showDescription = false, style, }) => {
+    return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: "var(--spacing-tokens-size-in-px-spacing-md)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-lg)", bgcolor: "var(--colors-light-background-bg-component)", boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`, style: style, children: [_jsx(Box, { width: "100%", sx: { aspectRatio: 1 }, borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", overflow: "hidden", children: _jsx(SkeletonLoader, {}) }), _jsx(SkeletonLoader, { width: "70%", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showDate && (_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })), showBadges && (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [_jsx(SkeletonLoader, { width: "60px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] })), showDescription && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", children: [_jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }))] }));
+};

package/dist/stories/{AgentCardSkeleton.stories.d.ts → AgentCard/AgentCardSkeleton.stories.d.ts}

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { AgentCardSkeleton } from './SkeletonLoader';
+import { AgentCardSkeleton } from './AgentCardSkeleton';
 declare const meta: Meta<typeof AgentCardSkeleton>;
 export default meta;
 type Story = StoryObj<typeof AgentCardSkeleton>;

package/dist/stories/{AgentCardSkeleton.stories.js → AgentCard/AgentCardSkeleton.stories.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AgentCardSkeleton } from './SkeletonLoader';
 import { Box } from '@mui/material';
+import { AgentCardSkeleton } from './AgentCardSkeleton';
 const meta = {
-    title: 'Design System/Components/AgentCardSkeleton',
+    title: 'Design System/Components/Agent/AgentCardSkeleton',
     component: AgentCardSkeleton,
     parameters: {
         layout: 'centered',

package/dist/stories/AgentCard/index.d.ts

@@ -0,0 +1,3 @@
+export { AgentCard } from './AgentCard';
+export { AgentCardSkeleton } from './AgentCardSkeleton';
+export type { AgentCardProps, AgentState, AgentCardSkeletonProps, } from './types';

package/dist/stories/AgentCard/index.js

@@ -0,0 +1,2 @@
+export { AgentCard } from './AgentCard';
+export { AgentCardSkeleton } from './AgentCardSkeleton';

package/dist/stories/{types/agent-card.d.ts → AgentCard/types.d.ts}

@@ -1,4 +1,4 @@
-import { MenuItemProps } from './menu';
+import { MenuItemProps } from '../types/menu';
 export declare enum AgentState {
     pending = "pending",
     processing = "processing",
@@ -48,8 +48,25 @@ export type AgentCardProps = {
     /** Preview button text */
     previewButtonText?: string;
 };
-/**
- * Props for the Components wrapper
- */
-export interface ComponentsProps {
+export interface AgentCardSkeletonProps {
+    /**
+     * Width of the card
+     */
+    width?: string | number;
+    /**
+     * Show date placeholder
+     */
+    showDate?: boolean;
+    /**
+     * Show badges placeholder
+     */
+    showBadges?: boolean;
+    /**
+     * Show description placeholder
+     */
+    showDescription?: boolean;
+    /**
+     * Custom style for the skeleton
+     */
+    style?: React.CSSProperties;
 }

package/dist/stories/HintBubble.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { HintBubbleProps } from './types/hint-bubble';
+export declare const HintBubble: React.FC<HintBubbleProps>;

package/dist/stories/HintBubble.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+import { HintBubbleSize, HintBubbleType, } from './types/hint-bubble';
+export const HintBubble = ({ text, size = HintBubbleSize.md, type = HintBubbleType.Info, }) => {
+    const getPadding = () => {
+        if (size === HintBubbleSize.sm) {
+            return 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
+        }
+        return 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
+    };
+    const getTypographySize = () => {
+        if (size === HintBubbleSize.sm)
+            return TypographySize.TextXS;
+        return TypographySize.TextM;
+    };
+    const getTypographyWeight = () => {
+        if (size === HintBubbleSize.sm)
+            return TypographyWeight.Regular;
+        return TypographyWeight.Medium;
+    };
+    const getTypographyColor = () => {
+        if (type === HintBubbleType.Error)
+            return 'var(--colors-light-text-text-error)';
+        return 'var(--colors-light-text-text-title)';
+    };
+    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--colors-light-background-bg-card-highlight)', padding: getPadding(), gap: '10px', children: _jsx(Typography, { text: text, size: getTypographySize(), weight: getTypographyWeight(), color: getTypographyColor() }) }));
+};

package/dist/stories/HintBubble.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HintBubble } from './HintBubble';
+declare const meta: Meta<typeof HintBubble>;
+export default meta;
+type Story = StoryObj<typeof HintBubble>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Error: Story;
+export declare const SmallError: Story;

package/dist/stories/HintBubble.stories.js

@@ -0,0 +1,68 @@
+import { HintBubble } from './HintBubble';
+import { HintBubbleSize, HintBubbleType } from './types/hint-bubble';
+const meta = {
+    title: 'Design System/Components/HintBubble',
+    component: HintBubble,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4717-3779&t=8I9WicYVdJD1jCB1-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: Object.values(HintBubbleSize),
+            description: 'Size of the hint bubble',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        type: {
+            control: 'select',
+            options: Object.values(HintBubbleType),
+            description: 'Type of the hint bubble',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        text: {
+            control: 'text',
+            description: 'Text of the hint bubble',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'This is a hint bubble',
+        type: HintBubbleType.Info,
+        size: HintBubbleSize.md,
+    },
+};
+export const Small = {
+    args: {
+        text: 'This is a hint bubble',
+        type: HintBubbleType.Info,
+        size: HintBubbleSize.sm,
+    },
+};
+export const Error = {
+    args: {
+        text: 'This is an error hint bubble',
+        type: HintBubbleType.Error,
+        size: HintBubbleSize.md,
+    },
+};
+export const SmallError = {
+    args: {
+        text: 'This is an error hint bubble',
+        type: HintBubbleType.Error,
+        size: HintBubbleSize.sm,
+    },
+};

package/dist/stories/SkeletonLoader.d.ts

@@ -22,26 +22,3 @@ export interface SkeletonLoaderProps {
     style?: React.CSSProperties;
 }
 export declare const SkeletonLoader: React.FC<SkeletonLoaderProps>;
-export interface AgentCardSkeletonProps {
-    /**
-     * Width of the card
-     */
-    width?: string | number;
-    /**
-     * Show date placeholder
-     */
-    showDate?: boolean;
-    /**
-     * Show badges placeholder
-     */
-    showBadges?: boolean;
-    /**
-     * Show description placeholder
-     */
-    showDescription?: boolean;
-    /**
-     * Custom style for the skeleton
-     */
-    style?: React.CSSProperties;
-}
-export declare const AgentCardSkeleton: React.FC<AgentCardSkeletonProps>;

package/dist/stories/SkeletonLoader.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 export const SkeletonLoader = ({ width = '100%', height = '100%', borderRadius = 'var(--spacing-tokens-size-in-px-spacing-sm)', animationDuration = 1.5, style, }) => {
     return (_jsx(Box, { width: width, height: height, borderRadius: borderRadius, sx: {
@@ -17,6 +17,3 @@ export const SkeletonLoader = ({ width = '100%', height = '100%', borderRadius =
         }
       ` }) }));
 };
-export const AgentCardSkeleton = ({ width = '300px', showDate = false, showBadges = false, showDescription = false, style, }) => {
-    return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: "var(--spacing-tokens-size-in-px-spacing-md)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-lg)", bgcolor: "var(--colors-light-background-bg-component)", boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`, style: style, children: [_jsx(Box, { width: "100%", sx: { aspectRatio: 1 }, borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", overflow: "hidden", children: _jsx(SkeletonLoader, {}) }), _jsx(SkeletonLoader, { width: "70%", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showDate && (_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })), showBadges && (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [_jsx(SkeletonLoader, { width: "60px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] })), showDescription && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", children: [_jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }))] }));
-};

package/dist/stories/SkeletonLoader.stories.d.ts

@@ -1,11 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { SkeletonLoader, AgentCardSkeleton } from './SkeletonLoader';
+import { SkeletonLoader } from './SkeletonLoader';
 declare const meta: Meta<typeof SkeletonLoader>;
 export default meta;
 type Story = StoryObj<typeof SkeletonLoader>;
 export declare const Default: Story;
 export declare const CustomAnimation: Story;
 export declare const RoundedSkeleton: Story;
-export declare const agentCardSkeletonMeta: Meta<typeof AgentCardSkeleton>;
-export declare const AgentCardSkeletonStory: StoryObj<typeof AgentCardSkeleton>;
-export declare const AgentCardSkeletonGrid: StoryObj<typeof AgentCardSkeleton>;

package/dist/stories/SkeletonLoader.stories.js

@@ -1,6 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SkeletonLoader, AgentCardSkeleton } from './SkeletonLoader';
-import { Box } from '@mui/material';
+import { SkeletonLoader } from './SkeletonLoader';
 const meta = {
     title: 'Design System/Components/SkeletonLoader',
     component: SkeletonLoader,
@@ -74,68 +72,3 @@ export const RoundedSkeleton = {
         borderRadius: '50%',
     },
 };
-// AgentCardSkeleton meta and stories
-export const agentCardSkeletonMeta = {
-    title: 'Design System/Components/AgentCardSkeleton',
-    component: AgentCardSkeleton,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        width: {
-            control: 'text',
-            description: 'Width of the card',
-            table: {
-                type: { summary: 'string | number' },
-                defaultValue: { summary: '300px' },
-            },
-        },
-        showDate: {
-            control: 'boolean',
-            description: 'Show date placeholder',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'false' },
-            },
-        },
-        showBadges: {
-            control: 'boolean',
-            description: 'Show badges placeholder',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'false' },
-            },
-        },
-        showDescription: {
-            control: 'boolean',
-            description: 'Show description placeholder',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'false' },
-            },
-        },
-        style: {
-            control: 'object',
-            description: 'Custom style for the skeleton',
-            table: {
-                type: { summary: 'React.CSSProperties' },
-                defaultValue: { summary: 'undefined' },
-            },
-        },
-    },
-};
-// AgentCardSkeleton stories
-export const AgentCardSkeletonStory = {
-    name: 'Agent Card Skeleton',
-    render: (args) => _jsx(AgentCardSkeleton, { ...args }),
-    args: {
-        showDate: true,
-        showBadges: true,
-        showDescription: true,
-    },
-};
-export const AgentCardSkeletonGrid = {
-    name: 'Agent Card Skeleton Grid',
-    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: [_jsx(AgentCardSkeleton, { showDate: true }), _jsx(AgentCardSkeleton, { showBadges: true }), _jsx(AgentCardSkeleton, { showDescription: true }), _jsx(AgentCardSkeleton, { showDate: true, showBadges: true, showDescription: true })] })),
-};

package/dist/stories/TextArea.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TextAreaProps } from './types/text-area';
+export declare const TextArea: React.FC<TextAreaProps>;

package/dist/stories/TextArea.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, }) => {
+    const [focused, setFocused] = useState(false);
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: `1px solid ${errorText
+                        ? 'var(--colors-light-border-border-error)'
+                        : focused
+                            ? 'var(--colors-light-border-border-component-active)'
+                            : 'var(--colors-light-border-border-component)'}`, overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', children: _jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, rows: numberOfRows, style: {
+                            border: 'none',
+                            outline: 'none',
+                            width: '100%',
+                            height: '100%',
+                            color: disabled
+                                ? 'var(--colors-light-text-text-disabled)'
+                                : 'var(--colors-light-text-text-title)',
+                            backgroundColor: 'transparent',
+                            resize: 'none',
+                        }, maxLength: maxLength, onFocus: () => setFocused(true), onBlur: () => setFocused(false) }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })) : hintText ? (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && maxLength && (_jsx(Typography, { text: `${maxLength - value.length}`, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { alignSelf: 'flex-end' } }))] })] }) }));
+};

package/dist/stories/TextArea.stories.d.ts

@@ -0,0 +1,103 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./types/text-area").TextAreaProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hintText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        errorText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onChange: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        maxLength: {
+            control: "number";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        showMaxLengthIndicator: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        numberOfRows: {
+            control: "number";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/TextArea.stories.js

@@ -0,0 +1,88 @@
+import { TextArea } from './TextArea';
+const meta = {
+    title: 'Design System/Components/TextArea',
+    component: TextArea,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The label of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'The value of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        hintText: {
+            control: 'text',
+            description: 'The hint text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        errorText: {
+            control: 'text',
+            description: 'The error text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the text input is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        onChange: {
+            description: 'The onChange function of the text input',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        maxLength: {
+            control: 'number',
+            description: 'The max length of the text input',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        showMaxLengthIndicator: {
+            control: 'boolean',
+            description: 'Whether to show the max length indicator',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        numberOfRows: {
+            control: 'number',
+            description: 'The number of rows of the text input',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Agent's name",
+        value: 'Anna',
+        onChange: () => { },
+    },
+};

package/dist/stories/TextInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TextInputProps } from './types/text-input';
+export declare const TextInput: React.FC<TextInputProps>;

package/dist/stories/TextInput.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+export const TextInput = ({ label, value, onChange, placeholder, hintText, errorText, disabled, trailingText, }) => {
+    const [focused, setFocused] = useState(false);
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
+                        ? 'none'
+                        : '1px solid var(--colors-light-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Box, { display: 'flex', flexDirection: 'row', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
+                                ? '1px solid var(--colors-light-border-border-error)'
+                                : focused
+                                    ? '1px solid var(--colors-light-border-border-component-active)'
+                                    : 'transparent'}`, children: _jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
+                                    border: 'none',
+                                    outline: 'none',
+                                    width: '100%',
+                                    color: disabled
+                                        ? 'var(--colors-light-text-text-disabled)'
+                                        : 'var(--colors-light-text-text-title)',
+                                    backgroundColor: 'transparent',
+                                }, onFocus: () => setFocused(true), onBlur: () => setFocused(false) }) }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--colors-light-border-border-component)', children: _jsx(Typography, { text: trailingText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }) }))] }), errorText && (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })), hintText && !errorText && (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' }))] }) }));
+};

package/dist/stories/TextInput.stories.d.ts

@@ -0,0 +1,85 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./types/text-input").TextInputProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hintText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        errorText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        trailingText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onChange: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/TextInput.stories.js

@@ -0,0 +1,74 @@
+import { TextInput } from './TextInput';
+const meta = {
+    title: 'Design System/Components/TextInput',
+    component: TextInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The label of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'The value of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        hintText: {
+            control: 'text',
+            description: 'The hint text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        errorText: {
+            control: 'text',
+            description: 'The error text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the text input is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        trailingText: {
+            control: 'text',
+            description: 'The trailing text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onChange: {
+            description: 'The onChange function of the text input',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Agent's name",
+        value: 'Anna',
+        onChange: () => { },
+    },
+};

package/dist/stories/types/hint-bubble.d.ts

@@ -0,0 +1,24 @@
+export declare enum HintBubbleType {
+    Info = "Info",
+    Error = "Error"
+}
+export declare enum HintBubbleSize {
+    md = "md",
+    sm = "sm"
+}
+/**
+ * HintBubble component props
+ */
+export type HintBubbleProps = {
+    /** Type variant of the hint bubble */
+    type?: HintBubbleType;
+    /** Size variant of the hint bubble */
+    size?: HintBubbleSize;
+    /** Text of the hint bubble */
+    text: string;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/hint-bubble.js

@@ -0,0 +1,10 @@
+export var HintBubbleType;
+(function (HintBubbleType) {
+    HintBubbleType["Info"] = "Info";
+    HintBubbleType["Error"] = "Error";
+})(HintBubbleType || (HintBubbleType = {}));
+export var HintBubbleSize;
+(function (HintBubbleSize) {
+    HintBubbleSize["md"] = "md";
+    HintBubbleSize["sm"] = "sm";
+})(HintBubbleSize || (HintBubbleSize = {}));

package/dist/stories/types/text-area.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Text area component props
+ */
+export type TextAreaProps = {
+    /** Text area label */
+    label: string;
+    /** Text area value */
+    value: string;
+    /** Text area onChange */
+    onChange: (value: string) => void;
+    /** Text input placeholder */
+    placeholder?: string;
+    /** Text input hint */
+    hintText?: string;
+    /** Text input error */
+    errorText?: string;
+    /** Text input disabled */
+    disabled?: boolean;
+    /** Text input max length */
+    maxLength?: number;
+    /** Text input show max length indicator */
+    showMaxLengthIndicator?: boolean;
+    /** Text input number of rows */
+    numberOfRows?: number;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/text-area.js

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

package/dist/stories/types/text-input.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Text input component props
+ */
+export type TextInputProps = {
+    /** Text input label */
+    label: string;
+    /** Text input value */
+    value: string;
+    /** Text input onChange */
+    onChange: (value: string) => void;
+    /** Text input placeholder */
+    placeholder?: string;
+    /** Text input hint */
+    hintText?: string;
+    /** Text input error */
+    errorText?: string;
+    /** Text input disabled */
+    disabled?: boolean;
+    /** Text input trailing text */
+    trailingText?: string;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/text-input.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.37",
+  "version": "0.0.38",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/stories/AgentCard.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { AgentCardProps, ComponentsProps } from './types/agent-card';
-export declare const AgentCard: React.FC<AgentCardProps>;
-export declare const Components: React.FC<ComponentsProps>;