@sendoutcards/quantum-design-ui 1.7.44 → 1.7.47

package/dist/src/hooks/useEntities.d.ts

@@ -0,0 +1,510 @@
+export declare const useEntities: () => {
+    mediaQueries: {
+        queries: {
+            xSmall: string;
+            small: string;
+            medium: string;
+            large: string;
+            xLarge: string;
+        };
+        rawValues: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+    };
+    hocs: {
+        colors: {
+            swatches: {
+                primaryBrand: Required<import("../helpers/theme-functions/computeColorSwatch").ColorSwatch>;
+                secondaryBrand: Required<import("../helpers/theme-functions/computeColorSwatch").ColorSwatch>;
+                success: Required<import("../helpers/theme-functions/computeColorSwatch").ColorSwatch>;
+                danger: Required<import("../helpers/theme-functions/computeColorSwatch").ColorSwatch>;
+                warning: Required<import("../helpers/theme-functions/computeColorSwatch").ColorSwatch>;
+                accent: Required<import("../helpers/theme-functions/computeColorSwatch").ColorSwatch>;
+                grayScale: import("../helpers/theme-functions/computeColorSwatch").ColorSwatch;
+                blueScale: Required<import("../helpers/theme-functions/computeColorSwatch").ColorSwatch>;
+            };
+            background: string;
+            foreground: string;
+        };
+        textColors: {
+            primaryBrand: string;
+            secondaryBrand: string;
+            primaryHeading: string | undefined;
+            primaryBody: string;
+            inverseHeading: string;
+            inverseBody: string;
+            accent: string;
+            success: string;
+            warning: string;
+            danger: string;
+            anchorBlue: string;
+        };
+        spacing: {
+            x0: string;
+            x_25: string;
+            x_5: string;
+            x_75: string;
+            x1: string;
+            x1_5: string;
+            x2: string;
+            x2_5: string;
+            x3: string;
+            x4: string;
+            x5: string;
+            x6: string;
+            x7: string;
+            x8: string;
+            x9: string;
+        };
+        borderRadius: {
+            none: string;
+            small: string;
+            medium: string;
+            default: string;
+            large: string;
+            circle: string;
+        };
+        shadows: {
+            light: string;
+            mediumLight: string;
+            mediumDark: string;
+            dark: string;
+            generate: (shadow: number[] | "dark" | "mediumDark" | "mediumLight" | "light" | "xLight", color?: string | undefined, reverseOffset?: boolean | undefined) => string;
+        };
+        borders: {
+            thin: string;
+            default: string;
+            bold: string;
+        };
+    };
+    text: {
+        imports: {
+            body: string;
+            heading: string;
+        };
+        families: {
+            body: string;
+            heading: string;
+        };
+        types: {
+            heroTitle: {
+                color: string | undefined;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            title: {
+                color: string | undefined;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            subtitle: {
+                color: string | undefined;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            largeBody: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            body: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            caption: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            footnote: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+        };
+        colors: {
+            primaryBrand: string;
+            secondaryBrand: string;
+            primaryHeading: string | undefined;
+            primaryBody: string;
+            inverseHeading: string;
+            inverseBody: string;
+            accent: string;
+            success: string;
+            warning: string;
+            danger: string;
+            anchorBlue: string;
+        };
+        weights: {
+            thin: number;
+            regular: number;
+            semiBold: number;
+            bold: number;
+            extraBold: number;
+        };
+    };
+    spacing: {
+        x0: string;
+        x_25: string;
+        x_5: string;
+        x_75: string;
+        x1: string;
+        x1_5: string;
+        x2: string;
+        x2_5: string;
+        x3: string;
+        x4: string;
+        x5: string;
+        x6: string;
+        x7: string;
+        x8: string;
+        x9: string;
+    };
+    buttons: {
+        primary: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        secondary: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        warning: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        success: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        danger: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        shadow: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        accent: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        smoke: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        boxShadow: (shadow: number[] | "dark" | "mediumDark" | "mediumLight" | "light" | "xLight", color?: string | undefined, reverseOffset?: boolean | undefined) => string;
+        borderSize: string;
+        outlinedBackgroundColor: string;
+        fontWeight: number;
+        sizes: {
+            xSmall: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            small: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            medium: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            large: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            xLarge: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+        };
+    };
+    inputs: {
+        checkbox: {
+            border: string;
+            borderRadius: string;
+            unCheckedBackgroundColor: string | undefined;
+            checkmarkColor: string;
+            labelColor: string;
+        };
+        text: {
+            borderRadius: string;
+            labelColor: Required<import("../helpers/theme-functions/computeColorSwatch").ColorSwatch>;
+            placeholderColor: string;
+            labelFontSize: string;
+            textFontSize: string;
+            borderWidth: string;
+            defaultFocusColor: string;
+        };
+        select: {
+            dropDownShadow: string;
+            dropDownBackgroundColor: string;
+            boxShadow: string;
+            borderRadius: string;
+        };
+        number: {
+            backgroundColor: string | undefined;
+            fontColor: string;
+            fontSize: string;
+            borderRadius: string;
+        };
+        backgroundColor: string;
+        fontSize: string;
+        fontColor: string;
+        fontFamily: string;
+        colors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            danger: string;
+            accent: string;
+            dark: string;
+            blue: string;
+        };
+    };
+    icons: {
+        sizes: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+        colors: {
+            default: string | undefined;
+            primaryBodyText: string;
+            primaryHeadingText: string | undefined;
+            inverseBodyText: string;
+            inverseHeadingText: string;
+            primaryBrand: string;
+            secondaryBrand: string;
+            warning: string;
+            danger: string;
+            success: string;
+            background: string;
+            accent: string;
+        };
+    };
+    card: {
+        backgroundColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        defaultInset: string;
+    };
+    separator: {
+        border: string;
+        color: string | undefined;
+    };
+    loadingSpinner: {
+        size: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+        colors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            danger: string;
+        };
+    };
+    animatedCheckmark: {
+        sizeMap: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+        colors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            accent: string;
+        };
+        strokeWidth: {
+            small: number;
+            default: number;
+            large: number;
+        };
+        borderRadius: string;
+        checkmarkFilledColor: string;
+    };
+    avatar: {
+        borderWidth: string;
+        borderColor: string | undefined;
+        borderRadius: string;
+        boxShadow: string;
+        backgroundColor: string;
+        bubbleBackgroundColors: {
+            isActive: string;
+            default: string | undefined;
+        };
+        defaultBackgroundColors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            accent: string;
+            warning: string;
+            danger: string;
+        };
+        sizes: {
+            xSmall: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            small: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            medium: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            large: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            xLarge: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+        };
+    };
+    dialog: {
+        backgroundColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        defaultInset: string;
+    };
+    drawer: {
+        backgroundColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        bottomDirectionShadow: string;
+        hoverBoxShadow: string;
+        hoverBottomDirectionShadow: string;
+        defaultInset: string;
+        tab: {
+            dark: {
+                backgroundColor: string | undefined;
+                arrowColor: string;
+            };
+            light: {
+                backgroundColor: string;
+                arrowColor: string | undefined;
+            };
+        };
+    };
+    sheet: {
+        mobileBorderRadius: string;
+        desktopBorderRadius: string;
+        backgroundColor: string;
+        boxShadow: string;
+    };
+    slider: {
+        backgroundColor: string;
+        borderRadius: string;
+        handleRadius: string;
+        handleColor: string;
+        handleShadow: string;
+    };
+    navigation: {
+        backgroundColor: string;
+        border: string;
+        borderColor: string | undefined;
+    };
+    toggle: {
+        isActiveColor: string;
+        isNotActiveColor: string | undefined;
+    };
+    tooltip: {
+        lightBackgroundColor: string;
+        darkBackgroundColor: string | undefined;
+        boxShadow: string;
+        borderColor: string;
+    };
+    colorPicker: {
+        backgroundColor: string;
+        borderColor: string;
+        boxShadow: string;
+        borderRadius: string;
+    };
+    sphere: import("../types/global").SizeProperties<{
+        circumference: number;
+        textType: "heroTitle" | "title" | "subtitle" | "largeBody" | "body" | "caption" | "footnote";
+    }>;
+    widget: import("../types/global").ThemeModeProperies<{
+        backgroundColor: string;
+        fontColor: "primaryBrand" | "secondaryBrand" | "primaryHeading" | "primaryBody" | "inverseHeading" | "inverseBody" | "accent" | "success" | "warning" | "danger" | "anchorBlue";
+    }>;
+    colorOption: {
+        defaults: {
+            circleFill: string;
+            innerRing: string;
+            outerRing: string;
+        };
+    };
+};

package/dist/src/hooks/useEvent.d.ts

@@ -0,0 +1 @@
+export declare const useEvent: (event: string, handler: () => void) => void;

package/dist/src/hooks/useInnerHeight.d.ts

@@ -0,0 +1 @@
+export declare const useInnerHeight: () => number;

package/dist/src/hooks/useInnerWidth.d.ts

@@ -0,0 +1 @@
+export declare const useInnerWidth: () => number;

package/dist/src/hooks/useLinearGradient.d.ts

@@ -0,0 +1,5 @@
+import { ColorStop } from "../types/global";
+import { LiteralUnion, HOCSwatchColorKeys } from "../helpers/hoc-types/entityValueTypes";
+declare type LinearColorStop = number | LiteralUnion<HOCSwatchColorKeys> | ColorStop;
+export declare const useLinearGradient: (angle: number, colors: LinearColorStop[]) => string;
+export {};

package/dist/src/hooks/useLongPress.d.ts

@@ -0,0 +1,10 @@
+export declare const useLongPress: (onLongPress: (event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>) => void, onLongPressEnd: (event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>) => void, onClick: () => void, { isPreventDefault, delay }?: {
+    isPreventDefault?: boolean | undefined;
+    delay?: number | undefined;
+}) => {
+    onMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onTouchStart: (e: React.TouchEvent<HTMLInputElement>) => void;
+    onMouseUp: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onMouseLeave: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onTouchEnd: (e: React.TouchEvent<HTMLInputElement>) => void;
+};

package/dist/src/hooks/useOutsideClick.d.ts

@@ -0,0 +1 @@
+export declare const useOutsideClick: (ref: any, handler: (event: any) => void, targetIdBypass?: string | undefined) => void;

package/dist/src/hooks/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T): T;

package/dist/src/hooks/useProgressiveImage.d.ts

@@ -0,0 +1 @@
+export declare const useProgressiveImage: (src: string) => string | null;

package/dist/src/hooks/useRadialGradient.d.ts

@@ -0,0 +1,2 @@
+import { ColorStop } from "../types/global";
+export declare const useRadialGradient: (colors: ColorStop[], shape?: "circle" | "ellipse" | undefined, size?: "farthest-corner" | "closest-corner" | "closest-side" | "farthest-side" | undefined, position?: string | undefined) => string;

package/dist/src/hooks/useThemeHook.d.ts

@@ -0,0 +1 @@
+export declare const useThemeHook: () => any;

package/dist/src/hooks/useWindowSize.d.ts

@@ -0,0 +1,4 @@
+export declare const useWindowSize: () => {
+    width: number;
+    height: number;
+};

package/dist/src/index.d.ts

@@ -0,0 +1,7 @@
+export * from './theme/quantumThemeWrapper';
+export * from './exports/atoms';
+export * from './exports/molecules';
+export * from './exports/organisms';
+export * from './exports/socPortfolio';
+export * from './exports/themes';
+export * from './exports/hooks';

package/dist/src/molecules/articleCard/articleCard.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { TextColor } from "../../atoms/typography/text";
+export declare type ArticleCardProps = {
+    imageURL: string;
+    category?: string;
+    categoryColor: TextColor;
+    title: string;
+    date?: string;
+    onClick?: () => void;
+    href?: string;
+};
+export declare const ArticleCard: FC<ArticleCardProps>;

package/dist/src/molecules/blockQuote/blockQuote.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { TextType, TextColor } from "../../exports/atoms";
+import { BorderRadiusDirection, HOCBorderRadiusKeys, LiteralUnion, Responsive, Shadows } from "../../helpers/hoc-types/entityValueTypes";
+import { ThemeMode } from "../../types/global";
+declare type QuoteType = Omit<ThemeMode, 'accent' | 'shadow'>;
+export declare type BlockQuoteProps = {
+    author?: string;
+    background?: 'background' | 'foreground';
+    type?: QuoteType;
+    textColor?: TextColor;
+    content?: string;
+    contentTextType?: TextType | Responsive<TextType>;
+    borderRadius?: BorderRadiusDirection | LiteralUnion<HOCBorderRadiusKeys>;
+    boxShadow?: Shadows;
+};
+export declare const BlockQuote: FC<BlockQuoteProps>;
+export {};

package/dist/src/molecules/button/button.d.ts

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { TextColor, WeightType } from "../../atoms/typography/text";
+import { SizeType, OnMouseEvent, ThemeMode } from "../../types/global";
+import { entities } from "../../theme/theming/entities";
+import { IconType, IconColors } from "../../exports/atoms";
+import { DirectionType } from '../tooltip/tooltip';
+import { LiteralUnion } from "../../helpers/hoc-types/entityValueTypes";
+export declare type ButtonType = ThemeMode | 'smoke';
+export declare type ButtonProps = {
+    title?: string;
+    type?: ButtonType;
+    size?: SizeType;
+    onClick?: (() => void) | 'submitForm';
+    onMouseEvent?: OnMouseEvent;
+    disabled?: boolean;
+    hover?: boolean;
+    outlined?: boolean;
+    fullWidth?: boolean;
+    textColorOverride?: TextColor;
+    disabledCaption?: string;
+    disabledDirection?: DirectionType;
+    id?: string;
+    icon?: {
+        name: IconType;
+        fill?: LiteralUnion<IconColors>;
+    };
+    fontWeight?: WeightType;
+};
+export declare type ButtonStyle = typeof entities.buttons.primary;
+export declare const Button: FC<ButtonProps>;

package/dist/src/molecules/button/styles.d.ts

@@ -0,0 +1,8 @@
+import { ButtonsEntity, Entities, TextEntity } from "../../theme/theming/entities";
+import { SizeType } from "../../types/global";
+import { ButtonType, ButtonStyle } from './button';
+declare const _default: {
+    buttonStyles: (type: ButtonType, buttonStyle: ButtonStyle, entities: Entities, size: SizeType, hover?: boolean | undefined, outlined?: boolean | undefined, fullWidth?: boolean | undefined) => import("@emotion/utils").SerializedStyles;
+    buttonTitle: (type: ButtonType, buttonEntity: ButtonsEntity, size: SizeType, textEntity: TextEntity, fontWeight?: "thin" | "regular" | "semiBold" | "bold" | "extraBold" | undefined) => import("@emotion/utils").SerializedStyles;
+};
+export default _default;

package/dist/src/molecules/checkbox/checkbox.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export declare type CheckboxProps = {
+    onChange: (isChecked: boolean) => void;
+    isChecked: boolean;
+    type?: CheckboxType;
+    label?: string;
+};
+export declare type CheckboxType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'dark';
+export declare const Checkbox: FC<CheckboxProps>;

package/dist/src/molecules/checkbox/styles.d.ts

@@ -0,0 +1,9 @@
+import { CheckboxType } from './checkbox';
+import { InputsEntity } from "../../theme/theming/entities";
+declare const _default: {
+    app: import("@emotion/utils").SerializedStyles;
+    checkboxContainer: (inputsEntity: InputsEntity, type: CheckboxType) => import("@emotion/utils").SerializedStyles;
+    box: (inputsEntity: InputsEntity) => import("@emotion/utils").SerializedStyles;
+    boxInner: import("@emotion/utils").SerializedStyles;
+};
+export default _default;

package/dist/src/molecules/circle/circle.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { SizeType } from "../../types/global";
+import { IconType, IconColors } from "../../atoms/iconography/types";
+export declare type CircleProps = {
+    icon: IconType;
+    fill: IconColors;
+    size?: SizeType;
+    scale?: number;
+    layer?: number;
+    onClick?: () => void;
+    animate?: {};
+};
+export declare const Circle: FC<CircleProps>;

package/dist/src/molecules/clipboard/clipboard.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export declare type ClipboardProps = {
+    copyText: string;
+    width?: string;
+    type?: 'text' | 'link';
+};
+export declare const Clipboard: FC<ClipboardProps>;