@ojiepermana/angular-component 22.0.27

package/toggle-group/README.md

@@ -0,0 +1,206 @@
+# Toggle Group
+
+A set of two-state buttons that can be toggled on or off with either single or multiple selection.
+
+Use Toggle Group for formatting toolbars, persistent filters, view-mode switches, or any compact control cluster where each item represents a pressed state instead of an immediate action.
+
+## Import
+
+```ts
+import { ToggleGroupComponent, ToggleGroupItemDirective } from '@ojiepermana/angular-component/toggle-group';
+```
+
+## Composition
+
+The Angular structure keeps the same root-plus-items shape as shadcn and Radix while translating the API to strongly typed Angular bindings.
+
+```text
+ToggleGroup
+├── button[ToggleGroupItem]
+└── button[ToggleGroupItem]
+```
+
+## Basic usage
+
+Use `[(value)]` for single-select groups and `[(values)]` for multi-select groups.
+
+```ts
+readonly alignment = signal<string | null>('center');
+readonly styles = signal<string[]>(['bold']);
+```
+
+```html
+<ToggleGroup type="single" [(value)]="alignment" variant="outline" aria-label="Text alignment">
+  <button ToggleGroupItem value="left" aria-label="Left aligned">Left</button>
+  <button ToggleGroupItem value="center" aria-label="Center aligned">Center</button>
+  <button ToggleGroupItem value="right" aria-label="Right aligned">Right</button>
+</ToggleGroup>
+```
+
+```html
+<ToggleGroup type="multiple" [(values)]="styles" variant="outline" aria-label="Text styles">
+  <button ToggleGroupItem value="bold" aria-label="Bold">Bold</button>
+  <button ToggleGroupItem value="italic" aria-label="Italic">Italic</button>
+  <button ToggleGroupItem value="underline" aria-label="Underline">Underline</button>
+</ToggleGroup>
+```
+
+## Common patterns
+
+### Outline
+
+Use `variant="outline"` when the group should read like a bordered toolbar or filter control.
+
+```html
+<ToggleGroup type="single" [(value)]="filter" variant="outline" aria-label="Message filters">
+  <button ToggleGroupItem value="all">All</button>
+  <button ToggleGroupItem value="missed">Missed</button>
+</ToggleGroup>
+```
+
+### Size
+
+Set `size` on the root so every child item scales together.
+
+```html
+<ToggleGroup type="single" [(value)]="alignment" variant="outline" size="lg" aria-label="Large alignment">
+  <button ToggleGroupItem value="left">Left</button>
+  <button ToggleGroupItem value="center">Center</button>
+  <button ToggleGroupItem value="right">Right</button>
+</ToggleGroup>
+```
+
+### Spacing
+
+Spacing defaults to `2`, matching the current shadcn docs. Use `spacing="0"` for connected items or larger values for looser toolbars.
+
+```html
+<ToggleGroup type="single" [(value)]="alignment" variant="outline" spacing="0" aria-label="Connected alignment">
+  <button ToggleGroupItem value="left">Left</button>
+  <button ToggleGroupItem value="center">Center</button>
+  <button ToggleGroupItem value="right">Right</button>
+</ToggleGroup>
+```
+
+### Vertical orientation
+
+Use `orientation="vertical"` to stack items while keeping the same roving-focus keyboard behavior.
+
+```html
+<ToggleGroup type="multiple" [(values)]="styles" orientation="vertical" spacing="1" aria-label="Text styles">
+  <button ToggleGroupItem value="bold" aria-label="Toggle bold">Bold</button>
+  <button ToggleGroupItem value="italic" aria-label="Toggle italic">Italic</button>
+  <button ToggleGroupItem value="underline" aria-label="Toggle underline">Underline</button>
+</ToggleGroup>
+```
+
+### Disabled group
+
+Disable the root when the whole cluster is unavailable.
+
+```html
+<ToggleGroup
+  type="multiple"
+  [(values)]="styles"
+  variant="outline"
+  [disabled]="true"
+  aria-label="Unavailable text styles">
+  <button ToggleGroupItem value="bold">Bold</button>
+  <button ToggleGroupItem value="italic">Italic</button>
+  <button ToggleGroupItem value="underline">Underline</button>
+</ToggleGroup>
+```
+
+### Custom controlled state
+
+The selected value can drive any Angular signal, such as font weight, filters, or an editor mode.
+
+```ts
+readonly fontWeight = signal<string | null>('normal');
+```
+
+```html
+<ToggleGroup type="single" [(value)]="fontWeight" variant="outline" size="lg" aria-label="Font weight">
+  <button ToggleGroupItem value="light" class="min-w-24">Light</button>
+  <button ToggleGroupItem value="normal" class="min-w-24">Normal</button>
+  <button ToggleGroupItem value="medium" class="min-w-24">Medium</button>
+  <button ToggleGroupItem value="bold" class="min-w-24">Bold</button>
+</ToggleGroup>
+```
+
+### RTL
+
+Direction comes from the surrounding layout. Horizontal arrow navigation respects the active text direction automatically.
+
+```html
+<div dir="rtl" lang="ar" class="text-right">
+  <ToggleGroup type="single" [(value)]="view" variant="outline" aria-label="طريقة العرض">
+    <button ToggleGroupItem value="list">قائمة</button>
+    <button ToggleGroupItem value="grid">شبكة</button>
+    <button ToggleGroupItem value="cards">بطاقات</button>
+  </ToggleGroup>
+</div>
+```
+
+## API reference
+
+### `ToggleGroupComponent`
+
+| Input or model | Type                         | Default        |
+| -------------- | ---------------------------- | -------------- |
+| `type`         | `'single' \| 'multiple'`     | required       |
+| `value`        | `string \| null`             | `null`         |
+| `values`       | `string[]`                   | `[]`           |
+| `orientation`  | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| `variant`      | `'default' \| 'outline'`     | `'default'`    |
+| `size`         | `'sm' \| 'default' \| 'lg'`  | `'default'`    |
+| `spacing`      | `0 \| 1 \| 2 \| 3 \| 4`      | `2`            |
+| `loop`         | `boolean`                    | `true`         |
+| `disabled`     | `boolean`                    | `false`        |
+| `dir`          | `'ltr' \| 'rtl' \| null`     | `null`         |
+| `class`        | `string`                     | `''`           |
+
+### `ToggleGroupItemDirective`
+
+| Input      | Type      | Default |
+| ---------- | --------- | ------- |
+| `value`    | `string`  | —       |
+| `disabled` | `boolean` | `false` |
+| `class`    | `string`  | `''`    |
+
+Host: `button[ToggleGroupItem]`.
+
+The item host exposes `aria-pressed`, `data-state="on|off"`, `data-variant`, `data-size`, `data-orientation`, and `data-disabled` for styling and testing hooks.
+
+## Styling and theming
+
+- Toggle Group items intentionally share the same `variant` and `size` contract as the standalone Toggle primitive, so grouped toolbars and standalone toggles stay visually aligned.
+- Use `spacing` for inter-item layout. When `spacing="0"`, the root collapses adjacent radius and borders so outline items read as a connected control.
+- Use `class` on the root or an item for width, alignment, or card-like custom presentations.
+
+## Accessibility
+
+- `ToggleGroup` renders `role="group"`; provide `aria-label` or `aria-labelledby` when the cluster needs an accessible name.
+- `button[ToggleGroupItem]` keeps native button semantics and exposes `aria-pressed` for the two-state pattern.
+- Add an `aria-label` to icon-only items.
+- Disabled items stay visible and are skipped by the group keyboard navigation.
+
+## Keyboard interactions
+
+- Tab moves focus to the pressed item or the first enabled item in the group.
+- Enter and Space activate or deactivate the current item through the native button click.
+- Arrow keys move focus through the group.
+- `Home` and `End` jump to the first or last enabled item.
+- Horizontal arrow movement respects RTL direction.
+
+## Angular notes
+
+- Use `[(value)]` in single mode and `[(values)]` in multiple mode instead of overloading one input with two types.
+- The item host selector is `button[ToggleGroupItem]`; consumers do not add `Toggle` separately.
+- The root owns roving focus, so consumer templates do not need extra CDK focus utilities.
+
+## Source parity
+
+This Angular implementation follows the current shadcn Toggle Group docs for outline styling, size scaling, spacing, vertical orientation, disabled groups, custom controlled state, RTL behavior, and the Radix roving-focus keyboard contract.
+
+The intentional Angular deviation is the binding split between `value` and `values`, which keeps signal types explicit for single and multiple modes.

package/tooltip/README.md

@@ -0,0 +1,207 @@
+# Tooltip
+
+Displays a small, supplemental text label when a focusable element receives hover or keyboard focus.
+
+This Angular implementation now supports a composition-based tooltip surface with `Tooltip`, `[TooltipTrigger]`, and `ng-template[TooltipContent]`, while keeping the older `[Tooltip]` string directive as a lightweight shortcut for one-line hints.
+
+## Import
+
+```ts
+import {
+  TooltipComponent,
+  TooltipContentDirective,
+  TooltipDirective,
+  TooltipTriggerDirective,
+} from '@ojiepermana/angular-component/tooltip';
+```
+
+## Composition
+
+```text
+Tooltip
+├── focusable host[TooltipTrigger]
+└── ng-template[TooltipContent]
+
+Optional convenience shortcut:
+button[Tooltip]
+```
+
+## Basic usage
+
+Use the composed surface when you want shadcn-style trigger and content structure or richer overlay content.
+
+```html
+<Tooltip [openDelay]="0">
+  <ng-template TooltipContent #tooltipContent="TooltipContent">
+    <span>Add to library</span>
+  </ng-template>
+
+  <button Button type="button" variant="outline" [TooltipTrigger]="tooltipContent">Hover</button>
+</Tooltip>
+```
+
+## Common patterns
+
+### Side and alignment
+
+Use `side="top|right|bottom|left"` and `align="start|center|end"` on `[TooltipTrigger]` to control placement.
+
+```html
+<Tooltip side="top" [openDelay]="0">
+  <ng-template TooltipContent #startContent="TooltipContent">
+    <span>Start aligned tooltip</span>
+  </ng-template>
+
+  <button Button type="button" variant="outline" [TooltipTrigger]="startContent" align="start">Start</button>
+</Tooltip>
+```
+
+### Rich content
+
+The overlay template can include small layout fragments, emphasized text, or keyboard shortcut chips.
+
+```html
+<Tooltip [openDelay]="0">
+  <ng-template TooltipContent #shortcutContent="TooltipContent">
+    <span class="inline-flex items-center gap-1.5">
+      Save changes
+      <kbd class="border-primary-foreground/30 bg-primary-foreground/10 text-primary-foreground shadow-none"> Cmd </kbd>
+      <kbd class="border-primary-foreground/30 bg-primary-foreground/10 text-primary-foreground shadow-none"> S </kbd>
+    </span>
+  </ng-template>
+
+  <button Button type="button" variant="outline" [TooltipTrigger]="shortcutContent">Save</button>
+</Tooltip>
+```
+
+### Disabled buttons
+
+Disabled native buttons do not emit hover or focus events. Wrap them with a focusable element and attach `[TooltipTrigger]` to the wrapper.
+
+```html
+<Tooltip [openDelay]="0">
+  <ng-template TooltipContent #disabledContent="TooltipContent">
+    <span>This feature is currently unavailable</span>
+  </ng-template>
+
+  <span
+    class="inline-block rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    tabindex="0"
+    [TooltipTrigger]="disabledContent">
+    <button Button type="button" variant="outline" disabled>Disabled</button>
+  </span>
+</Tooltip>
+```
+
+### Quick string API
+
+For simple one-line hints, the original directive remains available.
+
+```html
+<button Button type="button" variant="outline" [Tooltip]="'Quick text hint'" TooltipPosition="above">
+  String directive
+</button>
+```
+
+### Programmatic control
+
+Export the trigger as `TooltipTrigger` when a flow needs to open or close the composed tooltip imperatively.
+
+```html
+<Tooltip [openDelay]="0">
+  <ng-template TooltipContent #saveContent="TooltipContent">
+    <span>Saved</span>
+  </ng-template>
+
+  <button
+    Button
+    type="button"
+    variant="outline"
+    #saveTrigger="TooltipTrigger"
+    [TooltipTrigger]="saveContent"
+    (click)="saveTrigger.open()">
+    Save
+  </button>
+</Tooltip>
+```
+
+## API reference
+
+### `TooltipComponent`
+
+| Input        | Type                                     | Default    |
+| ------------ | ---------------------------------------- | ---------- |
+| `side`       | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'`    |
+| `align`      | `'start' \| 'center' \| 'end'`           | `'center'` |
+| `sideOffset` | `number`                                 | `4`        |
+| `openDelay`  | `number`                                 | `150`      |
+| `closeDelay` | `number`                                 | `0`        |
+
+### `TooltipTriggerDirective`
+
+| Input            | Type                                     | Notes                                               |
+| ---------------- | ---------------------------------------- | --------------------------------------------------- |
+| `TooltipTrigger` | `TooltipContentDirective`                | Required content template ref for the overlay body. |
+| `side`           | `'top' \| 'right' \| 'bottom' \| 'left'` | Overrides the root side for this trigger.           |
+| `align`          | `'start' \| 'center' \| 'end'`           | Overrides the root alignment for this trigger.      |
+| `sideOffset`     | `number`                                 | Overrides the root offset for this trigger.         |
+| `openDelay`      | `number`                                 | Overrides the root open delay for this trigger.     |
+| `closeDelay`     | `number`                                 | Overrides the root close delay for this trigger.    |
+| `disabled`       | `boolean`                                | Suppresses tooltip opening for the trigger.         |
+
+### `TooltipTriggerDirective` methods
+
+- `open()`: opens the composed tooltip.
+- `close()`: closes the composed tooltip.
+
+### `TooltipContentDirective`
+
+- Applied as `ng-template[TooltipContent]`.
+- Supplies the portal content rendered inside the tooltip overlay.
+
+### `TooltipDirective`
+
+| Input                  | Type                      | Notes                                                    |
+| ---------------------- | ------------------------- | -------------------------------------------------------- |
+| `Tooltip`              | `string`                  | Message rendered inside the Material tooltip overlay.    |
+| `TooltipPosition`      | `TooltipPosition`         | `left`, `right`, `above`, `below`, `before`, or `after`. |
+| `TooltipDisabled`      | `boolean`                 | Temporarily suppresses tooltip display.                  |
+| `TooltipShowDelay`     | `number`                  | Delay in milliseconds before the tooltip opens.          |
+| `TooltipHideDelay`     | `number`                  | Delay in milliseconds before the tooltip closes.         |
+| `TooltipTouchGestures` | `'auto' \| 'on' \| 'off'` | Controls touch gesture behavior on mobile devices.       |
+
+For the original primitive contract, see the Radix Tooltip API: <https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference>.
+
+## Styling and theming
+
+The composed tooltip applies its visual shell directly on the overlay pane and keeps the stable `tooltip-panel` class hook.
+
+Projected content inherits the library theme tokens, so small layout helpers such as `inline-flex`, gap utilities, and subtle emphasis classes can be used without rebuilding the panel wrapper.
+
+The string directive continues to force the `tooltip-panel` class on the Material tooltip overlay for backward-compatible styling.
+
+## Accessibility
+
+- The composed overlay pane uses `role="tooltip"`.
+- Trigger hosts receive `aria-describedby` while the tooltip is open.
+- Tooltip content should stay supplemental and should not be the only place that important instructions live.
+- Use focusable hosts so keyboard users can reveal the tooltip without relying on hover.
+- Disabled controls still need a focusable wrapper if you expect keyboard users to reach the explanation.
+
+## Keyboard interactions
+
+- Focusing the trigger opens the tooltip after the configured delay.
+- Moving focus away closes it again.
+- Pressing Escape closes the currently open composed tooltip.
+- Native hosts keep their default Enter and Space behavior.
+
+## Angular notes
+
+- Prefer the composition-based surface when you need richer content or closer shadcn parity.
+- Keep the string directive for quick one-line hints or for existing code that already relies on `MatTooltip` semantics.
+- The composed trigger is exported as `TooltipTrigger`, so template refs can call `open()` and `close()` directly.
+- For interactive overlay content, use Popover or Hover Card instead of Tooltip.
+
+## Source parity
+
+This Angular version now mirrors the shadcn runtime more closely with an explicit root, trigger, and content surface while preserving a compact Angular convenience directive for minimal text hints.

package/types/ojiepermana-angular-component-accordion.d.ts

@@ -0,0 +1,51 @@
+import * as _angular_core from '@angular/core';
+
+type AccordionType = 'single' | 'multiple';
+declare abstract class AccordionContextBase {
+    abstract isOpen(value: string): boolean;
+    abstract toggle(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionContextBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionContextBase, never, never, {}, {}, never, never, true, never>;
+}
+declare class AccordionComponent extends AccordionContextBase {
+    readonly type: _angular_core.InputSignal<AccordionType>;
+    readonly collapsible: _angular_core.InputSignal<boolean>;
+    readonly value: _angular_core.ModelSignal<string | string[] | null>;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    private readonly openSet;
+    isOpen(value: string): boolean;
+    toggle(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "Accordion", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
+}
+declare class AccordionItemComponent {
+    protected readonly ctx: AccordionContextBase;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly triggerId: string;
+    readonly contentId: string;
+    protected readonly classes: _angular_core.Signal<string>;
+    readonly open: _angular_core.Signal<boolean>;
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemComponent, "AccordionItem", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AccordionTriggerComponent {
+    protected readonly item: AccordionItemComponent;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionTriggerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionTriggerComponent, "button[AccordionTrigger]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AccordionContentComponent {
+    protected readonly item: AccordionItemComponent;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionContentComponent, "AccordionContent", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { AccordionComponent, AccordionContentComponent, AccordionContextBase, AccordionItemComponent, AccordionTriggerComponent };
+export type { AccordionType };

package/types/ojiepermana-angular-component-alert-dialog.d.ts

@@ -0,0 +1,93 @@
+import * as _angular_core from '@angular/core';
+import { ButtonVariant, ButtonSize } from '@ojiepermana/angular-component/button';
+
+type AlertDialogSize = 'default' | 'sm';
+
+declare class AlertDialogComponent {
+    readonly open: _angular_core.ModelSignal<boolean>;
+    readonly closeOnEscape: _angular_core.InputSignal<boolean>;
+    readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    readonly showCloseButton: _angular_core.InputSignal<boolean>;
+    readonly closeButtonLabel: _angular_core.InputSignal<string>;
+    readonly labelledBy: _angular_core.InputSignal<string | null>;
+    readonly describedBy: _angular_core.InputSignal<string | null>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly openedChange: _angular_core.OutputEmitterRef<boolean>;
+    private readonly contentSize;
+    readonly resolvedSize: _angular_core.Signal<AlertDialogSize>;
+    protected readonly surfaceClasses: _angular_core.Signal<string>;
+    setContentSize(size: AlertDialogSize): void;
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogComponent, "AlertDialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
+}
+
+declare class AlertDialogContentComponent {
+    readonly size: _angular_core.InputSignal<AlertDialogSize>;
+    readonly class: _angular_core.InputSignal<string>;
+    private readonly alertDialog;
+    protected readonly classes: _angular_core.Signal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogContentComponent, "AlertDialogContent", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AlertDialogHeaderComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogHeaderComponent, "AlertDialogHeader", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AlertDialogTitleComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogTitleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogTitleComponent, "AlertDialogTitle, h2[AlertDialogTitle]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AlertDialogDescriptionComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogDescriptionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogDescriptionComponent, "AlertDialogDescription, p[AlertDialogDescription]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AlertDialogMediaComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    private readonly alertDialog;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogMediaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogMediaComponent, "AlertDialogMedia", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AlertDialogFooterComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogFooterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogFooterComponent, "AlertDialogFooter", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AlertDialogCancelComponent {
+    readonly variant: _angular_core.InputSignal<ButtonVariant>;
+    readonly size: _angular_core.InputSignal<ButtonSize>;
+    readonly closeOnClick: _angular_core.InputSignal<boolean>;
+    readonly class: _angular_core.InputSignal<string>;
+    private readonly host;
+    private readonly alertDialog;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly buttonType: _angular_core.Signal<"button" | null>;
+    protected handleClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogCancelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogCancelComponent, "button[AlertDialogCancel], a[AlertDialogCancel]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closeOnClick": { "alias": "closeOnClick"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AlertDialogActionComponent {
+    readonly variant: _angular_core.InputSignal<ButtonVariant>;
+    readonly size: _angular_core.InputSignal<ButtonSize>;
+    readonly closeOnClick: _angular_core.InputSignal<boolean>;
+    readonly class: _angular_core.InputSignal<string>;
+    private readonly host;
+    private readonly alertDialog;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly buttonType: _angular_core.Signal<"button" | null>;
+    protected handleClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogActionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogActionComponent, "button[AlertDialogAction], a[AlertDialogAction]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closeOnClick": { "alias": "closeOnClick"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { AlertDialogActionComponent, AlertDialogCancelComponent, AlertDialogComponent, AlertDialogContentComponent, AlertDialogDescriptionComponent, AlertDialogFooterComponent, AlertDialogHeaderComponent, AlertDialogMediaComponent, AlertDialogTitleComponent };
+export type { AlertDialogSize };

package/types/ojiepermana-angular-component-alert.d.ts

@@ -0,0 +1,37 @@
+import * as _angular_core from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
+
+declare class AlertComponent {
+    readonly variant: _angular_core.InputSignal<AlertVariant>;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "Alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AlertTitleComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertTitleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertTitleComponent, "AlertTitle, h5[AlertTitle]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AlertDescriptionComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDescriptionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDescriptionComponent, "AlertDescription", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AlertActionComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertActionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertActionComponent, "AlertAction", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { AlertActionComponent, AlertComponent, AlertDescriptionComponent, AlertTitleComponent, alertVariants };
+export type { AlertVariant };

package/types/ojiepermana-angular-component-aspect-ratio.d.ts

@@ -0,0 +1,12 @@
+import * as _angular_core from '@angular/core';
+
+declare class AspectRatioComponent {
+    readonly ratio: _angular_core.InputSignal<number>;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly paddingBottom: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AspectRatioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AspectRatioComponent, "AspectRatio", never, { "ratio": { "alias": "ratio"; "required": true; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { AspectRatioComponent };