Toggle

export * from './default'
export * from './disabled'
export * from './group'
export * from './size'
export * from './variant'
export * from './with-text'

'use client'

import { Toggle } from '@nerdfish/ui'
import { Italic } from 'lucide-react'

export function ToggleDisabledExample() {
	return (
		<Toggle aria-label="Toggle italic" disabled>
			<Italic className="size-4" />
		</Toggle>
	)
}

'use client'

import { Toggle } from '@nerdfish/ui'
import { Bold, Italic } from 'lucide-react'

export function ToggleSizeExample() {
	return (
		<div className="gap-md flex flex-wrap">
			<Toggle size="lg" aria-label="Toggle italic">
				<Italic className="size-4" />
			</Toggle>
			<Toggle size="sm" aria-label="Toggle bold">
				<Bold className="size-4" />
			</Toggle>
		</div>
	)
}

'use client'

import { Toggle } from '@nerdfish/ui'
import { Bold, Italic } from 'lucide-react'

export function ToggleVariantExample() {
	return (
		<div className="gap-md flex flex-wrap">
			<Toggle variant="default" aria-label="Toggle italic">
				<Italic className="size-4" />
			</Toggle>
			<Toggle variant="outline" aria-label="Toggle bold">
				<Bold className="size-4" />
			</Toggle>
		</div>
	)
}

'use client'

import { Toggle } from '@nerdfish/ui'
import { Italic } from 'lucide-react'

export function ToggleWithTextExample() {
	return (
		<Toggle aria-label="Toggle italic">
			<Italic className="mr-sm size-4" />
			Italic
		</Toggle>
	)
}

'use client'

import { ToggleGroup, ToggleGroupItem } from '@nerdfish/ui'
import { Bold, Italic, Underline } from 'lucide-react'

export function ToggleGroupExample() {
	return (
		<div className="gap-sm flex flex-col">
			<ToggleGroup type="single">
				<ToggleGroupItem value="a">A</ToggleGroupItem>
				<ToggleGroupItem value="b">B</ToggleGroupItem>
				<ToggleGroupItem value="c">C</ToggleGroupItem>
			</ToggleGroup>
			<ToggleGroup type="multiple">
				<ToggleGroupItem value="bold" aria-label="Toggle bold">
					<Bold className="size-4" />
				</ToggleGroupItem>
				<ToggleGroupItem value="italic" aria-label="Toggle italic">
					<Italic className="size-4" />
				</ToggleGroupItem>
				<ToggleGroupItem value="underline" aria-label="Toggle underline">
					<Underline className="size-4" />
				</ToggleGroupItem>
			</ToggleGroup>
		</div>
	)
}