mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2025-12-19 17:58:48 +00:00
84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
// Copyright 2025 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
import React, { memo } from 'react';
|
|
import { Switch } from 'radix-ui';
|
|
import { tw } from './tw';
|
|
import { AxoSymbol } from './AxoSymbol';
|
|
|
|
const Namespace = 'AxoSwitch';
|
|
|
|
type AxoSwitchProps = Readonly<{
|
|
checked: boolean;
|
|
onCheckedChange: (nextChecked: boolean) => void;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
}>;
|
|
|
|
// eslint-disable-next-line import/export
|
|
export const AxoSwitch = memo((props: AxoSwitchProps) => {
|
|
return (
|
|
<Switch.Root
|
|
checked={props.checked}
|
|
onCheckedChange={props.onCheckedChange}
|
|
disabled={props.disabled}
|
|
required={props.required}
|
|
className={tw(
|
|
'group relative z-0 flex h-[18px] w-8 items-center rounded-full',
|
|
'border border-border-secondary inset-shadow-on-color',
|
|
'bg-fill-secondary',
|
|
'data-[disabled]:bg-fill-primary',
|
|
'pressed:bg-fill-secondary-pressed',
|
|
'outline-0 outline-border-focused focused:outline-[2.5px]',
|
|
'overflow-hidden'
|
|
)}
|
|
>
|
|
<span
|
|
className={tw(
|
|
'absolute top-0 bottom-0',
|
|
'w-5.5 rounded-s-full',
|
|
'group-data-[disabled]:w-7.5 group-data-[disabled]:rounded-full',
|
|
'opacity-0 group-data-[state=checked]:opacity-100',
|
|
'-translate-x-3.5 group-data-[state=checked]:translate-x-0 rtl:translate-x-3.5',
|
|
'bg-color-fill-primary group-pressed:bg-color-fill-primary-pressed',
|
|
'transition-all duration-200 ease-out-cubic',
|
|
'forced-colors:bg-[AccentColor]',
|
|
'forced-colors:group-data-[disabled]:bg-[GrayText]'
|
|
)}
|
|
/>
|
|
<span
|
|
className={tw(
|
|
'invisible forced-colors:visible',
|
|
'absolute start-0.5 z-0 text-[12px]',
|
|
'forced-color-adjust-none',
|
|
'forced-colors:text-[AccentColorText]'
|
|
)}
|
|
>
|
|
<AxoSymbol.InlineGlyph symbol="check" label={null} />
|
|
</span>
|
|
<Switch.Thumb
|
|
className={tw(
|
|
'z-10 block size-4 rounded-full',
|
|
// eslint-disable-next-line better-tailwindcss/no-restricted-classes
|
|
'shadow-[#000]/12',
|
|
'shadow-[0.5px_0_0.5px_0.5px,-0.5px_0_0.5px_0.5px]',
|
|
'bg-label-primary-on-color',
|
|
'data-[disabled]:bg-label-disabled-on-color',
|
|
'transition-all duration-200 ease-out-cubic',
|
|
'data-[state=checked]:translate-x-3.5',
|
|
'rtl:data-[state=checked]:-translate-x-3.5',
|
|
'forced-colors:border',
|
|
'forced-colors:data-[disabled]:bg-[ButtonFace]'
|
|
)}
|
|
/>
|
|
</Switch.Root>
|
|
);
|
|
});
|
|
|
|
AxoSwitch.displayName = `${Namespace}`;
|
|
|
|
// eslint-disable-next-line max-len
|
|
// eslint-disable-next-line @typescript-eslint/no-namespace, @typescript-eslint/no-redeclare, import/export
|
|
export namespace AxoSwitch {
|
|
export type Props = AxoSwitchProps;
|
|
}
|