feat toggle

Author: belltalion

packages/components/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,18 @@
+import { Toggle } from './index'
+
+export default {
+  title: 'Devfive/Toggle',
+  component: Toggle,
+  tags: ['autodocs'],
+}
+
+export const Default = {
+  args: {
+    disabled: false,
+    variant: 'default',
+    defaultValue: false,
+    offText: 'OFF',
+    onText: 'ON',
+    color: 'var(--primary)',
+  },
+}

packages/components/src/components/Toggle/index.tsx

@@ -0,0 +1,132 @@
+'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<boolean>(
+    value ?? defaultValue ?? false,
+  )
+
+  const resultValue = value ?? innerValue
+
+  function handleToggle(value: boolean) {
+    onChange?.(!value)
+    setInnerValue((prev) => !prev)
+  }
+
+  const isDefault = variant === 'default'
+
+  return (
+    <>
+      <Box
+        aria-disabled={disabled}
+        bg={
+          resultValue
+            ? 'var(--primary)'
+            : 'var(--bg, light-dark(#E4E4E4, #383838))'
+        }
+        borderRadius="500px"
+        boxSizing="border-box"
+        className="toggleSwitch"
+        cursor="pointer"
+        h={isDefault ? '28px' : '8px'}
+        justifyContent={resultValue ? 'flex-end' : undefined}
+        onClick={() => !disabled && handleToggle(resultValue)}
+        p={isDefault ? 1 : undefined}
+        position="relative"
+        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,
+        }}
+        transition=".25s"
+        w={isDefault ? '50px' : '40px'}
+      >
+        <Box
+          backgroundColor="#fff"
+          borderRadius="100%"
+          boxSize="20px"
+          className={classNames?.toggle}
+          filter={
+            isDefault
+              ? undefined
+              : `drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));`
+          }
+          outline="4px"
+          pos="absolute"
+          selectors={{
+            '.toggleSwitch:hover[aria-disabled=false] > &': {
+              outline: '4px solid',
+              outlineColor: `var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))`,
+            },
+          }}
+          style={styles?.toggle}
+          styleVars={{
+            primary: colors?.primary,
+            primaryHoverBg: colors?.primaryHoverBg,
+            switchShadow: colors?.switchShadow,
+            switchHoverOutline: colors?.switchHoverOutline,
+          }}
+          top={isDefault ? undefined : '-6px'}
+          transform={resultValue ? 'translateX(calc(100% + 2px))' : undefined}
+          transition={isDefault ? '.25s' : 'transform .25s'}
+        />
+      </Box>
+      <Input
+        defaultValue={String(defaultValue)}
+        type="hidden"
+        value={String(resultValue)}
+      />
+    </>
+  )
+}