Raphaël Bosi
c596a5e342
## Description Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name **`twenty-ui`** (v0.1.0, publishable) and renames the old package to **`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports → `twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates twenty-front's `Toggle` to the new package (first consumer) as a drop-in. ## Next steps - Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` + `.yarnrc.yml`), then tag `ui/v0.1.0` to publish. - Continue migrating components from `twenty-ui-deprecated` → `twenty-ui`.
55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
import { Switch } from '@base-ui/react/switch';
|
|
import { clsx } from 'clsx';
|
|
|
|
import styles from './Toggle.module.scss';
|
|
|
|
export type ToggleSize = 'small' | 'medium';
|
|
|
|
export type ToggleProps = {
|
|
id?: string;
|
|
value?: boolean;
|
|
onChange?: (value: boolean, e?: React.MouseEvent<HTMLDivElement>) => void;
|
|
color?: string;
|
|
toggleSize?: ToggleSize;
|
|
className?: string;
|
|
centered?: boolean;
|
|
disabled?: boolean;
|
|
'aria-label'?: string;
|
|
'aria-labelledby'?: string;
|
|
};
|
|
|
|
export const Toggle = ({
|
|
id,
|
|
value = false,
|
|
onChange,
|
|
color,
|
|
toggleSize = 'medium',
|
|
className,
|
|
centered,
|
|
disabled,
|
|
'aria-label': ariaLabel,
|
|
'aria-labelledby': ariaLabelledBy,
|
|
}: ToggleProps) => (
|
|
<Switch.Root
|
|
id={id}
|
|
checked={value}
|
|
disabled={disabled}
|
|
onCheckedChange={(checked) => onChange?.(checked)}
|
|
aria-label={ariaLabel}
|
|
aria-labelledby={ariaLabelledBy}
|
|
className={clsx(
|
|
styles.root,
|
|
styles[toggleSize],
|
|
centered && styles.centered,
|
|
className,
|
|
)}
|
|
style={
|
|
color
|
|
? ({ '--toggle-on-color': color } as React.CSSProperties)
|
|
: undefined
|
|
}
|
|
>
|
|
<Switch.Thumb className={styles.thumb} />
|
|
</Switch.Root>
|
|
);
|