@styloviz/empty-state 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,58 @@
+# @styloviz/empty-state
+
+> Full-page or inline empty states with icons, titles and action buttons.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/empty-state
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvEmptyStateComponent } from '@styloviz/empty-state';
+
+@Component({
+  standalone: true,
+  imports: [SvEmptyStateComponent],
+  template: `
+    <sv-empty-state icon="inbox" title="No messages" />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | `'Nothing here yet'` | Main heading text. |
+| `message` | `string` | `''` | Supporting message under the title. |
+| `icon` | `EmptyStateIcon` | `'inbox'` | Built-in icon preset. Set to `'custom'` and provide `iconPath` to use your own SVG. |
+| `iconPath` | `string` | `''` | Custom SVG `<path d="...">` — required when `icon === 'custom'`, ignored otherwise. |
+| `iconViewBox` | `string` | `'0 0 24 24'` | SVG viewBox for a custom icon. |
+| `showRings` | `boolean` | `true` | Show the decorative concentric-ring background behind the icon. |
+| `size` | `EmptyStateSize` | `'md'` | Overall size. |
+| `layout` | `EmptyStateLayout` | `'vertical'` | Content stacking axis. |
+| `bordered` | `boolean` | `true` | Whether to render a card surface (border + background + rounded corners) or let the component blend into its parent. |
+| `customClass` | `string` | `''` | Additional CSS classes on the root element. |
+| `actions` | `EmptyStateAction[]` | `[]` | CTA buttons rendered below the message. Maximum 3 — first one is typically primary, rest secondary/ghost. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `actionClick` | `string` | Emitted when any action button is clicked, carrying the action's `id`. |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs/empty-state
+
+## License
+
+MIT

package/fesm2022/styloviz-empty-state.mjs

@@ -0,0 +1,194 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+
+// ─── Built-in icon paths ──────────────────────────────────────────────────────
+const ICON_PATHS = {
+    inbox: 'M3 8l7.89 5.26a2 2 0 0 0 2.22 0L21 8M5 19h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2z',
+    search: 'M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z',
+    folder: 'M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z',
+    users: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
+    chart: 'M18 20V10M12 20V4M6 20v-6',
+    document: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M16 13H8M16 17H8M10 9H8',
+    notification: 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0',
+    cart: 'M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0',
+    filter: 'M22 3H2l8 9.46V19l4 2v-8.54L22 3z',
+    star: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',
+    lock: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4',
+    error: 'M12 8v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z',
+};
+// ─── Component ───────────────────────────────────────────────────────────────
+/**
+ * EmptyState — A polished zero-data placeholder for tables, lists, dashboards,
+ * search results, and any panel that may have no content to display.
+ *
+ * Features:
+ * - 12 built-in contextual icon presets (no external assets required)
+ * - Custom SVG path override
+ * - Optional decorative illustration background ring
+ * - Vertical and horizontal layout modes
+ * - 3 sizes: sm (inline), md (card), lg (full-page)
+ * - Up to 3 CTA action buttons (primary / secondary / ghost)
+ * - Optional body slot for projected rich content below the message
+ * - Full dark-mode support
+ */
+class SvEmptyStateComponent {
+    // ── Content ───────────────────────────────────────────────────────────────
+    /** Main heading text. */
+    title = input('Nothing here yet', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Supporting message under the title. */
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    // ── Icon ──────────────────────────────────────────────────────────────────
+    /**
+     * Built-in icon preset. Set to `'custom'` and provide `iconPath` to use
+     * your own SVG. @default 'inbox'
+     */
+    icon = input('inbox', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom SVG `<path d="...">` — required when `icon === 'custom'`,
+     * ignored otherwise.
+     */
+    iconPath = input('', ...(ngDevMode ? [{ debugName: "iconPath" }] : /* istanbul ignore next */ []));
+    /** SVG viewBox for a custom icon. @default '0 0 24 24' */
+    iconViewBox = input('0 0 24 24', ...(ngDevMode ? [{ debugName: "iconViewBox" }] : /* istanbul ignore next */ []));
+    /**
+     * Show the decorative concentric-ring background behind the icon.
+     * @default true
+     */
+    showRings = input(true, ...(ngDevMode ? [{ debugName: "showRings" }] : /* istanbul ignore next */ []));
+    // ── Appearance ────────────────────────────────────────────────────────────
+    /** Overall size. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Content stacking axis. @default 'vertical' */
+    layout = input('vertical', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to render a card surface (border + background + rounded corners)
+     * or let the component blend into its parent.
+     * @default true
+     */
+    bordered = input(true, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    /** Additional CSS classes on the root element. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    // ── Actions ───────────────────────────────────────────────────────────────
+    /**
+     * CTA buttons rendered below the message.
+     * Maximum 3 — first one is typically primary, rest secondary/ghost.
+     */
+    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    // ── Outputs ───────────────────────────────────────────────────────────────
+    /** Emitted when any action button is clicked, carrying the action's `id`. */
+    actionClick = output();
+    // ── Computed ──────────────────────────────────────────────────────────────
+    resolvedIconPath = computed(() => {
+        const preset = this.icon();
+        if (preset === 'custom')
+            return this.iconPath();
+        return ICON_PATHS[preset];
+    }, ...(ngDevMode ? [{ debugName: "resolvedIconPath" }] : /* istanbul ignore next */ []));
+    // ── Root wrapper ──────────────────────────────────────────────────────────
+    rootClasses = computed(() => {
+        const bordered = this.bordered()
+            ? 'border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900'
+            : '';
+        const sizeMap = {
+            sm: 'rounded-xl px-6 py-8',
+            md: 'rounded-xl px-8 py-12',
+            lg: 'rounded-2xl px-10 py-16',
+        };
+        return [
+            'w-full',
+            bordered,
+            sizeMap[this.size()],
+            this.layout() === 'horizontal'
+                ? 'flex items-center gap-8'
+                : 'flex flex-col items-center text-center',
+            this.customClass(),
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    // ── Icon ring ─────────────────────────────────────────────────────────────
+    /** Outer ring container size keyed to component size. */
+    ringSizeClass = computed(() => {
+        switch (this.size()) {
+            case 'sm': return 'h-20 w-20';
+            case 'lg': return 'h-36 w-36';
+            default: return 'h-28 w-28';
+        }
+    }, ...(ngDevMode ? [{ debugName: "ringSizeClass" }] : /* istanbul ignore next */ []));
+    /** Inner icon container size. */
+    iconContainerClass = computed(() => {
+        switch (this.size()) {
+            case 'sm': return 'h-10 w-10';
+            case 'lg': return 'h-16 w-16';
+            default: return 'h-14 w-14';
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconContainerClass" }] : /* istanbul ignore next */ []));
+    /** SVG icon size. */
+    iconSvgClass = computed(() => {
+        switch (this.size()) {
+            case 'sm': return 'h-5 w-5';
+            case 'lg': return 'h-8 w-8';
+            default: return 'h-7 w-7';
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconSvgClass" }] : /* istanbul ignore next */ []));
+    // ── Typography ────────────────────────────────────────────────────────────
+    titleClass = computed(() => {
+        const base = 'font-semibold text-gray-900 dark:text-white';
+        switch (this.size()) {
+            case 'sm': return `${base} text-sm`;
+            case 'lg': return `${base} text-2xl`;
+            default: return `${base} text-lg`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+    messageClass = computed(() => {
+        const base = 'text-gray-500 dark:text-gray-400 leading-relaxed';
+        const maxW = this.layout() === 'vertical'
+            ? (this.size() === 'lg' ? 'max-w-md' : 'max-w-xs')
+            : '';
+        switch (this.size()) {
+            case 'sm': return `${base} text-xs ${maxW}`;
+            case 'lg': return `${base} text-base ${maxW}`;
+            default: return `${base} text-sm ${maxW}`;
+        }
+    }, ...(ngDevMode ? [{ debugName: "messageClass" }] : /* istanbul ignore next */ []));
+    // ── Text block layout ─────────────────────────────────────────────────────
+    textBlockClass = computed(() => this.layout() === 'horizontal'
+        ? 'flex flex-1 flex-col items-start text-left gap-1 min-w-0'
+        : 'flex flex-col items-center gap-1.5', ...(ngDevMode ? [{ debugName: "textBlockClass" }] : /* istanbul ignore next */ []));
+    actionsClass = computed(() => this.layout() === 'horizontal'
+        ? 'flex flex-wrap gap-2 mt-4'
+        : 'flex flex-wrap justify-center gap-3 mt-4', ...(ngDevMode ? [{ debugName: "actionsClass" }] : /* istanbul ignore next */ []));
+    // ── Action button classes ─────────────────────────────────────────────────
+    /**
+     * Pre-built action button class strings keyed by style variant.
+     * Computed once per `size()` change so the template does a cheap key lookup
+     * instead of calling a method inside the `@for` loop on every CD cycle.
+     */
+    actionClasses = computed(() => {
+        const base = 'inline-flex items-center gap-1.5 rounded-lg font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';
+        const sizeMap = {
+            sm: 'px-3 py-1.5 text-xs',
+            md: 'px-4 py-2 text-sm',
+            lg: 'px-5 py-2.5 text-sm',
+        };
+        const sizeClass = sizeMap[this.size()];
+        const make = (styleClass) => [base, sizeClass, styleClass].join(' ');
+        return {
+            primary: make('bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500 shadow-sm'),
+            secondary: make('bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:ring-gray-400 dark:bg-gray-800 dark:text-gray-200 dark:ring-gray-700 dark:hover:bg-gray-700 shadow-sm'),
+            ghost: make('text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800'),
+        };
+    }, ...(ngDevMode ? [{ debugName: "actionClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvEmptyStateComponent, isStandalone: true, selector: "sv-empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPath: { classPropertyName: "iconPath", publicName: "iconPath", isSignal: true, isRequired: false, transformFunction: null }, iconViewBox: { classPropertyName: "iconViewBox", publicName: "iconViewBox", isSignal: true, isRequired: false, transformFunction: null }, showRings: { classPropertyName: "showRings", publicName: "showRings", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div\n  [ngClass]=\"rootClasses()\"\n  role=\"region\"\n  [attr.aria-label]=\"title()\"\n>\n\n  <!-- \u2500\u2500 Icon / illustration \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div\n    class=\"relative flex shrink-0 items-center justify-center\"\n    [ngClass]=\"ringSizeClass()\"\n  >\n    @if (showRings()) {\n      <!-- Outer decorative ring -->\n      <span\n        class=\"absolute inset-0 rounded-full border border-gray-200/70\n               dark:border-gray-700/50\"\n        aria-hidden=\"true\"\n      ></span>\n      <!-- Middle ring -->\n      <span\n        class=\"absolute rounded-full border border-gray-200/50\n               dark:border-gray-700/40\"\n        [ngClass]=\"size() === 'sm' ? 'inset-3' : size() === 'lg' ? 'inset-5' : 'inset-4'\"\n        aria-hidden=\"true\"\n      ></span>\n      <!-- Inner tinted ring / icon bg -->\n      <span\n        class=\"absolute rounded-full bg-gray-50 dark:bg-gray-800/80\"\n        [ngClass]=\"size() === 'sm' ? 'inset-5' : size() === 'lg' ? 'inset-8' : 'inset-7'\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n\n    <!-- Icon container -->\n    <span\n      class=\"relative z-10 flex items-center justify-center rounded-full\n             bg-white shadow-sm ring-1 ring-gray-200/80\n             dark:bg-gray-800 dark:ring-gray-700/60\"\n      [ngClass]=\"iconContainerClass()\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        [ngClass]=\"iconSvgClass()\"\n        class=\"text-gray-500 dark:text-gray-400\"\n        [attr.viewBox]=\"icon() === 'custom' ? iconViewBox() : '0 0 24 24'\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path [attr.d]=\"resolvedIconPath()\" />\n      </svg>\n    </span>\n  </div>\n\n  <!-- \u2500\u2500 Text + actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div [ngClass]=\"textBlockClass()\">\n\n    <!-- Title -->\n    <h3 [ngClass]=\"titleClass()\">{{ title() }}</h3>\n\n    <!-- Message -->\n    @if (message()) {\n      <p [ngClass]=\"messageClass()\" class=\"mt-1\">{{ message() }}</p>\n    }\n\n    <!-- Projected rich content -->\n    <ng-content />\n\n    <!-- CTA actions -->\n    @if (actions().length > 0) {\n      <div [ngClass]=\"actionsClass()\">\n        @for (action of actions(); track action.id) {\n          <button\n            type=\"button\"\n            [ngClass]=\"actionClasses()[action.style ?? 'primary']\"\n            (click)=\"actionClick.emit(action.id)\"\n          >\n            @if (action.iconPath) {\n              <svg\n                class=\"shrink-0\"\n                [ngClass]=\"size() === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path [attr.d]=\"action.iconPath\" />\n              </svg>\n            }\n            {{ action.label }}\n          </button>\n        }\n      </div>\n    }\n\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvEmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-empty-state', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngClass]=\"rootClasses()\"\n  role=\"region\"\n  [attr.aria-label]=\"title()\"\n>\n\n  <!-- \u2500\u2500 Icon / illustration \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div\n    class=\"relative flex shrink-0 items-center justify-center\"\n    [ngClass]=\"ringSizeClass()\"\n  >\n    @if (showRings()) {\n      <!-- Outer decorative ring -->\n      <span\n        class=\"absolute inset-0 rounded-full border border-gray-200/70\n               dark:border-gray-700/50\"\n        aria-hidden=\"true\"\n      ></span>\n      <!-- Middle ring -->\n      <span\n        class=\"absolute rounded-full border border-gray-200/50\n               dark:border-gray-700/40\"\n        [ngClass]=\"size() === 'sm' ? 'inset-3' : size() === 'lg' ? 'inset-5' : 'inset-4'\"\n        aria-hidden=\"true\"\n      ></span>\n      <!-- Inner tinted ring / icon bg -->\n      <span\n        class=\"absolute rounded-full bg-gray-50 dark:bg-gray-800/80\"\n        [ngClass]=\"size() === 'sm' ? 'inset-5' : size() === 'lg' ? 'inset-8' : 'inset-7'\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n\n    <!-- Icon container -->\n    <span\n      class=\"relative z-10 flex items-center justify-center rounded-full\n             bg-white shadow-sm ring-1 ring-gray-200/80\n             dark:bg-gray-800 dark:ring-gray-700/60\"\n      [ngClass]=\"iconContainerClass()\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        [ngClass]=\"iconSvgClass()\"\n        class=\"text-gray-500 dark:text-gray-400\"\n        [attr.viewBox]=\"icon() === 'custom' ? iconViewBox() : '0 0 24 24'\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path [attr.d]=\"resolvedIconPath()\" />\n      </svg>\n    </span>\n  </div>\n\n  <!-- \u2500\u2500 Text + actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div [ngClass]=\"textBlockClass()\">\n\n    <!-- Title -->\n    <h3 [ngClass]=\"titleClass()\">{{ title() }}</h3>\n\n    <!-- Message -->\n    @if (message()) {\n      <p [ngClass]=\"messageClass()\" class=\"mt-1\">{{ message() }}</p>\n    }\n\n    <!-- Projected rich content -->\n    <ng-content />\n\n    <!-- CTA actions -->\n    @if (actions().length > 0) {\n      <div [ngClass]=\"actionsClass()\">\n        @for (action of actions(); track action.id) {\n          <button\n            type=\"button\"\n            [ngClass]=\"actionClasses()[action.style ?? 'primary']\"\n            (click)=\"actionClick.emit(action.id)\"\n          >\n            @if (action.iconPath) {\n              <svg\n                class=\"shrink-0\"\n                [ngClass]=\"size() === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path [attr.d]=\"action.iconPath\" />\n              </svg>\n            }\n            {{ action.label }}\n          </button>\n        }\n      </div>\n    }\n\n  </div>\n\n</div>\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPath", required: false }] }], iconViewBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconViewBox", required: false }] }], showRings: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRings", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvEmptyStateComponent };
+//# sourceMappingURL=styloviz-empty-state.mjs.map

package/fesm2022/styloviz-empty-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-empty-state.mjs","sources":["../../../../projects/empty-state/src/lib/empty-state.component.ts","../../../../projects/empty-state/src/lib/empty-state.component.html","../../../../projects/empty-state/src/styloviz-empty-state.ts"],"sourcesContent":["import {\n  Component,\n  input,\n  output,\n  computed,\n  ChangeDetectionStrategy,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\n/**\n * Visual size of the empty state block.\n * - `sm`  — compact, inline use (table cells, sidebars)\n * - `md`  — default card/panel use\n * - `lg`  — full-page / hero-style\n */\nexport type EmptyStateSize = 'sm' | 'md' | 'lg';\n\n/**\n * Layout axis for the content stack.\n * - `vertical`    — icon → title → message → actions (default)\n * - `horizontal`  — icon on the left, text/actions on the right\n */\nexport type EmptyStateLayout = 'vertical' | 'horizontal';\n\n/**\n * Built-in icon preset.\n * The component ships a curated set of SVG paths for the most common\n * empty-state scenarios. Pass `iconPath` to override with any custom SVG.\n */\nexport type EmptyStateIcon =\n  | 'inbox'\n  | 'search'\n  | 'folder'\n  | 'users'\n  | 'chart'\n  | 'document'\n  | 'notification'\n  | 'cart'\n  | 'filter'\n  | 'star'\n  | 'lock'\n  | 'error'\n  | 'custom';   // falls through to `iconPath`\n\n/** A single CTA button rendered below the message. */\nexport interface EmptyStateAction {\n  id:       string;\n  label:    string;\n  /** @default 'primary' */\n  style?:   'primary' | 'secondary' | 'ghost';\n  /** Optional SVG path prefix shown before the label. */\n  iconPath?: string;\n}\n\n// ─── Built-in icon paths ──────────────────────────────────────────────────────\n\nconst ICON_PATHS: Record<Exclude<EmptyStateIcon, 'custom'>, string> = {\n  inbox:        'M3 8l7.89 5.26a2 2 0 0 0 2.22 0L21 8M5 19h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2z',\n  search:       'M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z',\n  folder:       'M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z',\n  users:        'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',\n  chart:        'M18 20V10M12 20V4M6 20v-6',\n  document:     'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M16 13H8M16 17H8M10 9H8',\n  notification: 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0',\n  cart:         'M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0',\n  filter:       'M22 3H2l8 9.46V19l4 2v-8.54L22 3z',\n  star:         'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',\n  lock:         'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4',\n  error:        'M12 8v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z',\n};\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * EmptyState — A polished zero-data placeholder for tables, lists, dashboards,\n * search results, and any panel that may have no content to display.\n *\n * Features:\n * - 12 built-in contextual icon presets (no external assets required)\n * - Custom SVG path override\n * - Optional decorative illustration background ring\n * - Vertical and horizontal layout modes\n * - 3 sizes: sm (inline), md (card), lg (full-page)\n * - Up to 3 CTA action buttons (primary / secondary / ghost)\n * - Optional body slot for projected rich content below the message\n * - Full dark-mode support\n */\n@Component({\n  selector: 'sv-empty-state',\n  standalone: true,\n  imports: [NgClass],\n  templateUrl: './empty-state.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SvEmptyStateComponent {\n  // ── Content ───────────────────────────────────────────────────────────────\n\n  /** Main heading text. */\n  title   = input<string>('Nothing here yet');\n\n  /** Supporting message under the title. */\n  message = input<string>('');\n\n  // ── Icon ──────────────────────────────────────────────────────────────────\n\n  /**\n   * Built-in icon preset. Set to `'custom'` and provide `iconPath` to use\n   * your own SVG. @default 'inbox'\n   */\n  icon     = input<EmptyStateIcon>('inbox');\n\n  /**\n   * Custom SVG `<path d=\"...\">` — required when `icon === 'custom'`,\n   * ignored otherwise.\n   */\n  iconPath = input<string>('');\n\n  /** SVG viewBox for a custom icon. @default '0 0 24 24' */\n  iconViewBox = input<string>('0 0 24 24');\n\n  /**\n   * Show the decorative concentric-ring background behind the icon.\n   * @default true\n   */\n  showRings = input<boolean>(true);\n\n  // ── Appearance ────────────────────────────────────────────────────────────\n\n  /** Overall size. @default 'md' */\n  size   = input<EmptyStateSize>('md');\n\n  /** Content stacking axis. @default 'vertical' */\n  layout = input<EmptyStateLayout>('vertical');\n\n  /**\n   * Whether to render a card surface (border + background + rounded corners)\n   * or let the component blend into its parent.\n   * @default true\n   */\n  bordered = input<boolean>(true);\n\n  /** Additional CSS classes on the root element. */\n  customClass = input<string>('');\n\n  // ── Actions ───────────────────────────────────────────────────────────────\n\n  /**\n   * CTA buttons rendered below the message.\n   * Maximum 3 — first one is typically primary, rest secondary/ghost.\n   */\n  actions = input<EmptyStateAction[]>([]);\n\n  // ── Outputs ───────────────────────────────────────────────────────────────\n\n  /** Emitted when any action button is clicked, carrying the action's `id`. */\n  actionClick = output<string>();\n\n  // ── Computed ──────────────────────────────────────────────────────────────\n\n  resolvedIconPath = computed<string>(() => {\n    const preset = this.icon();\n    if (preset === 'custom') return this.iconPath();\n    return ICON_PATHS[preset];\n  });\n\n  // ── Root wrapper ──────────────────────────────────────────────────────────\n\n  rootClasses = computed<string>(() => {\n    const bordered = this.bordered()\n      ? 'border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900'\n      : '';\n\n    const sizeMap: Record<EmptyStateSize, string> = {\n      sm: 'rounded-xl px-6 py-8',\n      md: 'rounded-xl px-8 py-12',\n      lg: 'rounded-2xl px-10 py-16',\n    };\n\n    return [\n      'w-full',\n      bordered,\n      sizeMap[this.size()],\n      this.layout() === 'horizontal'\n        ? 'flex items-center gap-8'\n        : 'flex flex-col items-center text-center',\n      this.customClass(),\n    ].filter(Boolean).join(' ');\n  });\n\n  // ── Icon ring ─────────────────────────────────────────────────────────────\n\n  /** Outer ring container size keyed to component size. */\n  ringSizeClass = computed<string>(() => {\n    switch (this.size()) {\n      case 'sm': return 'h-20 w-20';\n      case 'lg': return 'h-36 w-36';\n      default:   return 'h-28 w-28';\n    }\n  });\n\n  /** Inner icon container size. */\n  iconContainerClass = computed<string>(() => {\n    switch (this.size()) {\n      case 'sm': return 'h-10 w-10';\n      case 'lg': return 'h-16 w-16';\n      default:   return 'h-14 w-14';\n    }\n  });\n\n  /** SVG icon size. */\n  iconSvgClass = computed<string>(() => {\n    switch (this.size()) {\n      case 'sm': return 'h-5 w-5';\n      case 'lg': return 'h-8 w-8';\n      default:   return 'h-7 w-7';\n    }\n  });\n\n  // ── Typography ────────────────────────────────────────────────────────────\n\n  titleClass = computed<string>(() => {\n    const base = 'font-semibold text-gray-900 dark:text-white';\n    switch (this.size()) {\n      case 'sm': return `${base} text-sm`;\n      case 'lg': return `${base} text-2xl`;\n      default:   return `${base} text-lg`;\n    }\n  });\n\n  messageClass = computed<string>(() => {\n    const base = 'text-gray-500 dark:text-gray-400 leading-relaxed';\n    const maxW = this.layout() === 'vertical'\n      ? (this.size() === 'lg' ? 'max-w-md' : 'max-w-xs')\n      : '';\n    switch (this.size()) {\n      case 'sm': return `${base} text-xs ${maxW}`;\n      case 'lg': return `${base} text-base ${maxW}`;\n      default:   return `${base} text-sm ${maxW}`;\n    }\n  });\n\n  // ── Text block layout ─────────────────────────────────────────────────────\n\n  textBlockClass = computed<string>(() =>\n    this.layout() === 'horizontal'\n      ? 'flex flex-1 flex-col items-start text-left gap-1 min-w-0'\n      : 'flex flex-col items-center gap-1.5'\n  );\n\n  actionsClass = computed<string>(() =>\n    this.layout() === 'horizontal'\n      ? 'flex flex-wrap gap-2 mt-4'\n      : 'flex flex-wrap justify-center gap-3 mt-4'\n  );\n\n  // ── Action button classes ─────────────────────────────────────────────────\n\n  /**\n   * Pre-built action button class strings keyed by style variant.\n   * Computed once per `size()` change so the template does a cheap key lookup\n   * instead of calling a method inside the `@for` loop on every CD cycle.\n   */\n  actionClasses = computed<Record<NonNullable<EmptyStateAction['style']>, string>>(() => {\n    const base = 'inline-flex items-center gap-1.5 rounded-lg font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';\n    const sizeMap: Record<EmptyStateSize, string> = {\n      sm: 'px-3 py-1.5 text-xs',\n      md: 'px-4 py-2 text-sm',\n      lg: 'px-5 py-2.5 text-sm',\n    };\n    const sizeClass = sizeMap[this.size()];\n\n    const make = (styleClass: string) => [base, sizeClass, styleClass].join(' ');\n\n    return {\n      primary:   make('bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500 shadow-sm'),\n      secondary: make('bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:ring-gray-400 dark:bg-gray-800 dark:text-gray-200 dark:ring-gray-700 dark:hover:bg-gray-700 shadow-sm'),\n      ghost:     make('text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800'),\n    };\n  });\n}\n","<div\n  [ngClass]=\"rootClasses()\"\n  role=\"region\"\n  [attr.aria-label]=\"title()\"\n>\n\n  <!-- ── Icon / illustration ───────────────────────────────────────────── -->\n  <div\n    class=\"relative flex shrink-0 items-center justify-center\"\n    [ngClass]=\"ringSizeClass()\"\n  >\n    @if (showRings()) {\n      <!-- Outer decorative ring -->\n      <span\n        class=\"absolute inset-0 rounded-full border border-gray-200/70\n               dark:border-gray-700/50\"\n        aria-hidden=\"true\"\n      ></span>\n      <!-- Middle ring -->\n      <span\n        class=\"absolute rounded-full border border-gray-200/50\n               dark:border-gray-700/40\"\n        [ngClass]=\"size() === 'sm' ? 'inset-3' : size() === 'lg' ? 'inset-5' : 'inset-4'\"\n        aria-hidden=\"true\"\n      ></span>\n      <!-- Inner tinted ring / icon bg -->\n      <span\n        class=\"absolute rounded-full bg-gray-50 dark:bg-gray-800/80\"\n        [ngClass]=\"size() === 'sm' ? 'inset-5' : size() === 'lg' ? 'inset-8' : 'inset-7'\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n\n    <!-- Icon container -->\n    <span\n      class=\"relative z-10 flex items-center justify-center rounded-full\n             bg-white shadow-sm ring-1 ring-gray-200/80\n             dark:bg-gray-800 dark:ring-gray-700/60\"\n      [ngClass]=\"iconContainerClass()\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        [ngClass]=\"iconSvgClass()\"\n        class=\"text-gray-500 dark:text-gray-400\"\n        [attr.viewBox]=\"icon() === 'custom' ? iconViewBox() : '0 0 24 24'\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path [attr.d]=\"resolvedIconPath()\" />\n      </svg>\n    </span>\n  </div>\n\n  <!-- ── Text + actions ─────────────────────────────────────────────────── -->\n  <div [ngClass]=\"textBlockClass()\">\n\n    <!-- Title -->\n    <h3 [ngClass]=\"titleClass()\">{{ title() }}</h3>\n\n    <!-- Message -->\n    @if (message()) {\n      <p [ngClass]=\"messageClass()\" class=\"mt-1\">{{ message() }}</p>\n    }\n\n    <!-- Projected rich content -->\n    <ng-content />\n\n    <!-- CTA actions -->\n    @if (actions().length > 0) {\n      <div [ngClass]=\"actionsClass()\">\n        @for (action of actions(); track action.id) {\n          <button\n            type=\"button\"\n            [ngClass]=\"actionClasses()[action.style ?? 'primary']\"\n            (click)=\"actionClick.emit(action.id)\"\n          >\n            @if (action.iconPath) {\n              <svg\n                class=\"shrink-0\"\n                [ngClass]=\"size() === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path [attr.d]=\"action.iconPath\" />\n              </svg>\n            }\n            {{ action.label }}\n          </button>\n        }\n      </div>\n    }\n\n  </div>\n\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@styloviz/empty-state",
+  "version": "0.1.1",
+  "description": "Full-page or inline empty states with icons, titles and action buttons.",
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/empty-state"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-empty-state.mjs",
+  "typings": "types/styloviz-empty-state.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-empty-state.d.ts",
+      "default": "./fesm2022/styloviz-empty-state.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-empty-state.d.ts

@@ -0,0 +1,109 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Visual size of the empty state block.
+ * - `sm`  — compact, inline use (table cells, sidebars)
+ * - `md`  — default card/panel use
+ * - `lg`  — full-page / hero-style
+ */
+type EmptyStateSize = 'sm' | 'md' | 'lg';
+/**
+ * Layout axis for the content stack.
+ * - `vertical`    — icon → title → message → actions (default)
+ * - `horizontal`  — icon on the left, text/actions on the right
+ */
+type EmptyStateLayout = 'vertical' | 'horizontal';
+/**
+ * Built-in icon preset.
+ * The component ships a curated set of SVG paths for the most common
+ * empty-state scenarios. Pass `iconPath` to override with any custom SVG.
+ */
+type EmptyStateIcon = 'inbox' | 'search' | 'folder' | 'users' | 'chart' | 'document' | 'notification' | 'cart' | 'filter' | 'star' | 'lock' | 'error' | 'custom';
+/** A single CTA button rendered below the message. */
+interface EmptyStateAction {
+    id: string;
+    label: string;
+    /** @default 'primary' */
+    style?: 'primary' | 'secondary' | 'ghost';
+    /** Optional SVG path prefix shown before the label. */
+    iconPath?: string;
+}
+/**
+ * EmptyState — A polished zero-data placeholder for tables, lists, dashboards,
+ * search results, and any panel that may have no content to display.
+ *
+ * Features:
+ * - 12 built-in contextual icon presets (no external assets required)
+ * - Custom SVG path override
+ * - Optional decorative illustration background ring
+ * - Vertical and horizontal layout modes
+ * - 3 sizes: sm (inline), md (card), lg (full-page)
+ * - Up to 3 CTA action buttons (primary / secondary / ghost)
+ * - Optional body slot for projected rich content below the message
+ * - Full dark-mode support
+ */
+declare class SvEmptyStateComponent {
+    /** Main heading text. */
+    title: _angular_core.InputSignal<string>;
+    /** Supporting message under the title. */
+    message: _angular_core.InputSignal<string>;
+    /**
+     * Built-in icon preset. Set to `'custom'` and provide `iconPath` to use
+     * your own SVG. @default 'inbox'
+     */
+    icon: _angular_core.InputSignal<EmptyStateIcon>;
+    /**
+     * Custom SVG `<path d="...">` — required when `icon === 'custom'`,
+     * ignored otherwise.
+     */
+    iconPath: _angular_core.InputSignal<string>;
+    /** SVG viewBox for a custom icon. @default '0 0 24 24' */
+    iconViewBox: _angular_core.InputSignal<string>;
+    /**
+     * Show the decorative concentric-ring background behind the icon.
+     * @default true
+     */
+    showRings: _angular_core.InputSignal<boolean>;
+    /** Overall size. @default 'md' */
+    size: _angular_core.InputSignal<EmptyStateSize>;
+    /** Content stacking axis. @default 'vertical' */
+    layout: _angular_core.InputSignal<EmptyStateLayout>;
+    /**
+     * Whether to render a card surface (border + background + rounded corners)
+     * or let the component blend into its parent.
+     * @default true
+     */
+    bordered: _angular_core.InputSignal<boolean>;
+    /** Additional CSS classes on the root element. */
+    customClass: _angular_core.InputSignal<string>;
+    /**
+     * CTA buttons rendered below the message.
+     * Maximum 3 — first one is typically primary, rest secondary/ghost.
+     */
+    actions: _angular_core.InputSignal<EmptyStateAction[]>;
+    /** Emitted when any action button is clicked, carrying the action's `id`. */
+    actionClick: _angular_core.OutputEmitterRef<string>;
+    resolvedIconPath: _angular_core.Signal<string>;
+    rootClasses: _angular_core.Signal<string>;
+    /** Outer ring container size keyed to component size. */
+    ringSizeClass: _angular_core.Signal<string>;
+    /** Inner icon container size. */
+    iconContainerClass: _angular_core.Signal<string>;
+    /** SVG icon size. */
+    iconSvgClass: _angular_core.Signal<string>;
+    titleClass: _angular_core.Signal<string>;
+    messageClass: _angular_core.Signal<string>;
+    textBlockClass: _angular_core.Signal<string>;
+    actionsClass: _angular_core.Signal<string>;
+    /**
+     * Pre-built action button class strings keyed by style variant.
+     * Computed once per `size()` change so the template does a cheap key lookup
+     * instead of calling a method inside the `@for` loop on every CD cycle.
+     */
+    actionClasses: _angular_core.Signal<Record<NonNullable<"primary" | "secondary" | "ghost" | undefined>, string>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvEmptyStateComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvEmptyStateComponent, "sv-empty-state", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPath": { "alias": "iconPath"; "required": false; "isSignal": true; }; "iconViewBox": { "alias": "iconViewBox"; "required": false; "isSignal": true; }; "showRings": { "alias": "showRings"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, ["*"], true, never>;
+}
+
+export { SvEmptyStateComponent };
+export type { EmptyStateAction, EmptyStateIcon, EmptyStateLayout, EmptyStateSize };