@beydesign/storybook 0.0.38 → 0.0.40

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.38",
+  "version": "0.0.40",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

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

@@ -1,3 +0,0 @@
-export { AgentCard } from './AgentCard';
-export { AgentCardSkeleton } from './AgentCardSkeleton';
-export type { AgentCardProps, AgentState, AgentCardSkeletonProps, } from './types';

package/dist/stories/AgentCard/index.js

@@ -1,2 +0,0 @@
-export { AgentCard } from './AgentCard';
-export { AgentCardSkeleton } from './AgentCardSkeleton';

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,24 +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>;

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 {
-}

package/dist/stories/types/avatar.js

@@ -1,28 +0,0 @@
-/**
- * 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 const getInitials = (text) => {
-    return text
-        .split(' ')
-        .map((word) => word[0]?.toUpperCase())
-        .join('');
-};

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

@@ -1,49 +0,0 @@
-import { IconName } from '../../utils/icon';
-import type { SxProps, Theme } from '@mui/material';
-/**
- * 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;
-};
-/**
- * Props for the Components wrapper
- */
-export interface ComponentsProps {
-}

package/dist/stories/types/badge.js

@@ -1,25 +0,0 @@
-/**
- * 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 = {}));

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

@@ -1,26 +0,0 @@
-export declare enum CheckboxType {
-    Radio = "Radio",
-    Checkbox = "Checkbox"
-}
-/**
- * Checkbox component props
- */
-export type CheckboxProps = {
-    /** Type variant of the checkbox */
-    type?: CheckboxType;
-    /** Label of the checkbox */
-    label: string;
-    /** Whether the checkbox is checked */
-    checked?: boolean;
-    /** Whether the checkbox is disabled */
-    disabled?: boolean;
-    /** Whether the checkbox is read-only */
-    required?: boolean;
-    /** Event handler for the checkbox */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-};
-/**
- * Props for the Components wrapper
- */
-export interface ComponentsProps {
-}

package/dist/stories/types/checkbox.js

@@ -1,5 +0,0 @@
-export var CheckboxType;
-(function (CheckboxType) {
-    CheckboxType["Radio"] = "Radio";
-    CheckboxType["Checkbox"] = "Checkbox";
-})(CheckboxType || (CheckboxType = {}));

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

@@ -1,25 +0,0 @@
-import { AvatarProps } from './avatar';
-/**
- * Header component props
- */
-export type HeaderProps = {
-    /** Title of the header */
-    title: string;
-    /** Email of the logged in user */
-    email: string;
-    /** Avatar props */
-    avatarProps: AvatarProps;
-    /** Text of the back button */
-    backButtonText?: string;
-    /** CSS class name for additional styling */
-    className?: string;
-    /** Callback function to handle back button click */
-    onBackClick?: () => void;
-    /** Callback function to handle logout button click */
-    onLogoutClick?: () => void;
-};
-/**
- * Props for the Components wrapper
- */
-export interface ComponentsProps {
-}

package/dist/stories/types/header.js

@@ -1 +0,0 @@
-export {};