@brightspot/ui 1.10.0 → 3.0.0

package/dist/storybook/assets/Icon.stories-CPjM-jTU.js

@@ -1,264 +0,0 @@
-import{g as d,x as t}from"./iframe-BqvwP3or.js";import{o as p}from"./style-map-CBrSnxRe.js";import{L as c}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:b,argTypes:s}=d("btu-icon"),m=["xs","sm","md","lg","xl"],g=["ai","error","gray","primary","purple","rose","success","teal","warning"],v={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
-<strong>When to use:</strong>
-<ul>
-  <li>To visually reinforce actions, states, or categories</li>
-  <li>For navigation elements and buttons</li>
-  <li>To provide visual cues alongside text labels</li>
-  <li>For decorative elements that enhance understanding</li>
-</ul>
-
-<strong>When not to use:</strong>
-<ul>
-  <li>As the sole means of conveying critical information without an accompanying label</li>
-  <li>When text would be clearer than an icon</li>
-</ul>
-
-<h3>Icon Library:</h3>
-<p>All icons are from <a href="https://lucide.dev/icons/" target="_blank">Lucide</a>. Note that the Lucide library is updated regularly, but the Brightspot UI library uses <strong>Lucide v${c}</strong>. Keep this in mind when choosing icons for your project, as icon names and styles may differ between versions.</p>
-        `}},actions:{handles:u},controls:{expanded:!0}},args:{...b,symbol:"heart",size:"md"},argTypes:{...s,"--Icon-size":{table:{disable:!0}},"--Icon-fill":{table:{disable:!0}},"--Icon-stroke-width":{table:{disable:!0}},"--Icon-svg":{table:{disable:!0}},symbol:{...s.symbol,control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name. Note that only icons available in Lucide v'+c+" are supported.",table:{...s.symbol?.table,type:{summary:"string"}}},size:{...s.size,control:{type:"select"},options:m,description:"Icon size preset"},gradient:{...s.gradient,control:{type:"select"},options:g,description:"Gradient theme icon fill. When not set, icon inherits parent text color."},customSize:{name:"--Icon-size",control:{type:"text"},description:'Custom icon size - overrides the size preset (e.g., "3rem", "48px")',table:{category:"CSS Properties"}},customFill:{name:"--Icon-fill",control:{type:"text"},description:'An advanced option for creating filled-in icons via built-in CSS SVG styling. Works best with simple icons like "heart" or "star".',table:{category:"CSS Properties"}},customStrokeWidth:{name:"--Icon-stroke-width",control:{type:"range",min:.5,max:4,step:.25},description:"SVG stroke width as a unitless number in viewBox units; scales visually with icon size (default: 2).",table:{category:"CSS Properties"}}},render:e=>{const n={};return e.customSize&&(n["--Icon-size"]=e.customSize),e.customFill&&(n["--Icon-fill"]=e.customFill),e.customStrokeWidth&&(n["--Icon-stroke-width"]=e.customStrokeWidth),t`<btu-icon
-      symbol="${e.symbol}"
-      size="${e.size}"
-      gradient="${e.gradient||""}"
-      style=${p(n)}
-    ></btu-icon>`}},i={args:{}},o={render:()=>t`<div class="flex items-center gap-4">
-      <btu-icon symbol="heart" size="xs"></btu-icon>
-      <btu-icon symbol="heart" size="sm"></btu-icon>
-      <btu-icon symbol="heart" size="md"></btu-icon>
-      <btu-icon symbol="heart" size="lg"></btu-icon>
-      <btu-icon symbol="heart" size="xl"></btu-icon>
-    </div>`,parameters:{docs:{description:{story:"Icons come in five preset sizes: xs, sm, md, lg, and xl. Choose the size that best fits your design context."}}}},a={render:()=>t`<div class="flex items-center gap-6">
-      ${[1,1.5,2,2.5,3].map(e=>t`<div class="flex flex-col items-center gap-2">
-            <btu-icon symbol="heart" size="xl" style="--Icon-stroke-width: ${e}"></btu-icon>
-            <span class="text-xs font-bold">${e}</span>
-          </div>`)}
-    </div>`,parameters:{docs:{description:{story:"Control stroke thickness via the `--Icon-stroke-width` CSS custom property. The value is a unitless number in SVG viewBox units (the icons use a 24×24 coordinate system). Because the stroke is defined in viewBox units, it scales proportionally with the icon — a stroke-width of 2 will appear visually thicker on a larger icon. Note: this property does not affect gradient icons, which use a static mask image where stroke-width is baked in."}}}},r={render:()=>t`<div class="flex flex-wrap items-center justify-between gap-4 px-4">
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="zap" size="xl" gradient="primary"></btu-icon>
-        <span class="text-xs font-bold">primary</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="check-circle" size="xl" gradient="success"></btu-icon>
-        <span class="text-xs font-bold">success</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="trash-2" size="xl" gradient="error"></btu-icon>
-        <span class="text-xs font-bold">error</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="alert-triangle" size="xl" gradient="warning"></btu-icon>
-        <span class="text-xs font-bold">warning</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="sparkles" size="xl" gradient="ai"></btu-icon>
-        <span class="text-xs font-bold">ai</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="info" size="xl" gradient="purple"></btu-icon>
-        <span class="text-xs font-bold">purple</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="book" size="xl" gradient="teal"></btu-icon>
-        <span class="text-xs font-bold">teal</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="flower" size="xl" gradient="rose"></btu-icon>
-        <span class="text-xs font-bold">rose</span>
-      </div>
-    </div>`,parameters:{docs:{description:{story:"Icons support gradient fills using the following theme colors. Set the `gradient` attribute to one of the theme colors and watch the icon's color come to life! Note that gradient icons use mask-based rendering for smooth color transitions."}}}},l={render:()=>t`<div class="flex flex-col gap-6">
-      <div class="flex items-center gap-2">
-        <strong>Custom sizing:</strong>
-        <btu-icon symbol="trophy" size="md" style="--Icon-size: 4rem" class="text-warning-500"></btu-icon>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <strong>Filled icons:</strong>
-        <div class="flex items-center gap-3">
-          <btu-icon symbol="star" size="xl" class="text-warning-500" style="--Icon-fill: currentColor"></btu-icon>
-          <btu-icon symbol="heart" size="xl" class="text-error-600" style="--Icon-fill: currentColor"></btu-icon>
-        </div>
-      </div>
-
-      <div class="flex flex-col gap-3">
-        <strong>RTL language support:</strong>
-        <div class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 text-gray-900">
-          <div class="flex items-center gap-2">
-            <span class="text-sm">Open panel</span>
-            <btu-icon symbol="panel-right-close" size="md"></btu-icon>
-          </div>
-          <div class="flex items-center gap-2" dir="rtl">
-            <span class="text-sm">افتح اللوحة</span>
-            <btu-icon symbol="panel-right-close" size="md" class="rtl:-scale-x-100"></btu-icon>
-          </div>
-        </div>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <strong>Unlabeled icon button (A11y concern!):</strong>
-        <button class="bg-error-200 hover:bg-error-300 rounded p-2">
-          <btu-icon symbol="trash-2" size="md" class="text-gray-900"></btu-icon>
-        </button>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <strong>Labeled via <code>aria-label</code> and <code>title</code>:</strong>
-        <button
-          class="bg-primary-600 hover:bg-primary-800 rounded p-2 text-white"
-          aria-label="Favorite this item"
-          title="Favorite this item"
-        >
-          <btu-icon symbol="heart" size="md"></btu-icon>
-        </button>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <strong>Labeled via accompanying text:</strong>
-        <button class="bg-primary-100 hover:bg-primary-200 text-primary-700 rounded p-2">
-          <btu-icon symbol="heart" size="md"></btu-icon>
-          <span class="ml-1">Favorite</span>
-        </button>
-      </div>
-    </div>`,parameters:{docs:{description:{story:'\n- **Custom sizing** is available via the `--Icon-size` CSS property for precise control.\n- You can create **filled icons** by setting the `--Icon-fill: currentColor` CSS property. Note that this works best with simple icons like "heart" or "star".\n\n- **RTL language support:** Directional icons can be flipped for right-to-left languages using Tailwind\'s `rtl:-scale-x-100` utility class. This ensures icons like panels, arrows, and navigation elements point in the correct direction.\n\n**Accessibility best practices:**\n- If an icon conveys information and there is no visible text to accompany it (e.g., a delete button with only a trash can icon), add an `aria-label` attribute to the component to help users using screen readers understand its purpose.\n- If an icon is purely decorative (e.g. a sparkle icon, accompanying text that already conveys meaning), add `aria-hidden="true"` to the icon to hide it from screen readers.\n- You may consider adding a tooltip (via `title` attribute) to icon buttons for better discoverability.'}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
-  args: {}
-}`,...i.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
-  render: () => html\`<div class="flex items-center gap-4">
-      <btu-icon symbol="heart" size="xs"></btu-icon>
-      <btu-icon symbol="heart" size="sm"></btu-icon>
-      <btu-icon symbol="heart" size="md"></btu-icon>
-      <btu-icon symbol="heart" size="lg"></btu-icon>
-      <btu-icon symbol="heart" size="xl"></btu-icon>
-    </div>\`,
-  parameters: {
-    docs: {
-      description: {
-        story: \`Icons come in five preset sizes: xs, sm, md, lg, and xl. Choose the size that best fits your design context.\`
-      }
-    }
-  }
-}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
-  render: () => html\`<div class="flex items-center gap-6">
-      \${[1, 1.5, 2, 2.5, 3].map(w => html\`<div class="flex flex-col items-center gap-2">
-            <btu-icon symbol="heart" size="xl" style="--Icon-stroke-width: \${w}"></btu-icon>
-            <span class="text-xs font-bold">\${w}</span>
-          </div>\`)}
-    </div>\`,
-  parameters: {
-    docs: {
-      description: {
-        story: \`Control stroke thickness via the \\\`--Icon-stroke-width\\\` CSS custom property. The value is a unitless number in SVG viewBox units (the icons use a 24\\u00d724 coordinate system). Because the stroke is defined in viewBox units, it scales proportionally with the icon — a stroke-width of 2 will appear visually thicker on a larger icon. Note: this property does not affect gradient icons, which use a static mask image where stroke-width is baked in.\`
-      }
-    }
-  }
-}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
-  render: () => html\`<div class="flex flex-wrap items-center justify-between gap-4 px-4">
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="zap" size="xl" gradient="primary"></btu-icon>
-        <span class="text-xs font-bold">primary</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="check-circle" size="xl" gradient="success"></btu-icon>
-        <span class="text-xs font-bold">success</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="trash-2" size="xl" gradient="error"></btu-icon>
-        <span class="text-xs font-bold">error</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="alert-triangle" size="xl" gradient="warning"></btu-icon>
-        <span class="text-xs font-bold">warning</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="sparkles" size="xl" gradient="ai"></btu-icon>
-        <span class="text-xs font-bold">ai</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="info" size="xl" gradient="purple"></btu-icon>
-        <span class="text-xs font-bold">purple</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="book" size="xl" gradient="teal"></btu-icon>
-        <span class="text-xs font-bold">teal</span>
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <btu-icon symbol="flower" size="xl" gradient="rose"></btu-icon>
-        <span class="text-xs font-bold">rose</span>
-      </div>
-    </div>\`,
-  parameters: {
-    docs: {
-      description: {
-        story: \`Icons support gradient fills using the following theme colors. Set the \\\`gradient\\\` attribute to one of the theme colors and watch the icon's color come to life! Note that gradient icons use mask-based rendering for smooth color transitions.\`
-      }
-    }
-  }
-}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
-  render: () => html\`<div class="flex flex-col gap-6">
-      <div class="flex items-center gap-2">
-        <strong>Custom sizing:</strong>
-        <btu-icon symbol="trophy" size="md" style="--Icon-size: 4rem" class="text-warning-500"></btu-icon>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <strong>Filled icons:</strong>
-        <div class="flex items-center gap-3">
-          <btu-icon symbol="star" size="xl" class="text-warning-500" style="--Icon-fill: currentColor"></btu-icon>
-          <btu-icon symbol="heart" size="xl" class="text-error-600" style="--Icon-fill: currentColor"></btu-icon>
-        </div>
-      </div>
-
-      <div class="flex flex-col gap-3">
-        <strong>RTL language support:</strong>
-        <div class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 text-gray-900">
-          <div class="flex items-center gap-2">
-            <span class="text-sm">Open panel</span>
-            <btu-icon symbol="panel-right-close" size="md"></btu-icon>
-          </div>
-          <div class="flex items-center gap-2" dir="rtl">
-            <span class="text-sm">افتح اللوحة</span>
-            <btu-icon symbol="panel-right-close" size="md" class="rtl:-scale-x-100"></btu-icon>
-          </div>
-        </div>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <strong>Unlabeled icon button (A11y concern!):</strong>
-        <button class="bg-error-200 hover:bg-error-300 rounded p-2">
-          <btu-icon symbol="trash-2" size="md" class="text-gray-900"></btu-icon>
-        </button>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <strong>Labeled via <code>aria-label</code> and <code>title</code>:</strong>
-        <button
-          class="bg-primary-600 hover:bg-primary-800 rounded p-2 text-white"
-          aria-label="Favorite this item"
-          title="Favorite this item"
-        >
-          <btu-icon symbol="heart" size="md"></btu-icon>
-        </button>
-      </div>
-
-      <div class="flex items-center gap-2">
-        <strong>Labeled via accompanying text:</strong>
-        <button class="bg-primary-100 hover:bg-primary-200 text-primary-700 rounded p-2">
-          <btu-icon symbol="heart" size="md"></btu-icon>
-          <span class="ml-1">Favorite</span>
-        </button>
-      </div>
-    </div>\`,
-  parameters: {
-    docs: {
-      description: {
-        story: \`
-- **Custom sizing** is available via the \\\`--Icon-size\\\` CSS property for precise control.
-- You can create **filled icons** by setting the \\\`--Icon-fill: currentColor\\\` CSS property. Note that this works best with simple icons like "heart" or "star".
-
-- **RTL language support:** Directional icons can be flipped for right-to-left languages using Tailwind's \\\`rtl:-scale-x-100\\\` utility class. This ensures icons like panels, arrows, and navigation elements point in the correct direction.
-
-**Accessibility best practices:**
-- If an icon conveys information and there is no visible text to accompany it (e.g., a delete button with only a trash can icon), add an \\\`aria-label\\\` attribute to the component to help users using screen readers understand its purpose.
-- If an icon is purely decorative (e.g. a sparkle icon, accompanying text that already conveys meaning), add \\\`aria-hidden="true"\\\` to the icon to hide it from screen readers.
-- You may consider adding a tooltip (via \\\`title\\\` attribute) to icon buttons for better discoverability.\`
-      }
-    }
-  }
-}`,...l.parameters?.docs?.source}}};const z=["Default","Sizes","StrokeWidths","GradientIcons","AdvancedUsage"];export{l as AdvancedUsage,i as Default,r as GradientIcons,o as Sizes,a as StrokeWidths,z as __namedExportsOrder,v as default};

package/dist/storybook/assets/Pagination.stories-C4cLjS_9.js

@@ -1,272 +0,0 @@
-import{g as m,x as o}from"./iframe-BqvwP3or.js";import{o as c}from"./style-map-CBrSnxRe.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),u=t=>{const a={};return t.customBackgroundColor&&(a["--pagination-color-background"]=t.customBackgroundColor),t.customForegroundColor&&(a["--pagination-color-foreground"]=t.customForegroundColor),a},S={title:"Components/Pagination",component:"btu-pagination",tags:["autodocs"],parameters:{docs:{subtitle:"A component for navigating through paged content",description:{component:`
-<h3>When to use:</h3>
-<ul>
-  <li>To navigate through large sets of data</li>
-  <li>For search results, tables, and lists</li>
-  <li>In widgets and calendar views</li>
-</ul>
-
-<h3>Variants:</h3>
-<ul>
-  <li><strong>Widget</strong> (default): Page size selector + total display + navigation</li>
-  <li><strong>Search</strong>: With page jumper dropdown</li>
-  <li><strong>Widget Small</strong>: Without first/last page buttons</li>
-  <li><strong>Calendar</strong>: Custom page-size slot + jumper slot</li>
-</ul>
-        `}},actions:{handles:b},controls:{expanded:!0}},args:{...h,"total-items":200,"boundary-buttons":!0,"hide-on-single-page":!0,"page-size-changer":!0},argTypes:{...y,"--pagination-color-background":{table:{disable:!0}},"--pagination-color-foreground":{table:{disable:!0}},customBackgroundColor:{name:"--pagination-color-background",control:{type:"color"},description:"Custom background color for buttons and select",table:{category:"CSS Properties"}},customForegroundColor:{name:"--pagination-color-foreground",control:{type:"color"},description:"Custom foreground (text/icon) color",table:{category:"CSS Properties"}}},render:t=>o`
-    <btu-pagination
-      total-items="${t["total-items"]??200}"
-      page="${t.page??1}"
-      page-size="${t["page-size"]??0}"
-      page-size-options="${t["page-size-options"]??"10, 20, 50"}"
-      ?disabled="${t.disabled}"
-      ?loading="${t.loading}"
-      .hideOnSinglePage=${t["hide-on-single-page"]??!0}
-      .pageSizeChanger=${t["page-size-changer"]??!0}
-      .boundaryButtons=${t["boundary-buttons"]??!0}
-      ?hide-total-count=${t["hide-total-count"]}
-      style=${c(u(t))}
-    ></btu-pagination>
-  `},i={args:{},parameters:{docs:{description:{story:"Default Widget variant with page size selector, total display, and full navigation controls."}}}},s={args:{"total-items":500,"page-size-options":"10, 25, 50, 100"},render:t=>o`
-    <btu-pagination
-      total-items="${t["total-items"]??500}"
-      page="${t.page??1}"
-      page-size="${t["page-size"]??0}"
-      page-size-options="${t["page-size-options"]??"10, 25, 50, 100"}"
-      ?disabled="${t.disabled}"
-      ?loading="${t.loading}"
-      .hideOnSinglePage=${t["hide-on-single-page"]??!0}
-      .pageSizeChanger=${t["page-size-changer"]??!0}
-      .boundaryButtons=${t["boundary-buttons"]??!0}
-      ?hide-total-count=${t["hide-total-count"]}
-      style=${c(u(t))}
-    >
-      <select
-        slot="jumper"
-        class="btu-pagination-select"
-        aria-label="Go to page"
-        @change=${a=>{const e=a.target,n=e.closest("btu-pagination");n&&(n.page=parseInt(e.value,10))}}
-      >
-        ${Array.from({length:50},(a,e)=>o`<option value="${e+1}">Page ${e+1}</option>`)}
-      </select>
-    </btu-pagination>
-  `,parameters:{docs:{description:{story:'Search variant with a page jumper dropdown placed via `slot="jumper"`. Allows direct navigation to a specific page.'}}}},r={args:{"total-items":100,"boundary-buttons":!1},parameters:{docs:{description:{story:"Compact widget variant without first/last page buttons. Suitable for tight spaces."}}}},l={args:{"total-items":52},render:t=>o`
-    <btu-pagination
-      total-items="${t["total-items"]??52}"
-      page="${t.page??1}"
-      page-size="1"
-      ?disabled="${t.disabled}"
-      ?loading="${t.loading}"
-      .hideOnSinglePage=${t["hide-on-single-page"]??!0}
-      .pageSizeChanger=${!1}
-      .boundaryButtons=${t["boundary-buttons"]??!0}
-      ?hide-total-count=${t["hide-total-count"]}
-      style=${c(u(t))}
-    >
-      <select slot="page-size" class="btu-pagination-select" aria-label="View type">
-        <option value="week">Week</option>
-        <option value="month">Month</option>
-      </select>
-      <button
-        slot="jumper"
-        class="btu-button btu-button-sm"
-        @click=${a=>{const e=a.target.closest("btu-pagination");e&&(e.page=1)}}
-      >
-        Today
-      </button>
-    </btu-pagination>
-  `,parameters:{docs:{description:{story:'Calendar variant using `slot="page-size"` for a week/month selector and `slot="jumper"` for a Today button.'}}}},p={args:{"total-items":200,loading:!0},parameters:{docs:{description:{story:"Loading state shows a spinner and dims the navigation controls. The `aria-busy` attribute is set on the live region."}}}},g={args:{"total-items":200,disabled:!0,page:3},parameters:{docs:{description:{story:"Disabled state prevents all interaction. All buttons and selects receive the native `disabled` attribute."}}}},d={render:()=>{const t=a=>{const e=a.target;e.loading=!0,setTimeout(()=>{e.loading=!1},1e3)};return o`
-      <div class="flex flex-col gap-4">
-        <div class="flex items-center gap-2">
-          <label for="total-input" class="text-sm font-medium">Total Items:</label>
-          <input
-            id="total-input"
-            type="number"
-            value="200"
-            min="0"
-            class="w-24 rounded border px-2 py-1 text-sm"
-            @input=${a=>{const e=a.target,n=e.closest(".flex.flex-col")?.querySelector("btu-pagination");n&&(n.totalItems=parseInt(e.value,10)||0)}}
-          />
-        </div>
-        <btu-pagination
-          total-items="200"
-          @btu-pagination-change=${t}
-          @btu-pagination-page-size-change=${t}
-        ></btu-pagination>
-      </div>
-    `},parameters:{docs:{description:{story:"Interactive example demonstrating dynamic `totalItems` changes at runtime. Navigation triggers a simulated 1s loading state."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
-  args: {},
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default Widget variant with page size selector, total display, and full navigation controls.'
-      }
-    }
-  }
-}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
-  args: {
-    'total-items': 500,
-    'page-size-options': '10, 25, 50, 100'
-  },
-  render: args => html\`
-    <btu-pagination
-      total-items="\${args['total-items'] ?? 500}"
-      page="\${args.page ?? 1}"
-      page-size="\${args['page-size'] ?? 0}"
-      page-size-options="\${args['page-size-options'] ?? '10, 25, 50, 100'}"
-      ?disabled="\${args.disabled}"
-      ?loading="\${args.loading}"
-      .hideOnSinglePage=\${args['hide-on-single-page'] ?? true}
-      .pageSizeChanger=\${args['page-size-changer'] ?? true}
-      .boundaryButtons=\${args['boundary-buttons'] ?? true}
-      ?hide-total-count=\${args['hide-total-count']}
-      style=\${styleMap(paginationStyles(args))}
-    >
-      <select
-        slot="jumper"
-        class="btu-pagination-select"
-        aria-label="Go to page"
-        @change=\${(e: Event) => {
-    const select = e.target as HTMLSelectElement;
-    const pagination = select.closest('btu-pagination');
-    if (pagination) {
-      pagination.page = parseInt(select.value, 10);
-    }
-  }}
-      >
-        \${Array.from({
-    length: 50
-  }, (_, i) => html\`<option value="\${i + 1}">Page \${i + 1}</option>\`)}
-      </select>
-    </btu-pagination>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Search variant with a page jumper dropdown placed via \`slot="jumper"\`. Allows direct navigation to a specific page.'
-      }
-    }
-  }
-}`,...s.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
-  args: {
-    'total-items': 100,
-    'boundary-buttons': false
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Compact widget variant without first/last page buttons. Suitable for tight spaces.'
-      }
-    }
-  }
-}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
-  args: {
-    'total-items': 52
-  },
-  render: args => html\`
-    <btu-pagination
-      total-items="\${args['total-items'] ?? 52}"
-      page="\${args.page ?? 1}"
-      page-size="1"
-      ?disabled="\${args.disabled}"
-      ?loading="\${args.loading}"
-      .hideOnSinglePage=\${args['hide-on-single-page'] ?? true}
-      .pageSizeChanger=\${false}
-      .boundaryButtons=\${args['boundary-buttons'] ?? true}
-      ?hide-total-count=\${args['hide-total-count']}
-      style=\${styleMap(paginationStyles(args))}
-    >
-      <select slot="page-size" class="btu-pagination-select" aria-label="View type">
-        <option value="week">Week</option>
-        <option value="month">Month</option>
-      </select>
-      <button
-        slot="jumper"
-        class="btu-button btu-button-sm"
-        @click=\${(e: Event) => {
-    const pagination = (e.target as HTMLElement).closest('btu-pagination');
-    if (pagination) pagination.page = 1;
-  }}
-      >
-        Today
-      </button>
-    </btu-pagination>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Calendar variant using \`slot="page-size"\` for a week/month selector and \`slot="jumper"\` for a Today button.'
-      }
-    }
-  }
-}`,...l.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
-  args: {
-    'total-items': 200,
-    loading: true
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Loading state shows a spinner and dims the navigation controls. The \`aria-busy\` attribute is set on the live region.'
-      }
-    }
-  }
-}`,...p.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
-  args: {
-    'total-items': 200,
-    disabled: true,
-    page: 3
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Disabled state prevents all interaction. All buttons and selects receive the native \`disabled\` attribute.'
-      }
-    }
-  }
-}`,...g.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
-  render: () => {
-    const simulateLoading = (e: CustomEvent) => {
-      const pagination = e.target as HTMLElement & {
-        loading: boolean;
-      };
-      pagination.loading = true;
-      setTimeout(() => {
-        pagination.loading = false;
-      }, 1000);
-    };
-    return html\`
-      <div class="flex flex-col gap-4">
-        <div class="flex items-center gap-2">
-          <label for="total-input" class="text-sm font-medium">Total Items:</label>
-          <input
-            id="total-input"
-            type="number"
-            value="200"
-            min="0"
-            class="w-24 rounded border px-2 py-1 text-sm"
-            @input=\${(e: Event) => {
-      const input = e.target as HTMLInputElement;
-      const pagination = (input.closest('.flex.flex-col') as HTMLElement)?.querySelector('btu-pagination') as HTMLElement & {
-        totalItems: number;
-      };
-      if (pagination) pagination.totalItems = parseInt(input.value, 10) || 0;
-    }}
-          />
-        </div>
-        <btu-pagination
-          total-items="200"
-          @btu-pagination-change=\${simulateLoading}
-          @btu-pagination-page-size-change=\${simulateLoading}
-        ></btu-pagination>
-      </div>
-    \`;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Interactive example demonstrating dynamic \`totalItems\` changes at runtime. Navigation triggers a simulated 1s loading state.'
-      }
-    }
-  }
-}`,...d.parameters?.docs?.source}}};const z=["Default","Search","WidgetSmall","Calendar","Loading","Disabled","DynamicTotal"];export{l as Calendar,i as Default,g as Disabled,d as DynamicTotal,p as Loading,s as Search,r as WidgetSmall,z as __namedExportsOrder,S as default};

package/dist/storybook/assets/ReadyMixin-DNZ5dCsZ.js

@@ -1 +0,0 @@
-import"./iframe-BqvwP3or.js";const i=t=>{class n extends t{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-element-connected",{}),e=>this.emit("btu-element-error",{error:e}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-element-disconnected")}emit(e,c){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c}))}}return n},l=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{i as E,l as R};

package/dist/storybook/assets/ScrollShadow.stories-C3W5o9ZW.js

@@ -1,17 +0,0 @@
-import{x as a}from"./iframe-BqvwP3or.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
-    <style>
-      :root {
-        --can-scroll:   ;
-      }
-    </style>
-    <div class=${["flex","gap-2","bg-gray-500",e].join(" ")}>
-      ${r.map((s,t)=>a`<div
-            class="text-md flex aspect-square h-[100px] items-center justify-center"
-            style="background:oklch(80% 50% ${Math.floor(Math.random()*710)+10});"
-          >
-            ${s}
-          </div>`)}
-    </div>
-  `},n={title:"CSS Plugins/ScrollShadow",component:"btu-scrollshadow",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-scrollshadow` utility class for adding shadows to the edges of a scrollable container once the content overflows. The shadows use our gray color palette. You can choose which shade of gray you want. The scroll container must not already use before & after pseudo elements. But, if you need to use before/after modifiers on the container, make sure you also manually set the content property to the `--whitespace` variable. This is a workaround for TWCSS automatically adding a content property to the before/after pseudo-elements, which overrides the `--whitespace` variable by default. Note: this currently only supports x-axis scrolling."},controls:{expanded:!0}},render:e=>l(e),argTypes:{theme:{control:{type:"select"},description:"Choose a shade of gray for the scroll shadow. 25 is almost white, and 900 is almost black.",options:["btu-scrollshadow-25","btu-scrollshadow-50","btu-scrollshadow-100","btu-scrollshadow-200","btu-scrollshadow-300","btu-scrollshadow-400","btu-scrollshadow-500","btu-scrollshadow-600","btu-scrollshadow-700","btu-scrollshadow-800","btu-scrollshadow-900"]}},args:{}},o={args:{}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
-  args: {}
-}`,...o.parameters?.docs?.source}}};const i=["Default"];export{o as Default,i as __namedExportsOrder,n as default};

package/dist/storybook/assets/if-defined-BZFPaJjl.js

@@ -1 +0,0 @@
-import{E as r}from"./iframe-BqvwP3or.js";const m=o=>o??r;export{m as o};