import{x as i}from"./iframe-CMPv_g6-.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-DskBi-a0.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Hue Ripple",tags:["autodocs"],parameters:{docs:{subtitle:"Click anywhere to send a hue-shifting ripple across the viewport",description:{component:`
Uses the **View Transition API** to create an expanding ring that reveals OKLCH-shifted colors as it sweeps past each element, then they return to normal.

### Usage

\`\`\`ts
import { btuRipple } from '@brightspot/ui/effects/ripple.js'

// Imperative — pass a MouseEvent, Element, or {x, y}
button.addEventListener('click', (e) => btuRipple({ position: e }))

// Event-driven
const teardown = btuRipple.listen()
el.dispatchEvent(new CustomEvent('btu-effect-ripple', {
  detail: { position: el, duration: 800 },
  bubbles: true, composed: true,
}))

// Global defaults
btuRipple.setDefaults({ duration: 800, contrast: 2 })
\`\`\`
        `}},controls:{expanded:!0}},argTypes:{duration:{control:{type:"range",min:500,max:5e3,step:100},description:"Animation duration (ms)"},ringWidth:{control:{type:"range",min:10,max:100,step:5},description:"Width of the hue-shifted band (px)"},feather:{control:{type:"range",min:10,max:120,step:5},description:"Feathered edge transition width (px)"},hueShift:{control:{type:"range",min:0,max:330,step:30},description:"OKLCH hue rotation amount (degrees)"},contrast:{control:{type:"range",min:.5,max:3,step:.1},description:"Contrast multiplier (1 = normal, >1 = higher contrast)"},saturate:{control:{type:"range",min:0,max:5,step:.5},description:"Saturation multiplier (1 = normal, >1 = hyper-saturated, <1 = desaturated)"}},args:{duration:2e3,ringWidth:30,feather:45,hueShift:180,contrast:1,saturate:1}},t={args:{duration:1200,ringWidth:40,feather:75,hueShift:0,contrast:1.8,saturate:1.5},render:a=>i`
      <div @click=${r=>l({position:r,...a})} class="bg-gray-50" style="min-height: 80vh;">
        <div class="flex flex-col gap-8 p-6">
          <!-- Header -->
          <div class="flex flex-col gap-2">
            <h2 class="text-2xl font-semibold text-gray-900">Hue Ripple</h2>
            <p class="text-sm text-gray-500">
              Click anywhere. The expanding ring shifts underlying colors and returns to normal after the ring passes.
            </p>
            <p class="rounded-md border border-warning-200 bg-warning-50 px-3 py-2 text-xs text-warning-700">
              ⚠ The UI is non-interactive during the view transition.
            </p>
          </div>

          <!-- Button row -->
          <div class="flex flex-col gap-3">
            <h3 class="text-sm font-medium text-gray-700">Buttons</h3>
            <div class="flex flex-wrap items-center gap-3">
              ${e({color:"primary",fill:!0,contained:!0,size:"lg",label:"Primary",icon:"zap"})}
              ${e({color:"error",fill:!0,contained:!0,size:"md",label:"Error"})}
              ${e({color:"success",fill:!0,contained:!0,size:"md",label:"Success",icon:"check"})}
              ${e({color:"teal",fill:!0,contained:!0,size:"sm",label:"Teal"})}
              ${e({color:"purple",fill:!0,contained:!0,size:"sm",label:"Purple"})}
              ${e({color:"warning",fill:!0,contained:!0,size:"sm",label:"Warning",icon:"triangle-alert"})}
              ${e({color:"rose",fill:!0,contained:!0,size:"sm",label:"Rose"})}
            </div>
            <div class="flex flex-wrap items-center gap-3">
              ${e({color:"primary",fill:!1,contained:!0,size:"md",label:"Contained"})}
              ${e({color:"primary",fill:!1,outlined:!0,size:"md",label:"Outlined",icon:"star"})}
              ${e({color:"black",fill:!0,contained:!0,size:"md",label:"Black"})}
              ${e({color:"white",fill:!0,contained:!0,size:"md",label:"White"})}
              ${e({color:"ai",fill:!0,contained:!0,size:"md",label:"AI",icon:"sparkles"})}
            </div>
          </div>

          <!-- Badges -->
          <div class="flex flex-col gap-3">
            <h3 class="text-sm font-medium text-gray-700">Badges</h3>
            <div class="flex flex-wrap items-center gap-3">
              <btu-badge variant="primary" size="lg">Primary</btu-badge>
              <btu-badge variant="success" size="md">Published</btu-badge>
              <btu-badge variant="error" size="md" dot>Error</btu-badge>
              <btu-badge variant="warning" size="sm">Draft</btu-badge>
              <btu-badge variant="info" size="sm">Info</btu-badge>
            </div>
          </div>

          <!-- Avatars -->
          <div class="flex flex-col gap-3">
            <h3 class="text-sm font-medium text-gray-700">Avatars</h3>
            <div class="flex items-center gap-3">
              <btu-avatar fallback="AB" size="lg" style="--avatar-bg-color: oklch(65% 0.2 264)"></btu-avatar>
              <btu-avatar fallback="CD" size="lg" style="--avatar-bg-color: oklch(65% 0.2 27)"></btu-avatar>
              <btu-avatar fallback="EF" size="lg" style="--avatar-bg-color: oklch(65% 0.2 157)"></btu-avatar>
              <btu-avatar fallback="GH" size="lg" style="--avatar-bg-color: oklch(65% 0.2 330)"></btu-avatar>
              <btu-avatar fallback="IJ" size="md" style="--avatar-bg-color: oklch(65% 0.2 60)"></btu-avatar>
              <btu-avatar fallback="KL" size="md" style="--avatar-bg-color: oklch(65% 0.2 180)"></btu-avatar>
            </div>
          </div>

          <!-- Colored cards -->
          <div class="flex flex-col gap-3">
            <h3 class="text-sm font-medium text-gray-700">Color Swatches</h3>
            <div class="grid grid-cols-3 gap-3 sm:grid-cols-6">
              <div
                class="flex h-20 items-center justify-center rounded-lg bg-primary-500 text-sm font-medium text-white"
              >
                Primary
              </div>
              <div class="flex h-20 items-center justify-center rounded-lg bg-teal-500 text-sm font-medium text-white">
                Teal
              </div>
              <div
                class="flex h-20 items-center justify-center rounded-lg bg-purple-500 text-sm font-medium text-white"
              >
                Purple
              </div>
              <div class="flex h-20 items-center justify-center rounded-lg bg-error-500 text-sm font-medium text-white">
                Error
              </div>
              <div
                class="flex h-20 items-center justify-center rounded-lg bg-success-500 text-sm font-medium text-white"
              >
                Success
              </div>
              <div
                class="flex h-20 items-center justify-center rounded-lg bg-warning-500 text-sm font-medium text-white"
              >
                Warning
              </div>
            </div>
          </div>
        </div>
      </div>
    `,parameters:{docs:{description:{story:"Full demo scene. Click anywhere — the ring reveals OKLCH-shifted colors as it sweeps past each element, then they return to normal."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
  args: {
    duration: 1200,
    ringWidth: 40,
    feather: 75,
    hueShift: 0,
    contrast: 1.8,
    saturate: 1.5
  },
  render: args => {
    const onClick = (e: MouseEvent) => btuRipple({
      position: e,
      ...args
    });
    return html\`
      <div @click=\${onClick} class="bg-gray-50" style="min-height: 80vh;">
        <div class="flex flex-col gap-8 p-6">
          <!-- Header -->
          <div class="flex flex-col gap-2">
            <h2 class="text-2xl font-semibold text-gray-900">Hue Ripple</h2>
            <p class="text-sm text-gray-500">
              Click anywhere. The expanding ring shifts underlying colors and returns to normal after the ring passes.
            </p>
            <p class="rounded-md border border-warning-200 bg-warning-50 px-3 py-2 text-xs text-warning-700">
              ⚠ The UI is non-interactive during the view transition.
            </p>
          </div>

          <!-- Button row -->
          <div class="flex flex-col gap-3">
            <h3 class="text-sm font-medium text-gray-700">Buttons</h3>
            <div class="flex flex-wrap items-center gap-3">
              \${Button({
      color: 'primary',
      fill: true,
      contained: true,
      size: 'lg',
      label: 'Primary',
      icon: 'zap'
    })}
              \${Button({
      color: 'error',
      fill: true,
      contained: true,
      size: 'md',
      label: 'Error'
    })}
              \${Button({
      color: 'success',
      fill: true,
      contained: true,
      size: 'md',
      label: 'Success',
      icon: 'check'
    })}
              \${Button({
      color: 'teal',
      fill: true,
      contained: true,
      size: 'sm',
      label: 'Teal'
    })}
              \${Button({
      color: 'purple',
      fill: true,
      contained: true,
      size: 'sm',
      label: 'Purple'
    })}
              \${Button({
      color: 'warning',
      fill: true,
      contained: true,
      size: 'sm',
      label: 'Warning',
      icon: 'triangle-alert'
    })}
              \${Button({
      color: 'rose',
      fill: true,
      contained: true,
      size: 'sm',
      label: 'Rose'
    })}
            </div>
            <div class="flex flex-wrap items-center gap-3">
              \${Button({
      color: 'primary',
      fill: false,
      contained: true,
      size: 'md',
      label: 'Contained'
    })}
              \${Button({
      color: 'primary',
      fill: false,
      outlined: true,
      size: 'md',
      label: 'Outlined',
      icon: 'star'
    })}
              \${Button({
      color: 'black',
      fill: true,
      contained: true,
      size: 'md',
      label: 'Black'
    })}
              \${Button({
      color: 'white',
      fill: true,
      contained: true,
      size: 'md',
      label: 'White'
    })}
              \${Button({
      color: 'ai',
      fill: true,
      contained: true,
      size: 'md',
      label: 'AI',
      icon: 'sparkles'
    })}
            </div>
          </div>

          <!-- Badges -->
          <div class="flex flex-col gap-3">
            <h3 class="text-sm font-medium text-gray-700">Badges</h3>
            <div class="flex flex-wrap items-center gap-3">
              <btu-badge variant="primary" size="lg">Primary</btu-badge>
              <btu-badge variant="success" size="md">Published</btu-badge>
              <btu-badge variant="error" size="md" dot>Error</btu-badge>
              <btu-badge variant="warning" size="sm">Draft</btu-badge>
              <btu-badge variant="info" size="sm">Info</btu-badge>
            </div>
          </div>

          <!-- Avatars -->
          <div class="flex flex-col gap-3">
            <h3 class="text-sm font-medium text-gray-700">Avatars</h3>
            <div class="flex items-center gap-3">
              <btu-avatar fallback="AB" size="lg" style="--avatar-bg-color: oklch(65% 0.2 264)"></btu-avatar>
              <btu-avatar fallback="CD" size="lg" style="--avatar-bg-color: oklch(65% 0.2 27)"></btu-avatar>
              <btu-avatar fallback="EF" size="lg" style="--avatar-bg-color: oklch(65% 0.2 157)"></btu-avatar>
              <btu-avatar fallback="GH" size="lg" style="--avatar-bg-color: oklch(65% 0.2 330)"></btu-avatar>
              <btu-avatar fallback="IJ" size="md" style="--avatar-bg-color: oklch(65% 0.2 60)"></btu-avatar>
              <btu-avatar fallback="KL" size="md" style="--avatar-bg-color: oklch(65% 0.2 180)"></btu-avatar>
            </div>
          </div>

          <!-- Colored cards -->
          <div class="flex flex-col gap-3">
            <h3 class="text-sm font-medium text-gray-700">Color Swatches</h3>
            <div class="grid grid-cols-3 gap-3 sm:grid-cols-6">
              <div
                class="flex h-20 items-center justify-center rounded-lg bg-primary-500 text-sm font-medium text-white"
              >
                Primary
              </div>
              <div class="flex h-20 items-center justify-center rounded-lg bg-teal-500 text-sm font-medium text-white">
                Teal
              </div>
              <div
                class="flex h-20 items-center justify-center rounded-lg bg-purple-500 text-sm font-medium text-white"
              >
                Purple
              </div>
              <div class="flex h-20 items-center justify-center rounded-lg bg-error-500 text-sm font-medium text-white">
                Error
              </div>
              <div
                class="flex h-20 items-center justify-center rounded-lg bg-success-500 text-sm font-medium text-white"
              >
                Success
              </div>
              <div
                class="flex h-20 items-center justify-center rounded-lg bg-warning-500 text-sm font-medium text-white"
              >
                Warning
              </div>
            </div>
          </div>
        </div>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: 'Full demo scene. Click anywhere — the ring reveals OKLCH-shifted colors as it sweeps past each element, then they return to normal.'
      }
    }
  }
}`,...t.parameters?.docs?.source}}};const g=["Default"];export{t as Default,g as __namedExportsOrder,m as default};
