@getpara/core-components 2.0.0-fc.2 → 2.0.0

package/dist/types/assets/icons/index.d.ts

@@ -9,7 +9,9 @@ export declare const Icons: {
     arbitrumBrand: string;
     arrowCircleBrokenDownLeft: string;
     arrowCircleDownFilled: string;
+    arrowCircleDown: string;
     arrowNarrow: string;
+    arrowUpDown: string;
     arrow: string;
     asterisk: string;
     backpack: string;
@@ -33,6 +35,7 @@ export declare const Icons: {
     clubhouse: string;
     code: string;
     coinbase: string;
+    coins: string;
     copy07: string;
     copy: string;
     cosmosCircle: string;
@@ -50,6 +53,7 @@ export declare const Icons: {
     discordBrand: string;
     discord: string;
     dot: string;
+    dotsSquare: string;
     dots: string;
     downloadCloud: string;
     download: string;
@@ -60,6 +64,7 @@ export declare const Icons: {
     emptyCircle: string;
     ethCircle: string;
     ethereum: string;
+    externalLink: string;
     eyeOff: string;
     eye: string;
     facebookBrand: string;
@@ -119,6 +124,7 @@ export declare const Icons: {
     nobleBrand: string;
     okx: string;
     optimismBrand: string;
+    paraArrow: string;
     paraBlackBg: string;
     paraBrand: string;
     paraIconBrand: string;
@@ -154,6 +160,7 @@ export declare const Icons: {
     settings: string;
     share: string;
     shield: string;
+    shuffle: string;
     signalBrand: string;
     signal: string;
     sliders: string;
@@ -181,15 +188,18 @@ export declare const Icons: {
     twitterBrand: string;
     twitter: string;
     usdcBrand: string;
+    user01: string;
     userCircle: string;
     userPlus: string;
     user: string;
     valora: string;
+    wallet02: string;
     walletConnect: string;
     wallet: string;
     x: string;
     youtubeBrand: string;
     youtube: string;
+    zap: string;
     zerion: string;
     AD: string;
     AE: string;

package/dist/types/components/cpsl-button/cpsl-button.d.ts

@@ -10,6 +10,11 @@ export declare class CpslButton {
      * Default is: false.
      */
     disabled?: boolean;
+    /**
+     * If the button is pending.
+     * Default is: false.
+     */
+    pending?: boolean;
     /**
      * Whether the button takes the full width of it's container.
      * Default is: false.

package/dist/types/components/cpsl-code-input/cpsl-code-input.d.ts

@@ -27,7 +27,9 @@ export declare class CpslCodeInput {
      * The `cpslInput` event is fired each time the user modifies the input's value.
      */
     cpslInput: EventEmitter<CodeChangeEventDetail>;
+    watchCodeProp(newCode: string): void;
     private handleInput;
+    private isArrowNavigation;
     private handleKeyDown;
     private handleFocus;
     private handlePaste;

package/dist/types/components/cpsl-icon/cpsl-icon.d.ts

@@ -20,5 +20,21 @@ export declare class CpslIcon {
      * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
      */
     icon?: IconType;
+    /**
+     * Whether the icon should be rounded.
+     */
+    radius?: 'none' | 'theme' | 'full';
+    /**
+     * The background CSS property of the icon.
+     */
+    background?: string;
+    /**
+     * The color of the icon.
+     */
+    color?: string;
+    /**
+     * The border CSS property of the icon.
+     */
+    border?: string;
     render(): any;
 }

package/dist/types/components/cpsl-popover/cpsl-popover.d.ts

@@ -50,6 +50,11 @@ export declare class CpslPopover {
      * Default is: `"bottom"`.
      */
     transformOriginVertical?: 'top' | 'center' | 'bottom';
+    /**
+     * If `true`, the popover will be aligned to the center of the trigger element.
+     * Default is `false`.
+     */
+    alignCenter: boolean;
     /**
      * Which trigger causes the popover to open.
      * Options are: `"click"`, `"hover"`.

package/dist/types/components/cpsl-select/cpsl-select.d.ts

@@ -17,6 +17,11 @@ export declare class CpslSelect {
      * Default is `false`
      */
     autoWidth?: boolean;
+    /**
+     * If `true`, the popover will be aligned to the center of the trigger element.
+     * Default is `false`.
+     */
+    alignCenter: boolean;
     /**
      * If `true`, the user cannot interact with the input.
      */
@@ -45,7 +50,7 @@ export declare class CpslSelect {
      * The name of the icon to use for the end icon.
      * Default: `chevronUp`
      */
-    icon?: IconType;
+    icon?: IconType | null;
     /**
      * The label for the input.
      */

package/dist/types/components/cpsl-text/cpsl-text.d.ts

@@ -17,6 +17,12 @@ export declare class CpslText {
      * Default is: `"regular"`.
      */
     weight?: 'regular' | 'medium' | 'semiBold' | 'bold';
+    /**
+     * The text-align CSS property to apply.
+     * Options are: `"left"`, `"center", `"right".
+     * Default is: `"left"`.
+     */
+    align?: 'left' | 'center' | 'right';
     private getContent;
     render(): any;
 }

package/dist/types/components/cpsl-tile-button/cpsl-tile-button.d.ts

@@ -1,5 +1,10 @@
 import { IconType } from '../../interface.js';
 export declare class CpslTileButton {
+    /**
+     * If the button is disabled.
+     * Default is: false.
+     */
+    disabled?: boolean;
     /**
      * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
      */

package/dist/types/components.d.ts

@@ -107,6 +107,10 @@ export namespace Components {
           * href to use when using a link.
          */
         "href"?: string;
+        /**
+          * If the button is pending. Default is: false.
+         */
+        "pending"?: boolean;
         /**
           * The size of the button. Options are: `"small"`, `"medium". Default is: `"medium"`.
          */
@@ -388,6 +392,18 @@ export namespace Components {
         "withDefaultTheme"?: boolean;
     }
     interface CpslIcon {
+        /**
+          * The background CSS property of the icon.
+         */
+        "background"?: string;
+        /**
+          * The border CSS property of the icon.
+         */
+        "border"?: string;
+        /**
+          * The color of the icon.
+         */
+        "color"?: string;
         /**
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
          */
@@ -400,6 +416,10 @@ export namespace Components {
           * Whether to invert the icon's colors.
          */
         "invert"?: boolean;
+        /**
+          * Whether the icon should be rounded.
+         */
+        "radius"?: 'none' | 'theme' | 'full';
         /**
           * The CSS size of the icon.
          */
@@ -669,6 +689,10 @@ export namespace Components {
         "text": string;
     }
     interface CpslPopover {
+        /**
+          * If `true`, the popover will be aligned to the center of the trigger element. Default is `false`.
+         */
+        "alignCenter": boolean;
         /**
           * ID for the element that the popover anchors to.
          */
@@ -759,6 +783,10 @@ export namespace Components {
         "justify"?: React.CSSProperties['justifyContent'];
     }
     interface CpslSelect {
+        /**
+          * If `true`, the popover will be aligned to the center of the trigger element. Default is `false`.
+         */
+        "alignCenter": boolean;
         /**
           * ID of element to anchor popover to.
          */
@@ -790,7 +818,7 @@ export namespace Components {
         /**
           * The name of the icon to use for the end icon. Default: `chevronUp`
          */
-        "icon"?: IconType;
+        "icon"?: IconType | null;
         /**
           * ID of the element, must be unique for the popover trigger.
          */
@@ -927,6 +955,10 @@ export namespace Components {
         "selectedTab"?: string;
     }
     interface CpslText {
+        /**
+          * The text-align CSS property to apply. Options are: `"left"`, `"center", `"right". Default is: `"left"`.
+         */
+        "align"?: 'left' | 'center' | 'right';
         /**
           * The color of text. Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
          */
@@ -941,6 +973,10 @@ export namespace Components {
         "weight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
     }
     interface CpslTileButton {
+        /**
+          * If the button is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
         /**
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
          */
@@ -1636,6 +1672,10 @@ declare namespace LocalJSX {
           * href to use when using a link.
          */
         "href"?: string;
+        /**
+          * If the button is pending. Default is: false.
+         */
+        "pending"?: boolean;
         /**
           * The size of the button. Options are: `"small"`, `"medium". Default is: `"medium"`.
          */
@@ -1949,6 +1989,18 @@ declare namespace LocalJSX {
         "withDefaultTheme"?: boolean;
     }
     interface CpslIcon {
+        /**
+          * The background CSS property of the icon.
+         */
+        "background"?: string;
+        /**
+          * The border CSS property of the icon.
+         */
+        "border"?: string;
+        /**
+          * The color of the icon.
+         */
+        "color"?: string;
         /**
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
          */
@@ -1961,6 +2013,10 @@ declare namespace LocalJSX {
           * Whether to invert the icon's colors.
          */
         "invert"?: boolean;
+        /**
+          * Whether the icon should be rounded.
+         */
+        "radius"?: 'none' | 'theme' | 'full';
         /**
           * The CSS size of the icon.
          */
@@ -2278,6 +2334,10 @@ declare namespace LocalJSX {
         "text"?: string;
     }
     interface CpslPopover {
+        /**
+          * If `true`, the popover will be aligned to the center of the trigger element. Default is `false`.
+         */
+        "alignCenter"?: boolean;
         /**
           * ID for the element that the popover anchors to.
          */
@@ -2376,6 +2436,10 @@ declare namespace LocalJSX {
         "justify"?: React.CSSProperties['justifyContent'];
     }
     interface CpslSelect {
+        /**
+          * If `true`, the popover will be aligned to the center of the trigger element. Default is `false`.
+         */
+        "alignCenter"?: boolean;
         /**
           * ID of element to anchor popover to.
          */
@@ -2407,7 +2471,7 @@ declare namespace LocalJSX {
         /**
           * The name of the icon to use for the end icon. Default: `chevronUp`
          */
-        "icon"?: IconType;
+        "icon"?: IconType | null;
         /**
           * ID of the element, must be unique for the popover trigger.
          */
@@ -2572,6 +2636,10 @@ declare namespace LocalJSX {
         "selectedTab"?: string;
     }
     interface CpslText {
+        /**
+          * The text-align CSS property to apply. Options are: `"left"`, `"center", `"right". Default is: `"left"`.
+         */
+        "align"?: 'left' | 'center' | 'right';
         /**
           * The color of text. Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
          */
@@ -2586,6 +2654,10 @@ declare namespace LocalJSX {
         "weight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
     }
     interface CpslTileButton {
+        /**
+          * If the button is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
         /**
           * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
          */

package/dist/types/interface.d.ts

@@ -20,6 +20,7 @@ export type Theme = {
     mode?: 'light' | 'dark';
     borderRadius?: BorderRadius;
     font?: string;
+    overlayBackground?: string;
     customPalette?: CustomPalette;
     customFontSizes?: CustomFontSizes;
     customBorderRadii?: CustomBorderRadii;

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

@@ -4,6 +4,6 @@ export type Palette = {
     backgroundColors: string[];
     accentColors: string[];
 };
-export declare const generatePalette: ({ foregroundColor, backgroundColor, accentColor, isDarkTheme, customPalette, }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'accentColor' | 'customPalette'> & {
+export declare const generatePalette: ({ foregroundColor, backgroundColor, accentColor, isDarkTheme, customPalette, overlayBackground, }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'accentColor' | 'customPalette' | 'overlayBackground'> & {
     isDarkTheme: boolean;
 }) => void;

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

@@ -3,4 +3,4 @@ import { Theme } from '../../interface.js';
  * Generates css theme variables.
  * @returns @boolean Whether background is dark or not.
  */
-export declare const generateTheme: ({ foregroundColor, backgroundColor, accentColor, darkForegroundColor, darkBackgroundColor, darkAccentColor, mode, font, customPalette, borderRadius, customFontSizes, customBorderRadii, }: Theme) => void;
+export declare const generateTheme: ({ foregroundColor, backgroundColor, accentColor, darkForegroundColor, darkBackgroundColor, darkAccentColor, mode, font, customPalette, borderRadius, customFontSizes, customBorderRadii, overlayBackground, }: Theme) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@getpara/core-components",
   "description": "Capsule Core Components",
-  "version": "2.0.0-fc.2",
+  "version": "2.0.0",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "dependencies": {
@@ -68,5 +68,5 @@
   ],
   "type": "module",
   "types": "dist/types/index.d.ts",
-  "gitHead": "65106fd9662a2c32b2071a0dea67ef55b3e4e98f"
+  "gitHead": "a64b6aa9b3c481a2d955022f621e495fb55e549e"
 }