@usecapsule/core-components 1.0.13 → 2.0.1

package/dist/types/components.d.ts

@@ -26,6 +26,16 @@ export namespace Components {
          */
         "type"?: 'error';
     }
+    interface CpslAnimation {
+        /**
+          * Will replay the animation
+         */
+        "replayAnimation": () => Promise<void>;
+        /**
+          * Source of the Lottie animation file.
+         */
+        "src": string;
+    }
     interface CpslButton {
         /**
           * If the button is disabled. Default is: false.
@@ -287,24 +297,44 @@ export namespace Components {
         "value"?: string;
     }
     interface CpslModal {
+        /**
+          * Duration in seconds of the modal entering. Default is .15.
+         */
+        "enterTransitionDuration"?: number;
+        /**
+          * Duration in seconds of the modal exiting. Default is .15.
+         */
+        "exitTransitionDuration"?: number;
         /**
           * Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots.
          */
-        "footerExpanded": boolean;
+        "footerExpanded"?: boolean;
+        /**
+          * Duration in seconds of the footer expansion animation. Default is 0.15.
+         */
+        "footerTransitionDuration"?: number;
         /**
-          * Duration in seconds of the footer expansion animation. Default is .5.
+          * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.
          */
-        "transitionDuration": number;
+        "noOverlay"?: boolean;
+        /**
+          * Whether or not to show the modal.
+         */
+        "open": boolean;
     }
     interface CpslOverlay {
         /**
-          * Whether or not to show the overlay.
+          * Duration in seconds of the fade out animation. Default is .5.
          */
-        "open": boolean;
+        "enterTransitionDuration"?: number;
+        /**
+          * Duration in seconds of the fade out animation. Default is .5.
+         */
+        "exitTransitionDuration"?: number;
         /**
-          * Duration in seconds of the fade in/out animation. Default is .5.
+          * Whether or not to show the overlay.
          */
-        "transitionDuration": number;
+        "open": boolean;
     }
     interface CpslPill {
         /**
@@ -411,6 +441,10 @@ export interface CpslInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslInputElement;
 }
+export interface CpslModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslModalElement;
+}
 export interface CpslSlideButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslSlideButtonElement;
@@ -430,6 +464,12 @@ declare global {
         prototype: HTMLCpslAlertElement;
         new (): HTMLCpslAlertElement;
     };
+    interface HTMLCpslAnimationElement extends Components.CpslAnimation, HTMLStencilElement {
+    }
+    var HTMLCpslAnimationElement: {
+        prototype: HTMLCpslAnimationElement;
+        new (): HTMLCpslAnimationElement;
+    };
     interface HTMLCpslButtonElement extends Components.CpslButton, HTMLStencilElement {
     }
     var HTMLCpslButtonElement: {
@@ -503,7 +543,22 @@ declare global {
         prototype: HTMLCpslInputElement;
         new (): HTMLCpslInputElement;
     };
+    interface HTMLCpslModalElementEventMap {
+        "cpslModalEntering": null;
+        "cpslModalEntered": null;
+        "cpslModalExiting": null;
+        "cpslModalExited": null;
+        "cpslModalRequestClose": null;
+    }
     interface HTMLCpslModalElement extends Components.CpslModal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslModalElementEventMap>(type: K, listener: (this: HTMLCpslModalElement, ev: CpslModalCustomEvent<HTMLCpslModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCpslModalElementEventMap>(type: K, listener: (this: HTMLCpslModalElement, ev: CpslModalCustomEvent<HTMLCpslModalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLCpslModalElement: {
         prototype: HTMLCpslModalElement;
@@ -611,6 +666,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "cpsl-alert": HTMLCpslAlertElement;
+        "cpsl-animation": HTMLCpslAnimationElement;
         "cpsl-button": HTMLCpslButtonElement;
         "cpsl-code-input": HTMLCpslCodeInputElement;
         "cpsl-col": HTMLCpslColElement;
@@ -644,6 +700,12 @@ declare namespace LocalJSX {
          */
         "type"?: 'error';
     }
+    interface CpslAnimation {
+        /**
+          * Source of the Lottie animation file.
+         */
+        "src"?: string;
+    }
     interface CpslButton {
         /**
           * If the button is disabled. Default is: false.
@@ -925,24 +987,64 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface CpslModal {
+        /**
+          * Duration in seconds of the modal entering. Default is .15.
+         */
+        "enterTransitionDuration"?: number;
+        /**
+          * Duration in seconds of the modal exiting. Default is .15.
+         */
+        "exitTransitionDuration"?: number;
         /**
           * Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots.
          */
         "footerExpanded"?: boolean;
         /**
-          * Duration in seconds of the footer expansion animation. Default is .5.
+          * Duration in seconds of the footer expansion animation. Default is 0.15.
+         */
+        "footerTransitionDuration"?: number;
+        /**
+          * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.
+         */
+        "noOverlay"?: boolean;
+        /**
+          * Emitted when enter animation finishes.
+         */
+        "onCpslModalEntered"?: (event: CpslModalCustomEvent<null>) => void;
+        /**
+          * Emitted when enter animation starts.
          */
-        "transitionDuration"?: number;
+        "onCpslModalEntering"?: (event: CpslModalCustomEvent<null>) => void;
+        /**
+          * Emitted when exit animation finishes.
+         */
+        "onCpslModalExited"?: (event: CpslModalCustomEvent<null>) => void;
+        /**
+          * Emitted when exit animation starts.
+         */
+        "onCpslModalExiting"?: (event: CpslModalCustomEvent<null>) => void;
+        /**
+          * Emitted when exit animation finishes.
+         */
+        "onCpslModalRequestClose"?: (event: CpslModalCustomEvent<null>) => void;
+        /**
+          * Whether or not to show the modal.
+         */
+        "open"?: boolean;
     }
     interface CpslOverlay {
         /**
-          * Whether or not to show the overlay.
+          * Duration in seconds of the fade out animation. Default is .5.
          */
-        "open"?: boolean;
+        "enterTransitionDuration"?: number;
         /**
-          * Duration in seconds of the fade in/out animation. Default is .5.
+          * Duration in seconds of the fade out animation. Default is .5.
          */
-        "transitionDuration"?: number;
+        "exitTransitionDuration"?: number;
+        /**
+          * Whether or not to show the overlay.
+         */
+        "open"?: boolean;
     }
     interface CpslPill {
         /**
@@ -1050,6 +1152,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "cpsl-alert": CpslAlert;
+        "cpsl-animation": CpslAnimation;
         "cpsl-button": CpslButton;
         "cpsl-code-input": CpslCodeInput;
         "cpsl-col": CpslCol;
@@ -1077,6 +1180,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "cpsl-alert": LocalJSX.CpslAlert & JSXBase.HTMLAttributes<HTMLCpslAlertElement>;
+            "cpsl-animation": LocalJSX.CpslAnimation & JSXBase.HTMLAttributes<HTMLCpslAnimationElement>;
             "cpsl-button": LocalJSX.CpslButton & JSXBase.HTMLAttributes<HTMLCpslButtonElement>;
             "cpsl-code-input": LocalJSX.CpslCodeInput & JSXBase.HTMLAttributes<HTMLCpslCodeInputElement>;
             "cpsl-col": LocalJSX.CpslCol & JSXBase.HTMLAttributes<HTMLCpslColElement>;

package/dist/types/constants.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from './interface';
+export declare const MOBILE_SIZE = 480;
+export declare const DEFAULT_THEME: Theme;

package/dist/types/index.d.ts

@@ -1 +1,3 @@
 export * from './components';
+export { default as generateTheme } from './utils/theme/generateTheme';
+export type { Theme, BorderRadius } from './interface';

package/dist/types/interface.d.ts

@@ -8,3 +8,125 @@ export type CssClassMap = {
     [className: string]: boolean;
 };
 export type IconType = keyof typeof Icons;
+export type Theme = {
+    foregroundColor?: string;
+    backgroundColor?: string;
+    borderRadius?: BorderRadius;
+    font?: string;
+    customPalette?: CustomPalette;
+};
+export type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
+export interface CustomPalette {
+    text?: {
+        primary?: string;
+        secondary?: string;
+        subtle?: string;
+        inverted?: string;
+        error?: string;
+    };
+    modal?: {
+        surface?: {
+            main?: string;
+            footer?: string;
+        };
+        border?: string;
+    };
+    input?: {
+        surface?: {
+            disabled?: string;
+            default?: string;
+        };
+        border?: {
+            placeholder?: string;
+            active?: string;
+            error?: string;
+        };
+    };
+    tileButton?: {
+        surface?: {
+            default?: string;
+            hover?: string;
+            pressed?: string;
+        };
+        border?: string;
+    };
+    primaryButton?: {
+        surface?: {
+            default?: string;
+            hover?: string;
+            pressed?: string;
+            disabled?: string;
+        };
+        border?: {
+            default?: string;
+            disabled?: string;
+        };
+        outline?: string;
+    };
+    secondaryButton?: {
+        surface?: {
+            default?: string;
+            hover?: string;
+            pressed?: string;
+            disabled?: string;
+        };
+        border?: {
+            default?: string;
+            disabled?: string;
+        };
+        outline?: string;
+    };
+    divider?: string;
+    spinner?: {
+        path?: string;
+        circle?: string;
+    };
+    pill?: {
+        text?: string;
+        container?: {
+            background?: string;
+            border?: string;
+        };
+    };
+    progressIndicator?: {
+        active?: string;
+        next?: string;
+        previous?: string;
+    };
+    qr?: {
+        fill?: string;
+        background?: string;
+        border?: string;
+    };
+    slideButton?: {
+        slider?: {
+            background?: string;
+            border?: string;
+            text?: string;
+            container?: {
+                start?: {
+                    background?: string;
+                    border?: string;
+                };
+                end?: {
+                    background?: string;
+                    border?: string;
+                };
+            };
+        };
+        start?: {
+            text?: string;
+        };
+        end?: {
+            text?: string;
+        };
+    };
+    alert?: {
+        surface?: {
+            error?: string;
+        };
+        border?: {
+            error?: string;
+        };
+    };
+}

package/dist/types/utils/theme/generateBorderRadii.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../interface';
+export declare const generateBorderRadii: ({ borderRadius }: Pick<Theme, 'borderRadius'>) => void;

package/dist/types/utils/theme/generateFont.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../interface';
+export declare const generateFont: ({ font }: Pick<Theme, 'font'>) => void;

package/dist/types/utils/theme/generatePalette.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '../../interface';
+export type Palette = {
+    foregroundColors: string[];
+    backgroundColors: string[];
+    isDarkBackground: boolean;
+};
+export declare const generatePalette: ({ foregroundColor, backgroundColor, customPalette }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'customPalette'>) => Palette;

package/dist/types/utils/theme/generateTheme.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '../../interface';
+declare const generateTheme: ({ foregroundColor, backgroundColor, font, customPalette, borderRadius }: Theme) => boolean;
+export default generateTheme;

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

@@ -0,0 +1,5 @@
+import { CustomPalette } from '../../interface';
+export declare const isColor: (strColor: any) => boolean;
+export declare const getCssColors: (customPalette: CustomPalette) => {
+    [k: string]: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usecapsule/core-components",
-  "version": "1.0.13",
+  "version": "2.0.1",
   "description": "Capsule Core Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -27,7 +27,9 @@
   },
   "dependencies": {
     "@stencil/core": "^4.7.0",
+    "color2k": "^2.0.3",
     "gsap": "^3.12.5",
+    "lottie-web": "^5.12.2",
     "qr-code-styling": "^1.6.0-rc.1"
   },
   "devDependencies": {
@@ -43,9 +45,10 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "puppeteer": "^21.9.0",
+    "rollup-plugin-dotenv": "^0.5.0",
     "sass": "^1.71.1",
     "stencil-inline-svg": "^1.1.0",
     "ts-node": "^10.9.2"
   },
-  "gitHead": "09410910d0605605fadb4e0afaf4f9d6c494a252"
+  "gitHead": "c7a7c4f14fa575888fd2dbd597dd6aef068a6707"
 }