@rebasepro/ui 0.10.0 → 0.10.1-canary.0a881d4

package/dist/styles.d.ts

@@ -1,10 +1,10 @@
 export declare const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-900 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-900/60";
+export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-white/[0.07] focus:bg-surface-accent-100/70";
 export declare const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
-export declare const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-black/30";
-export declare const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
-export declare const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
-export declare const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
+export declare const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-white/[0.055]";
+export declare const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-white/0";
+export declare const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03]";
+export declare const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
 export declare const defaultBorderMixin = "border-surface-200 dark:border-surface-700/60 ";
 export declare const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
 export declare const cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";

package/dist/views/CollectionView/resolveTitleProperty.d.ts

@@ -0,0 +1,11 @@
+import type { CollectionPropertyConfig } from "./CollectionViewTypes";
+/**
+ * Pick the property that acts as a row's title.
+ *
+ * Headless mirror of the ranking in `@rebasepro/common`: identifiers are kept
+ * out of the title slot structurally (the id property, images, hidden fields),
+ * and among what is left a plain text field beats a description, an enum or a
+ * relation. Falls back to the id property only when a collection has nothing
+ * else to show.
+ */
+export declare function resolveTitlePropertyKey(order: string[], properties: Record<string, CollectionPropertyConfig>, idProperty: string, titleProperty?: string): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.10.1-canary.0a881d4",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"

package/src/components/Alert.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cls } from "../util";
+import { AlertCircleIcon, AlertTriangleIcon, CheckCircleIcon, InfoIcon, XIcon } from "../icons";
 
 export interface AlertProps {
     children: React.ReactNode;
@@ -15,27 +16,61 @@ export interface AlertProps {
 const getSizeClasses = (size: "small" | "medium" | "large") => {
     switch (size) {
         case "small":
-            return "px-4 py-1";
+            return "px-3 py-1.5 text-xs gap-2 rounded-md";
         case "large":
-            return "px-4 py-4";
+            return "px-4 py-3.5 text-sm gap-3 rounded-lg";
         case "medium":
         default:
-            return "px-4 py-2";
+            return "px-3.5 py-2.5 text-sm gap-2.5 rounded-lg";
     }
 }
+
+const getIconSize = (size: "small" | "medium" | "large") => size === "small" ? 16 : 18;
+
 const getColorClasses = (severity: string) => {
     switch (severity) {
         case "error":
-            return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900 border-l-[3px] border-l-red-500";
+            return "bg-red-500/8 dark:bg-red-500/12 text-red-800 dark:text-red-200 border border-red-500/20 dark:border-red-500/25";
+        case "warning":
+            return "bg-amber-500/8 dark:bg-amber-500/12 text-amber-800 dark:text-amber-200 border border-amber-500/20 dark:border-amber-500/25";
+        case "info":
+            return "bg-blue-500/8 dark:bg-blue-500/12 text-blue-800 dark:text-blue-200 border border-blue-500/20 dark:border-blue-500/25";
+        case "success":
+            return "bg-emerald-500/8 dark:bg-emerald-500/12 text-emerald-800 dark:text-emerald-200 border border-emerald-500/20 dark:border-emerald-500/25";
+        case "base":
+        default:
+            return "bg-surface-accent-500/8 dark:bg-surface-accent-400/10 text-surface-accent-800 dark:text-surface-accent-100 border border-surface-accent-500/15 dark:border-surface-accent-400/20";
+    }
+};
+
+const getIconColor = (severity: string) => {
+    switch (severity) {
+        case "error":
+            return "text-red-500 dark:text-red-400";
         case "warning":
-            return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900 border-l-[3px] border-l-amber-500";
+            return "text-amber-500 dark:text-amber-400";
         case "info":
-            return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900 border-l-[3px] border-l-blue-500";
+            return "text-blue-500 dark:text-blue-400";
         case "success":
-            return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900 border-l-[3px] border-l-emerald-500";
+            return "text-emerald-500 dark:text-emerald-400";
         case "base":
         default:
-            return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900 border-l-[3px] border-l-surface-accent-400";
+            return "text-surface-accent-500 dark:text-surface-accent-400";
+    }
+};
+
+const getIcon = (severity: string, size: number, className: string) => {
+    switch (severity) {
+        case "error":
+            return <AlertCircleIcon size={size} className={className}/>;
+        case "warning":
+            return <AlertTriangleIcon size={size} className={className}/>;
+        case "success":
+            return <CheckCircleIcon size={size} className={className}/>;
+        case "info":
+        case "base":
+        default:
+            return <InfoIcon size={size} className={className}/>;
     }
 };
 
@@ -50,6 +85,7 @@ export const Alert: React.FC<AlertProps> = ({
                                                 style
                                             }) => {
     const classes = getColorClasses(color);
+    const iconSize = getIconSize(size);
 
     return (
         <div
@@ -57,19 +93,26 @@ export const Alert: React.FC<AlertProps> = ({
             className={cls(
                 getSizeClasses(size),
                 "w-full",
-                "font-medium",
-                "rounded-lg flex items-center gap-2",
+                "font-medium leading-snug",
+                "flex items-start",
                 classes,
                 outerClassName)}>
-            <div className={cls("grow", className)}>{children}</div>
+            <span className={cls("shrink-0 mt-px", getIconColor(color))}>
+                {getIcon(color, iconSize, "")}
+            </span>
+            <div className={cls("grow min-w-0 self-center", className)}>{children}</div>
+            {action}
             {onDismiss && (
                 <button
-                    className="text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400"
+                    type="button"
+                    aria-label="Dismiss"
+                    className={cls(
+                        "shrink-0 rounded p-0.5 opacity-60 transition-opacity hover:opacity-100",
+                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-current/40")}
                     onClick={onDismiss}>
-                    &times;
+                    <XIcon size={iconSize - 2}/>
                 </button>
             )}
-            {action}
         </div>
     );
 };

package/src/components/Autocomplete.tsx

@@ -85,7 +85,7 @@ export const AutocompleteItem = React.memo(function AutocompleteItem({
 
     return (
         <div
-            className={cls("flex w-full items-center h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className)}
+            className={cls("flex w-full items-center h-[48px] cursor-pointer transition-colors duration-150 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className)}
             onClick={onClick}>
             {children}
         </div>

package/src/components/Avatar.tsx

@@ -39,7 +39,7 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
             className={cls(
                 "rounded-full flex items-center justify-center overflow-hidden",
                 "p-1 w-12 h-12 min-w-12 min-h-12",
-                hover && "hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700",
+                hover && "transition-colors duration-150 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
                 outerClassName
             )}
         >
@@ -59,7 +59,7 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
                     className={cls(
                         "bg-surface-accent-100 dark:bg-surface-accent-800",
                         "flex items-center justify-center",
-                        "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full",
+                        "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-text-primary-dark rounded-full",
                         className
                     )}
                 >

package/src/components/BooleanSwitch.tsx

@@ -73,7 +73,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                 key={"knob"}
                 className={cls(
                     "block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm",
-                    disabled ? "bg-surface-accent-300 dark:bg-surface-700" : (value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400"),
+                    disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : (value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400"),
                     {
                         "w-[21px] h-[21px]": size === "medium" || size === "large",
                         "w-[19px] h-[19px]": size === "small",

package/src/components/Checkbox.tsx

@@ -18,10 +18,10 @@ export interface CheckboxProps {
 }
 
 const sizeClasses = {
-    large: "w-6 h-6 rounded flex items-center justify-center",
-    medium: "w-5 h-5 rounded flex items-center justify-center",
-    small: "w-4 h-4 rounded flex items-center justify-center",
-    smallest: "w-4 h-4 rounded flex items-center justify-center"
+    large: "w-6 h-6 rounded-md flex items-center justify-center",
+    medium: "w-5 h-5 rounded-md flex items-center justify-center",
+    small: "w-4 h-4 rounded-md flex items-center justify-center",
+    smallest: "w-4 h-4 rounded-md flex items-center justify-center"
 };
 
 const outerSizeClasses = {
@@ -70,6 +70,7 @@ export const Checkbox = React.memo(({
             disabled={disabled}
             aria-label={ariaLabel}
             aria-checked={indeterminate ? "mixed" : isChecked}
+            className="rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
             onCheckedChange={disabled ? undefined : onCheckedChange}>
 
             <div className={cls(

package/src/components/ColorPicker.tsx

@@ -61,8 +61,8 @@ export function ColorPicker({
                     disabled={disabled}
                     onClick={() => onChange(undefined)}
                     className={cls(
-                        "flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors",
-                        "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800",
+                        "flex items-center gap-2 px-2 py-1 rounded-lg text-sm transition-colors duration-150",
+                        "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
                         disabled && "opacity-50 cursor-not-allowed",
                         !value && "bg-surface-accent-100 dark:bg-surface-accent-800 font-medium"
                     )}
@@ -101,7 +101,7 @@ export function ColorPicker({
                                     swatchSize,
                                     "rounded-full transition-all flex items-center justify-center",
                                     "hover:scale-110 hover:shadow-md",
-                                    "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1",
+                                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1",
                                     disabled && "opacity-50 cursor-not-allowed hover:scale-100",
                                     isSelected && "ring-2 ring-primary ring-offset-1"
                                 )}

package/src/components/Container.tsx

@@ -38,7 +38,7 @@ const ContainerInner: ForwardRefRenderFunction<HTMLDivElement, ContainerProps> =
     return (
         <div
             ref={ref}
-            className={cls("mx-auto px-3 md:px-4 lg-px-6",
+            className={cls("mx-auto px-3 md:px-4 lg:px-6",
                 classForMaxWidth,
                 className)}
             style={style}>

package/src/components/Dialog.tsx

@@ -125,7 +125,7 @@ export const Dialog = ({
                                 "outline-none focus:outline-none",
                                 fullWidth && !fullScreen ? "w-11/12" : undefined,
                                 fullHeight && !fullScreen ? "h-full" : undefined,
-                                "text-surface-accent-900 dark:text-white",
+                                "text-text-primary dark:text-text-primary-dark",
                                 "justify-center items-center",
                                 fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg",
                                 "ease-in-out duration-200",

package/src/components/ErrorBoundary.tsx

@@ -89,7 +89,7 @@ showDetails: false });
         return (
             <div className="flex flex-col m-2">
                 <div className="flex items-center m-2">
-                    <AlertCircleIcon className={"text-red-500"} size={iconSize.small}/>
+                    <AlertCircleIcon className={"text-red-500 dark:text-red-400"} size={iconSize.small}/>
                     <div className="ml-4">Error</div>
                 </div>
                 <Typography variant={"caption"}>
@@ -118,7 +118,7 @@ showDetails: false });
             )}>
                 <div className="flex flex-col items-center max-w-md px-6 py-10 text-center">
                     <div className={cls(
-                        "flex items-center justify-center w-14 h-14 rounded-2xl mb-6",
+                        "flex items-center justify-center w-14 h-14 rounded-xl mb-6",
                         isPermission
                             ? "bg-amber-100 dark:bg-amber-900/30"
                             : "bg-red-100 dark:bg-red-900/30"
@@ -181,7 +181,7 @@ showDetails: false });
                             {showDetails && (
                                 <div className={cls(
                                     "mt-3 p-3 rounded-lg text-left text-xs",
-                                    "bg-surface-100 dark:bg-surface-800",
+                                    "bg-surface-100 dark:bg-surface-800/50",
                                     "text-text-secondary dark:text-text-secondary-dark",
                                     "font-mono break-all"
                                 )}>

package/src/components/ExpandablePanel.tsx

@@ -95,7 +95,7 @@ export function ExpandablePanel({
                 <Collapsible.Trigger asChild>
                     <div
                         className={cls(
-                            "rounded-t flex items-center justify-between w-full min-h-[52px]",
+                            "rounded-t-lg flex items-center justify-between w-full min-h-[52px]",
                             "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50",
                             invisible ? "border-b px-2" : "p-4",
                             open ? "py-6" : "py-4",

package/src/components/IconButton.tsx

@@ -16,8 +16,8 @@ export type IconButtonProps<C extends React.ElementType> =
 }
 
 const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-[1.04] active:scale-95 transition-transform";
-const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
-const colorClasses = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
+const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150";
+const colorClasses = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-accent-300";
 const sizeClasses = {
     medium: "w-10 !h-10 min-w-10 min-h-10",
     small: "w-8 !h-8 min-w-8 min-h-8",

package/src/components/InfoLabel.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { cls } from "../util";
 
 const colorClasses = {
-    info: "bg-sky-200 dark:bg-teal-900",
-    warn: "bg-orange-200 dark:bg-yellow-950"
+    info: "bg-blue-500/8 dark:bg-blue-500/12 text-blue-800 dark:text-blue-200 border border-blue-500/20 dark:border-blue-500/25",
+    warn: "bg-amber-500/8 dark:bg-amber-500/12 text-amber-800 dark:text-amber-200 border border-amber-500/20 dark:border-amber-500/25"
 }
 
 export function InfoLabel({
@@ -16,7 +16,7 @@ export function InfoLabel({
 
     return (
         <div
-            className={cls("my-3 py-2 px-4 rounded-xs", colorClasses[mode])}>
+            className={cls("my-3 py-2 px-4 rounded-lg text-sm font-medium leading-snug", colorClasses[mode])}>
             {children}
         </div>
     )

package/src/components/Menu.tsx

@@ -87,7 +87,7 @@ export const MenuItem = React.memo(({
     const classNames = cls(
         onClick && !disabled && "cursor-pointer",
         disabled && "opacity-50 cursor-not-allowed",
-        "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 flex items-center gap-4",
+        "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 flex items-center gap-4 transition-colors duration-150",
         !disabled && "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900",
         dense ? "px-4 py-1.5" : "px-4 py-2",
         className

package/src/components/Menubar.tsx

@@ -19,7 +19,7 @@ export function Menubar({
     return (
         <MenubarPrimitive.Root
             onSelect={onSelect}
-            className={cls("z-10 flex bg-white dark:bg-surface-900 p-[3px] rounded-sm shadow-sm", className)}>
+            className={cls("z-10 flex bg-white dark:bg-surface-900 p-[3px] rounded-lg shadow-sm", className)}>
             {children}
         </MenubarPrimitive.Root>
     )
@@ -47,7 +47,7 @@ export function MenubarTrigger({
     return (
         <MenubarPrimitive.Trigger
             onSelect={onSelect}
-            className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800",
+            className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded-md text-text-primary dark:text-text-primary-dark text-sm transition-colors duration-150 flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800",
                 className)}>
             {children}
         </MenubarPrimitive.Trigger>
@@ -121,7 +121,7 @@ export function MenubarItem({
     return (
         <MenubarPrimitive.Item
             onSelect={onSelect}
-            className={cls("group text-[13px] leading-none rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+            className={cls("group text-sm leading-none rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 leftPadding ? "pl-5" : "",
                 disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark",
                 className)}
@@ -179,7 +179,7 @@ export function MenubarSubTrigger({
     return (
         <MenubarPrimitive.SubTrigger
             onSelect={onSelect}
-            className={cls("group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+            className={cls("group text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-900 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             {...rest}
         >
@@ -230,7 +230,7 @@ export function MenubarCheckboxItem({
     return (
         <MenubarPrimitive.CheckboxItem
             onSelect={onSelect}
-            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+            className={cls("text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             checked={checked}
             onCheckedChange={onCheckedChange}
@@ -299,7 +299,7 @@ export function MenubarRadioItem({
     return (
         <MenubarPrimitive.RadioItem
             onSelect={onSelect}
-            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
+            className={cls("text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-900 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             value={value}
             {...rest}>

package/src/components/MultiSelect.tsx

@@ -337,9 +337,9 @@ export const MultiSelect = React.forwardRef<
                                                     "cursor-pointer",
                                                     "m-1",
                                                     "ring-offset-transparent",
-                                                    "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2",
+                                                    "p-1 rounded-md aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2",
                                                     "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
-                                                    "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"
+                                                    "cursor-pointer p-2 rounded-md aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"
                                                 )
                                             }
                                         >
@@ -394,9 +394,9 @@ export const MultiSelectItem = React.memo(function MultiSelectItem<T extends Mul
             "cursor-pointer",
             "m-1",
             "ring-offset-transparent",
-            "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2",
+            "p-1 rounded-md aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2",
             "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
-            "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
+            "cursor-pointer p-2 rounded-md aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
             "text-surface-accent-700 dark:text-surface-accent-300",
             className
         )}
@@ -415,7 +415,7 @@ const InnerCheckBox = React.memo(function InnerCheckBox({ checked }: { checked:
         <div
             className={cls(
                 "border-2 relative transition-colors ease-in-out duration-150",
-                "w-4 h-4 rounded flex items-center justify-center",
+                "w-4 h-4 rounded-sm flex items-center justify-center",
                 (checked ? "bg-primary" : "bg-white dark:bg-surface-accent-900"),
                 (checked) ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
                 (checked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200")

package/src/components/Popover.tsx

@@ -87,7 +87,7 @@ export function Popover({
                 onMouseLeave={onMouseLeave}>
 
                 {children}
-                <PopoverPrimitive.Arrow className="fill-white dark:fill-surface-800"/>
+                <PopoverPrimitive.Arrow className="fill-white dark:fill-surface-900"/>
             </PopoverPrimitive.Content>
         </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>;

package/src/components/RadioGroup.tsx

@@ -58,13 +58,13 @@ const RadioGroupItem = React.forwardRef<
         <RadioGroupPrimitive.Item
             ref={ref}
             className={cls(
-                "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                "aspect-square h-4 w-4 rounded-full border border-primary text-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                 className
             )}
             {...props}
         >
             <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-                <div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg"/>
+                <div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-full"/>
             </RadioGroupPrimitive.Indicator>
         </RadioGroupPrimitive.Item>
     )

package/src/components/Slider.tsx

@@ -48,7 +48,7 @@ function SliderThumb(props: {
                                   className={cls(
                                       "TooltipContent",
                                       "max-w-lg leading-relaxed",
-                                      "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100"
+                                      "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100"
                                   )}>
             {props.props.value?.[props.index]}
         </TooltipPrimitive.Content>

package/src/components/Table.tsx

@@ -19,7 +19,7 @@ export const Table = React.memo(({
                           ...rest
                       }: TableProps) => (
     <table
-        className={cls("text-left text-surface-900 dark:text-white rounded-lg overflow-x-auto", className)}
+        className={cls("text-left text-text-primary dark:text-text-primary-dark rounded-lg overflow-x-auto", className)}
         style={style}
         {...rest}
     >
@@ -88,7 +88,7 @@ export const TableRow = React.memo(({
         style={style}
         className={cls(
             "bg-white dark:bg-surface-900",
-            onClick ? "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer" : "",
+            onClick ? "transition-colors duration-150 hover:bg-primary/5 cursor-pointer" : "",
             className
         )}
         {...rest}

package/src/components/Tabs.tsx

@@ -92,7 +92,7 @@ export function Tabs({
                     className={cls(
                         "absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6",
                         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400",
-                        !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800",
+                        !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-800",
                         "bg-surface-50 dark:bg-surface-900 border shadow-sm", defaultBorderMixin
                     )}
                 >
@@ -125,7 +125,7 @@ msOverflowStyle: "none" }}
                     className={cls(
                         "absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6",
                         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400",
-                        !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800",
+                        !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-800",
                         "bg-surface-50 dark:bg-surface-900 border shadow-sm", defaultBorderMixin
                     )}
                 >
@@ -161,9 +161,9 @@ export function Tab({
                 "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-all",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
                 "disabled:pointer-events-none disabled:opacity-50",
-                variant === "standard" && "rounded-sm px-3 py-1 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50",
+                variant === "standard" && "rounded-md px-3 py-1 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50",
                 variant === "boxy" && cls(
-                    "flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 border-r border-surface-200 dark:border-surface-800 cursor-pointer text-[12px] font-medium transition-colors group relative box-border overflow-hidden",
+                    "flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 border-r border-surface-200 dark:border-surface-800 cursor-pointer text-xs font-medium transition-colors group relative box-border overflow-hidden",
                     "border-b-2 border-b-transparent",
                     "data-[state=active]:bg-surface-50 dark:data-[state=active]:bg-surface-900",
                     "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark",
@@ -171,8 +171,8 @@ export function Tab({
                     "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-100 dark:hover:bg-surface-800"
                 ),
                 variant === "pill" && cls(
-                    "px-2 py-0.5 rounded text-[10px] font-medium transition-colors",
-                    "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-blue-400",
+                    "px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors",
+                    "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-primary",
                     "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"
                 ),
                 className,

package/src/components/ToggleButtonGroup.tsx

@@ -53,10 +53,10 @@ export function ToggleButtonGroup<T extends string = string>({
                     aria-pressed={value === option.value}
                     aria-disabled={option.disabled || undefined}
                     className={cls(
-                        "flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors",
+                        "flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
                         value === option.value
-                            ? "bg-white dark:bg-surface-900 text-primary dark:text-primary-300 shadow-sm"
-                            : "text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700",
+                            ? "bg-white dark:bg-surface-700 text-primary dark:text-primary-300 shadow-sm"
+                            : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-200 dark:hover:bg-surface-800",
                         option.disabled && "opacity-50 cursor-not-allowed"
                     )}
                 >

package/src/components/Tooltip.tsx

@@ -72,7 +72,7 @@ onOpenChange } : {})} defaultOpen={defaultOpen}>
                     <TooltipPrimitive.Content
                         className={cls("TooltipContent",
                             "max-w-lg leading-relaxed",
-                            "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
+                            "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
                             tooltipClassName)}
                         style={tooltipStyle}
                         sideOffset={sideOffset === undefined ? 4 : sideOffset}

package/src/components/common/SelectInputLabel.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { cls } from "../../util";
 
 export function SelectInputLabel({ children, error }: { children: React.ReactNode, error?: boolean }) {
-    return <div className={cls("text-sm  font-medium ml-3.5 mb-1",
-        error ? "text-red-500 dark:text-red-600" : "text-surface-accent-500 dark:text-surface-accent-300")}>
+    return <div className={cls("text-sm font-medium ml-3.5 mb-1",
+        error ? "text-red-600 dark:text-red-500" : "text-surface-accent-500 dark:text-surface-accent-300")}>
         {children}
     </div>;
 }