@beydesign/storybook 0.0.85 → 0.0.87

package/dist/stories/Credits/CreditsCard.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import styled from '@emotion/styled';
 import { CreditsCardSize } from './types';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
@@ -9,7 +10,9 @@ const StyledCard = styled.div `
   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);
+  background-color: ${({ $warning }) => $warning
+    ? 'var(--primitives-desktop-primary-red-50)'
+    : '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
@@ -35,13 +38,23 @@ 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', }) => {
+export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, creditInfoText = '1 Credit = 1 min video', overUsageEnabled = false, overUsedCredits = 0, }) => {
     const isCollapsed = size === CreditsCardSize.Collapsed;
-    return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, children: [!isCollapsed &&
+    const creditsLimitReached = usedCredits >= maxCredits;
+    const case1 = overUsageEnabled && overUsedCredits > 0; // if over usage is enabled and over used credits are greater than 0
+    const case2 = case1 || !creditsLimitReached; // if case 1 is true or credits limit is not reached
+    const case3 = !overUsageEnabled && creditsLimitReached; // if over usage is not enabled and credits limit is reached
+    return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [!isCollapsed &&
                 maxCredits !== undefined &&
-                usedCredits !== undefined && (_jsxs(_Fragment, { children: [_jsxs(CreditRow, { children: [_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${usedCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] }), _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(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: creditInfoText }) }) }) })] })), 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, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${usedCredits}` }) }) }) }) }))] }));
+                usedCredits !== undefined && (_jsxs(React.Fragment, { children: [_jsxs(CreditRow, { style: {
+                            gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+                        }, children: [case2 && (_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${usedCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "Credits Limit Reached" }) })), _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
+                                    if (onUpgradeClick) {
+                                        onUpgradeClick();
+                                    }
+                                } })] }), case1 && (_jsx(CreditRow, { children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) }) })), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: creditInfoText }) }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [case2 && (_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${usedCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] }) })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", textStyle: { textOverflow: 'ellipsis' }, title: "Credits Limit Reached", children: "Cred..." }) })), case1 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${overUsedCredits}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
+                                if (onUpgradeClick) {
+                                    onUpgradeClick();
+                                }
+                            } }) })] }))] }));
 };

package/dist/stories/Credits/CreditsCard.stories.js

@@ -15,6 +15,8 @@ const meta = {
         maxCredits: { control: 'number' },
         usedCredits: { control: 'number' },
         creditInfoText: { control: 'text' },
+        overUsageEnabled: { control: 'boolean' },
+        overUsedCredits: { control: 'number' },
     },
 };
 export default meta;

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

@@ -32,4 +32,12 @@ export interface CreditsCardProps {
      * Text explaining credit usage (e.g., "1 Credit = 1 min video")
      */
     creditInfoText?: string;
+    /**
+     * Whether to enable over usage
+     */
+    overUsageEnabled?: boolean;
+    /**
+     * Over used credits
+     */
+    overUsedCredits?: number;
 }

package/dist/stories/Form/Checkbox.js

@@ -61,5 +61,5 @@ export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disable
                         backgroundColor: 'transparent',
                         transition: 'all 0.2s ease-in-out',
                     },
-                } })) : null, _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, children: label })] }));
+                } })) : null, label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, children: label }))] }));
 };

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

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

package/dist/stories/Form/Dropdown.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { DropdownType } from './types';
+import { Box, ClickAwayListener, Popper } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
+import { Checkbox } from './Checkbox';
+export const Dropdown = ({ disabled = false, placeholder = 'Select an option', label = 'Select', showLeadingIcon = false, leadingIcon = 'List', showClear = true, options, required = false, showCheckboxes = false, showTicks = true, ...props }) => {
+    const [open, setOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const anchorRef = useRef(null);
+    const optionsContainerRef = useRef(null);
+    const value = useMemo(() => {
+        if (props.type === DropdownType.SingleSelect) {
+            return props.value;
+        }
+        return Array.isArray(props.value) ? props.value.join(', ') : '';
+    }, [props.type, props.value]);
+    const handleOptionSelect = useCallback((option) => {
+        if (props.type === DropdownType.SingleSelect) {
+            props.onChange(option);
+            setOpen(false);
+        }
+        else if (Array.isArray(props.value)) {
+            const newValue = props.value.includes(option)
+                ? props.value.filter((item) => item !== option)
+                : [...props.value, option];
+            props.onChange(newValue);
+        }
+    }, [props]);
+    const handleClear = (e) => {
+        e.stopPropagation();
+        if (props.type === DropdownType.SingleSelect) {
+            props.onChange('');
+        }
+        else {
+            props.onChange([]);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'Enter':
+                e.preventDefault();
+                if (open) {
+                    handleOptionSelect(options[highlightedIndex]);
+                }
+                break;
+            case ' ':
+                e.preventDefault();
+                setOpen((prev) => !prev);
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setOpen(false);
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                }
+                else {
+                    setHighlightedIndex((prev) => prev < options.length - 1 ? prev + 1 : 0);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                }
+                else {
+                    setHighlightedIndex((prev) => prev > 0 ? prev - 1 : options.length - 1);
+                }
+                break;
+            case 'Tab':
+                if (open) {
+                    setOpen(false);
+                }
+                break;
+        }
+    };
+    // Select highlighted option on Enter
+    useEffect(() => {
+        const handleKeyPress = (e) => {
+            if (open &&
+                e.key === 'Enter' &&
+                highlightedIndex >= 0 &&
+                highlightedIndex < options.length &&
+                !disabled) {
+                handleOptionSelect(options[highlightedIndex]);
+            }
+        };
+        window.addEventListener('keydown', handleKeyPress);
+        return () => {
+            window.removeEventListener('keydown', handleKeyPress);
+        };
+    }, [open, highlightedIndex, options, handleOptionSelect, disabled]);
+    // Scroll to highlighted option
+    useEffect(() => {
+        if (open && highlightedIndex >= 0 && optionsContainerRef.current) {
+            const highlightedElement = optionsContainerRef.current.children[highlightedIndex];
+            if (highlightedElement) {
+                highlightedElement.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [highlightedIndex, open]);
+    const isOptionSelected = (option) => {
+        if (props.type === DropdownType.SingleSelect) {
+            return props.value === option;
+        }
+        return Array.isArray(props.value) && props.value.includes(option);
+    };
+    return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', position: 'relative', width: "100%", minWidth: '300px', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { textAlign: 'left' }, required: required, children: label }), _jsxs(Box, { ref: anchorRef, display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', alignItems: 'center', justifyContent: 'center', border: `1px solid ${open
+                        ? 'var(--colors-light-border-border-component-active)'
+                        : 'var(--colors-light-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
+                        ? 'var(--primitives-desktop-primary-gray-25)'
+                        : 'var(--primitives-desktop-primary-white-100)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", children: [showLeadingIcon &&
+                            getIconComponent(leadingIcon, {
+                                width: '24px',
+                                height: '24px',
+                                color: 'var(--colors-light-foreground-fg-secondary)',
+                                'aria-hidden': 'true',
+                            }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { flexGrow: 1, textAlign: 'left' }, color: value
+                                ? 'var(--colors-light-text-text-title)'
+                                : 'var(--colors-light-text-text-placeholder)', children: value || placeholder }), !disabled &&
+                            showClear &&
+                            value &&
+                            getIconComponent('X', {
+                                width: '24px',
+                                height: '24px',
+                                color: 'var(--colors-light-foreground-fg-secondary)',
+                                onClick: handleClear,
+                                'aria-label': 'Clear selection',
+                                role: 'button',
+                                tabIndex: 0,
+                                onKeyDown: (e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        handleClear(e);
+                                    }
+                                },
+                            }), !disabled &&
+                            getIconComponent(open ? 'CaretUp' : 'CaretDown', {
+                                width: '24px',
+                                height: '24px',
+                                color: 'var(--colors-light-foreground-fg-secondary)',
+                                'aria-hidden': 'true',
+                            })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsx(Box, { ref: optionsContainerRef, bgcolor: 'var(--primitives-desktop-primary-white-100)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
+                            border: '1px solid var(--colors-light-border-border-component)',
+                        }, children: options.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No options found" }) })) : (options.map((option, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', onClick: () => handleOptionSelect(option), onMouseEnter: () => setHighlightedIndex(index), sx: {
+                                cursor: 'pointer',
+                                backgroundColor: highlightedIndex === index
+                                    ? 'var(--primitives-desktop-primary-gray-25)'
+                                    : isOptionSelected(option)
+                                        ? 'var(--primitives-desktop-primary-gray-10)'
+                                        : 'transparent',
+                                '&:hover': {
+                                    backgroundColor: 'var(--colors-light-background-bg-card-highlight)',
+                                },
+                            }, role: "option", "aria-selected": isOptionSelected(option), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [showCheckboxes && (_jsx(Checkbox, { checked: isOptionSelected(option), onChange: () => handleOptionSelect(option), style: { margin: 0, padding: 0 } })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-title)", children: option })] }), showTicks &&
+                                    isOptionSelected(option) &&
+                                    getIconComponent('Check', {
+                                        width: '16px',
+                                        height: '16px',
+                                        color: 'var(--colors-light-foreground-fg-brand-primary)',
+                                    })] }, option)))) }) })] }) }));
+};

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

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

package/dist/stories/Form/Dropdown.stories.js

@@ -0,0 +1,122 @@
+import { Dropdown } from './Dropdown';
+import { DropdownType } from './types';
+const meta = {
+    title: 'Design System/Components/Form/Dropdown',
+    component: Dropdown,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4501-25356&t=XsmO3ZzXQ9rb1lu5-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        options: {
+            control: 'select',
+            description: 'The options to display in the dropdown',
+            table: {
+                type: { summary: 'string[]' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'The value of the selected option',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onChange: {
+            description: 'The onChange handler for the selected option',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the autocomplete is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder of the autocomplete',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        type: {
+            control: 'select',
+            description: 'The type of the dropdown',
+            options: Object.values(DropdownType),
+            table: {
+                defaultValue: { summary: DropdownType.SingleSelect },
+                type: { summary: 'string' },
+            },
+        },
+        label: {
+            control: 'text',
+            description: 'The label of the dropdown',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        leadingIcon: {
+            control: 'select',
+            description: 'The leading icon of the dropdown',
+            options: ['Cactus', 'MagnifyingGlass', 'User', 'Check', 'X'],
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Whether the dropdown is required',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showClear: {
+            control: 'boolean',
+            description: 'Whether to show the clear button',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showLeadingIcon: {
+            control: 'boolean',
+            description: 'Whether to show the leading icon',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        options: [
+            'Option 1',
+            'Option 2',
+            'Option 3',
+            'Option 4',
+            'Option 5',
+            'Option 6',
+            'Option 7',
+            'Option 8',
+            'Option 9',
+            'Option 10',
+        ],
+        value: 'Option 1',
+        onChange: () => { },
+        type: DropdownType.SingleSelect,
+        placeholder: 'Select an option',
+        label: 'Select',
+        leadingIcon: 'List',
+        disabled: false,
+        showClear: true,
+        showLeadingIcon: true,
+        required: false,
+    },
+};

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

@@ -4,4 +4,5 @@ export * from './Toggle';
 export * from './TextArea';
 export * from './TextInput';
 export * from './FileUpload';
+export * from './Dropdown';
 export * from './types';

package/dist/stories/Form/index.js

@@ -4,4 +4,5 @@ export * from './Toggle';
 export * from './TextArea';
 export * from './TextInput';
 export * from './FileUpload';
+export * from './Dropdown';
 export * from './types';

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

@@ -110,7 +110,7 @@ export type CheckboxProps = {
     /** Type variant of the checkbox */
     type?: CheckboxType;
     /** Label of the checkbox */
-    label: string;
+    label?: string;
     /** Whether the checkbox is checked */
     checked?: boolean;
     /** Whether the checkbox is disabled */
@@ -213,3 +213,50 @@ export interface AutoCompleteProps {
     /** The onFocus handler for the autocomplete */
     onFocus?: () => void;
 }
+/**
+ * Dropdown type variants
+ */
+export declare enum DropdownType {
+    SingleSelect = "SingleSelect",
+    MultiSelect = "MultiSelect"
+}
+type SingleSelectDropdownProps = {
+    /** The value of the selected option */
+    value: string;
+    /** The onChange handler for the selected option */
+    onChange: (value: string) => void;
+    /** The type of the dropdown */
+    type: DropdownType.SingleSelect;
+};
+type MultiSelectDropdownProps = {
+    /** The value of the selected options */
+    value: string[];
+    /** The onChange handler for the selected options */
+    onChange: (value: string[]) => void;
+    /** The type of the dropdown */
+    type: DropdownType.MultiSelect;
+};
+type DropdownBaseProps = SingleSelectDropdownProps | MultiSelectDropdownProps;
+export type DropdownProps = DropdownBaseProps & {
+    /** The label of the dropdown */
+    label?: string;
+    /** The options to display in the dropdown */
+    options: string[];
+    /** The placeholder of the dropdown */
+    placeholder?: string;
+    /** Whether the dropdown is disabled */
+    disabled?: boolean;
+    /** Whether the dropdown is required */
+    required?: boolean;
+    /** Whether to show the leading icon */
+    showLeadingIcon?: boolean;
+    /** The leading icon of the dropdown */
+    leadingIcon?: IconName;
+    /** Whether to show the clear button */
+    showClear?: boolean;
+    /** Whether to show the checkboxes */
+    showCheckboxes?: boolean;
+    /** Whether to show the ticks */
+    showTicks?: boolean;
+};
+export {};

package/dist/stories/Form/types.js

@@ -36,3 +36,11 @@ export var FileUploadingProgressMode;
     FileUploadingProgressMode["Percentage"] = "Percentage";
     FileUploadingProgressMode["Animation"] = "Animation";
 })(FileUploadingProgressMode || (FileUploadingProgressMode = {}));
+/**
+ * Dropdown type variants
+ */
+export var DropdownType;
+(function (DropdownType) {
+    DropdownType["SingleSelect"] = "SingleSelect";
+    DropdownType["MultiSelect"] = "MultiSelect";
+})(DropdownType || (DropdownType = {}));

package/dist/stories/Navigation/Sidebar.js

@@ -90,9 +90,7 @@ const NavItemWrapper = ({ item, isCollapsed, }) => {
     };
     return (_jsx(NavItem, { text: item.text, icon: item.icon, state: item.state || NavItemState.Default, size: isCollapsed ? NavItemSize.Collapsed : NavItemSize.Expanded, showBadge: isCollapsed ? false : item.showBadge, onClick: handleClick }));
 };
-export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, onToggle, logoProps = {
-    color: 'var(--primitives-desktop-primary-brand-violet-950)',
-}, }) => {
+export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, onToggle, logoProps = { color: 'var(--primitives-desktop-primary-brand-violet-950)' }, }) => {
     const [sidebarSize, setSidebarSize] = useState(size);
     const handleToggle = () => {
         const newSize = sidebarSize === SidebarSize.Expanded
@@ -113,7 +111,7 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
                                         padding: isCollapsed ? '8px' : '0px 12px',
                                     }, children: _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}`)))] }) })] }), _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: {
+                                            : CreditsCardSize.Expanded, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, creditInfoText: credits.creditInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits }) })), bottomNavItems.map((item, index) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `bottom-${item.text}-${index}`)))] }) })] }), _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',

package/dist/stories/Navigation/Sidebar.stories.js

@@ -120,8 +120,10 @@ export const InBoxContainer = {
                     maxWidth: '280px',
                 }, children: _jsx(Sidebar, { ...args, size: SidebarSize.Expanded, navSections: defaultNavSections.slice(0, 3), bottomNavItems: defaultBottomNavItems, credits: {
                         maxCredits: 50,
-                        usedCredits: 10,
+                        usedCredits: 130,
                         creditInfoText: '1 Credit = 1 min video',
+                        overUsageEnabled: true,
+                        overUsedCredits: 20,
                     } }) }), _jsx(Box, { sx: { height: '100dvh', width: 'calc(100dvw)', overflow: 'hidden' }, children: _jsx(Typography, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." }) })] })),
 };
 export const Expanded = {
@@ -143,8 +145,10 @@ export const Collapsed = {
         bottomNavItems: defaultBottomNavItems,
         credits: {
             maxCredits: 50,
-            usedCredits: 10,
+            usedCredits: 102,
             creditInfoText: '1 Credit = 1 min video',
+            overUsageEnabled: true,
+            overUsedCredits: 20,
         },
     },
 };

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

@@ -153,6 +153,8 @@ export interface SidebarProps {
         usedCredits: number;
         creditInfoText?: string;
         onUpgradeClick?: () => void;
+        overUsageEnabled?: boolean;
+        overUsedCredits?: number;
     };
     /**
      * Optional callback when sidebar is toggled

package/dist/stories/Typography/Typography.stories.js

@@ -72,6 +72,13 @@ const meta = {
                 type: { summary: 'object' },
             },
         },
+        title: {
+            control: 'text',
+            description: 'Title of the typography',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
     },
 };
 export default meta;

package/package.json

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