[WEB-4687] feat: propel switch

apps/web/core/components/core/modals/existing-issues-list-modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import { filter } from "lodash";
 import { Rocket, Search, X } from "lucide-react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // i18n
@@ -20,7 +21,6 @@ import { IssueIdentifier } from "@/plane-web/components/issues/issue-details/iss
 import { ProjectService } from "@/services/project";
 // components
 import { IssueSearchModalEmptyState } from "./issue-search-modal-empty-state";
-import { filter } from "lodash";
 
 type Props = {
   workspaceSlug: string | undefined;

packages/propel/package.json

@@ -22,7 +22,8 @@
     "./command": "./src/command/index.ts",
     "./combobox": "./src/combobox/index.ts",
     "./tooltip": "./src/tooltip/index.ts",
-    "./styles/fonts": "./src/styles/fonts/index.css"
+    "./styles/fonts": "./src/styles/fonts/index.css",
+    "./switch": "./src/switch/index.ts"
   },
   "dependencies": {
     "@base-ui-components/react": "^1.0.0-beta.2",

packages/propel/src/combobox/combobox.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
+import { cn } from "@plane/utils";
 import { Command } from "../command/command";
 import { Popover } from "../popover/root";
-import { cn } from "@plane/utils";
 
 export interface ComboboxOption {
   value: unknown;

packages/propel/src/command/command.tsx

@@ -1,7 +1,7 @@
 import { Command as CommandPrimitive } from "cmdk";
 import { SearchIcon } from "lucide-react";
 import * as React from "react";
-import { cn } from "@plane/ui";
+import { cn } from "@plane/utils";
 
 function CommandComponent({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
   return <CommandPrimitive data-slot="command" className={cn("", className)} {...props} />;

packages/propel/src/switch/index.ts

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

packages/propel/src/switch/root.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Switch as BaseSwitch } from "@base-ui-components/react/switch";
+import { cn } from "@plane/utils";
+
+interface IToggleSwitchProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  className?: string;
+}
+
+const Switch: React.FC<IToggleSwitchProps> = ({ value, onChange, label, size = "sm", disabled, className }) => (
+  <BaseSwitch.Root
+    checked={value}
+    disabled={disabled}
+    onCheckedChange={onChange}
+    aria-label={label}
+    className={cn(
+      "relative inline-flex flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none",
+      // size
+      size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10",
+      // state
+      disabled
+        ? "cursor-not-allowed bg-custom-background-80"
+        : value
+          ? "cursor-pointer bg-custom-primary-100"
+          : "cursor-pointer bg-custom-background-90",
+      className
+    )}
+  >
+    {label && <span className="sr-only">{label}</span>}
+    <BaseSwitch.Thumb
+      aria-hidden="true"
+      className={cn(
+        "inline-block self-center rounded-full shadow ring-0 transition-transform duration-200 ease-in-out",
+        // size
+        size === "sm" ? "h-3 w-3" : size === "md" ? "h-4 w-4" : "h-5 w-5",
+        // position + color by state
+        value
+          ? size === "sm"
+            ? "translate-x-3 bg-white"
+            : size === "md"
+              ? "translate-x-4 bg-white"
+              : "translate-x-5 bg-white"
+          : "translate-x-0.5 bg-custom-background-90",
+        // disabled
+        disabled && "cursor-not-allowed bg-custom-background-90"
+      )}
+    />
+  </BaseSwitch.Root>
+);
+
+Switch.displayName = "plane-ui-switch";
+
+export { Switch };