Radio

import { Button, Flex, Paper, Radio, Text } from '@pillar-ui/core'
import Link from 'next/link'

export const RadioChildren = () => {
  return (
    <Flex direction="col" gap="6">
      <Radio>Option 1</Radio>
      <Radio>
        <Text weight="6">Nice to Meet You</Text>
        <Text size="3" color="b" low>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </Text>
      </Radio>
      <Radio>
        <Flex gap="2">
          <Text as="span" weight="6">
            Remember Me |
          </Text>
          <Text as={Link} href="#">
            Sign Up
          </Text>
        </Flex>
      </Radio>
    </Flex>
  )
}

import { Radio } from '@pillar-ui/core'

export const RadioColor = () => {
  return (
    <>
      <Radio color="d" name="danger">
        Hello World
      </Radio>
      <Radio color="su" name="success">
        Hello World
      </Radio>
      <Radio color="w" name="warning">
        Hello World
      </Radio>
      <Radio color="p" name="primary">
        Hello World
      </Radio>
      <Radio color="i" name="info">
        Hello World
      </Radio>
      <Radio color="se" name="secondary">
        Hello World
      </Radio>
      <Radio color="b" name="background">
        Hello World
      </Radio>
    </>
  )
}

import { Radio } from '@pillar-ui/core'

export const RadioDefaultChecked = () => {
  return (
    <>
      <Radio defaultChecked name="d" color="d">
        Hello world
      </Radio>
      <Radio defaultChecked name="su" color="su">
        Hello world
      </Radio>
      <Radio defaultChecked name="w" color="w">
        Hello world
      </Radio>
      <Radio defaultChecked name="p" color="p">
        Hello world
      </Radio>
      <Radio defaultChecked name="se" color="se">
        Hello world
      </Radio>
      <Radio defaultChecked name="b" color="b">
        Hello world
      </Radio>
      <Radio defaultChecked name="i" color="i">
        Hello world
      </Radio>
    </>
  )
}

import { Radio } from '@pillar-ui/core'

export const RadioVariant = () => {
  return (
    <>
      <Radio name="default.se">Hello World</Radio>
      <Radio variant="solid" name="se">
        Hello World
      </Radio>
      <Radio variant="outline" name="outline.sec2">
        Hello World
      </Radio>
      <Radio variant="soft" name="soft.sec3">
        Hello World
      </Radio>
      <Radio variant="mixed" name="mixed.sec3">
        Hello World
      </Radio>
    </>
  )
}

import { Radio } from '@pillar-ui/core'

export const RadioSize = () => {
  return (
    <>
      <Radio size="1" name="1">
        Hello World
      </Radio>
      <Radio size="2" name="2">
        Hello World
      </Radio>
      <Radio size="3" name="3">
        Hello World
      </Radio>
      <Radio size="4" name="4">
        Hello World
      </Radio>
      <Radio size="5" name="5">
        Hello World
      </Radio>
      <Radio size="6" name="6">
        Hello World
      </Radio>
      <Radio size="7" name="7">
        Hello World
      </Radio>
      <Radio size="8" name="8">
        Hello World
      </Radio>
      <Radio size="9" name="9">
        Hello World
      </Radio>
    </>
  )
}

import { Radio, Flex } from '@pillar-ui/core'

export const RadioDisabled = () => {
  return (
    <>
      <Flex gap="4" items="center">
        <Radio disabled name="hello" color="d">
          Hello world
        </Radio>
        <Radio disabled name="hello" color="su">
          Hello world
        </Radio>
        <Radio disabled name="hello" color="w">
          Hello world
        </Radio>
        <Radio disabled name="hello" color="p">
          Hello world
        </Radio>
        <Radio disabled name="hello" color="se">
          Hello world
        </Radio>
        <Radio disabled name="hello" color="b">
          Hello world
        </Radio>
      </Flex>
      <Flex gap="4" items="center">
        <Radio disabled defaultChecked name="hello" color="d">
          Hello world
        </Radio>
        <Radio disabled defaultChecked name="hello" color="su">
          Hello world
        </Radio>
        <Radio disabled defaultChecked name="hello" color="w">
          Hello world
        </Radio>
        <Radio disabled defaultChecked name="hello" color="p">
          Hello world
        </Radio>
        <Radio disabled defaultChecked name="hello" color="se">
          Hello world
        </Radio>
        <Radio disabled defaultChecked name="hello" color="b">
          Hello world
        </Radio>
      </Flex>
    </>
  )
}