ngx-strata 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-strata",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A simple UI framework for quickly prototyping angular applications with a bit of flair.",
   "license": "MIT",
   "peerDependencies": {

package/skills/ngx-strata/SKILL.md

@@ -89,7 +89,7 @@ for each component are stored in separate files.
 
 - **Accordion** (`st-accordion-group`): Read
   [`components/accordion.md`](components/accordion.md)
-- **Action-menu** (`st-action-menu`): Read
+- **Action-menu** (`st-action-menu`, `[stContextMenu]`): Read
   [`components/action-menu.md`](components/action-menu.md)
 - **Alert** (`st-alert`): Read [`components/alert.md`](components/alert.md)
 - **Avatar** (`st-avatar`): Read [`components/avatar.md`](components/avatar.md)
@@ -99,6 +99,8 @@ for each component are stored in separate files.
 - **Button** (`[stButton]`): Read [`components/button.md`](components/button.md)
 - **Calendar** (`st-calendar`): Read [`components/calendar.md`](components/calendar.md)
 - **Card** (`st-card`): Read [`components/card.md`](components/card.md)
+- **Chat** (`st-chat`, `st-chat-message`, `st-chat-group`, `st-chat-separator`, `st-chat-typing`): Read
+  [`components/chat.md`](components/chat.md)
 - **Checkbox** (`st-checkbox`): Read
   [`components/checkbox.md`](components/checkbox.md)
 - **Datepicker** (`st-datepicker`): Read [`components/datepicker.md`](components/datepicker.md)
@@ -152,6 +154,8 @@ for each component are stored in separate files.
   [`components/text-stack.md`](components/text-stack.md)
 - **Theming** (`[stTheme]`): Read
   [`components/theming.md`](components/theming.md)
-- **Time-picker** (`st-time-picker`): Read
-  [`components/time-picker.md`](components/time-picker.md)
+- **Timepicker** (`st-timepicker`): Read
+  [`components/timepicker.md`](components/timepicker.md)
+- **Time-stepper** (`st-time-stepper`): Read
+  [`components/time-stepper.md`](components/time-stepper.md)
 - **Toggle** (`st-toggle`): Read [`components/toggle.md`](components/toggle.md)

package/skills/ngx-strata/components/action-menu.md

@@ -6,9 +6,15 @@ This file contains the AI documentation for the `action-menu` feature and its re
 - **Selector**: `st-action-menu`
 - **Imports**: `StrataActionMenuComponent`
 - **Inputs**:
-  - `[placement] (Placement)`
-  - `[buttonSize] (ButtonSize)`
-  - `[closeOnOutsideClick] (boolean)`
+  - `[placement] (Placement)`: Defaults to `'bottom-end'`.
+  - `[buttonSize] (ButtonSize)`: Defaults to `'md'`.
+  - `[closeOnOutsideClick] (boolean)`: Defaults to `true`.
+  - `[trigger] (boolean)`: Defaults to `true`. When `false`, the button trigger is not rendered (useful for context-only menus).
+- **Methods**:
+  - `open()`: Opens the action menu.
+  - `close()`: Closes the action menu.
+  - `toggle()`: Toggles the action menu state.
+  - `openAt(position: { x: number; y: number } | MouseEvent | PointerEvent, placement?: Placement)`: Opens the menu at mouse/virtual element coordinates.
 
 ## ActionMenuItem (`<st-action-menu-item>`)
 - **Selector**: `st-action-menu-item`
@@ -19,6 +25,16 @@ This file contains the AI documentation for the `action-menu` feature and its re
 - **Outputs**:
   - `(menuItemClicked)`
 
+## ContextMenu Directive (`[stContextMenu]`)
+- **Selector**: `[stContextMenu]`
+- **Imports**: `StrataContextMenuDirective`
+- **Inputs**:
+  - `[stContextMenu] (StrataActionMenuComponent)`: The target action menu to open on right-click.
+  - `[stContextMenuDisabled] (boolean)`: Disables context menu behavior (allows native browser context menu).
+  - `[stContextMenuPlacement] (Placement)`: Placement of menu relative to cursor (defaults to `'bottom-start'`).
+- **Outputs**:
+  - `(contextMenuOpened)`: Emitted with `MouseEvent` when the context menu opens.
+
 ## Usage Example
 
 ```html
@@ -42,6 +58,22 @@ This file contains the AI documentation for the `action-menu` feature and its re
     Export
   </st-action-menu-item>
 </st-action-menu>
+
+<!-- Context Menu Trigger on Element -->
+<div [stContextMenu]="contextMenu" class="right-click-zone">
+  Right-click here to view actions
+</div>
+
+<st-action-menu #contextMenu [trigger]="false">
+  <st-action-menu-item (menuItemClicked)="copy()">
+    <st-icon name="copy" area="start"></st-icon>
+    Copy
+  </st-action-menu-item>
+  <st-action-menu-item (menuItemClicked)="delete()">
+    <st-icon name="trash" area="start"></st-icon>
+    Delete
+  </st-action-menu-item>
+</st-action-menu>
 ```
 
 

package/skills/ngx-strata/components/chat.md

@@ -0,0 +1,100 @@
+# ngx-strata: chat Feature
+
+This file contains the AI documentation for the `chat` feature suite and its components.
+
+## Chat (`<st-chat>`)
+Flex container providing message flow direction and spacing scale.
+
+- **Selector**: `st-chat`
+- **Imports**: `StrataChatComponent`
+- **Inputs**:
+  - `[spacing] (ChatSpacing)`: `'comfortable' | 'compact'` (default: `'comfortable'`)
+
+## Chat Message (`<st-chat-message>`)
+Individual message bubble supporting sender variants, timestamps, status ticks, and media attachments.
+
+- **Selector**: `st-chat-message`
+- **Imports**: `StrataChatMessageComponent`
+- **Inputs**:
+  - `[variant] (ChatMessageVariant)`: `'incoming' | 'outgoing'` (default: `'incoming'`)
+  - `[timestamp] (string | null)`: Timestamp text displayed below message (default: `null`)
+  - `[status] (ChatMessageStatus | null)`: Status indicator for outgoing messages: `'sent' | 'delivered' | 'read'` (default: `null`)
+  - `[showAvatar] (boolean)`: Whether projected avatar is visible. Supports boolean attribute (default: `true`)
+  - `[position] ('single' | 'first' | 'middle' | 'last')`: Positional curvature. Automatically handled inside `st-chat-group` (default: `'single'`)
+- **Content Slots**:
+  - Default: Text body of the message
+  - `[slot="avatar"]`: User avatar element (`<st-avatar>`)
+  - `[slot="media"]`: Image or media preview element (`<img>`, `<video>`)
+  - `[slot="footer"]`: Custom footer overriding default timestamp/status layout
+
+## Chat Group (`<st-chat-group>`)
+Groups consecutive messages from the same sender, collapsing adjacent border radii and showing the avatar only on the final message.
+
+- **Selector**: `st-chat-group`
+- **Imports**: `StrataChatGroupComponent`
+- **Inputs**:
+  - `[variant] (ChatMessageVariant)`: `'incoming' | 'outgoing'` (default: `'incoming'`)
+
+## Chat Separator (`<st-chat-separator>`)
+Decorative divider for date marks and system status messages.
+
+- **Selector**: `st-chat-separator`
+- **Imports**: `StrataChatSeparatorComponent`
+- **Content Slots**:
+  - Default: Centered label (e.g. date or system message)
+
+## Chat Typing Indicator (`<st-chat-typing>`)
+Animated three-dot bubble indicator representing active typing.
+
+- **Selector**: `st-chat-typing`
+- **Imports**: `StrataChatTypingComponent`
+- **Inputs**:
+  - `[variant] (ChatMessageVariant)`: `'incoming' | 'outgoing'` (default: `'incoming'`)
+  - `[ariaLabel] (string)`: Accessible label for screen readers (default: `'Typing'`)
+- **Content Slots**:
+  - `[slot="avatar"]`: Optional avatar element (`<st-avatar>`)
+
+---
+
+## Usage Examples
+
+### Basic Conversation
+```html
+<st-chat spacing="comfortable">
+  <st-chat-separator>Today</st-chat-separator>
+
+  <st-chat-message variant="incoming" timestamp="10:14">
+    <st-avatar slot="avatar" size="sm" text="JD" />
+    Hi, is the report ready?
+  </st-chat-message>
+
+  <st-chat-message variant="outgoing" timestamp="10:15" status="read">
+    Yes, just sending it over now!
+  </st-chat-message>
+</st-chat>
+```
+
+### Grouped Messages
+```html
+<st-chat>
+  <st-chat-group variant="incoming">
+    <st-chat-message timestamp="14:20">First point</st-chat-message>
+    <st-chat-message timestamp="14:20">Second point</st-chat-message>
+    <st-chat-message timestamp="14:21">
+      <st-avatar slot="avatar" size="sm" text="AL" />
+      Final point with avatar
+    </st-chat-message>
+  </st-chat-group>
+</st-chat>
+```
+
+### Media Attachment
+```html
+<st-chat>
+  <st-chat-message variant="incoming" timestamp="16:00">
+    <st-avatar slot="avatar" size="sm" text="AL" />
+    <img slot="media" src="/path/to/image.png" alt="Screenshot" />
+    Here is the requested screenshot.
+  </st-chat-message>
+</st-chat>
+```

package/skills/ngx-strata/components/file-upload.md

@@ -39,6 +39,9 @@ The File Upload component provides a stylish, accessible dropzone for selecting
 | `disabled` | `input<boolean>` | `false` | Disable interactions |
 | `label` | `input<string>` | `'Choose a file or drag & drop it here'` | Primary prompt text |
 | `hint` | `input<string \| undefined>` | `undefined` | Secondary help text |
+| `camera` | `input<boolean \| undefined>` | `undefined` | Tri-state flag: `undefined` auto-enables camera button for image uploads, `false` disables it, `true` forces it |
+| `choosePhotoLabel` | `input<string>` | `'Choose Photo'` | Accessible text label for the gallery/browse button |
+| `takePhotoLabel` | `input<string>` | `'Take Photo'` | Accessible text label for the camera button |
 
 ### Outputs
 
@@ -50,5 +53,6 @@ The File Upload component provides a stylish, accessible dropzone for selecting
 
 ### Methods
 
-- `browse()`: Opens the system file selection dialog.
+- `browse(event?: Event)`: Opens the system file selection dialog.
+- `browseCamera(event?: Event)`: Opens the native camera directly via `capture="environment"`.
 - `clear()`: Clears the native input value.

package/skills/ngx-strata/components/icon.md

@@ -21,6 +21,6 @@ This file contains the AI documentation for the `icon` feature and its related c
 ```
 
 > **CRITICAL RULE FOR AI AGENTS regarding Icons:**
-> NEVER guess an icon name. Before using an `<st-icon>`, you MUST verify that the icon is registered in the host application (usually located in `src/app/shared/icon.config.ts`). Alternatively, you may use one of the **ngx-strata Base Icons**: <!-- BASE_ICONS_START -->`question`, `arrow-right`, `arrow-left`, `arrow-up`, `arrow-down`, `close`, `expand-up-down`, `clipboard`, `more`, `check`, or `calendar`<!-- BASE_ICONS_END -->. If the icon you want to use is NOT registered, you must STOP and ask the user to add it.
+> NEVER guess an icon name. Before using an `<st-icon>`, you MUST verify that the icon is registered in the host application (usually located in `src/app/shared/icon.config.ts`). Alternatively, you may use one of the **ngx-strata Base Icons**: <!-- BASE_ICONS_START -->`question`, `arrow-right`, `arrow-left`, `arrow-up`, `arrow-down`, `close`, `expand-up-down`, `clipboard`, `more`, `check`, `calendar`, `clock`, `upload`, `camera`, `image`, `check-single`, or `check-double`<!-- BASE_ICONS_END -->. If the icon you want to use is NOT registered, you must STOP and ask the user to add it.
 
 > **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Use modern Angular Signals (input(), input.required(), and output()) for all data/event bindings. Do not use legacy @Input() or @Output() decorators.

package/skills/ngx-strata/components/time-stepper.md

@@ -0,0 +1,46 @@
+# ngx-strata: time-stepper Feature
+
+This file contains the AI documentation for the `st-time-stepper` inline component.
+
+## Time Stepper Component (`<st-time-stepper>`)
+The embedded/inline column stepper widget for selecting hours, minutes, and seconds. Ideal for embedding directly into cards, modals, or custom layouts.
+
+- **Selector**: `st-time-stepper`
+- **Imports**: `StrataTimeStepperComponent`
+- **Inputs & Models**:
+  - `[(value)] (string | Date | null)`: Two-way Signal model for time value (e.g., `'14:30'`, `'14:30:00'`, or a `Date` instance).
+  - `[format] ('12h' | '24h')`: Time notation format. Defaults to `'24h'`.
+  - `[showSeconds] (boolean)`: Whether seconds column is visible. Defaults to `false`.
+  - `[minuteStep] (number)`: Step interval for incrementing/decrementing minutes. Defaults to `1`.
+  - `[disabled] (boolean)`: Disables the time stepper controls.
+
+## Forms Integration
+`StrataTimeStepperComponent` implements `ControlValueAccessor` and seamlessly supports both `[(ngModel)]` and Reactive Forms (`formControlName` / `[formControl]`).
+
+## Usage Examples
+
+### 1. 24-Hour Time Stepper
+```html
+<st-time-stepper
+  [(value)]="selectedTime"
+  [minuteStep]="5"
+/>
+```
+
+### 2. Embedded in a Card
+```html
+<st-card>
+  <st-time-stepper [(value)]="alarmTime" />
+</st-card>
+```
+
+### 3. 12-Hour Format with Seconds
+```html
+<st-time-stepper
+  [(value)]="appointmentTime"
+  format="12h"
+  [showSeconds]="true"
+/>
+```
+
+> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Use modern Angular Signals (input(), input.required(), model(), and output()) for all data/event bindings. Do not use legacy @Input() or @Output() decorators.

package/skills/ngx-strata/components/timepicker.md

@@ -0,0 +1,60 @@
+# ngx-strata: timepicker Feature
+
+This file contains the AI documentation for the `st-timepicker` form control component.
+
+## Time Picker Form Control (`<st-timepicker>`)
+A standalone form input component equipped with an input box, clock trigger icon, and dropdown overlay hosting the time selection controls.
+
+- **Selector**: `st-timepicker`
+- **Imports**: `StrataTimepickerComponent`
+- **Inputs & Models**:
+  - `[(value)] (string | Date | null)`: Two-way Signal model for time value (e.g., `'14:30'`, `'14:30:00'`, or a `Date` instance).
+  - `[label] (string | undefined)`: Label text rendered above the input.
+  - `[placeholder] (string)`: Input placeholder text. Defaults to `'Select time'`.
+  - `[format] ('12h' | '24h')`: Display format and parsing mode. Defaults to `'24h'`.
+  - `[size] ('sm' | 'md' | 'lg')`: Visual control size. Defaults to `'md'`.
+  - `[showSeconds] (boolean)`: Whether to include seconds in display and dropdown. Defaults to `false`.
+  - `[minuteStep] (number)`: Step interval for minutes. Defaults to `1`.
+  - `[clearable] (boolean)`: Shows clear button when a value is selected. Defaults to `true`.
+  - `[disabled] (boolean)`: Disables the form control. Defaults to `false`.
+  - `[readonly] (boolean)`: Read-only mode. Defaults to `false`.
+  - `[fullWidth] (boolean)`: Expands control to full container width. Defaults to `false`.
+  - `[state] ('default' | 'error' | 'success' | 'warning')`: Feedback validation state.
+  - `[message] (string | undefined)`: Helper/validation message below the input.
+  - `(timeSelected)`: Emitted when time value changes.
+
+## Forms Integration
+`StrataTimepickerComponent` implements `ControlValueAccessor` and seamlessly supports both `[(ngModel)]` and Reactive Forms (`formControlName` / `[formControl]`).
+
+## Usage Examples
+
+### 1. Basic 24-Hour Timepicker
+```html
+<st-timepicker
+  label="Departure Time"
+  placeholder="Select departure time"
+  [(value)]="departureTime"
+/>
+```
+
+### 2. 12-Hour AM/PM Timepicker with Seconds
+```html
+<st-timepicker
+  label="Appointment Time"
+  [(value)]="appointmentTime"
+  format="12h"
+  [showSeconds]="true"
+/>
+```
+
+### 3. Step Intervals and Size
+```html
+<st-timepicker
+  size="sm"
+  label="Meeting Slot"
+  [minuteStep]="15"
+  [(value)]="meetingSlot"
+/>
+```
+
+> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Use modern Angular Signals (input(), input.required(), model(), and output()) for all data/event bindings. Do not use legacy @Input() or @Output() decorators.

package/types/ngx-strata.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, OnDestroy, AfterContentInit, EnvironmentProviders, InjectionToken, Provider, PipeTransform, ElementRef, OnChanges, TemplateRef, Renderer2, AfterViewInit, AfterContentChecked, SimpleChanges, Type, ViewContainerRef, QueryList, OutputEmitterRef } from '@angular/core';
-import { Placement } from '@floating-ui/dom';
+import { Placement, ReferenceElement } from '@floating-ui/dom';
 import * as _angular_platform_browser from '@angular/platform-browser';
 import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
 import { ControlValueAccessor } from '@angular/forms';
@@ -263,6 +263,7 @@ declare class StrataOverlayDirective implements OnChanges, OnDestroy {
     overlayPlacement: _angular_core.InputSignal<Placement>;
     overlayOffset: _angular_core.InputSignal<number>;
     overlayFitViewport: _angular_core.InputSignal<boolean>;
+    overlayTarget: _angular_core.InputSignal<ReferenceElement | null>;
     private readonly element;
     private readonly viewContainerRef;
     private readonly config;
@@ -270,13 +271,14 @@ declare class StrataOverlayDirective implements OnChanges, OnDestroy {
     private cleanup?;
     private viewRef?;
     ngOnChanges(): void;
+    private getTarget;
     private create;
     private updatePosition;
     private destroy;
     getOverlayElement(): HTMLElement | undefined;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataOverlayDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrataOverlayDirective, "[stOverlay]", never, { "stOverlay": { "alias": "stOverlay"; "required": true; "isSignal": true; }; "overlayOpen": { "alias": "overlayOpen"; "required": false; "isSignal": true; }; "overlayPlacement": { "alias": "overlayPlacement"; "required": false; "isSignal": true; }; "overlayOffset": { "alias": "overlayOffset"; "required": false; "isSignal": true; }; "overlayFitViewport": { "alias": "overlayFitViewport"; "required": false; "isSignal": true; }; }, { "overlayOpen": "overlayOpenChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrataOverlayDirective, "[stOverlay]", never, { "stOverlay": { "alias": "stOverlay"; "required": true; "isSignal": true; }; "overlayOpen": { "alias": "overlayOpen"; "required": false; "isSignal": true; }; "overlayPlacement": { "alias": "overlayPlacement"; "required": false; "isSignal": true; }; "overlayOffset": { "alias": "overlayOffset"; "required": false; "isSignal": true; }; "overlayFitViewport": { "alias": "overlayFitViewport"; "required": false; "isSignal": true; }; "overlayTarget": { "alias": "overlayTarget"; "required": false; "isSignal": true; }; }, { "overlayOpen": "overlayOpenChange"; }, never, never, true, never>;
 }
 
 declare class StrataActionMenuComponent {
@@ -287,12 +289,37 @@ declare class StrataActionMenuComponent {
     placement: _angular_core.InputSignal<Placement>;
     buttonSize: _angular_core.InputSignal<ButtonSize>;
     closeOnOutsideClick: _angular_core.InputSignal<boolean>;
+    trigger: _angular_core.InputSignal<boolean>;
     elementRef: ElementRef<HTMLElement>;
     renderer: Renderer2;
     menuOpen: _angular_core.WritableSignal<boolean>;
+    customTarget: _angular_core.WritableSignal<ReferenceElement | null>;
+    contextMenuPlacement: _angular_core.WritableSignal<Placement | null>;
+    effectivePlacement: _angular_core.Signal<Placement>;
     constructor();
+    open(): void;
+    close(): void;
+    toggle(): void;
+    openAt(position: {
+        x: number;
+        y: number;
+    } | MouseEvent | PointerEvent, placement?: Placement): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataActionMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataActionMenuComponent, "st-action-menu", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "buttonSize": { "alias": "buttonSize"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; }, {}, ["projectedButton", "actionMenuItems"], ["button[stButton]", "st-action-menu-item"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataActionMenuComponent, "st-action-menu", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "buttonSize": { "alias": "buttonSize"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; }, {}, ["projectedButton", "actionMenuItems"], ["button[stButton]", "st-action-menu-item"], true, never>;
+}
+
+declare class StrataContextMenuDirective implements OnInit, OnDestroy {
+    stContextMenu: _angular_core.InputSignal<StrataActionMenuComponent | null | undefined>;
+    stContextMenuDisabled: _angular_core.InputSignal<boolean>;
+    stContextMenuPlacement: _angular_core.InputSignal<Placement>;
+    contextMenuOpened: _angular_core.OutputEmitterRef<MouseEvent>;
+    private readonly elementRef;
+    private readonly renderer;
+    private unlisten?;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataContextMenuDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrataContextMenuDirective, "[stContextMenu]", never, { "stContextMenu": { "alias": "stContextMenu"; "required": true; "isSignal": true; }; "stContextMenuDisabled": { "alias": "stContextMenuDisabled"; "required": false; "isSignal": true; }; "stContextMenuPlacement": { "alias": "stContextMenuPlacement"; "required": false; "isSignal": true; }; }, { "contextMenuOpened": "contextMenuOpened"; }, never, never, true, never>;
 }
 
 declare class StrataAlertComponent {
@@ -446,6 +473,58 @@ declare class StrataCheckboxComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataCheckboxComponent, "st-checkbox", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
+type ChatMessageVariant = 'incoming' | 'outgoing';
+type ChatMessageStatus = 'sent' | 'delivered' | 'read';
+type ChatSpacing = 'compact' | 'comfortable';
+
+declare class StrataChatComponent {
+    spacing: _angular_core.InputSignal<ChatSpacing>;
+    hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataChatComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataChatComponent, "st-chat", never, { "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class StrataChatMessageComponent {
+    variant: _angular_core.InputSignal<ChatMessageVariant>;
+    timestamp: _angular_core.InputSignal<string | null>;
+    status: _angular_core.InputSignal<ChatMessageStatus | null>;
+    showAvatar: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    position: _angular_core.InputSignal<"single" | "first" | "middle" | "last">;
+    groupVariant: _angular_core.WritableSignal<ChatMessageVariant | null>;
+    groupPosition: _angular_core.WritableSignal<"single" | "first" | "middle" | "last" | null>;
+    groupShowAvatar: _angular_core.WritableSignal<boolean | null>;
+    groupPreserveAvatarSpace: _angular_core.WritableSignal<boolean>;
+    effectiveVariant: _angular_core.Signal<ChatMessageVariant>;
+    effectivePosition: _angular_core.Signal<"single" | "first" | "middle" | "last">;
+    effectiveShowAvatar: _angular_core.Signal<boolean>;
+    hostClasses: _angular_core.Signal<string>;
+    setGroupConfig(variant: ChatMessageVariant, position: 'single' | 'first' | 'middle' | 'last', showAvatar: boolean, preserveAvatarSpace: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataChatMessageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataChatMessageComponent, "st-chat-message", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "showAvatar": { "alias": "showAvatar"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=avatar]", "[slot=media]", "*", "[slot=footer]", "[slot=avatar]"], true, never>;
+}
+
+declare class StrataChatGroupComponent {
+    variant: _angular_core.InputSignal<ChatMessageVariant>;
+    messages: _angular_core.Signal<readonly StrataChatMessageComponent[]>;
+    hostClasses: _angular_core.Signal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataChatGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataChatGroupComponent, "st-chat-group", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, ["messages"], ["*"], true, never>;
+}
+
+declare class StrataChatSeparatorComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataChatSeparatorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataChatSeparatorComponent, "st-chat-separator", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class StrataChatTypingComponent {
+    variant: _angular_core.InputSignal<ChatMessageVariant>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataChatTypingComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataChatTypingComponent, "st-chat-typing", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=avatar]", "[slot=avatar]"], true, never>;
+}
+
 type CalendarSize = 'sm' | 'md';
 type DatePickerSize = 'sm' | 'md' | 'lg';
 type CalendarMode = 'single' | 'range';
@@ -472,7 +551,7 @@ interface DateRangePreset {
     };
 }
 
-declare class StrataTimePickerComponent implements ControlValueAccessor {
+declare class StrataTimeStepperComponent implements ControlValueAccessor {
     format: _angular_core.InputSignal<TimeFormat>;
     showSeconds: _angular_core.InputSignal<boolean>;
     minuteStep: _angular_core.InputSignal<number>;
@@ -508,8 +587,61 @@ declare class StrataTimePickerComponent implements ControlValueAccessor {
     registerOnChange(fn: (val: string | Date | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataTimePickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataTimePickerComponent, "st-time-picker", never, { "format": { "alias": "format"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataTimeStepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataTimeStepperComponent, "st-time-stepper", never, { "format": { "alias": "format"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+declare class StrataTimepickerComponent implements ControlValueAccessor {
+    private readonly defaultId;
+    label: _angular_core.InputSignal<string | undefined>;
+    id: _angular_core.InputSignal<string | undefined>;
+    name: _angular_core.InputSignal<string | undefined>;
+    placeholder: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<DatePickerSize>;
+    placement: _angular_core.InputSignal<Placement>;
+    format: _angular_core.InputSignal<TimeFormat>;
+    showSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    minuteStep: _angular_core.InputSignal<number>;
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    state: _angular_core.InputSignal<InputControlState | undefined>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    message: _angular_core.InputSignal<string | undefined>;
+    colorMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    value: _angular_core.ModelSignal<string | Date | null>;
+    timeSelected: _angular_core.OutputEmitterRef<string | Date | null>;
+    open: _angular_core.WritableSignal<boolean>;
+    textInputValue: _angular_core.WritableSignal<string>;
+    private cvaDisabled;
+    effectiveDisabled: _angular_core.Signal<boolean>;
+    effectiveId: _angular_core.Signal<string>;
+    readonly effectiveState: _angular_core.Signal<InputControlState>;
+    readonly isMessageError: _angular_core.Signal<boolean>;
+    readonly isMessageSuccess: _angular_core.Signal<boolean>;
+    readonly isMessageWarning: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    private overlayDirective;
+    private elementRef;
+    private renderer;
+    private destroyRef;
+    constructor();
+    toggle(event?: Event): void;
+    onInputTextChange(value: string): void;
+    onInputBlur(): void;
+    onStepperTimeSelected(val: string | Date | null): void;
+    clear(event: Event): void;
+    private formatTimeValue;
+    private parseTimeString;
+    private updateTimeValue;
+    writeValue(val: string | Date | null): void;
+    registerOnChange(fn: (val: string | Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataTimepickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataTimepickerComponent, "st-timepicker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "timeSelected": "timeSelected"; }, never, never, true, never>;
 }
 
 interface DateRange {
@@ -729,12 +861,16 @@ declare class StrataDividerComponent {
 
 declare class StrataFileUploadComponent {
     fileInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    cameraInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     accept: _angular_core.InputSignal<string>;
     multiple: _angular_core.InputSignal<boolean>;
     maxFileSize: _angular_core.InputSignal<number | undefined>;
     disabled: _angular_core.InputSignal<boolean>;
     label: _angular_core.InputSignal<string>;
     hint: _angular_core.InputSignal<string | undefined>;
+    camera: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    choosePhotoLabel: _angular_core.InputSignal<string>;
+    takePhotoLabel: _angular_core.InputSignal<string>;
     state: _angular_core.InputSignal<InputControlState | undefined>;
     error: _angular_core.InputSignalWithTransform<boolean, unknown>;
     message: _angular_core.InputSignal<string | undefined>;
@@ -744,6 +880,8 @@ declare class StrataFileUploadComponent {
     readonly isMessageError: _angular_core.Signal<boolean>;
     readonly isMessageSuccess: _angular_core.Signal<boolean>;
     readonly isMessageWarning: _angular_core.Signal<boolean>;
+    readonly isImageAccept: _angular_core.Signal<boolean>;
+    readonly showCamera: _angular_core.Signal<boolean>;
     fileSelect: _angular_core.OutputEmitterRef<File>;
     filesSelect: _angular_core.OutputEmitterRef<File[]>;
     fileRejected: _angular_core.OutputEmitterRef<{
@@ -765,12 +903,13 @@ declare class StrataFileUploadComponent {
     onDragLeave(event: DragEvent): void;
     onDrop(event: DragEvent): void;
     onFileChange(event: Event): void;
-    browse(): void;
+    browse(event?: Event): void;
+    browseCamera(event?: Event): void;
     clear(): void;
     private processFiles;
     private matchesAccept;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataFileUploadComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataFileUploadComponent, "st-file-upload", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "fileSelect": "fileSelect"; "filesSelect": "filesSelect"; "fileRejected": "fileRejected"; }, never, ["[uploadIcon]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataFileUploadComponent, "st-file-upload", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "camera": { "alias": "camera"; "required": false; "isSignal": true; }; "choosePhotoLabel": { "alias": "choosePhotoLabel"; "required": false; "isSignal": true; }; "takePhotoLabel": { "alias": "takePhotoLabel"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "fileSelect": "fileSelect"; "filesSelect": "filesSelect"; "fileRejected": "fileRejected"; }, never, ["[uploadIcon]", "*"], true, never>;
 }
 
 declare abstract class IconLoader {
@@ -1822,5 +1961,5 @@ declare class StrataToggleComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataToggleComponent, "st-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, [{ directive: typeof StrataActivatableDirective; inputs: { "disabled": "disabled"; }; outputs: { "activated": "activated"; }; }]>;
 }
 
-export { BreakpointService, CapitalizePipe, DEFAULT_DATE_RANGE_PRESETS, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DeviceService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCalendarComponent, StrataCardComponent, StrataCheckboxComponent, StrataDatePickerComponent, StrataDateRangePickerComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalBodyComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataNumberStepperComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSkeletonComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataTimePickerComponent, StrataToggleComponent, StrataTooltipDirective, addDays, addMonths, addYears, createCalendarGrid, disableDateRange, disableDaysOfWeek, disableFutureDates, disablePastDates, disableWeekends, endOfDay, endOfMonth, formatDate, formatMonthTitle, getDayOfWeek, getDaysInMonth, getDefaultShortcutLabels, getLocaleDefaultDateFormat, getMonthNames, getWeekdayNames, isAfterDay, isApplePlatform, isBeforeDay, isSameDay, isSameMonth, isSameYear, isWeekend, isWithinDayRange, parseDate, provideBaseIcons, provideIcons, provideStrata, resolveIsApple, startOfDay, startOfMonth };
-export type { AccordionVariant, AlertConfiguration, AvatarSize, AvatarStackSpacing, AvatarVariant, BadgePlacement, BadgeSize, BadgeVariant, ButtonGroupJustification, ButtonSize, ButtonVariant, CalendarDayCell, CalendarMode, CalendarSize, CalendarView, CardVariant, CropPosition, CropResult, CropShape, CurrentDarkmode, DarkmodeSetting, DatePickerSize, DateRange, DateRangePreset, HotkeyOptions, IconConfig, IconSize, InputControlState, InputFieldSize, ModalConfiguration, ModalFooterJustification, ModalPlacement, ModalSize, ModalVariant, NotificationAction, NotificationConfiguration, NotificationsWithIds, NumberStepperLayout, NumberStepperSize, OtpSize, OtpState, OtpType, PaginationItem, ProgressLinearGrowDirection, ProgressLinearLabelFormat, ProgressRadialLabelFormat, SegmentedControlSize, SingleSelectSize, SkeletonAnimation, SkeletonSize, SkeletonVariant, SpinnerSize, StepState, StepperOrientation, StepperSize, StepperTheme, StrataBreakpoint, StrataConfig, StrataNotificationRef, StrataOS, StrataPlatform, TagSize, TextStackOverflow, Theme, TimeFormat, TimePrecision, TooltipPlacement };
+export { BreakpointService, CapitalizePipe, DEFAULT_DATE_RANGE_PRESETS, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DeviceService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCalendarComponent, StrataCardComponent, StrataChatComponent, StrataChatGroupComponent, StrataChatMessageComponent, StrataChatSeparatorComponent, StrataChatTypingComponent, StrataCheckboxComponent, StrataContextMenuDirective, StrataDatePickerComponent, StrataDateRangePickerComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalBodyComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataNumberStepperComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSkeletonComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataTimeStepperComponent, StrataTimepickerComponent, StrataToggleComponent, StrataTooltipDirective, addDays, addMonths, addYears, createCalendarGrid, disableDateRange, disableDaysOfWeek, disableFutureDates, disablePastDates, disableWeekends, endOfDay, endOfMonth, formatDate, formatMonthTitle, getDayOfWeek, getDaysInMonth, getDefaultShortcutLabels, getLocaleDefaultDateFormat, getMonthNames, getWeekdayNames, isAfterDay, isApplePlatform, isBeforeDay, isSameDay, isSameMonth, isSameYear, isWeekend, isWithinDayRange, parseDate, provideBaseIcons, provideIcons, provideStrata, resolveIsApple, startOfDay, startOfMonth };
+export type { AccordionVariant, AlertConfiguration, AvatarSize, AvatarStackSpacing, AvatarVariant, BadgePlacement, BadgeSize, BadgeVariant, ButtonGroupJustification, ButtonSize, ButtonVariant, CalendarDayCell, CalendarMode, CalendarSize, CalendarView, CardVariant, ChatMessageStatus, ChatMessageVariant, ChatSpacing, CropPosition, CropResult, CropShape, CurrentDarkmode, DarkmodeSetting, DatePickerSize, DateRange, DateRangePreset, HotkeyOptions, IconConfig, IconSize, InputControlState, InputFieldSize, ModalConfiguration, ModalFooterJustification, ModalPlacement, ModalSize, ModalVariant, NotificationAction, NotificationConfiguration, NotificationsWithIds, NumberStepperLayout, NumberStepperSize, OtpSize, OtpState, OtpType, PaginationItem, ProgressLinearGrowDirection, ProgressLinearLabelFormat, ProgressRadialLabelFormat, SegmentedControlSize, SingleSelectSize, SkeletonAnimation, SkeletonSize, SkeletonVariant, SpinnerSize, StepState, StepperOrientation, StepperSize, StepperTheme, StrataBreakpoint, StrataConfig, StrataNotificationRef, StrataOS, StrataPlatform, TagSize, TextStackOverflow, Theme, TimeFormat, TimePrecision, TooltipPlacement };