- {
if (Boolean(parseInt(enableSignUpConfig)) === true) {
@@ -159,13 +160,13 @@ const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(
))}
) : (
-
- {
if (Boolean(parseInt(disableWorkspaceCreation)) === true) {
@@ -110,9 +111,9 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
+ {!isSmallScreen && (
+ <>
+ {childrenArray.map((child, index) => {
+ if (React.isValidElement(child)) {
+ return React.cloneElement(child, {
+ isLast: index === childrenArray.length - 1,
+ });
+ }
+ return child;
+ })}
+
+ )}
+
+ {isSmallScreen && childrenArray.length > 1 && (
+ <>
+
+ );
+}
+
+// breadcrumb item
+type BreadcrumbItemProps = {
+ component?: React.ReactNode;
+ showSeparator?: boolean;
+ isLast?: boolean;
+};
+
+function BreadcrumbItem(props: BreadcrumbItemProps) {
+ const { component, showSeparator = true, isLast = false } = props;
+ return (
+
+
+
+
+ {React.isValidElement(childrenArray[childrenArray.length - 1])
+ ? React.cloneElement(childrenArray[childrenArray.length - 1] as React.ReactElement, {
+ isLast: true,
+ })
+ : childrenArray[childrenArray.length - 1]}
+
+
+ )}
+ {isSmallScreen && childrenArray.length === 1 && childrenArray}
+
+ {component}
+ {showSeparator && !isLast &&
+ );
+}
+
+// breadcrumb separator
+type BreadcrumbSeparatorProps = {
+ className?: string;
+ containerClassName?: string;
+ iconClassName?: string;
+};
+
+function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {
+ const { className, containerClassName, iconClassName } = props;
+ return (
+
+
+ );
+}
+
+const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+ Item: BreadcrumbItem,
+ Separator: BreadcrumbSeparator,
+});
+
+export { Breadcrumbs };
diff --git a/apps/admin/components/common/checkbox.tsx b/apps/admin/components/common/checkbox.tsx
new file mode 100644
index 0000000000..e59d5ffed7
--- /dev/null
+++ b/apps/admin/components/common/checkbox.tsx
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+// helpers
+import { cn } from "@plane/utils";
+
+export interface CheckboxProps extends React.InputHTMLAttributes
+
+
+
+
+
+
+ );
+});
+Checkbox.displayName = "form-checkbox-field";
+
+export { Checkbox };
diff --git a/apps/admin/components/common/controller-input.tsx b/apps/admin/components/common/controller-input.tsx
index eafb9de28b..f3f804c953 100644
--- a/apps/admin/components/common/controller-input.tsx
+++ b/apps/admin/components/common/controller-input.tsx
@@ -10,7 +10,7 @@ import { Controller } from "react-hook-form";
// icons
import { Eye, EyeOff } from "lucide-react";
// plane internal packages
-import { Input } from "@plane/ui";
+import { Input } from "@plane/propel/input";
import { cn } from "@plane/utils";
// Generic over the form's values because react-hook-form's Control is invariant: its
diff --git a/apps/admin/components/common/controller-switch.tsx b/apps/admin/components/common/controller-switch.tsx
index 58681949d2..af156385e1 100644
--- a/apps/admin/components/common/controller-switch.tsx
+++ b/apps/admin/components/common/controller-switch.tsx
@@ -7,7 +7,7 @@
import type { Control, FieldPath, FieldValues } from "react-hook-form";
import { Controller } from "react-hook-form";
// plane internal packages
-import { ToggleSwitch } from "@plane/ui";
+import { Switch } from "@plane/propel/switch";
type Props
+
+
+ {children}
+
+
+ {children}
+ {selected &&
+ )}
+
+ {/* Strength Indicator */}
+
+ );
+}
diff --git a/apps/admin/components/instance/setup-form.tsx b/apps/admin/components/instance/setup-form.tsx
index fdb7c80917..ea68ec913e 100644
--- a/apps/admin/components/instance/setup-form.tsx
+++ b/apps/admin/components/instance/setup-form.tsx
@@ -11,11 +11,14 @@ import { Eye, EyeOff } from "lucide-react";
// plane internal packages
import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
import { Button } from "@plane/propel/button";
+import { Input } from "@plane/propel/input";
+import { Spinner } from "@plane/propel/spinners";
import { AuthService } from "@plane/services";
-import { Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
import { getPasswordStrength, validatePersonName, validateCompanyName } from "@plane/utils";
// components
import { AuthHeader } from "@/app/(all)/(home)/auth-header";
+import { Checkbox } from "@/components/common/checkbox";
+import { PasswordStrengthIndicator } from "@/components/common/password-strength-indicator";
import { Banner } from "../common/banner";
import { FormHeader } from "./form-header";
diff --git a/apps/admin/package.json b/apps/admin/package.json
index d889a1c6ac..b44bcfdb79 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -28,7 +28,6 @@
"@plane/propel": "workspace:*",
"@plane/services": "workspace:*",
"@plane/types": "workspace:*",
- "@plane/ui": "workspace:*",
"@plane/utils": "workspace:*",
"@react-router/node": "catalog:",
"isbot": "catalog:",
@@ -40,6 +39,7 @@
"react": "catalog:",
"react-dom": "catalog:",
"react-hook-form": "catalog:",
+ "react-popper": "catalog:",
"react-router": "catalog:",
"serve": "catalog:",
"swr": "catalog:",
diff --git a/packages/propel/package.json b/packages/propel/package.json
index f92a5579bc..f98add2773 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -37,6 +37,7 @@
"./portal": "./dist/portal/index.js",
"./scrollarea": "./dist/scrollarea/index.js",
"./skeleton": "./dist/skeleton/index.js",
+ "./spinners": "./dist/spinners/index.js",
"./switch": "./dist/switch/index.js",
"./tab-navigation": "./dist/tab-navigation/index.js",
"./table": "./dist/table/index.js",
diff --git a/packages/propel/src/avatar/avatar.tsx b/packages/propel/src/avatar/avatar.tsx
index 9fc4f53e83..3f59a692ca 100644
--- a/packages/propel/src/avatar/avatar.tsx
+++ b/packages/propel/src/avatar/avatar.tsx
@@ -106,6 +106,14 @@ export function Avatar(props: Props) {
className={cn("grid place-items-center overflow-hidden", getBorderRadius(shape), {
[sizeInfo.avatarSize]: !isAValidNumber(size),
})}
+ style={
+ isAValidNumber(size)
+ ? {
+ height: `${size}px`,
+ width: `${size}px`,
+ }
+ : {}
+ }
tabIndex={-1}
>
+
+
+ {/* Criteria list */}
+ {showCriteria && (
+
+ {[0, 1, 2].map((fragmentIndex) => (
+
+ ))}
+
+
+ {/* Strength Message */}
+ {password && {strengthInfo.message}
} +
+ {criteria.map((criterion) => (
+
+ )}
+
+
+ ))}
+
+
+
+ {criterion.label}
+
+