import{g as d,x as a}from"./iframe-CMPv_g6-.js";import{o as b}from"./style-map-968Ye5qo.js";import"./preload-helper-PPVm8Dsz.js";const{events:m,args:u,argTypes:e}=d("btu-action-item"),g={title:"Components/Action Bar/Action Item",component:"btu-action-item",tags:["autodocs"],parameters:{docs:{subtitle:"A button element for use within an ActionBar",description:{component:`
ActionItem renders a styled button using existing \`btu-button-*\` classes. It supports four visual variants — primary, secondary, tertiary, and destructive — along with optional icons, icon-only mode, loading state, and disabled state.

<h3>Standalone vs. Inside ActionBar:</h3>
<p>ActionItem can be used standalone for documentation purposes. However, the <code>zone</code> and <code>compactable</code> attributes only take effect inside a <code>btu-action-bar</code> parent, which manages two-zone layout, overflow, and progressive compacting.</p>

<h3>CSS Customization:</h3>
<p>Set <code>--button-*</code> CSS custom properties on the element or a parent to customize colors and border-radius via CSS inheritance.</p>
        `}},actions:{handles:m},controls:{expanded:!0}},args:{...u,label:"Action Item",variant:"secondary",symbol:"","icon-only":!1,disabled:!1,loading:!1,zone:"",compactable:!1},argTypes:{...e,"--button-color":{table:{disable:!0}},"--button-text-color":{table:{disable:!0}},"--button-border-radius":{table:{disable:!0}},label:{...e.label,control:{type:"text"},description:"Button label text"},variant:{...e.variant,control:{type:"select"},options:["primary","secondary","tertiary","destructive"],description:"Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'"},symbol:{...e.symbol,control:{type:"text"},description:"Lucide icon name for the leading icon"},"icon-only":{...e["icon-only"],control:{type:"boolean"},description:"Show icon only, hiding the label. Tooltip activates automatically."},disabled:{...e.disabled,control:{type:"boolean"},description:"Disables the action item (remains focusable via aria-disabled)"},loading:{...e.loading,control:{type:"boolean"},description:"Shows a loading spinner and prevents interaction"},zone:{...e.zone,control:{type:"select"},options:["","start","end"],description:"Zone placement for ActionBar two-zone layout. Only effective inside a btu-action-bar."},compactable:{...e.compactable,control:{type:"boolean"},description:"Opt-in for progressive label compacting. Only effective inside a btu-action-bar with `compact`."},buttonColor:{name:"--button-color",control:{type:"color"},description:"Override button background color",table:{category:"css properties"}},buttonTextColor:{name:"--button-text-color",control:{type:"color"},description:"Override button text color",table:{category:"css properties"}},buttonBorderRadius:{name:"--button-border-radius",control:{type:"text"},description:"Override button border radius",table:{category:"css properties"}}},render:t=>{const i={};return t.buttonColor&&(i["--button-color"]=t.buttonColor),t.buttonTextColor&&(i["--button-text-color"]=t.buttonTextColor),t.buttonBorderRadius&&(i["--button-border-radius"]=t.buttonBorderRadius),a`
      <btu-action-item
        label="${t.label}"
        variant="${t.variant}"
        symbol="${t.symbol}"
        ?icon-only="${t["icon-only"]}"
        ?disabled="${t.disabled}"
        ?loading="${t.loading}"
        zone="${t.zone}"
        ?compactable="${t.compactable}"
        style=${b(i)}
      ></btu-action-item>
    `}},o={args:{}},n={render:()=>a`
    <div class="flex items-center gap-4">
      <btu-action-item variant="primary" label="Primary"></btu-action-item>
      <btu-action-item variant="secondary" label="Secondary"></btu-action-item>
      <btu-action-item variant="tertiary" label="Tertiary"></btu-action-item>
      <btu-action-item variant="destructive" label="Destructive"></btu-action-item>
    </div>
  `,parameters:{docs:{description:{story:"All four visual variants side by side. Each maps to `btu-button-*` classes from the button Tailwind plugin."}}}},r={render:()=>a`
    <div class="flex items-center gap-4">
      <btu-action-item variant="primary" label="Publish" symbol="send"></btu-action-item>
      <btu-action-item variant="secondary" label="Save Draft" symbol="file-text"></btu-action-item>
      <btu-action-item variant="tertiary" label="Preview" symbol="eye"></btu-action-item>
      <btu-action-item variant="destructive" label="Delete" symbol="trash-2"></btu-action-item>
    </div>
  `,parameters:{docs:{description:{story:"Each variant with a leading Lucide icon. Set the `symbol` attribute to any Lucide icon name."}}}},s={render:()=>a`
    <div class="flex items-center gap-4">
      <btu-action-item variant="primary" label="Save" symbol="save" icon-only></btu-action-item>
      <btu-action-item variant="secondary" label="Settings" symbol="settings" icon-only></btu-action-item>
      <btu-action-item variant="tertiary" label="Preview" symbol="eye" icon-only></btu-action-item>
      <btu-action-item variant="destructive" label="Delete" symbol="trash-2" icon-only></btu-action-item>
    </div>
  `,parameters:{docs:{description:{story:"Icon-only mode hides the label and shows a tooltip on hover. The `label` is used as the `aria-label` for accessibility."}}}},l={render:()=>a`
    <div class="flex flex-col gap-4">
      <div>
        <p class="mb-2 text-sm font-medium text-gray-500">Disabled</p>
        <div class="flex items-center gap-4">
          <btu-action-item variant="primary" label="Primary" disabled></btu-action-item>
          <btu-action-item variant="secondary" label="Secondary" disabled></btu-action-item>
          <btu-action-item variant="tertiary" label="Tertiary" disabled></btu-action-item>
          <btu-action-item variant="destructive" label="Destructive" disabled></btu-action-item>
        </div>
      </div>
      <div>
        <p class="mb-2 text-sm font-medium text-gray-500">Loading</p>
        <div class="flex items-center gap-4">
          <btu-action-item variant="primary" label="Saving..." loading></btu-action-item>
          <btu-action-item variant="secondary" label="Loading..." loading></btu-action-item>
          <btu-action-item variant="tertiary" label="Loading..." loading></btu-action-item>
          <btu-action-item variant="destructive" label="Deleting..." loading></btu-action-item>
        </div>
      </div>
    </div>
  `,parameters:{docs:{description:{story:"Disabled items remain focusable for accessibility (via `aria-disabled`) but suppress click events. Loading items show a spinner and also prevent interaction."}}}},c={render:()=>a`
    <div class="flex items-center gap-4">
      <btu-action-item
        variant="primary"
        label="Purple"
        symbol="palette"
        style=${b({"--button-color":"oklch(0.55 0.2 290)","--button-text-color":"white","--button-border-radius":"999px"})}
      ></btu-action-item>
      <btu-action-item
        variant="secondary"
        label="Rounded"
        symbol="circle"
        style=${b({"--button-border-radius":"999px"})}
      ></btu-action-item>
      <btu-action-item
        variant="primary"
        label="Teal"
        symbol="droplets"
        style=${b({"--button-color":"oklch(0.65 0.15 180)","--button-text-color":"white"})}
      ></btu-action-item>
    </div>
  `,parameters:{docs:{description:{story:"CSS custom properties (`--button-color`, `--button-text-color`, `--button-border-radius`) allow visual customization. Use the controls panel on the Default story to experiment interactively."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  args: {}
}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="flex items-center gap-4">
      <btu-action-item variant="primary" label="Primary"></btu-action-item>
      <btu-action-item variant="secondary" label="Secondary"></btu-action-item>
      <btu-action-item variant="tertiary" label="Tertiary"></btu-action-item>
      <btu-action-item variant="destructive" label="Destructive"></btu-action-item>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'All four visual variants side by side. Each maps to \`btu-button-*\` classes from the button Tailwind plugin.'
      }
    }
  }
}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="flex items-center gap-4">
      <btu-action-item variant="primary" label="Publish" symbol="send"></btu-action-item>
      <btu-action-item variant="secondary" label="Save Draft" symbol="file-text"></btu-action-item>
      <btu-action-item variant="tertiary" label="Preview" symbol="eye"></btu-action-item>
      <btu-action-item variant="destructive" label="Delete" symbol="trash-2"></btu-action-item>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Each variant with a leading Lucide icon. Set the \`symbol\` attribute to any Lucide icon name.'
      }
    }
  }
}`,...r.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="flex items-center gap-4">
      <btu-action-item variant="primary" label="Save" symbol="save" icon-only></btu-action-item>
      <btu-action-item variant="secondary" label="Settings" symbol="settings" icon-only></btu-action-item>
      <btu-action-item variant="tertiary" label="Preview" symbol="eye" icon-only></btu-action-item>
      <btu-action-item variant="destructive" label="Delete" symbol="trash-2" icon-only></btu-action-item>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Icon-only mode hides the label and shows a tooltip on hover. The \`label\` is used as the \`aria-label\` for accessibility.'
      }
    }
  }
}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="flex flex-col gap-4">
      <div>
        <p class="mb-2 text-sm font-medium text-gray-500">Disabled</p>
        <div class="flex items-center gap-4">
          <btu-action-item variant="primary" label="Primary" disabled></btu-action-item>
          <btu-action-item variant="secondary" label="Secondary" disabled></btu-action-item>
          <btu-action-item variant="tertiary" label="Tertiary" disabled></btu-action-item>
          <btu-action-item variant="destructive" label="Destructive" disabled></btu-action-item>
        </div>
      </div>
      <div>
        <p class="mb-2 text-sm font-medium text-gray-500">Loading</p>
        <div class="flex items-center gap-4">
          <btu-action-item variant="primary" label="Saving..." loading></btu-action-item>
          <btu-action-item variant="secondary" label="Loading..." loading></btu-action-item>
          <btu-action-item variant="tertiary" label="Loading..." loading></btu-action-item>
          <btu-action-item variant="destructive" label="Deleting..." loading></btu-action-item>
        </div>
      </div>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Disabled items remain focusable for accessibility (via \`aria-disabled\`) but suppress click events. Loading items show a spinner and also prevent interaction.'
      }
    }
  }
}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="flex items-center gap-4">
      <btu-action-item
        variant="primary"
        label="Purple"
        symbol="palette"
        style=\${styleMap({
    '--button-color': 'oklch(0.55 0.2 290)',
    '--button-text-color': 'white',
    '--button-border-radius': '999px'
  })}
      ></btu-action-item>
      <btu-action-item
        variant="secondary"
        label="Rounded"
        symbol="circle"
        style=\${styleMap({
    '--button-border-radius': '999px'
  })}
      ></btu-action-item>
      <btu-action-item
        variant="primary"
        label="Teal"
        symbol="droplets"
        style=\${styleMap({
    '--button-color': 'oklch(0.65 0.15 180)',
    '--button-text-color': 'white'
  })}
      ></btu-action-item>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'CSS custom properties (\`--button-color\`, \`--button-text-color\`, \`--button-border-radius\`) allow visual customization. Use the controls panel on the Default story to experiment interactively.'
      }
    }
  }
}`,...c.parameters?.docs?.source}}};const h=["Default","Variants","WithIcons","IconOnly","States","CustomStyling"];export{c as CustomStyling,o as Default,s as IconOnly,l as States,n as Variants,r as WithIcons,h as __namedExportsOrder,g as default};
