@usecapsule/core-components 1.0.13 → 2.0.0-dev.dropdown

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.
@@ -158,6 +168,16 @@ export namespace Components {
     }
     interface CpslDivider {
     }
+    interface CpslDropdown {
+        /**
+          * Items to be presented in the dropdown
+         */
+        "items": Array<{ icon: string, label: string, value: string, selectedLabel?: string }>;
+        /**
+          * Width of the dropdown
+         */
+        "width": string;
+    }
     interface CpslGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -287,24 +307,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 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 {
         /**
@@ -391,6 +431,18 @@ export namespace Components {
         "selectedTab"?: string;
     }
     interface CpslText {
+        /**
+          * The color of text. Options are: `"primary"`, `"secondary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
+         */
+        "color"?: 'primary' | 'secondary' | 'subtle' | 'inverted' | 'error';
+        /**
+          * The variant of text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
+         */
+        "variant"?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+        /**
+          * The weight of text. Options are: `"regular"`, `"medium", `"semiBold", `"bold". Default is: `"regular"`.
+         */
+        "weight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
     }
     interface CpslTileButton {
         /**
@@ -411,6 +463,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 +486,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: {
@@ -465,6 +527,12 @@ declare global {
         prototype: HTMLCpslDividerElement;
         new (): HTMLCpslDividerElement;
     };
+    interface HTMLCpslDropdownElement extends Components.CpslDropdown, HTMLStencilElement {
+    }
+    var HTMLCpslDropdownElement: {
+        prototype: HTMLCpslDropdownElement;
+        new (): HTMLCpslDropdownElement;
+    };
     interface HTMLCpslGridElement extends Components.CpslGrid, HTMLStencilElement {
     }
     var HTMLCpslGridElement: {
@@ -503,7 +571,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,10 +694,12 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "cpsl-alert": HTMLCpslAlertElement;
+        "cpsl-animation": HTMLCpslAnimationElement;
         "cpsl-button": HTMLCpslButtonElement;
         "cpsl-code-input": HTMLCpslCodeInputElement;
         "cpsl-col": HTMLCpslColElement;
         "cpsl-divider": HTMLCpslDividerElement;
+        "cpsl-dropdown": HTMLCpslDropdownElement;
         "cpsl-grid": HTMLCpslGridElement;
         "cpsl-icon": HTMLCpslIconElement;
         "cpsl-info-box": HTMLCpslInfoBoxElement;
@@ -644,6 +729,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.
@@ -780,6 +871,16 @@ declare namespace LocalJSX {
     }
     interface CpslDivider {
     }
+    interface CpslDropdown {
+        /**
+          * Items to be presented in the dropdown
+         */
+        "items"?: Array<{ icon: string, label: string, value: string, selectedLabel?: string }>;
+        /**
+          * Width of the dropdown
+         */
+        "width"?: string;
+    }
     interface CpslGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -925,24 +1026,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 {
         /**
@@ -1037,6 +1178,18 @@ declare namespace LocalJSX {
         "selectedTab"?: string;
     }
     interface CpslText {
+        /**
+          * The color of text. Options are: `"primary"`, `"secondary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
+         */
+        "color"?: 'primary' | 'secondary' | 'subtle' | 'inverted' | 'error';
+        /**
+          * The variant of text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
+         */
+        "variant"?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+        /**
+          * The weight of text. Options are: `"regular"`, `"medium", `"semiBold", `"bold". Default is: `"regular"`.
+         */
+        "weight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
     }
     interface CpslTileButton {
         /**
@@ -1050,10 +1203,12 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "cpsl-alert": CpslAlert;
+        "cpsl-animation": CpslAnimation;
         "cpsl-button": CpslButton;
         "cpsl-code-input": CpslCodeInput;
         "cpsl-col": CpslCol;
         "cpsl-divider": CpslDivider;
+        "cpsl-dropdown": CpslDropdown;
         "cpsl-grid": CpslGrid;
         "cpsl-icon": CpslIcon;
         "cpsl-info-box": CpslInfoBox;
@@ -1077,10 +1232,12 @@ 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>;
             "cpsl-divider": LocalJSX.CpslDivider & JSXBase.HTMLAttributes<HTMLCpslDividerElement>;
+            "cpsl-dropdown": LocalJSX.CpslDropdown & JSXBase.HTMLAttributes<HTMLCpslDropdownElement>;
             "cpsl-grid": LocalJSX.CpslGrid & JSXBase.HTMLAttributes<HTMLCpslGridElement>;
             "cpsl-icon": LocalJSX.CpslIcon & JSXBase.HTMLAttributes<HTMLCpslIconElement>;
             "cpsl-info-box": LocalJSX.CpslInfoBox & JSXBase.HTMLAttributes<HTMLCpslInfoBoxElement>;

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 { generateTheme } from './utils/theme/generateTheme';
+export type { Theme, BorderRadius } from './interface';

package/dist/types/interface.d.ts

@@ -8,3 +8,140 @@ 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;
+    customFontSizes?: CustomFontSizes;
+};
+export type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
+export interface CustomFontSizes {
+    body2XS?: string;
+    bodyXS?: string;
+    bodyS?: string;
+    bodyM?: string;
+    bodyL?: string;
+    bodyXL?: string;
+    headingXS?: string;
+    headingS?: string;
+    headingM?: string;
+    headingL?: string;
+    headingXL?: string;
+    heading2XL?: string;
+}
+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, customFontSizes }: Pick<Theme, 'font' | 'customFontSizes'>) => 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,2 @@
+import { Theme } from '../../interface';
+export declare const generateTheme: ({ foregroundColor, backgroundColor, font, customPalette, borderRadius, customFontSizes, }: Theme) => boolean;

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.0-dev.dropdown",
   "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,9 @@
     "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"
+  }
 }