@beydesign/storybook 0.0.44 → 0.0.46

package/dist/stories/Agent/AgentCard.js

@@ -55,7 +55,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
           ` })] }));
         }
         if (imageError || !agentImage) {
-            return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(Typography, { text: "No Preview Available", size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }) }));
+            return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', border: '2px solid var(--colors-light-border-border-component)', boxSizing: 'border-box', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(Typography, { text: "No Preview Available", size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }) }));
         }
         return (_jsx("img", { src: agentImage, alt: "Agent", width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' } }));
     };

package/dist/stories/Buttons/ToggleButtonGroup.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ToggleButtonGroupSize, ButtonHierarchy, ButtonSize, ButtonType, } from './types';
 import { Box } from '@mui/material';
 import { MainButton } from './MainButton';
-export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled, size = ToggleButtonGroupSize.lg, }) => {
+export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled, size = ToggleButtonGroupSize.lg, style, }) => {
     const selectedOptionStyle = {
         backgroundColor: 'var(--colors-light-background-bg-card-highlight-hover)',
         color: 'var(--colors-light-text-text-accent)',
@@ -26,6 +26,7 @@ export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled,
             borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
             overflow: 'hidden',
             backgroundColor: 'var(--colors-light-background-bg-component)',
+            ...style,
         }, gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `1px solid var(--colors-light-border-border-component)`, width: 'fit-content', children: options.map((option) => {
             const isSelected = option === selectedOption;
             return (_jsx(MainButton, { text: option, onClick: () => onChange(option), size: getButtonSize(), hierarchy: ButtonHierarchy.Tetriary, type: ButtonType.Button, style: isSelected ? selectedOptionStyle : unselectedOptionStyle, disabled: disabled }, option));

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

@@ -1,5 +1,7 @@
 import type { CSSProperties } from 'react';
 import { IconName } from '../../utils';
+import { SxProps } from '@mui/material';
+import { Theme } from '@mui/material';
 /**
  * Button size variants
  */
@@ -121,4 +123,6 @@ export type ToggleButtonGroupProps = {
     disabled?: boolean;
     /** Callback function when the toggle button is selected */
     onChange: (option: string) => void;
+    /** Custom style of the toggle button */
+    style?: SxProps<Theme>;
 };

package/dist/stories/Form/Checkbox.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Checkbox as MuiCheckbox } from '@mui/material';
 import { CheckboxType } from './types';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
-export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disabled, required, onChange, }) => {
+export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disabled, required, onChange, style, }) => {
     const props = {
         checked,
         disabled,
@@ -18,7 +18,7 @@ export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disable
             onChange(event);
         }
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [type === CheckboxType.Checkbox ? (_jsx(MuiCheckbox, { ...props, sx: {
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', sx: style, children: [type === CheckboxType.Checkbox ? (_jsx(MuiCheckbox, { ...props, sx: {
                     padding: 0,
                     '&.Mui-checked': {
                         color: disabled

package/dist/stories/Form/TextArea.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
-export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, }) => {
+import { HintBubble, HintBubbleSize } from '../UI';
+export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, }) => {
     const [focused, setFocused] = useState(false);
-    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: `1px solid ${errorText
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: `1px solid ${errorText
                         ? 'var(--colors-light-border-border-error)'
                         : focused
                             ? 'var(--colors-light-border-border-component-active)'
@@ -18,5 +19,5 @@ export const TextArea = ({ label, value, onChange, placeholder, hintText, errorT
                                 : 'var(--colors-light-text-text-title)',
                             backgroundColor: 'transparent',
                             resize: 'none',
-                        }, maxLength: maxLength, onFocus: () => setFocused(true), onBlur: () => setFocused(false) }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })) : hintText ? (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && maxLength && (_jsx(Typography, { text: `${maxLength - value.length}`, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { alignSelf: 'flex-end' } }))] })] }) }));
+                        }, maxLength: maxLength, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })) : hintText ? (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && maxLength && (_jsx(Typography, { text: `${maxLength - value.length}`, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { alignSelf: 'flex-end' } }))] })] }) }));
 };

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

@@ -96,6 +96,42 @@ declare const meta: {
                 };
             };
         };
+        hintBubbleText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hintBubbleProps: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        required: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        style: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;

package/dist/stories/Form/TextArea.stories.js

@@ -76,6 +76,34 @@ const meta = {
                 type: { summary: 'number' },
             },
         },
+        hintBubbleText: {
+            control: 'text',
+            description: 'The text of the hint bubble',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        hintBubbleProps: {
+            control: 'object',
+            description: 'The props of the hint bubble',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Whether the text area is required',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Style of the text area',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
     },
 };
 export default meta;

package/dist/stories/Form/TextInput.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
-export const TextInput = ({ label, value, onChange, placeholder, hintText, errorText, disabled, trailingText, }) => {
+import { HintBubble, HintBubbleSize } from '../UI';
+export const TextInput = ({ label, value, onChange, placeholder, hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, }) => {
     const [focused, setFocused] = useState(false);
-    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
                         ? 'none'
                         : '1px solid var(--colors-light-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Box, { display: 'flex', flexDirection: 'row', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
                                 ? '1px solid var(--colors-light-border-border-error)'
@@ -18,5 +19,5 @@ export const TextInput = ({ label, value, onChange, placeholder, hintText, error
                                         ? 'var(--colors-light-text-text-disabled)'
                                         : 'var(--colors-light-text-text-title)',
                                     backgroundColor: 'transparent',
-                                }, onFocus: () => setFocused(true), onBlur: () => setFocused(false) }) }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--colors-light-border-border-component)', children: _jsx(Typography, { text: trailingText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }) }))] }), errorText && (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })), hintText && !errorText && (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' }))] }) }));
+                                }, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--colors-light-border-border-component)', children: _jsx(Typography, { text: trailingText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }) }))] }), errorText && (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })), hintText && !errorText && (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' }))] }) }));
 };

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

@@ -78,6 +78,42 @@ declare const meta: {
                 };
             };
         };
+        hintBubbleProps: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hintBubbleText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        required: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        style: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;

package/dist/stories/Form/TextInput.stories.js

@@ -62,6 +62,34 @@ const meta = {
                 type: { summary: 'function' },
             },
         },
+        hintBubbleProps: {
+            control: 'object',
+            description: 'The props of the hint bubble',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        hintBubbleText: {
+            control: 'text',
+            description: 'The text of the hint bubble',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Whether the text input is required',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Style of the text input',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
     },
 };
 export default meta;
@@ -70,5 +98,6 @@ export const Default = {
         label: "Agent's name",
         value: 'Anna',
         onChange: () => { },
+        hintBubbleText: 'This is a hint bubble',
     },
 };

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

@@ -1,10 +1,11 @@
 import { SxProps, Theme } from '@mui/material';
+import { HintBubbleProps } from '../UI';
 /**
  * Text area component props
  */
 export type TextAreaProps = {
     /** Text area label */
-    label: string;
+    label?: string;
     /** Text area value */
     value: string;
     /** Text area onChange */
@@ -23,13 +24,21 @@ export type TextAreaProps = {
     showMaxLengthIndicator?: boolean;
     /** Text input number of rows */
     numberOfRows?: number;
+    /** Text input hint bubble */
+    hintBubbleText?: string;
+    /** Text input hint bubble props */
+    hintBubbleProps?: Omit<HintBubbleProps, 'text'>;
+    /** Custom style of the text area */
+    style?: SxProps<Theme>;
+    /** Whether the text area is required */
+    required?: boolean;
 };
 /**
  * Text input component props
  */
 export type TextInputProps = {
     /** Text input label */
-    label: string;
+    label?: string;
     /** Text input value */
     value: string;
     /** Text input onChange */
@@ -44,6 +53,14 @@ export type TextInputProps = {
     disabled?: boolean;
     /** Text input trailing text */
     trailingText?: string;
+    /** Text input hint bubble */
+    hintBubbleText?: string;
+    /** Text input hint bubble props */
+    hintBubbleProps?: Omit<HintBubbleProps, 'text'>;
+    /** Text input style */
+    style?: SxProps<Theme>;
+    /** Whether the text input is required */
+    required?: boolean;
 };
 /**
  * Toggle position variants
@@ -91,6 +108,8 @@ export type CheckboxProps = {
     required?: boolean;
     /** Event handler for the checkbox */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Custom style of the checkbox */
+    style?: SxProps<Theme>;
 };
 export interface FileUploadProps {
     /** Whether the file upload is disabled */

package/dist/stories/Typography/Typography.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TypographySize, TypographyWeight } from './types';
-export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, style, }) => {
+export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, style, }) => {
     const getTypographySizeToken = () => {
         let sizeLc = size?.toLowerCase() || '';
         if (sizeLc.includes('heading')) {
@@ -35,8 +35,9 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
             .trim();
         return (computedValue === 'uppercase' ? 'uppercase' : 'none');
     };
-    return (_jsx("span", { className: className, style: {
-            display: 'block',
+    return (_jsxs("span", { className: className, style: {
+            display: 'flex',
+            alignItems: 'center',
             fontSize: fontSize,
             fontWeight: fontWeight,
             fontFamily: fontFamily + ', sans-serif',
@@ -47,6 +48,7 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
             textTransform: getTextTransform(),
             textDecoration: textDecoration,
             color: color || 'var(--global-text-text-title)',
+            gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
             ...style,
-        }, children: text }));
+        }, children: [text, required && (_jsx("span", { style: { color: 'var(--colors-light-text-text-error)' }, children: "*" }))] }));
 };

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

@@ -1,7 +1,7 @@
 import { Typography } from './Typography';
 import { TypographySize, TypographyWeight } from './types';
 const meta = {
-    title: 'Design System/Foundations/Typography/Typography',
+    title: 'Design System/Components/Typography/Typography',
     component: Typography,
     parameters: {
         layout: 'centered',
@@ -44,6 +44,27 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
+        required: {
+            control: 'boolean',
+            description: 'Whether the typography is required',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Style of the typography',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        className: {
+            control: 'text',
+            description: 'Class name of the typography',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
     },
 };
 export default meta;

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

@@ -39,4 +39,6 @@ export interface TypographyProps {
     className?: string;
     /** Style object for additional styling */
     style?: React.CSSProperties;
+    /** Whether the typography is required */
+    required?: boolean;
 }

package/dist/stories/UI/HintBubble.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubbleSize, HintBubbleType } from './types';
-export const HintBubble = ({ text, size = HintBubbleSize.md, type = HintBubbleType.Info, }) => {
+export const HintBubble = ({ text, size = HintBubbleSize.md, type = HintBubbleType.Info, style, }) => {
     const getPadding = () => {
         if (size === HintBubbleSize.sm) {
             return 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
@@ -24,5 +24,5 @@ export const HintBubble = ({ text, size = HintBubbleSize.md, type = HintBubbleTy
             return 'var(--colors-light-text-text-error)';
         return 'var(--colors-light-text-text-title)';
     };
-    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--colors-light-background-bg-card-highlight)', padding: getPadding(), gap: '10px', children: _jsx(Typography, { text: text, size: getTypographySize(), weight: getTypographyWeight(), color: getTypographyColor() }) }));
+    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--colors-light-background-bg-card-highlight)', padding: getPadding(), gap: '10px', sx: style, children: _jsx(Typography, { text: text, size: getTypographySize(), weight: getTypographyWeight(), color: getTypographyColor() }) }));
 };

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

@@ -98,6 +98,8 @@ export type HintBubbleProps = {
     size?: HintBubbleSize;
     /** Text of the hint bubble */
     text: string;
+    /** Custom style of the hint bubble */
+    style?: SxProps<Theme>;
 };
 export declare enum LogoVariant {
     Horizontal = "horizontal",

package/package.json

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