/**
 * Spacing Primitives - Foundation
 * @generated 2025-12-12T06:29:16.107944
 */
export default {
  title: 'Foundation/Spacing',
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'Spacing scale based on 4px grid. Use for margins, padding, and gaps.'
      }
    }
  }
};

const styles = `
  .spacing-grid { display: flex; flex-direction: column; gap: 0.25rem; max-width: 600px; }
  .spacing-item { display: flex; align-items: center; gap: 1rem; }
  .bar { height: 20px; background: var(--color-primary, #18181b); border-radius: 2px; min-width: 2px; }
  .info { display: flex; gap: 1rem; font-family: monospace; font-size: 0.75rem; }
  .name { font-weight: 600; min-width: 32px; }
  .value { color: #6b7280; min-width: 80px; }
  .comment { color: #9ca3af; font-size: 0.65rem; }
`;

export const SpacingScale = {
  render: () => `
    <style>${styles}</style>
    <div class="spacing-grid">
      
      <div class="spacing-item">
        <div class="bar" style="width: 1px;"></div>
        <div class="info">
          <span class="name">px</span>
          <span class="value">1px</span>
          <span class="comment"></span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 0;"></div>
        <div class="info">
          <span class="name">0</span>
          <span class="value">0</span>
          <span class="comment"></span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 0.125rem;"></div>
        <div class="info">
          <span class="name">0.5</span>
          <span class="value">0.125rem</span>
          <span class="comment">2px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 0.25rem;"></div>
        <div class="info">
          <span class="name">1</span>
          <span class="value">0.25rem</span>
          <span class="comment">4px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 0.375rem;"></div>
        <div class="info">
          <span class="name">1.5</span>
          <span class="value">0.375rem</span>
          <span class="comment">6px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 0.5rem;"></div>
        <div class="info">
          <span class="name">2</span>
          <span class="value">0.5rem</span>
          <span class="comment">8px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 0.625rem;"></div>
        <div class="info">
          <span class="name">2.5</span>
          <span class="value">0.625rem</span>
          <span class="comment">10px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 0.75rem;"></div>
        <div class="info">
          <span class="name">3</span>
          <span class="value">0.75rem</span>
          <span class="comment">12px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 0.875rem;"></div>
        <div class="info">
          <span class="name">3.5</span>
          <span class="value">0.875rem</span>
          <span class="comment">14px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 1rem;"></div>
        <div class="info">
          <span class="name">4</span>
          <span class="value">1rem</span>
          <span class="comment">16px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 1.25rem;"></div>
        <div class="info">
          <span class="name">5</span>
          <span class="value">1.25rem</span>
          <span class="comment">20px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 1.5rem;"></div>
        <div class="info">
          <span class="name">6</span>
          <span class="value">1.5rem</span>
          <span class="comment">24px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 1.75rem;"></div>
        <div class="info">
          <span class="name">7</span>
          <span class="value">1.75rem</span>
          <span class="comment">28px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 2rem;"></div>
        <div class="info">
          <span class="name">8</span>
          <span class="value">2rem</span>
          <span class="comment">32px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 2.25rem;"></div>
        <div class="info">
          <span class="name">9</span>
          <span class="value">2.25rem</span>
          <span class="comment">36px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 2.5rem;"></div>
        <div class="info">
          <span class="name">10</span>
          <span class="value">2.5rem</span>
          <span class="comment">40px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 2.75rem;"></div>
        <div class="info">
          <span class="name">11</span>
          <span class="value">2.75rem</span>
          <span class="comment">44px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 3rem;"></div>
        <div class="info">
          <span class="name">12</span>
          <span class="value">3rem</span>
          <span class="comment">48px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 3.5rem;"></div>
        <div class="info">
          <span class="name">14</span>
          <span class="value">3.5rem</span>
          <span class="comment">56px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 4rem;"></div>
        <div class="info">
          <span class="name">16</span>
          <span class="value">4rem</span>
          <span class="comment">64px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 5rem;"></div>
        <div class="info">
          <span class="name">20</span>
          <span class="value">5rem</span>
          <span class="comment">80px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 6rem;"></div>
        <div class="info">
          <span class="name">24</span>
          <span class="value">6rem</span>
          <span class="comment">96px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 7rem;"></div>
        <div class="info">
          <span class="name">28</span>
          <span class="value">7rem</span>
          <span class="comment">112px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 8rem;"></div>
        <div class="info">
          <span class="name">32</span>
          <span class="value">8rem</span>
          <span class="comment">128px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 9rem;"></div>
        <div class="info">
          <span class="name">36</span>
          <span class="value">9rem</span>
          <span class="comment">144px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 10rem;"></div>
        <div class="info">
          <span class="name">40</span>
          <span class="value">10rem</span>
          <span class="comment">160px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 11rem;"></div>
        <div class="info">
          <span class="name">44</span>
          <span class="value">11rem</span>
          <span class="comment">176px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 12rem;"></div>
        <div class="info">
          <span class="name">48</span>
          <span class="value">12rem</span>
          <span class="comment">192px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 13rem;"></div>
        <div class="info">
          <span class="name">52</span>
          <span class="value">13rem</span>
          <span class="comment">208px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 14rem;"></div>
        <div class="info">
          <span class="name">56</span>
          <span class="value">14rem</span>
          <span class="comment">224px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 15rem;"></div>
        <div class="info">
          <span class="name">60</span>
          <span class="value">15rem</span>
          <span class="comment">240px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 16rem;"></div>
        <div class="info">
          <span class="name">64</span>
          <span class="value">16rem</span>
          <span class="comment">256px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 18rem;"></div>
        <div class="info">
          <span class="name">72</span>
          <span class="value">18rem</span>
          <span class="comment">288px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 20rem;"></div>
        <div class="info">
          <span class="name">80</span>
          <span class="value">20rem</span>
          <span class="comment">320px</span>
        </div>
      </div>
      <div class="spacing-item">
        <div class="bar" style="width: 24rem;"></div>
        <div class="info">
          <span class="name">96</span>
          <span class="value">24rem</span>
          <span class="comment">384px</span>
        </div>
      </div>
    </div>
  `
};