npm - @veeqo/ui - Versions diffs - 0.0.1 - Mend

@veeqo/ui 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/.nvmrc +1 -0
package/.prettierrc +6 -0
package/.storybook/main.ts +21 -0
package/.storybook/preview.ts +9 -0
package/.vscode/settings.json +11 -0
package/lib/components/Loader/Grid.d.ts +10 -0
package/lib/components/Loader/Loader.d.ts +3 -0
package/lib/components/Loader/TailSpin.d.ts +10 -0
package/lib/components/Loader/ThreeDots.d.ts +10 -0
package/lib/components/Loader/index.d.ts +1 -0
package/lib/components/Loader/loaderTypes.d.ts +8 -0
package/lib/components/Stack/Alignments.d.ts +9 -0
package/lib/components/Stack/Stack.d.ts +6 -0
package/lib/components/Stack/index.d.ts +1 -0
package/lib/components/Stack/types.d.ts +38 -0
package/lib/components/index.d.ts +2 -0
package/lib/index.d.ts +520 -0
package/lib/index.esm.js +2 -0
package/lib/index.esm.js.map +1 -0
package/lib/index.js +2 -0
package/lib/index.js.map +1 -0
package/lib/theme/index.d.ts +454 -0
package/lib/theme/modules/breakpoints.d.ts +7 -0
package/lib/theme/modules/colors.d.ts +116 -0
package/lib/theme/modules/layers.d.ts +6 -0
package/lib/theme/modules/radius.d.ts +7 -0
package/lib/theme/modules/shadows.d.ts +6 -0
package/lib/theme/modules/sizes.d.ts +20 -0
package/lib/theme/modules/text.d.ts +315 -0
package/lib/theme/storybook/components.d.ts +2 -0
package/package.json +52 -0
package/rollup.config.mjs +49 -0
package/src/components/Loader/Docs.mdx +26 -0
package/src/components/Loader/Grid.tsx +113 -0
package/src/components/Loader/Loader.stories.tsx +62 -0
package/src/components/Loader/Loader.tsx +28 -0
package/src/components/Loader/TailSpin.tsx +54 -0
package/src/components/Loader/ThreeDots.tsx +90 -0
package/src/components/Loader/__snapshots__/Loader.test.tsx.snap +73 -0
package/src/components/Loader/index.ts +1 -0
package/src/components/Loader/loaderTypes.ts +9 -0
package/src/components/Stack/Alignments.ts +10 -0
package/src/components/Stack/Docs.mdx +28 -0
package/src/components/Stack/Stack.stories.tsx +112 -0
package/src/components/Stack/Stack.tsx +61 -0
package/src/components/Stack/__snapshots__/Stack.test.tsx.snap +45 -0
package/src/components/Stack/index.ts +1 -0
package/src/components/Stack/types.ts +73 -0
package/src/components/index.ts +2 -0
package/src/index.ts +2 -0
package/src/theme/index.ts +18 -0
package/src/theme/modules/breakpoints.ts +7 -0
package/src/theme/modules/colors.ts +116 -0
package/src/theme/modules/layers.ts +6 -0
package/src/theme/modules/radius.ts +7 -0
package/src/theme/modules/shadows.ts +6 -0
package/src/theme/modules/sizes.ts +52 -0
package/src/theme/modules/text.ts +319 -0
package/src/theme/storybook/ColorDocs.mdx +130 -0
package/src/theme/storybook/RadiusDocs.mdx +39 -0
package/src/theme/storybook/ShadowDocs.mdx +37 -0
package/src/theme/storybook/SizesDocs.mdx +104 -0
package/src/theme/storybook/components.tsx +19 -0
package/tsconfig.json +23 -0

package/lib/theme/index.d.ts ADDED Viewed

@@ -0,0 +1,454 @@
+import { shadows } from './modules/shadows';
+export declare const theme: {
+    breakpoints: {
+        readonly mobile: "640px";
+        readonly tablet: "720px";
+        readonly lgTablet: "960px";
+        readonly desktop: "1280px";
+        readonly lgDesktop: "1440px";
+    };
+    colors: {
+        brand: {
+            blue: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            peach: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+        };
+        neutral: {
+            ink: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+            };
+            grey: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+            };
+            greyBlue: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+            };
+        };
+        secondary: {
+            red: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            yellow: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            green: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            lime: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            teal: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            aqua: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            purple: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            blue: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            pink: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+            orange: {
+                lightest: string;
+                light: string;
+                base: string;
+                dark: string;
+                darkest: string;
+            };
+        };
+        system: {
+            scrollbar: {
+                thumb: string;
+                background: string;
+            };
+        };
+    };
+    layers: {
+        base: number;
+        popup: number;
+        modal: number;
+        tooltip: number;
+    };
+    radius: {
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    shadows: typeof shadows;
+    sizes: import("./modules/sizes").SizeScale;
+    text: {
+        headingXXL: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        headingXL: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        headingLarge: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        headingMedium: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        headingSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        headingTable: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        subheadingLarge: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        subheadingMedium: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        subheadingSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        subheadingSmallBold: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        body: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        bodySmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        bodyBold: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        bodyBoldDark: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        bodySmallBold: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        button: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        buttonSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        linkLarge: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        linkMedium: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        link: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        linkSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        inputLabel: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        inputLabelSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        hintText: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        placeholder: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        placeholderSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        placeholderCode: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        placeholderCodeSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        error: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        errorSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+        successSmall: {
+            fontFamily: string;
+            fontStyle: string;
+            fontWeight: number;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
+            textDecoration: string;
+            letterSpacing: string;
+        };
+    };
+    fontFamily: string;
+};

package/lib/theme/modules/breakpoints.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export declare const breakpoints: {
+    readonly mobile: "640px";
+    readonly tablet: "720px";
+    readonly lgTablet: "960px";
+    readonly desktop: "1280px";
+    readonly lgDesktop: "1440px";
+};

package/lib/theme/modules/colors.d.ts ADDED Viewed

@@ -0,0 +1,116 @@
+export declare const colors: {
+    brand: {
+        blue: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        peach: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+    };
+    neutral: {
+        ink: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+        };
+        grey: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+        };
+        greyBlue: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+        };
+    };
+    secondary: {
+        red: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        yellow: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        green: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        lime: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        teal: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        aqua: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        purple: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        blue: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        pink: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+        orange: {
+            lightest: string;
+            light: string;
+            base: string;
+            dark: string;
+            darkest: string;
+        };
+    };
+    system: {
+        scrollbar: {
+            thumb: string;
+            background: string;
+        };
+    };
+};

package/lib/theme/modules/layers.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export declare const layers: {
+    base: number;
+    popup: number;
+    modal: number;
+    tooltip: number;
+};

package/lib/theme/modules/radius.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export declare const radius: {
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    full: string;
+};

package/lib/theme/modules/shadows.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export declare enum shadows {
+    sm = "0px 1px 3px rgba(55, 66, 77, 0.15)",
+    base = "0px 4px 6px rgba(27, 33, 38, 0.2)",
+    md = "0px 10px 15px rgba(27, 33, 38, 0.2)",
+    lg = "0px 20px 25px rgba(27, 33, 38, 0.2)"
+}

package/lib/theme/modules/sizes.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+declare enum SizeAlias {
+    none = "none",
+    line = "line",
+    xs = "xs",
+    sm = "sm",
+    base = "base",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    xxl = "xxl"
+}
+export type SizeScaleIndex = number | keyof typeof SizeAlias;
+export type SizeScale = {
+    [index: number]: string;
+    [index: string]: string;
+};
+export declare const sizeScale: SizeScale;
+export declare const sizeAliases: SizeScale;
+export declare const sizes: SizeScale;
+export {};