@usecapsule/core-components 2.0.3 → 2.0.4-dev.dropdown.0

package/dist/types/components.d.ts

@@ -168,6 +168,16 @@ export namespace Components {
     }
     interface CpslDivider {
     }
+    interface CpslDropdown {
+        /**
+          * Items to be presented in the dropdown
+         */
+        "items": Array<{ icon: IconType, 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.
@@ -421,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 {
         /**
@@ -505,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: {
@@ -671,6 +699,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 +871,16 @@ declare namespace LocalJSX {
     }
     interface CpslDivider {
     }
+    interface CpslDropdown {
+        /**
+          * Items to be presented in the dropdown
+         */
+        "items"?: Array<{ icon: IconType, 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.
@@ -1139,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 {
         /**
@@ -1157,6 +1208,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 +1237,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.3",
+  "version": "2.0.4-dev.dropdown.0",
   "description": "Capsule Core Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -49,6 +49,5 @@
     "sass": "^1.71.1",
     "stencil-inline-svg": "^1.1.0",
     "ts-node": "^10.9.2"
-  },
-  "gitHead": "a3491397ca74229897e10b5140cc417af3eaed14"
+  }
 }