@beydesign/storybook 0.0.1 → 0.0.2

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

@@ -0,0 +1,274 @@
+import { SxProps, Theme } from '@mui/material';
+import { HintBubbleProps } from '../UI';
+import { IconName } from '../../utils';
+import React from 'react';
+/**
+ * Text area component props
+ */
+export type TextAreaProps = {
+    /** Text area label */
+    label?: string;
+    /** Text area value */
+    value: string;
+    /** Text area onChange */
+    onChange: (value: string) => void;
+    /** Text input placeholder */
+    placeholder?: string;
+    /** Text input hint */
+    hintText?: string;
+    /** Text input error */
+    errorText?: string;
+    /** Text input disabled */
+    disabled?: boolean;
+    /** Whether to apply max length restriction */
+    allowMaxLength?: boolean;
+    /** Text input max length */
+    maxLength?: number;
+    /** Text input show max length indicator */
+    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 area label trailing element */
+    labelTrailingElement?: React.ReactNode;
+    /** Text area label container style */
+    labelContainerStyle?: SxProps<Theme>;
+};
+/**
+ * Text input component props
+ */
+export type TextInputProps = {
+    /** Text input label */
+    label?: string;
+    /** Text input value */
+    value: string;
+    /** Text input onChange */
+    onChange: (value: string) => void;
+    /** Text input placeholder */
+    placeholder?: string;
+    /** Text input type */
+    type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+    /** Text input hint */
+    hintText?: string;
+    /** Text input error */
+    errorText?: string;
+    /** Text input disabled */
+    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;
+    /** Text input label trailing element */
+    labelTrailingElement?: React.ReactNode;
+    /** Text input label container style */
+    labelContainerStyle?: SxProps<Theme>;
+    /**
+     * Whether to show the password visibility toggle (eye icon).
+     * Only applies when `type` is `password`. Defaults to `true`.
+     */
+    showPasswordToggle?: boolean;
+};
+/**
+ * Toggle position variants
+ */
+export declare enum TogglePosition {
+    Left = "Left",
+    Right = "Right"
+}
+/**
+ * Toggle component props
+ */
+export type ToggleProps = {
+    /** Text of the toggle */
+    text?: string;
+    /** Title of the toggle */
+    title?: string;
+    /** Whether the toggle is checked */
+    checked: boolean;
+    /** Callback function when the toggle is checked */
+    onChange: (checked: boolean) => void;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Position of the toggle */
+    togglePosition?: TogglePosition;
+    /** Style of the toggle */
+    style?: SxProps<Theme>;
+    /** Text color of the toggle */
+    textColor?: string;
+    /** Title color of the toggle */
+    titleColor?: string;
+};
+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;
+    /** Custom style of the checkbox */
+    style?: SxProps<Theme>;
+};
+export interface FileUploadProps {
+    /** Whether the file upload is disabled */
+    disabled?: boolean;
+    /** Accepted file types */
+    acceptedFileTypes?: string;
+    /** Max file size in MB */
+    maxFileSizeMB?: number;
+    /** Callback function when a file is selected */
+    onFileSelect?: (file: File) => void;
+    /** Style of the file upload */
+    sx?: SxProps<Theme>;
+}
+/**
+ * File type variants
+ */
+export declare enum FileType {
+    Sample = "Sample",
+    Default = "Default"
+}
+export interface UploadedFileProps {
+    /** Type of the uploaded file */
+    type?: FileType;
+    /** File name */
+    fileName: string;
+    /** Whether to show the delete button */
+    showDelete?: boolean;
+    /** Callback function when the delete button is clicked */
+    onDelete?: () => void;
+    /** Whether to show the download button */
+    showDownload?: boolean;
+    /** Callback function when the download button is clicked */
+    onDownload?: () => void;
+    /** Style of the uploaded file */
+    sx?: SxProps<Theme>;
+}
+/**
+ * File uploading status variants
+ */
+export declare enum FileUploadingStatus {
+    Uploading = "Uploading",
+    Success = "Success",
+    Error = "Error"
+}
+/**
+ * Progress mode variants
+ */
+export declare enum FileUploadingProgressMode {
+    Percentage = "Percentage",
+    Animation = "Animation"
+}
+/**
+ * File uploading component props
+ */
+export interface FileUploadingProps {
+    /** Status of the file uploading */
+    uploadingStatus: FileUploadingStatus;
+    /** Progress mode of the file uploading */
+    progressMode?: FileUploadingProgressMode;
+    /** Progress of the file uploading */
+    uploadProgress?: number;
+    /** Style of the file uploading */
+    sx?: SxProps<Theme>;
+    /** Whether to show the cancel button */
+    showCancel?: boolean;
+    /** Callback function when the cancel button is clicked */
+    onCancel?: () => void;
+    /** Whether to show the retry button */
+    showRetry?: boolean;
+    /** Callback function when the retry button is clicked */
+    onRetry?: () => void;
+    /** File name */
+    fileName: string;
+}
+export interface AutoCompleteProps {
+    /** The options to display in the autocomplete */
+    options: string[];
+    /** The value of the selected option */
+    value: string;
+    /** The onChange handler for the selected option */
+    onChange: (value: string) => void;
+    /** The leading icon of the autocomplete */
+    leadingIcon?: IconName;
+    /** The placeholder of the autocomplete */
+    placeholder?: string;
+    /** Whether the autocomplete is disabled */
+    disabled?: boolean;
+    /** The onBlur handler for the autocomplete */
+    onBlur?: () => void;
+    /** 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 | null;
+    /** 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

@@ -0,0 +1,46 @@
+/**
+ * Toggle position variants
+ */
+export var TogglePosition;
+(function (TogglePosition) {
+    TogglePosition["Left"] = "Left";
+    TogglePosition["Right"] = "Right";
+})(TogglePosition || (TogglePosition = {}));
+export var CheckboxType;
+(function (CheckboxType) {
+    CheckboxType["Radio"] = "Radio";
+    CheckboxType["Checkbox"] = "Checkbox";
+})(CheckboxType || (CheckboxType = {}));
+/**
+ * File type variants
+ */
+export var FileType;
+(function (FileType) {
+    FileType["Sample"] = "Sample";
+    FileType["Default"] = "Default";
+})(FileType || (FileType = {}));
+/**
+ * File uploading status variants
+ */
+export var FileUploadingStatus;
+(function (FileUploadingStatus) {
+    FileUploadingStatus["Uploading"] = "Uploading";
+    FileUploadingStatus["Success"] = "Success";
+    FileUploadingStatus["Error"] = "Error";
+})(FileUploadingStatus || (FileUploadingStatus = {}));
+/**
+ * Progress mode variants
+ */
+export var FileUploadingProgressMode;
+(function (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/Foundations/Colors.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Colors: React.FC;

package/dist/stories/Foundations/Colors.js

@@ -0,0 +1,266 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Copy } from '@phosphor-icons/react';
+import styles from './Colors.module.css';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+const ColorSwatch = ({ name, value }) => {
+    const [copiedName, setCopiedName] = useState(false);
+    const [copiedValue, setCopiedValue] = useState(false);
+    const isGradient = value.includes('linear-gradient');
+    // Get the actual color value from CSS variable
+    const getComputedValue = () => {
+        const style = getComputedStyle(document.documentElement);
+        const varName = value.match(/var\((.*?)\)/)?.[1] || '';
+        return style.getPropertyValue(varName).trim();
+    };
+    const displayValue = isGradient
+        ? value.replace(/var\((.*?)\)/g, (_, p1) => {
+            const style = getComputedStyle(document.documentElement);
+            return style.getPropertyValue(p1);
+        })
+        : getComputedValue();
+    const handleCopyName = (e) => {
+        e.stopPropagation();
+        navigator.clipboard.writeText(name);
+        setCopiedName(true);
+        setTimeout(() => setCopiedName(false), 1500);
+    };
+    const handleCopyValue = (e) => {
+        e.stopPropagation();
+        navigator.clipboard.writeText(displayValue);
+        setCopiedValue(true);
+        setTimeout(() => setCopiedValue(false), 1500);
+    };
+    return (_jsxs("div", { className: styles.swatch, children: [_jsx("div", { className: styles.color, style: {
+                    background: isGradient ? displayValue : value,
+                    backgroundSize: 'cover',
+                } }), _jsxs("div", { className: styles.details, children: [_jsxs("div", { className: styles.name, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-label)", children: name }), _jsx(Copy, { size: 16, onClick: handleCopyName, style: {
+                                    cursor: 'pointer',
+                                    color: 'var(--color-text-text-subtle)',
+                                } }), copiedName && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] }), _jsxs("div", { className: styles.value, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-subtle)", children: displayValue }), _jsx(Copy, { size: 16, onClick: handleCopyValue, style: {
+                                    cursor: 'pointer',
+                                    color: 'var(--color-text-text-subtle)',
+                                } }), copiedValue && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] })] })] }));
+};
+const ColorGroup = ({ title, colors }) => (_jsxs("div", { className: styles.group, children: [_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--color-text-text-label)", children: title }), _jsx("div", { className: styles.swatchGrid, children: Object.entries(colors).map(([name, value]) => (_jsx(ColorSwatch, { name: name, value: value }, name))) })] }));
+export const Colors = () => {
+    // Group colors by their categories
+    const primitives = {
+        'Brand Violet': {
+            '--primitives-desktop-primary-brand-violet-25': 'var(--primitives-desktop-primary-brand-violet-25)',
+            '--primitives-desktop-primary-brand-violet-50': 'var(--primitives-desktop-primary-brand-violet-50)',
+            '--primitives-desktop-primary-brand-violet-100': 'var(--primitives-desktop-primary-brand-violet-100)',
+            '--primitives-desktop-primary-brand-violet-200': 'var(--primitives-desktop-primary-brand-violet-200)',
+            '--primitives-desktop-primary-brand-violet-300': 'var(--primitives-desktop-primary-brand-violet-300)',
+            '--primitives-desktop-primary-brand-violet-400': 'var(--primitives-desktop-primary-brand-violet-400)',
+            '--primitives-desktop-primary-brand-violet-500': 'var(--primitives-desktop-primary-brand-violet-500)',
+            '--primitives-desktop-primary-brand-violet-600': 'var(--primitives-desktop-primary-brand-violet-600)',
+            '--primitives-desktop-primary-brand-violet-700': 'var(--primitives-desktop-primary-brand-violet-700)',
+            '--primitives-desktop-primary-brand-violet-800': 'var(--primitives-desktop-primary-brand-violet-800)',
+            '--primitives-desktop-primary-brand-violet-900': 'var(--primitives-desktop-primary-brand-violet-900)',
+            '--primitives-desktop-primary-brand-violet-950': 'var(--primitives-desktop-primary-brand-violet-950)',
+        },
+        Grays: {
+            '--primitives-desktop-primary-gray-25': 'var(--primitives-desktop-primary-gray-25)',
+            '--primitives-desktop-primary-gray-50': 'var(--primitives-desktop-primary-gray-50)',
+            '--primitives-desktop-primary-gray-100': 'var(--primitives-desktop-primary-gray-100)',
+            '--primitives-desktop-primary-gray-200': 'var(--primitives-desktop-primary-gray-200)',
+            '--primitives-desktop-primary-gray-300': 'var(--primitives-desktop-primary-gray-300)',
+            '--primitives-desktop-primary-gray-400': 'var(--primitives-desktop-primary-gray-400)',
+            '--primitives-desktop-primary-gray-500': 'var(--primitives-desktop-primary-gray-500)',
+            '--primitives-desktop-primary-gray-600': 'var(--primitives-desktop-primary-gray-600)',
+            '--primitives-desktop-primary-gray-700': 'var(--primitives-desktop-primary-gray-700)',
+            '--primitives-desktop-primary-gray-800': 'var(--primitives-desktop-primary-gray-800)',
+            '--primitives-desktop-primary-gray-900': 'var(--primitives-desktop-primary-gray-900)',
+            '--primitives-desktop-primary-gray-950': 'var(--primitives-desktop-primary-gray-950)',
+        },
+        Red: {
+            '--primitives-desktop-primary-red-25': 'var(--primitives-desktop-primary-red-25)',
+            '--primitives-desktop-primary-red-50': 'var(--primitives-desktop-primary-red-50)',
+            '--primitives-desktop-primary-red-100': 'var(--primitives-desktop-primary-red-100)',
+            '--primitives-desktop-primary-red-200': 'var(--primitives-desktop-primary-red-200)',
+            '--primitives-desktop-primary-red-300': 'var(--primitives-desktop-primary-red-300)',
+            '--primitives-desktop-primary-red-400': 'var(--primitives-desktop-primary-red-400)',
+            '--primitives-desktop-primary-red-500': 'var(--primitives-desktop-primary-red-500)',
+            '--primitives-desktop-primary-red-600': 'var(--primitives-desktop-primary-red-600)',
+            '--primitives-desktop-primary-red-700': 'var(--primitives-desktop-primary-red-700)',
+            '--primitives-desktop-primary-red-800': 'var(--primitives-desktop-primary-red-800)',
+            '--primitives-desktop-primary-red-900': 'var(--primitives-desktop-primary-red-900)',
+            '--primitives-desktop-primary-red-950': 'var(--primitives-desktop-primary-red-950)',
+        },
+        Success: {
+            '--primitives-desktop-primary-success-25': 'var(--primitives-desktop-primary-success-25)',
+            '--primitives-desktop-primary-success-50': 'var(--primitives-desktop-primary-success-50)',
+            '--primitives-desktop-primary-success-100': 'var(--primitives-desktop-primary-success-100)',
+            '--primitives-desktop-primary-success-200': 'var(--primitives-desktop-primary-success-200)',
+            '--primitives-desktop-primary-success-300': 'var(--primitives-desktop-primary-success-300)',
+            '--primitives-desktop-primary-success-400': 'var(--primitives-desktop-primary-success-400)',
+            '--primitives-desktop-primary-success-500': 'var(--primitives-desktop-primary-success-500)',
+            '--primitives-desktop-primary-success-600': 'var(--primitives-desktop-primary-success-600)',
+            '--primitives-desktop-primary-success-700': 'var(--primitives-desktop-primary-success-700)',
+            '--primitives-desktop-primary-success-800': 'var(--primitives-desktop-primary-success-800)',
+            '--primitives-desktop-primary-success-900': 'var(--primitives-desktop-primary-success-900)',
+            '--primitives-desktop-primary-success-950': 'var(--primitives-desktop-primary-success-950)',
+        },
+        'Brand Lemon': {
+            '--primitives-desktop-primary-brand-lemon-25': 'var(--primitives-desktop-primary-brand-lemon-25)',
+            '--primitives-desktop-primary-brand-lemon-50': 'var(--primitives-desktop-primary-brand-lemon-50)',
+            '--primitives-desktop-primary-brand-lemon-100': 'var(--primitives-desktop-primary-brand-lemon-100)',
+            '--primitives-desktop-primary-brand-lemon-200': 'var(--primitives-desktop-primary-brand-lemon-200)',
+            '--primitives-desktop-primary-brand-lemon-300': 'var(--primitives-desktop-primary-brand-lemon-300)',
+            '--primitives-desktop-primary-brand-lemon-400': 'var(--primitives-desktop-primary-brand-lemon-400)',
+            '--primitives-desktop-primary-brand-lemon-500': 'var(--primitives-desktop-primary-brand-lemon-500)',
+            '--primitives-desktop-primary-brand-lemon-600': 'var(--primitives-desktop-primary-brand-lemon-600)',
+            '--primitives-desktop-primary-brand-lemon-700': 'var(--primitives-desktop-primary-brand-lemon-700)',
+            '--primitives-desktop-primary-brand-lemon-800': 'var(--primitives-desktop-primary-brand-lemon-800)',
+            '--primitives-desktop-primary-brand-lemon-900': 'var(--primitives-desktop-primary-brand-lemon-900)',
+            '--primitives-desktop-primary-brand-lemon-950': 'var(--primitives-desktop-primary-brand-lemon-950)',
+        },
+        Yellow: {
+            '--primitives-desktop-primary-yellow-25': 'var(--primitives-desktop-primary-yellow-25)',
+            '--primitives-desktop-primary-yellow-50': 'var(--primitives-desktop-primary-yellow-50)',
+            '--primitives-desktop-primary-yellow-100': 'var(--primitives-desktop-primary-yellow-100)',
+            '--primitives-desktop-primary-yellow-200': 'var(--primitives-desktop-primary-yellow-200)',
+            '--primitives-desktop-primary-yellow-300': 'var(--primitives-desktop-primary-yellow-300)',
+            '--primitives-desktop-primary-yellow-400': 'var(--primitives-desktop-primary-yellow-400)',
+            '--primitives-desktop-primary-yellow-500': 'var(--primitives-desktop-primary-yellow-500)',
+            '--primitives-desktop-primary-yellow-600': 'var(--primitives-desktop-primary-yellow-600)',
+            '--primitives-desktop-primary-yellow-700': 'var(--primitives-desktop-primary-yellow-700)',
+            '--primitives-desktop-primary-yellow-800': 'var(--primitives-desktop-primary-yellow-800)',
+            '--primitives-desktop-primary-yellow-900': 'var(--primitives-desktop-primary-yellow-900)',
+            '--primitives-desktop-primary-yellow-950': 'var(--primitives-desktop-primary-yellow-950)',
+        },
+        Blue: {
+            '--primitives-desktop-secondary-blue-25': 'var(--primitives-desktop-secondary-blue-25)',
+            '--primitives-desktop-secondary-blue-50': 'var(--primitives-desktop-secondary-blue-50)',
+            '--primitives-desktop-secondary-blue-100': 'var(--primitives-desktop-secondary-blue-100)',
+            '--primitives-desktop-secondary-blue-200': 'var(--primitives-desktop-secondary-blue-200)',
+            '--primitives-desktop-secondary-blue-300': 'var(--primitives-desktop-secondary-blue-300)',
+            '--primitives-desktop-secondary-blue-400': 'var(--primitives-desktop-secondary-blue-400)',
+            '--primitives-desktop-secondary-blue-500': 'var(--primitives-desktop-secondary-blue-500)',
+            '--primitives-desktop-secondary-blue-600': 'var(--primitives-desktop-secondary-blue-600)',
+            '--primitives-desktop-secondary-blue-700': 'var(--primitives-desktop-secondary-blue-700)',
+            '--primitives-desktop-secondary-blue-800': 'var(--primitives-desktop-secondary-blue-800)',
+            '--primitives-desktop-secondary-blue-900': 'var(--primitives-desktop-secondary-blue-900)',
+            '--primitives-desktop-secondary-blue-950': 'var(--primitives-desktop-secondary-blue-950)',
+        },
+        Cyan: {
+            '--primitives-desktop-secondary-cyan-25': 'var(--primitives-desktop-secondary-cyan-25)',
+            '--primitives-desktop-secondary-cyan-50': 'var(--primitives-desktop-secondary-cyan-50)',
+            '--primitives-desktop-secondary-cyan-100': 'var(--primitives-desktop-secondary-cyan-100)',
+            '--primitives-desktop-secondary-cyan-200': 'var(--primitives-desktop-secondary-cyan-200)',
+            '--primitives-desktop-secondary-cyan-300': 'var(--primitives-desktop-secondary-cyan-300)',
+            '--primitives-desktop-secondary-cyan-400': 'var(--primitives-desktop-secondary-cyan-400)',
+            '--primitives-desktop-secondary-cyan-500': 'var(--primitives-desktop-secondary-cyan-500)',
+            '--primitives-desktop-secondary-cyan-600': 'var(--primitives-desktop-secondary-cyan-600)',
+            '--primitives-desktop-secondary-cyan-700': 'var(--primitives-desktop-secondary-cyan-700)',
+            '--primitives-desktop-secondary-cyan-800': 'var(--primitives-desktop-secondary-cyan-800)',
+            '--primitives-desktop-secondary-cyan-900': 'var(--primitives-desktop-secondary-cyan-900)',
+            '--primitives-desktop-secondary-cyan-950': 'var(--primitives-desktop-secondary-cyan-950)',
+        },
+        Pink: {
+            '--primitives-desktop-secondary-pink-25': 'var(--primitives-desktop-secondary-pink-25)',
+            '--primitives-desktop-secondary-pink-50': 'var(--primitives-desktop-secondary-pink-50)',
+            '--primitives-desktop-secondary-pink-100': 'var(--primitives-desktop-secondary-pink-100)',
+            '--primitives-desktop-secondary-pink-200': 'var(--primitives-desktop-secondary-pink-200)',
+            '--primitives-desktop-secondary-pink-300': 'var(--primitives-desktop-secondary-pink-300)',
+            '--primitives-desktop-secondary-pink-400': 'var(--primitives-desktop-secondary-pink-400)',
+            '--primitives-desktop-secondary-pink-500': 'var(--primitives-desktop-secondary-pink-500)',
+            '--primitives-desktop-secondary-pink-600': 'var(--primitives-desktop-secondary-pink-600)',
+            '--primitives-desktop-secondary-pink-700': 'var(--primitives-desktop-secondary-pink-700)',
+            '--primitives-desktop-secondary-pink-800': 'var(--primitives-desktop-secondary-pink-800)',
+            '--primitives-desktop-secondary-pink-900': 'var(--primitives-desktop-secondary-pink-900)',
+            '--primitives-desktop-secondary-pink-950': 'var(--primitives-desktop-secondary-pink-950)',
+        },
+        'White & Transparent': {
+            '--primitives-desktop-primary-white-0': 'var(--primitives-desktop-primary-white-0)',
+            '--primitives-desktop-primary-white-20': 'var(--primitives-desktop-primary-white-20)',
+            '--primitives-desktop-primary-white-40': 'var(--primitives-desktop-primary-white-40)',
+            '--primitives-desktop-primary-white-100': 'var(--primitives-desktop-primary-white-100)',
+            '--primitives-desktop-primary-transparent-violet-50': 'var(--primitives-desktop-primary-transparent-violet-50)',
+            '--primitives-desktop-primary-transparent-gray-40': 'var(--primitives-desktop-primary-transparent-gray-40)',
+            '--primitives-desktop-primary-transparent-black-60': 'var(--primitives-desktop-primary-transparent-black-60)',
+        },
+    };
+    const semanticColors = {
+        Background: {
+            '--color-background-bg-brand-primary': 'var(--color-background-bg-brand-primary)',
+            '--color-background-bg-brand-primary-hover': 'var(--color-background-bg-brand-primary-hover)',
+            '--color-background-bg-brand-secondary-hover': 'var(--color-background-bg-brand-secondary-hover)',
+            '--color-background-bg-error': 'var(--color-background-bg-error)',
+            '--color-background-bg-error-solid': 'var(--color-background-bg-error-solid)',
+            '--color-background-bg-error-subtle': 'var(--color-background-bg-error-subtle)',
+            '--color-background-bg-success': 'var(--color-background-bg-success)',
+            '--color-background-bg-white': 'var(--color-background-bg-white)',
+            '--color-background-bg-page': 'var(--color-background-bg-page)',
+            '--color-background-bg-page-contrast': 'var(--color-background-bg-page-contrast)',
+            '--color-background-bg-element': 'var(--color-background-bg-element)',
+            '--color-background-bg-component': 'var(--color-background-bg-component)',
+            '--color-background-bg-component-hover': 'var(--color-background-bg-component-hover)',
+            '--color-background-bg-component-disabled': 'var(--color-background-bg-component-disabled)',
+            '--color-background-bg-component-dark': 'var(--color-background-bg-component-dark)',
+            '--color-background-bg-card-highlight': 'var(--color-background-bg-card-highlight)',
+            '--color-background-bg-card-highlight-hover': 'var(--color-background-bg-card-highlight-hover)',
+            '--color-background-bg-component-contrast-subtle': 'var(--color-background-bg-component-contrast-subtle)',
+            '--color-background-bg-component-contrast-subtle-hover': 'var(--color-background-bg-component-contrast-subtle-hover)',
+            '--color-background-bg-overlay-1': 'var(--color-background-bg-overlay-1)',
+            '--color-background-bg-badge-accent-success': 'var(--color-background-bg-badge-accent-success)',
+            '--color-background-bg-badge-accent-brand-violet': 'var(--color-background-bg-badge-accent-brand-violet)',
+            '--color-background-bg-badge-accent-red': 'var(--color-background-bg-badge-accent-red)',
+            '--color-background-bg-badge-accent-gray': 'var(--color-background-bg-badge-accent-gray)',
+            '--color-background-bg-badge-accent-yellow': 'var(--color-background-bg-badge-accent-yellow)',
+            '--color-background-bg-button-disabled': 'var(--color-background-bg-button-disabled)',
+            '--color-background-bg-overlay-2': 'var(--color-background-bg-overlay-2)',
+        },
+        Border: {
+            '--color-border-border-brand': 'var(--color-border-border-brand)',
+            '--color-border-border-brand-hover': 'var(--color-border-border-brand-hover)',
+            '--color-border-border-divider': 'var(--color-border-border-divider)',
+            '--color-border-border-component': 'var(--color-border-border-component)',
+            '--color-border-border-component-active': 'var(--color-border-border-component-active)',
+            '--color-border-border-subtle': 'var(--color-border-border-subtle)',
+            '--color-border-border-error': 'var(--color-border-border-error)',
+            '--color-border-border-white': 'var(--color-border-border-white)',
+        },
+        Text: {
+            '--color-text-text-title': 'var(--color-text-text-title)',
+            '--color-text-text-label': 'var(--color-text-text-label)',
+            '--color-text-text-paragraph': 'var(--color-text-text-paragraph)',
+            '--color-text-text-accent': 'var(--color-text-text-accent)',
+            '--color-text-text-clicable': 'var(--color-text-text-clicable)',
+            '--color-text-text-clicable-hover': 'var(--color-text-text-clicable-hover)',
+            '--color-text-text-subtle': 'var(--color-text-text-subtle)',
+            '--color-text-text-white': 'var(--color-text-text-white)',
+            '--color-text-text-inactive': 'var(--color-text-text-inactive)',
+            '--color-text-text-placeholder': 'var(--color-text-text-placeholder)',
+            '--color-text-text-error': 'var(--color-text-text-error)',
+            '--color-text-text-success': 'var(--color-text-text-success)',
+            '--color-text-text-warning': 'var(--color-text-text-warning)',
+            '--color-text-text-disabled': 'var(--color-text-text-disabled)',
+        },
+        Foreground: {
+            '--color-foreground-fg-white': 'var(--color-foreground-fg-white)',
+            '--color-foreground-fg-disabled': 'var(--color-foreground-fg-disabled)',
+            '--color-foreground-fg-primary': 'var(--color-foreground-fg-primary)',
+            '--color-foreground-fg-secondary': 'var(--color-foreground-fg-secondary)',
+            '--color-foreground-fg-secondary-hover': 'var(--color-foreground-fg-secondary-hover)',
+            '--color-foreground-fg-tertiary': 'var(--color-foreground-fg-tertiary)',
+            '--color-foreground-fg-tertiary-hover': 'var(--color-foreground-fg-tertiary-hover)',
+            '--color-foreground-fg-quaternary': 'var(--color-foreground-fg-quaternary)',
+            '--color-foreground-fg-quaternary-hover-brand': 'var(--color-foreground-fg-quaternary-hover-brand)',
+            '--color-foreground-fg-quaternary-hover': 'var(--color-foreground-fg-quaternary-hover)',
+            '--color-foreground-fg-error': 'var(--color-foreground-fg-error)',
+            '--color-foreground-fg-success': 'var(--color-foreground-fg-success)',
+            '--color-foreground-fg-warning': 'var(--color-foreground-fg-warning)',
+            '--color-foreground-fg-brand-primary': 'var(--color-foreground-fg-brand-primary)',
+        },
+    };
+    const gradients = {
+        'Global Gradients': {
+            '--global-logo-gradient': 'var(--global-logo-gradient)',
+            '--global-login-gradient': 'var(--global-login-gradient)',
+            '--global-bp-gradient': 'var(--global-bp-gradient)',
+        },
+    };
+    return (_jsxs("div", { className: styles.container, children: [_jsx(Typography, { size: TypographySize.HeadingXL, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: "Color System" }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-label)", children: "Gradients" }), Object.entries(gradients).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-label)", children: "Primitive Colors" }), Object.entries(primitives).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-label)", children: "Semantic Colors" }), Object.entries(semanticColors).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] })] }));
+};

package/dist/stories/Foundations/Colors.stories.d.ts

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

package/dist/stories/Foundations/Colors.stories.js

@@ -0,0 +1,15 @@
+import { Colors } from './Colors';
+const meta = {
+    title: 'Design System/Foundations/Colors',
+    tags: ['autodocs'],
+    component: Colors,
+    parameters: {
+        layout: 'fullscreen',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4307-13259&m=dev',
+        },
+    },
+};
+export default meta;
+export const Default = {};

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

@@ -0,0 +1 @@
+export * from './Colors';

package/dist/stories/Foundations/index.js

@@ -0,0 +1 @@
+export * from './Colors';

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

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