feat(ui): add linear design foundation

components/ui/badge.tsx

@@ -11,6 +11,10 @@ const badgeVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        success: "border-success/20 bg-success/10 text-success [a&]:hover:bg-success/15",
+        warning: "border-warning/25 bg-warning/10 text-warning [a&]:hover:bg-warning/15",
+        info: "border-info/20 bg-info/10 text-info [a&]:hover:bg-info/15",
+        neutral: "border-neutral/20 bg-neutral/10 text-neutral [a&]:hover:bg-neutral/15",
         destructive:
           "bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:

components/ui/button.tsx

@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-sm hover:shadow-md hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",

components/ui/empty-state.tsx

@@ -0,0 +1,37 @@
+import { Inbox } from "lucide-react"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string
+  description?: string
+  icon?: React.ElementType
+  action?: React.ReactNode
+}
+
+export function EmptyState({
+  title,
+  description,
+  icon: Icon = Inbox,
+  action,
+  className,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-[280px] flex-col items-center justify-center rounded-xl border border-border/60 bg-transparent p-8 text-center",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex size-12 items-center justify-center rounded-full bg-muted/50">
+        <Icon className="size-6 text-muted-foreground" />
+      </div>
+      <h3 className="mt-4 text-sm font-semibold">{title}</h3>
+      {description && <p className="mt-2 text-sm text-muted-foreground max-w-sm">{description}</p>}
+      {action && <div className="mt-6">{action}</div>}
+    </div>
+  )
+}

components/ui/status-badge.tsx

@@ -0,0 +1,37 @@
+import type { VariantProps } from "class-variance-authority"
+import { AlertCircle, CheckCircle2, HelpCircle, Info } from "lucide-react"
+import type * as React from "react"
+
+import { Badge, type badgeVariants } from "@/components/ui/badge"
+
+type StatusBadgeVariant = NonNullable<VariantProps<typeof badgeVariants>["variant"]>
+
+export interface StatusBadgeProps extends React.ComponentProps<"span"> {
+  status: StatusBadgeVariant
+  icon?: boolean
+}
+
+const statusConfig: Partial<Record<StatusBadgeVariant, React.ElementType>> = {
+  success: CheckCircle2,
+  warning: AlertCircle,
+  info: Info,
+  destructive: AlertCircle,
+  neutral: HelpCircle,
+}
+
+export function StatusBadge({
+  status,
+  icon = true,
+  className,
+  children,
+  ...props
+}: StatusBadgeProps) {
+  const Icon = icon ? statusConfig[status] : undefined
+
+  return (
+    <Badge variant={status} className={className} {...props}>
+      {Icon && <Icon className="size-3" />}
+      {children}
+    </Badge>
+  )
+}