@beydesign/storybook 0.0.29 → 0.0.31

package/dist/index.d.ts

@@ -11,6 +11,8 @@ 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 { 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';
@@ -24,3 +26,5 @@ 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';

package/dist/index.js

@@ -12,6 +12,8 @@ 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';
 // Button Types
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';
 // Badge Types
@@ -36,3 +38,5 @@ export { NavItemState, NavItemSize, } from './stories/types/nav-item';
 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';

package/dist/stories/CreditsCard.js

@@ -18,7 +18,10 @@ const StyledCard = styled.div `
     ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
     : '8px var(--spacing-tokens-size-in-px-spacing-spacing-lg)'};
   opacity: 1;
-  transition: all 0.2s ease;
+  transition:
+    padding 0.3s ease-in-out,
+    width 0.3s ease-in-out,
+    height 0.3s ease-in-out;
   width: 100%;
   height: auto;
   position: relative;
@@ -28,14 +31,19 @@ const CreditRow = styled.div `
   justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'space-between'};
   align-items: center;
   width: 100%;
+  transition: justify-content 0.3s ease-in-out;
+`;
+const TextWrapper = styled.span `
+  display: inline-block;
+  white-space: nowrap;
 `;
 export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, creditInfoText = '1 Credit = 1 min video', }) => {
     const isCollapsed = size === CreditsCardSize.Collapsed;
     return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, children: [!isCollapsed &&
                 maxCredits !== undefined &&
-                usedCredits !== undefined && (_jsxs(_Fragment, { children: [_jsxs(CreditRow, { children: [_jsxs(Box, { gap: '2px', display: "flex", flexDirection: "row", children: [_jsx(Typography, { text: "My Credits: ", size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }), _jsx(Typography, { text: `${usedCredits}/`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }), _jsx(Typography, { text: `${maxCredits}`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)" })] }), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
+                usedCredits !== undefined && (_jsxs(_Fragment, { children: [_jsxs(CreditRow, { children: [_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { text: "My Credits: ", size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { text: `${usedCredits}/`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { text: `${maxCredits}`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)" }) })] }), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
                                         if (onUpgradeClick) {
                                             onUpgradeClick();
                                         }
-                                    } }) })] }), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(Typography, { text: creditInfoText, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsx(_Fragment, { children: _jsx(CreditRow, { "$collapsed": true, children: _jsx(Box, { display: "flex", flexDirection: "row", gap: "2px", children: _jsx(Typography, { text: `${usedCredits}`, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }) }) }))] }));
+                                    } }) })] }), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { text: creditInfoText, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }) }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsx(_Fragment, { children: _jsx(CreditRow, { "$collapsed": true, children: _jsx(Box, { display: "flex", flexDirection: "row", gap: "2px", children: _jsx(TextWrapper, { children: _jsx(Typography, { text: `${usedCredits}`, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }) }) }) }))] }));
 };

package/dist/stories/Menu.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<import("./types/menu").MenuProps>;
+    component: import("react").FC<import("..").MenuProps>;
     parameters: {
         layout: string;
     };

package/dist/stories/NavItem.js

@@ -12,12 +12,12 @@ const StyledNavItem = styled.div `
   flex-direction: row;
   align-items: center;
   gap: 12px;
-  padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '0px 28px 0px 0px' : '0px 60px 0px 0px'};
+  padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '0px 22px 0px 0px' : '0px 60px 0px 0px'};
   border-radius: 8px;
   cursor: ${({ $state }) => $state === NavItemState.Disabled ? 'not-allowed' : 'pointer'};
   opacity: ${({ $state }) => ($state === NavItemState.Disabled ? 0.5 : 1)};
-  transition: color 0.2s ease;
-  justify-content: ${({ $size }) => $size === NavItemSize.Collapsed ? 'space-between' : 'flex-start'};
+  transition: padding 0.3s ease-in-out;
+  justify-content: ${({ $size }) => $size === NavItemSize.Collapsed ? 'center' : 'flex-start'};
 
   &:hover {
     .nav-item-icon {
@@ -39,7 +39,11 @@ const IconWrapper = styled.span `
   color: ${({ $state }) => $state === NavItemState.Active
     ? 'var(--colors-light-background-bg-brand)'
     : 'var(--primitives-desktop-primary-gray-500)'};
-  transition: color 0.2s ease;
+  transition: color 0.3s ease-in-out;
+`;
+const TextWrapper = styled.span `
+  display: inline-block;
+  white-space: nowrap;
 `;
 export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavItemSize.Expanded, showBadge = false, onClick, className, }) => {
     const handleClick = () => {
@@ -50,11 +54,11 @@ export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavIt
     const isCollapsed = size === NavItemSize.Collapsed;
     return (_jsxs(StyledNavItem, { "$state": state, "$size": size, onClick: handleClick, className: className, title: isCollapsed ? text : undefined, children: [_jsx("svg", { width: "5", height: "36", viewBox: "0 0 5 36", fill: state === NavItemState.Active
                     ? 'var(--colors-light-background-bg-brand)'
-                    : 'transparent', xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 0C2.76142 0 5 2.23858 5 5V31C5 33.7614 2.76142 36 0 36V0Z" }) }), _jsxs(Box, { display: "flex", alignItems: 'center', gap: '8px', children: [_jsx(IconWrapper, { className: "nav-item-icon", "$state": state, children: getIconComponent(icon, {
+                    : 'transparent', xmlns: "http://www.w3.org/2000/svg", style: { transition: 'fill 0.3s ease-in-out' }, children: _jsx("path", { d: "M0 0C2.76142 0 5 2.23858 5 5V31C5 33.7614 2.76142 36 0 36V0Z" }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "8px", sx: { transition: 'gap 0.3s ease-in-out' }, children: [_jsx(IconWrapper, { className: "nav-item-icon", "$state": state, children: getIconComponent(icon, {
                             size: 20,
-                        }) }), !isCollapsed && (_jsx("span", { className: "nav-item-text", children: _jsx(Typography, { text: text, size: TypographySize.TextS, weight: state === NavItemState.Active
+                        }) }), !isCollapsed && (_jsx(TextWrapper, { className: "nav-item-text", children: _jsx(Typography, { text: text, size: TypographySize.TextS, weight: state === NavItemState.Active
                                 ? TypographyWeight.Medium
                                 : TypographyWeight.Regular, className: "nav-item-text", color: state === NavItemState.Active
                                 ? 'var(--colors-light-background-bg-brand)'
-                                : 'var(--colors-light-text-text-subtle)' }) })), showBadge && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", text: isCollapsed ? '' : 'Coming Soon', color: BadgeColor.Default }))] })] }));
+                                : 'var(--colors-light-text-text-subtle)' }) })), showBadge && !isCollapsed && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", text: "Coming Soon", color: BadgeColor.Default }))] })] }));
 };

package/dist/stories/Sidebar.js

@@ -20,8 +20,8 @@ const StyledSidebar = styled.div `
   background-color: var(--colors-light-background-bg-surface);
   border-right: 1px solid var(--colors-light-border-border-default);
   height: 100vh;
-  width: 100%;
-  transition: width 0.3s ease;
+  width: ${({ $size }) => ($size === SidebarSize.Expanded ? 'auto' : '64px')};
+  transition: width 0.3s ease-in-out;
   overflow-x: hidden;
   overflow-y: scroll;
   position: relative;
@@ -40,6 +40,7 @@ const LogoContainer = styled.div `
   margin-bottom: 32px;
   min-height: 38px;
   height: 38px;
+  transition: all 0.3s ease-in-out;
 `;
 const ToggleButtonWrapper = styled.div `
   position: absolute;
@@ -50,6 +51,7 @@ const ToggleButtonWrapper = styled.div `
   visibility: visible;
   filter: drop-shadow(0px 2px 4px rgba(29, 20, 40, 0.08));
   contain: layout;
+  transition: transform 0.3s ease-in-out;
 `;
 const NavItemsContainer = styled.div `
   display: flex;
@@ -61,6 +63,7 @@ const NavSection = styled.div `
   display: flex;
   flex-direction: column;
   gap: 8px;
+  transition: all 0.3s ease-in-out;
 `;
 const SectionTitle = styled.div `
   color: var(--colors-light-text-text-subtle);
@@ -68,6 +71,7 @@ const SectionTitle = styled.div `
   display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'flex' : 'block'};
   opacity: ${({ $size }) => ($size === SidebarSize.Collapsed ? 0 : 0.5)};
   justify-content: ${({ $size }) => $size === SidebarSize.Collapsed ? 'center' : 'flex-start'};
+  transition: all 0.3s ease-in-out;
 `;
 const Separator = styled.div `
   height: 0.31px;
@@ -75,9 +79,11 @@ const Separator = styled.div `
   padding: 0 28px;
   margin: 10px;
   opacity: 0.05;
+  transition: all 0.3s ease-in-out;
 `;
 const BottomContainer = styled.div `
   margin-top: 16px;
+  transition: all 0.3s ease-in-out;
 `;
 // Wrapper component to handle links
 const NavItemWrapper = ({ item, isCollapsed, }) => {

package/package.json

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