@frame-ui-ng/components 0.1.0-beta.0

package/toast/src/styles/toast.css

@@ -0,0 +1,314 @@
+@import './_vars.css';
+
+.frame-toast-viewport {
+  pointer-events: none;
+  z-index: 1000;
+  box-sizing: border-box;
+}
+
+.frame-toast-viewport[data-strategy='fixed'] {
+  position: fixed;
+  inset: 0;
+}
+
+.frame-toast-viewport[data-strategy='inline'] {
+  position: relative;
+  display: block;
+  min-block-size: 12rem;
+}
+
+.frame-toast__group {
+  position: absolute;
+  display: grid;
+  width: var(--frame-toast-viewport-width);
+  max-width: calc(100vw - 2rem);
+  padding-block-end: var(--frame-toast-stack-depth);
+  pointer-events: auto;
+  transition:
+    padding-block-start var(--frame-toast-stack-transition-duration) var(--frame-toast-stack-transition-easing),
+    padding-block-end var(--frame-toast-stack-transition-duration) var(--frame-toast-stack-transition-easing);
+}
+
+.frame-toast__group:hover,
+.frame-toast__group:focus-within {
+  padding-block-end: var(--frame-toast-stack-expanded-depth);
+}
+
+.frame-toast__group .frame-toast {
+  grid-area: 1 / 1;
+  transform-origin: center top;
+  transition:
+    opacity var(--frame-toast-motion-duration) var(--frame-toast-motion-easing),
+    filter var(--frame-toast-motion-duration) var(--frame-toast-motion-easing),
+    transform var(--frame-toast-stack-transition-duration) var(--frame-toast-stack-transition-easing);
+}
+
+.frame-toast__group .frame-toast:nth-child(1) {
+  z-index: 4;
+}
+
+.frame-toast__group .frame-toast:nth-child(2) {
+  z-index: 3;
+  transform: translateY(var(--frame-toast-stack-offset)) scale(calc(1 - var(--frame-toast-stack-scale-step)));
+}
+
+.frame-toast__group .frame-toast:nth-child(3) {
+  z-index: 2;
+  transform: translateY(calc(var(--frame-toast-stack-offset) * 2)) scale(calc(1 - (var(--frame-toast-stack-scale-step) * 2)));
+}
+
+.frame-toast__group .frame-toast:nth-child(n + 4) {
+  z-index: 1;
+  transform: translateY(calc(var(--frame-toast-stack-offset) * 3)) scale(calc(1 - (var(--frame-toast-stack-scale-step) * 3)));
+}
+
+.frame-toast__group:hover .frame-toast,
+.frame-toast__group:focus-within .frame-toast {
+  transform: translateY(0) scale(1);
+}
+
+.frame-toast__group[data-position^='top']:hover .frame-toast:nth-child(2),
+.frame-toast__group[data-position^='top']:focus-within .frame-toast:nth-child(2) {
+  transform: translateY(calc(100% + var(--frame-toast-stack-expanded-gap))) scale(1);
+}
+
+.frame-toast__group[data-position^='top']:hover .frame-toast:nth-child(3),
+.frame-toast__group[data-position^='top']:focus-within .frame-toast:nth-child(3) {
+  transform: translateY(calc((100% + var(--frame-toast-stack-expanded-gap)) * 2)) scale(1);
+}
+
+.frame-toast__group[data-position^='top']:hover .frame-toast:nth-child(n + 4),
+.frame-toast__group[data-position^='top']:focus-within .frame-toast:nth-child(n + 4) {
+  transform: translateY(calc((100% + var(--frame-toast-stack-expanded-gap)) * 3)) scale(1);
+}
+
+.frame-toast__group[data-position^='bottom'] .frame-toast {
+  transform-origin: center bottom;
+}
+
+.frame-toast__group[data-position^='bottom'] .frame-toast:nth-child(2) {
+  transform: translateY(calc(var(--frame-toast-stack-offset) * -1)) scale(calc(1 - var(--frame-toast-stack-scale-step)));
+}
+
+.frame-toast__group[data-position^='bottom'] .frame-toast:nth-child(3) {
+  transform: translateY(calc(var(--frame-toast-stack-offset) * -2)) scale(calc(1 - (var(--frame-toast-stack-scale-step) * 2)));
+}
+
+.frame-toast__group[data-position^='bottom'] .frame-toast:nth-child(n + 4) {
+  transform: translateY(calc(var(--frame-toast-stack-offset) * -3)) scale(calc(1 - (var(--frame-toast-stack-scale-step) * 3)));
+}
+
+.frame-toast__group[data-position^='bottom']:hover .frame-toast:nth-child(2),
+.frame-toast__group[data-position^='bottom']:focus-within .frame-toast:nth-child(2) {
+  transform: translateY(calc((100% + var(--frame-toast-stack-expanded-gap)) * -1)) scale(1);
+}
+
+.frame-toast__group[data-position^='bottom']:hover .frame-toast:nth-child(3),
+.frame-toast__group[data-position^='bottom']:focus-within .frame-toast:nth-child(3) {
+  transform: translateY(calc((100% + var(--frame-toast-stack-expanded-gap)) * -2)) scale(1);
+}
+
+.frame-toast__group[data-position^='bottom']:hover .frame-toast:nth-child(n + 4),
+.frame-toast__group[data-position^='bottom']:focus-within .frame-toast:nth-child(n + 4) {
+  transform: translateY(calc((100% + var(--frame-toast-stack-expanded-gap)) * -3)) scale(1);
+}
+
+.frame-toast-viewport[data-strategy='inline'] .frame-toast__group {
+  position: relative;
+  inset: auto;
+  margin-inline: auto;
+}
+
+.frame-toast__group[data-position^='top'] {
+  top: var(--frame-toast-viewport-inset);
+}
+
+.frame-toast__group[data-position^='bottom'] {
+  bottom: var(--frame-toast-viewport-inset);
+  padding-block-start: var(--frame-toast-stack-depth);
+  padding-block-end: 0;
+}
+
+.frame-toast__group[data-position^='bottom']:hover,
+.frame-toast__group[data-position^='bottom']:focus-within {
+  padding-block-start: var(--frame-toast-stack-expanded-depth);
+  padding-block-end: 0;
+}
+
+.frame-toast__group[data-position$='left'] {
+  left: var(--frame-toast-viewport-inset);
+}
+
+.frame-toast__group[data-position$='center'] {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.frame-toast__group[data-position$='right'] {
+  right: var(--frame-toast-viewport-inset);
+}
+
+.frame-toast {
+  box-sizing: border-box;
+  display: flex;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: start;
+  gap: var(--frame-toast-gap);
+  width: 100%;
+  border: 1px solid var(--frame-toast-border);
+  border-radius: var(--frame-toast-radius);
+  background: var(--frame-toast-bg);
+  box-shadow: var(--frame-toast-shadow);
+  color: var(--frame-toast-color);
+  padding: var(--frame-toast-padding);
+  pointer-events: auto;
+  animation: frame-toast-fade-in var(--frame-toast-motion-duration) var(--frame-toast-motion-easing);
+}
+
+.frame-toast[data-state='dismissing'] {
+  opacity: 0;
+  filter: blur(2px);
+  pointer-events: none;
+}
+
+.frame-toast[data-has-description='false'] {
+  align-items: center;
+}
+
+.frame-toast[data-variant='success'] {
+  --frame-toast-bg: var(--frame-toast-success-bg);
+  --frame-toast-border: var(--frame-toast-success-border);
+  --frame-toast-status-bg: var(--frame-toast-success-status-bg);
+}
+
+.frame-toast[data-variant='info'] {
+  --frame-toast-bg: var(--frame-toast-info-bg);
+  --frame-toast-border: var(--frame-toast-info-border);
+  --frame-toast-status-bg: var(--frame-toast-info-status-bg);
+}
+
+.frame-toast[data-variant='warning'] {
+  --frame-toast-bg: var(--frame-toast-warning-bg);
+  --frame-toast-border: var(--frame-toast-warning-border);
+  --frame-toast-status-bg: var(--frame-toast-warning-status-bg);
+}
+
+.frame-toast[data-variant='error'] {
+  --frame-toast-bg: var(--frame-toast-error-bg);
+  --frame-toast-border: var(--frame-toast-error-border);
+  --frame-toast-status-bg: var(--frame-toast-error-status-bg);
+}
+
+.frame-toast[data-variant='loading'] {
+  --frame-toast-status-bg: var(--frame-toast-loading-status-bg);
+}
+
+.frame-toast__status,
+.frame-toast__loader {
+  display: inline-flex;
+  inline-size: var(--frame-toast-status-size);
+  block-size: var(--frame-toast-status-size);
+  margin-block-start: 0.25rem;
+  border-radius: 999px;
+  background: var(--frame-toast-status-bg);
+}
+
+.frame-toast[data-has-description='false'] .frame-toast__status,
+.frame-toast[data-has-description='false'] .frame-toast__loader {
+  margin-block-start: 0;
+}
+
+.frame-toast__loader {
+  --frame-spinner-size: var(--frame-toast-status-size);
+  --frame-spinner-stroke: 2px;
+  --frame-spinner-track-color: color-mix(in srgb, var(--frame-toast-status-bg) 24%, transparent);
+  --frame-spinner-indicator-color: var(--frame-toast-status-bg);
+  background: transparent;
+}
+
+.frame-toast__content {
+  display: grid;
+  flex-grow: 1;
+  min-width: 0;
+  gap: 0.25rem;
+}
+
+.frame-toast__title {
+  margin: 0;
+  color: var(--frame-toast-color);
+  font-size: var(--frame-toast-title-font-size);
+  font-weight: var(--frame-toast-title-font-weight);
+  line-height: 1.35;
+}
+
+.frame-toast__description {
+  margin: 0;
+  color: var(--frame-toast-description-color);
+  font-size: var(--frame-toast-description-font-size);
+  line-height: 1.45;
+}
+
+.frame-toast__action,
+.frame-toast__close {
+  border: 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.frame-toast__action {
+  align-self: center;
+  border-radius: var(--frame-toast-action-radius);
+  background: var(--frame-toast-action-bg);
+  color: var(--frame-toast-action-color);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  padding: 0.375rem 0.625rem;
+}
+
+.frame-toast__action:hover {
+  background: var(--frame-toast-action-hover-bg);
+}
+
+.frame-toast__close {
+  display: inline-flex;
+  inline-size: var(--frame-toast-close-size);
+  block-size: var(--frame-toast-close-size);
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--frame-toast-close-color);
+  line-height: 1;
+}
+
+.frame-toast__close ng-icon,
+.frame-toast__close svg {
+  inline-size: var(--frame-toast-close-icon-size);
+  block-size: var(--frame-toast-close-icon-size);
+}
+
+.frame-toast__close:hover {
+  background: var(--frame-toast-close-hover-bg);
+}
+
+@keyframes frame-toast-fade-in {
+  from {
+    opacity: 0;
+    filter: blur(2px);
+  }
+
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+
+@media (max-width: 640px) {
+  .frame-toast__group {
+    right: var(--frame-toast-viewport-inset);
+    left: var(--frame-toast-viewport-inset);
+    width: auto;
+    transform: none;
+  }
+}

package/toggle/src/styles/_vars.css

@@ -0,0 +1,24 @@
+:root {
+  --frame-toggle-height: 2.25rem;
+  --frame-toggle-padding-x: 0.75rem;
+  --frame-toggle-gap: 0.5rem;
+  --frame-toggle-radius: var(--frame-radius-md, 0.5rem);
+  --frame-toggle-font-size: 0.875rem;
+  --frame-toggle-font-weight: 600;
+  --frame-toggle-bg: transparent;
+  --frame-toggle-color: var(--frame-foreground, #09090b);
+  --frame-toggle-border: transparent;
+  --frame-toggle-hover-bg: var(--frame-muted, #f4f4f5);
+  --frame-toggle-hover-color: var(--frame-foreground, #09090b);
+  --frame-toggle-pressed-bg: var(--frame-accent, var(--frame-muted, #f4f4f5));
+  --frame-toggle-pressed-color: var(--frame-accent-foreground, var(--frame-foreground, #09090b));
+  --frame-toggle-pressed-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
+  --frame-toggle-outline-bg: var(--frame-background, #fff);
+  --frame-toggle-outline-border: var(--frame-border, #e5e7eb);
+  --frame-toggle-outline-hover-bg: var(--frame-muted, #f4f4f5);
+  --frame-toggle-outline-pressed-bg: var(--frame-muted, #f4f4f5);
+  --frame-toggle-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring, #18181b) 28%, transparent);
+  --frame-toggle-disabled-opacity: 0.5;
+  --frame-toggle-transition-duration: 160ms;
+  --frame-toggle-icon-size: 1rem;
+}

package/toggle/src/styles/toggle.css

@@ -0,0 +1,110 @@
+@import './_vars.css';
+
+[frToggle] {
+  appearance: none;
+  display: inline-flex;
+  min-block-size: var(--frame-toggle-height);
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-toggle-gap);
+  border: 1px solid var(--frame-toggle-border);
+  border-radius: var(--frame-toggle-radius);
+  background: var(--frame-toggle-bg);
+  color: var(--frame-toggle-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--frame-toggle-font-size);
+  font-weight: var(--frame-toggle-font-weight);
+  line-height: 1;
+  padding-block: 0;
+  padding-inline: var(--frame-toggle-padding-x);
+  text-decoration: none;
+  transition:
+    background-color var(--frame-toggle-transition-duration) ease,
+    border-color var(--frame-toggle-transition-duration) ease,
+    box-shadow var(--frame-toggle-transition-duration) ease,
+    color var(--frame-toggle-transition-duration) ease,
+    opacity var(--frame-toggle-transition-duration) ease,
+    transform var(--frame-toggle-transition-duration) ease;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+[frToggle]:where(:not(:disabled, [data-disabled])):hover {
+  background: var(--frame-toggle-hover-bg);
+  color: var(--frame-toggle-hover-color);
+}
+
+[frToggle]:where(:not(:disabled, [data-disabled])):active {
+  transform: translateY(1px);
+}
+
+[frToggle]:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--frame-toggle-focus-shadow);
+}
+
+[frToggle][data-state='on'] {
+  background: var(--frame-toggle-pressed-bg);
+  color: var(--frame-toggle-pressed-color);
+  box-shadow: var(--frame-toggle-pressed-shadow);
+}
+
+[frToggle][data-variant='outline'] {
+  --frame-toggle-bg: var(--frame-toggle-outline-bg);
+  --frame-toggle-border: var(--frame-toggle-outline-border);
+  --frame-toggle-hover-bg: var(--frame-toggle-outline-hover-bg);
+  --frame-toggle-pressed-bg: var(--frame-toggle-outline-pressed-bg);
+}
+
+[frToggle][data-size='sm'] {
+  --frame-toggle-height: 2rem;
+  --frame-toggle-padding-x: 0.625rem;
+  --frame-toggle-font-size: 0.8125rem;
+  --frame-toggle-icon-size: 0.9375rem;
+}
+
+[frToggle][data-size='lg'] {
+  --frame-toggle-height: 2.75rem;
+  --frame-toggle-padding-x: 1rem;
+  --frame-toggle-font-size: 0.9375rem;
+  --frame-toggle-icon-size: 1.125rem;
+}
+
+[frToggle]:where(:disabled, [data-disabled]) {
+  cursor: not-allowed;
+  opacity: var(--frame-toggle-disabled-opacity);
+}
+
+[frToggleIcon],
+.frame-toggle__icon {
+  display: inline-flex;
+  inline-size: var(--frame-toggle-icon-size);
+  block-size: var(--frame-toggle-icon-size);
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+[frToggleIcon] ng-icon,
+.frame-toggle__icon ng-icon {
+  inline-size: var(--frame-toggle-icon-size);
+  block-size: var(--frame-toggle-icon-size);
+}
+
+[frToggleLabel],
+.frame-toggle__label {
+  min-inline-size: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [frToggle] {
+    transition: none;
+  }
+
+  [frToggle]:where(:not(:disabled, [data-disabled])):active {
+    transform: none;
+  }
+}

package/tooltip/src/styles/_vars.css

@@ -0,0 +1,21 @@
+:root {
+  --frame-tooltip-content-bg: var(--frame-foreground, #09090b);
+  --frame-tooltip-content-color: var(--frame-background, #fff);
+  --frame-tooltip-content-border: transparent;
+  --frame-tooltip-content-radius: var(--frame-radius-md, 0.5rem);
+  --frame-tooltip-content-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
+  --frame-tooltip-content-padding: 0.375rem 0.625rem;
+  --frame-tooltip-content-max-width: 18rem;
+  --frame-tooltip-content-font-size: 0.8125rem;
+  --frame-tooltip-content-font-weight: 500;
+  --frame-tooltip-content-line-height: 1.35;
+  --frame-tooltip-shortcut-bg: color-mix(in srgb, currentColor 14%, transparent);
+  --frame-tooltip-shortcut-radius: 0.25rem;
+  --frame-tooltip-shortcut-padding: 0.0625rem 0.3125rem;
+  --frame-tooltip-shortcut-font-size: 0.75rem;
+  --frame-tooltip-arrow-size: 0.5rem;
+  --frame-tooltip-motion-duration: 140ms;
+  --frame-tooltip-motion-distance: 0.25rem;
+  --frame-tooltip-motion-scale: 0.96;
+  --frame-tooltip-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+}

package/tooltip/src/styles/tooltip.css

@@ -0,0 +1,103 @@
+@import './_vars.css';
+
+frame-tooltip {
+  display: inline-block;
+}
+
+.frame-tooltip__anchor {
+  display: inline-flex;
+}
+
+[frTooltipTrigger] {
+  cursor: default;
+}
+
+.frame-tooltip__content {
+  position: relative;
+  max-width: min(var(--frame-tooltip-content-max-width), calc(100vw - 1rem));
+  border: 1px solid var(--frame-tooltip-content-border);
+  border-radius: var(--frame-tooltip-content-radius);
+  background: var(--frame-tooltip-content-bg);
+  box-shadow: var(--frame-tooltip-content-shadow);
+  color: var(--frame-tooltip-content-color);
+  font-size: var(--frame-tooltip-content-font-size);
+  font-weight: var(--frame-tooltip-content-font-weight);
+  line-height: var(--frame-tooltip-content-line-height);
+  padding: var(--frame-tooltip-content-padding);
+  transform-origin: var(--frame-tooltip-transform-origin, center);
+  animation: frame-tooltip-in var(--frame-tooltip-motion-duration) var(--frame-tooltip-motion-easing);
+}
+
+.frame-tooltip-overlay--top .frame-tooltip__content {
+  --frame-tooltip-transform-origin: bottom;
+}
+
+.frame-tooltip-overlay--right .frame-tooltip__content {
+  --frame-tooltip-transform-origin: left;
+}
+
+.frame-tooltip-overlay--bottom .frame-tooltip__content {
+  --frame-tooltip-transform-origin: top;
+}
+
+.frame-tooltip-overlay--left .frame-tooltip__content {
+  --frame-tooltip-transform-origin: right;
+}
+
+.frame-tooltip__content[data-arrow]::after {
+  content: '';
+  position: absolute;
+  inline-size: var(--frame-tooltip-arrow-size);
+  block-size: var(--frame-tooltip-arrow-size);
+  background: var(--frame-tooltip-content-bg);
+  transform: rotate(45deg);
+}
+
+.frame-tooltip__content[data-arrow][data-side='top']::after {
+  inset-block-end: calc(var(--frame-tooltip-arrow-size) / -2);
+  inset-inline-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+}
+
+.frame-tooltip__content[data-arrow][data-side='bottom']::after {
+  inset-block-start: calc(var(--frame-tooltip-arrow-size) / -2);
+  inset-inline-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+}
+
+.frame-tooltip__content[data-arrow][data-side='left']::after {
+  inset-block-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+  inset-inline-end: calc(var(--frame-tooltip-arrow-size) / -2);
+}
+
+.frame-tooltip__content[data-arrow][data-side='right']::after {
+  inset-block-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+  inset-inline-start: calc(var(--frame-tooltip-arrow-size) / -2);
+}
+
+[frTooltipShortcut],
+.frame-tooltip__shortcut {
+  border-radius: var(--frame-tooltip-shortcut-radius);
+  background: var(--frame-tooltip-shortcut-bg);
+  font: inherit;
+  font-size: var(--frame-tooltip-shortcut-font-size);
+  line-height: 1;
+  padding: var(--frame-tooltip-shortcut-padding);
+  white-space: nowrap;
+}
+
+@keyframes frame-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--frame-tooltip-motion-distance)) scale(var(--frame-tooltip-motion-scale));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .frame-tooltip__content {
+    animation: none;
+  }
+}

package/types/frame-ui-ng-components-accordion.d.ts

@@ -0,0 +1,75 @@
+import * as i0 from '@angular/core';
+import { Signal } from '@angular/core';
+
+interface FrAccordionItemContext {
+    readonly contentId: Signal<string>;
+    readonly disabled: Signal<boolean>;
+    readonly open: Signal<boolean>;
+    readonly triggerId: Signal<string>;
+    toggle(): void;
+}
+
+declare class FrAccordionContent {
+    private readonly host;
+    protected readonly item: FrAccordionItemContext;
+    private initialized;
+    private rafId;
+    constructor();
+    onTransitionEnd(event: TransitionEvent): void;
+    private animate;
+    private applyStaticState;
+    private cancelAnimationFrame;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionContent, "[frAccordionContent]", never, {}, {}, never, never, true, never>;
+}
+
+declare class FrAccordionItem {
+    private readonly root;
+    private readonly itemId;
+    readonly value: i0.InputSignal<string>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly open: i0.Signal<boolean>;
+    readonly triggerId: i0.Signal<string>;
+    readonly contentId: i0.Signal<string>;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionItem, "[frAccordionItem]", ["frAccordionItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class FrAccordion {
+    readonly type: i0.InputSignal<"single" | "multiple">;
+    readonly border: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly collapsible: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly defaultValue: i0.InputSignal<string | readonly string[] | null>;
+    readonly valueChange: i0.OutputEmitterRef<string | string[] | null>;
+    private readonly openItems;
+    constructor();
+    isItemOpen(value: string): boolean;
+    toggleItem(value: string): void;
+    private commit;
+    private normalizeValues;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordion, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordion, "[frAccordion]", ["frAccordion"], { "type": { "alias": "type"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+declare class FrAccordionTrigger {
+    protected readonly item: FrAccordionItemContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionTrigger, "button[frAccordionTrigger]", never, {}, {}, never, never, true, never>;
+}
+declare class FrAccordionIcon {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionIcon, "[frAccordionIcon]", never, {}, {}, never, never, true, never>;
+}
+
+declare const FR_ACCORDION_TYPES: readonly ["single", "multiple"];
+type FrAccordionType = (typeof FR_ACCORDION_TYPES)[number];
+
+declare class FrAccordionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FrAccordionModule, never, [typeof FrAccordion, typeof FrAccordionContent, typeof FrAccordionIcon, typeof FrAccordionItem, typeof FrAccordionTrigger], [typeof FrAccordion, typeof FrAccordionContent, typeof FrAccordionIcon, typeof FrAccordionItem, typeof FrAccordionTrigger]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FrAccordionModule>;
+}
+
+export { FR_ACCORDION_TYPES, FrAccordion, FrAccordionContent, FrAccordionIcon, FrAccordionItem, FrAccordionModule, FrAccordionTrigger };
+export type { FrAccordionType };

package/types/frame-ui-ng-components-alert.d.ts

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+
+declare const FR_ALERT_VARIANTS: readonly ["default", "destructive", "success", "danger", "info"];
+type FrAlertVariant = (typeof FR_ALERT_VARIANTS)[number];
+declare class FrAlert {
+    readonly variant: i0.InputSignal<"default" | "destructive" | "success" | "danger" | "info">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrAlert, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrAlert, "[frAlert]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class FrAlertIcon {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrAlertIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrAlertIcon, "[frAlertIcon]", never, {}, {}, never, never, true, never>;
+}
+declare class FrAlertTitle {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrAlertTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrAlertTitle, "[frAlertTitle]", never, {}, {}, never, never, true, never>;
+}
+declare class FrAlertDescription {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrAlertDescription, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrAlertDescription, "[frAlertDescription]", never, {}, {}, never, never, true, never>;
+}
+
+declare class FrAlertModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrAlertModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FrAlertModule, never, [typeof FrAlert, typeof FrAlertDescription, typeof FrAlertIcon, typeof FrAlertTitle], [typeof FrAlert, typeof FrAlertDescription, typeof FrAlertIcon, typeof FrAlertTitle]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FrAlertModule>;
+}
+
+export { FR_ALERT_VARIANTS, FrAlert, FrAlertDescription, FrAlertIcon, FrAlertModule, FrAlertTitle };
+export type { FrAlertVariant };