Updated

Signed-off-by: Avior <github@avior.me>

src/Checkbox/Checkbox.module.styl

@@ -0,0 +1,162 @@
+@import "../config.styl"
+
+$backColor = #757575
+
+.label
+	position relative
+	display flex
+	user-select none
+	align-items center
+
+	+ .label
+		margin-top 8px
+
+	p
+		margin-left 4px
+
+	span
+		top 0
+		left 0
+		width 20px
+		height @width
+		position relative
+		box-shadow inset 0 0 0 2px $darkGrayLight
+		@media (prefers-color-scheme dark)
+			box-shadow inset 0 0 0 2px $darkGrayDark
+		border-radius 4px
+		transition all $transition
+
+		&::after
+			border-radius 20px
+			position absolute
+			transition all $transition
+			background $main
+
+	svg
+		transition $transition
+		transform scale(0)
+		color transparent
+		margin 2px
+
+	input
+		// visibility hidden
+		position absolute
+		top 0
+		left 0
+		opacity 0
+
+		&:checked + span
+			background $infoLight
+			box-shadow inset 0 0 0 2px $infoLight
+			@media (prefers-color-scheme dark)
+				box-shadow inset 0 0 0 2px $infoDark
+				background $infoDark
+
+			svg
+				color white
+				transform scale(1)
+
+
+	&:hover
+		span
+			box-shadow inset 0 0 0 2px $infoLight
+			@media (prefers-color-scheme dark)
+				box-shadow inset 0 0 0 2px $infoDark
+
+.radio
+	span
+		border-radius 20px
+
+		&::after
+			content " "
+			top 5px
+			left 5px
+			width 10px
+			height @width
+			transform scale(0)
+
+	input:checked + span::after
+		transform scale(1)
+		background white
+
+.switch
+	padding 0 0 0 10px // 2px base padding 10px circle padding
+
+	&:hover span
+		box-shadow none
+		&::after
+			background $darkGrayLight
+			@media (prefers-color-scheme dark)
+				background $darkGrayDark
+
+	span
+		width 24px
+		height 14px
+		border-radius 20px
+		top 50%
+		margin-right 10px
+		box-shadow none
+		background rgba($darkGrayLight, .3)
+		@media (prefers-color-scheme dark)
+			background rgba($darkGrayDark, .3)
+
+
+		&::after
+			content " "
+			top 50%
+			transform translate(-50%, -50%)
+			left 0
+			background $darkGrayLight
+			@media (prefers-color-scheme dark)
+				background $darkGrayDark
+			width 20px
+			height @width
+
+	input
+		margin 0 8px
+		width 20px
+
+		&:checked + span
+
+			box-shadow none
+			background rgba($infoLight, .3)
+			@media (prefers-color-scheme dark)
+				background rgba($infoDark, .3)
+			&::after
+				left 100%
+				transform translate(-50%, -50%)
+				background $infoLight
+				@media (prefers-color-scheme dark)
+					background $infoDark
+
+checkBox($color)
+	input:checked + span
+		background rgba($color, .5)
+		box-shadow inset 0 0 0 2px $color
+
+		&::after
+			background $color
+	input:focus:checked + span
+		box-shadow inset 0 0 0 2px $color, 0 0 0 2px rgba($color,.3)
+	&.switch
+		input:checked + span
+			box-shadow none
+.info
+	checkBox($infoLight)
+	@media (prefers-color-scheme dark)
+		checkBox($infoDark)
+
+.success
+	checkBox($successLight)
+	@media (prefers-color-scheme dark)
+		checkBox($successDark)
+
+.error
+	checkBox($errorLight)
+	@media (prefers-color-scheme dark)
+		checkBox($errorDark)
+
+.warning
+	checkBox($warningLight)
+	@media (prefers-color-scheme dark)
+		checkBox($warningDark)

src/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Checkbox from '.'
+
+export default {
+	title: 'DZEIO/Checkbox',
+	component: Checkbox
+} as Meta
+
+export const Basic = (args: any) => <Checkbox {...args} />

src/Checkbox/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Check } from 'lucide-react'
+import { buildClassName } from '../Util'
+
+import css from './Checkbox.module.styl'
+import Text from '../Text'
+
+interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+	label: string
+	type?: 'checkbox' | 'radio' | 'switch'
+}
+
+export default class Checkbox extends React.Component<Props> {
+
+	public render() {
+		const props: Partial<Props> = Object.assign({}, this.props)
+		delete props.label
+		delete props.type
+
+		const realType = this.props.type ?? 'checkbox'
+
+		return (
+			<label htmlFor={this.props.id ?? this.props.label} className={buildClassName(
+				[css.label],
+				[css.radio, realType === 'radio'],
+				[css.switch, realType === 'switch'],
+				[css[this.props.color as string], this.props.color]
+			)}>
+				<input {...props}
+					id={this.props.id ?? this.props.label}
+					type={realType === 'switch' ? 'checkbox' : realType}
+				/>
+				<span>
+					{realType === 'checkbox' && (
+						<Check strokeWidth={4} size={16}/>
+					)}
+				</span>
+				<Text>{this.props.label}</Text>
+			</label>
+		)
+	}
+
+}