@workday/canvas-kit-react/dist/es6/switch/lib/Switch.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ErrorType, createComponent, focusRing, useUniqueId } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
import { base, system } from '@workday/canvas-tokens-web';
const switchContainerStencil = createStencil({
    base: { name: "2uha99", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" }
}, "switch-container-438704");
const SwitchContainer = createComponent('div')({
    displayName: 'SwitchContainer',
    Component: ({ children, ...elemProps }, ref, Element) => {
        return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, switchContainerStencil()), children: children }));
    },
});
const switchInputStencil = createStencil({
    base: { name: "2ypg0t", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
    modifiers: {
        error: {
            error: { name: "1xh2ad", styles: "& ~ div:first-of-type{box-shadow:\n              0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n              0 0 0 0.25rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),\n              0 0 0 0.3125rem transparent;}" },
            caution: { name: "3e0v3j", styles: "& ~ div:first-of-type{box-shadow:\n          0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n          0 0 0 0.25rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n          0 0 0 0.3125rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}" }
        }
    }
}, "switch-input-a3e5c3");
const SwitchInput = createComponent('input')({
    displayName: 'SwitchInput',
    Component: ({ error, ...elemProps }, ref, Element) => {
        return _jsx(Element, { ref: ref, ...mergeStyles(elemProps, switchInputStencil({ error })) });
    },
});
const switchBackgroundStencil = createStencil({
    base: { name: "3upwqt", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-block-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:0 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-accent-muted-soft, var(--cnvs-sys-color-bg-muted-softer, oklch(0.754 0.0181 256.33 / 1)));" }
}, "switch-background-f23362");
const SwitchBackground = createComponent('div')({
    displayName: 'SwitchBackground',
    Component: ({ children, ...elemProps }, ref, Element) => {
        return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, switchBackgroundStencil()), children: children }));
    },
});
const switchCircleStencil = createStencil({
    base: { name: "lcj5c", styles: "box-sizing:border-box;width:var(--cnvs-base-size-150, 0.75rem);height:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-sys-color-fg-inverse);transform:translateX(0);" },
    modifiers: {
        checked: {
            true: { name: "34d3wa", styles: "transform:translateX(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)));:dir(rtl){transform:translateX(calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)) * -1));}" }
        }
    }
}, "switch-circle-6833a8");
const SwitchCircle = createComponent('div')({
    displayName: 'SwitchCircle',
    Component: ({ checked, ...elemProps }, ref, Element) => {
        return _jsx(Element, { ref: ref, ...mergeStyles(elemProps, switchCircleStencil({ checked })) });
    },
});
/**
 * @deprecated ⚠️ `Switch` in Main has been deprecated in v15 and will be removed in a future major version. Please use [`Switch` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-switch--docs) instead.
 */
export const Switch = createComponent('input')({
    displayName: 'Switch',
    Component: ({ checked = false, id, disabled = false, onChange, value, ...elemProps }, ref, Element) => {
        const inputId = useUniqueId(id);
        return (_jsxs(SwitchContainer, { children: [_jsx(SwitchInput, { as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, role: "switch", type: "checkbox", value: value, ...elemProps }), _jsx(SwitchBackground, { children: _jsx(SwitchCircle, { checked: checked }) })] }));
    },
    subComponents: {
        ErrorType,
    },
});