chore: draft for component help

app/entrypoints/renderer/src/app/page.tsx

@@ -6,15 +6,16 @@ import { ThemeProvider } from '@ui/theme'
 import { Input }         from '@ui/input'
 import { BaseSwitch }        from '@ui/switch'
 import { IconSwitch }        from '@ui/switch'
-import { ModeSwitch }        from '@ui/switch'
+import { ThemeSwitch }        from '@ui/switch'
 import { TelegramIcon }      from '@ui/icons-test'
 
 const Page = () => (
   <ThemeProvider>
     <Input placeholder='placeholder' />
     <BaseSwitch />
-    <IconSwitch />
-		<TelegramIcon width={24} height={24} />
+    <IconSwitch>
+			<TelegramIcon width={16} height={16} />
+		</IconSwitch>
   </ThemeProvider>
 )
 

ui/switch/src/icon/icon.component.tsx

@@ -2,21 +2,22 @@ import styled                      from '@emotion/styled'
 import { HandleElement }           from '@atls-ui-parts/switch'
 import { baseHandleStyles }        from '@atls-ui-parts/switch'
 import { useSwitch }               from '@atls-ui-parts/switch'
-import { baseThumbStyles }         from '@atls-ui-parts/switch'
 import { ifDisabledThumbModifier } from '@atls-ui-parts/switch'
 
 import React                       from 'react'
 import { useRef }                  from 'react'
 import { useHover }                from 'react-laag'
 
-import { IconProps }             from './icon.interfaces'
+import { IconSwitchProps }             from './icon.interfaces'
 
 import { ThumbElement }            from './thumb/thumb.element'
 
 import { appearanceHandleStyles }  from './icon.styles'
-import { appearanceThumbStyles }   from './icon.styles'
-import { shapeThumbStyles }        from './icon.styles'
 import { shapeHandleStyles }       from './icon.styles'
+import { baseThumbStyles }        from './icon.styles'
+import { shapeThumbStyles }        from './icon.styles'
+import { appearanceThumbStyles }   from './icon.styles'
+
 
 const Thumb = styled(ThumbElement)<any>(
   baseThumbStyles,
@@ -36,7 +37,7 @@ const thumbMotionVariants = {
 
 const Element = styled(HandleElement)(baseHandleStyles, appearanceHandleStyles, shapeHandleStyles)
 
-const IconSwitch = ({ disabled, checked: defaultValue, onChange }: IconProps) => {
+const IconSwitch = ({ disabled, checked: defaultValue, onChange, children }: IconSwitchProps) => {
   const node = useRef<HTMLButtonElement>(null)
   const [hover, hoverProps] = useHover()
   const [checked, setChecked] = useSwitch(node, defaultValue, disabled, onChange)
@@ -49,7 +50,9 @@ const IconSwitch = ({ disabled, checked: defaultValue, onChange }: IconProps) =>
         variants={{
           ...thumbMotionVariants,
         }}
-      />
+      >
+			{children}
+			</Thumb>
     </Element>
   )
 }

ui/switch/src/icon/icon.interfaces.ts

@@ -1,6 +1,6 @@
 import { SwitchProps } from '@atls-ui-parts/switch'
 
 export interface IconSwitchProps extends SwitchProps {
-	// TODO make it icon props
-	icon?: any
+	// TODO make it icon type
+	children: any
 }

ui/switch/src/icon/icon.styles.ts

@@ -2,6 +2,7 @@ import { styleFn }    from 'styled-system'
 import { ifProp }     from 'styled-tools'
 import { switchProp } from 'styled-tools'
 import { prop }       from 'styled-tools'
+import { baseThumbStyles as hyperionBaseThumbStyles }         from '@atls-ui-parts/switch'
 
 export const appearanceDefaultHandleStyles: styleFn = ({ theme }) => ({
   backgroundColor: theme.colors.switch.icon.default.background,
@@ -38,6 +39,13 @@ export const shapeNormalSizeHandleStyles: styleFn = () => ({
   height: 28,
 })
 
+export const baseThumbStyles: styleFn = () => ({
+  display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	...hyperionBaseThumbStyles
+})
+
 export const shapeNormalSizeThumbStyles: styleFn = () => ({
   width: 24,
   height: 24,

ui/switch/src/icon/thumb/thumb.element.tsx

@@ -5,19 +5,17 @@ import { FunctionComponent } from 'react'
 import { motion }            from 'framer-motion'
 import { useMemo }           from 'react'
 
-export const thumbMotionVariants = {
-  visible: {
-    left: 0,
-  },
-  checked: {
-    left: 16,
-  },
-}
-
-const ThumbElement: FunctionComponent<ThumbElementProps> = ({ checked, ...props }) => {
+const ThumbElement: FunctionComponent<ThumbElementProps> = ({ checked, children, ...props }) => {
   const initial = useMemo(() => (checked ? 'checked' : 'visible'), [checked])
 
-  return <motion.span initial={initial} animate={checked ? 'checked' : 'visible'} {...props} />
+	// TODO уточни этот момент
+
+	const color = checked ? 'white' : 'black'
+  return (
+	<motion.span initial={initial} animate={checked ? 'checked' : 'visible'} {...props} >
+		{children}
+	</motion.span>
+	)
 }
 
 export { ThumbElement }

ui/switch/src/index.ts

@@ -1,3 +1,3 @@
 export * from './base'
 export * from './icon'
-export * from './mode'
+export * from './theme'

ui/switch/src/theme/index.ts

@@ -0,0 +1,2 @@
+export * from './theme.component'
+export * from './theme.interfaces'

ui/switch/src/mode/mode.component.tsx → ui/switch/src/theme/theme.component.tsx

@@ -11,10 +11,10 @@ import { useHover }                from 'react-laag'
 
 import { ToggleProps }             from './icon.interfaces'
 import { ThumbElement }            from './thumb/thumb.element'
-import { appearanceHandleStyles }  from './mode.styles'
-import { appearanceThumbStyles }   from './mode.styles'
-import { shapeThumbStyles }        from './mode.styles'
-import { shapeHandleStyles }       from './mode.styles'
+import { appearanceHandleStyles }  from './theme.styles'
+import { appearanceThumbStyles }   from './theme.styles'
+import { shapeThumbStyles }        from './theme.styles'
+import { shapeHandleStyles }       from './theme.styles'
 
 const Thumb = styled(ThumbElement)<any>(
   baseThumbStyles,