✨ New and Improved Screens (#1151)

packages/ui/src/badge.tsx

@@ -16,7 +16,7 @@ const badgeVariants = cva(
         green: "border-transparent bg-green-500 text-green-50",
       },
       size: {
-        md: "h-5 min-w-5 text-xs px-1.5",
+        md: "h-6 min-w-5 text-xs px-2",
         lg: "h-7 text-sm min-w-7 px-2.5",
       },
     },

packages/ui/src/button.tsx

@@ -7,27 +7,27 @@ import { cn } from "./lib/utils";
 
 const buttonVariants = cva(
   cn(
-    "inline-flex border font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap rounded-md border",
-    "focus-visible:ring-offset-input-background focus-visible:ring-offset-1 focus-visible:ring-2 focus-visible:ring-gray-200",
-    "active:shadow-none",
+    "inline-flex border font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap border",
+    "focus-visible:ring-offset-input-background",
+    "focus:shadow-none",
   ),
   {
     variants: {
       variant: {
         primary:
-          "border-primary-700 shadow-sm bg-primary disabled:bg-gray-400 disabled:border-transparent text-primary-foreground shadow-sm hover:bg-primary-500 active:bg-primary-700",
+          "border-primary-700 bg-primary disabled:bg-gray-400 disabled:border-transparent text-primary-foreground shadow-sm focus:bg-primary-500",
         destructive:
           "bg-destructive shadow-sm text-destructive-foreground focus-visible:ring-offset-1 active:bg-destructive border-destructive hover:bg-destructive/90",
         default:
-          "rounded-md px-3.5 py-2.5 data-[state=open]:shadow-none data-[state=open]:bg-gray-100 active:bg-gray-200 hover:bg-gray-100 bg-gray-50",
+          "ring-1 ring-inset ring-white/25 data-[state=open]:bg-gray-100 focus:border-gray-300 focus:bg-gray-200 hover:bg-gray-100 bg-gray-50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
-          "border-transparent bg-transparent hover:bg-gray-200 active:bg-gray-300",
+          "border-transparent bg-transparent text-gray-800 focus:border-gray-300 focus:bg-gray-200",
         link: "underline-offset-4 border-transparent hover:underline text-primary",
       },
       size: {
-        default: "h-9 px-2.5 gap-x-2.5 text-sm",
+        default: "h-9 px-2.5 pr-3 gap-x-2 text-sm rounded-md",
         sm: "h-7 text-sm px-1.5 gap-x-1.5 rounded-md",
         lg: "h-11 text-base gap-x-3 px-4 rounded-md",
       },

packages/ui/src/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "bg-card text-card-foreground overflow-hidden rounded-lg border shadow-sm",
+      "bg-card text-card-foreground overflow-hidden rounded-lg border-x border-y shadow-sm",
       className,
     )}
     {...props}
@@ -39,7 +39,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "flex items-center gap-x-2.5 text-sm font-semibold sm:text-base",
+      "flex items-center gap-x-2.5 text-base font-semibold",
       className,
     )}
     {...props}
@@ -53,7 +53,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-muted-foreground mt-1 text-sm", className)}
+    className={cn("text-muted-foreground mt-0.5 text-sm", className)}
     {...props}
   />
 ));

packages/ui/src/checkbox.tsx

@@ -12,9 +12,8 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "data-[state=checked]:bg-primary data-[state=checked]:border-primary-600 data-[state=checked]:focus:ring-primary-200 data-[state=checked]:focus:ring-2",
-      "focus-visible:ring-gray-100",
-      "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded border border-gray-200 bg-gray-50 ring-0 disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-primary data-[state=checked]:border-primary-600",
+      "peer inline-flex size-5 shrink-0 items-center justify-center rounded border border-gray-200 bg-gray-50 ring-0 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}

packages/ui/src/icon.tsx

@@ -33,7 +33,7 @@ export function Icon({ children, size, variant }: IconProps) {
     <Slot
       className={cn(
         iconVariants({ size, variant }),
-        "group-[.bg-primary]:text-primary-100 group-[.bg-destructive]:text-destructive-foreground group shrink-0",
+        "group-[.bg-primary]:text-primary-50 group-[.bg-destructive]:text-destructive-foreground group shrink-0",
       )}
     >
       {children}

packages/ui/src/input.tsx

@@ -14,7 +14,7 @@ export type InputProps = Omit<
 const inputVariants = cva(
   cn(
     "w-full focus-visible:border-primary-400 focus-visible:ring-offset-1 focus-visible:outline-none focus-visible:ring-primary-200 focus-visible:ring-1",
-    "border-input placeholder:text-muted-foreground h-9 rounded border bg-gray-50 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
+    "border-input placeholder:text-muted-foreground h-9 rounded-md border bg-white file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
   ),
   {
     variants: {
@@ -43,8 +43,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         className={cn(
           inputVariants({ size }),
           error
-            ? "focus-visible:border-rose-400  focus-visible:ring-rose-100"
-            : "focus-visible:border-primary-400  focus-visible:ring-primary-100",
+            ? "focus-visible:border-rose-400 focus-visible:ring-rose-100"
+            : "focus-visible:border-primary-400 focus-visible:ring-primary-100",
           className,
         )}
         ref={ref}

packages/ui/src/radio-pills.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as Primitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+
+import { cn } from "./lib/utils";
+
+const RadioPills = React.forwardRef<
+  React.ElementRef<typeof Primitive.Root>,
+  React.ComponentPropsWithoutRef<typeof Primitive.Root>
+>(({ className, ...props }, ref) => (
+  <Primitive.Root
+    ref={ref}
+    className={cn("display flex items-center gap-x-2", className)}
+    {...props}
+  />
+));
+
+const RadioPillsItem = React.forwardRef<
+  React.ElementRef<typeof Primitive.Item>,
+  React.ComponentPropsWithoutRef<typeof Primitive.Item>
+>(({ className, ...props }, ref) => (
+  <Primitive.Item
+    ref={ref}
+    className={cn(
+      "text-muted-foreground data-[state=checked]:text-primary data-[state=checked]:border-primary data-[state=unchecked]:hover:text-foreground h-8 rounded-full border px-3 text-sm font-medium",
+      className,
+    )}
+    {...props}
+  />
+));
+RadioPillsItem.displayName = Primitive.Item.displayName;
+
+export { RadioPills as RadioCards, RadioPillsItem as RadioCardsItem };

packages/ui/src/tabs.tsx

@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "bg-muted text-muted-foreground inline-flex items-center justify-center rounded-md border",
+      "bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-md border",
       className,
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:ring-1 data-[state=active]:ring-gray-200",
+      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex h-full items-center justify-center whitespace-nowrap rounded px-3 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:ring-1 data-[state=active]:ring-gray-200",
       className,
     )}
     {...props}

packages/ui/src/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "border-input placeholder:text-muted-foreground flex min-h-[80px] rounded border bg-gray-50 px-2 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input placeholder:text-muted-foreground flex min-h-[80px] rounded-md border bg-white px-2 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50",
           "focus-visible:ring-offset-input-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1",
           "focus-visible:border-primary-400  focus-visible:ring-primary-100",
           className,