Stack Ripple

# Brok UI: Stack Ripple (`stack-ripple`)

Three notification cards that rest as an overlapping deck and fan into a column when toggled, via CSS-only translate/scale transitions. The toggle exposes aria-expanded / aria-controls.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add stack-ripple
```

## Usage

```blade
<div class="w-full flex justify-center p-6">
    <x-ui.stack-ripple />
</div>
```

## Props

- `items` (array, default `[…]`) — Notification cards in the deck; each needs icon, title, meta and time.

## Use when

- Use sparingly to celebrate significant completion or add a memorable moment.
- Showing a small set (about three) of notification-style cards compactly as a resting overlapping deck that a visitor can expand into a readable column on demand.
- Wanting a lightweight, CSS-only fan-out toggle rather than a carousel or navigable stack.

## Avoid when

- Do not inject celebration into routine high-frequency workflows or serious contexts.
- The cards need to be individually navigated, reordered, or dismissed; this component only toggles between a collapsed deck and an expanded column. Use draggable-card-stack or layered-stack for that.

## Anti-patterns

- Celebration in routine, serious, or high-frequency workflows

## Rules

- Use the `<brok:stack-ripple>` tag (or `<x-ui.stack-ripple>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/stack-ripple
- Registry JSON (files, props, contract): https://brokui.dev/r/open/stack-ripple.json

@props([
    // Each card: icon (glyph name), title, meta, time.
    'items' => [
        ['icon' => 'message', 'title' => 'New Message', 'meta' => 'Acme Inc', 'time' => '3 hrs ago'],
        ['icon' => 'user', 'title' => 'User Signed Up', 'meta' => 'Acme Inc', 'time' => '7 hrs ago'],
        ['icon' => 'card', 'title' => 'Billing Reminder', 'meta' => 'Acme Inc', 'time' => '9 hrs ago'],
    ],
])

@php
    $glyphs = [
        'message' => 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
        'user' => 'M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8',
        'card' => 'M2 5h20v14H2zM2 10h20',
    ];
    $items = array_values($items);

    // Per-card open/closed transforms (top / middle / bottom). v4 translate +
    // scale are independent properties, so they compose cleanly.
    $states = [
        ['z-10', 'open ? \'-translate-y-[4.75rem] scale-100 opacity-100\' : \'-translate-y-1 scale-95 opacity-80\''],
        ['z-30', 'open ? \'translate-y-0 scale-100\' : \'translate-y-0 scale-100\''],
        ['z-20', 'open ? \'translate-y-[4.75rem] scale-100 opacity-100\' : \'translate-y-1 scale-95 opacity-80\''],
    ];
@endphp

{{-- Stack Ripple: three notification cards that rest as an overlapping deck and
     fan into a column when toggled. Motion is CSS-only (reduced motion disables
     the transitions); the toggle exposes aria-expanded / aria-controls. --}}
<div
    data-slot="stack-ripple"
    x-data="uiStackRipple()"
    {{ $attributes->merge(['class' => 'relative mx-auto w-full max-w-sm']) }}
>
    <div id="stack-ripple-deck" class="relative h-64">
        @foreach ($items as $i => $item)
            <div
                class="absolute inset-x-0 top-1/2 mx-auto -mt-7 flex w-[88%] items-center justify-between rounded-md border border-border bg-card px-3 py-2 text-card-foreground shadow-sm transition-all duration-500 ease-out motion-reduce:transition-none {{ $states[$i][0] }}"
                :class="{{ $states[$i][1] }}"
            >
                <div class="flex items-center gap-2">
                    <span class="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5" aria-hidden="true">
                            <path d="{{ $glyphs[$item['icon'] ?? 'message'] ?? $glyphs['message'] }}" />
                        </svg>
                    </span>
                    <div class="flex flex-col">
                        <p class="text-xs font-medium text-foreground">{{ __($item['title']) }}</p>
                        <p class="text-2xs text-muted-foreground">{{ __($item['meta']) }}</p>
                    </div>
                </div>
                <span class="text-2xs text-muted-foreground">{{ __($item['time']) }}</span>
            </div>
        @endforeach
    </div>

    <button
        type="button"
        @click="toggle()"
        :aria-expanded="open ? 'true' : 'false'"
        aria-controls="stack-ripple-deck"
        class="mx-auto flex h-8 w-24 items-center justify-center gap-1 rounded-md border border-border bg-card text-xs text-muted-foreground shadow-sm transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
    >
        <span x-text="open ? '{{ __('Hide') }}' : '{{ __('Show all') }}'">{{ __('Show all') }}</span>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 transition-transform duration-300 motion-reduce:transition-none" :class="open && 'rotate-180'" aria-hidden="true">
            <path d="m6 9 6 6 6-6" />
        </svg>
    </button>
</div>