Empty State

---
// src/components/ui/display/empty-state/EmptyState.astro — headless primitive (see ../../README.md).
// The "no results", "nothing here yet", "your inbox is empty" block. Compose EmptyStateTitle /
// EmptyStateDescription / EmptyStateActions, and pass the illustration in the `media` slot.
//
// Two things earn it a file, and neither is the box:
//
//   • THE MEDIA IS DECORATION AND IS MARKED SO. An empty state's illustration repeats what the
//     heading below it already says, so it is wrapped `aria-hidden="true"` here — one place, once —
//     rather than left to whoever pastes the SVG in. Get that wrong and every empty state announces
//     a stray "image" or, worse, a filename.
//   • `live` MAKES IT AN ANNOUNCEMENT. An empty state that replaces a list after a filter is a
//     change nothing else reports: focus stays in the search box, the rows vanish, and a screen
//     reader user hears nothing at all. `live` renders `role="status"`, which announces the block
//     when it appears. It is OFF by default because a server-rendered empty state has no change to
//     report, and a live region that is already on screen at load announces nothing anyway.
//
//   <EmptyState live>
//     <svg slot="media" … />
//     <EmptyStateTitle>No invoices</EmptyStateTitle>
//     <EmptyStateDescription>Nothing matches "draft".</EmptyStateDescription>
//     <EmptyStateActions><Button>Clear filters</Button></EmptyStateActions>
//   </EmptyState>
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  /** Announce the block when it appears — for an empty state swapped in after a search or filter. */
  live?: boolean;
  size?: "sm" | "md" | "lg";
};

const { live = false, size = "md", class: className, ...rest } = Astro.props;
---

<div
  role={live ? "status" : undefined}
  class={className}
  data-slot="empty-state"
  data-size={size}
  {...rest}
>
  {
    Astro.slots.has("media") && (
      <div data-slot="empty-state-media" aria-hidden="true">
        <slot name="media" />
      </div>
    )
  }
  <slot />
</div>

---
// src/components/ui/display/empty-state/EmptyStateActions.astro — EmptyState compound part
// (see ../../README.md). The row of buttons or links that resolves the empty state. Keep it LAST: it is
// the answer to the title above it, and a screen reader reads the reason before the remedy.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div class={className} data-slot="empty-state-actions" {...rest}><slot /></div>

---
// src/components/ui/display/empty-state/EmptyStateDescription.astro — EmptyState compound part
// (see ../../README.md). The sentence under the title. Say what to do next, not just what is missing.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"p">;

const { class: className, ...rest } = Astro.props;
---

<p class={className} data-slot="empty-state-description" {...rest}><slot /></p>

---
// src/components/ui/display/empty-state/EmptyStateTitle.astro — EmptyState compound part (see ../../README.md).
// <h3>, the same level CardTitle takes: an empty state stands in for a section's content, so it sits
// below that section's own heading. Wrap it in your own heading level if the nesting differs.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"h3">;

const { class: className, ...rest } = Astro.props;
---

<h3 class={className} data-slot="empty-state-title" {...rest}><slot /></h3>

import EmptyState from "./EmptyState.astro";
import EmptyStateActions from "./EmptyStateActions.astro";
import EmptyStateDescription from "./EmptyStateDescription.astro";
import EmptyStateTitle from "./EmptyStateTitle.astro";

export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateTitle };
export default EmptyState;