import{x as a}from"./iframe-CMPv_g6-.js";import{b as i}from"./celebrate-KwPoF1K3.js";import{B as r}from"./Button-DskBi-a0.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Celebrate",tags:["autodocs"],parameters:{docs:{subtitle:"A sparkle burst effect for delightful micro-interactions",description:{component:`
A celebratory sparkle animation that fires from a given position. Colored circles, ellipses, and sparkle particles burst outward using CSS offset-path animations.

### Usage

\`\`\`ts
import { btuCelebrate } from '@brightspot/ui/effects/celebrate.js'

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

// Event-driven
const teardown = btuCelebrate.listen()
el.dispatchEvent(new CustomEvent('btu-effect-celebrate', {
  detail: { position: el },
  bubbles: true, composed: true,
}))
\`\`\`
        `}},controls:{expanded:!0}},argTypes:{duration:{control:{type:"range",min:500,max:5e3,step:100},description:"Animation duration (ms)"},size:{control:{type:"range",min:100,max:600,step:50},description:"Size of the sparkle burst area (px)"}},args:{duration:2e3,size:300}},n={render:s=>a`
      <div @click=${t=>i({position:t,...s})} class="bg-gray-50" style="min-height: 100vh;">
        <div class="flex flex-col gap-8 p-6">
          <div class="flex flex-col gap-2">
            <h2 class="text-2xl font-semibold text-gray-900">Celebrate</h2>
            <p class="text-sm text-gray-500">
              Click anywhere or on a button to trigger the sparkle burst. The effect fires from the click position and
              cleans up automatically.
            </p>
          </div>

          <div class="flex flex-wrap items-center gap-3">
            ${r({color:"primary",fill:!0,contained:!0,size:"lg",label:"Celebrate!",icon:"sparkles"})}
            ${r({color:"success",fill:!0,contained:!0,size:"md",label:"Hooray!",icon:"check"})}
            ${r({color:"warning",fill:!0,contained:!0,size:"md",label:"Wow!",icon:"star"})}
          </div>
        </div>
      </div>
    `,parameters:{docs:{description:{story:"Click anywhere to trigger the default sparkle burst animation."}}}},o={args:{duration:2e3,size:300},render:s=>{const e=t=>{t.stopPropagation();const l=t.currentTarget??t.target;i({position:l,...s})};return a`
      <div class="bg-gray-50" style="min-height: 40vh;">
        <div class="flex flex-col gap-6 p-6">
          <div class="flex flex-col gap-2">
            <h2 class="text-2xl font-semibold text-gray-900">Element-Centered</h2>
            <p class="text-sm text-gray-500">
              The sparkle fires from the center of the clicked element, not from the pointer position.
            </p>
          </div>

          <div class="flex flex-wrap items-center gap-4">
            <button
              @click=${e}
              class="btu-button-fill btu-button-contained btu-button btu-button-primary btu-button-lg"
            >
              <btu-icon name="star" class="btu-icon btu-icon-sm"></btu-icon>
              Star
            </button>
            <button
              @click=${e}
              class="btu-button-fill btu-button-contained btu-button btu-button-success btu-button-lg"
            >
              <btu-icon name="check" class="btu-icon btu-icon-sm"></btu-icon>
              Complete
            </button>
            <button
              @click=${e}
              class="btu-button-fill btu-button-contained btu-button btu-button-error btu-button-lg"
            >
              <btu-icon name="heart" class="btu-icon btu-icon-sm"></btu-icon>
              Love
            </button>
          </div>
        </div>
      </div>
    `},parameters:{docs:{description:{story:"Passing an `Element` as the position centers the sparkle on that element instead of the pointer coordinates."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  render: args => {
    const onClick = (e: MouseEvent) => btuCelebrate({
      position: e,
      ...args
    });
    return html\`
      <div @click=\${onClick} class="bg-gray-50" style="min-height: 100vh;">
        <div class="flex flex-col gap-8 p-6">
          <div class="flex flex-col gap-2">
            <h2 class="text-2xl font-semibold text-gray-900">Celebrate</h2>
            <p class="text-sm text-gray-500">
              Click anywhere or on a button to trigger the sparkle burst. The effect fires from the click position and
              cleans up automatically.
            </p>
          </div>

          <div class="flex flex-wrap items-center gap-3">
            \${Button({
      color: 'primary',
      fill: true,
      contained: true,
      size: 'lg',
      label: 'Celebrate!',
      icon: 'sparkles'
    })}
            \${Button({
      color: 'success',
      fill: true,
      contained: true,
      size: 'md',
      label: 'Hooray!',
      icon: 'check'
    })}
            \${Button({
      color: 'warning',
      fill: true,
      contained: true,
      size: 'md',
      label: 'Wow!',
      icon: 'star'
    })}
          </div>
        </div>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: 'Click anywhere to trigger the default sparkle burst animation.'
      }
    }
  }
}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  args: {
    duration: 2000,
    size: 300
  },
  render: args => {
    const onButtonClick = (e: MouseEvent) => {
      e.stopPropagation();
      const target = e.currentTarget as HTMLElement ?? e.target;
      btuCelebrate({
        position: target,
        ...args
      });
    };
    return html\`
      <div class="bg-gray-50" style="min-height: 40vh;">
        <div class="flex flex-col gap-6 p-6">
          <div class="flex flex-col gap-2">
            <h2 class="text-2xl font-semibold text-gray-900">Element-Centered</h2>
            <p class="text-sm text-gray-500">
              The sparkle fires from the center of the clicked element, not from the pointer position.
            </p>
          </div>

          <div class="flex flex-wrap items-center gap-4">
            <button
              @click=\${onButtonClick}
              class="btu-button-fill btu-button-contained btu-button btu-button-primary btu-button-lg"
            >
              <btu-icon name="star" class="btu-icon btu-icon-sm"></btu-icon>
              Star
            </button>
            <button
              @click=\${onButtonClick}
              class="btu-button-fill btu-button-contained btu-button btu-button-success btu-button-lg"
            >
              <btu-icon name="check" class="btu-icon btu-icon-sm"></btu-icon>
              Complete
            </button>
            <button
              @click=\${onButtonClick}
              class="btu-button-fill btu-button-contained btu-button btu-button-error btu-button-lg"
            >
              <btu-icon name="heart" class="btu-icon btu-icon-sm"></btu-icon>
              Love
            </button>
          </div>
        </div>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: 'Passing an \`Element\` as the position centers the sparkle on that element instead of the pointer coordinates.'
      }
    }
  }
}`,...o.parameters?.docs?.source}}};const f=["Default","OnElement"];export{n as Default,o as OnElement,f as __namedExportsOrder,m as default};
