Empty state

<EmptyStateInline
  icon={ChartLine}
  title="No Insight listed yet"
  description="You'll see all your insights here. Not sure where to start?"
  action={
    <Button variant="outline" size="sm" asChild>
      <a href="#">Visit our guides</a>
    </Button>
  }
/>

<EmptyStateInline
  icon={MagnifyingGlass}
  title="No results found"
  description="Try clearing filters or expanding the date range."
/>

<EmptyStateInline
  icon={ChartPie}
  title="No data available"
/>

<ChartCard title="Insights">
  <EmptyStateInline
    icon={ChartLine}
    title="No Insight listed yet"
    description="You'll see all your insights here. Not sure where to start?"
    action={
      <Button variant="outline" size="sm" asChild>
        <a href="#">Visit our guides</a>
      </Button>
    }
  />
</ChartCard>

// Canonical shape — pass whatever illustration you want in the slot.
// For the 9 vendored Yuno animations, use AnimationFrame: it swaps
// light/dark with the kit theme and scales the fixed 592x444 scene to
// its container instead of cropping it.
import { EmptyStateHero, AnimationFrame } from "@/components/patterns/empty-state";

<EmptyStateHero
  tagline="No rules created yet"
  title="Create your first Rule"
  description="Set up custom velocity rules to control payment outcomes…"
  action={
    <Button>
      <Plus weight="light" /> Create rule
    </Button>
  }
  illustration={
    <iframe
      src="/empty-state/animations/rules/light.html"
      title="Rules empty state animation"
      className="h-full w-full border-0"
      loading="lazy"
    />
  }
/>

<EmptyStateHero
  title="Manage your Chargebacks"
  description="Track and respond to chargebacks efficiently…"
  action={<Button>View chargebacks</Button>}
  illustration={<iframe src="/empty-state/animations/chargebacks/light.html" … />}
/>

// Purely CSS. The pattern flips automatically:
//   - narrow (<xl): flex-col, illustration BELOW text
//   - xl+:         flex-row-reverse, illustration LEFT, text RIGHT
//
// The illustration slot uses width: min(100%, illustrationSize.width) +
// aspect-ratio so it shrinks proportionally at narrow widths without
// cropping the animation inside. Resize the browser to see the flip.

// Direct sibling imports (recommended)
import {
  EmptyStateInline,
  EmptyStateHero,
} from "@/components/patterns/empty-state";

// Namespace import (matches the Accordion.Root pattern in the kit)
import { EmptyState } from "@/components/patterns/empty-state";
// then: <EmptyState.Inline … />  or  <EmptyState.Hero … />