@haiilo/catalyst 0.1.1 → 0.2.0

package/dist/types/components/cat-skeleton/cat-skeleton.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Skeletons are used to show where content will eventually be drawn.
+ */
+export declare class CatSkeleton {
+  /**
+   * The animation style of the skeleton.
+   */
+  effect: 'plain' | 'sheen' | 'pulse';
+  /**
+   * The rendering style of the skeleton.
+   */
+  variant: 'rectangle' | 'square' | 'circle' | 'head' | 'body';
+  /**
+   * The size of the skeleton. If the variant is set to "head", the size values
+   * "xs" to "xl" translate to the head levels `h1` to `h5`.
+   */
+  size: 'xs' | 's' | 'm' | 'l' | 'xl';
+  /**
+   * The number of text lines to be rendered for "head" and "body" variants.
+   * Defaults to 1 for "head" and 3 for "body". Will be ignored for other
+   * variants.
+   */
+  lines?: number;
+  render(): any;
+  private get count();
+  private get style();
+  private random;
+}

package/dist/types/components.d.ts

@@ -8,6 +8,34 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Breakpoint } from "./utils/breakpoints";
 import { Placement } from "@floating-ui/dom";
 export namespace Components {
+    interface CatAlert {
+        /**
+          * The color palette of the alert.
+         */
+        "color": 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+    }
+    interface CatBadge {
+        /**
+          * The color palette of the badge.
+         */
+        "color": 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+        /**
+          * Draw attention to the badge with a subtle animation.
+         */
+        "pulse": boolean;
+        /**
+          * Use round badge edges.
+         */
+        "round": boolean;
+        /**
+          * The size of the badge.
+         */
+        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * The rendering style of the badge.
+         */
+        "variant": 'filled' | 'outlined';
+    }
     interface CatButton {
         /**
           * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
@@ -98,8 +126,29 @@ export namespace Components {
         "size": 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
     interface CatMenu {
+        /**
+          * The placement of the menu.
+         */
         "placement": Placement;
     }
+    interface CatSkeleton {
+        /**
+          * The animation style of the skeleton.
+         */
+        "effect": 'plain' | 'sheen' | 'pulse';
+        /**
+          * The number of text lines to be rendered for "head" and "body" variants. Defaults to 1 for "head" and 3 for "body". Will be ignored for other variants.
+         */
+        "lines"?: number;
+        /**
+          * The size of the skeleton. If the variant is set to "head", the size values "xs" to "xl" translate to the head levels `h1` to `h5`.
+         */
+        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * The rendering style of the skeleton.
+         */
+        "variant": 'rectangle' | 'square' | 'circle' | 'head' | 'body';
+    }
     interface CatSpinner {
         /**
           * Adds accessible label for the spinner that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
@@ -112,6 +161,18 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLCatAlertElement extends Components.CatAlert, HTMLStencilElement {
+    }
+    var HTMLCatAlertElement: {
+        prototype: HTMLCatAlertElement;
+        new (): HTMLCatAlertElement;
+    };
+    interface HTMLCatBadgeElement extends Components.CatBadge, HTMLStencilElement {
+    }
+    var HTMLCatBadgeElement: {
+        prototype: HTMLCatBadgeElement;
+        new (): HTMLCatBadgeElement;
+    };
     interface HTMLCatButtonElement extends Components.CatButton, HTMLStencilElement {
     }
     var HTMLCatButtonElement: {
@@ -130,6 +191,12 @@ declare global {
         prototype: HTMLCatMenuElement;
         new (): HTMLCatMenuElement;
     };
+    interface HTMLCatSkeletonElement extends Components.CatSkeleton, HTMLStencilElement {
+    }
+    var HTMLCatSkeletonElement: {
+        prototype: HTMLCatSkeletonElement;
+        new (): HTMLCatSkeletonElement;
+    };
     interface HTMLCatSpinnerElement extends Components.CatSpinner, HTMLStencilElement {
     }
     var HTMLCatSpinnerElement: {
@@ -137,13 +204,44 @@ declare global {
         new (): HTMLCatSpinnerElement;
     };
     interface HTMLElementTagNameMap {
+        "cat-alert": HTMLCatAlertElement;
+        "cat-badge": HTMLCatBadgeElement;
         "cat-button": HTMLCatButtonElement;
         "cat-icon": HTMLCatIconElement;
         "cat-menu": HTMLCatMenuElement;
+        "cat-skeleton": HTMLCatSkeletonElement;
         "cat-spinner": HTMLCatSpinnerElement;
     }
 }
 declare namespace LocalJSX {
+    interface CatAlert {
+        /**
+          * The color palette of the alert.
+         */
+        "color"?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+    }
+    interface CatBadge {
+        /**
+          * The color palette of the badge.
+         */
+        "color"?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+        /**
+          * Draw attention to the badge with a subtle animation.
+         */
+        "pulse"?: boolean;
+        /**
+          * Use round badge edges.
+         */
+        "round"?: boolean;
+        /**
+          * The size of the badge.
+         */
+        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * The rendering style of the badge.
+         */
+        "variant"?: 'filled' | 'outlined';
+    }
     interface CatButton {
         /**
           * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
@@ -189,6 +287,10 @@ declare namespace LocalJSX {
           * Emitted when the button loses focus.
          */
         "onCatBlur"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the button is clicked.
+         */
+        "onCatClick"?: (event: CustomEvent<MouseEvent>) => void;
         /**
           * Emitted when the button received focus.
          */
@@ -245,8 +347,29 @@ declare namespace LocalJSX {
           * Emitted when the menu is opened.
          */
         "onCatOpen"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * The placement of the menu.
+         */
         "placement"?: Placement;
     }
+    interface CatSkeleton {
+        /**
+          * The animation style of the skeleton.
+         */
+        "effect"?: 'plain' | 'sheen' | 'pulse';
+        /**
+          * The number of text lines to be rendered for "head" and "body" variants. Defaults to 1 for "head" and 3 for "body". Will be ignored for other variants.
+         */
+        "lines"?: number;
+        /**
+          * The size of the skeleton. If the variant is set to "head", the size values "xs" to "xl" translate to the head levels `h1` to `h5`.
+         */
+        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * The rendering style of the skeleton.
+         */
+        "variant"?: 'rectangle' | 'square' | 'circle' | 'head' | 'body';
+    }
     interface CatSpinner {
         /**
           * Adds accessible label for the spinner that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
@@ -258,9 +381,12 @@ declare namespace LocalJSX {
         "size"?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
     interface IntrinsicElements {
+        "cat-alert": CatAlert;
+        "cat-badge": CatBadge;
         "cat-button": CatButton;
         "cat-icon": CatIcon;
         "cat-menu": CatMenu;
+        "cat-skeleton": CatSkeleton;
         "cat-spinner": CatSpinner;
     }
 }
@@ -268,9 +394,12 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "cat-alert": LocalJSX.CatAlert & JSXBase.HTMLAttributes<HTMLCatAlertElement>;
+            "cat-badge": LocalJSX.CatBadge & JSXBase.HTMLAttributes<HTMLCatBadgeElement>;
             "cat-button": LocalJSX.CatButton & JSXBase.HTMLAttributes<HTMLCatButtonElement>;
             "cat-icon": LocalJSX.CatIcon & JSXBase.HTMLAttributes<HTMLCatIconElement>;
             "cat-menu": LocalJSX.CatMenu & JSXBase.HTMLAttributes<HTMLCatMenuElement>;
+            "cat-skeleton": LocalJSX.CatSkeleton & JSXBase.HTMLAttributes<HTMLCatSkeletonElement>;
             "cat-spinner": LocalJSX.CatSpinner & JSXBase.HTMLAttributes<HTMLCatSpinnerElement>;
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {