import{g as u,x as e}from"./iframe-CMPv_g6-.js";import{o as m}from"./if-defined-DzbkssR9.js";import{o as h}from"./style-map-968Ye5qo.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:g,argTypes:s}=u("btu-empty-state"),y=["sm","md","lg"],v=[1,2,3,4,5,6],k={title:"Components/Empty State",component:"btu-empty-state",tags:["autodocs"],parameters:{docs:{subtitle:"A standardized component for communicating the absence of content.",description:{component:`
<h3>When to use:</h3>
<ul>
  <li>To communicate the absence of content in tables, lists, or search results</li>
  <li>For error states, empty dashboards, or first-run experiences</li>
  <li>When you need a composable layout with optional graphic, heading, description, and actions</li>
</ul>

<h3>When not to use:</h3>
<ul>
  <li>For loading states (use a loader or skeleton instead)</li>
  <li>For inline validation messages (use form validation)</li>
</ul>

<h3>Composition:</h3>
<ul>
  <li><strong>Graphic</strong> — <code>slot="graphic"</code>: accepts <code>btu-icon</code>, <code>img</code>, <code>picture</code>, or <code>svg</code></li>
  <li><strong>Heading</strong> — via the <code>heading</code> attribute</li>
  <li><strong>Description</strong> — via the <code>description</code> attribute</li>
  <li><strong>Actions</strong> — <code>slot="actions"</code>: accepts buttons or links</li>
</ul>
        `}},actions:{handles:b},controls:{expanded:!0}},args:{...g,heading:"No results found",description:"Try adjusting your search or filter criteria to find what you are looking for.",size:"md"},argTypes:{...s,"--empty-state-max-width":{table:{disable:!0}},"--empty-state-color-heading":{table:{disable:!0}},"--empty-state-color-description":{table:{disable:!0}},heading:{...s.heading,control:{type:"text"},description:"Heading text displayed in the empty state."},description:{...s.description,control:{type:"text"},description:"Description text displayed below the heading."},size:{...s.size,control:{type:"select"},options:y,description:"Size variant affecting heading size, gaps, and description text."},"heading-level":{...s["heading-level"],control:{type:"select"},options:v,description:"Heading level (1-6). When set, overrides the size-based default (sm→5, md→4, lg→3) and drives both the semantic h1-h6 tag and the visual heading size."},maxWidth:{name:"--empty-state-max-width",control:{type:"text"},description:"Maximum width of the content block (default: min(75cqw, 360px))",table:{category:"css properties"}},colorHeading:{name:"--empty-state-color-heading",control:{type:"color"},description:"Heading text color (default: gray-900)",table:{category:"css properties"}},colorDescription:{name:"--empty-state-color-description",control:{type:"color"},description:"Description text color (default: gray-500)",table:{category:"css properties"}}},render:t=>{const o={};return t.maxWidth&&(o["--empty-state-max-width"]=t.maxWidth),t.colorHeading&&(o["--empty-state-color-heading"]=t.colorHeading),t.colorDescription&&(o["--empty-state-color-description"]=t.colorDescription),e`
      <btu-empty-state
        heading="${t.heading}"
        description="${t.description||""}"
        size="${t.size}"
        heading-level="${m(t["heading-level"])}"
        style=${h(o)}
      >
        <btu-icon
          slot="graphic"
          symbol="search"
          emphasize="pulse"
          style="color: oklch(var(--btu-theme-primary-600))"
        ></btu-icon>
        <button slot="actions" class="btu-button btu-button-gray">Clear search</button>
        <button slot="actions" class="btu-button btu-button-primary">
          <btu-icon symbol="plus"></btu-icon>Create new
        </button>
      </btu-empty-state>
    `}},i={args:{"heading-level":void 0}},a={args:{size:"sm",heading:"No items",description:"There are no items to display."},render:t=>e`
    <btu-empty-state heading="${t.heading}" description="${t.description||""}" size="${t.size}">
      <btu-icon
        slot="graphic"
        symbol="inbox"
        emphasize="pulse"
        style="color: oklch(var(--btu-theme-gray-500))"
      ></btu-icon>
      <btu-icon-button tooltip="click to reload" symbol="refresh-ccw" slot="actions" size="sm"></btu-icon-button>
    </btu-empty-state>
  `,parameters:{docs:{description:{story:"Small variant with compact spacing. Best for panels, sidebars, and constrained spaces where a full-size empty state would be excessive."}}}},n={args:{size:"lg",heading:"Welcome to your dashboard",description:"Get started by creating your first piece of content. You can always come back here to manage it."},render:t=>e`
    <btu-empty-state heading="${t.heading}" description="${t.description||""}" size="${t.size}">
      <btu-icon
        slot="graphic"
        symbol="layout-dashboard"
        emphasize="pulse"
        style="color: oklch(var(--btu-theme-primary-600))"
      ></btu-icon>
      <button slot="actions" class="btu-button btu-button-primary">Get started</button>
    </btu-empty-state>
  `,parameters:{docs:{description:{story:"Large variant for full-page empty states. Ideal for dashboards, landing pages, and first-run experiences where the empty state is the primary content."}}}},r={render:()=>e`
    <btu-empty-state heading="No images uploaded" description="Upload images to see them displayed here." size="md">
      <img slot="graphic" src="cloud-illustration.svg" alt="Cloud graphic" />
      <button slot="actions" class="btu-button btu-button-primary">Upload image</button>
    </btu-empty-state>
  `,parameters:{docs:{description:{story:"Uses a custom SVG in the graphic slot instead of a `btu-icon`. The graphic container automatically sizes `img`, `picture`, and `svg` elements larger than icons."}}}},c={render:()=>{const t=e`
      <picture slot="graphic">
        <img
          srcset="
            box-illustration.svg   120w,
            cloud-illustration.svg 140w,
            docs-illustration.svg  170w,
            box-illustration.svg   240w,
            cloud-illustration.svg 280w,
            docs-illustration.svg  340w
          "
          sizes="auto"
          src="box-illustration.svg"
          alt="Responsive graphic"
          loading="lazy"
        />
      </picture>
    `;return e`
      <div style="display: flex; align-items: flex-start; gap: 1rem;">
        <div style="width: 240px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
          <btu-empty-state heading="No results" description="Try a different query." size="sm">
            ${t}
            <button slot="actions" class="btu-button btu-button-gray btu-button-sm">Clear</button>
          </btu-empty-state>
        </div>
        <div style="width: 360px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
          <btu-empty-state
            heading="No images uploaded"
            description="Upload images to see them displayed here."
            size="md"
          >
            ${t}
            <button slot="actions" class="btu-button btu-button-primary">Upload image</button>
          </btu-empty-state>
        </div>
        <div style="width: 520px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
          <btu-empty-state
            heading="Welcome to Brightspot"
            description="Get started by creating your first piece of content."
            size="lg"
          >
            ${t}
            <button slot="actions" class="btu-button btu-button-primary">Get started</button>
          </btu-empty-state>
        </div>
      </div>
    `},parameters:{docs:{description:{story:'Three empty-states rendered side-by-side in progressively wider containers (240 / 360 / 520px) at sizes `sm` / `md` / `lg`. Every instance uses the **same** `<picture>` markup — one `srcset` listing three SVGs (`box-illustration`, `cloud-illustration`, `docs-illustration`), each at `1x` and `2x` width descriptors, plus `sizes="auto"`. Because the graphic container sizes the `<img>` from the empty-state `size` prop (118 / 128 / 160 px), the browser selects a different SVG for each instance at both `devicePixelRatio: 1` and `2` — so all three SVGs are visible in the story regardless of display density. This demonstrates how a single `<picture>` + `srcset` can serve different sources per-instance without swapping markup.'}}}},l={render:()=>e`
    <btu-empty-state
      heading="No data available"
      description="Check back later for updates."
      size="sm"
    ></btu-empty-state>
  `,parameters:{docs:{description:{story:"Text-only empty state with no graphic or actions. The graphic and actions containers collapse automatically via `:empty { display: none }`. Useful in tight spaces."}}}},d={render:()=>e`
    <btu-empty-state heading="No notifications" description="You are all caught up." size="md">
      <btu-icon
        slot="graphic"
        symbol="bell-off"
        emphasize="pulse"
        style="color: oklch(var(--btu-theme-gray-500))"
      ></btu-icon>
    </btu-empty-state>
  `,parameters:{docs:{description:{story:"Empty state without action buttons. The actions container collapses when empty. Useful for informational states where no user action is needed."}}}},p={render:()=>e`
    <btu-empty-state heading="Empty" size="sm">
      <btu-icon
        slot="graphic"
        symbol="inbox"
        emphasize="pulse"
        style="color: oklch(var(--btu-theme-gray-500))"
      ></btu-icon>
      <button slot="actions" class="btu-button btu-button-success btu-button-sm">Add item</button>
    </btu-empty-state>
  `,parameters:{docs:{description:{story:"Empty state with heading and actions but no description. The description is omitted by not setting the `description` attribute."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  args: {
    'heading-level': undefined
  }
}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  args: {
    size: 'sm',
    heading: 'No items',
    description: 'There are no items to display.'
  },
  render: args => html\`
    <btu-empty-state heading="\${args.heading}" description="\${args.description || ''}" size="\${args.size}">
      <btu-icon
        slot="graphic"
        symbol="inbox"
        emphasize="pulse"
        style="color: oklch(var(--btu-theme-gray-500))"
      ></btu-icon>
      <btu-icon-button tooltip="click to reload" symbol="refresh-ccw" slot="actions" size="sm"></btu-icon-button>
    </btu-empty-state>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Small variant with compact spacing. Best for panels, sidebars, and constrained spaces where a full-size empty state would be excessive.'
      }
    }
  }
}`,...a.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  args: {
    size: 'lg',
    heading: 'Welcome to your dashboard',
    description: 'Get started by creating your first piece of content. You can always come back here to manage it.'
  },
  render: args => html\`
    <btu-empty-state heading="\${args.heading}" description="\${args.description || ''}" size="\${args.size}">
      <btu-icon
        slot="graphic"
        symbol="layout-dashboard"
        emphasize="pulse"
        style="color: oklch(var(--btu-theme-primary-600))"
      ></btu-icon>
      <button slot="actions" class="btu-button btu-button-primary">Get started</button>
    </btu-empty-state>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Large variant for full-page empty states. Ideal for dashboards, landing pages, and first-run experiences where the empty state is the primary content.'
      }
    }
  }
}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <btu-empty-state heading="No images uploaded" description="Upload images to see them displayed here." size="md">
      <img slot="graphic" src="cloud-illustration.svg" alt="Cloud graphic" />
      <button slot="actions" class="btu-button btu-button-primary">Upload image</button>
    </btu-empty-state>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Uses a custom SVG in the graphic slot instead of a \`btu-icon\`. The graphic container automatically sizes \`img\`, \`picture\`, and \`svg\` elements larger than icons.'
      }
    }
  }
}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
  render: () => {
    // Identical <picture> markup in each instance: one srcset listing 3 SVGs, each
    // at two width descriptors (1x and 2x) so the selection holds at both DPR=1 and
    // DPR=2. \`sizes="auto"\` makes the browser pick based on the <img>'s actual
    // rendered width — driven by the empty-state \`size\` prop
    // (sm=118 / md=128 / lg=160 px × devicePixelRatio).
    const responsiveGraphic = html\`
      <picture slot="graphic">
        <img
          srcset="
            box-illustration.svg   120w,
            cloud-illustration.svg 140w,
            docs-illustration.svg  170w,
            box-illustration.svg   240w,
            cloud-illustration.svg 280w,
            docs-illustration.svg  340w
          "
          sizes="auto"
          src="box-illustration.svg"
          alt="Responsive graphic"
          loading="lazy"
        />
      </picture>
    \`;
    return html\`
      <div style="display: flex; align-items: flex-start; gap: 1rem;">
        <div style="width: 240px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
          <btu-empty-state heading="No results" description="Try a different query." size="sm">
            \${responsiveGraphic}
            <button slot="actions" class="btu-button btu-button-gray btu-button-sm">Clear</button>
          </btu-empty-state>
        </div>
        <div style="width: 360px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
          <btu-empty-state
            heading="No images uploaded"
            description="Upload images to see them displayed here."
            size="md"
          >
            \${responsiveGraphic}
            <button slot="actions" class="btu-button btu-button-primary">Upload image</button>
          </btu-empty-state>
        </div>
        <div style="width: 520px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
          <btu-empty-state
            heading="Welcome to Brightspot"
            description="Get started by creating your first piece of content."
            size="lg"
          >
            \${responsiveGraphic}
            <button slot="actions" class="btu-button btu-button-primary">Get started</button>
          </btu-empty-state>
        </div>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: 'Three empty-states rendered side-by-side in progressively wider containers (240 / 360 / 520px) at sizes \`sm\` / \`md\` / \`lg\`. Every instance uses the **same** \`<picture>\` markup — one \`srcset\` listing three SVGs (\`box-illustration\`, \`cloud-illustration\`, \`docs-illustration\`), each at \`1x\` and \`2x\` width descriptors, plus \`sizes="auto"\`. Because the graphic container sizes the \`<img>\` from the empty-state \`size\` prop (118 / 128 / 160 px), the browser selects a different SVG for each instance at both \`devicePixelRatio: 1\` and \`2\` — so all three SVGs are visible in the story regardless of display density. This demonstrates how a single \`<picture>\` + \`srcset\` can serve different sources per-instance without swapping markup.'
      }
    }
  }
}`,...c.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <btu-empty-state
      heading="No data available"
      description="Check back later for updates."
      size="sm"
    ></btu-empty-state>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Text-only empty state with no graphic or actions. The graphic and actions containers collapse automatically via \`:empty { display: none }\`. Useful in tight spaces.'
      }
    }
  }
}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <btu-empty-state heading="No notifications" description="You are all caught up." size="md">
      <btu-icon
        slot="graphic"
        symbol="bell-off"
        emphasize="pulse"
        style="color: oklch(var(--btu-theme-gray-500))"
      ></btu-icon>
    </btu-empty-state>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Empty state without action buttons. The actions container collapses when empty. Useful for informational states where no user action is needed.'
      }
    }
  }
}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <btu-empty-state heading="Empty" size="sm">
      <btu-icon
        slot="graphic"
        symbol="inbox"
        emphasize="pulse"
        style="color: oklch(var(--btu-theme-gray-500))"
      ></btu-icon>
      <button slot="actions" class="btu-button btu-button-success btu-button-sm">Add item</button>
    </btu-empty-state>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Empty state with heading and actions but no description. The description is omitted by not setting the \`description\` attribute.'
      }
    }
  }
}`,...p.parameters?.docs?.source}}};const S=["Default","Small","Large","WithImage","WithPicture","TextOnly","NoActions","NoDescription"];export{i as Default,n as Large,d as NoActions,p as NoDescription,a as Small,l as TextOnly,r as WithImage,c as WithPicture,S as __namedExportsOrder,k as default};
