chore(ui,icons,ui-preset,toolbox): Move design system packages to monorepo (#5470)

packages/design-system/ui/src/components/switch/index.ts

@@ -0,0 +1 @@
+export * from "./switch"

packages/design-system/ui/src/components/switch/switch.spec.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react"
+import * as React from "react"
+
+import { Switch } from "./switch"
+
+describe("Switch", () => {
+  it("should render successfully", () => {
+    render(<Switch />)
+
+    expect(screen.getByRole("switch")).toBeInTheDocument()
+  })
+})

packages/design-system/ui/src/components/switch/switch.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Switch } from "./switch"
+
+const meta: Meta<typeof Switch> = {
+  title: "Components/Switch",
+  component: Switch,
+  parameters: {
+    layout: "centered",
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Switch>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const Small: Story = {
+  args: {
+    size: "small",
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+}
+
+export const CheckedDisabled: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+}

packages/design-system/ui/src/components/switch/switch.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as Primitives from "@radix-ui/react-switch"
+import { VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
+
+import { clx } from "@/utils/clx"
+
+const switchVariants = cva(
+  "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        small: "h-[16px] w-[28px]",
+        base: "h-[18px] w-[32px]",
+      },
+    },
+    defaultVariants: {
+      size: "base",
+    },
+  }
+)
+
+const thumbVariants = cva(
+  "bg-ui-fg-on-color shadow-details-switch-handle group-disabled:bg-ui-fg-disabled pointer-events-none h-[14px] w-[14px] rounded-full transition-all group-disabled:shadow-none",
+  {
+    variants: {
+      size: {
+        small:
+          "h-[12px] w-[12px] data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5",
+        base: "h-[14px] w-[14px] transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
+      },
+    },
+    defaultVariants: {
+      size: "base",
+    },
+  }
+)
+
+interface SwitchProps
+  extends Omit<
+      React.ComponentPropsWithoutRef<typeof Primitives.Root>,
+      "asChild"
+    >,
+    VariantProps<typeof switchVariants> {}
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof Primitives.Root>,
+  SwitchProps
+>(({ className, size = "base", ...props }, ref) => (
+  <Primitives.Root
+    className={clx(switchVariants({ size }), className)}
+    {...props}
+    ref={ref}
+  >
+    <Primitives.Thumb className={clx(thumbVariants({ size }))} />
+  </Primitives.Root>
+))
+Switch.displayName = "Switch"
+
+export { Switch }