@brightspot/ui 1.3.0 → 1.4.1

package/dist/storybook/assets/{ComponentStatesMixin.stories--YPoyrpQ.js → ComponentStatesMixin.stories-CyQ2aSTu.js}

@@ -1,4 +1,4 @@
-import{x as c,i as p}from"./iframe-D-tG1MVV.js";import{t as m,C as u}from"./ComponentStatesMixin-BkLj42wt.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,b=Object.defineProperty,h=Object.getOwnPropertyDescriptor,x=(e,o,g,d)=>{for(var t=d>1?void 0:d?h(o,g):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 E={title:"Mixins/Component States",tags:["autodocs"],parameters:{docs:{description:{component:`
+import{x as c,i as p}from"./iframe-Bl9oHz5c.js";import{t as m,C as u}from"./ComponentStatesMixin-B7ci0thi.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,b=Object.defineProperty,h=Object.getOwnPropertyDescriptor,x=(e,o,g,d)=>{for(var t=d>1?void 0:d?h(o,g):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 E={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-6vqDwd-F.js → CopyToClipboard.stories-DR7pckeV.js}

@@ -1,4 +1,4 @@
-import{g as s,x as i}from"./iframe-D-tG1MVV.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-Bl9oHz5c.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-hkqyvqmg.js

@@ -0,0 +1,199 @@
+import{x as c}from"./iframe-Bl9oHz5c.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">
+            Type in the input below. The normal counter increments on every keystroke, while the debounced counter only
+            fires after ${n.wait}ms of inactivity.
+          </p>
+        </div>
+
+        <input
+          @input=${u}
+          type="text"
+          placeholder="Start typing..."
+          class="w-full rounded border-2 border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none"
+        />
+
+        <div class="flex justify-around">
+          <div>
+            <div class="text-xs text-gray-500">Keystrokes</div>
+            <div id="${e}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
+          </div>
+          <div>
+            <div class="text-xs text-gray-500">Debounced calls (${n.wait}ms)</div>
+            <div id="${e}-debounced-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+
+        <button
+          @click=${()=>{t=0,i=0,d()}}
+          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+        >
+          Reset Counters
+        </button>
+      </div>
+    `},parameters:{docs:{description:{story:"Interactive example showing debounce in action. Type rapidly in the input to see how the debounced handler waits for a pause before executing."}}}},s={render:()=>c`
+    <div class="space-y-4 text-sm">
+      <div>
+        <h3 class="mb-2 font-bold">Basic Usage</h3>
+        <pre
+          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
+        ><code>import { debounce } from '@brightspot/ui/util/debounce.js'
+
+const handleSearch = debounce(300, () => {
+  console.log('Search triggered after 300ms of inactivity')
+})
+
+input.addEventListener('input', handleSearch)</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Debounce vs Throttle</h3>
+        <ul class="list-inside list-disc space-y-1 text-gray-700">
+          <li><strong>Debounce</strong>: Waits until activity stops, then fires once</li>
+          <li><strong>Throttle</strong>: Fires at regular intervals during activity</li>
+          <li>Use debounce for search inputs, form validation, window resize end</li>
+          <li>Use throttle for scroll handlers, mouse tracking, progress updates</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Parameters</h3>
+        <ul class="space-y-2">
+          <li>
+            <code class="rounded bg-gray-200 px-1">wait</code> (number): Delay in milliseconds. If 0, the function
+            passes through unchanged.
+          </li>
+          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to debounce</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Returns</h3>
+        <p class="text-gray-700">
+          A debounced version of the input function that delays execution until
+          <code class="rounded bg-gray-200 px-1">wait</code> milliseconds have elapsed since the last call.
+        </p>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:"Code examples and documentation for using the debounce utility."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const instanceId = \`debounce-\${Math.random().toString(36).substring(2, 9)}\`;
+    let normalCount = 0;
+    let debouncedCount = 0;
+    const updateCounts = () => {
+      const normalEl = document.getElementById(\`\${instanceId}-normal-count\`);
+      const debouncedEl = document.getElementById(\`\${instanceId}-debounced-count\`);
+      if (normalEl) normalEl.textContent = String(normalCount);
+      if (debouncedEl) debouncedEl.textContent = String(debouncedCount);
+    };
+    const handleDebounced = debounce(args.wait, () => {
+      debouncedCount++;
+      updateCounts();
+    });
+    const handleInput = () => {
+      normalCount++;
+      updateCounts();
+      handleDebounced();
+    };
+    return html\`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Type in the input below. The normal counter increments on every keystroke, while the debounced counter only
+            fires after \${args.wait}ms of inactivity.
+          </p>
+        </div>
+
+        <input
+          @input=\${handleInput}
+          type="text"
+          placeholder="Start typing..."
+          class="w-full rounded border-2 border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none"
+        />
+
+        <div class="flex justify-around">
+          <div>
+            <div class="text-xs text-gray-500">Keystrokes</div>
+            <div id="\${instanceId}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
+          </div>
+          <div>
+            <div class="text-xs text-gray-500">Debounced calls (\${args.wait}ms)</div>
+            <div id="\${instanceId}-debounced-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+
+        <button
+          @click=\${() => {
+      normalCount = 0;
+      debouncedCount = 0;
+      updateCounts();
+    }}
+          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+        >
+          Reset Counters
+        </button>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Interactive example showing debounce in action. Type rapidly in the input to see how the debounced handler waits for a pause before executing.\`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="space-y-4 text-sm">
+      <div>
+        <h3 class="mb-2 font-bold">Basic Usage</h3>
+        <pre
+          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
+        ><code>import { debounce } from '@brightspot/ui/util/debounce.js'
+
+const handleSearch = debounce(300, () => {
+  console.log('Search triggered after 300ms of inactivity')
+})
+
+input.addEventListener('input', handleSearch)</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Debounce vs Throttle</h3>
+        <ul class="list-inside list-disc space-y-1 text-gray-700">
+          <li><strong>Debounce</strong>: Waits until activity stops, then fires once</li>
+          <li><strong>Throttle</strong>: Fires at regular intervals during activity</li>
+          <li>Use debounce for search inputs, form validation, window resize end</li>
+          <li>Use throttle for scroll handlers, mouse tracking, progress updates</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Parameters</h3>
+        <ul class="space-y-2">
+          <li>
+            <code class="rounded bg-gray-200 px-1">wait</code> (number): Delay in milliseconds. If 0, the function
+            passes through unchanged.
+          </li>
+          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to debounce</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Returns</h3>
+        <p class="text-gray-700">
+          A debounced version of the input function that delays execution until
+          <code class="rounded bg-gray-200 px-1">wait</code> milliseconds have elapsed since the last call.
+        </p>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Code examples and documentation for using the debounce utility.\`
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};const h=["Interactive","UsageExample"];export{o as Interactive,s as UsageExample,h as __namedExportsOrder,g as default};