@veeqo/ui 0.0.1

package/.nvmrc

@@ -0,0 +1 @@
+v18.17.1

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all"
+}

package/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*Docs.mdx', '../src/**/*stories.tsx'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  typescript: {
+    reactDocgen: 'react-docgen',
+    skipBabel: true,
+    check: false,
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,9 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+  },
+};
+
+export default preview;

package/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.enable": true,
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

package/lib/components/Loader/Grid.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface GridProps {
+    width?: number;
+    height?: number;
+    className?: string;
+    color?: string;
+    label?: string;
+}
+declare const Grid: ({ width, height, className, color, label }: GridProps) => React.JSX.Element;
+export default Grid;

package/lib/components/Loader/Loader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LoaderProps } from './loaderTypes';
+export declare const Loader: ({ className, height, width, color, type, }: LoaderProps) => React.JSX.Element;

package/lib/components/Loader/TailSpin.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface TailSpinProps {
+    width?: number;
+    height?: number;
+    className?: string;
+    color?: string;
+    label?: string;
+}
+declare const TailSpin: ({ width, height, className, color, label }: TailSpinProps) => React.JSX.Element;
+export default TailSpin;

package/lib/components/Loader/ThreeDots.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ThreeDotsProps {
+    width?: number;
+    height?: number;
+    className?: string;
+    color?: string;
+    label?: string;
+}
+declare const ThreeDots: ({ width, height, className, color, label }: ThreeDotsProps) => React.JSX.Element;
+export default ThreeDots;

package/lib/components/Loader/index.d.ts

@@ -0,0 +1 @@
+export { Loader } from './Loader';

package/lib/components/Loader/loaderTypes.d.ts

@@ -0,0 +1,8 @@
+export type LoaderType = 'Grid' | 'TailSpin' | 'ThreeDots';
+export interface LoaderProps {
+    className?: string;
+    height?: number;
+    width?: number;
+    color?: string;
+    type?: LoaderType;
+}

package/lib/components/Stack/Alignments.d.ts

@@ -0,0 +1,9 @@
+declare enum Alignments {
+    start = "flex-start",
+    center = "center",
+    end = "flex-end",
+    stretch = "stretch",
+    between = "space-between",
+    around = "space-around"
+}
+export default Alignments;

package/lib/components/Stack/Stack.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { StackProps } from './types';
+/**
+ * Layout component.
+ */
+export declare const Stack: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StackProps>>;

package/lib/components/Stack/index.d.ts

@@ -0,0 +1 @@
+export { Stack } from './Stack';

package/lib/components/Stack/types.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import Alignments from './Alignments';
+type Alignment = keyof typeof Alignments;
+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;
+declare const sizes: SizeScale;
+export type Size = keyof typeof sizes;
+export type StackProps = {
+    children: ReactNode;
+    /**
+     * Classname for description
+     */
+    className?: string;
+    /**
+     * Direction of component
+     */
+    direction?: 'vertical' | 'horizontal';
+    alignX?: Alignment;
+    alignY?: Alignment;
+    spacing?: Size;
+};
+export {};

package/lib/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Loader } from './Loader';
+export { Stack } from './Stack';

package/lib/index.d.ts

@@ -0,0 +1,520 @@
+/// <reference types="react" />
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+import * as styled_components from 'styled-components';
+import * as styled_components_dist_types from 'styled-components/dist/types';
+
+type LoaderType = 'Grid' | 'TailSpin' | 'ThreeDots';
+interface LoaderProps {
+    className?: string;
+    height?: number;
+    width?: number;
+    color?: string;
+    type?: LoaderType;
+}
+
+declare const Loader: ({ className, height, width, color, type, }: LoaderProps) => react__default.JSX.Element;
+
+declare enum Alignments {
+    start = "flex-start",
+    center = "center",
+    end = "flex-end",
+    stretch = "stretch",
+    between = "space-between",
+    around = "space-around"
+}
+
+type Alignment = keyof typeof Alignments;
+type SizeScale$1 = {
+    [index: number]: string;
+    [index: string]: string;
+};
+declare const sizes: SizeScale$1;
+type Size = keyof typeof sizes;
+type StackProps = {
+    children: ReactNode;
+    /**
+     * Classname for description
+     */
+    className?: string;
+    /**
+     * Direction of component
+     */
+    direction?: 'vertical' | 'horizontal';
+    alignX?: Alignment;
+    alignY?: Alignment;
+    spacing?: Size;
+};
+
+/**
+ * Layout component.
+ */
+declare const Stack: styled_components.IStyledComponent<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StackProps>>;
+
+type SizeScale = {
+    [index: number]: string;
+    [index: string]: string;
+};
+
+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)"
+}
+
+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: 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;
+};
+
+export { Loader, Stack, theme };