@snowpact/react-tanstack-query-table 1.1.3 → 1.3.0

package/README.md

@@ -24,35 +24,51 @@ pnpm add @snowpact/react-tanstack-query-table
 npm install @tanstack/react-query @tanstack/react-table react react-dom
 ```
 
-### Tailwind CSS Configuration
+### Import Styles
 
-Tailwind CSS is required. You must configure Tailwind to scan the package's classes:
+Import the library CSS in your app entry point:
 
-**In your `tailwind.config.css` (Tailwind v4):**
+```tsx
+import '@snowpact/react-tanstack-query-table/styles.css';
+```
+
+### Customization (Optional)
+
+You can customize the library appearance by overriding CSS variables:
 
 ```css
-/* Include SnowTable classes for Tailwind scanning */
-@source "node_modules/@snowpact/react-tanstack-query-table/dist";
+:root {
+  --snow-background: #ffffff;           /* Main background (table, rows, inputs) */
+  --snow-foreground: #0a0a0a;           /* Main text color */
+  --snow-secondary: #f5f5f5;            /* Secondary background (headers, hover) */
+  --snow-secondary-foreground: #737373; /* Secondary text color */
+  --snow-border: #d4d4d4;               /* Border color */
+  --snow-ring: #a3a3a3;                 /* Focus ring color */
+  --snow-radius: 0.375rem;              /* Border radius */
+}
 ```
 
-**Or in `tailwind.config.js` (Tailwind v3):**
+**Dark mode example:**
 
-```js
-module.exports = {
-  content: [
-    // ... your app files
-    './node_modules/@snowpact/react-tanstack-query-table/dist/**/*.js',
-  ],
-};
+```css
+.dark {
+  --snow-background: #1a1a2e;
+  --snow-foreground: #eaeaea;
+  --snow-secondary: #16213e;
+  --snow-secondary-foreground: #a0a0a0;
+  --snow-border: #0f3460;
+  --snow-ring: #3b82f6;
+}
 ```
 
-> **Note**: The path may vary depending on your project structure. If using a monorepo or workspace, adjust the path accordingly (e.g., `../../node_modules/...`).
-
 ## Quick Start
 
 ### 1. Setup (once in your app)
 
 ```tsx
+// Import styles first
+import '@snowpact/react-tanstack-query-table/styles.css';
+
 import { setupSnowTable } from '@snowpact/react-tanstack-query-table';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -65,7 +81,7 @@ setupSnowTable({
 });
 ```
 
-> **Full setup example**: See [examples/full-setup.md](./examples/full-setup.md) for a complete Shadcn/UI integration with custom `useConfirm` hook, tooltips, and translations.
+> **Full setup example**: See [examples/full-setup.md](./examples/full-setup.md) for a complete Shadcn/UI integration with custom `useConfirm` hook and translations.
 
 ### 2. Use a Client Table
 
@@ -412,17 +428,9 @@ setupSnowTable({
 });
 ```
 
-### Action Hover (Tooltips)
+### Action Tooltips
 
-Integrate with your tooltip system:
-
-```tsx
-setupSnowTable({
-  // ... other options
-  onActionHover: ({ label, element }) => showTooltip(label, element),
-  onActionUnhover: () => hideTooltip(),
-});
-```
+Action buttons automatically display tooltips on hover. The tooltip uses your theme's CSS variables (`--snow-foreground`, `--snow-background`, `--snow-radius`) for consistent styling.
 
 ## API Reference