@usecapsule/core-components 2.0.5 → 2.0.6

package/dist/types/components.d.ts

@@ -7,11 +7,13 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AutocompleteTypes, IconType, TextFieldTypes } from "./interface";
 import { CodeChangeEventDetail } from "./components/cpsl-code-input/code-change-interface";
+import { DropdownInputEventDetail } from "./components/cpsl-dropdown/dropdown-interface";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/cpsl-input/input-interface";
 import { TabClickEventDetail } from "./components/cpsl-tab/tab-interface";
 import { TabsChangedEventDetail } from "./components/cpsl-tabs/tabs-interface";
 export { AutocompleteTypes, IconType, TextFieldTypes } from "./interface";
 export { CodeChangeEventDetail } from "./components/cpsl-code-input/code-change-interface";
+export { DropdownInputEventDetail } from "./components/cpsl-dropdown/dropdown-interface";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/cpsl-input/input-interface";
 export { TabClickEventDetail } from "./components/cpsl-tab/tab-interface";
 export { TabsChangedEventDetail } from "./components/cpsl-tabs/tabs-interface";
@@ -168,6 +170,16 @@ export namespace Components {
     }
     interface CpslDivider {
     }
+    interface CpslDropdown {
+        /**
+          * Items to be presented in the dropdown
+         */
+        "items": Array<DropdownInputEventDetail>;
+        /**
+          * Width of the dropdown
+         */
+        "width": string;
+    }
     interface CpslGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -421,6 +433,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 {
         /**
@@ -437,6 +461,10 @@ export interface CpslCodeInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslCodeInputElement;
 }
+export interface CpslDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslDropdownElement;
+}
 export interface CpslInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCpslInputElement;
@@ -505,6 +533,23 @@ declare global {
         prototype: HTMLCpslDividerElement;
         new (): HTMLCpslDividerElement;
     };
+    interface HTMLCpslDropdownElementEventMap {
+        "selectedItemChange": DropdownInputEventDetail;
+    }
+    interface HTMLCpslDropdownElement extends Components.CpslDropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslDropdownElementEventMap>(type: K, listener: (this: HTMLCpslDropdownElement, ev: CpslDropdownCustomEvent<HTMLCpslDropdownElementEventMap[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 HTMLCpslDropdownElementEventMap>(type: K, listener: (this: HTMLCpslDropdownElement, ev: CpslDropdownCustomEvent<HTMLCpslDropdownElementEventMap[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 HTMLCpslDropdownElement: {
+        prototype: HTMLCpslDropdownElement;
+        new (): HTMLCpslDropdownElement;
+    };
     interface HTMLCpslGridElement extends Components.CpslGrid, HTMLStencilElement {
     }
     var HTMLCpslGridElement: {
@@ -671,6 +716,7 @@ declare global {
         "cpsl-code-input": HTMLCpslCodeInputElement;
         "cpsl-col": HTMLCpslColElement;
         "cpsl-divider": HTMLCpslDividerElement;
+        "cpsl-dropdown": HTMLCpslDropdownElement;
         "cpsl-grid": HTMLCpslGridElement;
         "cpsl-icon": HTMLCpslIconElement;
         "cpsl-info-box": HTMLCpslInfoBoxElement;
@@ -842,6 +888,20 @@ declare namespace LocalJSX {
     }
     interface CpslDivider {
     }
+    interface CpslDropdown {
+        /**
+          * Items to be presented in the dropdown
+         */
+        "items"?: Array<DropdownInputEventDetail>;
+        /**
+          * On eve
+         */
+        "onSelectedItemChange"?: (event: CpslDropdownCustomEvent<DropdownInputEventDetail>) => void;
+        /**
+          * Width of the dropdown
+         */
+        "width"?: string;
+    }
     interface CpslGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -1139,6 +1199,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 {
         /**
@@ -1157,6 +1229,7 @@ declare namespace LocalJSX {
         "cpsl-code-input": CpslCodeInput;
         "cpsl-col": CpslCol;
         "cpsl-divider": CpslDivider;
+        "cpsl-dropdown": CpslDropdown;
         "cpsl-grid": CpslGrid;
         "cpsl-icon": CpslIcon;
         "cpsl-info-box": CpslInfoBox;
@@ -1185,6 +1258,7 @@ declare module "@stencil/core" {
             "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/index.d.ts

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

package/dist/types/interface.d.ts

@@ -14,8 +14,23 @@ export type Theme = {
     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;

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usecapsule/core-components",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Capsule Core Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -50,5 +50,5 @@
     "stencil-inline-svg": "^1.1.0",
     "ts-node": "^10.9.2"
   },
-  "gitHead": "86381310f25b99ed54a91da194b0c9ab2a90b506"
+  "gitHead": "bcd461d02f26fd4fb596ec2e883aa991e35a0062"
 }