Rename twenty-ui to twenty-ui-deprecated and twenty-new-ui to twenty-ui to prepare package release (#21315)

## 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`.

packages/twenty-ui/src/input/components/Toggle.tsx

@@ -1,52 +1,10 @@
-import { styled } from '@linaria/react';
-import { VisibilityHiddenInput } from '@ui/accessibility';
-import { themeCssVariables } from '@ui/theme-constants';
-import { motion } from 'framer-motion';
+import { Switch } from '@base-ui/react/switch';
+import { clsx } from 'clsx';
+
+import styles from './Toggle.module.scss';
 
 export type ToggleSize = 'small' | 'medium';
 
-type ContainerProps = {
-  isOn: boolean;
-  color?: string;
-  toggleSize: ToggleSize;
-  centered?: boolean;
-  'data-disabled'?: boolean;
-};
-
-const StyledContainer = styled.label<ContainerProps>`
-  align-self: ${({ centered }) => (centered ? 'center' : 'flex-start')};
-  align-items: center;
-  background-color: ${({ isOn, color }) =>
-    isOn
-      ? (color ?? themeCssVariables.color.blue)
-      : themeCssVariables.background.transparent.medium};
-  border-radius: 10px;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  height: ${({ toggleSize }) => (toggleSize === 'small' ? 16 : 20)}px;
-  opacity: ${({ 'data-disabled': disabled }) => (disabled ? 0.5 : 1)};
-  pointer-events: ${({ 'data-disabled': disabled }) =>
-    disabled ? 'none' : 'auto'};
-  position: relative;
-  transition: background-color 0.3s ease;
-  width: ${({ toggleSize }) => (toggleSize === 'small' ? 24 : 32)}px;
-`;
-
-const StyledCircleBase = styled.span<{
-  size: ToggleSize;
-}>`
-  background-color: ${themeCssVariables.background.primary};
-  border-radius: 50%;
-  display: block;
-  height: ${({ size }) => (size === 'small' ? 12 : 16)}px;
-  left: 0;
-  position: absolute;
-  width: ${({ size }) => (size === 'small' ? 12 : 16)}px;
-`;
-
-const StyledCircle = motion.create(StyledCircleBase);
-
 export type ToggleProps = {
   id?: string;
   value?: boolean;
@@ -56,6 +14,8 @@ export type ToggleProps = {
   className?: string;
   centered?: boolean;
   disabled?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
 };
 
 export const Toggle = ({
@@ -67,37 +27,28 @@ export const Toggle = ({
   className,
   centered,
   disabled,
-}: ToggleProps) => {
-  const circleVariants = {
-    on: { x: toggleSize === 'small' ? 10 : 14 },
-    off: { x: 2 },
-  };
-
-  return (
-    <StyledContainer
-      isOn={value}
-      color={color}
-      toggleSize={toggleSize}
-      className={className}
-      centered={centered}
-      data-disabled={disabled}
-    >
-      <VisibilityHiddenInput
-        id={id}
-        type="checkbox"
-        checked={value}
-        disabled={disabled}
-        onChange={(event) => {
-          onChange?.(event.target.checked);
-        }}
-      />
-
-      <StyledCircle
-        initial={false}
-        animate={value ? 'on' : 'off'}
-        variants={circleVariants}
-        size={toggleSize}
-      />
-    </StyledContainer>
-  );
-};
+  '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>
+);