@beydesign/storybook 0.0.37 → 0.0.39

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

@@ -0,0 +1,205 @@
+import { Theme } from '@mui/material';
+import { SxProps } from '@mui/material';
+import { IconName } from '../../utils';
+/**
+ * Badge size variants
+ */
+export declare enum BadgeSize {
+    lg = "lg",
+    md = "md",
+    xs = "xs"
+}
+/**
+ * Badge color variants
+ */
+export declare enum BadgeColor {
+    Default = "Default",
+    Violet = "Violet",
+    Lemon = "Lemon",
+    Green = "Green",
+    Red = "Red",
+    Yellow = "Yellow",
+    Blue = "Blue",
+    Cyan = "Cyan",
+    Pink = "Pink",
+    DarkTransparent = "DarkTransparent"
+}
+/**
+ * Badge component props
+ */
+export type BadgeProps = {
+    /** Size variant of the badge */
+    size?: BadgeSize;
+    /** Color variant of the badge */
+    color?: BadgeColor;
+    /** Text content of the badge */
+    text: string;
+    /** Custom style of the badge */
+    style?: SxProps<Theme>;
+    /** Whether to show the Icon */
+    showIcon?: boolean;
+    /** Icon to display in the badge */
+    icon?: IconName;
+    /** Whether to fill the icon */
+    fill?: boolean;
+};
+/**
+ * Avatar size variants
+ */
+export declare enum AvatarSize {
+    xxl = "xxl",
+    xl = "xl",
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs"
+}
+/**
+ * Avatar style variants
+ */
+export declare enum AvatarStyle {
+    Placeholder = "Placeholder",
+    Picture = "Picture",
+    Letters = "Letters"
+}
+export declare const AvatarImage = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTAUPUG0r--EDZzf-f9Afj_Jp7N96yIGsWPgCYIkrAS1rCJHIcdm_RCq_me44bJc0dvvY&usqp=CAU";
+/**
+ * Avatar component props
+ */
+export type AvatarProps = {
+    /** Style variant of the avatar */
+    avatarStyle: AvatarStyle;
+    /** Text content of the avatar if avatarStyle is Letters */
+    text?: string;
+    /** Image source of the avatar if avatarStyle is Picture  */
+    image?: string;
+    /** Custom style of the avatar */
+    style?: SxProps<Theme>;
+    /** Size variant of the avatar */
+    size?: AvatarSize;
+    /** Visual hierarchy of the avatar */
+    border?: boolean;
+};
+export declare enum HintBubbleType {
+    Info = "Info",
+    Error = "Error"
+}
+export declare enum HintBubbleSize {
+    md = "md",
+    sm = "sm"
+}
+/**
+ * HintBubble component props
+ */
+export type HintBubbleProps = {
+    /** Type variant of the hint bubble */
+    type?: HintBubbleType;
+    /** Size variant of the hint bubble */
+    size?: HintBubbleSize;
+    /** Text of the hint bubble */
+    text: string;
+};
+export declare enum LogoVariant {
+    Horizontal = "horizontal",
+    Vertical = "vertical",
+    Icon = "icon"
+}
+export interface LogoProps {
+    /**
+     * The variant of the logo to display
+     */
+    variant?: LogoVariant;
+    /**
+     * The color to apply to the logo
+     * If gradient is provided, this will be ignored
+     */
+    color?: string;
+    /**
+     * Optional gradient value to apply to the logo
+     * Example: "linear-gradient(180deg, #3300ff 0%, #d170ff 100%)"
+     */
+    gradient?: string;
+    /**
+     * Optional className for additional styling
+     */
+    className?: string;
+    /**
+     * Optional URL to override the default SVG
+     * If provided, this will be used instead of the built-in SVG
+     */
+    svgUrl?: string;
+}
+/**
+ * Menu item
+ */
+export interface MenuItemProps {
+    /** Label */
+    label: string;
+    /** Icon */
+    icon: IconName;
+    /** On click */
+    onClick: () => void;
+    /** Destructive */
+    destructive?: boolean;
+}
+/**
+ * Menu component props
+ */
+export type MenuProps = {
+    /** Icon */
+    icon?: IconName;
+    /** Items */
+    items?: MenuItemProps[];
+    /** Style */
+    style?: React.CSSProperties;
+};
+/**
+ * Progress indicator mode variants
+ */
+export declare enum ProgressIndicatorMode {
+    Value = "Value",
+    Percentage = "Percentage"
+}
+/**
+ * Progress indicator component props
+ */
+export type ProgressIndicatorProps = {
+    /** Mode variant of the progress indicator */
+    mode?: ProgressIndicatorMode;
+    /** Value of the progress indicator */
+    currentValue: number;
+    /** Maximum value of the progress indicator */
+    maxValue: number;
+    /** Fill color of the progress indicator */
+    fillColor?: string;
+    /** Background color of the progress indicator */
+    backgroundColor?: string;
+    /** Text of the progress indicator */
+    text?: string;
+    /** Text color of the progress indicator */
+    textColor?: string;
+    /** Style of the progress indicator */
+    style?: SxProps<Theme>;
+};
+export interface SkeletonLoaderProps {
+    /**
+     * Width of the skeleton
+     */
+    width?: string | number;
+    /**
+     * Height of the skeleton
+     */
+    height?: string | number;
+    /**
+     * Border radius of the skeleton
+     */
+    borderRadius?: string;
+    /**
+     * Animation duration in seconds
+     */
+    animationDuration?: number;
+    /**
+     * Custom style for the skeleton
+     */
+    style?: React.CSSProperties;
+}

package/dist/stories/UI/types.js

@@ -0,0 +1,71 @@
+/**
+ * Badge size variants
+ */
+export var BadgeSize;
+(function (BadgeSize) {
+    BadgeSize["lg"] = "lg";
+    BadgeSize["md"] = "md";
+    BadgeSize["xs"] = "xs";
+})(BadgeSize || (BadgeSize = {}));
+/**
+ * Badge color variants
+ */
+export var BadgeColor;
+(function (BadgeColor) {
+    BadgeColor["Default"] = "Default";
+    BadgeColor["Violet"] = "Violet";
+    BadgeColor["Lemon"] = "Lemon";
+    BadgeColor["Green"] = "Green";
+    BadgeColor["Red"] = "Red";
+    BadgeColor["Yellow"] = "Yellow";
+    BadgeColor["Blue"] = "Blue";
+    BadgeColor["Cyan"] = "Cyan";
+    BadgeColor["Pink"] = "Pink";
+    BadgeColor["DarkTransparent"] = "DarkTransparent";
+})(BadgeColor || (BadgeColor = {}));
+/**
+ * Avatar size variants
+ */
+export var AvatarSize;
+(function (AvatarSize) {
+    AvatarSize["xxl"] = "xxl";
+    AvatarSize["xl"] = "xl";
+    AvatarSize["lg"] = "lg";
+    AvatarSize["md"] = "md";
+    AvatarSize["sm"] = "sm";
+    AvatarSize["xs"] = "xs";
+})(AvatarSize || (AvatarSize = {}));
+/**
+ * Avatar style variants
+ */
+export var AvatarStyle;
+(function (AvatarStyle) {
+    AvatarStyle["Placeholder"] = "Placeholder";
+    AvatarStyle["Picture"] = "Picture";
+    AvatarStyle["Letters"] = "Letters";
+})(AvatarStyle || (AvatarStyle = {}));
+export const AvatarImage = `https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTAUPUG0r--EDZzf-f9Afj_Jp7N96yIGsWPgCYIkrAS1rCJHIcdm_RCq_me44bJc0dvvY&usqp=CAU`;
+export var HintBubbleType;
+(function (HintBubbleType) {
+    HintBubbleType["Info"] = "Info";
+    HintBubbleType["Error"] = "Error";
+})(HintBubbleType || (HintBubbleType = {}));
+export var HintBubbleSize;
+(function (HintBubbleSize) {
+    HintBubbleSize["md"] = "md";
+    HintBubbleSize["sm"] = "sm";
+})(HintBubbleSize || (HintBubbleSize = {}));
+export var LogoVariant;
+(function (LogoVariant) {
+    LogoVariant["Horizontal"] = "horizontal";
+    LogoVariant["Vertical"] = "vertical";
+    LogoVariant["Icon"] = "icon";
+})(LogoVariant || (LogoVariant = {}));
+/**
+ * Progress indicator mode variants
+ */
+export var ProgressIndicatorMode;
+(function (ProgressIndicatorMode) {
+    ProgressIndicatorMode["Value"] = "Value";
+    ProgressIndicatorMode["Percentage"] = "Percentage";
+})(ProgressIndicatorMode || (ProgressIndicatorMode = {}));

package/dist/utils/common.d.ts

@@ -0,0 +1 @@
+export declare const getInitials: (text: string) => string;

package/dist/utils/common.js

@@ -0,0 +1,6 @@
+export const getInitials = (text) => {
+    return text
+        .split(' ')
+        .map((word) => word[0]?.toUpperCase())
+        .join('');
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon';
+export * from './common';

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export * from './icon';
+export * from './common';

package/package.json

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

package/dist/stories/AgentCard.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { AgentCardProps, ComponentsProps } from './types/agent-card';
-export declare const AgentCard: React.FC<AgentCardProps>;
-export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/Avatar.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { AvatarProps, ComponentsProps } from './types/avatar';
-export declare const Avatar: React.FC<AvatarProps>;
-export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/Button.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { MainButtonProps, ComponentsProps } from './types/button';
-export declare const MainButton: React.FC<MainButtonProps>;
-export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/Logo.stories.d.ts

@@ -1,39 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { LogoVariant } from './types/logo';
-declare const meta: {
-    title: string;
-    component: import("react").FC<import("./types/logo").LogoProps>;
-    parameters: {
-        layout: string;
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-    tags: string[];
-    argTypes: {
-        variant: {
-            control: "select";
-            options: LogoVariant[];
-        };
-        color: {
-            control: "color";
-        };
-        gradient: {
-            control: "text";
-            description: string;
-        };
-        svgUrl: {
-            control: "text";
-            description: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Horizontal: Story;
-export declare const Vertical: Story;
-export declare const Icon: Story;
-export declare const CustomColor: Story;
-export declare const WithGradient: Story;
-export declare const ExternalSvg: Story;

package/dist/stories/Menu.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ComponentsProps, MenuProps } from './types/menu';
-export declare const Menu: React.FC<MenuProps>;
-export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/Menu.stories.d.ts

@@ -1,43 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import("react").FC<import("..").MenuProps>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        icon: {
-            control: "select";
-            options: string[];
-            defaultValue: string;
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        items: {
-            control: "object";
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        style: {
-            control: "object";
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;

package/dist/stories/ProgressIndicator.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ComponentsProps, ProgressIndicatorProps } from './types/progress-indicator';
-export declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
-export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/SkeletonLoader.d.ts

@@ -1,47 +0,0 @@
-import React from 'react';
-export interface SkeletonLoaderProps {
-    /**
-     * Width of the skeleton
-     */
-    width?: string | number;
-    /**
-     * Height of the skeleton
-     */
-    height?: string | number;
-    /**
-     * Border radius of the skeleton
-     */
-    borderRadius?: string;
-    /**
-     * Animation duration in seconds
-     */
-    animationDuration?: number;
-    /**
-     * Custom style for the skeleton
-     */
-    style?: React.CSSProperties;
-}
-export declare const SkeletonLoader: React.FC<SkeletonLoaderProps>;
-export interface AgentCardSkeletonProps {
-    /**
-     * Width of the card
-     */
-    width?: string | number;
-    /**
-     * Show date placeholder
-     */
-    showDate?: boolean;
-    /**
-     * Show badges placeholder
-     */
-    showBadges?: boolean;
-    /**
-     * Show description placeholder
-     */
-    showDescription?: boolean;
-    /**
-     * Custom style for the skeleton
-     */
-    style?: React.CSSProperties;
-}
-export declare const AgentCardSkeleton: React.FC<AgentCardSkeletonProps>;

package/dist/stories/SkeletonLoader.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SkeletonLoader, AgentCardSkeleton } from './SkeletonLoader';
-declare const meta: Meta<typeof SkeletonLoader>;
-export default meta;
-type Story = StoryObj<typeof SkeletonLoader>;
-export declare const Default: Story;
-export declare const CustomAnimation: Story;
-export declare const RoundedSkeleton: Story;
-export declare const agentCardSkeletonMeta: Meta<typeof AgentCardSkeleton>;
-export declare const AgentCardSkeletonStory: StoryObj<typeof AgentCardSkeleton>;
-export declare const AgentCardSkeletonGrid: StoryObj<typeof AgentCardSkeleton>;

package/dist/stories/SkeletonLoader.stories.js

@@ -1,141 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SkeletonLoader, AgentCardSkeleton } from './SkeletonLoader';
-import { Box } from '@mui/material';
-const meta = {
-    title: 'Design System/Components/SkeletonLoader',
-    component: SkeletonLoader,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        width: {
-            control: 'text',
-            description: 'Width of the skeleton',
-            table: {
-                type: { summary: 'string | number' },
-                defaultValue: { summary: '100%' },
-            },
-        },
-        height: {
-            control: 'text',
-            description: 'Height of the skeleton',
-            table: {
-                type: { summary: 'string | number' },
-                defaultValue: { summary: '100%' },
-            },
-        },
-        borderRadius: {
-            control: 'text',
-            description: 'Border radius of the skeleton',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: {
-                    summary: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
-                },
-            },
-        },
-        animationDuration: {
-            control: 'number',
-            description: 'Animation duration in seconds',
-            table: {
-                type: { summary: 'number' },
-                defaultValue: { summary: '1.5' },
-            },
-        },
-        style: {
-            control: 'object',
-            description: 'Custom style for the skeleton',
-            table: {
-                type: { summary: 'React.CSSProperties' },
-                defaultValue: { summary: 'undefined' },
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        width: 200,
-        height: 100,
-    },
-};
-export const CustomAnimation = {
-    args: {
-        width: 200,
-        height: 100,
-        animationDuration: 3,
-    },
-};
-export const RoundedSkeleton = {
-    args: {
-        width: 100,
-        height: 100,
-        borderRadius: '50%',
-    },
-};
-// AgentCardSkeleton meta and stories
-export const agentCardSkeletonMeta = {
-    title: 'Design System/Components/AgentCardSkeleton',
-    component: AgentCardSkeleton,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        width: {
-            control: 'text',
-            description: 'Width of the card',
-            table: {
-                type: { summary: 'string | number' },
-                defaultValue: { summary: '300px' },
-            },
-        },
-        showDate: {
-            control: 'boolean',
-            description: 'Show date placeholder',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'false' },
-            },
-        },
-        showBadges: {
-            control: 'boolean',
-            description: 'Show badges placeholder',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'false' },
-            },
-        },
-        showDescription: {
-            control: 'boolean',
-            description: 'Show description placeholder',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'false' },
-            },
-        },
-        style: {
-            control: 'object',
-            description: 'Custom style for the skeleton',
-            table: {
-                type: { summary: 'React.CSSProperties' },
-                defaultValue: { summary: 'undefined' },
-            },
-        },
-    },
-};
-// AgentCardSkeleton stories
-export const AgentCardSkeletonStory = {
-    name: 'Agent Card Skeleton',
-    render: (args) => _jsx(AgentCardSkeleton, { ...args }),
-    args: {
-        showDate: true,
-        showBadges: true,
-        showDescription: true,
-    },
-};
-export const AgentCardSkeletonGrid = {
-    name: 'Agent Card Skeleton Grid',
-    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: [_jsx(AgentCardSkeleton, { showDate: true }), _jsx(AgentCardSkeleton, { showBadges: true }), _jsx(AgentCardSkeleton, { showDescription: true }), _jsx(AgentCardSkeleton, { showDate: true, showBadges: true, showDescription: true })] })),
-};

package/dist/stories/Toggle.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ComponentsProps, ToggleProps } from './types/toggle';
-export declare const Toggle: React.FC<ToggleProps>;
-export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/ToggleButtonGroup.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ComponentsProps, ToggleButtonGroupProps } from './types/toggle-button-group';
-export declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
-export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/Typography.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ComponentsProps, TypographyProps } from './types/typography';
-export declare const Typography: React.FC<TypographyProps>;
-export declare const Components: React.FC<ComponentsProps>;

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

@@ -1,44 +0,0 @@
-import type { SxProps, Theme } from '@mui/material';
-/**
- * Avatar size variants
- */
-export declare enum AvatarSize {
-    xxl = "xxl",
-    xl = "xl",
-    lg = "lg",
-    md = "md",
-    sm = "sm",
-    xs = "xs"
-}
-/**
- * Avatar style variants
- */
-export declare enum AvatarStyle {
-    Placeholder = "Placeholder",
-    Picture = "Picture",
-    Letters = "Letters"
-}
-export declare const AvatarImage = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTAUPUG0r--EDZzf-f9Afj_Jp7N96yIGsWPgCYIkrAS1rCJHIcdm_RCq_me44bJc0dvvY&usqp=CAU";
-export declare const getInitials: (text: string) => string;
-/**
- * Avatar component props
- */
-export type AvatarProps = {
-    /** Style variant of the avatar */
-    avatarStyle: AvatarStyle;
-    /** Text content of the avatar if avatarStyle is Letters */
-    text?: string;
-    /** Image source of the avatar if avatarStyle is Picture  */
-    image?: string;
-    /** Custom style of the avatar */
-    style?: SxProps<Theme>;
-    /** Size variant of the avatar */
-    size?: AvatarSize;
-    /** Visual hierarchy of the avatar */
-    border?: boolean;
-};
-/**
- * Props for the Components wrapper
- */
-export interface ComponentsProps {
-}