@beydesign/storybook 0.2.3 → 0.2.6

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './stories/Buttons';
 export * from './stories/Typography';
 export * from './stories/Credits';
 export * from './stories/Navigation';
+export * from './stories/Drawer';
 export * from './stories/Typography';
 export * from './stories/UI';
 export * from './stories/StripeProduct';

package/dist/index.js

@@ -7,6 +7,7 @@ export * from './stories/Buttons';
 export * from './stories/Typography';
 export * from './stories/Credits';
 export * from './stories/Navigation';
+export * from './stories/Drawer';
 export * from './stories/Typography';
 export * from './stories/UI';
 export * from './stories/StripeProduct';

package/dist/stories/Drawer/Drawer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DrawerProps } from './types';
+/**
+ * Composed application sidebar ("Drawer"): logo header, navigation list,
+ * credits card and user-profile footer, with a floating collapse/expand
+ * toggle. Collapse state can be controlled (`collapsed` + `onToggle`) or left
+ * uncontrolled (`defaultCollapsed`). Every colour, space and radius resolves to
+ * `@beydesign/tokens` CSS variables, so it renders correctly in light and dark.
+ */
+export declare const Drawer: React.FC<DrawerProps>;

package/dist/stories/Drawer/Drawer.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { DrawerSize, DrawerNavItemState, DrawerNavItemHierarchy, } from './types';
+import { DrawerNavItem } from './DrawerNavItem';
+import { DrawerCreditsCard } from './DrawerCreditsCard';
+import { DrawerProfile } from './DrawerProfile';
+import { Logo, LogoVariant } from '../UI';
+import { getIconComponent } from '../../utils';
+const EXPANDED_WIDTH = '238px';
+const COLLAPSED_WIDTH = '68px';
+/** Composed from the semantic `shadow-sm` design token. */
+const SHADOW_SM = 'var(--global-shadows-shadow-sm-offset-x) var(--global-shadows-shadow-sm-offset-y) var(--global-shadows-shadow-sm-blur) var(--global-shadows-shadow-sm-spread) var(--global-shadows-shadow-sm-color)';
+/**
+ * Non-clipping outer shell. The toggle lives here (a sibling of the scroll
+ * area) so it can overhang the right edge without being clipped by the panel's
+ * `overflow`.
+ */
+const Shell = styled.aside `
+  position: relative;
+  flex-shrink: 0;
+  height: 100vh;
+  width: ${({ $collapsed }) => ($collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH)};
+  transition: width 0.3s ease-in-out;
+`;
+const Scroll = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  padding: var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)
+    var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)
+    var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
+  background-color: var(--color-background-bg-page-contrast);
+  border-right: 1px solid var(--color-border-border-subtle);
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  /* Theme-aware thin scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-border-component) transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-border-border-component);
+    border-radius: var(--spacing-tokens-size-in-px-radius-radius-full);
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-text-text-subtle);
+  }
+`;
+const LogoHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
+  height: 38px;
+  min-height: 38px;
+  margin-bottom: 40px;
+`;
+const Nav = styled.nav `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
+`;
+const NavTop = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-lg, 12px);
+`;
+const Footer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
+`;
+const FooterSlot = styled.div `
+  display: flex;
+  justify-content: center;
+`;
+const ToggleButton = styled.button `
+  appearance: none;
+  position: absolute;
+  top: 52px;
+  right: -16px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--color-border-border-subtle);
+  border-radius: var(--spacing-tokens-size-in-px-radius-radius-full);
+  background-color: var(--color-background-bg-element);
+  color: var(--color-text-text-paragraph);
+  cursor: pointer;
+  box-shadow: ${SHADOW_SM};
+  transition: color 0.2s ease-in-out;
+
+  &:hover {
+    color: var(--color-text-text-clicable);
+  }
+`;
+/** Rotates the chevron smoothly between expanded (◀) and collapsed (▶). */
+const ToggleIcon = styled.span `
+  display: inline-flex;
+  transform: rotate(${({ $collapsed }) => ($collapsed ? '180deg' : '0deg')});
+  transition: transform 0.3s ease-in-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+const resolveState = (item, activeKey) => {
+    if (item.state)
+        return item.state;
+    if (item.disabled)
+        return DrawerNavItemState.Disabled;
+    const key = item.key ?? item.text;
+    if (activeKey !== undefined && key === activeKey) {
+        return DrawerNavItemState.Active;
+    }
+    return DrawerNavItemState.Inactive;
+};
+/**
+ * Composed application sidebar ("Drawer"): logo header, navigation list,
+ * credits card and user-profile footer, with a floating collapse/expand
+ * toggle. Collapse state can be controlled (`collapsed` + `onToggle`) or left
+ * uncontrolled (`defaultCollapsed`). Every colour, space and radius resolves to
+ * `@beydesign/tokens` CSS variables, so it renders correctly in light and dark.
+ */
+export const Drawer = ({ navItems, activeKey, collapsed, defaultCollapsed = false, onToggle, showToggle = true, credits, profile, logo, className, style, testId, }) => {
+    const isControlled = collapsed !== undefined;
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const isCollapsed = isControlled ? collapsed : internalCollapsed;
+    const drawerSize = isCollapsed ? DrawerSize.Collapsed : DrawerSize.Expanded;
+    const handleToggle = () => {
+        const next = !isCollapsed;
+        if (!isControlled)
+            setInternalCollapsed(next);
+        onToggle?.(next);
+    };
+    const handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        if (item.link) {
+            window.location.href = item.link;
+        }
+        else {
+            item.onClick?.();
+        }
+    };
+    return (_jsxs(Shell, { "$collapsed": isCollapsed, className: className, style: style, "data-testid": testId, children: [_jsxs(Scroll, { children: [_jsx(LogoHeader, { "$collapsed": isCollapsed, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl }) }), _jsxs(Nav, { children: [_jsx(NavTop, { children: navItems.map((item) => (_jsx(DrawerNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), size: drawerSize, hierarchy: item.hierarchy ?? DrawerNavItemHierarchy.First, showBadge: item.showBadge, badgeText: item.badgeText, onClick: () => handleItemClick(item) }, item.key ?? item.text))) }), (credits || profile) && (_jsxs(Footer, { children: [credits && (_jsx(FooterSlot, { "$collapsed": isCollapsed, children: _jsx(DrawerCreditsCard, { ...credits, size: drawerSize }) })), profile && (_jsx(FooterSlot, { "$collapsed": isCollapsed, children: _jsx(DrawerProfile, { ...profile, size: drawerSize }) }))] }))] })] }), showToggle && (_jsx(ToggleButton, { type: "button", onClick: handleToggle, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: _jsx(ToggleIcon, { "$collapsed": isCollapsed, children: getIconComponent('CaretLeft', { size: 16, weight: 'bold' }) }) }))] }));
+};

package/dist/stories/Drawer/Drawer.stories.d.ts

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

package/dist/stories/Drawer/Drawer.stories.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Drawer } from './Drawer';
+import { DrawerNavItemHierarchy } from './types';
+const navItems = [
+    { key: 'home', text: 'Home', icon: 'House' },
+    { key: 'avatars', text: 'Avatars', icon: 'UserFocus' },
+    { key: 'agents', text: 'My Agents', icon: 'Headset' },
+    { key: 'ttv', text: 'Text-to-Video', icon: 'VideoCamera' },
+    { key: 'kb', text: 'Knowledge Base', icon: 'Book' },
+    {
+        key: 'conversations',
+        text: 'Conversations',
+        icon: 'ChatTeardropDots',
+    },
+    { key: 'analytics', text: 'Analytics', icon: 'ChartBar' },
+    { key: 'api', text: 'API keys', icon: 'Key' },
+    { key: 'developers', text: 'Developers', icon: 'BracketsCurly' },
+];
+const meta = {
+    title: 'Design System/Components/Drawer/Drawer',
+    component: Drawer,
+    parameters: {
+        layout: 'fullscreen',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6940-28398',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        activeKey: {
+            control: 'text',
+            description: 'Key (or text) of the currently active nav item',
+        },
+        defaultCollapsed: {
+            control: 'boolean',
+            description: 'Initial collapsed state when uncontrolled',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        showToggle: {
+            control: 'boolean',
+            description: 'Show the floating collapse/expand toggle',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        navItems: { control: false },
+        credits: { control: false },
+        profile: { control: false },
+    },
+    args: {
+        navItems,
+        activeKey: 'home',
+        credits: { usedCredits: 500, maxCredits: 2000 },
+        profile: {
+            name: 'Emma Novak',
+            email: 'emma@example.com',
+            menuItems: [
+                { label: 'Account settings', icon: 'Gear', onClick: () => undefined },
+                {
+                    label: 'Log out',
+                    icon: 'SignOut',
+                    destructive: true,
+                    onClick: () => undefined,
+                },
+            ],
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '100vh', display: 'flex' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Expanded = {};
+export const Collapsed = {
+    args: { defaultCollapsed: true },
+};
+export const WithSubItems = {
+    args: {
+        activeKey: 'avatars',
+        navItems: [
+            navItems[0],
+            navItems[1],
+            {
+                key: 'my-avatars',
+                text: 'My Avatars',
+                icon: 'User',
+                hierarchy: DrawerNavItemHierarchy.Secondary,
+            },
+            {
+                key: 'stock-avatars',
+                text: 'Stock Avatars',
+                icon: 'UsersThree',
+                hierarchy: DrawerNavItemHierarchy.Secondary,
+            },
+            navItems[2],
+            {
+                key: 'ttv',
+                text: 'Text-to-Video',
+                icon: 'VideoCamera',
+                showBadge: true,
+            },
+            ...navItems.slice(4),
+        ],
+    },
+};
+export const NoFooter = {
+    args: { credits: undefined, profile: undefined },
+};

package/dist/stories/Drawer/DrawerCreditsCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DrawerCreditsCardProps } from './types';
+/**
+ * Compact "Upgrade plan" credits card for the {@link Drawer} footer. Shows a
+ * progress bar and a credits caption, with an info tooltip listing the credit
+ * conversion rates. When collapsed it shrinks to the gem glyph and reveals the
+ * full details (and an upgrade action) in a hover popover. Fully theme-aware.
+ */
+export declare const DrawerCreditsCard: React.FC<DrawerCreditsCardProps>;

package/dist/stories/Drawer/DrawerCreditsCard.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { DrawerSize } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Popover, ProgressIndicator, ProgressIndicatorMode } from '../UI';
+import { getIconComponent } from '../../utils';
+import { GemIcon } from './DrawerIcons';
+const DEFAULT_INFO_LINES = [
+    'Managed Agents 1 Min = 100 Credits',
+    'Speech-to-Video 1 Min = 50 Credits',
+];
+/** Composed from the semantic `shadow-xs` design token (matches MainButton). */
+const SHADOW_XS = '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)';
+const DROP_SHADOW_XS = 'drop-shadow(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-color))';
+const Card = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
+  width: 100%;
+  padding: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)
+    var(--spacing-tokens-size-in-px-spacing-spacing-lg, 12px);
+  background-color: var(--color-background-bg-card-highlight);
+  border: 1px solid var(--color-border-border-divider);
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+`;
+const HeaderRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+const HeaderLeft = styled.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+`;
+const GemBox = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  color: var(--color-foreground-fg-brand-primary);
+  background-color: var(--color-background-bg-brand-transparent);
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
+`;
+const UpgradeLink = styled.button `
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  color: var(--color-text-text-title);
+  transition: color 0.2s ease-in-out;
+
+  &:hover {
+    color: var(--color-text-text-clicable);
+    text-decoration: underline;
+  }
+`;
+const InfoButton = styled.button `
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  padding: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
+  border: none;
+  background: none;
+  border-radius: var(--spacing-tokens-size-in-px-radius-radius-xs);
+  color: var(--color-text-text-clicable);
+  filter: ${DROP_SHADOW_XS};
+  cursor: pointer;
+  transition: color 0.2s ease-in-out;
+
+  &:hover {
+    color: var(--color-text-text-clicable-hover);
+  }
+`;
+const ProgressRow = styled.div `
+  display: flex;
+  align-items: center;
+  height: 20px;
+  width: 100%;
+`;
+/** Bare credits bar built on the shared ProgressIndicator (bar-only mode). */
+const CreditsBar = ({ used, max }) => (_jsx(ProgressRow, { children: _jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Bar, currentValue: used, maxValue: max, minWidth: 0, animated: true, fillColor: "var(--color-foreground-fg-brand-primary)", backgroundColor: "var(--color-background-bg-element)", style: { width: '100%' } }) }));
+const CollapsedBox = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  color: var(--color-foreground-fg-brand-primary);
+  background-color: var(--color-background-bg-brand-transparent);
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  cursor: pointer;
+`;
+/** Dark popover body shown when hovering the collapsed credits box. */
+const PopoverBody = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  min-width: 220px;
+`;
+const PopoverButton = styled.button `
+  appearance: none;
+  align-self: flex-start;
+  padding: 6px 8px;
+  border: 1px solid var(--color-background-bg-brand-primary);
+  border-radius: var(--spacing-tokens-size-in-px-radius-radius-xs, 4px);
+  font: inherit;
+  cursor: pointer;
+  background-color: var(--color-background-bg-brand-primary);
+  color: var(--color-text-text-on-accent-color);
+  box-shadow: ${SHADOW_XS};
+`;
+const PopoverGroup = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const InfoLines = ({ lines }) => (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: lines.map((line, i) => (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-white)", children: line }, i))) }));
+/**
+ * Compact "Upgrade plan" credits card for the {@link Drawer} footer. Shows a
+ * progress bar and a credits caption, with an info tooltip listing the credit
+ * conversion rates. When collapsed it shrinks to the gem glyph and reveals the
+ * full details (and an upgrade action) in a hover popover. Fully theme-aware.
+ */
+export const DrawerCreditsCard = ({ size = DrawerSize.Expanded, usedCredits = 0, maxCredits = 0, upgradeLabel = 'Upgrade plan', creditsCaption, icon, infoLines = DEFAULT_INFO_LINES, onUpgradeClick, className, style, testId, }) => {
+    const caption = creditsCaption ?? `${usedCredits} credits used from ${maxCredits}`;
+    const glyph = icon ? (getIconComponent(icon, { size: 20 })) : (_jsx(GemIcon, { size: 20 }));
+    if (size === DrawerSize.Collapsed) {
+        return (_jsx(Popover, { placement: "right", content: _jsxs(PopoverBody, { children: [_jsx(PopoverButton, { type: "button", onClick: () => onUpgradeClick?.(), children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-on-accent-color)", children: upgradeLabel }) }), _jsxs(PopoverGroup, { children: [_jsx(CreditsBar, { used: usedCredits, max: maxCredits }), _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-white)", children: caption })] }), _jsx(InfoLines, { lines: infoLines })] }), children: _jsx(CollapsedBox, { className: className, style: style, "data-testid": testId, onClick: () => onUpgradeClick?.(), children: glyph }) }));
+    }
+    return (_jsxs(Card, { className: className, style: style, "data-testid": testId, children: [_jsxs(HeaderRow, { children: [_jsxs(HeaderLeft, { children: [_jsx(GemBox, { children: glyph }), _jsx(UpgradeLink, { type: "button", onClick: () => onUpgradeClick?.(), children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "inherit", children: upgradeLabel }) })] }), _jsx(Popover, { placement: "top", content: _jsx(InfoLines, { lines: infoLines }), children: _jsx(InfoButton, { type: "button", "aria-label": "Credit rate information", children: getIconComponent('WarningCircle', { size: 20 }) }) })] }), _jsx(CreditsBar, { used: usedCredits, max: maxCredits }), _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-label)", children: caption })] }));
+};

package/dist/stories/Drawer/DrawerCreditsCard.stories.d.ts

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

package/dist/stories/Drawer/DrawerCreditsCard.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DrawerCreditsCard } from './DrawerCreditsCard';
+import { DrawerSize } from './types';
+const meta = {
+    title: 'Design System/Components/Drawer/DrawerCreditsCard',
+    component: DrawerCreditsCard,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6940-29126',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'inline-radio',
+            options: Object.values(DrawerSize),
+            table: { defaultValue: { summary: 'Expanded' } },
+        },
+        usedCredits: { control: 'number' },
+        maxCredits: { control: 'number' },
+        upgradeLabel: { control: 'text' },
+    },
+    args: {
+        size: DrawerSize.Expanded,
+        usedCredits: 500,
+        maxCredits: 2000,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                width: 230,
+                padding: 16,
+                backgroundColor: 'var(--color-background-bg-page-contrast)',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {};
+export const NearLimit = {
+    args: { usedCredits: 1850, maxCredits: 2000 },
+};
+export const Collapsed = {
+    args: { size: DrawerSize.Collapsed },
+};

package/dist/stories/Drawer/DrawerIcons.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface IconProps {
+    /** Pixel size of the square icon. */
+    size?: number;
+    /** Stroke/fill colour. Defaults to `currentColor` so it inherits theme. */
+    color?: string;
+}
+/**
+ * Faceted gem glyph used by the credits card. Mirrors the Figma asset but
+ * paints with `currentColor` so it stays theme-aware (light violet / dark
+ * lemon) instead of a hardcoded brand hex.
+ */
+export declare const GemIcon: React.FC<IconProps>;
+export {};

package/dist/stories/Drawer/DrawerIcons.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Faceted gem glyph used by the credits card. Mirrors the Figma asset but
+ * paints with `currentColor` so it stays theme-aware (light violet / dark
+ * lemon) instead of a hardcoded brand hex.
+ */
+export const GemIcon = ({ size = 20, color = 'currentColor', }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [_jsx("path", { opacity: "0.2", d: "M18.75 8.125L10 17.5L6.25 8.125L10 3.125H14.375L18.75 8.125Z", fill: color }), _jsx("path", { d: "M19.2173 7.71328L14.8423 2.71328C14.7838 2.64647 14.7118 2.59289 14.631 2.55612C14.5501 2.51934 14.4624 2.50021 14.3736 2.5H5.62359C5.53479 2.50021 5.44706 2.51934 5.36623 2.55612C5.2854 2.59289 5.21334 2.64647 5.15484 2.71328L0.779842 7.71328C0.677778 7.82981 0.622625 7.98009 0.625079 8.13498C0.627532 8.28987 0.687419 8.43832 0.793124 8.55156L9.54312 17.9266C9.6016 17.9893 9.67236 18.0392 9.75098 18.0734C9.82961 18.1076 9.91442 18.1252 10.0002 18.1252C10.0859 18.1252 10.1707 18.1076 10.2493 18.0734C10.328 18.0392 10.3987 17.9893 10.4572 17.9266L19.2072 8.55156C19.3125 8.43793 19.3718 8.28926 19.3737 8.13438C19.3755 7.97949 19.3198 7.82943 19.2173 7.71328ZM17.3712 7.5H14.0611L11.2486 3.75H14.09L17.3712 7.5ZM5.82515 8.75L8.17906 14.6352L2.68687 8.75H5.82515ZM12.8252 8.75L9.99859 15.8172L7.17203 8.75H12.8252ZM7.49859 7.5L9.99859 4.16641L12.4986 7.5H7.49859ZM14.172 8.75H17.3103L11.8181 14.6352L14.172 8.75ZM5.90719 3.75H8.74859L5.93609 7.5H2.62594L5.90719 3.75Z", fill: color })] }));

package/dist/stories/Drawer/DrawerNavItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DrawerNavItemProps } from './types';
+/**
+ * A single navigation row for the {@link Drawer}. Supports active / inactive /
+ * hover / disabled states, first / secondary hierarchy and expanded / collapsed
+ * sizes. All colours resolve to theme tokens, so it adapts to light and dark.
+ */
+export declare const DrawerNavItem: React.FC<DrawerNavItemProps>;

package/dist/stories/Drawer/DrawerNavItem.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { DrawerNavItemState, DrawerNavItemHierarchy, DrawerSize, } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Badge, BadgeColor, BadgeSize } from '../UI';
+import { getIconComponent } from '../../utils';
+const ACTIVE_FG = 'var(--color-text-text-clicable)';
+const INACTIVE_FG = 'var(--color-text-text-subtle)';
+const ACTIVE_BG = 'var(--color-background-bg-brand-transparent)';
+const HOVER_BG = 'var(--color-background-bg-brand-transparent-hover)';
+const foreground = (state) => state === DrawerNavItemState.Active || state === DrawerNavItemState.Hover
+    ? ACTIVE_FG
+    : INACTIVE_FG;
+const background = (state) => {
+    if (state === DrawerNavItemState.Active)
+        return ACTIVE_BG;
+    if (state === DrawerNavItemState.Hover)
+        return HOVER_BG;
+    return 'transparent';
+};
+const StyledNavItem = styled.button `
+  appearance: none;
+  font: inherit;
+  text-align: left;
+  border: none;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  width: ${({ $collapsed }) => ($collapsed ? '36px' : '100%')};
+  height: ${({ $collapsed }) => ($collapsed ? '36px' : 'auto')};
+  align-self: ${({ $collapsed }) => ($collapsed ? 'center' : 'stretch')};
+  padding: ${({ $collapsed, $hierarchy }) => {
+    if ($collapsed)
+        return '0';
+    return $hierarchy === DrawerNavItemHierarchy.Secondary
+        ? 'var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px) var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)'
+        : 'var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)';
+}};
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  color: ${({ $state }) => foreground($state)};
+  background-color: ${({ $state }) => background($state)};
+  opacity: ${({ $state }) => $state === DrawerNavItemState.Disabled ? 0.5 : 1};
+  cursor: ${({ $state }) => $state === DrawerNavItemState.Disabled ? 'not-allowed' : 'pointer'};
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    padding 0.3s ease-in-out;
+
+  &:hover {
+    ${({ $state }) => $state === DrawerNavItemState.Inactive
+    ? `background-color: ${HOVER_BG}; color: ${ACTIVE_FG};`
+    : ''}
+  }
+`;
+const IconSlot = styled.span `
+  display: inline-flex;
+  flex-shrink: 0;
+  color: inherit;
+`;
+const Label = styled.span `
+  display: inline-flex;
+  flex: 1 1 0;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
+`;
+/**
+ * A single navigation row for the {@link Drawer}. Supports active / inactive /
+ * hover / disabled states, first / secondary hierarchy and expanded / collapsed
+ * sizes. All colours resolve to theme tokens, so it adapts to light and dark.
+ */
+export const DrawerNavItem = ({ text, icon, state = DrawerNavItemState.Inactive, size = DrawerSize.Expanded, hierarchy = DrawerNavItemHierarchy.First, showBadge = false, badgeText = 'Coming Soon', onClick, className, style, testId, }) => {
+    const isCollapsed = size === DrawerSize.Collapsed;
+    const isDisabled = state === DrawerNavItemState.Disabled;
+    const isSecondary = hierarchy === DrawerNavItemHierarchy.Secondary;
+    const handleClick = () => {
+        if (!isDisabled)
+            onClick?.();
+    };
+    return (_jsxs(StyledNavItem, { type: "button", "$state": state, "$collapsed": isCollapsed, "$hierarchy": hierarchy, className: className, style: style, onClick: handleClick, disabled: isDisabled, title: isCollapsed ? text : undefined, "data-testid": testId, children: [_jsx(IconSlot, { children: getIconComponent(icon, { size: 20 }) }), !isCollapsed && (_jsxs(_Fragment, { children: [_jsx(Label, { children: _jsx(Typography, { size: isSecondary ? TypographySize.TextXS : TypographySize.TextS, weight: isSecondary
+                                ? TypographyWeight.Medium
+                                : TypographyWeight.SemiBold, color: "inherit", children: text }) }), showBadge && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: badgeText, color: BadgeColor.Default }))] }))] }));
+};

package/dist/stories/Drawer/DrawerNavItem.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DrawerNavItem } from './DrawerNavItem';
+declare const meta: Meta<typeof DrawerNavItem>;
+export default meta;
+type Story = StoryObj<typeof DrawerNavItem>;
+export declare const Active: Story;
+export declare const Inactive: Story;
+export declare const Hover: Story;
+export declare const Disabled: Story;
+export declare const Secondary: Story;
+export declare const Collapsed: Story;