Grid Pattern

import { GridPattern, GridPatternPresets } from '@hanzo/ui'

export function Variants() {
  return (
    <YStack gap="$4">
      {(['dots', 'lines', 'crosses', 'plus', 'squares'] as const).map((variant) => (
        <YStack key={variant} position="relative" height={96} borderWidth={1} borderColor="$borderColor" rounded="$3" overflow="hidden">
          <GridPattern variant={variant} gap={20} opacity={0.5} />
          <YStack position="relative" height="100%" items="center" justify="center">
            <SizableText size="$2">{variant}</SizableText>
          </YStack>
        </YStack>
      ))}
    </YStack>
  )
}

export function FadeEdges() {
  return (
    <YStack position="relative" height={192} borderWidth={1} borderColor="$borderColor" rounded="$3" overflow="hidden">
      <GridPattern variant="dots" size={3} gap={20} opacity={0.6} fade="edges" />
      <YStack position="relative" height="100%" items="center" justify="center">
        <SizableText size="$5" fontWeight="700">Content over grid</SizableText>
      </YStack>
    </YStack>
  )
}

export function Animated() {
  return (
    <YStack position="relative" height={192} borderWidth={1} borderColor="$borderColor" rounded="$3" overflow="hidden">
      <GridPattern
        variant="lines"
        gap={24}
        strokeWidth={1}
        opacity={0.3}
        animation={{ duration: 8, timing: 'linear' }}
      />
      <YStack position="relative" height="100%" items="center" justify="center">
        <SizableText size="$5" fontWeight="700">In motion</SizableText>
      </YStack>
    </YStack>
  )
}

export function Presets() {
  return (
    <YStack gap="$4">
      <YStack position="relative" height={128} borderWidth={1} borderColor="$borderColor" rounded="$3" overflow="hidden">
        <GridPattern {...GridPatternPresets.blueprint} />
      </YStack>
      <YStack position="relative" height={128} borderWidth={1} borderColor="$borderColor" rounded="$3" overflow="hidden">
        <GridPattern {...GridPatternPresets.graph} />
      </YStack>
    </YStack>
  )
}

Types

export type GridPatternVariant = 'dots' | 'lines' | 'crosses' | 'plus' | 'squares'

export type GridPatternSize = number | { width?: number; height?: number }

export type GridPatternGap = number | { x?: number; y?: number }

export type GridPatternFade = boolean | 'edges' | 'center' | 'radial'

export type GridPatternGradient = {
  from?: string
  via?: string
  to?: string
  opacity?: number
}

export type GridPatternAnimation = {
  duration?: number
  direction?: 'normal' | 'reverse' | 'alternate'
  timing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'
}

export type GridPatternOffset = { x?: number; y?: number }

export type GridPatternMaxArea = { width?: number; height?: number }

export type GridPatternProps = React.HTMLAttributes<HTMLDivElement> & {
  /** Which mark repeats across the tile. */
  variant?: GridPatternVariant
  /** Size of the mark itself, uniform or per axis. */
  size?: GridPatternSize
  /** Spacing between tiles, uniform or per axis. */
  gap?: GridPatternGap
  /** Color of the mark. */
  color?: string
  /** Opacity of the mark. */
  opacity?: number
  /** Stroke width for the line-based variants. */
  strokeWidth?: number
  /** Fades the whole pattern at its edges, its center, or radially. */
  fade?: GridPatternFade
  /** A linear-gradient tint painted over the pattern. */
  gradient?: GridPatternGradient
  /** Slides the whole pattern by one tile, on a loop. */
  animation?: GridPatternAnimation
  /** Shifts the pattern's origin before any animation is applied. */
  offset?: GridPatternOffset
  /** Caps the area the pattern rect covers, for very large viewports. */
  maxArea?: GridPatternMaxArea
}

Exports