Spacer Primitive

---
//    VELOCITY COMPONENT · theming
// 
//    Colours here are Tailwind `primary-*` / `accent-*`, which resolve through
//    the Velocity preset. Out of the box they are a neutral indigo — NOT the
//    Aidxn brand — so this drops into your project without dragging our look in.
// 
//    ⚡ NOT USING VELOCITY? Run this once, in your project root:
// 
//          velocityx theme
// 
//    It writes velocity-preset.cjs + velocity-theme.css. Add the preset to your
//    tailwind.config, import the css, then set your whole brand in ONE place:
// 
//          :root {
//            --vx-brand: custom;
//            --vx-primary-600: 220 38 38;   <- your action colour
//            --vx-primary-700: 185 28 28;
//          }
// 
//    ⚠️  Raw RGB channels, space separated — NOT hex. `#DC2626` here silently
//        breaks every /opacity variant in the library (bg-primary-600/20 etc).
// 
//    Prefer not to install anything? Find-and-replace `primary-` with your own
//    scale name. Nothing else in this file depends on Velocity.
/**
 * Spacer — Explicit, visible-in-markup vertical (or horizontal) gap when a
 * `gap`/`space-y` utility on the parent isn't available or isn't the right
 * tool (e.g. a one-off gap between two unrelated sections authored by
 * different components, or a flex `justify-between` push-to-edges spacer
 * via `grow`).
 *
 * Renders `aria-hidden` and has no semantic meaning — purely visual. Size
 * is a Tailwind spacing step; `grow` ignores `size` and instead fills all
 * available space (the classic flexbox "spacer div" trick).
 */
export interface Props {
  size?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32;
  axis?: 'vertical' | 'horizontal';
  grow?: boolean;
}

const { size = 8, axis = 'vertical', grow = false } = Astro.props;

const SIZE: Record<number, string> = {
  1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem',
  6: '1.5rem', 8: '2rem', 10: '2.5rem', 12: '3rem', 16: '4rem',
  20: '5rem', 24: '6rem', 32: '8rem',
};

const style = grow
  ? 'flex:1 1 auto;'
  : axis === 'vertical'
    ? `height:${SIZE[size]}; width:100%;`
    : `width:${SIZE[size]}; height:100%;`;
---

<span aria-hidden="true" class="block shrink-0" style={style}></span>