@beydesign/storybook 0.0.37 → 0.0.39

package/dist/index.d.ts

@@ -1,32 +1,10 @@
-export { MainButton } from './stories/Button';
-export { Avatar } from './stories/Avatar';
-export { Typography } from './stories/Typography';
-export { Badge } from './stories/Bagde';
-export { Checkbox } from './stories/Checkbox';
-export { ToggleButtonGroup } from './stories/ToggleButtonGroup';
-export { ProgressIndicator } from './stories/ProgressIndicator';
-export { Logo } from './stories/Logo';
-export { Toggle } from './stories/Toggle';
-export { Header } from './stories/Header';
-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 { 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';
-export { TypographySize, TypographyWeight, type TypographyProps, } from './stories/types/typography';
-export { CheckboxType, type CheckboxProps } from './stories/types/checkbox';
-export { ToggleButtonGroupSize, type ToggleButtonGroupProps, } from './stories/types/toggle-button-group';
-export { ProgressIndicatorMode, type ProgressIndicatorProps, } from './stories/types/progress-indicator';
-export { LogoVariant, type LogoProps } from './stories/types/logo';
-export { TogglePosition, type ToggleProps } from './stories/types/toggle';
-export { type HeaderProps } from './stories/types/header';
-export { NavItemState, NavItemSize, type NavItemProps, } from './stories/types/nav-item';
-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 * from './stories/UI';
+export * from './stories/Agent';
+export * from './stories/Form';
+export * from './stories/Buttons';
+export * from './stories/Typography';
+export * from './stories/Credits';
+export * from './stories/Foundations';
+export * from './stories/Navigation';
+export * from './stories/Typography';
+export * from './stories/UI';

package/dist/index.js

@@ -1,43 +1,10 @@
-// Components
-export { MainButton } from './stories/Button';
-export { Avatar } from './stories/Avatar';
-export { Typography } from './stories/Typography';
-export { Badge } from './stories/Bagde';
-export { Checkbox } from './stories/Checkbox';
-export { ToggleButtonGroup } from './stories/ToggleButtonGroup';
-export { ProgressIndicator } from './stories/ProgressIndicator';
-export { Logo } from './stories/Logo';
-export { Toggle } from './stories/Toggle';
-export { Header } from './stories/Header';
-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';
-// Button Types
-export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';
-// Badge Types
-export { BadgeColor, BadgeSize } from './stories/types/badge';
-// Avatar Types
-export { AvatarStyle, AvatarSize, } from './stories/types/avatar';
-// Typography Types
-export { TypographySize, TypographyWeight, } from './stories/types/typography';
-// Checkbox Types
-export { CheckboxType } from './stories/types/checkbox';
-// Toggle Button Group Types
-export { ToggleButtonGroupSize, } from './stories/types/toggle-button-group';
-// Progress Indicator Types
-export { ProgressIndicatorMode, } from './stories/types/progress-indicator';
-// Logo Types
-export { LogoVariant } from './stories/types/logo';
-// Toggle Types
-export { TogglePosition } from './stories/types/toggle';
-// NavItem Types
-export { NavItemState, NavItemSize, } from './stories/types/nav-item';
-// Card Types
-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';
+export * from './stories/UI';
+export * from './stories/Agent';
+export * from './stories/Form';
+export * from './stories/Buttons';
+export * from './stories/Typography';
+export * from './stories/Credits';
+export * from './stories/Foundations';
+export * from './stories/Navigation';
+export * from './stories/Typography';
+export * from './stories/UI';

package/dist/stories/Agent/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 → Agent/AgentCard.js}

@@ -1,19 +1,12 @@
 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, TypographySize, TypographyWeight } from '../Typography';
+import { Toggle, TogglePosition } from '../Form';
+import { Badge, ProgressIndicator, ProgressIndicatorMode, BadgeColor, BadgeSize, Menu, } from '../UI';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
 import { ArrowsCounterClockwise } from '@phosphor-icons/react';
-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 +71,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 → Agent/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/Agent/AgentCardSkeleton.d.ts

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

package/dist/stories/{SkeletonLoader.js → Agent/AgentCardSkeleton.js}

@@ -1,22 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } 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: {
-            background: 'linear-gradient(90deg, var(--colors-light-background-bg-element) 25%, var(--colors-light-background-bg-component) 50%, var(--colors-light-background-bg-element) 75%)',
-            backgroundSize: '200% 100%',
-            animation: `shimmer ${animationDuration}s infinite linear`,
-            ...style,
-        }, children: _jsx("style", { children: `
-        @keyframes shimmer {
-          0% {
-            background-position: 200% 0;
-          }
-          100% {
-            background-position: -200% 0;
-          }
-        }
-      ` }) }));
-};
+import { SkeletonLoader } from '../UI';
 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 → Agent/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 → Agent/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/Agent/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AgentCard';
+export * from './AgentCardSkeleton';
+export * from './types';

package/dist/stories/Agent/index.js

@@ -0,0 +1,3 @@
+export * from './AgentCard';
+export * from './AgentCardSkeleton';
+export * from './types';

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

@@ -1,4 +1,4 @@
-import { MenuItemProps } from './menu';
+import { MenuItemProps } from '../UI';
 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/Buttons/MainButton.d.ts

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

package/dist/stories/{Button.js → Buttons/MainButton.js}

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircularProgress } from '@mui/material';
 import styled from '@emotion/styled';
-import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './types/button';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
-import { getIconComponent } from '../utils/icon';
+import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
 const StyledButton = styled.button `
   text-transform: none;
   padding: ${(props) => props.$displayIconMode === ButtonDisplayMode.Only
@@ -285,6 +284,3 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
     };
     return (_jsx(StyledButton, { onClick: onClick, type: type, disabled: state === ButtonState.Disabled || disabled, "$size": size, "$hierarchy": hierarchy, "$state": state, "$shape": shape, "$destructive": destructive, "$disabled": disabled, "$displayIconMode": displayIconMode, "$sizeStyles": sizeStyles, style: style, children: renderContent() }));
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Buttons" }), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: [_jsxs("div", { children: [_jsx("h2", { children: "Size: xl, Hierarchy: Primary" }), _jsx(MainButton, { text: "Primary Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, destructive: false, showLeadingIcon: true, showTrailingIcon: true, leadingIcon: "Circle", trailingIcon: "Circle", onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "White Variant with Icons" }), _jsx(MainButton, { text: "White Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, showLeadingIcon: true, showTrailingIcon: true, leadingIcon: "Circle", trailingIcon: "Circle", onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Loading State" }), _jsx(MainButton, { text: "Loading Button", loading: true, size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Disabled State" }), _jsx(MainButton, { text: "Disabled Button", disabled: true, size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Destructive Button" }), _jsx(MainButton, { text: "Destructive Button", destructive: true, size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Leading Icon Only" }), _jsx(MainButton, { text: "Leading Icon Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, showLeadingIcon: true, showTrailingIcon: false, leadingIcon: "Circle", onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Trailing Icon Only" }), _jsx(MainButton, { text: "Trailing Icon Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, showLeadingIcon: false, showTrailingIcon: true, trailingIcon: "Circle", onClick: () => console.log('clicked') })] })] })] }));
-};

package/dist/stories/{Button.stories.d.ts → Buttons/MainButton.stories.d.ts}

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

package/dist/stories/{Button.stories.js → Buttons/MainButton.stories.js}

@@ -1,10 +1,7 @@
-import { MainButton } from './Button';
-import { ButtonShape, ButtonState } from './types/button';
-import { ButtonDisplayMode } from './types/button';
-import { ButtonHierarchy } from './types/button';
-import { ButtonSize } from './types/button';
+import { MainButton } from './MainButton';
+import { ButtonHierarchy, ButtonSize, ButtonState, ButtonDisplayMode, ButtonShape, } from './types';
 const meta = {
-    title: 'Design System/Components/Button',
+    title: 'Design System/Components/Buttons/MainButton',
     component: MainButton,
     parameters: {
         layout: 'centered',

package/dist/stories/Buttons/ToggleButtonGroup.d.ts

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

package/dist/stories/{ToggleButtonGroup.js → Buttons/ToggleButtonGroup.js}

@@ -1,8 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToggleButtonGroupSize, } from './types/toggle-button-group';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggleButtonGroupSize, ButtonHierarchy, ButtonSize, ButtonType, } from './types';
 import { Box } from '@mui/material';
-import { MainButton } from './Button';
-import { ButtonHierarchy, ButtonSize, ButtonType, } from './types/button';
+import { MainButton } from './MainButton';
 export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled, size = ToggleButtonGroupSize.lg, }) => {
     const selectedOptionStyle = {
         backgroundColor: 'var(--colors-light-background-bg-card-highlight-hover)',
@@ -32,6 +31,3 @@ export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled,
             return (_jsx(MainButton, { text: option, onClick: () => onChange(option), size: getButtonSize(), hierarchy: ButtonHierarchy.Tetriary, type: ButtonType.Button, style: isSelected ? selectedOptionStyle : unselectedOptionStyle, disabled: disabled }, option));
         }) }));
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Toggle Buttons" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsx(ToggleButtonGroup, { options: ['Option 1', 'Option 2', 'Option 3'], selectedOption: "Option 1", onChange: () => { } }) })] }));
-};

package/dist/stories/{ToggleButtonGroup.stories.js → Buttons/ToggleButtonGroup.stories.js}

@@ -1,7 +1,7 @@
 import { ToggleButtonGroup } from './ToggleButtonGroup';
-import { ToggleButtonGroupSize } from './types/toggle-button-group';
+import { ToggleButtonGroupSize } from './types';
 const meta = {
-    title: 'Design System/Components/ToggleButtonGroup',
+    title: 'Design System/Components/Buttons/ToggleButtonGroup',
     component: ToggleButtonGroup,
     parameters: {
         layout: 'centered',

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

@@ -0,0 +1,3 @@
+export * from './MainButton';
+export * from './ToggleButtonGroup';
+export * from './types';

package/dist/stories/Buttons/index.js

@@ -0,0 +1,3 @@
+export * from './MainButton';
+export * from './ToggleButtonGroup';
+export * from './types';

package/dist/stories/{types/button.d.ts → Buttons/types.d.ts}

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import { IconName } from '../../utils/icon';
+import { IconName } from '../../utils';
 /**
  * Button size variants
  */
@@ -100,7 +100,25 @@ export interface MainButtonProps {
     trailingIcon?: IconName;
 }
 /**
- * Props for the Components wrapper
+ * Toggle button size variants
  */
-export interface ComponentsProps {
+export declare enum ToggleButtonGroupSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm"
 }
+/**
+ * Toggle button component props
+ */
+export type ToggleButtonGroupProps = {
+    /** Size variant of the toggle button */
+    size?: ToggleButtonGroupSize;
+    /** Selected option of the toggle button */
+    selectedOption: string;
+    /** Options of the toggle button */
+    options: string[];
+    /** Whether the toggle button is disabled */
+    disabled?: boolean;
+    /** Callback function when the toggle button is selected */
+    onChange: (option: string) => void;
+};

package/dist/stories/{types/button.js → Buttons/types.js}

@@ -56,3 +56,12 @@ export var ButtonType;
     ButtonType["Submit"] = "submit";
     ButtonType["Reset"] = "reset";
 })(ButtonType || (ButtonType = {}));
+/**
+ * Toggle button size variants
+ */
+export var ToggleButtonGroupSize;
+(function (ToggleButtonGroupSize) {
+    ToggleButtonGroupSize["lg"] = "lg";
+    ToggleButtonGroupSize["md"] = "md";
+    ToggleButtonGroupSize["sm"] = "sm";
+})(ToggleButtonGroupSize || (ToggleButtonGroupSize = {}));

package/dist/stories/{CreditsCard.d.ts → Credits/CreditsCard.d.ts}

@@ -1,3 +1,3 @@
 import React from 'react';
-import { CreditsCardProps } from './types/credits-card';
+import { CreditsCardProps } from './types';
 export declare const CreditsCard: React.FC<CreditsCardProps>;

package/dist/stories/{CreditsCard.js → Credits/CreditsCard.js}

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from '@emotion/styled';
-import { CreditsCardSize } from './types/credits-card';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { CreditsCardSize } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Box } from '@mui/material';
-import { MainButton } from './Button';
-import { ButtonHierarchy, ButtonSize } from './types/button';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
 const StyledCard = styled.div `
   display: flex;
   flex-direction: column;

package/dist/stories/{CreditsCard.stories.js → Credits/CreditsCard.stories.js}

@@ -1,7 +1,7 @@
 import { CreditsCard } from './CreditsCard';
-import { CreditsCardSize } from './types/credits-card';
+import { CreditsCardSize } from './types';
 const meta = {
-    title: 'Design System/Components/CreditsCard',
+    title: 'Design System/Components/Credits/CreditsCard',
     component: CreditsCard,
     parameters: {
         layout: 'centered',

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

@@ -0,0 +1,2 @@
+export * from './CreditsCard';
+export * from './types';

package/dist/stories/Credits/index.js

@@ -0,0 +1,2 @@
+export * from './CreditsCard';
+export * from './types';

package/dist/stories/{Checkbox.d.ts → Form/Checkbox.d.ts}

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

package/dist/stories/{Checkbox.js → Form/Checkbox.js}

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Checkbox as MuiCheckbox } from '@mui/material';
-import { CheckboxType } from './types/checkbox';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { CheckboxType } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
 export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disabled, required, onChange, }) => {
     const props = {
         checked,

package/dist/stories/{Checkbox.stories.js → Form/Checkbox.stories.js}

@@ -1,7 +1,7 @@
 import { Checkbox } from './Checkbox';
-import { CheckboxType } from './types/checkbox';
+import { CheckboxType } from './types';
 const meta = {
-    title: 'Design System/Components/Checkbox',
+    title: 'Design System/Components/Form/Checkbox',
     component: Checkbox,
     parameters: {
         layout: 'centered',

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

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

package/dist/stories/Form/TextArea.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../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/Form/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").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;