Divider Variants

---
//    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.
/**
 * Divider — Horizontal (or vertical) rule with four variants:
 *
 *   solid    — plain 1px hairline
 *   dashed   — dashed hairline
 *   gradient — fades to transparent at both ends (good on dark/shader bg)
 *   labelled — rule with centred text (e.g. "OR", "·  3 min read  ·")
 *
 * Renders <hr> for solid/dashed/gradient (semantically a thematic break)
 * and a labelled <div role="separator"> for the labelled variant since
 * `<hr>` cannot contain child content.
 */
export interface Props {
  variant?: 'solid' | 'dashed' | 'gradient' | 'labelled';
  orientation?: 'horizontal' | 'vertical';
  label?: string;
  className?: string;
}

const {
  variant = 'solid',
  orientation = 'horizontal',
  label,
  className = '',
} = Astro.props;

const isVertical = orientation === 'vertical';
---

{variant === 'labelled' ? (
  <div
    role="separator"
    aria-orientation={orientation}
    class:list={[
      'flex items-center gap-3 text-xs font-medium uppercase tracking-wide text-secondary-500 dark:text-secondary-400',
      className,
    ]}
  >
    <span class="h-px flex-1 bg-secondary-200 dark:bg-secondary-700" />
    {label && <span>{label}</span>}
    <span class="h-px flex-1 bg-secondary-200 dark:bg-secondary-700" />
  </div>
) : (
  <hr
    aria-orientation={orientation}
    class:list={[
      'border-0 bg-transparent',
      isVertical ? 'h-full w-px' : 'h-px w-full',
      variant === 'dashed' && (isVertical
        ? 'border-l border-dashed border-secondary-300 dark:border-secondary-700'
        : 'border-t border-dashed border-secondary-300 dark:border-secondary-700'),
      variant === 'solid' && 'bg-secondary-200 dark:bg-secondary-700',
      variant === 'gradient' && (isVertical
        ? 'bg-gradient-to-b from-transparent via-secondary-300 dark:via-secondary-700 to-transparent'
        : 'bg-gradient-to-r from-transparent via-secondary-300 dark:via-secondary-700 to-transparent'),
      className,
    ]}
  />
)}