binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: replace prettier with oxfmt (#8676)

Browse source
This commit is contained in:
sriram veeraghanta 2026-03-02 20:40:50 +05:30 • committed by GitHub
parent 9ee73d57ef
commit 41abaffc6e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1008 changed files with 4046 additions and 4027 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/ui/src/auth-form/auth-forgot-password.tsx
View file

@ -33,9 +33,9 @@ export function AuthForgotPassword({
onClick={handleClick}
disabled={disabled}
className={cn(
"text-13 text-accent-primary hover:text-accent-secondary transition-colors duration-200",
"text-13 text-accent-primary transition-colors duration-200 hover:text-accent-secondary",
{
"opacity-50 cursor-not-allowed": disabled,
"cursor-not-allowed opacity-50": disabled,
"cursor-pointer": !disabled,
},
className

2
packages/ui/src/auth-form/auth-form.tsx
View file

@ -200,7 +200,7 @@ export function AuthForm({
<button
type="button"
onClick={handleModeChange}
className="ml-1 text-13 text-accent-primary hover:text-accent-secondary transition-colors duration-200"
className="ml-1 text-13 text-accent-primary transition-colors duration-200 hover:text-accent-secondary"
disabled={disabled}
>
{getAlternateModeButtonText()}

4
packages/ui/src/auth-form/auth-input.tsx
View file

@ -41,13 +41,13 @@ export function AuthInput({
{label}
</label>
)}
<div className={cn("relative flex items-center rounded-md border border-strong py-2 px-3 transition-all")}>
<div className={cn("relative flex items-center rounded-md border border-strong px-3 py-2 transition-all")}>
<Input
{...props}
type={inputType}
autoComplete={autoComplete}
className={cn(
"rounded-md disable-autofill-style h-6 w-full placeholder:text-14 placeholder:text-placeholder p-0 border-none",
"h-6 w-full rounded-md border-none p-0 disable-autofill-style placeholder:text-14 placeholder:text-placeholder",
{
"border-danger-strong": error,
},

2
packages/ui/src/avatar/avatar-group.tsx
View file

@ -74,7 +74,7 @@ export function AvatarGroup(props: Props) {
<Tooltip tooltipContent={`${totalAvatars} total`} disabled={!showTooltip}>
<div
className={cn(
"grid place-items-center rounded-full bg-accent-subtle text-9 text-accent-primary border border-subtle-1",
"grid place-items-center rounded-full border border-subtle-1 bg-accent-subtle text-9 text-accent-primary",
{
[sizeInfo.avatarSize]: !isAValidNumber(size),
}

4
packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
View file

@ -32,7 +32,7 @@ function BreadcrumbBlock(props: TBreadcrumbBlockProps) {
<>
<Breadcrumbs.ItemWrapper label={label} disableTooltip={disableTooltip}>
{icon && <div className="flex size-4 items-center justify-center overflow-hidden !text-16">{icon}</div>}
{label && <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>}
{label && <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>}
</Breadcrumbs.ItemWrapper>
</>
);
@ -72,7 +72,7 @@ export const WithCustomComponent: Story = {
key="custom"
component={
<div className="flex items-center gap-2">
<span className="size-4 rounded-full bg-blue-500" />
<span className="bg-blue-500 size-4 rounded-full" />
<span>Custom Component</span>
</div>
}

24
packages/ui/src/breadcrumbs/breadcrumbs.tsx
View file

@ -18,10 +18,10 @@ type BreadcrumbsProps = {
export function BreadcrumbItemLoader() {
return (
<div className="flex items-center gap-2 h-7 animate-pulse">
<div className="group h-full flex items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium">
<span className="h-full w-5 bg-layer-1 rounded-sm" />
<span className="h-full w-16 bg-layer-1 rounded-sm" />
<div className="flex h-7 animate-pulse items-center gap-2">
<div className="group flex h-full items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium">
<span className="h-full w-5 rounded-sm bg-layer-1" />
<span className="h-full w-16 rounded-sm bg-layer-1" />
</div>
</div>
);
@ -43,7 +43,7 @@ function Breadcrumbs({ className, children, onBack, isLoading = false }: Breadcr
const childrenArray = React.Children.toArray(children);
return (
<div className={cn("flex items-center overflow-hidden gap-0.5 flex-grow", className)}>
<div className={cn("flex flex-grow items-center gap-0.5 overflow-hidden", className)}>
{!isSmallScreen && (
<>
{childrenArray.map((child, index) => {
@ -102,7 +102,7 @@ type BreadcrumbItemProps = {
function BreadcrumbItem(props: BreadcrumbItemProps) {
const { component, showSeparator = true, isLast = false } = props;
return (
<div className="flex items-center gap-0.5 h-6">
<div className="flex h-6 items-center gap-0.5">
{component}
{showSeparator && !isLast && <BreadcrumbSeparator />}
</div>
@ -129,7 +129,7 @@ type BreadcrumbLabelProps = {
function BreadcrumbLabel(props: BreadcrumbLabelProps) {
const { children, className } = props;
return (
<div className={cn("relative line-clamp-1 block max-w-[150px] overflow-hidden truncate", className)}>
<div className={cn("relative line-clamp-1 block max-w-[150px] truncate overflow-hidden", className)}>
{children}
</div>
);
@ -146,11 +146,11 @@ type BreadcrumbSeparatorProps = {
function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {
const { className, containerClassName, iconClassName, showDivider = false } = props;
return (
<div className={cn("relative flex items-center justify-center h-full px-1.5 py-1", className)}>
{showDivider && <span className="absolute -left-0.5 top-0 h-full w-[1.8px] bg-surface-1" />}
<div className={cn("relative flex h-full items-center justify-center px-1.5 py-1", className)}>
{showDivider && <span className="absolute top-0 -left-0.5 h-full w-[1.8px] bg-surface-1" />}
<div
className={cn(
"flex items-center justify-center flex-shrink-0 rounded-sm text-placeholder transition-all",
"flex flex-shrink-0 items-center justify-center rounded-sm text-placeholder transition-all",
containerClassName
)}
>
@ -176,11 +176,11 @@ function BreadcrumbItemWrapper(props: BreadcrumbItemWrapperProps) {
<Tooltip tooltipContent={label} position="bottom" disabled={!label || label === "" || disableTooltip}>
<div
className={cn(
"group h-full flex items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium cursor-default",
"group flex h-full cursor-default items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium",
{
"text-primary": isLast,
"text-tertiary": !isLast,
"hover:text-primary hover:bg-layer-transparent-hover cursor-pointer": type === "link" && !isLast,
"cursor-pointer hover:bg-layer-transparent-hover hover:text-primary": type === "link" && !isLast,
},
className
)}

12
packages/ui/src/breadcrumbs/navigation-dropdown.tsx
View file

@ -45,14 +45,14 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
}
}}
className={cn(
"group h-full flex items-center gap-2 px-1.5 py-1 text-13 font-medium text-tertiary cursor-pointer rounded-sm rounded-r-none",
"group flex h-full cursor-pointer items-center gap-2 rounded-sm rounded-r-none px-1.5 py-1 text-13 font-medium text-tertiary",
{
"hover:bg-layer-1 hover:text-primary": !isLast,
}
)}
>
<div className="flex @4xl:hidden text-tertiary">...</div>
<div className="hidden @4xl:flex gap-2 items-center">
<div className="flex text-tertiary @4xl:hidden">...</div>
<div className="hidden items-center gap-2 @4xl:flex">
{selectedItemIcon && <Breadcrumbs.Icon>{selectedItemIcon}</Breadcrumbs.Icon>}
<Breadcrumbs.Label>{selectedItem?.title}</Breadcrumbs.Label>
</div>
@ -87,7 +87,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
placement="bottom-start"
className="h-full rounded-sm"
customButtonClassName={cn(
"group flex items-center gap-0.5 rounded-sm hover:bg-surface-2 outline-none cursor-pointer h-full rounded-sm",
"group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2",
{
"bg-surface-2": isOpen,
}
@ -125,7 +125,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
<h5>{item.title}</h5>
{item.description && (
<p
className={cn("text-tertiary whitespace-pre-line", {
className={cn("whitespace-pre-line text-tertiary", {
"text-placeholder": item.disabled,
})}
>
@ -133,7 +133,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
</p>
)}
</div>
{item.key === selectedItemKey && <CheckIcon className="flex-shrink-0 size-3.5" />}
{item.key === selectedItemKey && <CheckIcon className="size-3.5 flex-shrink-0" />}
</CustomMenu.MenuItem>
);
})}

8
packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
View file

@ -67,16 +67,16 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
}
}}
className={cn(
"group h-full flex items-center gap-2 px-1.5 py-1 text-13 font-medium text-tertiary cursor-pointer rounded-sm rounded-r-none",
"group flex h-full cursor-pointer items-center gap-2 rounded-sm rounded-r-none px-1.5 py-1 text-13 font-medium text-tertiary",
{
"hover:bg-layer-1 hover:text-primary": !isLast,
}
)}
>
{shouldTruncate && <div className="flex @4xl:hidden text-tertiary">...</div>}
{shouldTruncate && <div className="flex text-tertiary @4xl:hidden">...</div>}
<div
className={cn("flex gap-2", {
"hidden @4xl:flex gap-2 items-center": shouldTruncate,
"hidden items-center gap-2 @4xl:flex": shouldTruncate,
})}
>
{icon && <Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}
@ -101,7 +101,7 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
disabled={navigationDisabled}
className="h-full rounded-sm"
customButtonClassName={cn(
"group flex items-center gap-0.5 rounded-sm hover:bg-surface-2 outline-none cursor-pointer h-full rounded-sm",
"group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2",
{
"bg-surface-2": isDropdownOpen,
}

8
packages/ui/src/button/toggle-switch.tsx
View file

@ -26,14 +26,14 @@ function ToggleSwitch(props: IToggleSwitchProps) {
disabled={disabled}
onChange={onChange}
className={cn(
"relative inline-flex flex-shrink-0 h-6 w-10 cursor-pointer rounded-full border border-subtle transition-colors duration-200 ease-in-out focus:outline-none bg-layer-1",
"relative inline-flex h-6 w-10 flex-shrink-0 cursor-pointer rounded-full border border-subtle bg-layer-1 transition-colors duration-200 ease-in-out focus:outline-none",
{
"h-4 w-7": size === "sm",
"h-5 w-9": size === "md",
"bg-accent-primary": value && !disabled,
"bg-(--text-color-icon-placeholder)": !value && !disabled,
"cursor-not-allowed opacity-50 bg-accent-primary": value && disabled,
"cursor-not-allowed opacity-50 bg-(--text-color-icon-placeholder)": !value && disabled,
"cursor-not-allowed bg-accent-primary opacity-50": value && disabled,
"cursor-not-allowed bg-(--text-color-icon-placeholder) opacity-50": !value && disabled,
},
className
)}
@ -42,7 +42,7 @@ function ToggleSwitch(props: IToggleSwitchProps) {
<span
aria-hidden="true"
className={cn(
"inline-block self-center h-5 w-5 transform rounded-full bg-(--text-color-icon-on-color) ring-0 transition duration-200 ease-in-out",
"inline-block h-5 w-5 transform self-center rounded-full bg-(--text-color-icon-on-color) ring-0 transition duration-200 ease-in-out",
{
"h-3 w-3 translate-x-3.5": size === "sm" && value,
"h-3 w-3 translate-x-0.5": size === "sm" && !value,

6
packages/ui/src/collapsible/collapsible-button.tsx
View file

@ -33,17 +33,17 @@ export function CollapsibleButton(props: Props) {
ChevronIcon = DropdownIcon,
} = props;
return (
<div className={cn("flex items-center justify-between gap-3 h-12 px-2.5 py-3 border-b border-subtle", className)}>
<div className={cn("flex h-12 items-center justify-between gap-3 border-b border-subtle px-2.5 py-3", className)}>
<div className="flex items-center gap-3.5">
<div className="flex items-center gap-3">
{!hideChevron && (
<ChevronIcon
className={cn("size-2 text-tertiary hover:text-secondary duration-300", {
className={cn("size-2 text-tertiary duration-300 hover:text-secondary", {
"-rotate-90": !isOpen,
})}
/>
)}
<span className={cn("text-14 text-primary font-medium", titleClassName)}>{title}</span>
<span className={cn("text-14 font-medium text-primary", titleClassName)}>{title}</span>
</div>
{indicatorElement && indicatorElement}
</div>

6
packages/ui/src/color-picker/color-picker.tsx
View file

@ -25,9 +25,9 @@ export function ColorPicker(props: ColorPickerProps) {
};
return (
<div className="flex items-center justify-center relative">
<div className="relative flex items-center justify-center">
<button
className={`size-4 rounded-full cursor-pointer conical-gradient ${className}`}
className={`size-4 cursor-pointer rounded-full conical-gradient ${className}`}
onClick={handleOnClick}
aria-label="Open color picker"
/>
@ -36,7 +36,7 @@ export function ColorPicker(props: ColorPickerProps) {
type="color"
value={value}
onChange={(e) => onChange(e.target.value)}
className="absolute inset-0 size-4 invisible"
className="invisible absolute inset-0 size-4"
aria-hidden="true"
/>
</div>

4
packages/ui/src/drag-handle.tsx
View file

@ -21,13 +21,13 @@ export const DragHandle = forwardRef(function DragHandle(
const { className, disabled = false } = props;
if (disabled) {
return <div className="w-[14px] h-[18px]" />;
return <div className="h-[18px] w-[14px]" />;
}
return (
<button
type="button"
className={cn("p-0.5 flex flex-shrink-0 rounded-sm bg-surface-2 text-secondary cursor-grab", className)}
className={cn("flex flex-shrink-0 cursor-grab rounded-sm bg-surface-2 p-0.5 text-secondary", className)}
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();

4
packages/ui/src/drop-indicator.tsx
View file

@ -18,9 +18,7 @@ export function DropIndicator(props: Props) {
return (
<div
className={cn(
`block relative h-[2px] w-full
before:left-0 before:relative before:block before:top-[-2px] before:h-[6px] before:w-[6px] before:rounded-sm
after:left-[calc(100%-6px)] after:relative after:block after:top-[-8px] after:h-[6px] after:w-[6px] after:rounded-sm`,
`relative block h-[2px] w-full before:relative before:top-[-2px] before:left-0 before:block before:h-[6px] before:w-[6px] before:rounded-sm after:relative after:top-[-8px] after:left-[calc(100%-6px)] after:block after:h-[6px] after:w-[6px] after:rounded-sm`,
{
"bg-accent-primary before:bg-accent-primary after:bg-accent-primary": isVisible,
},

4
packages/ui/src/dropdown/common/loader.tsx
View file

@ -9,9 +9,9 @@ import React from "react";
export function DropdownOptionsLoader() {
return (
<div className="flex flex-col gap-1 animate-pulse">
<div className="flex animate-pulse flex-col gap-1">
{range(6).map((index) => (
<div key={index} className="flex h-[1.925rem] w-full rounded-sm px-1 py-1.5 bg-surface-2" />
<div key={index} className="flex h-[1.925rem] w-full rounded-sm bg-surface-2 px-1 py-1.5" />
))}
</div>
);

4
packages/ui/src/dropdown/common/options.tsx
View file

@ -58,7 +58,7 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
disabled={option.disabled}
className={({ active, selected }) =>
cn(
"flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5",
"flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
{
"bg-layer-1": active,
"text-primary": selected,
@ -84,7 +84,7 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
</Combobox.Option>
))
) : (
<p className="px-1.5 py-1 italic text-placeholder">No matching results</p>
<p className="px-1.5 py-1 text-placeholder italic">No matching results</p>
)
) : loader ? (
<> {loader} </>

2
packages/ui/src/dropdowns/combo-box.tsx
View file

@ -48,7 +48,7 @@ const ComboDropDown = forwardRef(function ComboDropDown(props: Props, ref) {
if (!shouldRender) {
return (
<div ref={dropDownButtonRef} className="h-full flex items-center">
<div ref={dropDownButtonRef} className="flex h-full items-center">
{button}
</div>
);

10
packages/ui/src/dropdowns/context-menu/item.tsx
View file

@ -158,7 +158,7 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
ref={setReferenceElement}
type="button"
className={cn(
"w-full flex items-center gap-2 px-1 py-1.5 text-left text-secondary rounded-sm text-11 select-none",
"flex w-full items-center gap-2 rounded-sm px-1 py-1.5 text-left text-11 text-secondary select-none",
{
"bg-layer-transparent-hover": isActive,
"text-placeholder": item.disabled,
@ -176,7 +176,7 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
<h5>{item.title}</h5>
{item.description && (
<p
className={cn("text-tertiary whitespace-pre-line", {
className={cn("whitespace-pre-line text-tertiary", {
"text-placeholder": item.disabled,
})}
>
@ -199,13 +199,13 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
className="fixed z-[35] min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11"
data-context-submenu="true"
>
<div ref={nestedMenuRef} className="max-h-72 overflow-y-scroll vertical-scrollbar scrollbar-sm">
<div ref={nestedMenuRef} className="vertical-scrollbar scrollbar-sm max-h-72 overflow-y-scroll">
{renderedNestedItems.map((nestedItem, index) => (
<button
key={nestedItem.key}
type="button"
className={cn(
"w-full flex items-center gap-2 px-1 py-1.5 text-left text-secondary rounded-sm text-11 select-none",
"flex w-full items-center gap-2 rounded-sm px-1 py-1.5 text-left text-11 text-secondary select-none",
{
"bg-layer-transparent-hover": index === activeNestedIndex,
"text-placeholder": nestedItem.disabled,
@ -228,7 +228,7 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
<h5>{nestedItem.title}</h5>
{nestedItem.description && (
<p
className={cn("text-tertiary whitespace-pre-line", {
className={cn("whitespace-pre-line text-tertiary", {
"text-placeholder": nestedItem.disabled,
})}
>

6
packages/ui/src/dropdowns/context-menu/root.tsx
View file

@ -204,15 +204,15 @@ function ContextMenuWithoutPortal(props: ContextMenuProps) {
return (
<div
className={cn(
"fixed h-screen w-screen top-0 left-0 cursor-default z-30 opacity-0 pointer-events-none transition-opacity",
"pointer-events-none fixed top-0 left-0 z-30 h-screen w-screen cursor-default opacity-0 transition-opacity",
{
"opacity-100 pointer-events-auto": isOpen,
"pointer-events-auto opacity-100": isOpen,
}
)}
>
<div
ref={contextMenuRef}
className="fixed border-[0.5px] border-subtle-1 bg-surface-1 rounded-md px-2 py-2.5 max-h-72 min-w-[12rem] overflow-y-scroll vertical-scrollbar scrollbar-sm"
className="vertical-scrollbar fixed scrollbar-sm max-h-72 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5"
style={{
top: position.y,
left: position.x,

12
packages/ui/src/dropdowns/custom-menu.tsx
View file

@ -200,7 +200,7 @@ function CustomMenu(props: ICustomMenuDropdownProps) {
>
<div
className={cn(
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 focus:outline-none min-w-[12rem] whitespace-nowrap",
"my-1 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap focus:outline-none",
{
"max-h-60": maxHeight === "lg",
"max-h-48": maxHeight === "md",
@ -277,9 +277,9 @@ function CustomMenu(props: ICustomMenuDropdownProps) {
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-11 duration-300 ${
className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-11 whitespace-nowrap duration-300 ${
open ? "text-primary" : "text-secondary"
} ${noBorder ? "" : "border border-strong shadow-sm focus:outline-none"} ${
} ${noBorder ? "" : "shadow-sm border border-strong focus:outline-none"} ${
disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-transparent-hover"
} ${buttonClassName}`}
onClick={handleMenuButtonClick}
@ -400,7 +400,7 @@ function SubMenu(props: ICustomSubMenuProps) {
{({ active }) => (
<div
className={cn(
"w-full select-none rounded-sm px-1 py-1.5 text-left text-secondary flex items-center justify-between cursor-pointer",
"flex w-full cursor-pointer items-center justify-between rounded-sm px-1 py-1.5 text-left text-secondary select-none",
{
"bg-layer-transparent-hover": active && !disabled,
"text-placeholder": disabled,
@ -462,7 +462,7 @@ function MenuItem(props: ICustomMenuItemProps) {
<button
type="button"
className={cn(
"w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary",
"w-full truncate rounded-sm px-1 py-1.5 text-left text-secondary select-none",
{
"bg-layer-transparent-hover": active && !disabled,
"text-placeholder": disabled,
@ -492,7 +492,7 @@ function SubMenuTrigger(props: ICustomSubMenuTriggerProps) {
{({ active }) => (
<div
className={cn(
"w-full select-none rounded-sm px-1 py-1.5 text-left text-secondary flex items-center justify-between",
"flex w-full items-center justify-between rounded-sm px-1 py-1.5 text-left text-secondary select-none",
{
"bg-layer-transparent-hover": active && !disabled,
"text-placeholder": disabled,

14
packages/ui/src/dropdowns/custom-search-select.tsx
View file

@ -146,14 +146,14 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
<Combobox.Options data-prevent-outside-click static>
<div
className={cn(
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 py-2.5 text-11 focus:outline-none min-w-48 whitespace-nowrap z-30",
"z-30 my-1 min-w-48 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 py-2.5 text-11 whitespace-nowrap focus:outline-none",
optionsClassName
)}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle px-2 mx-2">
<div className="mx-2 flex items-center gap-1.5 rounded-sm border border-subtle px-2">
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
@ -164,7 +164,7 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
/>
</div>
<div
className={cn("mt-2 px-2 space-y-1 overflow-y-scroll vertical-scrollbar scrollbar-xs", {
className={cn("vertical-scrollbar mt-2 scrollbar-xs space-y-1 overflow-y-scroll px-2", {
"max-h-96": maxHeight === "2xl",
"max-h-80": maxHeight === "xl",
"max-h-60": maxHeight === "lg",
@ -181,10 +181,10 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
value={option.value}
className={({ active }) =>
cn(
"w-full truncate flex items-center justify-between gap-2 rounded-sm px-1 py-1.5 cursor-pointer select-none",
"flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
{
"bg-layer-transparent-hover": active,
"text-placeholder opacity-60 cursor-not-allowed": option.disabled,
"cursor-not-allowed text-placeholder opacity-60": option.disabled,
}
)
}
@ -213,10 +213,10 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
</Combobox.Option>
))
) : (
<p className="text-placeholder italic py-1 px-1.5">{noResultsMessage}</p>
<p className="px-1.5 py-1 text-placeholder italic">{noResultsMessage}</p>
)
) : (
<p className="text-placeholder italic py-1 px-1.5">Loading...</p>
<p className="px-1.5 py-1 text-placeholder italic">Loading...</p>
)}
</div>
{footerOption}

8
packages/ui/src/dropdowns/custom-select.tsx
View file

@ -86,7 +86,7 @@ function CustomSelect(props: ICustomSelectProps) {
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 text-11 rounded ${
className={`flex items-center justify-between gap-1 rounded text-11 ${
disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-transparent-hover"
} ${customButtonClassName}`}
onClick={toggleDropdown}
@ -122,7 +122,7 @@ function CustomSelect(props: ICustomSelectProps) {
<Combobox.Options data-prevent-outside-click>
<div
className={cn(
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 focus:outline-none min-w-48 whitespace-nowrap z-30",
"z-30 my-1 min-w-48 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap focus:outline-none",
optionsClassName
)}
ref={setPopperElement}
@ -166,7 +166,7 @@ function Option(props: ICustomSelectItemProps) {
value={value}
className={({ active }) =>
cn(
"cursor-pointer select-none truncate rounded-sm px-1 py-1.5 text-secondary flex items-center justify-between gap-2",
"flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none",
{
"bg-layer-transparent-hover": active,
},
@ -176,7 +176,7 @@ function Option(props: ICustomSelectItemProps) {
onClick={handleClick}
>
{({ selected }) => (
<div className="flex items-center justify-between gap-2 w-full">
<div className="flex w-full items-center justify-between gap-2">
{children}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</div>

2
packages/ui/src/favorite-star.tsx
View file

@ -20,7 +20,7 @@ export function FavoriteStar(props: Props) {
const { buttonClassName, iconClassName, onClick, selected } = props;
return (
<button type="button" className={cn("h-4 w-4 grid place-items-center", buttonClassName)} onClick={onClick}>
<button type="button" className={cn("grid h-4 w-4 place-items-center", buttonClassName)} onClick={onClick}>
<Star
className={cn(
"h-4 w-4 text-tertiary transition-all",

12
packages/ui/src/form-fields/checkbox.tsx
View file

@ -28,7 +28,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
} = props;
return (
<div className={cn("relative flex-shrink-0 flex gap-2", containerClassName)}>
<div className={cn("relative flex flex-shrink-0 gap-2", containerClassName)}>
<input
id={id}
ref={ref}
@ -36,10 +36,10 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
name={name}
checked={checked}
className={cn(
"appearance-none shrink-0 size-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-accent-strong cursor-pointer",
"size-4 shrink-0 cursor-pointer appearance-none rounded-[3px] border focus:outline-1 focus:outline-offset-4 focus:outline-accent-strong",
{
"border-subtle bg-layer-1 cursor-not-allowed": disabled,
"border-strong hover:border-strong-1 bg-transparent": !disabled,
"cursor-not-allowed border-subtle bg-layer-1": disabled,
"border-strong bg-transparent hover:border-strong-1": !disabled,
"border-accent-strong-40 hover:border-accent-strong-40 bg-accent-primary hover:bg-accent-primary/80":
!disabled && (checked || indeterminate),
@ -52,7 +52,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
/>
<svg
className={cn(
"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none hidden text-on-color",
"pointer-events-none absolute top-1/2 left-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 p-0.5 text-on-color outline-none",
{
block: checked,
"text-placeholder opacity-40": disabled,
@ -71,7 +71,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
</svg>
<svg
className={cn(
"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none stroke-white hidden",
"pointer-events-none absolute top-1/2 left-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 stroke-white p-0.5 outline-none",
{
"stroke-placeholder opacity-40": disabled,
block: indeterminate && !checked,

2
packages/ui/src/form-fields/input-color-picker.tsx
View file

@ -58,7 +58,7 @@ export function InputColorPicker(props: InputColorPickerProps) {
style={style}
/>
<Popover as="div" className="absolute right-1 top-1/2 z-10 -translate-y-1/2">
<Popover as="div" className="absolute top-1/2 right-1 z-10 -translate-y-1/2">
{() => (
<>
<Popover.Button as={React.Fragment}>

2
packages/ui/src/form-fields/input.tsx
View file

@ -35,7 +35,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
type={type}
name={name}
className={cn(
"block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
"placeholder-tertiary block rounded-md border-subtle-1 bg-layer-2 text-13 focus:outline-none",
{
"rounded-md border-[0.5px]": mode === "primary",
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":

2
packages/ui/src/form-fields/password/indicator.tsx
View file

@ -35,7 +35,7 @@ export function PasswordStrengthIndicator({
<div className={cn("space-y-3")}>
{/* Strength Indicator */}
<div className="space-y-2">
<div className="flex gap-1 w-full transition-all duration-300 ease-linear">
<div className="flex w-full gap-1 transition-all duration-300 ease-linear">
{[0, 1, 2].map((fragmentIndex) => (
<div
key={fragmentIndex}

10
packages/ui/src/form-fields/password/password-input.tsx
View file

@ -39,7 +39,7 @@ export function PasswordInput({
value={value}
onChange={(e) => onChange(e.target.value)}
className={cn(
"w-full px-3 py-2 pr-10 text-secondary border rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
"w-full rounded-md border bg-surface-1 px-3 py-2 pr-10 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
{
"border-strong": !error,
"border-danger-strong": error,
@ -54,19 +54,19 @@ export function PasswordInput({
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute inset-y-0 right-0 pr-3 flex items-center text-secondary hover:text-primary transition-colors duration-200"
className="absolute inset-y-0 right-0 flex items-center pr-3 text-secondary transition-colors duration-200 hover:text-primary"
>
<div className="relative w-4 h-4">
<div className="relative h-4 w-4">
<Eye
className={cn(
"absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
showPassword ? "opacity-0 scale-75 rotate-12" : "opacity-100 scale-100 rotate-0"
showPassword ? "scale-75 rotate-12 opacity-0" : "scale-100 rotate-0 opacity-100"
)}
/>
<EyeClosed
className={cn(
"absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
showPassword ? "opacity-100 scale-100 rotate-0" : "opacity-0 scale-75 -rotate-12"
showPassword ? "scale-100 rotate-0 opacity-100" : "scale-75 -rotate-12 opacity-0"
)}
/>
</div>

2
packages/ui/src/form-fields/root.tsx
View file

@ -36,7 +36,7 @@ export function FormField({ label, htmlFor, children, className, optional = fals
<div className={cn("flex flex-col gap-1.5", className)}>
<Label htmlFor={htmlFor}>
{label}
{optional && <span className="text-placeholder text-13"> (optional)</span>}
{optional && <span className="text-13 text-placeholder"> (optional)</span>}
</Label>
{children}
</div>

4
packages/ui/src/header/header.tsx
View file

@ -48,7 +48,7 @@ function LeftItem(props: HeaderProps) {
return (
<div
className={cn(
"flex flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap max-w-[80%] flex-grow",
"flex max-w-[80%] flex-grow flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap",
props.className
)}
>
@ -63,7 +63,7 @@ function RightItem(props: HeaderProps) {
return (
<div
className={cn(
"flex justify-end gap-2 w-auto items-center",
"flex w-auto items-center justify-end gap-2",
{
"items-baseline": variant === EHeaderVariant.TERNARY,
},

10
packages/ui/src/link/block.tsx
View file

@ -28,13 +28,13 @@ export function LinkItemBlock(props: TLinkItemBlockProps) {
return (
<div
onClick={onClick}
className="cursor-pointer group flex items-center bg-surface-1 px-4 w-[230px] h-[56px] border-[0.5px] border-subtle rounded-md gap-4"
className="group flex h-[56px] w-[230px] cursor-pointer items-center gap-4 rounded-md border-[0.5px] border-subtle bg-surface-1 px-4"
>
<div className="flex-shrink-0 size-8 rounded-sm p-2 bg-surface-2 grid place-items-center">
<div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-surface-2 p-2">
<Icon className="size-4 stroke-2 text-tertiary group-hover:text-primary" />
</div>
<div className="flex-1 truncate">
<div className="text-13 font-medium truncate">{title}</div>
<div className="truncate text-13 font-medium">{title}</div>
{createdAt && <div className="text-11 font-medium text-placeholder">{calculateTimeAgo(createdAt)}</div>}
</div>
{menuItems && (
@ -48,7 +48,7 @@ export function LinkItemBlock(props: TLinkItemBlockProps) {
e.stopPropagation();
item.action();
}}
className={cn("flex items-center gap-2 w-full ", {
className={cn("flex w-full items-center gap-2", {
"text-placeholder": item.disabled,
})}
disabled={item.disabled}
@ -58,7 +58,7 @@ export function LinkItemBlock(props: TLinkItemBlockProps) {
<h5>{item.title}</h5>
{item.description && (
<p
className={cn("text-tertiary whitespace-pre-line", {
className={cn("whitespace-pre-line text-tertiary", {
"text-placeholder": item.disabled,
})}
>

6
packages/ui/src/modals/alert-modal.tsx
View file

@ -76,11 +76,11 @@ export function AlertModalCore(props: Props) {
return (
<ModalCore isOpen={isOpen} handleClose={handleClose} position={position} width={width}>
<div className="p-5 flex flex-col sm:flex-row items-center sm:items-start gap-4">
<div className="flex flex-col items-center gap-4 p-5 sm:flex-row sm:items-start">
{!hideIcon && (
<span
className={cn(
"flex-shrink-0 grid place-items-center rounded-full size-12 sm:size-10",
"grid size-12 flex-shrink-0 place-items-center rounded-full sm:size-10",
VARIANT_CLASSES[variant]
)}
>
@ -92,7 +92,7 @@ export function AlertModalCore(props: Props) {
<p className="mt-1 text-13 text-secondary">{content}</p>
</div>
</div>
<div className="px-5 py-4 flex flex-col-reverse sm:flex-row sm:justify-end gap-2 border-t-[0.5px] border-subtle">
<div className="flex flex-col-reverse gap-2 border-t-[0.5px] border-subtle px-5 py-4 sm:flex-row sm:justify-end">
<Button variant="secondary" onClick={handleClose}>
{secondaryButtonText}
</Button>

2
packages/ui/src/modals/modal-core.tsx
View file

@ -57,7 +57,7 @@ export function ModalCore(props: Props) {
>
<Dialog.Panel
className={cn(
"relative transform rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all w-full",
"relative w-full transform rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all",
width,
className
)}

4
packages/ui/src/oauth/oauth-button.tsx
View file

@ -23,14 +23,14 @@ const OAuthButton = React.forwardRef(function OAuthButton(
<button
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-center gap-2 rounded-md border border-strong px-4 py-2.5 text-13 font-medium text-primary duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300",
"bg-onboarding-background-200 hover:bg-onboarding-background-300 flex h-9 w-full items-center justify-center gap-2 rounded-md border border-strong px-4 py-2.5 text-13 font-medium text-primary duration-300",
className
)}
{...rest}
>
<div className="flex flex-shrink-0 items-center justify-center">{icon}</div>
{!compact && (
<span className="flex flex-grow items-center justify-center transition-opacity duration-300 text-body-sm-regular">
<span className="flex flex-grow items-center justify-center text-body-sm-regular transition-opacity duration-300">
{text}
</span>
)}

2
packages/ui/src/popovers/popover-menu.stories.tsx
View file

@ -31,7 +31,7 @@ const meta: Meta<typeof PopoverMenu<TPopoverMenu>> = {
],
keyExtractor: (item, index: number) => `${item.id}-${index}`,
render: (item: TPopoverMenu) => (
<div className="text-13 text-gray-600 hover:text-gray-700 rounded-xs cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize">
<div className="text-gray-600 hover:text-gray-700 hover:bg-gray-200 cursor-pointer rounded-xs px-1.5 py-0.5 text-13 capitalize transition-all">
{item.name}
</div>
),

6
packages/ui/src/popovers/popover.stories.tsx
View file

@ -23,12 +23,12 @@ type Story = StoryObj<typeof Popover>;
// components
const RenderCustomPopoverComponent = (
<div className="space-y-2">
<div className="text-13 font-medium text-gray-500">Your custom component</div>
<div className="text-gray-500 text-13 font-medium">Your custom component</div>
<div>
{["option1", "option2", "option3"].map((option) => (
<div
key={option}
className="text-13 text-gray-600 hover:text-gray-700 rounded-xs cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize"
className="text-gray-600 hover:text-gray-700 hover:bg-gray-200 cursor-pointer rounded-xs px-1.5 py-0.5 text-13 capitalize transition-all"
>
{option}
</div>
@ -50,7 +50,7 @@ export const CustomMenuButton: Story = {
args: {
popperPosition: "bottom-start",
button: (
<div className="p-2 text-13 font-medium rounded-sm bg-gray-100 hover:bg-gray-200 transition-all">
<div className="bg-gray-100 hover:bg-gray-200 rounded-sm p-2 text-13 font-medium transition-all">
Custom Menu Button
</div>
),

4
packages/ui/src/popovers/popover.tsx
View file

@ -51,7 +51,7 @@ export function Popover(props: TPopover) {
ref={popoverButtonRef as Ref<HTMLButtonElement>}
className={cn(
{
"flex justify-center items-center text-14 h-6 w-6 rounded-sm transition-all bg-surface-2 hover:bg-layer-1":
"flex h-6 w-6 items-center justify-center rounded-sm bg-surface-2 text-14 transition-all hover:bg-layer-1":
!button,
},
buttonClassName
@ -75,7 +75,7 @@ export function Popover(props: TPopover) {
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
className={cn("absolute left-0 top-full z-20 w-screen max-w-xs mt-2", panelClassName)}
className={cn("absolute top-full left-0 z-20 mt-2 w-screen max-w-xs", panelClassName)}
>
{children}
</HeadlessReactPopover.Panel>

2
packages/ui/src/progress/linear-progress-indicator.tsx
View file

@ -55,7 +55,7 @@ export function LinearProgressIndicator({
"h-[14px]": size === "xl",
})}
>
<div className={cn("flex h-full w-full gap-[1.5px] p-[2px] bg-surface-2 rounded-xs", className)}>{bars}</div>
<div className={cn("flex h-full w-full gap-[1.5px] rounded-xs bg-surface-2 p-[2px]", className)}>{bars}</div>
</div>
);
}

2
packages/ui/src/progress/radial-progress.tsx
View file

@ -25,7 +25,7 @@ export function RadialProgressBar(props: IRadialProgressBar) {
return (
<div className="relative h-4 w-4">
<svg className="absolute left-0 top-0" viewBox="0 0 100 100">
<svg className="absolute top-0 left-0" viewBox="0 0 100 100">
<circle
className={"stroke-current opacity-10"}
cx="50"

4
packages/ui/src/scroll-area.tsx
View file

@ -41,7 +41,7 @@ export function ScrollArea(props: TScrollAreaProps) {
<RadixScrollArea.Viewport className="size-full">{children}</RadixScrollArea.Viewport>
<RadixScrollArea.Scrollbar
className={cn(
"group/track flex touch-none select-none bg-transparent transition-colors duration-150 ease-out",
"group/track flex touch-none bg-transparent transition-colors duration-150 ease-out select-none",
sizeStyles[size]
)}
orientation="vertical"
@ -55,7 +55,7 @@ export function ScrollArea(props: TScrollAreaProps) {
</RadixScrollArea.Scrollbar>
<RadixScrollArea.Scrollbar
className={cn(
"group/track flex touch-none select-none bg-transparent transition-colors duration-150 ease-out",
"group/track flex touch-none bg-transparent transition-colors duration-150 ease-out select-none",
sizeStyles[size]
)}
orientation="horizontal"

2
packages/ui/src/sortable/sortable.stories.tsx
View file

@ -23,7 +23,7 @@ const meta: Meta<typeof Sortable<StoryItem>> = {
],
render: (item: StoryItem) => (
// <Draggable data={item} className="rounded-lg">
<div className="border ">{item.name}</div>
<div className="border">{item.name}</div>
// </Draggable>
),
onChange: (data) => console.log(data.map(({ id }) => id)),

2
packages/ui/src/tables/table.tsx
View file

@ -25,7 +25,7 @@ export function Table<T>(props: TTableData<T>) {
} = props;
return (
<table className={cn("table-auto w-full overflow-hidden whitespace-nowrap", tableClassName)}>
<table className={cn("w-full table-auto overflow-hidden whitespace-nowrap", tableClassName)}>
<thead className={cn("divide-y divide-subtle", tHeadClassName)}>
<tr className={cn("divide-x divide-subtle text-13 text-primary", tHeadTrClassName)}>
{columns.map((column) => (

10
packages/ui/src/tabs/tab-list.tsx
View file

@ -44,7 +44,7 @@ function TabListInner({ tabs, tabListClassName, tabClassName, size = "md", selec
<Tab.List
as="div"
className={cn(
"flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-13 p-0.5 bg-layer-1",
"flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md bg-layer-1 p-0.5 text-13",
tabListClassName
)}
>
@ -52,12 +52,12 @@ function TabListInner({ tabs, tabListClassName, tabClassName, size = "md", selec
<Tab
className={({ selected }) =>
cn(
"flex items-center justify-center p-1 min-w-fit w-full font-medium text-primary outline-none focus:outline-none cursor-pointer transition-all rounded-sm",
"flex w-full min-w-fit cursor-pointer items-center justify-center rounded-sm p-1 font-medium text-primary transition-all outline-none focus:outline-none",
(selectedTab ? selectedTab === tab.key : selected)
? "bg-layer-transparent-active text-primary shadow-sm"
? "shadow-sm bg-layer-transparent-active text-primary"
: tab.disabled
? "text-placeholder cursor-not-allowed"
: "text-placeholder hover:text-tertiary hover:bg-layer-transparent-hover",
? "cursor-not-allowed text-placeholder"
: "text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary",
{
"text-11": size === "sm",
"text-13": size === "md",

4
packages/ui/src/tabs/tabs.tsx
View file

@ -69,9 +69,9 @@ export function Tabs(props: TTabsProps) {
};
return (
<div className="flex flex-col w-full h-full">
<div className="flex h-full w-full flex-col">
<Tab.Group defaultIndex={currentTabIndex(selectedTab)}>
<div className={cn("flex flex-col w-full h-full gap-2", containerClassName)}>
<div className={cn("flex h-full w-full flex-col gap-2", containerClassName)}>
<div className={cn("flex w-full items-center gap-4", tabListContainerClassName)}>
<TabList
tabs={tabs}

4
packages/ui/src/tooltip/tooltip.tsx
View file

@ -75,7 +75,7 @@ export function Tooltip({
if (!shouldRender) {
return (
<div ref={toolTipRef} className="h-full flex items-center">
<div ref={toolTipRef} className="flex h-full items-center">
{children}
</div>
);
@ -89,7 +89,7 @@ export function Tooltip({
content={
<div
className={cn(
"relative block z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-surface-1 p-2 text-11 text-secondary shadow-md",
"shadow-md relative z-50 block max-w-xs gap-1 overflow-hidden rounded-md bg-surface-1 p-2 text-11 break-words text-secondary",
{
hidden: isMobile,
},

2
packages/ui/src/typography/sub-heading.tsx
View file

@ -15,7 +15,7 @@ type Props = {
function SubHeading({ children, className, noMargin }: Props) {
return (
<h3 className={cn("text-18 font-medium text-secondary block leading-7", !noMargin && "mb-2", className)}>
<h3 className={cn("block text-18 leading-7 font-medium text-secondary", !noMargin && "mb-2", className)}>
{children}
</h3>
);