bromcom-ui-next 0.1.3 → 0.1.4

package/dist/types/components.d.ts

@@ -14,6 +14,7 @@ import { ChipKind, ChipSize, ChipStatus } from "./components/chip/types";
 import { InputSize, InputStatus, InputType } from "./components/input/types";
 import { Event } from "./stencil-public-runtime";
 import { TextSize, TextVariant } from "./components/text/text.types";
+import { InputSize as InputSize1, InputStatus as InputStatus1, TextareaResize } from "./components/textarea/types";
 export { AccordionChangeEventType } from "./components/accordion/types";
 export { AccordionGroupChangeEventType } from "./components/accordion-group/types";
 export { AlertKind, AlertSize, AlertStatus } from "./components/alert/types";
@@ -23,6 +24,7 @@ export { ChipKind, ChipSize, ChipStatus } from "./components/chip/types";
 export { InputSize, InputStatus, InputType } from "./components/input/types";
 export { Event } from "./stencil-public-runtime";
 export { TextSize, TextVariant } from "./components/text/text.types";
+export { InputSize as InputSize1, InputStatus as InputStatus1, TextareaResize } from "./components/textarea/types";
 export namespace Components {
     /**
      * @component BcmAccordion
@@ -246,6 +248,120 @@ export namespace Components {
          */
         "status": AvatarStatus;
     }
+    /**
+     * @component BcmBadge
+     * @description A versatile badge component that can be positioned around its container.
+     * Supports different sizes, variants (dot/text), colors, and positioning options.
+     * Can display status indicators with optional blinking animation.
+     * @example Basic usage
+     * <bcm-badge color="primary" position="top-right">
+     * <div>Container Content</div>
+     * <span slot="badge">New</span>
+     * </bcm-badge>
+     * @example Status indicator with blink
+     * <bcm-badge variant="dot" color="success" blink={true} status="Online">
+     * <div>User Profile</div>
+     * </bcm-badge>
+     */
+    interface BcmBadge {
+        /**
+          * Enables blinking animation for the badge. Useful for drawing attention or indicating active status.
+          * @type {boolean}
+          * @default false
+         */
+        "blink": boolean;
+        /**
+          * Defines the color of the badge. Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
+          * @type {string}
+          * @optional
+         */
+        "color"?: string;
+        /**
+          * Fine-tune the badge position with custom offset. Format: "x,y" in pixels (e.g., "10,-5")
+          * @type {string}
+          * @optional
+         */
+        "offset": string;
+        /**
+          * Sets the position of the badge relative to its container.
+          * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
+          * @default 'top-right'
+         */
+        "position": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+        /**
+          * Determines the size of the badge.
+          * @type {'small' | 'medium' | 'large'}
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Enables soft color mode for the badge. When true, uses lighter tones and pastel colors.
+          * @type {boolean}
+          * @default false
+         */
+        "soft": boolean;
+        /**
+          * Status message for accessibility purposes. Will be read by screen readers.
+          * @type {string}
+          * @optional
+         */
+        "status"?: string;
+        /**
+          * Text to be displayed inside the badge. Used when variant is set to 'text'. Can be overridden using the "badge" slot.
+          * @type {string}
+          * @optional
+         */
+        "text"?: string;
+        /**
+          * Sets the visual variant of the badge. 'dot': Appears as a small dot indicator 'text': Displays content as text
+          * @type {'dot' | 'text'}
+          * @default 'text'
+         */
+        "variant": 'dot' | 'text';
+    }
+    /**
+     * @component BcmBasicBadge
+     * @description A basic badge component that can be used as a status indicator or to highlight content.
+     * Supports dot and text variants with different sizes and color options.
+     * @example Basic usage
+     * <bcm-basic-badge size="medium" color="primary">
+     * New
+     * </bcm-basic-badge>
+     * @example Dot variant
+     * <bcm-basic-badge variant="dot" color="success" />
+     */
+    interface BcmBasicBadge {
+        /**
+          * Defines the color of the badge. Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
+          * @type {string}
+          * @optional
+         */
+        "color"?: string;
+        /**
+          * Determines the size of the badge.
+          * @type {'small' | 'medium' | 'large'}
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Enables soft color mode for the badge. When true, uses lighter tones and pastel colors.
+          * @type {boolean}
+          * @default false
+         */
+        "soft": boolean;
+        /**
+          * Text to be displayed inside the badge. Used when variant is set to 'text'.
+          * @type {string}
+          * @optional
+         */
+        "text"?: string;
+        /**
+          * Sets the visual variant of the badge. 'dot': Appears as a small dot indicator 'text': Displays content as text
+          * @type {'dot' | 'text'}
+          * @default 'text'
+         */
+        "variant": 'dot' | 'text';
+    }
     interface BcmButton {
         /**
           * Active state
@@ -365,6 +481,36 @@ export namespace Components {
          */
         "status"?: ChipStatus;
     }
+    /**
+     * @component BCM Divider
+     * @description A versatile divider component that creates a visual separation between content.
+     * It supports horizontal or vertical orientation with customizable styles and sizes.
+     * The component uses CSS variables for theming and Tailwind for styling.
+     */
+    interface BcmDivider {
+        /**
+          * @prop {('horizontal'|'vertical')} direction
+          * @description Determines the orientation of the divider
+          * @default 'horizontal'
+          * @example <bcm-divider direction="vertical" />
+         */
+        "direction": 'horizontal' | 'vertical';
+        /**
+          * @prop {('small'|'medium'|'large')} size
+          * @description Controls the thickness of the divider
+          * @default 'medium'
+          * @values - small: 1px border - medium: 2px border - large: 4px border
+          * @example <bcm-divider size="large" />
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * @prop {('solid'|'dashed'|'dotted')} variant
+          * @description Sets the border style of the divider
+          * @default 'solid'
+          * @example <bcm-divider variant="dashed" />
+         */
+        "variant": 'solid' | 'dashed' | 'dotted';
+    }
     interface BcmInput {
         /**
           * Input id
@@ -445,6 +591,10 @@ export namespace Components {
         "select": () => Promise<void>;
         "setBlur": () => Promise<void>;
         "setFocus": () => Promise<void>;
+        /**
+          * Sets locale and messages for all inputs
+         */
+        "setLocale": (locale: string, messages: Record<string, string>) => Promise<void>;
         /**
           * Controls the input size
          */
@@ -465,6 +615,14 @@ export namespace Components {
           * HTML input type
          */
         "type": InputType;
+        /**
+          * Whether to use native form validation If false, component will handle validation internally
+         */
+        "useNativeValidation": boolean;
+        /**
+          * Custom validation function
+         */
+        "validator"?: (value: string) => string | undefined;
         /**
           * Input value
          */
@@ -484,6 +642,111 @@ export namespace Components {
          */
         "variant": TextVariant;
     }
+    interface BcmTextarea {
+        /**
+          * Input id
+         */
+        "_id"?: string;
+        /**
+          * Auto grow height based on content
+         */
+        "autoGrow": boolean;
+        /**
+          * Caption text to display below textarea
+         */
+        "captionText"?: string;
+        /**
+          * Textarea cols
+         */
+        "cols"?: number;
+        /**
+          * ID of associated caption/error text element
+         */
+        "describedby"?: string;
+        /**
+          * Whether the textarea is disabled
+         */
+        "disabled": boolean;
+        /**
+          * Error message to display
+         */
+        "errorMessage"?: string;
+        /**
+          * Full width textarea
+         */
+        "fullWidth": boolean;
+        /**
+          * Textarea label for accessibility
+         */
+        "label"?: string;
+        /**
+          * ID of associated label element
+         */
+        "labelledby"?: string;
+        /**
+          * Max length for text input
+         */
+        "maxLength"?: number;
+        /**
+          * Maximum height in rows
+         */
+        "maxRows"?: number;
+        /**
+          * Min length for text input
+         */
+        "minLength"?: number;
+        /**
+          * Minimum height in rows
+         */
+        "minRows"?: number;
+        /**
+          * Input name
+         */
+        "name"?: string;
+        /**
+          * Input placeholder text
+         */
+        "placeholder"?: string;
+        /**
+          * Whether the textarea is readonly
+         */
+        "readonly": boolean;
+        /**
+          * Whether the textarea is required
+         */
+        "required": boolean;
+        /**
+          * Resize behavior
+         */
+        "resize": TextareaResize;
+        /**
+          * Textarea rows
+         */
+        "rows"?: number;
+        "select": () => Promise<void>;
+        "setBlur": () => Promise<void>;
+        "setFocus": () => Promise<void>;
+        /**
+          * Show character counter
+         */
+        "showCounter": boolean;
+        /**
+          * Controls the textarea size
+         */
+        "size": InputSize1;
+        /**
+          * Defines the textarea's status/state
+         */
+        "status": InputStatus1;
+        /**
+          * Custom validation function
+         */
+        "validator"?: (value: string) => string | undefined;
+        /**
+          * Textarea value
+         */
+        "value": string;
+    }
 }
 export interface BcmAccordionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -509,6 +772,10 @@ export interface BcmInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmInputElement;
 }
+export interface BcmTextareaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmTextareaElement;
+}
 declare global {
     interface HTMLBcmAccordionElementEventMap {
         "bcmAccordionChange": AccordionChangeEventType;
@@ -668,6 +935,44 @@ declare global {
         prototype: HTMLBcmAvatarElement;
         new (): HTMLBcmAvatarElement;
     };
+    /**
+     * @component BcmBadge
+     * @description A versatile badge component that can be positioned around its container.
+     * Supports different sizes, variants (dot/text), colors, and positioning options.
+     * Can display status indicators with optional blinking animation.
+     * @example Basic usage
+     * <bcm-badge color="primary" position="top-right">
+     * <div>Container Content</div>
+     * <span slot="badge">New</span>
+     * </bcm-badge>
+     * @example Status indicator with blink
+     * <bcm-badge variant="dot" color="success" blink={true} status="Online">
+     * <div>User Profile</div>
+     * </bcm-badge>
+     */
+    interface HTMLBcmBadgeElement extends Components.BcmBadge, HTMLStencilElement {
+    }
+    var HTMLBcmBadgeElement: {
+        prototype: HTMLBcmBadgeElement;
+        new (): HTMLBcmBadgeElement;
+    };
+    /**
+     * @component BcmBasicBadge
+     * @description A basic badge component that can be used as a status indicator or to highlight content.
+     * Supports dot and text variants with different sizes and color options.
+     * @example Basic usage
+     * <bcm-basic-badge size="medium" color="primary">
+     * New
+     * </bcm-basic-badge>
+     * @example Dot variant
+     * <bcm-basic-badge variant="dot" color="success" />
+     */
+    interface HTMLBcmBasicBadgeElement extends Components.BcmBasicBadge, HTMLStencilElement {
+    }
+    var HTMLBcmBasicBadgeElement: {
+        prototype: HTMLBcmBasicBadgeElement;
+        new (): HTMLBcmBasicBadgeElement;
+    };
     interface HTMLBcmButtonElementEventMap {
         "bcmClick": MouseEvent;
         "bcmFocus": FocusEvent;
@@ -725,6 +1030,18 @@ declare global {
         prototype: HTMLBcmChipElement;
         new (): HTMLBcmChipElement;
     };
+    /**
+     * @component BCM Divider
+     * @description A versatile divider component that creates a visual separation between content.
+     * It supports horizontal or vertical orientation with customizable styles and sizes.
+     * The component uses CSS variables for theming and Tailwind for styling.
+     */
+    interface HTMLBcmDividerElement extends Components.BcmDivider, HTMLStencilElement {
+    }
+    var HTMLBcmDividerElement: {
+        prototype: HTMLBcmDividerElement;
+        new (): HTMLBcmDividerElement;
+    };
     interface HTMLBcmInputElementEventMap {
         "bcmInput": InputEvent;
         "bcmChange": Event;
@@ -753,15 +1070,41 @@ declare global {
         prototype: HTMLBcmTextElement;
         new (): HTMLBcmTextElement;
     };
+    interface HTMLBcmTextareaElementEventMap {
+        "bcmInput": InputEvent;
+        "bcmChange": Event;
+        "bcmFocus": FocusEvent;
+        "bcmBlur": FocusEvent;
+        "bcmKeyDown": KeyboardEvent;
+        "bcmKeyUp": KeyboardEvent;
+    }
+    interface HTMLBcmTextareaElement extends Components.BcmTextarea, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmTextareaElementEventMap>(type: K, listener: (this: HTMLBcmTextareaElement, ev: BcmTextareaCustomEvent<HTMLBcmTextareaElementEventMap[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 HTMLBcmTextareaElementEventMap>(type: K, listener: (this: HTMLBcmTextareaElement, ev: BcmTextareaCustomEvent<HTMLBcmTextareaElementEventMap[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 HTMLBcmTextareaElement: {
+        prototype: HTMLBcmTextareaElement;
+        new (): HTMLBcmTextareaElement;
+    };
     interface HTMLElementTagNameMap {
         "bcm-accordion": HTMLBcmAccordionElement;
         "bcm-accordion-group": HTMLBcmAccordionGroupElement;
         "bcm-alert": HTMLBcmAlertElement;
         "bcm-avatar": HTMLBcmAvatarElement;
+        "bcm-badge": HTMLBcmBadgeElement;
+        "bcm-basic-badge": HTMLBcmBasicBadgeElement;
         "bcm-button": HTMLBcmButtonElement;
         "bcm-chip": HTMLBcmChipElement;
+        "bcm-divider": HTMLBcmDividerElement;
         "bcm-input": HTMLBcmInputElement;
         "bcm-text": HTMLBcmTextElement;
+        "bcm-textarea": HTMLBcmTextareaElement;
     }
 }
 declare namespace LocalJSX {
@@ -967,6 +1310,120 @@ declare namespace LocalJSX {
          */
         "status"?: AvatarStatus;
     }
+    /**
+     * @component BcmBadge
+     * @description A versatile badge component that can be positioned around its container.
+     * Supports different sizes, variants (dot/text), colors, and positioning options.
+     * Can display status indicators with optional blinking animation.
+     * @example Basic usage
+     * <bcm-badge color="primary" position="top-right">
+     * <div>Container Content</div>
+     * <span slot="badge">New</span>
+     * </bcm-badge>
+     * @example Status indicator with blink
+     * <bcm-badge variant="dot" color="success" blink={true} status="Online">
+     * <div>User Profile</div>
+     * </bcm-badge>
+     */
+    interface BcmBadge {
+        /**
+          * Enables blinking animation for the badge. Useful for drawing attention or indicating active status.
+          * @type {boolean}
+          * @default false
+         */
+        "blink"?: boolean;
+        /**
+          * Defines the color of the badge. Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
+          * @type {string}
+          * @optional
+         */
+        "color"?: string;
+        /**
+          * Fine-tune the badge position with custom offset. Format: "x,y" in pixels (e.g., "10,-5")
+          * @type {string}
+          * @optional
+         */
+        "offset"?: string;
+        /**
+          * Sets the position of the badge relative to its container.
+          * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
+          * @default 'top-right'
+         */
+        "position"?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+        /**
+          * Determines the size of the badge.
+          * @type {'small' | 'medium' | 'large'}
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Enables soft color mode for the badge. When true, uses lighter tones and pastel colors.
+          * @type {boolean}
+          * @default false
+         */
+        "soft"?: boolean;
+        /**
+          * Status message for accessibility purposes. Will be read by screen readers.
+          * @type {string}
+          * @optional
+         */
+        "status"?: string;
+        /**
+          * Text to be displayed inside the badge. Used when variant is set to 'text'. Can be overridden using the "badge" slot.
+          * @type {string}
+          * @optional
+         */
+        "text"?: string;
+        /**
+          * Sets the visual variant of the badge. 'dot': Appears as a small dot indicator 'text': Displays content as text
+          * @type {'dot' | 'text'}
+          * @default 'text'
+         */
+        "variant"?: 'dot' | 'text';
+    }
+    /**
+     * @component BcmBasicBadge
+     * @description A basic badge component that can be used as a status indicator or to highlight content.
+     * Supports dot and text variants with different sizes and color options.
+     * @example Basic usage
+     * <bcm-basic-badge size="medium" color="primary">
+     * New
+     * </bcm-basic-badge>
+     * @example Dot variant
+     * <bcm-basic-badge variant="dot" color="success" />
+     */
+    interface BcmBasicBadge {
+        /**
+          * Defines the color of the badge. Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
+          * @type {string}
+          * @optional
+         */
+        "color"?: string;
+        /**
+          * Determines the size of the badge.
+          * @type {'small' | 'medium' | 'large'}
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Enables soft color mode for the badge. When true, uses lighter tones and pastel colors.
+          * @type {boolean}
+          * @default false
+         */
+        "soft"?: boolean;
+        /**
+          * Text to be displayed inside the badge. Used when variant is set to 'text'.
+          * @type {string}
+          * @optional
+         */
+        "text"?: string;
+        /**
+          * Sets the visual variant of the badge. 'dot': Appears as a small dot indicator 'text': Displays content as text
+          * @type {'dot' | 'text'}
+          * @default 'text'
+         */
+        "variant"?: 'dot' | 'text';
+    }
     interface BcmButton {
         /**
           * Active state
@@ -1090,6 +1547,36 @@ declare namespace LocalJSX {
          */
         "status"?: ChipStatus;
     }
+    /**
+     * @component BCM Divider
+     * @description A versatile divider component that creates a visual separation between content.
+     * It supports horizontal or vertical orientation with customizable styles and sizes.
+     * The component uses CSS variables for theming and Tailwind for styling.
+     */
+    interface BcmDivider {
+        /**
+          * @prop {('horizontal'|'vertical')} direction
+          * @description Determines the orientation of the divider
+          * @default 'horizontal'
+          * @example <bcm-divider direction="vertical" />
+         */
+        "direction"?: 'horizontal' | 'vertical';
+        /**
+          * @prop {('small'|'medium'|'large')} size
+          * @description Controls the thickness of the divider
+          * @default 'medium'
+          * @values - small: 1px border - medium: 2px border - large: 4px border
+          * @example <bcm-divider size="large" />
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * @prop {('solid'|'dashed'|'dotted')} variant
+          * @description Sets the border style of the divider
+          * @default 'solid'
+          * @example <bcm-divider variant="dashed" />
+         */
+        "variant"?: 'solid' | 'dashed' | 'dotted';
+    }
     interface BcmInput {
         /**
           * Input id
@@ -1193,6 +1680,14 @@ declare namespace LocalJSX {
           * HTML input type
          */
         "type"?: InputType;
+        /**
+          * Whether to use native form validation If false, component will handle validation internally
+         */
+        "useNativeValidation"?: boolean;
+        /**
+          * Custom validation function
+         */
+        "validator"?: (value: string) => string | undefined;
         /**
           * Input value
          */
@@ -1212,15 +1707,127 @@ declare namespace LocalJSX {
          */
         "variant"?: TextVariant;
     }
+    interface BcmTextarea {
+        /**
+          * Input id
+         */
+        "_id"?: string;
+        /**
+          * Auto grow height based on content
+         */
+        "autoGrow"?: boolean;
+        /**
+          * Caption text to display below textarea
+         */
+        "captionText"?: string;
+        /**
+          * Textarea cols
+         */
+        "cols"?: number;
+        /**
+          * ID of associated caption/error text element
+         */
+        "describedby"?: string;
+        /**
+          * Whether the textarea is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * Error message to display
+         */
+        "errorMessage"?: string;
+        /**
+          * Full width textarea
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Textarea label for accessibility
+         */
+        "label"?: string;
+        /**
+          * ID of associated label element
+         */
+        "labelledby"?: string;
+        /**
+          * Max length for text input
+         */
+        "maxLength"?: number;
+        /**
+          * Maximum height in rows
+         */
+        "maxRows"?: number;
+        /**
+          * Min length for text input
+         */
+        "minLength"?: number;
+        /**
+          * Minimum height in rows
+         */
+        "minRows"?: number;
+        /**
+          * Input name
+         */
+        "name"?: string;
+        "onBcmBlur"?: (event: BcmTextareaCustomEvent<FocusEvent>) => void;
+        "onBcmChange"?: (event: BcmTextareaCustomEvent<Event>) => void;
+        "onBcmFocus"?: (event: BcmTextareaCustomEvent<FocusEvent>) => void;
+        "onBcmInput"?: (event: BcmTextareaCustomEvent<InputEvent>) => void;
+        "onBcmKeyDown"?: (event: BcmTextareaCustomEvent<KeyboardEvent>) => void;
+        "onBcmKeyUp"?: (event: BcmTextareaCustomEvent<KeyboardEvent>) => void;
+        /**
+          * Input placeholder text
+         */
+        "placeholder"?: string;
+        /**
+          * Whether the textarea is readonly
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the textarea is required
+         */
+        "required"?: boolean;
+        /**
+          * Resize behavior
+         */
+        "resize"?: TextareaResize;
+        /**
+          * Textarea rows
+         */
+        "rows"?: number;
+        /**
+          * Show character counter
+         */
+        "showCounter"?: boolean;
+        /**
+          * Controls the textarea size
+         */
+        "size"?: InputSize1;
+        /**
+          * Defines the textarea's status/state
+         */
+        "status"?: InputStatus1;
+        /**
+          * Custom validation function
+         */
+        "validator"?: (value: string) => string | undefined;
+        /**
+          * Textarea value
+         */
+        "value"?: string;
+    }
     interface IntrinsicElements {
         "bcm-accordion": BcmAccordion;
         "bcm-accordion-group": BcmAccordionGroup;
         "bcm-alert": BcmAlert;
         "bcm-avatar": BcmAvatar;
+        "bcm-badge": BcmBadge;
+        "bcm-basic-badge": BcmBasicBadge;
         "bcm-button": BcmButton;
         "bcm-chip": BcmChip;
+        "bcm-divider": BcmDivider;
         "bcm-input": BcmInput;
         "bcm-text": BcmText;
+        "bcm-textarea": BcmTextarea;
     }
 }
 export { LocalJSX as JSX };
@@ -1332,6 +1939,34 @@ declare module "@stencil/core" {
              */
             "bcm-alert": LocalJSX.BcmAlert & JSXBase.HTMLAttributes<HTMLBcmAlertElement>;
             "bcm-avatar": LocalJSX.BcmAvatar & JSXBase.HTMLAttributes<HTMLBcmAvatarElement>;
+            /**
+             * @component BcmBadge
+             * @description A versatile badge component that can be positioned around its container.
+             * Supports different sizes, variants (dot/text), colors, and positioning options.
+             * Can display status indicators with optional blinking animation.
+             * @example Basic usage
+             * <bcm-badge color="primary" position="top-right">
+             * <div>Container Content</div>
+             * <span slot="badge">New</span>
+             * </bcm-badge>
+             * @example Status indicator with blink
+             * <bcm-badge variant="dot" color="success" blink={true} status="Online">
+             * <div>User Profile</div>
+             * </bcm-badge>
+             */
+            "bcm-badge": LocalJSX.BcmBadge & JSXBase.HTMLAttributes<HTMLBcmBadgeElement>;
+            /**
+             * @component BcmBasicBadge
+             * @description A basic badge component that can be used as a status indicator or to highlight content.
+             * Supports dot and text variants with different sizes and color options.
+             * @example Basic usage
+             * <bcm-basic-badge size="medium" color="primary">
+             * New
+             * </bcm-basic-badge>
+             * @example Dot variant
+             * <bcm-basic-badge variant="dot" color="success" />
+             */
+            "bcm-basic-badge": LocalJSX.BcmBasicBadge & JSXBase.HTMLAttributes<HTMLBcmBasicBadgeElement>;
             "bcm-button": LocalJSX.BcmButton & JSXBase.HTMLAttributes<HTMLBcmButtonElement>;
             /**
              * @component BcmChip
@@ -1355,8 +1990,16 @@ declare module "@stencil/core" {
              * @csspart dismiss-icon - The dismiss button icon
              */
             "bcm-chip": LocalJSX.BcmChip & JSXBase.HTMLAttributes<HTMLBcmChipElement>;
+            /**
+             * @component BCM Divider
+             * @description A versatile divider component that creates a visual separation between content.
+             * It supports horizontal or vertical orientation with customizable styles and sizes.
+             * The component uses CSS variables for theming and Tailwind for styling.
+             */
+            "bcm-divider": LocalJSX.BcmDivider & JSXBase.HTMLAttributes<HTMLBcmDividerElement>;
             "bcm-input": LocalJSX.BcmInput & JSXBase.HTMLAttributes<HTMLBcmInputElement>;
             "bcm-text": LocalJSX.BcmText & JSXBase.HTMLAttributes<HTMLBcmTextElement>;
+            "bcm-textarea": LocalJSX.BcmTextarea & JSXBase.HTMLAttributes<HTMLBcmTextareaElement>;
         }
     }
 }