import { GalleryGrid, GalleryItem } from '@lockness/ui/components'

<GalleryGrid cols={3} gap="md">
  <GalleryItem
    src="/image1.jpg"
    href="/project/1"
    showOverlay
    overlayContent="view"
    alt="Project 1"
  />
  <GalleryItem
    src="/image2.jpg"
    href="/project/2"
    showOverlay
    overlayContent="view"
    alt="Project 2"
  />
  {/* ... more items */}
</GalleryGrid>

<GalleryItem showOverlay overlayContent="view" />
<GalleryItem showOverlay overlayContent="zoom" />
<GalleryItem showOverlay overlayContent="expand" />
<GalleryItem showOverlay overlayContent="view" overlayText="Open" />

import { GalleryGrid, GalleryImage } from '@lockness/ui/components'

<GalleryGrid cols={4} gap="md">
  <GalleryImage src="/image1.jpg" aspect="square" />
  <GalleryImage src="/image2.jpg" aspect="square" />
  <GalleryImage src="/image3.jpg" aspect="square" />
  {/* ... more images */}
</GalleryGrid>

import {
  GalleryMasonry,
  GalleryMasonryColumn,
  GalleryImage
} from '@lockness/ui/components'

<GalleryMasonry cols={4} gap="md">
  <GalleryMasonryColumn>
    <GalleryImage src="/image1.jpg" aspect="auto" />
    <GalleryImage src="/image2.jpg" aspect="auto" />
    <GalleryImage src="/image3.jpg" aspect="auto" />
  </GalleryMasonryColumn>
  <GalleryMasonryColumn>
    <GalleryImage src="/image4.jpg" aspect="auto" />
    <GalleryImage src="/image5.jpg" aspect="auto" />
  </GalleryMasonryColumn>
  {/* ... more columns */}
</GalleryMasonry>

import { GalleryJustified, GalleryJustifiedItem } from '@lockness/ui/components'

<GalleryJustified rowHeight="lg" gap="md">
  <GalleryJustifiedItem src="/photo1.jpg" ratio="wide" />
  <GalleryJustifiedItem src="/photo2.jpg" ratio="portrait" />
  <GalleryJustifiedItem src="/photo3.jpg" ratio="landscape" />
  <GalleryJustifiedItem src="/photo4.jpg" ratio="square" />
  <GalleryJustifiedItem src="/photo5.jpg" ratio="ultrawide" />
  <GalleryJustifiedItem src="/photo6.jpg" ratio="tall" />
  {/* Images fill each row and wrap naturally */}
</GalleryJustified>

<GalleryJustified rowHeight="xs" />  {/* 80px row height */}
<GalleryJustified rowHeight="sm" />  {/* 112px row height */}
<GalleryJustified rowHeight="md" />  {/* 144px row height (default) */}
<GalleryJustified rowHeight="lg" />  {/* 192px row height */}
<GalleryJustified rowHeight="xl" />  {/* 256px row height */}

// Available ratios:
<GalleryJustifiedItem ratio="tall" />       {/* 2:3 - Vertical */}
<GalleryJustifiedItem ratio="portrait" />   {/* 3:4 - Portrait */}
<GalleryJustifiedItem ratio="square" />     {/* 1:1 - Square */}
<GalleryJustifiedItem ratio="landscape" />  {/* 4:3 - Landscape (default) */}
<GalleryJustifiedItem ratio="wide" />       {/* 16:9 - Wide */}
<GalleryJustifiedItem ratio="ultrawide" />  {/* 21:9 - Ultrawide */}

import {
  GalleryGrid,
  GalleryLightboxItem,
  GalleryLightboxScript
} from '@lockness/ui/components'

// Add the script once in your layout
<GalleryLightboxScript />

// Then use GalleryLightboxItem
<GalleryGrid cols={3} gap="md">
  <GalleryLightboxItem src="/thumb1.jpg" fullSrc="/full1.jpg" />
  <GalleryLightboxItem src="/thumb2.jpg" fullSrc="/full2.jpg" />
  <GalleryLightboxItem src="/thumb3.jpg" fullSrc="/full3.jpg" />
</GalleryGrid>

<GalleryGrid cols={2}>...</GalleryGrid>
<GalleryGrid cols={3}>...</GalleryGrid>
<GalleryGrid cols={4}>...</GalleryGrid>
<GalleryGrid cols={5}>...</GalleryGrid>
<GalleryGrid cols={6}>...</GalleryGrid>

<GalleryGrid gap="none">...</GalleryGrid>
<GalleryGrid gap="sm">...</GalleryGrid>
<GalleryGrid gap="md">...</GalleryGrid>  {/* default */}
<GalleryGrid gap="lg">...</GalleryGrid>

<GalleryImage rounded="none" />
<GalleryImage rounded="default" />  {/* uses --radius variable */}
<GalleryImage rounded="sm" />
<GalleryImage rounded="md" />
<GalleryImage rounded="lg" />
<GalleryImage rounded="full" />