@motor-hero/ui-kit 0.5.1

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/styles.css

@@ -0,0 +1,45 @@
+/* @motor-hero/ui-kit - Zinc theme tokens */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@motor-hero/ui-kit",
+  "version": "0.5.1",
+  "description": "Componentes React reutilizáveis para o ecossistema MotorHero — shadcn/ui + Tailwind CSS v4",
+  "author": "MotorHero",
+  "license": "UNLICENSED",
+  "keywords": [
+    "react",
+    "ui-kit",
+    "shadcn-ui",
+    "tailwindcss",
+    "components",
+    "motorhero"
+  ],
+  "homepage": "https://ui.motorhero.com.br",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/motor-hero/motor-hero-ui-kit.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsup && tsc --emitDeclarationOnly --outDir dist -p tsconfig.build.json",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "docs:dev": "vite --config docs/vite.config.ts",
+    "docs:build": "vite build --config docs/vite.config.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "clsx": "^2.0.0",
+    "lucide-react": ">=0.400.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": ">=2.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "sonner": "^2.0.7"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "clsx": "^2.0.0",
+    "highlight.js": "^11.11.1",
+    "lucide-react": "^1.17.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.0",
+    "tsup": "^8.0.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "vite": "^6.4.2"
+  }
+}

package/src/components/auth-card.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react"
+
+interface AuthCardProps {
+  title: string
+  description?: string
+  children: ReactNode
+  footer?: ReactNode
+}
+
+export function AuthCard({ title, description, children, footer }: AuthCardProps) {
+  return (
+    <div className="flex min-h-screen items-center justify-center px-4">
+      <div className="w-full max-w-sm rounded-lg border bg-card p-6 shadow-sm">
+        <div className="mb-6 text-center">
+          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+          {description && (
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          )}
+        </div>
+        <div className="space-y-4">{children}</div>
+        {footer && <div className="mt-4">{footer}</div>}
+      </div>
+    </div>
+  )
+}

package/src/components/confirm-dialog.tsx

@@ -0,0 +1,58 @@
+import * as AlertDialog from "@radix-ui/react-alert-dialog"
+import type { ReactNode } from "react"
+
+interface ConfirmDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onConfirm: () => void
+  title: string
+  description: ReactNode
+  confirmLabel?: string
+  cancelLabel?: string
+  loading?: boolean
+  variant?: "default" | "destructive"
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  title,
+  description,
+  confirmLabel = "Confirmar",
+  cancelLabel = "Cancelar",
+  loading = false,
+  variant = "default",
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog.Root open={open} onOpenChange={onOpenChange}>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <AlertDialog.Content className="fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg">
+          <div className="flex flex-col space-y-2 text-center sm:text-left">
+            <AlertDialog.Title className="text-lg font-semibold">{title}</AlertDialog.Title>
+            <AlertDialog.Description className="text-sm text-muted-foreground">
+              {description}
+            </AlertDialog.Description>
+          </div>
+          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+            <AlertDialog.Cancel className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
+              {cancelLabel}
+            </AlertDialog.Cancel>
+            <AlertDialog.Action
+              onClick={onConfirm}
+              disabled={loading}
+              className={`inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer ${
+                variant === "destructive"
+                  ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                  : "bg-primary text-primary-foreground hover:bg-primary/90"
+              }`}
+            >
+              {loading ? "Aguarde..." : confirmLabel}
+            </AlertDialog.Action>
+          </div>
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  )
+}

package/src/components/data-table-wrapper.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react"
+
+interface DataTableWrapperProps {
+  children: ReactNode
+  isEmpty: boolean
+  isLoading: boolean
+  emptyIcon?: ReactNode
+  emptyTitle?: string
+  emptyDescription?: string
+  page?: number
+  onPageChange?: (page: number) => void
+  hasNextPage?: boolean
+  hasPreviousPage?: boolean
+}
+
+export function DataTableWrapper({
+  children,
+  isEmpty,
+  isLoading,
+  emptyIcon,
+  emptyTitle = "Nenhum registro encontrado",
+  emptyDescription,
+  page,
+  onPageChange,
+  hasNextPage = false,
+  hasPreviousPage = false,
+}: DataTableWrapperProps) {
+  return (
+    <div className="space-y-4">
+      <div className="overflow-x-auto rounded-md border">{children}</div>
+
+      {!isLoading && isEmpty && (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          {emptyIcon && <div className="mb-4 text-muted-foreground">{emptyIcon}</div>}
+          <h3 className="text-lg font-semibold tracking-tight">{emptyTitle}</h3>
+          {emptyDescription && (
+            <p className="mt-1 max-w-sm text-sm text-muted-foreground">{emptyDescription}</p>
+          )}
+        </div>
+      )}
+
+      {page !== undefined && onPageChange && (
+        <div className="flex items-center justify-end gap-4">
+          <button
+            type="button"
+            onClick={() => onPageChange(page - 1)}
+            disabled={!hasPreviousPage}
+            className="inline-flex h-8 items-center justify-center rounded-md border border-input bg-background px-3 text-xs font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50"
+          >
+            Anterior
+          </button>
+          <span className="text-sm text-muted-foreground">Página {page}</span>
+          <button
+            type="button"
+            onClick={() => onPageChange(page + 1)}
+            disabled={!hasNextPage}
+            className="inline-flex h-8 items-center justify-center rounded-md border border-input bg-background px-3 text-xs font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50"
+          >
+            Próximo
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/empty-state.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react"
+
+interface EmptyStateProps {
+  icon?: ReactNode
+  title: string
+  description?: string
+  action?: ReactNode
+  className?: string
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div className={`flex flex-col items-center justify-center py-16 text-center ${className ?? ""}`}>
+      {icon && <div className="mb-4 text-muted-foreground">{icon}</div>}
+      <h3 className="text-lg font-semibold tracking-tight">{title}</h3>
+      {description && (
+        <p className="mt-1 max-w-sm text-sm text-muted-foreground">{description}</p>
+      )}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  )
+}

package/src/components/form-dialog.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react"
+
+interface FormDialogLayoutProps {
+  title: string
+  children: ReactNode
+  onSubmit: (e: React.FormEvent) => void
+  submitLabel?: string
+  cancelLabel?: string
+  onCancel: () => void
+  isSubmitting?: boolean
+  isDisabled?: boolean
+}
+
+export function FormDialogLayout({
+  title,
+  children,
+  onSubmit,
+  submitLabel = "Salvar",
+  cancelLabel = "Cancelar",
+  onCancel,
+  isSubmitting = false,
+  isDisabled = false,
+}: FormDialogLayoutProps) {
+  return (
+    <form onSubmit={onSubmit}>
+      <div className="flex flex-col space-y-1.5 text-center sm:text-left">
+        <h2 className="text-lg font-semibold leading-none tracking-tight">{title}</h2>
+      </div>
+      <div className="space-y-4 py-4">{children}</div>
+      <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50"
+        >
+          {cancelLabel}
+        </button>
+        <button
+          type="submit"
+          disabled={isSubmitting || isDisabled}
+          className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 cursor-pointer disabled:pointer-events-none disabled:opacity-50"
+        >
+          {isSubmitting ? "Salvando..." : submitLabel}
+        </button>
+      </div>
+    </form>
+  )
+}

package/src/components/form-field.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react"
+
+interface FormFieldProps {
+  label: string
+  htmlFor?: string
+  error?: string
+  required?: boolean
+  children: ReactNode
+  className?: string
+}
+
+export function FormField({ label, htmlFor, error, required, children, className }: FormFieldProps) {
+  return (
+    <div className={`space-y-2 ${className ?? ""}`}>
+      <label
+        htmlFor={htmlFor}
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        {label}
+        {required && <span className="ml-1 text-destructive">*</span>}
+      </label>
+      {children}
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}

package/src/components/mobile-card-list.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react"
+
+interface MobileCardListProps<T> {
+  data: T[]
+  renderCard: (item: T, index: number) => ReactNode
+  keyExtractor: (item: T) => string
+  isLoading?: boolean
+  loadingCount?: number
+  className?: string
+}
+
+export function MobileCardList<T>({
+  data,
+  renderCard,
+  keyExtractor,
+  isLoading = false,
+  loadingCount = 5,
+  className,
+}: MobileCardListProps<T>) {
+  if (isLoading) {
+    return (
+      <div className={`space-y-3 ${className ?? ""}`}>
+        {Array.from({ length: loadingCount }).map((_, i) => (
+          <div key={i} className="rounded-xl border p-4">
+            <div className="space-y-3">
+              <div className="flex justify-between">
+                <div className="h-5 w-32 animate-pulse rounded bg-muted" />
+                <div className="h-5 w-16 animate-pulse rounded bg-muted" />
+              </div>
+              <div className="h-4 w-48 animate-pulse rounded bg-muted" />
+              <div className="flex justify-between">
+                <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+                <div className="h-4 w-20 animate-pulse rounded bg-muted" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={`space-y-3 ${className ?? ""}`}>
+      {data.map((item, index) => (
+        <div
+          key={keyExtractor(item)}
+          className="rounded-xl border p-4 transition-all duration-150 hover:border-foreground/20 active:scale-[0.99]"
+        >
+          {renderCard(item, index)}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/mode-toggle.tsx

@@ -0,0 +1,47 @@
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
+import { Moon, Sun, Monitor } from "lucide-react"
+import { useTheme } from "./theme-provider"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button
+          type="button"
+          className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-input bg-background text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          aria-label="Alternar tema"
+        >
+          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          align="end"
+          className="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
+        >
+          <DropdownMenu.Item
+            className="flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent"
+            onClick={() => setTheme("light")}
+          >
+            <Sun className="h-4 w-4" /> Claro
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            className="flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent"
+            onClick={() => setTheme("dark")}
+          >
+            <Moon className="h-4 w-4" /> Escuro
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            className="flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent"
+            onClick={() => setTheme("system")}
+          >
+            <Monitor className="h-4 w-4" /> Sistema
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}

package/src/components/page-header.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react"
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  action?: ReactNode
+  className?: string
+}
+
+export function PageHeader({ title, description, action, className }: PageHeaderProps) {
+  return (
+    <div className={`flex items-center justify-between ${className ?? ""}`}>
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {action && <div>{action}</div>}
+    </div>
+  )
+}

package/src/components/pagination.tsx

@@ -0,0 +1,31 @@
+interface PaginationProps {
+  page: number
+  onPageChange: (page: number) => void
+  hasNextPage: boolean
+  hasPreviousPage: boolean
+  className?: string
+}
+
+export function Pagination({ page, onPageChange, hasNextPage, hasPreviousPage, className }: PaginationProps) {
+  return (
+    <div className={`flex items-center justify-end gap-4 ${className ?? ""}`}>
+      <button
+        type="button"
+        onClick={() => onPageChange(page - 1)}
+        disabled={!hasPreviousPage}
+        className="inline-flex h-8 items-center justify-center rounded-md border border-input bg-background px-3 text-xs font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50"
+      >
+        Anterior
+      </button>
+      <span className="text-sm text-muted-foreground">Página {page}</span>
+      <button
+        type="button"
+        onClick={() => onPageChange(page + 1)}
+        disabled={!hasNextPage}
+        className="inline-flex h-8 items-center justify-center rounded-md border border-input bg-background px-3 text-xs font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50"
+      >
+        Próximo
+      </button>
+    </div>
+  )
+}

package/src/components/responsive-data-view.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react"
+
+interface ResponsiveDataViewProps {
+  table: ReactNode
+  cards: ReactNode
+  isEmpty: boolean
+  isLoading: boolean
+  emptyIcon?: ReactNode
+  emptyTitle?: string
+  emptyDescription?: string
+  pagination?: ReactNode
+}
+
+export function ResponsiveDataView({
+  table, cards, isEmpty, isLoading, emptyIcon, emptyTitle = "Nenhum registro encontrado", emptyDescription, pagination,
+}: ResponsiveDataViewProps) {
+  return (
+    <div className="space-y-4">
+      <div className="hidden overflow-x-auto rounded-md border md:block">{table}</div>
+      <div className="md:hidden">{cards}</div>
+      {!isLoading && isEmpty && (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          {emptyIcon && <div className="mb-4 text-muted-foreground">{emptyIcon}</div>}
+          <h3 className="text-lg font-semibold tracking-tight">{emptyTitle}</h3>
+          {emptyDescription && <p className="mt-1 max-w-sm text-sm text-muted-foreground">{emptyDescription}</p>}
+        </div>
+      )}
+      {pagination}
+    </div>
+  )
+}

package/src/components/search-input.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+
+interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  containerClassName?: string
+}
+
+export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ containerClassName, className, ...props }, ref) => {
+    return (
+      <div className={`relative flex-1 ${containerClassName ?? ""}`}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.3-4.3" />
+        </svg>
+        <input
+          ref={ref}
+          type="text"
+          className={`flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 pl-10 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${className ?? ""}`}
+          {...props}
+        />
+      </div>
+    )
+  }
+)
+SearchInput.displayName = "SearchInput"

package/src/components/stat-card.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react"
+
+interface StatCardProps {
+  label: string
+  value: ReactNode
+  detail?: string
+  icon?: ReactNode
+  isLoading?: boolean
+}
+
+export function StatCard({ label, value, detail, icon, isLoading }: StatCardProps) {
+  if (isLoading) {
+    return (
+      <div className="rounded-lg border bg-card p-6 shadow-sm">
+        <div className="flex items-center justify-between pb-2">
+          <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+          <div className="h-4 w-4 animate-pulse rounded bg-muted" />
+        </div>
+        <div className="mt-2 h-7 w-16 animate-pulse rounded bg-muted" />
+        <div className="mt-1 h-4 w-20 animate-pulse rounded bg-muted" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-lg border bg-card p-6 shadow-sm">
+      <div className="flex items-center justify-between pb-2">
+        <span className="text-sm font-medium text-muted-foreground">{label}</span>
+        {icon && <span className="text-muted-foreground">{icon}</span>}
+      </div>
+      <div className="text-2xl font-bold">{value}</div>
+      {detail && <p className="text-xs text-muted-foreground">{detail}</p>}
+    </div>
+  )
+}

package/src/components/status-dot.tsx

@@ -0,0 +1,16 @@
+interface StatusDotProps {
+  active: boolean
+  label?: string
+  className?: string
+}
+
+export function StatusDot({ active, label, className }: StatusDotProps) {
+  return (
+    <span className={`inline-flex items-center gap-2 ${className ?? ""}`}>
+      <span
+        className={`h-2 w-2 rounded-full ${active ? "bg-green-500" : "bg-red-500"}`}
+      />
+      {label && <span>{label}</span>}
+    </span>
+  )
+}