Separator

'use client'

import { Stack, Text } from '@chakra-ui/react'
import { Separator } from '@saas-ui/react'

export const SeparatorBasic = () => {
  return (
    <Stack>
      <Text>First</Text>
      <Separator />
      <Text>Second</Text>
      <Separator />
      <Text>Third</Text>
    </Stack>
  )
}

'use client'

import { Stack } from '@chakra-ui/react'
import { Separator } from '@saas-ui/react'

export const SeparatorWithVariants = () => {
  return (
    <Stack>
      <Separator variant="solid" />
      <Separator variant="dashed" />
      <Separator variant="dotted" />
    </Stack>
  )
}

'use client'

import { Stack } from '@chakra-ui/react'
import { Separator } from '@saas-ui/react'

export const SeparatorWithSizes = () => {
  return (
    <Stack gap="4">
      <Separator size="xs" />
      <Separator size="sm" />
      <Separator size="md" />
      <Separator size="lg" />
    </Stack>
  )
}

'use client'

import { HStack, Stack, Text } from '@chakra-ui/react'
import { Separator } from '@saas-ui/react'

export const SeparatorWithLabel = () => {
  return (
    <Stack>
      <HStack>
        <Text flexShrink="0">Label (start)</Text>
        <Separator flex="1" />
      </HStack>

      <HStack>
        <Separator flex="1" />
        <Text flexShrink="0">Label (end)</Text>
      </HStack>

      <HStack>
        <Separator />
        <Text flexShrink="0">Label (center)</Text>
        <Separator />
      </HStack>
    </Stack>
  )
}

'use client'

import { HStack, Text } from '@chakra-ui/react'
import { Separator } from '@saas-ui/react'

export const SeparatorVertical = () => {
  return (
    <HStack gap="4">
      <Text>First</Text>
      <Separator orientation="vertical" height="4" />
      <Text>Second</Text>
    </HStack>
  )
}