@motor-hero/ui-kit 0.5.1

package/src/components/table-skeleton.tsx

@@ -0,0 +1,20 @@
+interface TableSkeletonProps {
+  rows?: number
+  columns?: number
+}
+
+export function TableSkeleton({ rows = 5, columns = 4 }: TableSkeletonProps) {
+  return (
+    <>
+      {Array.from({ length: rows }).map((_, i) => (
+        <tr key={i} className="border-b transition-colors">
+          {Array.from({ length: columns }).map((_, j) => (
+            <td key={j} className="p-4 align-middle">
+              <div className="h-5 w-full animate-pulse rounded bg-muted" />
+            </td>
+          ))}
+        </tr>
+      ))}
+    </>
+  )
+}

package/src/components/theme-provider.tsx

@@ -0,0 +1,69 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+    root.classList.remove("light", "dark")
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light"
+      root.classList.add(systemTheme)
+      return
+    }
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const context = useContext(ThemeProviderContext)
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+  return context
+}
+
+export type { Theme, ThemeProviderProps, ThemeProviderState }

package/src/components/toaster.tsx

@@ -0,0 +1,31 @@
+import { useTheme } from "./theme-provider"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+export function Toaster(props: ToasterProps) {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-md",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          success:
+            "group-[.toaster]:!bg-background group-[.toaster]:!text-foreground group-[.toaster]:!border-success/40",
+          error:
+            "group-[.toaster]:!bg-background group-[.toaster]:!text-foreground group-[.toaster]:!border-destructive/40",
+        },
+      }}
+      {...props}
+    />
+  )
+}

package/src/hooks/use-disclosure.ts

@@ -0,0 +1,9 @@
+import { useCallback, useState } from "react"
+
+export function useDisclosure(initial = false) {
+  const [open, setOpen] = useState(initial)
+  const onOpen = useCallback(() => setOpen(true), [])
+  const onClose = useCallback(() => setOpen(false), [])
+  const onToggle = useCallback(() => setOpen((v) => !v), [])
+  return { open, onOpen, onClose, onToggle, setOpen }
+}

package/src/hooks/use-toast.ts

@@ -0,0 +1,30 @@
+import { toast } from "sonner"
+import { useCallback } from "react"
+
+type ToastStatus = "success" | "error" | "info" | "warning"
+
+export function useCustomToast() {
+  const showToast = useCallback(
+    (title: string, description?: string, status: ToastStatus = "success") => {
+      switch (status) {
+        case "success":
+          toast.success(title, { description })
+          break
+        case "error":
+          toast.error(title, { description })
+          break
+        case "info":
+          toast.info(title, { description })
+          break
+        case "warning":
+          toast.warning(title, { description })
+          break
+      }
+    },
+    [],
+  )
+
+  return showToast
+}
+
+export { toast }

package/src/index.ts

@@ -0,0 +1,29 @@
+// Theme
+export { ThemeProvider, useTheme } from "./components/theme-provider"
+export type { Theme, ThemeProviderProps, ThemeProviderState } from "./components/theme-provider"
+
+// Components
+export { ModeToggle } from "./components/mode-toggle"
+export { EmptyState } from "./components/empty-state"
+export { ConfirmDialog } from "./components/confirm-dialog"
+export { PageHeader } from "./components/page-header"
+export { StatusDot } from "./components/status-dot"
+export { FormField } from "./components/form-field"
+export { FormDialogLayout } from "./components/form-dialog"
+export { AuthCard } from "./components/auth-card"
+export { Pagination } from "./components/pagination"
+export { TableSkeleton } from "./components/table-skeleton"
+export { SearchInput } from "./components/search-input"
+export { StatCard } from "./components/stat-card"
+export { DataTableWrapper } from "./components/data-table-wrapper"
+export { MobileCardList } from "./components/mobile-card-list"
+export { ResponsiveDataView } from "./components/responsive-data-view"
+export { Toaster } from "./components/toaster"
+
+// Utilities
+export { cn } from "./lib/utils"
+export { extractApiError } from "./lib/api-error"
+
+// Hooks
+export { useDisclosure } from "./hooks/use-disclosure"
+export { useCustomToast, toast } from "./hooks/use-toast"

package/src/lib/api-error.ts

@@ -0,0 +1,7 @@
+export function extractApiError(err: any, fallbackMessage = "Ocorreu um erro inesperado."): string {
+  const detail = err?.body?.detail || err?.message
+  if (Array.isArray(detail) && detail.length > 0) {
+    return detail[0].msg
+  }
+  return detail || fallbackMessage
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/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%;
+}