@apify/ui-library 1.127.10 → 1.128.1

package/src/components/switch/switch.style.ts

@@ -0,0 +1,54 @@
+import { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+
+export const switchStyle = css`
+    width: 32px;
+    height: 16px;
+    background-color: ${theme.color.neutral.actionSecondary};
+    border-radius: 100px;
+    position: relative;
+    transition: border-color 120ms ease-out, background-color 120ms ease-out !important;
+    vertical-align: middle;
+
+    &:focus-visible {
+        outline: 2px solid ${theme.color.primary.fieldBorderActive}!important;
+    }
+
+    &:hover {
+        background-color: ${theme.color.neutral.actionSecondaryHover};
+        cursor: pointer;
+    }
+
+    &.disabled {
+        background-color: ${theme.color.neutral.disabled};
+    }
+
+    &.error {
+        background-color: ${theme.color.danger.action};
+
+        &:hover {
+        background-color: ${theme.color.danger.actionHover};
+        }
+    }
+
+    &[data-state="checked"] {
+        background-color: ${theme.color.success.action};
+
+        &:hover {
+            background-color: ${theme.color.success.actionHover};
+        }
+
+        &.disabled {
+            background-color: ${theme.color.success.chipBackground};
+        }
+
+        &.error {
+            background-color: ${theme.color.danger.action};
+
+            &:hover {
+                background-color: ${theme.color.danger.actionHover};
+            }
+        }
+    }
+`;

package/src/components/switch/switch.tsx

@@ -0,0 +1,54 @@
+import * as SwitchPrimitiveReact from '@radix-ui/react-switch';
+import clsx from 'clsx';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { switchStyle } from './switch.style';
+
+const StyledSwitch = styled(SwitchPrimitiveReact.Root)`
+    all: unset;
+    ${switchStyle}
+`;
+
+const StyledThumb = styled(SwitchPrimitiveReact.Thumb)`
+    display: block;
+    background-color: ${theme.color.neutral.backgroundWhite};
+    width: 12px;
+    height: 12px;
+    border-radius: 100px;
+    transition: transform 100ms;
+    transform: translateX(2px);
+    will-change: transform;
+    &[data-state="checked"] {
+        transform: translateX(18px);
+    }
+`;
+type SwitchPrimitiveProps = {
+    value: boolean;
+    setValue: (checked: boolean) => void;
+    error?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+} & Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitiveReact.Root>, 'checked' | 'onCheckedChange' | 'value'>;
+
+export const SwitchPrimitive = ({
+    value,
+    setValue,
+    error,
+    disabled,
+    readOnly,
+    ...rest
+}: SwitchPrimitiveProps) => (
+    <StyledSwitch
+        {...rest}
+        checked={value}
+        onCheckedChange={setValue}
+        disabled={disabled || readOnly}
+        className={clsx(
+            error && 'error',
+            (disabled || readOnly) && 'disabled',
+        )}
+    >
+        <StyledThumb />
+    </StyledSwitch>
+);