@brightspot/ui 1.0.1-wc.4 → 1.2.0

package/dist/storybook/assets/Badge.stories-f4YvPz0W.js

@@ -0,0 +1,121 @@
+import{g as c,x as s}from"./iframe-Z4F0Cgki.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:l,argTypes:o}=c("btu-badge"),g=["info","primary","error","success","warning"],u={title:"Components/Badge",component:"btu-badge",tags:["autodocs"],parameters:{docs:{subtitle:"A component for highlighting important information",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>To call attention to something</li>
+  <li>For presenting status</li>
+  <li>For anything longer than a very short number</li>
+</ul>
+
+<h3>When not to use:</h3>
+<ul>
+  <li>For very short numbers. Instead use a notification</li>
+  <li>For circled notifications</li>
+</ul>
+        `}},actions:{handles:d},controls:{expanded:!0}},args:{...l,variant:"success",dot:!1,size:"sm"},argTypes:{...o,"--badge-color-foreground":{table:{disable:!0}},"--badge-color-background":{table:{disable:!0}},"--badge-radius-size":{table:{disable:!0}},"--badge-px":{table:{disable:!0}},"--badge-py":{table:{disable:!0}},"--badge-dot-size":{table:{disable:!0}},variant:{...o.variant,control:{type:"select"},options:g},dot:{...o.dot,control:{type:"boolean"}},size:{...o.size,control:{type:"select"},options:["sm","md","lg"]},customBackgroundColor:{name:"--badge-color-background",control:{type:"color"},description:"Custom background color - overrides the theme color",table:{category:"CSS Properties"}},customForegroundColor:{name:"--badge-color-foreground",control:{type:"color"},description:"Custom foreground (text) color - overrides the theme color",table:{category:"CSS Properties"}},customRadiusSize:{name:"--badge-radius-size",control:{type:"text"},description:"Custom border radius size - overrides the shape default (default: 999px)",table:{category:"CSS Properties"}},customPadX:{name:"--badge-px",control:{type:"text"},description:"Horizontal padding - overrides the size default",table:{category:"CSS Properties"}},customPadY:{name:"--badge-py",control:{type:"text"},description:"Vertical padding - overrides the size default",table:{category:"CSS Properties"}},customDotSize:{name:"--badge-dot-size",control:{type:"text"},description:"Size of the dot affordance (default: 6px)",table:{category:"CSS Properties"}}},render:e=>{const a=[];e.customBackgroundColor&&a.push(`--badge-color-background: ${e.customBackgroundColor}`),e.customForegroundColor&&a.push(`--badge-color-foreground: ${e.customForegroundColor}`),e.customRadiusSize&&a.push(`--badge-radius-size: ${e.customRadiusSize}`),e.customPadX&&a.push(`--badge-px: ${e.customPadX}`),e.customPadY&&a.push(`--badge-py: ${e.customPadY}`),e.customDotSize&&a.push(`--badge-dot-size: ${e.customDotSize}`);const n=a.length>0?a.join("; "):"";return s`<btu-badge variant="${e.variant}" ?dot="${e.dot}" size="${e.size}" style="${n}"
+      >Badge</btu-badge
+    >`}},i={args:{}},t={args:{variant:"success",size:"lg"},render:e=>s`<a href="#" class="hover:text-primary inline-flex items-center gap-2 hover:underline">
+      Hover over me to see the
+      <btu-badge variant="${e.variant}" size="${e.size}">Linked Badge</btu-badge>
+      in action.
+    </a>`,parameters:{docs:{description:{story:"Badges inside anchor elements automatically handle underlines properly. The underline uses the badge background color instead of the default link color, ensuring proper visual hierarchy when badges are used within linked elements."}}}},r={render:()=>s`<div class="flex flex-col gap-4">
+      <div class="flex items-center gap-2">
+        <strong>With Icon:</strong>
+        <btu-badge variant="warning" size="md">
+          <btu-icon symbol="triangle-alert" size="md"></btu-icon>
+          Warning
+        </btu-badge>
+      </div>
+      <div class="flex items-center gap-2">
+        <strong>With Image:</strong>
+        <btu-badge variant="primary" size="md">
+          <div
+            class="-ms-[--badge-px] aspect-square w-[20px] bg-cover bg-center bg-no-repeat [clipPath:circle(50%_at_center)]"
+            style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjM1IDY1MCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGRlZnM+DQo8ZyBpZD0idW5pb24iPg0KPHVzZSB5PSItLjIxNiIgeGxpbms6aHJlZj0iI3g0Ii8+DQo8dXNlIHhsaW5rOmhyZWY9IiN4NCIvPg0KPHVzZSB5PSIuMjE2IiB4bGluazpocmVmPSIjczYiLz4NCjwvZz4NCjxnIGlkPSJ4NCI+DQo8dXNlIHhsaW5rOmhyZWY9IiNzNiIvPg0KPHVzZSB5PSIuMDU0IiB4bGluazpocmVmPSIjczUiLz4NCjx1c2UgeT0iLjEwOCIgeGxpbms6aHJlZj0iI3M2Ii8+DQo8dXNlIHk9Ii4xNjIiIHhsaW5rOmhyZWY9IiNzNSIvPg0KPC9nPg0KPGcgaWQ9InM1Ij4NCjx1c2UgeD0iLS4yNTIiIHhsaW5rOmhyZWY9IiNzdGFyIi8+DQo8dXNlIHg9Ii0uMTI2IiB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4PSIuMTI2IiB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4PSIuMjUyIiB4bGluazpocmVmPSIjc3RhciIvPg0KPC9nPg0KPGcgaWQ9InM2Ij4NCjx1c2UgeD0iLS4wNjMiIHhsaW5rOmhyZWY9IiNzNSIvPg0KPHVzZSB4PSIuMzE1IiB4bGluazpocmVmPSIjc3RhciIvPg0KPC9nPg0KPGcgaWQ9InN0YXIiPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0ibWF0cml4KC0uODA5MDIgLS41ODc3OSAuNTg3NzkgLS44MDkwMiAwIDApIi8+DQo8dXNlIHhsaW5rOmhyZWY9IiNwdCIgdHJhbnNmb3JtPSJtYXRyaXgoLjMwOTAyIC0uOTUxMDYgLjk1MTA2IC4zMDkwMiAwIDApIi8+DQo8dXNlIHhsaW5rOmhyZWY9IiNwdCIvPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0icm90YXRlKDcyKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0icm90YXRlKDE0NCkiLz4NCjwvZz4NCjxwYXRoIGZpbGw9IiNmZmYiIGlkPSJwdCIgZD0iTS0uMTYyNSwwIDAtLjUgLjE2MjUsMHoiIHRyYW5zZm9ybT0ic2NhbGUoLjA2MTYpIi8+DQo8cGF0aCBmaWxsPSIjYmYwYTMwIiBpZD0ic3RyaXBlIiBkPSJtMCwwaDEyMzV2NTBoLTEyMzV6Ii8+DQo8L2RlZnM+DQo8cGF0aCBmaWxsPSIjZmZmIiBkPSJtMCwwaDEyMzV2NjUwaC0xMjM1eiIvPg0KPHVzZSB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8dXNlIHk9IjEwMCIgeGxpbms6aHJlZj0iI3N0cmlwZSIvPg0KPHVzZSB5PSIyMDAiIHhsaW5rOmhyZWY9IiNzdHJpcGUiLz4NCjx1c2UgeT0iMzAwIiB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8dXNlIHk9IjQwMCIgeGxpbms6aHJlZj0iI3N0cmlwZSIvPg0KPHVzZSB5PSI1MDAiIHhsaW5rOmhyZWY9IiNzdHJpcGUiLz4NCjx1c2UgeT0iNjAwIiB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8cGF0aCBmaWxsPSIjMDAyODY4IiBkPSJtMCwwaDQ5NHYzNTBoLTQ5NHoiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3VuaW9uIiB0cmFuc2Zvcm09Im1hdHJpeCg2NTAgMCAwIDY1MCAyNDcgMTc1KSIvPg0KPC9zdmc+DQo=')"
+            aria-label="Flag"
+          ></div>
+          United States
+        </btu-badge>
+      </div>
+      <div class="flex items-center gap-2">
+        <strong>Rectangular Shape:</strong>
+        <btu-badge variant="success" size="md" style="--badge-radius-size: 0px">Rectangle</btu-badge>
+      </div>
+      <div class="story-custom-colors flex items-center gap-2">
+        <strong>Custom Colors:</strong>
+        <btu-badge
+          dot
+          variant="primary"
+          size="lg"
+          style="--badge-color-background: oklch(70% 0.3 var(--hue)); --badge-color-foreground: oklch(95% 0.1 calc(-1 * var(--hue)));"
+          >Custom Badge</btu-badge
+        >
+      </div>
+    </div>`,parameters:{docs:{description:{story:"\nBadges support advanced customization through CSS properties and content composition:\n\n**With Icons and Images:** Place icon or image elements inside the badge along with your label text. Visual elements should always be placed before the label text. Note that the `<btu-icon>` web component can be used for icons.\n\n**Custom Shape:** The badge shape defaults to pill (rounded), but can be made rectangular by setting `--badge-radius-size: 0px`.\n\n**Custom Colors:** Override theme colors using `--badge-color-background` and `--badge-color-foreground` CSS properties. The foreground color controls the text color (and any child elements that inherit text color, such as the dot and icons). The background color controls the badge's background fill."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...i.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    variant: 'success',
+    size: 'lg'
+  },
+  render: args => html\`<a href="#" class="hover:text-primary inline-flex items-center gap-2 hover:underline">
+      Hover over me to see the
+      <btu-badge variant="\${args.variant}" size="\${args.size}">Linked Badge</btu-badge>
+      in action.
+    </a>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Badges inside anchor elements automatically handle underlines properly. The underline uses the badge background color instead of the default link color, ensuring proper visual hierarchy when badges are used within linked elements.\`
+      }
+    }
+  }
+}`,...t.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-col gap-4">
+      <div class="flex items-center gap-2">
+        <strong>With Icon:</strong>
+        <btu-badge variant="warning" size="md">
+          <btu-icon symbol="triangle-alert" size="md"></btu-icon>
+          Warning
+        </btu-badge>
+      </div>
+      <div class="flex items-center gap-2">
+        <strong>With Image:</strong>
+        <btu-badge variant="primary" size="md">
+          <div
+            class="-ms-[--badge-px] aspect-square w-[20px] bg-cover bg-center bg-no-repeat [clipPath:circle(50%_at_center)]"
+            style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjM1IDY1MCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGRlZnM+DQo8ZyBpZD0idW5pb24iPg0KPHVzZSB5PSItLjIxNiIgeGxpbms6aHJlZj0iI3g0Ii8+DQo8dXNlIHhsaW5rOmhyZWY9IiN4NCIvPg0KPHVzZSB5PSIuMjE2IiB4bGluazpocmVmPSIjczYiLz4NCjwvZz4NCjxnIGlkPSJ4NCI+DQo8dXNlIHhsaW5rOmhyZWY9IiNzNiIvPg0KPHVzZSB5PSIuMDU0IiB4bGluazpocmVmPSIjczUiLz4NCjx1c2UgeT0iLjEwOCIgeGxpbms6aHJlZj0iI3M2Ii8+DQo8dXNlIHk9Ii4xNjIiIHhsaW5rOmhyZWY9IiNzNSIvPg0KPC9nPg0KPGcgaWQ9InM1Ij4NCjx1c2UgeD0iLS4yNTIiIHhsaW5rOmhyZWY9IiNzdGFyIi8+DQo8dXNlIHg9Ii0uMTI2IiB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4PSIuMTI2IiB4bGluazpocmVmPSIjc3RhciIvPg0KPHVzZSB4PSIuMjUyIiB4bGluazpocmVmPSIjc3RhciIvPg0KPC9nPg0KPGcgaWQ9InM2Ij4NCjx1c2UgeD0iLS4wNjMiIHhsaW5rOmhyZWY9IiNzNSIvPg0KPHVzZSB4PSIuMzE1IiB4bGluazpocmVmPSIjc3RhciIvPg0KPC9nPg0KPGcgaWQ9InN0YXIiPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0ibWF0cml4KC0uODA5MDIgLS41ODc3OSAuNTg3NzkgLS44MDkwMiAwIDApIi8+DQo8dXNlIHhsaW5rOmhyZWY9IiNwdCIgdHJhbnNmb3JtPSJtYXRyaXgoLjMwOTAyIC0uOTUxMDYgLjk1MTA2IC4zMDkwMiAwIDApIi8+DQo8dXNlIHhsaW5rOmhyZWY9IiNwdCIvPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0icm90YXRlKDcyKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcHQiIHRyYW5zZm9ybT0icm90YXRlKDE0NCkiLz4NCjwvZz4NCjxwYXRoIGZpbGw9IiNmZmYiIGlkPSJwdCIgZD0iTS0uMTYyNSwwIDAtLjUgLjE2MjUsMHoiIHRyYW5zZm9ybT0ic2NhbGUoLjA2MTYpIi8+DQo8cGF0aCBmaWxsPSIjYmYwYTMwIiBpZD0ic3RyaXBlIiBkPSJtMCwwaDEyMzV2NTBoLTEyMzV6Ii8+DQo8L2RlZnM+DQo8cGF0aCBmaWxsPSIjZmZmIiBkPSJtMCwwaDEyMzV2NjUwaC0xMjM1eiIvPg0KPHVzZSB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8dXNlIHk9IjEwMCIgeGxpbms6aHJlZj0iI3N0cmlwZSIvPg0KPHVzZSB5PSIyMDAiIHhsaW5rOmhyZWY9IiNzdHJpcGUiLz4NCjx1c2UgeT0iMzAwIiB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8dXNlIHk9IjQwMCIgeGxpbms6aHJlZj0iI3N0cmlwZSIvPg0KPHVzZSB5PSI1MDAiIHhsaW5rOmhyZWY9IiNzdHJpcGUiLz4NCjx1c2UgeT0iNjAwIiB4bGluazpocmVmPSIjc3RyaXBlIi8+DQo8cGF0aCBmaWxsPSIjMDAyODY4IiBkPSJtMCwwaDQ5NHYzNTBoLTQ5NHoiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3VuaW9uIiB0cmFuc2Zvcm09Im1hdHJpeCg2NTAgMCAwIDY1MCAyNDcgMTc1KSIvPg0KPC9zdmc+DQo=')"
+            aria-label="Flag"
+          ></div>
+          United States
+        </btu-badge>
+      </div>
+      <div class="flex items-center gap-2">
+        <strong>Rectangular Shape:</strong>
+        <btu-badge variant="success" size="md" style="--badge-radius-size: 0px">Rectangle</btu-badge>
+      </div>
+      <div class="story-custom-colors flex items-center gap-2">
+        <strong>Custom Colors:</strong>
+        <btu-badge
+          dot
+          variant="primary"
+          size="lg"
+          style="--badge-color-background: oklch(70% 0.3 var(--hue)); --badge-color-foreground: oklch(95% 0.1 calc(-1 * var(--hue)));"
+          >Custom Badge</btu-badge
+        >
+      </div>
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+Badges support advanced customization through CSS properties and content composition:
+
+**With Icons and Images:** Place icon or image elements inside the badge along with your label text. Visual elements should always be placed before the label text. Note that the \\\`<btu-icon>\\\` web component can be used for icons.
+
+**Custom Shape:** The badge shape defaults to pill (rounded), but can be made rectangular by setting \\\`--badge-radius-size: 0px\\\`.
+
+**Custom Colors:** Override theme colors using \\\`--badge-color-background\\\` and \\\`--badge-color-foreground\\\` CSS properties. The foreground color controls the text color (and any child elements that inherit text color, such as the dot and icons). The background color controls the badge's background fill.\`
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};const b=["Default","InsideAnchor","AdvancedUsage"];export{r as AdvancedUsage,i as Default,t as InsideAnchor,b as __namedExportsOrder,u as default};

package/dist/storybook/assets/Button.stories-N66xrq4q.js

@@ -0,0 +1,63 @@
+import{x as c}from"./iframe-Z4F0Cgki.js";import"./preload-helper-PPVm8Dsz.js";const v=({color:r="primary",pressed:l,fill:d,contained:u,outlined:p,size:a="sm",label:b,icon:i,hideText:m,disabled:h})=>{const g=d?"":"btu-button-fill-none",y=u?"":"btu-button-container-none",f=p?"btu-button-outline":"",x=m?"btu-button-text-hidden":"";return c`
+    <button
+      type="button"
+      class=${["btu-button",`btu-button-${r}`,`btu-button-${a}`,g,y,f,x].join(" ")}
+      ?disabled=${h}
+      aria-pressed=${l?"true":"false"}
+    >
+      ${i?c`<btu-icon symbol=${i} size=${a}></btu-icon>`:""} ${b}
+    </button>
+  `},I=["ai","black","white","primary","teal","gray","purple","rose","error","warning","success"],T={title:"CSS Plugins/Button",component:"btu-button",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-button` utility class for styling buttons. Use it on `<button>` elements preferably, but it can also be used on `<a>` or other clickable elements. The plugin includes variants for different colors, sizes, and styles such as filled, outlined, and contained buttons."},controls:{expanded:!0}},render:r=>v(r),argTypes:{color:{control:{type:"select"},options:I},contained:{control:{type:"boolean"},description:"Does the button have a container?"},disabled:{control:{type:"boolean"},description:"Is the button disabled?"},fill:{control:{type:"boolean"},description:"Is the button filled?"},hideText:{control:{type:"boolean"},description:"Icon only mode (hides label)"},icon:{control:{type:"text"},description:'Lucide icon name (e.g., "search", "smile", "check")'},label:{control:{type:"text"},description:"Button label text"},outlined:{control:{type:"boolean"},description:"Is the button outlined?"},pressed:{control:{type:"boolean"},description:"Is the button pressed?"},size:{control:{type:"select"},options:["sm","md","lg","xl","2xl"]}},args:{color:"primary",contained:!0,disabled:!1,fill:!0,hideText:!1,icon:"",label:"Button",outlined:!1,pressed:!1,size:"md"}},e={args:{}},t={args:{label:"Search",icon:"search"},parameters:{docs:{description:{story:"Button with an icon alongside text. Uses the `<btu-icon>` component."}}}},o={args:{icon:"smile",hideText:!0},parameters:{docs:{description:{story:"Icon-only button. Uses `btu-button-text-hidden` to hide the label and `<btu-icon>` for the icon."}}}},s={args:{label:"Disabled Button",disabled:!0},parameters:{docs:{description:{story:"Disabled button state. Uses the `[disabled]` attribute to trigger disabled styling with reduced opacity and pointer events disabled."}}}},n={args:{label:"Active Button",pressed:!0,fill:!1,icon:"check",hideText:!0},parameters:{docs:{description:{story:'Active/pressed button state. Uses `[aria-pressed="true"]` attribute to trigger the pressed styling, typically used for toggle buttons or to show an active state.'}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Search',
+    icon: 'search'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Button with an icon alongside text. Uses the \\\`<btu-icon>\\\` component.\`
+      }
+    }
+  }
+}`,...t.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    icon: 'smile',
+    hideText: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Icon-only button. Uses \\\`btu-button-text-hidden\\\` to hide the label and \\\`<btu-icon>\\\` for the icon.\`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Disabled Button',
+    disabled: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Disabled button state. Uses the \\\`[disabled]\\\` attribute to trigger disabled styling with reduced opacity and pointer events disabled.\`
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Active Button',
+    pressed: true,
+    fill: false,
+    icon: 'check',
+    hideText: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Active/pressed button state. Uses \\\`[aria-pressed="true"]\\\` attribute to trigger the pressed styling, typically used for toggle buttons or to show an active state.\`
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};const w=["Default","WithIcon","IconOnly","Disabled","ActivePressed"];export{n as ActivePressed,e as Default,s as Disabled,o as IconOnly,t as WithIcon,w as __namedExportsOrder,T as default};