@beydesign/storybook 0.0.74 → 0.0.76

package/dist/stories/UI/Badge.js

@@ -3,7 +3,7 @@ import { BadgeColor, BadgeSize } from './types';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
-export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, }) => {
+export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, iconWeight = 'regular', iconSize, iconColor, }) => {
     const getBackgroundColor = (color) => {
         switch (color) {
             case BadgeColor.Default:
@@ -110,9 +110,9 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, s
     const border = getBorder(color);
     const padding = getPadding(size);
     const iconProps = {
-        size: getIconSize(size),
-        color: getTextColor(),
-        weight: 'regular',
+        size: iconSize || getIconSize(size),
+        color: iconColor || getTextColor(),
+        weight: iconWeight,
     };
     return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', padding: padding, margin: 0, gap: "4px", sx: customStyle, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { text: text, size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor() }))] }));
 };

package/dist/stories/UI/Topbar.js

@@ -4,6 +4,6 @@ import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Badge } from './Badge';
 import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
-export const Topbar = ({ title, badgeText, newButtonText, onNewButtonClick, className, style, }) => {
-    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', className: className, sx: style, minWidth: '400px', children: [_jsx(Typography, { text: title, size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, trailingElement: badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.xs, color: BadgeColor.Violet, style: { marginBottom: '10px' } })), style: { gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)' } }), _jsx(MainButton, { size: ButtonSize.lg, text: newButtonText, onClick: onNewButtonClick, hierarchy: ButtonHierarchy.Primary, trailingIcon: 'Plus', showTrailingIcon: true })] }));
+export const Topbar = ({ title, badgeText, newButtonText, onNewButtonClick, newButtonHidden, className, style, }) => {
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', className: className, sx: style, minWidth: '400px', children: [_jsx(Typography, { text: title, size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, trailingElement: badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.xs, color: BadgeColor.Violet, style: { marginBottom: '10px' } })), style: { gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)' } }), !newButtonHidden && (_jsx(MainButton, { size: ButtonSize.lg, text: newButtonText, onClick: onNewButtonClick, hierarchy: ButtonHierarchy.Primary, trailingIcon: 'Plus', showTrailingIcon: true }))] }));
 };

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

@@ -41,6 +41,12 @@ export type BadgeProps = {
     icon?: IconName;
     /** Whether to fill the icon */
     fill?: boolean;
+    /** Custom icon weight (regular, bold, duotone, fill, light, thin) */
+    iconWeight?: 'regular' | 'bold' | 'duotone' | 'fill' | 'light' | 'thin';
+    /** Custom icon size (overrides the default size based on badge size) */
+    iconSize?: string | number;
+    /** Custom icon color (overrides the default color based on badge color) */
+    iconColor?: string;
 };
 /**
  * Avatar size variants
@@ -209,8 +215,10 @@ export interface TopbarProps {
     title: string;
     /** Badge */
     badgeText?: string;
-    /** New button */
+    /** New button text */
     newButtonText?: string;
+    /** New button hidden */
+    newButtonHidden?: boolean;
     /** On click of new button */
     onNewButtonClick?: () => void;
     /** Style */

package/package.json

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