옵션 2
@@ -383,7 +383,7 @@ exports[`RadioGroup > should RadioGroup snapshot 10`] = `
type="radio"
/>
@@ -399,7 +399,7 @@ exports[`RadioGroup > should RadioGroup snapshot 10`] = `
type="radio"
/>
diff --git a/packages/components/src/components/Toggle/Toggle.stories.tsx b/packages/components/src/components/Toggle/Toggle.stories.tsx
new file mode 100644
index 00000000..47f51fcc
--- /dev/null
+++ b/packages/components/src/components/Toggle/Toggle.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Toggle } from './index'
+
+type Story = StoryObj
+
+const meta: Meta = {
+ title: 'Devfive/Toggle',
+ component: Toggle,
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+}
+
+export const Default: Story = {
+ args: {
+ defaultValue: false,
+ variant: 'default',
+ disabled: false,
+ },
+}
+
+export default meta
diff --git a/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
new file mode 100644
index 00000000..2013a32a
--- /dev/null
+++ b/packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -0,0 +1,213 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Toggle > should Toggle snapshot 1`] = `
+
+`;
+
+exports[`Toggle > should Toggle snapshot 2`] = `
+
+`;
+
+exports[`Toggle > should Toggle snapshot 3`] = `
+
+`;
+
+exports[`Toggle > should Toggle snapshot 4`] = `
+
+`;
+
+exports[`Toggle > should Toggle snapshot 5`] = `
+
+`;
+
+exports[`Toggle > should Toggle snapshot 6`] = `
+
+`;
+
+exports[`Toggle > should Toggle snapshot 7`] = `
+
+`;
+
+exports[`Toggle > should Toggle snapshot 8`] = `
+
+`;
+
+exports[`Toggle > should Toggle snapshot 9`] = `
+
+`;
+
+exports[`Toggle > should Toggle snapshot 10`] = `
+
+`;
+
+exports[`Toggle > should Toggle snapshot 11`] = `
+
+`;
+
+exports[`Toggle > should Toggle snapshot 12`] = `
+
+`;
diff --git a/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
new file mode 100644
index 00000000..b35828f8
--- /dev/null
+++ b/packages/components/src/components/Toggle/__tests__/index.browser.test.tsx
@@ -0,0 +1,101 @@
+import { act, render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { Toggle } from '../index'
+
+vi.mock('react', async (originImport: any) => {
+ const origin = await originImport()
+ return {
+ ...origin,
+ cache: vi.fn((arg) => arg),
+ }
+})
+describe('Toggle', () => {
+ it('should Toggle snapshot', () => {
+ expect(render().container).toMatchSnapshot()
+ expect(render().container).toMatchSnapshot()
+ expect(render().container).toMatchSnapshot()
+ expect(render().container).toMatchSnapshot()
+ expect(render().container).toMatchSnapshot()
+ expect(
+ render().container,
+ ).toMatchSnapshot()
+ expect(
+ render().container,
+ ).toMatchSnapshot()
+ expect(
+ render().container,
+ ).toMatchSnapshot()
+ expect(
+ render(
+ ,
+ ).container,
+ ).toMatchSnapshot()
+ expect(
+ render(
+ ,
+ ).container,
+ ).toMatchSnapshot()
+ expect(
+ render(
+ ,
+ ).container,
+ ).toMatchSnapshot()
+ expect(
+ render(
+ ,
+ ).container,
+ ).toMatchSnapshot()
+ })
+
+ it('should change value when use onChange prop', async () => {
+ const onChange = vi.fn()
+ const { container } = render(
+ ,
+ )
+ const toggleButton = container.querySelector('.test')
+ const input = container.querySelector('input')
+ toggleButton &&
+ (await act(async () => {
+ await userEvent.click(toggleButton)
+ }))
+ expect(input).toHaveAttribute('value', 'true')
+ })
+})
diff --git a/packages/components/src/components/Toggle/index.tsx b/packages/components/src/components/Toggle/index.tsx
new file mode 100644
index 00000000..873c3fa6
--- /dev/null
+++ b/packages/components/src/components/Toggle/index.tsx
@@ -0,0 +1,129 @@
+'use client'
+import { Box, Input } from '@devup-ui/react'
+import { useState } from 'react'
+
+interface ToggleProps {
+ defaultValue?: boolean | null
+ value?: boolean | null
+ onChange?: (value: boolean) => void
+ disabled?: boolean
+ variant?: 'default' | 'switch'
+ className?: string
+ style?: React.CSSProperties
+ classNames?: {
+ toggle?: string
+ }
+ styles?: {
+ toggle?: React.CSSProperties
+ }
+ colors?: {
+ primary?: string
+ bg?: string
+ hoverBg?: string
+ primaryHoverBg?: string
+ disabledBg?: string
+ switchHoverOutline?: string
+ switchShadow?: string
+ }
+}
+
+export function Toggle({
+ defaultValue = null,
+ value = null,
+ onChange,
+ disabled,
+ className,
+ style,
+ variant = 'default',
+ colors,
+ classNames,
+ styles,
+}: ToggleProps) {
+ const [innerValue, setInnerValue] = useState(
+ value ?? defaultValue ?? false,
+ )
+
+ const resultValue = value ?? innerValue
+
+ function handleToggle(value: boolean) {
+ onChange?.(!value)
+ setInnerValue((prev) => !prev)
+ }
+
+ const isDefault = variant === 'default'
+
+ return (
+ <>
+ !disabled && handleToggle(resultValue)}
+ p={!isDefault && 1}
+ position="relative"
+ role="group"
+ selectors={{
+ '&[aria-disabled=true]': {
+ cursor: 'not-allowed',
+ bg: 'var(--disabledBg, light-dark(#D6D7DE, #373737))',
+ },
+ '&:hover:not([aria-disabled=true]):not(:disabled)': {
+ bg: resultValue
+ ? `var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))`
+ : 'var(--hoverBg, light-dark(#C3C2C8, #696A6F))',
+ },
+ }}
+ style={style}
+ styleVars={{
+ primary: colors?.primary,
+ bg: colors?.bg,
+ primaryHoverBg: colors?.primaryHoverBg,
+ hoverBg: colors?.hoverBg,
+ disabledBg: colors?.disabledBg,
+ }}
+ test-id="toggle-wrapper"
+ transition=".25s"
+ w={isDefault ? '50px' : '40px'}
+ >
+
+
+
+
+ )
+}