add switch input

src/components/SwitchInput/SwitchInput.stories.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import { SwitchInput } from './index.js'
+
+export default {
+  title: 'Components/SwitchInput',
+  component: SwitchInput,
+}
+
+export const Default = () => {
+  const [value, setValue] = useState(false)
+  return <SwitchInput value={value} onChange={setValue} />
+}
+
+export const Error = () => {
+  const [value, setValue] = useState(true)
+  return <SwitchInput error value={value} onChange={setValue} />
+}
+
+export const Disabled = () => {
+  const [value, setValue] = useState(true)
+  return <SwitchInput value={value} onChange={setValue} disabled />
+}

src/components/SwitchInput/index.tsx

@@ -0,0 +1,67 @@
+import { borderRadius } from '../../utils/border.js'
+import { color } from '../../utils/colors.js'
+
+type SwitchInputProps = {
+  value: boolean
+  onChange: (value: boolean) => void
+  disabled?: boolean
+  error?: boolean
+}
+
+function SwitchInput({ value, onChange, disabled, error }: SwitchInputProps) {
+  return (
+    <div
+      style={{
+        width: 24,
+        height: 16,
+        borderRadius: borderRadius('full'),
+        border: `1px solid ${color('neutral-20-adjusted')}`,
+        background: color('neutral-10-adjusted'),
+        ...(value && {
+          border: `1px solid ${color('neutral-100')}`,
+          background: color('neutral-100'),
+        }),
+        ...(error && {
+          border: `1px solid ${color('destructive-100')}`,
+          background: color('neutral-10-adjusted'),
+          ...(value && {
+            border: `1px solid ${color('destructive-100')}`,
+            background: color('destructive-100'),
+          }),
+        }),
+        ...(disabled && {
+          border: `1px solid transparent`,
+          background: color('neutral-20'),
+        }),
+      }}
+      tabIndex={0}
+      onClick={() => {
+        if (disabled) return
+
+        onChange(!value)
+      }}
+    >
+      <div
+        style={{
+          width: 14,
+          height: 14,
+          borderRadius: borderRadius('full'),
+          background: color('neutral-100'),
+          ...(value && {
+            marginLeft: 'auto',
+            background: color('neutral-inverted-100'),
+          }),
+          ...(error && {
+            background: color('neutral-100'),
+          }),
+          ...(disabled && {
+            background: color('neutral-inverted-80'),
+          }),
+        }}
+      />
+    </div>
+  )
+}
+
+export type { SwitchInputProps }
+export { SwitchInput }

src/components/TextInput/index.tsx

@@ -152,7 +152,6 @@ function TextInput({
               bottom: -5,
               padding: '4px 6px',
               borderRadius: borderRadius(4),
-
               background: color('neutral-100'),
               color: color('neutral-inverted-100'),
               transform: 'translateY(100%)',

src/index.ts

@@ -3,5 +3,6 @@ export * from './components/Icon/index.js'
 export * from './components/Button/index.js'
 export * from './components/IconButton/index.js'
 export * from './components/TextInput/index.js'
+export * from './components/SwitchInput/index.js'
 export * from './utils/colors.js'
 export * from './utils/border.js'