@nuvia/components 0.6.0 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # @nuvia/components
 
-React UI components for Nuvia applications, built with Radix UI primitives and Tailwind CSS.
+React UI components for Nuvia applications, built with Radix UI primitives and Tailwind CSS v4.
 
 ## Installation
 
@@ -10,28 +10,82 @@ pnpm add @nuvia/components @nuvia/tailwind-config
 
 ## Setup
 
-1. Configure your `tailwind.config.ts`:
+### Vite Projects
+
+```bash
+pnpm add -D @tailwindcss/vite
+```
 
 ```typescript
-export { config as default } from "@nuvia/tailwind-config";
+// vite.config.ts
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
 ```
 
-2. Import the global styles in your app:
+### Next.js / Other Projects
 
-```typescript
-import "@nuvia/components/styles/globals.css";
+```bash
+pnpm add -D @tailwindcss/postcss
 ```
 
-3. Wrap your app with providers:
+```javascript
+// postcss.config.mjs
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
+```
+
+### Tailwind Config (All Projects)
 
 ```typescript
-import { ThemeProvider, TooltipProvider } from "@nuvia/components";
+// tailwind.config.ts
+import { config } from "@nuvia/tailwind-config";
+import type { Config } from "tailwindcss";
+
+export default {
+  ...config,
+  content: [
+    "./src/**/*.{ts,tsx}",  // or "./app/**/*.{ts,tsx}" for Next.js
+    "./node_modules/@nuvia/components/**/*.{js,ts,jsx,tsx}",
+  ],
+} satisfies Config;
+```
+
+### CSS Entry Point (All Projects)
+
+```css
+/* globals.css or index.css */
+@import "tailwindcss";
+@import "@nuvia/components/styles/globals.css";
+
+@config "./tailwind.config.ts";
+```
 
-export function App({ children }) {
+> **Important:** `@import` must come before `@config` in Tailwind v4.
+
+### Add Providers
+
+```tsx
+import { ThemeProvider } from "@nuvia/components/providers/theme";
+import { TooltipProvider } from "@nuvia/components/ui/tooltip";
+import { Toaster } from "@nuvia/components/ui/sonner";
+
+export function Providers({ children }: { children: React.ReactNode }) {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultTheme="system" storageKey="app-theme">
       <TooltipProvider>
         {children}
+        <Toaster />
       </TooltipProvider>
     </ThemeProvider>
   );
@@ -40,57 +94,48 @@ export function App({ children }) {
 
 ## Usage
 
-```typescript
+```tsx
+// Import from main entry
 import { Button, Card, Dialog } from "@nuvia/components";
-// Or import from specific paths
+
+// Or import from specific paths (better tree-shaking)
 import { Button } from "@nuvia/components/ui/button";
+import { Card } from "@nuvia/components/ui/card";
 ```
 
+## What's Included
+
+When you import `@nuvia/components/styles/globals.css`, you get:
+
+- **Tailwind v4 theme registration** — All design tokens as utility classes (`bg-muted`, `text-primary`, etc.)
+- **CSS variables** — Full color palette with light/dark theme support
+- **Dark mode** — Automatic via `@custom-variant dark`
+- **Base styles** — Body defaults, border colors, font family
+- **Utility classes** — `.flex-center`, gradients, typography tokens
+
 ## Components
 
-- Accordion
-- Alert / Alert Dialog
-- Avatar
-- Badge
-- Breadcrumb
-- Button
-- Calendar
-- Card
-- Carousel
-- Chart
-- Checkbox
-- Chip
-- Collapsible
-- Combobox / Multi-Combobox
-- Command
-- Context Menu
-- Dialog
-- Drawer
-- Dropdown Menu
-- Form
-- Hover Card
-- Input / Input OTP
-- Label
-- Menubar
-- Navigation Menu
-- Pagination
-- Popover
-- Progress
-- Radio Group
-- Resizable
-- Scroll Area
-- Select
-- Separator
-- Sheet
-- Sidebar
-- Skeleton
-- Slider
-- Sonner (Toast)
-- Spinner
-- Switch
-- Table
-- Tabs
-- Textarea
-- Toast / Toaster
-- Toggle / Toggle Group
-- Tooltip
+| Category | Components |
+|----------|------------|
+| **Layout** | Card, Separator, Resizable, Scroll Area, Aspect Ratio |
+| **Navigation** | Breadcrumb, Navigation Menu, Pagination, Sidebar, Tabs |
+| **Forms** | Button, Checkbox, Input, Radio Group, Select, Slider, Switch, Textarea, Form, Combobox |
+| **Feedback** | Alert, Progress, Skeleton, Spinner, Toast/Sonner |
+| **Overlay** | Dialog, Drawer, Sheet, Popover, Tooltip, Hover Card, Alert Dialog |
+| **Data Display** | Avatar, Badge, Chip, Table, Calendar, Chart, Carousel |
+| **Menu** | Dropdown Menu, Context Menu, Menubar, Command |
+| **Other** | Accordion, Collapsible, Toggle, Logo |
+
+## Theming
+
+Toggle between light and dark themes by adding/removing the `dark` class on the root element. The `ThemeProvider` handles this automatically based on user preference.
+
+```tsx
+// Manual theme toggle
+document.documentElement.classList.toggle("dark");
+```
+
+## Peer Dependencies
+
+- `react` ^18.0.0 || ^19.0.0
+- `react-dom` ^18.0.0 || ^19.0.0

package/dist/index.cjs

@@ -3729,14 +3729,25 @@ var Switch = React36__namespace.forwardRef(({ className, size, ...props }, ref)
   }
 ));
 Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
-var Table = React36__namespace.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative w-full rounded-xl border border-border overflow-auto", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-  "table",
-  {
-    ref,
-    className: cn("w-full caption-bottom text-sm", className),
-    ...props
-  }
-) }));
+var Table = React36__namespace.forwardRef(
+  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "relative w-full rounded-xl border border-border overflow-auto",
+        containerClassName
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "table",
+        {
+          ref,
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  )
+);
 Table.displayName = "Table";
 var TableHeader = React36__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";