@brightspot/ui 1.8.0 → 1.10.0

package/dist/storybook/assets/CombinedEffects.stories-jFekKTYg.js

@@ -0,0 +1,355 @@
+import{x as i}from"./iframe-BqvwP3or.js";import{b as d}from"./celebrate-KwPoF1K3.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as r}from"./Button-Dg-fIrzT.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const v={title:"Effects/Combined Effects",tags:["autodocs"],parameters:{docs:{subtitle:"Ripple + Sparkle via Houdini Paint API inside the View Transition",description:{component:"Triggers `btuRipple` with the `sparkle` option. When the CSS Paint API is available (Chrome/Edge), sparkle particles render directly on the View Transition pseudo-element via a paint worklet — synchronized with the ripple ring. Falls back to DOM-based `btuCelebrate` in other browsers."}},controls:{expanded:!0}},argTypes:{rippleDuration:{control:{type:"range",min:500,max:5e3,step:100},description:"Ripple 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 (degrees)"},contrast:{control:{type:"range",min:.5,max:3,step:.1},description:"Contrast multiplier"},saturate:{control:{type:"range",min:0,max:5,step:.5},description:"Saturation multiplier"},sparkle:{control:"boolean",description:"Enable sparkle particles via CSS Paint API (Chrome/Edge). Falls back to DOM celebrate when off."},sparkleDuration:{control:{type:"range",min:500,max:5e3,step:100},description:"Sparkle animation duration (ms) — independent from ripple duration"},sparkleSize:{control:{type:"range",min:100,max:600,step:50},description:"Sparkle burst area size (px)"}},args:{rippleDuration:1200,ringWidth:40,feather:75,hueShift:0,contrast:1.8,saturate:1.5,sparkle:!0,sparkleDuration:2e3,sparkleSize:300}},s={args:{rippleDuration:1e3,ringWidth:35,hueShift:0,sparkleDuration:1300,sparkleSize:300,contrast:1.5,saturate:2.5,feather:115},render:e=>i`
+      <div @click=${async a=>{const{ready:t}=l({position:a,duration:e.rippleDuration,ringWidth:e.ringWidth,feather:e.feather,hueShift:e.hueShift,contrast:e.contrast,saturate:e.saturate,sparkle:e.sparkle?{size:e.sparkleSize,duration:e.sparkleDuration}:!1});e.sparkle||(await t,d({position:a,size:e.sparkleSize}))}} class="flex" style="min-height: 100vh;">
+        <!-- Left Nav Rail -->
+        <div class="flex w-16 flex-shrink-0 flex-col items-center gap-4 border-r border-gray-200 bg-white py-4">
+          <div class="bg-primary-500 h-8 w-8 rounded-lg"></div>
+          <div class="mt-2 h-5 w-5 rounded bg-gray-300"></div>
+          <div class="h-5 w-5 rounded bg-gray-300"></div>
+          <div class="h-5 w-5 rounded bg-gray-300"></div>
+          <div class="h-5 w-5 rounded bg-gray-300"></div>
+          <div class="h-5 w-5 rounded bg-gray-200"></div>
+          <div class="h-5 w-5 rounded bg-gray-200"></div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="flex min-w-0 flex-1 flex-col bg-gray-50">
+          <!-- Header -->
+          <div class="flex h-14 items-center justify-between border-b border-gray-200 bg-white px-6">
+            <div class="flex items-center gap-3">
+              <span class="text-sm font-semibold text-gray-900">Lorem Ipsum</span>
+              <div class="h-5 w-5 rounded bg-gray-200"></div>
+              <span class="bg-primary-100 text-primary-700 rounded px-2 py-0.5 text-xs font-medium">EN</span>
+            </div>
+            <div class="flex items-center gap-3">
+              <div class="h-8 w-64 rounded-md bg-gray-100"></div>
+              ${r({color:"primary",fill:!0,contained:!0,size:"sm",label:"",icon:"plus"})}
+            </div>
+          </div>
+
+          <!-- Tabs -->
+          <div class="flex gap-6 border-b border-gray-200 bg-white px-6">
+            <span class="border-primary-500 text-primary-600 border-b-2 py-3 text-sm font-medium">Dolor</span>
+            <span class="py-3 text-sm text-gray-500">Amet</span>
+            <span class="py-3 text-sm text-gray-500">Consectetur</span>
+            <span class="py-3 text-sm text-gray-500">Adipiscing</span>
+            <span class="py-3 text-sm text-gray-500">Elit</span>
+          </div>
+
+          <!-- Page Content -->
+          <div class="flex flex-col gap-6 p-6">
+            <!-- Warning -->
+            <p class="bg-warning-50 text-warning-700 border-warning-200 rounded-md border px-3 py-2 text-xs">
+              ⚠ Click anywhere — the hue ripple sweeps outward while sparkles burst from the click point. The UI is
+              non-interactive during the view transition.
+            </p>
+
+            <!-- Quick Start -->
+            <div class="flex gap-3">
+              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
+                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <span class="text-sm font-medium text-gray-700">Sed Do</span>
+                <div class="bg-primary-500 h-1 w-full rounded"></div>
+              </div>
+              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
+                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <span class="text-sm font-medium text-gray-700">Eiusmod</span>
+              </div>
+              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
+                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <span class="text-sm font-medium text-gray-700">Tempor</span>
+              </div>
+            </div>
+
+            <!-- Two-Column Widgets -->
+            <div class="grid grid-cols-2 gap-6">
+              <!-- Recent Activity -->
+              <div class="rounded-lg border border-gray-200 bg-white">
+                <div class="flex items-center justify-between border-b border-gray-100 px-5 py-3">
+                  <span class="text-sm font-semibold text-gray-900">Incididunt</span>
+                  <div class="h-5 w-5 rounded bg-gray-200"></div>
+                </div>
+                <div class="flex flex-col">
+                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
+                    <div class="h-8 w-8 rounded bg-gray-100"></div>
+                    <div class="flex flex-1 flex-col gap-1">
+                      <div class="h-3 w-3/4 rounded bg-gray-200"></div>
+                      <div class="h-2 w-1/3 rounded bg-gray-100"></div>
+                    </div>
+                    <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Ipsum</span>
+                  </div>
+                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
+                    <div class="h-8 w-8 rounded bg-gray-100"></div>
+                    <div class="flex flex-1 flex-col gap-1">
+                      <div class="h-3 w-2/3 rounded bg-gray-200"></div>
+                      <div class="h-2 w-1/4 rounded bg-gray-100"></div>
+                    </div>
+                    <span class="bg-warning-100 text-warning-700 rounded-full px-2 py-0.5 text-xs">Dolor</span>
+                  </div>
+                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
+                    <div class="h-8 w-8 rounded bg-gray-100"></div>
+                    <div class="flex flex-1 flex-col gap-1">
+                      <div class="h-3 w-1/2 rounded bg-gray-200"></div>
+                      <div class="h-2 w-1/3 rounded bg-gray-100"></div>
+                    </div>
+                    <span class="bg-error-100 text-error-700 rounded-full px-2 py-0.5 text-xs">Amet</span>
+                  </div>
+                  <div class="flex items-center gap-3 px-5 py-3">
+                    <div class="h-8 w-8 rounded bg-gray-100"></div>
+                    <div class="flex flex-1 flex-col gap-1">
+                      <div class="h-3 w-3/5 rounded bg-gray-200"></div>
+                      <div class="h-2 w-1/4 rounded bg-gray-100"></div>
+                    </div>
+                    <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Ipsum</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Workstreams -->
+              <div class="rounded-lg border border-gray-200 bg-white">
+                <div class="flex items-center justify-between border-b border-gray-100 px-5 py-3">
+                  <span class="text-sm font-semibold text-gray-900">Labore</span>
+                  <div class="h-5 w-5 rounded bg-gray-200"></div>
+                </div>
+                <div class="flex flex-col gap-4 p-5">
+                  <div class="rounded-lg border border-gray-100 p-4">
+                    <div class="flex items-center gap-2">
+                      <span class="text-xs text-gray-500">Magna Aliqua</span>
+                      <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Sit</span>
+                    </div>
+                    <p class="mt-1 text-sm font-medium text-gray-900">Ut enim ad minim veniam</p>
+                    <p class="mt-0.5 text-xs text-gray-500">Quis nostrud exercitation ullamco...</p>
+                    <div class="mt-3 flex items-center justify-between">
+                      <span class="text-xs text-gray-500">60%</span>
+                      ${r({color:"primary",fill:!0,contained:!0,size:"sm",label:"View"})}
+                    </div>
+                    <div class="bg-primary-500 mt-2 h-1.5 w-3/5 rounded-full"></div>
+                  </div>
+                  <div class="rounded-lg border border-gray-100 p-4">
+                    <div class="flex items-center gap-2">
+                      <span class="text-xs text-gray-500">Magna Aliqua</span>
+                      <span class="bg-warning-100 text-warning-700 rounded-full px-2 py-0.5 text-xs">Sed</span>
+                    </div>
+                    <p class="mt-1 text-sm font-medium text-gray-900">Duis aute irure dolor</p>
+                    <p class="mt-0.5 text-xs text-gray-500">Excepteur sint occaecat cupidatat...</p>
+                    <div class="mt-3 flex items-center justify-between">
+                      <span class="text-xs text-gray-500">30%</span>
+                      ${r({color:"primary",fill:!0,contained:!0,size:"sm",label:"View"})}
+                    </div>
+                    <div class="bg-primary-500 mt-2 h-1.5 w-1/3 rounded-full"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,parameters:{docs:{description:{story:"Sparkle particles render inside the View Transition via the CSS Paint API, synchronized with the hue ripple ring. Toggle the `sparkle` control to compare with the DOM-based celebrate fallback."}}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    rippleDuration: 1000,
+    ringWidth: 35,
+    hueShift: 0,
+    sparkleDuration: 1300,
+    sparkleSize: 300,
+    contrast: 1.5,
+    saturate: 2.5,
+    feather: 115
+  },
+  render: args => {
+    const onClick = async (e: MouseEvent) => {
+      const {
+        ready
+      } = btuRipple({
+        position: e,
+        duration: args.rippleDuration,
+        ringWidth: args.ringWidth,
+        feather: args.feather,
+        hueShift: args.hueShift,
+        contrast: args.contrast,
+        saturate: args.saturate,
+        sparkle: args.sparkle ? {
+          size: args.sparkleSize,
+          duration: args.sparkleDuration
+        } : false
+      });
+      if (!args.sparkle) {
+        await ready;
+        btuCelebrate({
+          position: e,
+          size: args.sparkleSize
+        });
+      }
+    };
+    return html\`
+      <div @click=\${onClick} class="flex" style="min-height: 100vh;">
+        <!-- Left Nav Rail -->
+        <div class="flex w-16 flex-shrink-0 flex-col items-center gap-4 border-r border-gray-200 bg-white py-4">
+          <div class="bg-primary-500 h-8 w-8 rounded-lg"></div>
+          <div class="mt-2 h-5 w-5 rounded bg-gray-300"></div>
+          <div class="h-5 w-5 rounded bg-gray-300"></div>
+          <div class="h-5 w-5 rounded bg-gray-300"></div>
+          <div class="h-5 w-5 rounded bg-gray-300"></div>
+          <div class="h-5 w-5 rounded bg-gray-200"></div>
+          <div class="h-5 w-5 rounded bg-gray-200"></div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="flex min-w-0 flex-1 flex-col bg-gray-50">
+          <!-- Header -->
+          <div class="flex h-14 items-center justify-between border-b border-gray-200 bg-white px-6">
+            <div class="flex items-center gap-3">
+              <span class="text-sm font-semibold text-gray-900">Lorem Ipsum</span>
+              <div class="h-5 w-5 rounded bg-gray-200"></div>
+              <span class="bg-primary-100 text-primary-700 rounded px-2 py-0.5 text-xs font-medium">EN</span>
+            </div>
+            <div class="flex items-center gap-3">
+              <div class="h-8 w-64 rounded-md bg-gray-100"></div>
+              \${Button({
+      color: 'primary',
+      fill: true,
+      contained: true,
+      size: 'sm',
+      label: '',
+      icon: 'plus'
+    })}
+            </div>
+          </div>
+
+          <!-- Tabs -->
+          <div class="flex gap-6 border-b border-gray-200 bg-white px-6">
+            <span class="border-primary-500 text-primary-600 border-b-2 py-3 text-sm font-medium">Dolor</span>
+            <span class="py-3 text-sm text-gray-500">Amet</span>
+            <span class="py-3 text-sm text-gray-500">Consectetur</span>
+            <span class="py-3 text-sm text-gray-500">Adipiscing</span>
+            <span class="py-3 text-sm text-gray-500">Elit</span>
+          </div>
+
+          <!-- Page Content -->
+          <div class="flex flex-col gap-6 p-6">
+            <!-- Warning -->
+            <p class="bg-warning-50 text-warning-700 border-warning-200 rounded-md border px-3 py-2 text-xs">
+              ⚠ Click anywhere — the hue ripple sweeps outward while sparkles burst from the click point. The UI is
+              non-interactive during the view transition.
+            </p>
+
+            <!-- Quick Start -->
+            <div class="flex gap-3">
+              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
+                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <span class="text-sm font-medium text-gray-700">Sed Do</span>
+                <div class="bg-primary-500 h-1 w-full rounded"></div>
+              </div>
+              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
+                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <span class="text-sm font-medium text-gray-700">Eiusmod</span>
+              </div>
+              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
+                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <span class="text-sm font-medium text-gray-700">Tempor</span>
+              </div>
+            </div>
+
+            <!-- Two-Column Widgets -->
+            <div class="grid grid-cols-2 gap-6">
+              <!-- Recent Activity -->
+              <div class="rounded-lg border border-gray-200 bg-white">
+                <div class="flex items-center justify-between border-b border-gray-100 px-5 py-3">
+                  <span class="text-sm font-semibold text-gray-900">Incididunt</span>
+                  <div class="h-5 w-5 rounded bg-gray-200"></div>
+                </div>
+                <div class="flex flex-col">
+                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
+                    <div class="h-8 w-8 rounded bg-gray-100"></div>
+                    <div class="flex flex-1 flex-col gap-1">
+                      <div class="h-3 w-3/4 rounded bg-gray-200"></div>
+                      <div class="h-2 w-1/3 rounded bg-gray-100"></div>
+                    </div>
+                    <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Ipsum</span>
+                  </div>
+                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
+                    <div class="h-8 w-8 rounded bg-gray-100"></div>
+                    <div class="flex flex-1 flex-col gap-1">
+                      <div class="h-3 w-2/3 rounded bg-gray-200"></div>
+                      <div class="h-2 w-1/4 rounded bg-gray-100"></div>
+                    </div>
+                    <span class="bg-warning-100 text-warning-700 rounded-full px-2 py-0.5 text-xs">Dolor</span>
+                  </div>
+                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
+                    <div class="h-8 w-8 rounded bg-gray-100"></div>
+                    <div class="flex flex-1 flex-col gap-1">
+                      <div class="h-3 w-1/2 rounded bg-gray-200"></div>
+                      <div class="h-2 w-1/3 rounded bg-gray-100"></div>
+                    </div>
+                    <span class="bg-error-100 text-error-700 rounded-full px-2 py-0.5 text-xs">Amet</span>
+                  </div>
+                  <div class="flex items-center gap-3 px-5 py-3">
+                    <div class="h-8 w-8 rounded bg-gray-100"></div>
+                    <div class="flex flex-1 flex-col gap-1">
+                      <div class="h-3 w-3/5 rounded bg-gray-200"></div>
+                      <div class="h-2 w-1/4 rounded bg-gray-100"></div>
+                    </div>
+                    <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Ipsum</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Workstreams -->
+              <div class="rounded-lg border border-gray-200 bg-white">
+                <div class="flex items-center justify-between border-b border-gray-100 px-5 py-3">
+                  <span class="text-sm font-semibold text-gray-900">Labore</span>
+                  <div class="h-5 w-5 rounded bg-gray-200"></div>
+                </div>
+                <div class="flex flex-col gap-4 p-5">
+                  <div class="rounded-lg border border-gray-100 p-4">
+                    <div class="flex items-center gap-2">
+                      <span class="text-xs text-gray-500">Magna Aliqua</span>
+                      <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Sit</span>
+                    </div>
+                    <p class="mt-1 text-sm font-medium text-gray-900">Ut enim ad minim veniam</p>
+                    <p class="mt-0.5 text-xs text-gray-500">Quis nostrud exercitation ullamco...</p>
+                    <div class="mt-3 flex items-center justify-between">
+                      <span class="text-xs text-gray-500">60%</span>
+                      \${Button({
+      color: 'primary',
+      fill: true,
+      contained: true,
+      size: 'sm',
+      label: 'View'
+    })}
+                    </div>
+                    <div class="bg-primary-500 mt-2 h-1.5 w-3/5 rounded-full"></div>
+                  </div>
+                  <div class="rounded-lg border border-gray-100 p-4">
+                    <div class="flex items-center gap-2">
+                      <span class="text-xs text-gray-500">Magna Aliqua</span>
+                      <span class="bg-warning-100 text-warning-700 rounded-full px-2 py-0.5 text-xs">Sed</span>
+                    </div>
+                    <p class="mt-1 text-sm font-medium text-gray-900">Duis aute irure dolor</p>
+                    <p class="mt-0.5 text-xs text-gray-500">Excepteur sint occaecat cupidatat...</p>
+                    <div class="mt-3 flex items-center justify-between">
+                      <span class="text-xs text-gray-500">30%</span>
+                      \${Button({
+      color: 'primary',
+      fill: true,
+      contained: true,
+      size: 'sm',
+      label: 'View'
+    })}
+                    </div>
+                    <div class="bg-primary-500 mt-2 h-1.5 w-1/3 rounded-full"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Sparkle particles render inside the View Transition via the CSS Paint API, synchronized with the hue ripple ring. Toggle the \`sparkle\` control to compare with the DOM-based celebrate fallback.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};const m=["Default"];export{s as Default,m as __namedExportsOrder,v as default};

package/dist/storybook/assets/{ComponentStatesMixin-DRalOmcW.js → ComponentStatesMixin-g50hRCPT.js}

@@ -1 +1 @@
-import"./iframe-CsKt54V3.js";const a=t=>{class s extends t{constructor(){super(...arguments),this.internals=this.attachInternals(),this.states=this.internals.states}}return s};export{a as C};
+import"./iframe-BqvwP3or.js";const a=t=>{class s extends t{constructor(){super(...arguments),this.internals=this.attachInternals(),this.states=this.internals.states}}return s};export{a as C};

package/dist/storybook/assets/{ComponentStatesMixin.stories-TKD7YrVe.js → ComponentStatesMixin.stories-D3Q5pR38.js}

@@ -1,4 +1,4 @@
-import{x as c,i as g}from"./iframe-CsKt54V3.js";import{t as m}from"./custom-element-UsVr97OX.js";import{C as u}from"./ComponentStatesMixin-DRalOmcW.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,b=Object.defineProperty,h=Object.getOwnPropertyDescriptor,x=(e,o,p,d)=>{for(var t=d>1?void 0:d?h(o,p):o,s=e.length-1,n;s>=0;s--)(n=e[s])&&(t=n(t)||t);return t},f=(e,o)=>r(b(e,"raw",{value:r(e.slice())})),l;const C={title:"Mixins/Component States",tags:["autodocs"],parameters:{docs:{description:{component:`
+import{x as c,i as g}from"./iframe-BqvwP3or.js";import{t as m}from"./custom-element-UsVr97OX.js";import{C as u}from"./ComponentStatesMixin-g50hRCPT.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,b=Object.defineProperty,h=Object.getOwnPropertyDescriptor,x=(e,o,p,d)=>{for(var t=d>1?void 0:d?h(o,p):o,s=e.length-1,n;s>=0;s--)(n=e[s])&&(t=n(t)||t);return t},f=(e,o)=>r(b(e,"raw",{value:r(e.slice())})),l;const C={title:"Mixins/Component States",tags:["autodocs"],parameters:{docs:{description:{component:`
 \`ComponentStatesMixin\` provides access to the **Custom State API** for managing component-specific states that can be styled with the \`:state()\` pseudo-class in CSS.
 
 Uses \`ElementInternals.states\` (\`CustomStateSet\`) to manage component states that are separate from attributes, providing better encapsulation and performance.

package/dist/storybook/assets/{CopyToClipboard.stories-Bv8jZ7TL.js → CopyToClipboard.stories-COZZ1VC2.js}

@@ -1,4 +1,4 @@
-import{g as s,x as i}from"./iframe-CsKt54V3.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,c=Object.defineProperty,p=(e,l)=>r(c(e,"raw",{value:r(l||e.slice())})),d;const{events:b,args:u,argTypes:a}=s("btu-copy-to-clipboard"),f={title:"Components/CopyToClipboard",component:"btu-copy-to-clipboard",tags:["autodocs"],parameters:{docs:{subtitle:"btu-copy-to-clipboard",description:{component:`
+import{g as s,x as i}from"./iframe-BqvwP3or.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,c=Object.defineProperty,p=(e,l)=>r(c(e,"raw",{value:r(l||e.slice())})),d;const{events:b,args:u,argTypes:a}=s("btu-copy-to-clipboard"),f={title:"Components/CopyToClipboard",component:"btu-copy-to-clipboard",tags:["autodocs"],parameters:{docs:{subtitle:"btu-copy-to-clipboard",description:{component:`
 A button component for copying text to the clipboard. The button becomes disabled and displays a success state for 3 seconds after copying.
 
 <h3>When to use:</h3>

package/dist/storybook/assets/{Debounce.stories-CLwXI3OZ.js → Debounce.stories-Dl10LAnx.js}

@@ -1,4 +1,4 @@
-import{x as c}from"./iframe-CsKt54V3.js";import"./preload-helper-PPVm8Dsz.js";function p(n,e){if(n<=0)return e;let t;return function(){clearTimeout(t),t=setTimeout(()=>{t=void 0,e.apply(this,[...arguments])},n)}}const g={title:"Utilities/Debounce",tags:["autodocs"],parameters:{docs:{subtitle:"The `debounce` utility delays function execution until a specified wait period has elapsed since the last invocation. Useful for search inputs, form validation, and window resize handlers."},controls:{expanded:!0}},argTypes:{wait:{control:{type:"number",min:0,max:2e3,step:50},description:"Debounce wait time in milliseconds"}},args:{wait:300}},o={render:n=>{const e=`debounce-${Math.random().toString(36).substring(2,9)}`;let t=0,i=0;const d=()=>{const a=document.getElementById(`${e}-normal-count`),r=document.getElementById(`${e}-debounced-count`);a&&(a.textContent=String(t)),r&&(r.textContent=String(i))},l=p(n.wait,()=>{i++,d()}),u=()=>{t++,d(),l()};return c`
+import{x as c}from"./iframe-BqvwP3or.js";import"./preload-helper-PPVm8Dsz.js";function p(n,e){if(n<=0)return e;let t;return function(){clearTimeout(t),t=setTimeout(()=>{t=void 0,e.apply(this,[...arguments])},n)}}const g={title:"Utilities/Debounce",tags:["autodocs"],parameters:{docs:{subtitle:"The `debounce` utility delays function execution until a specified wait period has elapsed since the last invocation. Useful for search inputs, form validation, and window resize handlers."},controls:{expanded:!0}},argTypes:{wait:{control:{type:"number",min:0,max:2e3,step:50},description:"Debounce wait time in milliseconds"}},args:{wait:300}},o={render:n=>{const e=`debounce-${Math.random().toString(36).substring(2,9)}`;let t=0,i=0;const d=()=>{const a=document.getElementById(`${e}-normal-count`),r=document.getElementById(`${e}-debounced-count`);a&&(a.textContent=String(t)),r&&(r.textContent=String(i))},l=p(n.wait,()=>{i++,d()}),u=()=>{t++,d(),l()};return c`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">