📝 update switch docs

actifyjs · Nov 26, 2024 · cd570f2 · cd570f2
1 parent ec701d6
commit cd570f2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/apps/docs/content/components/switch.md b/apps/docs/content/components/switch.md
@@ -9,13 +9,19 @@ description: Switches toggle the state of an item on or off
 
 ## Props
 
-| Props             | Type                                      | Description                    | Default   |
-| ----------------- | ----------------------------------------- | ------------------------------ | --------- |
-| `icons`           | `boolean`                                 | Show x or √ icon               | `false`   |
-| `color`           | `primary` `secondary` `tertiaray` `error` | The color of the switch        | `primary` |
-| `isDisabled`      | `boolean`                                 | Whether the switch is disabled | `false`   |
-| `selected`        | `boolean`                                 | Whether the switch is checked  | `null`    |
-| `defaultSelected` | `boolean`                                 | The switch default selected    | `false`   |
+| Name              | Type                                                                                        | Default | Description                                                                                                                                                   |
+| ----------------- | ------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `icons`           | `boolean`                                                                                   | —       | Show x or √ icon                                                                                                                                              |
+| `color`           | `primary` `secondary` `tertiaray` `error`                                                   | —       | The color of the switch                                                                                                                                       |
+| `defaultSelected` | `boolean`                                                                                   | —       | Whether the Switch should be selected (uncontrolled).                                                                                                         |
+| `isSelected`      | `boolean`                                                                                   | —       | Whether the Switch should be selected (controlled).                                                                                                           |
+| `isDisabled`      | `boolean`                                                                                   | —       | Whether the input is disabled.                                                                                                                                |
+| `isReadOnly`      | `boolean`                                                                                   | —       | Whether the input can be selected but not changed by the user.                                                                                                |
+| `autoFocus`       | `boolean`                                                                                   | —       | Whether the element should receive focus on render.                                                                                                           |
+| `name`            | `string`                                                                                    | —       | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). |
+| `children`        | `string` `React.ReactNode`                                                                  | —       | The children of the component. A function may be provided to alter the children based on component state.                                                     |
+| `className`       | `string` `(values: SwitchRenderProps & { defaultClassName: string \| undefined}) => string` | —       | The CSS className for the element. A function may be provided to compute the class based on component state.                                                  |
+| `style`           | `React.CSSProperties`                                                                       | —       | The inline style for the element. A function may be provided to compute the style based on component state.                                                   |
 
 ## Events
 

diff --git a/packages/actify/src/components/Switch/Switch.tsx b/packages/actify/src/components/Switch/Switch.tsx
@@ -11,12 +11,13 @@ import React, { useId } from 'react'
 import { FocusRing } from './../FocusRing'
 import { Label } from '../Label'
 import { Ripple } from './../Ripple'
+import { StyleProps } from '../../utils'
 import { VisuallyHidden } from '../VisuallyHidden'
 import clsx from 'clsx'
 import styles from './switch.module.css'
 import { useToggleState } from 'react-stately'
 
-interface SwitchProps extends AriaCheckboxProps {
+interface SwitchProps extends AriaCheckboxProps, StyleProps {
   ref?: React.RefObject<HTMLInputElement>
   icons?: boolean
   showOnlySelectedIcon?: boolean
@@ -28,12 +29,14 @@ const Switch = (props: SwitchProps) => {
   const _id = `actify-switch${useId()}`
 
   const {
-    ref = _ref,
-    id = _id,
     icons,
+    style,
+    className,
+    children,
     isDisabled,
     showOnlySelectedIcon,
-    children
+    id = _id,
+    ref = _ref
   } = props
 
   const state = useToggleState(props)
@@ -70,10 +73,12 @@ const Switch = (props: SwitchProps) => {
       className={clsx(styles['host'], isDisabled && styles['disabled'])}
     >
       <Label
+        style={style}
         className={clsx(
           styles['switch'],
           isDisabled && styles['disabled'],
-          state.isSelected ? styles['selected'] : styles['unselected']
+          state.isSelected ? styles['selected'] : styles['unselected'],
+          className
         )}
       >
         <VisuallyHidden>