ngx-com 0.0.1 → 0.0.4

package/types/ngx-com-components-empty-state.d.ts

@@ -0,0 +1,269 @@
+import * as i0 from '@angular/core';
+import { InputSignal, Signal } from '@angular/core';
+
+type EmptyStateSize = 'sm' | 'md' | 'lg';
+type EmptyStateAlign = 'start' | 'center';
+type EmptyStateOrientation = 'vertical' | 'horizontal';
+/**
+ * CVA variants for the empty state container.
+ *
+ * @tokens `--color-foreground`, `--color-muted`, `--color-muted-foreground`
+ */
+declare const emptyStateVariants: (props?: {
+    size?: EmptyStateSize;
+    align?: EmptyStateAlign;
+    orientation?: EmptyStateOrientation;
+}) => string;
+/**
+ * CVA variants for the empty state icon container.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`
+ */
+declare const emptyStateIconVariants: (props?: {
+    size?: EmptyStateSize;
+}) => string;
+/**
+ * CVA variants for the empty state title.
+ *
+ * @tokens `--color-foreground`
+ */
+declare const emptyStateTitleVariants: (props?: {
+    size?: EmptyStateSize;
+}) => string;
+/**
+ * CVA variants for the empty state description.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const emptyStateDescriptionVariants: (props?: {
+    size?: EmptyStateSize;
+}) => string;
+/**
+ * CVA variants for the empty state actions container.
+ */
+declare const emptyStateActionsVariants: (props?: {
+    size?: EmptyStateSize;
+}) => string;
+
+/**
+ * Empty state component - a placeholder surface for when there is no data to display.
+ *
+ * Common use cases include:
+ * - Empty lists or tables ("No results found")
+ * - Initial states before user action ("Create your first project")
+ * - Search results with no matches ("No items match your search")
+ * - Error recovery states ("Something went wrong. Try again.")
+ *
+ * The component is a pure layout container that accepts projected content through attribute directives.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`, `--color-foreground`
+ *
+ * @example Minimal empty state
+ * ```html
+ * <com-empty-state>
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="inbox" size="xl" />
+ *   </div>
+ *   <h3 comEmptyStateTitle>No messages</h3>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Full empty state with description and action
+ * ```html
+ * <com-empty-state>
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="folder-open" size="xl" />
+ *   </div>
+ *   <h3 comEmptyStateTitle>No projects yet</h3>
+ *   <p comEmptyStateDescription>
+ *     Create your first project to get started organizing your work.
+ *   </p>
+ *   <div comEmptyStateActions>
+ *     <button comButton>Create Project</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Search empty state with secondary action
+ * ```html
+ * <com-empty-state>
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="search-x" size="xl" />
+ *   </div>
+ *   <h3 comEmptyStateTitle>No results found</h3>
+ *   <p comEmptyStateDescription>
+ *     Try adjusting your search terms or filters.
+ *   </p>
+ *   <div comEmptyStateActions>
+ *     <button comButton variant="outline">Clear Filters</button>
+ *     <button comButton>New Search</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Small size for inline contexts
+ * ```html
+ * <com-empty-state size="sm">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="list" size="lg" />
+ *   </div>
+ *   <h4 comEmptyStateTitle>No items</h4>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Large size for full-page empty states
+ * ```html
+ * <com-empty-state size="lg">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="rocket" size="2xl" />
+ *   </div>
+ *   <h2 comEmptyStateTitle>Welcome to Acme</h2>
+ *   <p comEmptyStateDescription>
+ *     Your dashboard is ready. Start by creating your first resource.
+ *   </p>
+ *   <div comEmptyStateActions>
+ *     <button comButton size="lg">Get Started</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Horizontal orientation
+ * ```html
+ * <com-empty-state orientation="horizontal" align="start">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="alert-circle" size="lg" />
+ *   </div>
+ *   <h4 comEmptyStateTitle>No notifications</h4>
+ *   <p comEmptyStateDescription>You're all caught up!</p>
+ * </com-empty-state>
+ * ```
+ *
+ * @example Left-aligned for sidebar contexts
+ * ```html
+ * <com-empty-state align="start">
+ *   <div comEmptyStateIcon>
+ *     <com-icon name="users" size="lg" />
+ *   </div>
+ *   <h4 comEmptyStateTitle>No team members</h4>
+ *   <p comEmptyStateDescription>Invite people to collaborate.</p>
+ *   <div comEmptyStateActions>
+ *     <button comButton size="sm">Invite</button>
+ *   </div>
+ * </com-empty-state>
+ * ```
+ */
+declare class ComEmptyState {
+    /** Controls overall scale: icon container size, text sizes, spacing. */
+    readonly size: InputSignal<EmptyStateSize>;
+    /** Horizontal alignment of content. */
+    readonly align: InputSignal<EmptyStateAlign>;
+    /** Layout direction: vertical stacks content, horizontal places icon beside text. */
+    readonly orientation: InputSignal<EmptyStateOrientation>;
+    /** Consumer CSS classes - merged with variant classes. */
+    readonly userClass: InputSignal<string>;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComEmptyState, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComEmptyState, "com-empty-state", ["comEmptyState"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Empty state icon container directive - styled circular background for icon/illustration.
+ *
+ * Apply to a container element. Place any content inside (typically `com-icon`).
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example
+ * ```html
+ * <div comEmptyStateIcon>
+ *   <com-icon name="inbox" size="xl" />
+ * </div>
+ * ```
+ *
+ * @example With custom illustration
+ * ```html
+ * <div comEmptyStateIcon>
+ *   <img src="/assets/empty-mailbox.svg" alt="" class="size-8" />
+ * </div>
+ * ```
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`
+ */
+declare class ComEmptyStateIcon {
+    private readonly emptyState;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComEmptyStateIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComEmptyStateIcon, "[comEmptyStateIcon]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Empty state title directive - styled heading text.
+ *
+ * Apply to any heading element. Consumer picks the semantic level (h2, h3, etc.).
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example
+ * ```html
+ * <h3 comEmptyStateTitle>No projects yet</h3>
+ * ```
+ *
+ * @tokens `--color-foreground`
+ */
+declare class ComEmptyStateTitle {
+    private readonly emptyState;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComEmptyStateTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComEmptyStateTitle, "[comEmptyStateTitle]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Empty state description directive - supporting text.
+ *
+ * Apply to a paragraph or text element.
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example
+ * ```html
+ * <p comEmptyStateDescription>
+ *   Create your first project to get started organizing your work.
+ * </p>
+ * ```
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare class ComEmptyStateDescription {
+    private readonly emptyState;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComEmptyStateDescription, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComEmptyStateDescription, "[comEmptyStateDescription]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Empty state actions directive - container for action buttons.
+ *
+ * Apply to a container element. Place buttons inside.
+ * Styling automatically adapts to the parent's `size` input.
+ *
+ * @example Single action
+ * ```html
+ * <div comEmptyStateActions>
+ *   <button comButton>Create Project</button>
+ * </div>
+ * ```
+ *
+ * @example Multiple actions
+ * ```html
+ * <div comEmptyStateActions>
+ *   <button comButton variant="outline">Clear Filters</button>
+ *   <button comButton>New Search</button>
+ * </div>
+ * ```
+ */
+declare class ComEmptyStateActions {
+    private readonly emptyState;
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComEmptyStateActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComEmptyStateActions, "[comEmptyStateActions]", never, {}, {}, never, never, true, never>;
+}
+
+export { ComEmptyState, ComEmptyStateActions, ComEmptyStateDescription, ComEmptyStateIcon, ComEmptyStateTitle, emptyStateActionsVariants, emptyStateDescriptionVariants, emptyStateIconVariants, emptyStateTitleVariants, emptyStateVariants };
+export type { EmptyStateAlign, EmptyStateOrientation, EmptyStateSize };