@ctlyst.id/voila-ui 1.0.0

package/dist/types/theme/tokens/color.d.ts

@@ -0,0 +1,125 @@
+export type ColorScheme = 'dark' | 'light';
+export type ColorSchemeSetting = ColorScheme | 'system';
+export declare const base: {
+    primary: string;
+    secondary: string;
+    black: string;
+    white: string;
+    grey1: string;
+    grey2: string;
+    grey3: string;
+    transparent: string;
+};
+export declare const typography: {
+    blackTypoHigh: string;
+    blackTypoMedium: string;
+    blackTypoLow: string;
+    whiteTypoHigh: string;
+    whiteTypoMedium: string;
+    whiteTypoLow: string;
+};
+export declare const green: {
+    green1: string;
+    green2: string;
+    green3: string;
+};
+export declare const blue: {
+    blue1: string;
+    blue2: string;
+    blue3: string;
+};
+export declare const yellow: {
+    yellow1: string;
+    yellow2: string;
+    yellow3: string;
+};
+export declare const red: {
+    red1: string;
+    red2: string;
+    red3: string;
+};
+export declare const greenAccent: {
+    greenAccent1: string;
+    greenAccent2: string;
+    greenAccent3: string;
+};
+export declare const blueAccent: {
+    blueAccent1: string;
+    blueAccent2: string;
+    blueAccent3: string;
+};
+export declare const yellowAccent: {
+    yellowAccent1: string;
+    yellowAccent2: string;
+    yellowAccent3: string;
+};
+export declare const redAccent: {
+    redAccent1: string;
+    redAccent2: string;
+    redAccent3: string;
+};
+export declare const greenSurface: {
+    greenSurface1: string;
+    greenSurface2: string;
+};
+export declare const blueSurface: {
+    blueSurface1: string;
+    blueSurface2: string;
+};
+export declare const yellowSurface: {
+    yellowSurface1: string;
+    yellowSurface2: string;
+};
+export declare const redSurface: {
+    redSurface1: string;
+    redSurface2: string;
+};
+export declare const colors: {
+    blackTypoHigh: string;
+    blackTypoMedium: string;
+    blackTypoLow: string;
+    whiteTypoHigh: string;
+    whiteTypoMedium: string;
+    whiteTypoLow: string;
+    redSurface1: string;
+    redSurface2: string;
+    yellowSurface1: string;
+    yellowSurface2: string;
+    blueSurface1: string;
+    blueSurface2: string;
+    greenSurface1: string;
+    greenSurface2: string;
+    redAccent1: string;
+    redAccent2: string;
+    redAccent3: string;
+    yellowAccent1: string;
+    yellowAccent2: string;
+    yellowAccent3: string;
+    blueAccent1: string;
+    blueAccent2: string;
+    blueAccent3: string;
+    greenAccent1: string;
+    greenAccent2: string;
+    greenAccent3: string;
+    red1: string;
+    red2: string;
+    red3: string;
+    yellow1: string;
+    yellow2: string;
+    yellow3: string;
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    green1: string;
+    green2: string;
+    green3: string;
+    primary: string;
+    secondary: string;
+    black: string;
+    white: string;
+    grey1: string;
+    grey2: string;
+    grey3: string;
+    transparent: string;
+};
+export default colors;

package/dist/types/theme/tokens/index.d.ts

@@ -0,0 +1,241 @@
+export declare const tokens: {
+    breakpoints: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderStyles: {
+        none: string;
+        solid: string;
+    };
+    borderWidths: {
+        '0': string;
+        '1': string;
+        '2': string;
+    };
+    colors: {
+        blackTypoHigh: string;
+        blackTypoMedium: string;
+        blackTypoLow: string;
+        whiteTypoHigh: string;
+        whiteTypoMedium: string;
+        whiteTypoLow: string;
+        redSurface1: string;
+        redSurface2: string;
+        yellowSurface1: string;
+        yellowSurface2: string;
+        blueSurface1: string;
+        blueSurface2: string;
+        greenSurface1: string;
+        greenSurface2: string;
+        redAccent1: string;
+        redAccent2: string;
+        redAccent3: string;
+        yellowAccent1: string;
+        yellowAccent2: string;
+        yellowAccent3: string;
+        blueAccent1: string;
+        blueAccent2: string;
+        blueAccent3: string;
+        greenAccent1: string;
+        greenAccent2: string;
+        greenAccent3: string;
+        red1: string;
+        red2: string;
+        red3: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        green1: string;
+        green2: string;
+        green3: string;
+        primary: string;
+        secondary: string;
+        black: string;
+        white: string;
+        grey1: string;
+        grey2: string;
+        grey3: string;
+        transparent: string;
+    };
+    fonts: {
+        readonly playfair: "'Playfair Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+        readonly poppins: "'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+    };
+    fontSizes: {
+        readonly heading1: "48px";
+        readonly heading2: "40px";
+        readonly heading3: "32px";
+        readonly heading4: "24px";
+        readonly heading5: "20px";
+        readonly heading6: "16px";
+        readonly subtitle1: "20px";
+        readonly subtitle2: "18px";
+        readonly body1: "16px";
+        readonly body2: "14px";
+        readonly caption: "12px";
+        readonly footer: "10px";
+    };
+    fontWeights: {
+        readonly hairline: "100";
+        readonly thin: "200";
+        readonly light: "300";
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+        readonly extrabold: "800";
+        readonly black: "900";
+    };
+    letterSpacings: {
+        readonly tighter: "-0.2px";
+        readonly tight: "-0.05px";
+        readonly normal: "0px";
+        readonly wide: "0.2px";
+        readonly wider: "0.5px";
+    };
+    lineHeights: {
+        readonly normal: "normal";
+        readonly none: "1";
+        readonly '16': "16px";
+        readonly '20': "20px";
+        readonly '24': "24px";
+        readonly '28': "28px";
+        readonly '32': "32px";
+        readonly '40': "40px";
+        readonly '48': "48px";
+        readonly '56': "56px";
+    };
+    opacity: {
+        '0': string;
+        '30': string;
+        '60': string;
+        '90': string;
+        '100': string;
+    };
+    radii: {
+        none: string;
+        rounded: string;
+        full: string;
+    };
+    space: {
+        '0': string;
+        '1': string;
+        '2': string;
+        '4': string;
+        '6': string;
+        '8': string;
+        '10': string;
+        '12': string;
+        '14': string;
+        '16': string;
+        '18': string;
+        '20': string;
+        '22': string;
+        '24': string;
+        '32': string;
+        '40': string;
+        '48': string;
+        '56': string;
+        '64': string;
+        '72': string;
+        '80': string;
+        '88': string;
+        '96': string;
+        '104': string;
+        '112': string;
+        auto: string;
+        full: string;
+        fitContent: string;
+        maxContent: string;
+        minContent: string;
+        '100vh': string;
+        '100vw': string;
+        gapX: string;
+        gapY: string;
+    };
+    transitionDurations: {
+        '150': string;
+        '300': string;
+        '600': string;
+        '3000': string;
+    };
+    transitionEasingFunctions: {
+        linear: string;
+        in: string;
+        out: string;
+        inOut: string;
+    };
+    transitionProperties: {
+        none: string;
+        all: string;
+        default: string;
+        colors: string;
+        opacity: string;
+        shadow: string;
+        transform: string;
+    };
+    sizes: {
+        '0': string;
+        '1': string;
+        '2': string;
+        '4': string;
+        '6': string;
+        '8': string;
+        '10': string;
+        '12': string;
+        '14': string;
+        '16': string;
+        '18': string;
+        '20': string;
+        '22': string;
+        '24': string;
+        '32': string;
+        '40': string;
+        '48': string;
+        '56': string;
+        '64': string;
+        '72': string;
+        '80': string;
+        '88': string;
+        '96': string;
+        '104': string;
+        '112': string;
+        auto: string;
+        full: string;
+        fitContent: string;
+        maxContent: string;
+        minContent: string;
+        '100vh': string;
+        '100vw': string;
+        gapX: string;
+        gapY: string;
+    };
+    shadows: {
+        none: string;
+        raised: string;
+        floating: string;
+    };
+    zIndices: {
+        hide: string;
+        auto: string;
+        base: string;
+        docked: string;
+        dropdown: string;
+        sticky: string;
+        banner: string;
+        overlay: string;
+        modal: string;
+        popover: string;
+        skipLink: string;
+        toast: string;
+        tooltip: string;
+    };
+};
+export type { ColorScheme, ColorSchemeSetting } from './color';
+export type Tokens = typeof tokens;

package/dist/types/theme/tokens/opacity.d.ts

@@ -0,0 +1,8 @@
+export declare const opacity: {
+    '0': string;
+    '30': string;
+    '60': string;
+    '90': string;
+    '100': string;
+};
+export default opacity;

package/dist/types/theme/tokens/radii.d.ts

@@ -0,0 +1,6 @@
+export declare const radii: {
+    none: string;
+    rounded: string;
+    full: string;
+};
+export default radii;

package/dist/types/theme/tokens/shadows.d.ts

@@ -0,0 +1,6 @@
+export declare const shadows: {
+    none: string;
+    raised: string;
+    floating: string;
+};
+export default shadows;

package/dist/types/theme/tokens/space.d.ts

@@ -0,0 +1,72 @@
+export declare const space: {
+    '0': string;
+    '1': string;
+    '2': string;
+    '4': string;
+    '6': string;
+    '8': string;
+    '10': string;
+    '12': string;
+    '14': string;
+    '16': string;
+    '18': string;
+    '20': string;
+    '22': string;
+    '24': string;
+    '32': string;
+    '40': string;
+    '48': string;
+    '56': string;
+    '64': string;
+    '72': string;
+    '80': string;
+    '88': string;
+    '96': string;
+    '104': string;
+    '112': string;
+    auto: string;
+    full: string;
+    fitContent: string;
+    maxContent: string;
+    minContent: string;
+    '100vh': string;
+    '100vw': string;
+    gapX: string;
+    gapY: string;
+};
+export declare const sizes: {
+    '0': string;
+    '1': string;
+    '2': string;
+    '4': string;
+    '6': string;
+    '8': string;
+    '10': string;
+    '12': string;
+    '14': string;
+    '16': string;
+    '18': string;
+    '20': string;
+    '22': string;
+    '24': string;
+    '32': string;
+    '40': string;
+    '48': string;
+    '56': string;
+    '64': string;
+    '72': string;
+    '80': string;
+    '88': string;
+    '96': string;
+    '104': string;
+    '112': string;
+    auto: string;
+    full: string;
+    fitContent: string;
+    maxContent: string;
+    minContent: string;
+    '100vh': string;
+    '100vw': string;
+    gapX: string;
+    gapY: string;
+};

package/dist/types/theme/tokens/typography.d.ts

@@ -0,0 +1,123 @@
+declare const fonts: {
+    readonly playfair: "'Playfair Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+    readonly poppins: "'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+};
+declare const fontSizes: {
+    readonly heading1: "48px";
+    readonly heading2: "40px";
+    readonly heading3: "32px";
+    readonly heading4: "24px";
+    readonly heading5: "20px";
+    readonly heading6: "16px";
+    readonly subtitle1: "20px";
+    readonly subtitle2: "18px";
+    readonly body1: "16px";
+    readonly body2: "14px";
+    readonly caption: "12px";
+    readonly footer: "10px";
+};
+declare const lineHeights: {
+    readonly normal: "normal";
+    readonly none: "1";
+    readonly '16': "16px";
+    readonly '20': "20px";
+    readonly '24': "24px";
+    readonly '28': "28px";
+    readonly '32': "32px";
+    readonly '40': "40px";
+    readonly '48': "48px";
+    readonly '56': "56px";
+};
+declare const letterSpacings: {
+    readonly tighter: "-0.2px";
+    readonly tight: "-0.05px";
+    readonly normal: "0px";
+    readonly wide: "0.2px";
+    readonly wider: "0.5px";
+};
+declare const fontWeights: {
+    readonly hairline: "100";
+    readonly thin: "200";
+    readonly light: "300";
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+    readonly extrabold: "800";
+    readonly black: "900";
+};
+declare const textStyles: {
+    readonly heading: {
+        readonly 1: {
+            readonly fontSize: "48px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "56px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 2: {
+            readonly fontSize: "40px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "48px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 3: {
+            readonly fontSize: "32px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "40px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 4: {
+            readonly fontSize: "24px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "32px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 5: {
+            readonly fontSize: "20px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "28px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 6: {
+            readonly fontSize: "16px";
+            readonly fontWeight: "700";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+    };
+    readonly subtitle: {
+        readonly 1: {
+            readonly fontSize: "20px";
+            readonly lineHeight: "32px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 2: {
+            readonly fontSize: "18px";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+    };
+    readonly body: {
+        readonly 1: {
+            readonly fontSize: "16px";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0px";
+        };
+        readonly 2: {
+            readonly fontSize: "14px";
+            readonly lineHeight: "20px";
+            readonly letterSpacing: "0px";
+        };
+    };
+    readonly caption: {
+        readonly fontSize: "12px";
+        readonly lineHeight: "16px";
+        readonly letterSpacing: "0px";
+    };
+    readonly footer: {
+        readonly fontSize: "10px";
+        readonly lineHeight: "16px";
+        readonly letterSpacing: "0.5px";
+    };
+};
+export { fonts, fontSizes, fontWeights, letterSpacings, lineHeights, textStyles };

package/dist/types/theme/tokens/z-indices.d.ts

@@ -0,0 +1,16 @@
+export declare const zIndices: {
+    hide: string;
+    auto: string;
+    base: string;
+    docked: string;
+    dropdown: string;
+    sticky: string;
+    banner: string;
+    overlay: string;
+    modal: string;
+    popover: string;
+    skipLink: string;
+    toast: string;
+    tooltip: string;
+};
+export default zIndices;

package/dist/types/utils/index.d.ts

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

package/dist/types/utils/merge-atoms.d.ts

@@ -0,0 +1,7 @@
+import type { RuntimeFnReturn } from 'rainbow-sprinkles/dist/declarations/src/types';
+type MergeParams = {
+    [key: string]: RuntimeFnReturn;
+};
+declare const mergeAtoms: (atoms: MergeParams) => RuntimeFnReturn;
+export { mergeAtoms };
+export default mergeAtoms;

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@ctlyst.id/voila-ui",
+  "version": "1.0.0",
+  "description": "UI library for voila user facing library.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "ui:src": "./src/index.ts",
+  "repository": "https://github.com/machtwatch/voila-ui",
+  "author": "Catalyst Tech",
+  "license": "Apache-2.0",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "clean": "rimraf dist",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
+    "prepublish": "yarn build",
+    "start": "vite build --watch",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "type-check": "tsc --emitDeclarationOnly"
+  },
+  "dependencies": {
+    "@ctlyst.id/icons": "^1.0.0",
+    "@ctlyst.id/utils": "^1.0.0",
+    "@radix-ui/react-portal": "^1.0.1",
+    "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-tooltip": "^1.0.4",
+    "clsx": "^1.2.1",
+    "rainbow-sprinkles": "^0.15.2",
+    "tslib": "^2.5.0"
+  },
+  "peerDependencies": {
+    "@vanilla-extract/css": "^1.9.4",
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.3.0",
+    "@vanilla-extract/sprinkles": "^1.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "resolutions": {
+    "jest-environment-jsdom": "27.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-typescript": "^7.18.6",
+    "@ctlyst.id/icons": "^0.1.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.4.0",
+    "@vanilla-extract/jest-transform": "^1.1.0",
+    "@vanilla-extract/vite-plugin": "^3.8.0",
+    "babel-loader": "^9.1.2",
+    "babel-preset-react-app": "^10.0.1",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "29.4.1",
+    "polished": "^4.2.2"
+  },
+  "gitHead": "831dc28e0600e86f70aa49c507e7734a27769c38"
+}