@beydesign/storybook 0.2.12 → 0.2.13

package/dist/stories/UI/TabMenu.d.ts

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

package/dist/stories/UI/TabMenu.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { TabMenuSize } from './types';
+const SIZE_TOKENS = {
+    [TabMenuSize.md]: {
+        containerGap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+        containerPadding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+        tabPaddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+        tabRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)',
+        tabHeight: '40px',
+        dividerHeight: '24px',
+        textSize: TypographySize.TextM,
+        textWeight: TypographyWeight.SemiBold,
+    },
+    [TabMenuSize.sm]: {
+        containerGap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xxs)',
+        containerPadding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xxs)',
+        tabPaddingY: '5px',
+        tabRadius: 'var(--spacing-tokens-size-in-px-radius-radius-sm)',
+        tabHeight: 'auto',
+        dividerHeight: '20px',
+        textSize: TypographySize.TextS,
+        textWeight: TypographyWeight.Medium,
+    },
+};
+const normalizeTab = (tab) => typeof tab === 'string' ? { label: tab } : tab;
+export const TabMenu = ({ tabs, activeTab = 0, onTabChange, size = TabMenuSize.md, showDividers = true, animated = true, style, tabStyle, testId, }) => {
+    const tokens = SIZE_TOKENS[size];
+    const containerRef = useRef(null);
+    const tabRefs = useRef([]);
+    const [indicator, setIndicator] = useState(null);
+    useLayoutEffect(() => {
+        const measure = () => {
+            const container = containerRef.current;
+            const tab = tabRefs.current[activeTab];
+            if (!container || !tab)
+                return;
+            const containerRect = container.getBoundingClientRect();
+            const tabRect = tab.getBoundingClientRect();
+            setIndicator({
+                left: tabRect.left - containerRect.left,
+                top: tabRect.top - containerRect.top,
+                width: tabRect.width,
+                height: tabRect.height,
+            });
+        };
+        measure();
+        window.addEventListener('resize', measure);
+        return () => window.removeEventListener('resize', measure);
+    }, [activeTab, size, showDividers, tabs]);
+    return (_jsxs(Box, { ref: containerRef, "data-testid": testId, position: 'relative', display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: tokens.containerGap, padding: tokens.containerPadding, bgcolor: 'var(--color-background-bg-component)', border: '1px solid var(--color-border-border-component)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-md)', sx: style, children: [indicator && (_jsx(Box, { "aria-hidden": true, position: 'absolute', bgcolor: 'var(--color-background-bg-brand-transparent)', borderRadius: tokens.tabRadius, sx: {
+                    left: 0,
+                    top: 0,
+                    width: indicator.width,
+                    height: indicator.height,
+                    transform: `translate(${indicator.left}px, ${indicator.top}px)`,
+                    transition: animated
+                        ? 'transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1)'
+                        : 'none',
+                    pointerEvents: 'none',
+                    zIndex: 0,
+                } })), tabs.map((tab, index) => {
+                const { label } = normalizeTab(tab);
+                const isActive = index === activeTab;
+                return (_jsxs(React.Fragment, { children: [showDividers && index > 0 && (_jsx(Box, { width: '1px', height: tokens.dividerHeight, bgcolor: 'var(--color-border-border-divider)', flexShrink: 0, sx: { zIndex: 1 } })), _jsx(Box, { ref: (el) => {
+                                tabRefs.current[index] = el;
+                            }, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', flexShrink: 0, height: tokens.tabHeight, paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', paddingY: tokens.tabPaddingY, borderRadius: tokens.tabRadius, onClick: onTabChange ? () => onTabChange(index) : undefined, sx: {
+                                zIndex: 1,
+                                cursor: onTabChange ? 'pointer' : 'default',
+                                '&:hover': onTabChange && !isActive
+                                    ? {
+                                        bgcolor: 'var(--color-background-bg-brand-transparent-hover)',
+                                        transition: 'background-color 0.15s ease',
+                                    }
+                                    : undefined,
+                                ...tabStyle,
+                            }, children: _jsx(Typography, { size: tokens.textSize, weight: tokens.textWeight, color: isActive
+                                    ? 'var(--color-text-text-clicable)'
+                                    : 'var(--color-text-text-subtle)', textStyle: {
+                                    transition: animated ? 'color 0.25s ease' : 'none',
+                                }, children: label }) })] }, index));
+            })] }));
+};

package/dist/stories/UI/TabMenu.stories.d.ts

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

package/dist/stories/UI/TabMenu.stories.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { TabMenu } from './TabMenu';
+import { TabMenuSize } from './types';
+const meta = {
+    title: 'Design System/Components/UI/TabMenu',
+    component: TabMenu,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6516-41431',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        tabs: {
+            control: 'object',
+            description: 'Tabs to render (labels or { label, value } objects)',
+            table: {
+                type: { summary: 'string[] | TabMenuTab[]' },
+            },
+        },
+        activeTab: {
+            control: 'number',
+            description: 'Index of the active tab',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '0' },
+            },
+        },
+        onTabChange: {
+            description: 'Called with the index of the clicked tab',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: Object.values(TabMenuSize),
+            description: 'Size variant of the tab menu',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'md' },
+            },
+        },
+        showDividers: {
+            control: 'boolean',
+            description: 'Show the vertical dividers between tabs',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        animated: {
+            control: 'boolean',
+            description: 'Animate the active highlight when switching tabs',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        testId: {
+            control: 'text',
+            description: 'Test ID of the tab menu',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+const TABS = ['Tab name', 'Tab name', 'Tab name', 'Tab name', 'Tab name'];
+const InteractiveTabMenu = (args) => {
+    const [activeTab, setActiveTab] = useState(args.activeTab ?? 0);
+    return _jsx(TabMenu, { ...args, activeTab: activeTab, onTabChange: setActiveTab });
+};
+export const Medium = {
+    render: (args) => _jsx(InteractiveTabMenu, { ...args }),
+    args: {
+        tabs: TABS,
+        activeTab: 0,
+        size: TabMenuSize.md,
+        showDividers: true,
+        animated: true,
+        testId: 'tab-menu',
+    },
+};
+export const Small = {
+    render: (args) => _jsx(InteractiveTabMenu, { ...args }),
+    args: {
+        ...Medium.args,
+        size: TabMenuSize.sm,
+    },
+};
+export const MediumStatic = {
+    render: (args) => _jsx(InteractiveTabMenu, { ...args }),
+    args: {
+        ...Medium.args,
+        animated: false,
+    },
+};
+export const SmallStatic = {
+    render: (args) => _jsx(InteractiveTabMenu, { ...args }),
+    args: {
+        ...Medium.args,
+        size: TabMenuSize.sm,
+        animated: false,
+    },
+};

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

@@ -12,3 +12,4 @@ export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';
 export * from './Stepper';
+export * from './TabMenu';

package/dist/stories/UI/index.js

@@ -12,3 +12,4 @@ export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';
 export * from './Stepper';
+export * from './TabMenu';

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

@@ -444,3 +444,42 @@ export interface StepperProps {
     /** Connector width of the stepper */
     connectorWidth?: string | number;
 }
+/**
+ * TabMenu size variants
+ */
+export declare enum TabMenuSize {
+    md = "md",
+    sm = "sm"
+}
+/**
+ * A single tab within a {@link TabMenu}.
+ */
+export interface TabMenuTab {
+    /** Label shown on the tab */
+    label: string;
+    /** Optional value identifying the tab. Defaults to the label. */
+    value?: string;
+}
+/**
+ * TabMenu component props — a bordered segmented control of selectable tabs.
+ */
+export interface TabMenuProps {
+    /** Tabs to render. Accepts labels or `{ label, value }` objects. */
+    tabs: (string | TabMenuTab)[];
+    /** Index of the active tab. Defaults to `0`. */
+    activeTab?: number;
+    /** Called with the index of the tab that was clicked. */
+    onTabChange?: (index: number) => void;
+    /** Size variant. Defaults to `Md`. */
+    size?: TabMenuSize;
+    /** Show the vertical dividers between tabs. Defaults to `true`. */
+    showDividers?: boolean;
+    /** Animate the active highlight when switching tabs. Defaults to `true`. */
+    animated?: boolean;
+    /** Custom style of the container. */
+    style?: SxProps<Theme>;
+    /** Custom style applied to each tab. */
+    tabStyle?: SxProps<Theme>;
+    /** Test ID of the tab menu. */
+    testId?: string;
+}

package/dist/stories/UI/types.js

@@ -119,3 +119,11 @@ export var FeatureBannerMedia;
     FeatureBannerMedia["Image"] = "Image";
     FeatureBannerMedia["None"] = "None";
 })(FeatureBannerMedia || (FeatureBannerMedia = {}));
+/**
+ * TabMenu size variants
+ */
+export var TabMenuSize;
+(function (TabMenuSize) {
+    TabMenuSize["md"] = "md";
+    TabMenuSize["sm"] = "sm";
+})(TabMenuSize || (TabMenuSize = {}));

package/package.json

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