@beydesign/storybook 0.0.21 → 0.0.23

package/dist/index.d.ts

@@ -8,6 +8,9 @@ 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 { 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';
@@ -18,3 +21,6 @@ export { ProgressIndicatorMode, type ProgressIndicatorProps, } from './stories/t
 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';

package/dist/index.js

@@ -9,6 +9,9 @@ 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';
 // Button Types
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';
 // Badge Types
@@ -27,3 +30,9 @@ export { ProgressIndicatorMode, } from './stories/types/progress-indicator';
 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';

package/dist/stories/CreditsCard.d.ts

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

package/dist/stories/CreditsCard.js

@@ -0,0 +1,45 @@
+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 { Box } from '@mui/material';
+import { MainButton } from './Button';
+import { ButtonHierarchy, ButtonSize } from './types/button';
+const StyledCard = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ $size }) => ($size === CreditsCardSize.Collapsed ? '8px' : '16px')};
+  padding: ${({ $size }) => $size === CreditsCardSize.Collapsed ? '20px 16px' : '24px'};
+  background-color: var(--colors-light-background-bg-card-highlight);
+  border: 1px solid var(--colors-light-border-border-default);
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md);
+  padding: ${({ $collapsed }) => $collapsed
+    ? '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;
+  width: 100%;
+  height: auto;
+  position: relative;
+`;
+const CreditRow = styled.div `
+  display: flex;
+  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'space-between'};
+  align-items: center;
+  width: 100%;
+`;
+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: () => {
+                                        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 && (_jsxs(_Fragment, { children: [_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_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(CreditRow, { "$collapsed": true, children: _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.sm, style: { padding: '0' }, onClick: () => {
+                                    if (onUpgradeClick) {
+                                        onUpgradeClick();
+                                    }
+                                } }) }) })] }))] }));
+};

package/dist/stories/CreditsCard.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CreditsCard } from './CreditsCard';
+declare const meta: Meta<typeof CreditsCard>;
+export default meta;
+type Story = StoryObj<typeof CreditsCard>;
+export declare const Default: Story;
+export declare const Collapsed: Story;

package/dist/stories/CreditsCard.stories.js

@@ -0,0 +1,31 @@
+import { CreditsCard } from './CreditsCard';
+import { CreditsCardSize } from './types/credits-card';
+const meta = {
+    title: 'Design System/Components/CreditsCard',
+    component: CreditsCard,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: Object.values(CreditsCardSize),
+        },
+        maxCredits: { control: 'number' },
+        usedCredits: { control: 'number' },
+        creditInfoText: { control: 'text' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        size: CreditsCardSize.Expanded,
+    },
+};
+export const Collapsed = {
+    args: {
+        ...Default.args,
+        size: CreditsCardSize.Collapsed,
+    },
+};

package/dist/stories/NavItem.d.ts

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

package/dist/stories/NavItem.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import * as PhosphorIcons from '@phosphor-icons/react';
+import { NavItemState, NavItemSize } from './types/nav-item';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+import { Badge } from './Bagde';
+import { BadgeColor, BadgeSize } from './types/badge';
+import { Box } from '@mui/material';
+const getIconComponent = (iconName, props) => {
+    const Icon = PhosphorIcons[iconName];
+    return Icon ? _jsx(Icon, { ...props }) : null;
+};
+const StyledNavItem = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '0px 28px 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 ? 'center' : 'flex-start'};
+
+  &:hover {
+    .nav-item-icon {
+      color: ${({ $state }) => $state === NavItemState.Disabled
+    ? 'var(--primitives-desktop-primary-gray-500)'
+    : 'var(--colors-light-background-bg-brand-hover)'} !important;
+    }
+
+    .nav-item-text {
+      color: ${({ $state }) => $state === NavItemState.Disabled
+    ? 'var(--primitives-desktop-primary-gray-500)'
+    : 'var(--colors-light-background-bg-brand-hover)'} !important;
+    }
+  }
+`;
+// Custom styled span to handle icon color changes
+const IconWrapper = styled.span `
+  display: inline-flex;
+  color: ${({ $state }) => $state === NavItemState.Active
+    ? 'var(--colors-light-background-bg-brand)'
+    : 'var(--primitives-desktop-primary-gray-500)'};
+  transition: color 0.2s ease;
+`;
+export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavItemSize.Expanded, showBadge = false, onClick, className, }) => {
+    const handleClick = () => {
+        if (state !== NavItemState.Disabled && onClick) {
+            onClick();
+        }
+    };
+    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, {
+                            size: 20,
+                        }) }), !isCollapsed && (_jsx("span", { 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 }))] })] }));
+};

package/dist/stories/NavItem.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NavItem } from './NavItem';
+declare const meta: Meta<typeof NavItem>;
+export default meta;
+type Story = StoryObj<typeof NavItem>;
+export declare const Default: Story;
+export declare const Active: Story;
+export declare const Disabled: Story;
+export declare const Expanded: Story;
+export declare const Collapsed: Story;
+export declare const WithComingSoonBadge: Story;
+export declare const SidebarExpanded: Story;
+export declare const SidebarCollapsed: Story;
+export declare const DifferentIcons: Story;

package/dist/stories/NavItem.stories.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavItem } from './NavItem';
+import { NavItemState, NavItemSize } from './types/nav-item';
+const meta = {
+    title: 'Design System/Components/NavItem',
+    component: NavItem,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: { control: 'text' },
+        icon: { control: 'text' },
+        state: {
+            control: 'select',
+            options: Object.values(NavItemState),
+        },
+        size: {
+            control: 'select',
+            options: Object.values(NavItemSize),
+        },
+        showBadge: { control: 'boolean' },
+        onClick: { action: 'clicked' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'Navigation Item',
+        icon: 'House',
+        state: NavItemState.Default,
+        size: NavItemSize.Expanded,
+        showBadge: false,
+    },
+};
+export const Active = {
+    args: {
+        text: 'Active Item',
+        icon: 'House',
+        state: NavItemState.Active,
+        size: NavItemSize.Expanded,
+        showBadge: false,
+    },
+};
+export const Disabled = {
+    args: {
+        text: 'Disabled Item',
+        icon: 'House',
+        state: NavItemState.Disabled,
+        size: NavItemSize.Expanded,
+        showBadge: false,
+    },
+};
+export const Expanded = {
+    args: {
+        text: 'Expanded Item',
+        icon: 'House',
+        size: NavItemSize.Expanded,
+        showBadge: false,
+    },
+};
+export const Collapsed = {
+    args: {
+        text: 'Collapsed Item',
+        icon: 'House',
+        size: NavItemSize.Collapsed,
+        showBadge: false,
+    },
+};
+export const WithComingSoonBadge = {
+    args: {
+        text: 'New Feature',
+        icon: 'Sparkle',
+        showBadge: true,
+    },
+};
+export const SidebarExpanded = {
+    render: () => (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            padding: '16px',
+            backgroundColor: 'var(--colors-light-background-bg-white)',
+            borderRadius: '8px',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+        }, children: [_jsx(NavItem, { text: "Home", icon: "House", size: NavItemSize.Expanded, state: NavItemState.Active }), _jsx(NavItem, { text: "Settings", icon: "Gear", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Notifications", icon: "Bell", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Messages", icon: "ChatText", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Profile", icon: "User", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Analytics", icon: "ChartBar", size: NavItemSize.Expanded, showBadge: true, state: NavItemState.Disabled })] })),
+};
+export const SidebarCollapsed = {
+    render: () => (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            backgroundColor: 'var(--colors-light-background-bg-white)',
+            borderRadius: '8px',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+        }, children: [_jsx(NavItem, { text: "Home", icon: "House", size: NavItemSize.Collapsed, state: NavItemState.Active }), _jsx(NavItem, { text: "Settings", icon: "Gear", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Notifications", icon: "Bell", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Messages", icon: "ChatText", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Profile", icon: "User", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Analytics", icon: "ChartBar", state: NavItemState.Disabled, size: NavItemSize.Collapsed })] })),
+};
+export const DifferentIcons = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx(NavItem, { text: "Home", icon: "House" }), _jsx(NavItem, { text: "Settings", icon: "Gear" }), _jsx(NavItem, { text: "Notifications", icon: "Bell" }), _jsx(NavItem, { text: "Messages", icon: "ChatText" }), _jsx(NavItem, { text: "Profile", icon: "User" }), _jsx(NavItem, { text: "Analytics", icon: "ChartBar", showBadge: true })] })),
+};

package/dist/stories/Sidebar.d.ts

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

package/dist/stories/Sidebar.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import { Box } from '@mui/material';
+import { NavItem } from './NavItem';
+import { Logo } from './Logo';
+import { CreditsCard } from './CreditsCard';
+import { SidebarSize } from './types/sidebar';
+import { NavItemState, NavItemSize } from './types/nav-item';
+import { LogoVariant } from './types/logo';
+import { CreditsCardSize } from './types/credits-card';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+import { MainButton } from './Button';
+import { ButtonDisplayMode, ButtonHierarchy, ButtonShape, } from './types/button';
+import { ButtonSize } from './types/button';
+const StyledSidebar = styled.div `
+  display: flex;
+  flex-direction: column;
+  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;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: relative;
+  padding: 24px 0;
+`;
+const LogoContainer = styled.div `
+  display: flex;
+  justify-content: ${({ $size }) => $size === SidebarSize.Expanded ? 'flex-start' : 'center'};
+  padding: ${({ $size }) => ($size === SidebarSize.Expanded ? '0 24px' : '0')};
+  margin-bottom: 32px;
+  height: 38px;
+  position: relative;
+`;
+const ToggleButtonWrapper = styled.div `
+  position: absolute;
+  top: 0.2rem;
+  right: -1rem;
+  z-index: 10;
+  transform: translateZ(0);
+`;
+const NavItemsContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 16px;
+  flex: 1;
+`;
+const NavSection = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const SectionTitle = styled.div `
+  color: var(--colors-light-text-text-subtle);
+  opacity: 0.5;
+  padding: ${({ $size }) => $size === SidebarSize.Expanded ? '8px 12px' : '8px 0'};
+  display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'none' : 'block'};
+`;
+const Separator = styled.div `
+  height: 0.31px;
+  background-color: var(--primitives-desktop-primary-brand-violet-950);
+  padding: 0 28px;
+  margin: 10px;
+  opacity: 0.05;
+`;
+const BottomContainer = styled.div `
+  padding: 0 16px;
+  margin-top: 16px;
+`;
+// Wrapper component to handle links
+const NavItemWrapper = ({ item, isCollapsed, }) => {
+    const handleClick = () => {
+        if (item.link) {
+            window.location.href = item.link;
+        }
+        else if (item.onClick) {
+            item.onClick();
+        }
+    };
+    return (_jsx(NavItem, { text: item.text, icon: item.icon, state: item.state || NavItemState.Default, size: isCollapsed ? NavItemSize.Collapsed : NavItemSize.Expanded, showBadge: item.showBadge, onClick: handleClick }));
+};
+export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, onToggle, logoProps = {}, }) => {
+    const [sidebarSize, setSidebarSize] = useState(size);
+    const handleToggle = () => {
+        const newSize = sidebarSize === SidebarSize.Expanded
+            ? SidebarSize.Collapsed
+            : SidebarSize.Expanded;
+        setSidebarSize(newSize);
+        if (onToggle) {
+            onToggle(newSize);
+        }
+    };
+    const isCollapsed = sidebarSize === SidebarSize.Collapsed;
+    return (_jsxs(StyledSidebar, { "$size": sidebarSize, className: className, children: [_jsxs(LogoContainer, { "$size": sidebarSize, children: [_jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }), _jsx(ToggleButtonWrapper, { children: isCollapsed ? (_jsx(MainButton, { text: "Expand", size: ButtonSize.xxs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretRight", onClick: handleToggle, shape: ButtonShape.Circle, hierarchy: ButtonHierarchy.Tetriary, style: {
+                                boxShadow: '2px 4px 8px 0px #1D142814',
+                            } })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tetriary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
+                                boxShadow: '2px 4px 8px 0px #1D142814',
+                            }, shape: ButtonShape.Circle })) })] }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { text: section.title, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--primitives-desktop-primary-gray-700)" }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), section.showSeparator && sectionIndex < navSections.length - 1 && (_jsx(Separator, {}))] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [credits && (_jsx(CreditsCard, { size: isCollapsed
+                                ? CreditsCardSize.Collapsed
+                                : CreditsCardSize.Expanded, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, creditInfoText: credits.creditInfoText, onUpgradeClick: credits.onUpgradeClick })), bottomNavItems.map((item, index) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `bottom-${item.text}-${index}`)))] }) })] }));
+};

package/dist/stories/Sidebar.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Sidebar } from './Sidebar';
+declare const meta: Meta<typeof Sidebar>;
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+export declare const Expanded: Story;
+export declare const Collapsed: Story;
+export declare const WithoutCredits: Story;
+export declare const CustomSections: Story;

package/dist/stories/Sidebar.stories.js

@@ -0,0 +1,234 @@
+import { Sidebar } from './Sidebar';
+import { SidebarSize } from './types/sidebar';
+import { NavItemState } from './types/nav-item';
+const meta = {
+    title: 'Design System/Components/Sidebar',
+    component: Sidebar,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: Object.values(SidebarSize),
+        },
+        logoProps: {
+            control: 'object',
+        },
+    },
+};
+export default meta;
+const defaultNavSections = [
+    {
+        title: '',
+        items: [
+            {
+                text: 'Home',
+                icon: 'House',
+                state: NavItemState.Default,
+                link: '#/home',
+            },
+        ],
+        showSeparator: true,
+    },
+    {
+        title: '',
+        items: [
+            {
+                text: 'Avatars',
+                icon: 'UserFocus',
+                state: NavItemState.Default,
+                link: '#/avatars',
+            },
+        ],
+        showSeparator: true,
+    },
+    {
+        title: 'Videos',
+        items: [
+            {
+                text: 'Text-to-Video',
+                icon: 'VideoCamera',
+                state: NavItemState.Active,
+                link: '#/text-to-video',
+            },
+            {
+                text: 'Outreach Campaigns',
+                icon: 'UsersFour',
+                state: NavItemState.Default,
+                link: '#/outreach-campaigns',
+            },
+        ],
+        showSeparator: true,
+    },
+    {
+        title: 'Conversational Agents',
+        items: [
+            {
+                text: 'My Agents',
+                icon: 'Headset',
+                state: NavItemState.Default,
+                link: '#/my-agents',
+            },
+            {
+                text: 'Knowledge Base',
+                icon: 'Book',
+                state: NavItemState.Default,
+                link: '#/knowledge-base',
+            },
+            {
+                text: 'Conversations',
+                icon: 'ChatCircle',
+                state: NavItemState.Default,
+                link: '#/conversations',
+            },
+        ],
+        showSeparator: true,
+    },
+    {
+        title: 'Analytics',
+        items: [
+            {
+                text: 'Analytics',
+                icon: 'ChartLine',
+                state: NavItemState.Default,
+                showBadge: true,
+                link: '#/analytics',
+            },
+        ],
+    },
+];
+const defaultBottomNavItems = [
+    {
+        text: 'My account',
+        icon: 'Gear',
+        link: '#/account',
+    },
+    {
+        text: 'Feedback',
+        icon: 'ChatCircle',
+        link: '#/feedback',
+    },
+];
+export const Expanded = {
+    args: {
+        size: SidebarSize.Expanded,
+        navSections: defaultNavSections,
+        bottomNavItems: defaultBottomNavItems,
+        credits: {
+            maxCredits: 50,
+            usedCredits: 10,
+            creditInfoText: '1 Credit = 1 min video',
+        },
+    },
+};
+export const Collapsed = {
+    args: {
+        size: SidebarSize.Collapsed,
+        navSections: defaultNavSections,
+        bottomNavItems: defaultBottomNavItems,
+        credits: {
+            maxCredits: 50,
+            usedCredits: 10,
+            creditInfoText: '1 Credit = 1 min video',
+        },
+    },
+};
+export const WithoutCredits = {
+    args: {
+        size: SidebarSize.Expanded,
+        navSections: defaultNavSections,
+        bottomNavItems: defaultBottomNavItems,
+    },
+};
+export const CustomSections = {
+    args: {
+        size: SidebarSize.Expanded,
+        navSections: [
+            {
+                title: 'Main Navigation',
+                items: [
+                    {
+                        text: 'Dashboard',
+                        icon: 'ChartPie',
+                        state: NavItemState.Default,
+                        link: '#/dashboard',
+                    },
+                    {
+                        text: 'Projects',
+                        icon: 'FolderOpen',
+                        state: NavItemState.Active,
+                        link: '#/projects',
+                    },
+                    {
+                        text: 'Calendar',
+                        icon: 'Calendar',
+                        state: NavItemState.Default,
+                        link: '#/calendar',
+                    },
+                ],
+                showSeparator: true,
+            },
+            {
+                title: 'Content',
+                items: [
+                    {
+                        text: 'Media Library',
+                        icon: 'Image',
+                        state: NavItemState.Default,
+                        link: '#/media',
+                    },
+                    {
+                        text: 'Documents',
+                        icon: 'File',
+                        state: NavItemState.Default,
+                        link: '#/documents',
+                    },
+                ],
+                showSeparator: true,
+            },
+            {
+                title: 'Settings',
+                items: [
+                    {
+                        text: 'Account Settings',
+                        icon: 'Gear',
+                        state: NavItemState.Default,
+                        link: '#/settings/account',
+                    },
+                    {
+                        text: 'Team Members',
+                        icon: 'Users',
+                        state: NavItemState.Default,
+                        link: '#/settings/team',
+                    },
+                    {
+                        text: 'Notifications',
+                        icon: 'Bell',
+                        state: NavItemState.Default,
+                        showBadge: true,
+                        link: '#/settings/notifications',
+                    },
+                ],
+            },
+        ],
+        bottomNavItems: [
+            {
+                text: 'Help Center',
+                icon: 'Question',
+                link: '#/help',
+            },
+            {
+                text: 'Log Out',
+                icon: 'SignOut',
+                onClick: () => alert('Logging out...'),
+            },
+        ],
+        credits: {
+            maxCredits: 100,
+            usedCredits: 45,
+            creditInfoText: '1 Credit = 1 resource',
+        },
+    },
+};

package/dist/stories/types/credits-card.d.ts

@@ -0,0 +1,35 @@
+export declare enum CreditsCardSize {
+    Expanded = "expanded",
+    Collapsed = "collapsed"
+}
+export declare enum CreditsCardState {
+    Default = "default",
+    Active = "active",
+    Disabled = "disabled"
+}
+export interface CreditsCardProps {
+    /**
+     * The size of the card
+     */
+    size?: CreditsCardSize;
+    /**
+     * Optional className for additional styling
+     */
+    className?: string;
+    /**
+     * Maximum available credits
+     */
+    maxCredits?: number;
+    /**
+     * Currently used credits
+     */
+    usedCredits?: number;
+    /**
+     * Function to handle upgrade button click
+     */
+    onUpgradeClick?: () => void;
+    /**
+     * Text explaining credit usage (e.g., "1 Credit = 1 min video")
+     */
+    creditInfoText?: string;
+}

package/dist/stories/types/credits-card.js

@@ -0,0 +1,11 @@
+export var CreditsCardSize;
+(function (CreditsCardSize) {
+    CreditsCardSize["Expanded"] = "expanded";
+    CreditsCardSize["Collapsed"] = "collapsed";
+})(CreditsCardSize || (CreditsCardSize = {}));
+export var CreditsCardState;
+(function (CreditsCardState) {
+    CreditsCardState["Default"] = "default";
+    CreditsCardState["Active"] = "active";
+    CreditsCardState["Disabled"] = "disabled";
+})(CreditsCardState || (CreditsCardState = {}));

package/dist/stories/types/nav-item.d.ts

@@ -0,0 +1,40 @@
+export declare enum NavItemState {
+    Default = "default",
+    Active = "active",
+    Disabled = "disabled"
+}
+export declare enum NavItemSize {
+    Expanded = "expanded",
+    Collapsed = "collapsed"
+}
+export interface NavItemProps {
+    /**
+     * The text to display in the navigation item
+     */
+    text: string;
+    /**
+     * The icon to display before the text
+     * Uses Phosphor Icons
+     */
+    icon: string;
+    /**
+     * The current state of the navigation item
+     */
+    state?: NavItemState;
+    /**
+     * The size of the navigation item
+     */
+    size?: NavItemSize;
+    /**
+     * Whether to show a "Coming Soon" badge
+     */
+    showBadge?: boolean;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+    /**
+     * Optional className for additional styling
+     */
+    className?: string;
+}

package/dist/stories/types/nav-item.js

@@ -0,0 +1,11 @@
+export var NavItemState;
+(function (NavItemState) {
+    NavItemState["Default"] = "default";
+    NavItemState["Active"] = "active";
+    NavItemState["Disabled"] = "disabled";
+})(NavItemState || (NavItemState = {}));
+export var NavItemSize;
+(function (NavItemSize) {
+    NavItemSize["Expanded"] = "expanded";
+    NavItemSize["Collapsed"] = "collapsed";
+})(NavItemSize || (NavItemSize = {}));

package/dist/stories/types/sidebar.d.ts

@@ -0,0 +1,82 @@
+export declare enum SidebarSize {
+    Expanded = "expanded",
+    Collapsed = "collapsed"
+}
+export interface NavItemConfig {
+    /**
+     * The text to display in the navigation item
+     */
+    text: string;
+    /**
+     * The icon to display before the text (Phosphor icon name)
+     */
+    icon: string;
+    /**
+     * The current state of the navigation item
+     */
+    state?: 'default' | 'active' | 'disabled';
+    /**
+     * Whether to show a badge (e.g., "Coming Soon")
+     */
+    showBadge?: boolean;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+    /**
+     * Optional link URL for the navigation item
+     */
+    link?: string;
+}
+export interface NavSection {
+    /**
+     * The title of the section
+     */
+    title: string;
+    /**
+     * The navigation items in this section
+     */
+    items: NavItemConfig[];
+    /**
+     * Whether to show a separator after this section
+     */
+    showSeparator?: boolean;
+}
+export interface SidebarProps {
+    /**
+     * The size of the sidebar
+     */
+    size?: SidebarSize;
+    /**
+     * Optional className for additional styling
+     */
+    className?: string;
+    /**
+     * Navigation sections to display in the sidebar
+     */
+    navSections: NavSection[];
+    /**
+     * Bottom navigation items (e.g., account, feedback)
+     */
+    bottomNavItems?: NavItemConfig[];
+    /**
+     * Credits information
+     */
+    credits?: {
+        maxCredits: number;
+        usedCredits: number;
+        creditInfoText?: string;
+        onUpgradeClick?: () => void;
+    };
+    /**
+     * Optional callback when sidebar is toggled
+     */
+    onToggle?: (size: SidebarSize) => void;
+    /**
+     * Optional logo props
+     */
+    logoProps?: {
+        gradient?: string;
+        color?: string;
+    };
+}

package/dist/stories/types/sidebar.js

@@ -0,0 +1,5 @@
+export var SidebarSize;
+(function (SidebarSize) {
+    SidebarSize["Expanded"] = "expanded";
+    SidebarSize["Collapsed"] = "collapsed";
+})(SidebarSize || (SidebarSize = {}));

package/package.json

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