@workday/canvas-kit-docs 15.0.0-alpha.1303-next.0 → 15.0.0

package/dist/mdx/preview-react/side-panel/examples/ExternalControl.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
+
 import {
   SidePanel,
-  useSidePanel,
   SidePanelTransitionStates,
+  useSidePanel,
 } from '@workday/canvas-kit-preview-react/side-panel';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Heading, Text} from '@workday/canvas-kit-react/text';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -16,11 +17,10 @@ const stylesOverride = {
   }),
   panel: createStyles({
     alignItems: 'center',
-    paddingY: system.space.x4,
-    paddingX: system.space.x4,
+    padding: system.padding.md,
   }),
   panelHeading: createStyles({
-    color: system.color.fg.muted.stronger,
+    color: system.color.fg.muted.strong,
   }),
   main: createStyles({
     alignItems: 'center',

package/dist/mdx/preview-react/side-panel/examples/HiddenName.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
+
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {AccessibleHide} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 

package/dist/mdx/preview-react/side-panel/examples/OnExpandedChange.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import {Flex} from '@workday/canvas-kit-react/layout';
+
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
-import {Text} from '@workday/canvas-kit-react/text';
 import {AccessibleHide} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
 const stylesOverride = {

package/dist/mdx/preview-react/side-panel/examples/OnStateTransition.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import {Flex} from '@workday/canvas-kit-react/layout';
+
 import {
   SidePanel,
-  useSidePanel,
   SidePanelTransitionStates,
+  useSidePanel,
 } from '@workday/canvas-kit-preview-react/side-panel';
 import {AccessibleHide} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 

package/dist/mdx/preview-react/side-panel/examples/RightOrigin.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Heading, Text} from '@workday/canvas-kit-react/text';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -20,8 +19,7 @@ const stylesOverride = {
   panel: createStyles({
     alignItems: 'center',
     justifyContent: 'flex-end',
-    paddingY: system.space.x4,
-    paddingX: system.space.x4,
+    padding: system.padding.md,
   }),
   main: createStyles({
     alignItems: 'center',
@@ -51,7 +49,7 @@ export default () => {
   const {direction, toggleDirection} = useDirection();
 
   return (
-    <CanvasProvider theme={{canvas: {direction}}}>
+    <CanvasProvider dir={direction}>
       <Flex cs={stylesOverride.viewport}>
         <Flex as="main" cs={stylesOverride.main}>
           <Text as="p" typeLevel="body.large">
@@ -61,7 +59,6 @@ export default () => {
             Set to {direction === 'ltr' ? 'Right-to-Left' : 'Left-to-Right'}
           </SecondaryButton>
         </Flex>
-
         <RightPanel />
       </Flex>
     </CanvasProvider>

package/dist/mdx/preview-react/side-panel/examples/Variant.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Heading, Text} from '@workday/canvas-kit-react/text';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -17,8 +16,7 @@ const stylesOverride = {
   }),
   panel: createStyles({
     alignItems: 'center',
-    paddingY: system.space.x4,
-    paddingX: system.space.x4,
+    padding: system.padding.md,
   }),
   main: createStyles({
     alignItems: 'center',
@@ -34,7 +32,7 @@ export default () => {
   const {expanded, panelProps, labelProps, controlProps} = useSidePanel();
 
   return (
-    <CanvasProvider theme={{canvas: {direction}}}>
+    <CanvasProvider dir={direction}>
       <Flex cs={stylesOverride.viewport}>
         <SidePanel {...panelProps} variant="alternate">
           <SidePanel.ToggleButton {...controlProps} />

package/dist/mdx/preview-react/side-panel/examples/useDirection.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import {ContentDirection} from '@workday/canvas-kit-react/common';
 
 export function useDirection(initialDirection = ContentDirection.LTR) {

package/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx

@@ -1,6 +1,7 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
+import Custom from './examples/Custom';
 import Emphasis from './examples/Emphasis';
 import Icon from './examples/Icon';
 import Overflow from './examples/Overflow';
@@ -51,7 +52,7 @@ We **strongly** discourage using text in a `StatusIndicator` which will cause it
 maximum width of `200px`. In situations where this cannot be avoided and text must be overflowed, we
 suggest wrapping `StatusIndicator` in an `OverflowTooltip` and applying `tabIndex={0}` to it so the
 overflowed text is accessible via keyboard and mouse. You may also override the default `maxWidth`
-of `StatusIndicator` via [style props](/getting-started/for-developers/resources/style-props/).
+of `StatusIndicator` via [style props](/get-started/for-developers/documentation/style-props/).
 
 <ExampleCodeBlock code={Overflow} />
 
@@ -71,6 +72,12 @@ The background color dictated by the `variant` will be dark or light based on th
 
 <ExampleCodeBlock code={Variants} />
 
+### Custom Example
+
+You can customize both the icon and color of the `StatusIndicator` to create a custom variant.
+
+<ExampleCodeBlock code={Custom} />
+
 ### Custom Styles
 
 Status Indicator and its subcomponents support custom styling via the `cs` prop. For more

package/dist/mdx/preview-react/status-indicator/examples/Custom.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {documentSparkleIcon} from '@workday/canvas-system-icons-web';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const customStyles = createStyles({
+  background: base.blue900,
+  [systemIconStencil.vars.color]: system.color.fg.inverse,
+  color: system.color.fg.inverse,
+});
+
+export default () => {
+  return (
+    <StatusIndicator cs={customStyles}>
+      <StatusIndicator.Icon icon={documentSparkleIcon} size="xxs" />
+      <StatusIndicator.Label>AI Content</StatusIndicator.Label>
+    </StatusIndicator>
+  );
+};

package/dist/mdx/preview-react/status-indicator/examples/Emphasis.tsx

@@ -1,24 +1,22 @@
-import React from 'react';
-
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
+import {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
 const parentContainerStyles = createStyles({
-  gap: system.space.x4,
+  gap: system.gap.md,
 });
 
 export default () => {
   return (
     <Flex cs={parentContainerStyles}>
       <StatusIndicator emphasis="high">
-        <StatusIndicator.Icon icon={uploadCloudIcon} />
+        <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         <StatusIndicator.Label>High Emphasis</StatusIndicator.Label>
       </StatusIndicator>
       <StatusIndicator emphasis="low">
-        <StatusIndicator.Icon icon={uploadCloudIcon} />
+        <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         <StatusIndicator.Label>Low Emphasis</StatusIndicator.Label>
       </StatusIndicator>
     </Flex>

package/dist/mdx/preview-react/status-indicator/examples/Icon.tsx

@@ -1,25 +1,23 @@
-import React from 'react';
-
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
+import {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
 const parentContainerStyles = createStyles({
-  gap: system.space.x4,
+  gap: system.gap.md,
 });
 
 export default () => {
   return (
     <Flex cs={parentContainerStyles}>
       <StatusIndicator>
-        <StatusIndicator.Icon aria-label="unpublished" icon={uploadCloudIcon} />
+        <StatusIndicator.Icon aria-label="unpublished" icon={cloudArrowUpIcon} />
         <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
       </StatusIndicator>
       <StatusIndicator variant="positive">
         <StatusIndicator.Label>published</StatusIndicator.Label>
-        <StatusIndicator.Icon aria-label="published" icon={uploadCloudIcon} />
+        <StatusIndicator.Icon aria-label="published" icon={cloudArrowUpIcon} />
       </StatusIndicator>
     </Flex>
   );

package/dist/mdx/preview-react/status-indicator/examples/Overflow.tsx

@@ -1,20 +1,18 @@
-import React from 'react';
-
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
-import {calc, createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';
+import {base} from '@workday/canvas-tokens-web';
 
 const statusIndicatorStyles = createStyles({
-  maxWidth: calc.add(system.space.x20, system.space.x4),
+  maxWidth: base.size1200,
 });
 
 export default () => {
   return (
     <OverflowTooltip>
       <StatusIndicator tabIndex={0} cs={statusIndicatorStyles}>
-        <StatusIndicator.Icon icon={uploadCloudIcon} />
+        <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         <StatusIndicator.Label>
           Your workbook is currently in process of saving
         </StatusIndicator.Label>

package/dist/mdx/preview-react/status-indicator/examples/Variants.tsx

@@ -1,18 +1,16 @@
-import React from 'react';
-
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
+import {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = {
   parentContainerStyles: createStyles({
-    gap: system.space.x4,
+    gap: system.gap.md,
     flexDirection: 'column',
   }),
   innerContainerStyles: createStyles({
-    gap: system.space.x4,
+    gap: system.gap.md,
   }),
 };
 
@@ -22,53 +20,53 @@ export default () => {
       <Flex cs={styleOverrides.innerContainerStyles}>
         <StatusIndicator>
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
         <StatusIndicator variant="caution">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
         <StatusIndicator variant="info">
           <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
         <StatusIndicator variant="positive">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
         <StatusIndicator variant="critical">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
         <StatusIndicator variant="transparent">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
       </Flex>
       <Flex cs={styleOverrides.innerContainerStyles}>
         <StatusIndicator emphasis="high">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
         <StatusIndicator emphasis="high" variant="caution">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
         <StatusIndicator emphasis="high" variant="info">
           <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
         <StatusIndicator emphasis="high" variant="positive">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
         <StatusIndicator emphasis="high" variant="critical">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
         <StatusIndicator emphasis="high" variant="transparent">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
-          <StatusIndicator.Icon icon={uploadCloudIcon} />
+          <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         </StatusIndicator>
       </Flex>
     </Flex>

package/dist/mdx/preview-react/switch/Switch.mdx

@@ -0,0 +1,84 @@
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+import Basic from './examples/Basic';
+import Caution from './examples/Caution';
+import Disabled from './examples/Disabled';
+import Error from './examples/Error';
+import LabelPosition from './examples/LabelPosition';
+import RTL from './examples/RTL';
+import RefForwarding from './examples/RefForwarding';
+
+
+# Canvas Kit Switch
+
+Switch is a selection control that is used to switch between two potential states.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+### Basic Example
+
+Switch should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
+accessibility standards.
+
+<ExampleCodeBlock code={Basic} />
+
+### Disabled
+
+Set the `disabled` prop of the Switch to prevent users from interacting with it.
+
+<ExampleCodeBlock code={Disabled} />
+
+### Ref Forwarding
+
+Switch supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward
+`ref` to its underlying `<input type="checkbox">` element.
+
+<ExampleCodeBlock code={RefForwarding} />
+
+### Label Position Horizontal
+
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`.
+
+<ExampleCodeBlock code={LabelPosition} />
+
+### Error States
+
+Set the `error` prop of the wrapping Form Field to `"caution"` or `"error"` to set the Switch to the
+Caution or Error state, respectively. You will also need to use `<FormField.Hint/>` for hint or
+error text to meet accessibility standards.
+
+The `error` prop may be applied directly to the Switch with a value of `Switch.ErrorType.Caution` or
+`Switch.ErrorType.Error` if Form Field is not being used.
+
+#### Caution
+
+<ExampleCodeBlock code={Caution} />
+
+#### Error
+
+<ExampleCodeBlock code={Error} />
+
+### Right-to-Left (RTL)
+
+Switch supports right-to-left languages when specified in the CanvasProvider theme.
+
+<ExampleCodeBlock code={RTL} />
+
+### Custom Styles
+
+Switch supports custom styling via the `cs` prop. For more information, check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
+
+## Component API
+
+<SymbolDoc name="Switch" fileName="/react/" />
+
+## Specifications
+
+<Specifications file="./cypress/component/Switch.spec.tsx" name="Switch" />

package/dist/mdx/preview-react/switch/examples/Basic.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {Switch} from '@workday/canvas-kit-preview-react/switch';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <FormField isRequired>
+      <FormField.Label>Dark Mode</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/switch/examples/Caution.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {Switch} from '@workday/canvas-kit-preview-react/switch';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <FormField error="caution">
+      <FormField.Label>Dark Mode</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+        <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/switch/examples/Disabled.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {Switch} from '@workday/canvas-kit-preview-react/switch';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <FormField>
+      <FormField.Label>Dark Mode</FormField.Label>
+      <FormField.Field>
+        <FormField.Input disabled as={Switch} checked={checked} onChange={handleChange} />
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/switch/examples/Error.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {Switch} from '@workday/canvas-kit-preview-react/switch';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <FormField error="error">
+      <FormField.Label>Dark Mode</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+        <FormField.Hint>We were unable to activate Dark Mode.</FormField.Hint>
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/switch/examples/LabelPosition.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {Switch} from '@workday/canvas-kit-preview-react/switch';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <FormField orientation="horizontalStart">
+      <FormField.Label>Dark Mode</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/switch/examples/RTL.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {Switch} from '@workday/canvas-kit-preview-react/switch';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  return (
+    <CanvasProvider dir="rtl">
+      <FormField isRequired>
+        <FormField.Label>Dark Mode</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
+        </FormField.Field>
+      </FormField>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/preview-react/switch/examples/RefForwarding.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {Switch} from '@workday/canvas-kit-preview-react/switch';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+  const ref = React.useRef(null);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  const handleClick = () => {
+    ref.current.focus();
+  };
+
+  return (
+    <>
+      <FormField>
+        <FormField.Label>Dark Mode</FormField.Label>
+        <FormField>
+          <FormField.Input as={Switch} checked={checked} ref={ref} onChange={handleChange} />
+        </FormField>
+      </FormField>
+      <PrimaryButton onClick={handleClick}>Focus Switch</PrimaryButton>
+    </>
+  );
+};