luxtable 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxtable",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "private": false,
   "description": "Enterprise-Grade Data Management. Minimalist Aesthetics.",
   "keywords": [
@@ -34,6 +34,7 @@
   "files": [
     "dist",
     "registry",
+    "src/styles",
     "README.md",
     "USAGE.md",
     "EXAMPLE.md"
@@ -61,7 +62,9 @@
     "@tanstack/react-table": "^8.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "date-fns": "^3.6.0",
     "lucide-react": "^0.562.0",
+    "react-day-picker": "^8.10.1",
     "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {

package/src/styles/README.md

@@ -0,0 +1,141 @@
+# LuxTable CSS Variables
+
+LuxTable uses a comprehensive CSS variable system that is **fully compatible with shadcn/ui**. It includes both shadcn base variables and LuxTable-specific variables, working seamlessly in both light and dark modes.
+
+## How It Works
+
+The variable system has two layers:
+
+### 1. shadcn/ui Base Variables
+Standard shadcn variables (`--background`, `--foreground`, `--primary`, `--accent`, `--border`, etc.) that power the shadcn UI components used internally (Button, Dropdown, Checkbox, etc.).
+
+**If your project already has shadcn/ui configured**, your CSS variable values will take precedence, and LuxTable's internal UI components will automatically inherit your project's theme.
+
+### 2. LuxTable Specific Variables (`--lux-*`)
+Table-specific tokens that control the appearance of table elements (headers, rows, cells, pagination, etc.). These don't conflict with your existing shadcn setup.
+
+## Usage
+
+Import the variables file in your main CSS file:
+
+```css
+@import 'luxtable/src/styles/variables.css';
+```
+
+## Customization
+
+All colors use HSL format and can be easily overridden:
+
+```css
+:root {
+  /* Override shadcn base variables */
+  --primary: 262 83% 58%;
+  --accent: 262 30% 96%;
+  
+  /* Override LuxTable specific variables */
+  --lux-table-background: 0 0% 100%;
+  --lux-status-active-bg: 142 76% 36%;
+}
+
+.dark {
+  /* Override dark mode colors */
+  --primary: 262 83% 65%;
+  --lux-table-background: 222 47% 2%;
+}
+```
+
+## Available Variables
+
+### shadcn Base Variables
+These power the internal UI components (buttons, dropdowns, checkboxes, etc.):
+
+| Variable | Description |
+|----------|-------------|
+| `--background` | Page/component background |
+| `--foreground` | Default text color |
+| `--primary` / `--primary-foreground` | Primary action color |
+| `--secondary` / `--secondary-foreground` | Secondary color |
+| `--muted` / `--muted-foreground` | Muted/subtle color |
+| `--accent` / `--accent-foreground` | Accent/hover color |
+| `--destructive` / `--destructive-foreground` | Destructive action color |
+| `--border` | Default border color |
+| `--input` | Input border color |
+| `--ring` | Focus ring color |
+| `--popover` / `--popover-foreground` | Popover/dropdown color |
+| `--card` / `--card-foreground` | Card color |
+| `--radius` | Border radius |
+
+### LuxTable Specific Variables
+
+#### Table Colors
+- `--lux-table-background` - Main table background
+- `--lux-table-foreground` - Main text color
+- `--lux-table-border` - Table borders
+- `--lux-table-header-*` - Header colors (background, foreground, border)
+- `--lux-table-row-*` - Row colors (background, hover, selected, border)
+- `--lux-table-cell-*` - Cell colors (foreground, muted)
+- `--lux-table-footer-*` - Footer colors (background, foreground, border)
+
+#### Toolbar
+- `--lux-toolbar-background` / `--lux-toolbar-border` / `--lux-toolbar-foreground`
+- `--lux-toolbar-input-*` - Input field colors (background, border, foreground, placeholder)
+- `--lux-toolbar-icon` - Icon color
+
+#### Pagination
+- `--lux-pagination-background` / `--lux-pagination-border` / `--lux-pagination-foreground`
+- `--lux-pagination-hover` / `--lux-pagination-active-*` / `--lux-pagination-disabled`
+
+#### Status Colors
+- `--lux-status-active-*` - Active status (bg, text)
+- `--lux-status-inactive-*` - Inactive status
+- `--lux-status-pending-*` - Pending status
+- `--lux-status-completed-*` - Completed status
+- `--lux-status-cancelled-*` - Cancelled status
+- `--lux-status-default-*` - Default/unknown status
+
+#### Selection
+- `--lux-selection-background` / `--lux-selection-foreground` / `--lux-selection-border`
+- `--lux-selection-info-*` - Selection info bar colors
+
+#### Sort
+- `--lux-sort-active` - Active sort direction indicator color
+- `--lux-sort-idle` - Idle (unsorted) indicator color
+- `--lux-sort-sorted-text` - Sorted column header text color
+
+#### Other
+- `--lux-progress-bg` / `--lux-progress-bar` / `--lux-progress-text` - Progress bar
+- `--lux-boolean-true` / `--lux-boolean-false` - Boolean display
+- `--lux-filter-*` - Filter panel (background, border, foreground)
+- `--lux-focus-ring` / `--lux-focus-ring-offset` - Focus ring
+
+## Format
+
+All variables use HSL format (Hue Saturation Lightness) without the `hsl()` wrapper:
+
+```css
+--lux-table-background: 0 0% 100%; /* hsl(0, 0%, 100%) */
+```
+
+This allows Tailwind to use them with arbitrary values:
+```tsx
+className="bg-[hsl(var(--lux-table-background))]"
+```
+
+## Compatibility with Existing shadcn Projects
+
+If your project already has shadcn/ui configured with its own `globals.css`, the base variables in `variables.css` serve as **fallback defaults**. Your project's values will override them automatically since CSS specificity follows the cascade.
+
+This means:
+- ✅ LuxTable works out of the box without shadcn setup
+- ✅ LuxTable inherits your existing shadcn theme automatically
+- ✅ `--lux-*` variables never conflict with standard shadcn variables
+
+## Dark Mode
+
+Dark mode is automatically handled. When you add the `.dark` class to your root element, all variables switch to their dark mode values. You can override them in the `.dark` selector:
+
+```css
+.dark {
+  --lux-table-background: 222 47% 2%;
+}
+```

package/src/styles/variables.css

@@ -0,0 +1,283 @@
+/**
+ * LuxTable CSS Variables
+ * 
+ * Comprehensive design token system compatible with shadcn/ui.
+ * Includes both shadcn base variables and LuxTable-specific variables.
+ * All colors use HSL format for easy customization and override.
+ * 
+ * Usage:
+ * 1. Import this file in your app's CSS
+ * 2. Override variables in your :root or .dark selector as needed
+ * 
+ * If your project already has shadcn/ui configured with its own CSS variables,
+ * the shadcn base variables below will be overridden by your project's values.
+ * The --lux-* variables are table-specific and won't conflict.
+ * 
+ * @example
+ * ```css
+ * :root {
+ *   --lux-table-border: 214 32% 91%;
+ *   --lux-table-primary: 221 83% 53%;
+ * }
+ * ```
+ */
+@layer base {
+  :root {
+    /* ================================================================
+     * shadcn/ui Base Variables - Light Mode
+     * These provide defaults for shadcn UI components (Button, Dropdown, etc.)
+     * If your project already defines these, your values will take precedence.
+     * ================================================================ */
+    --background: 0 0% 100%;
+    --foreground: 224 71% 4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 224 71% 4%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71% 4%;
+
+    --primary: 220.9 39.3% 11%;
+    --primary-foreground: 210 20% 98%;
+
+    --secondary: 220 14% 96%;
+    --secondary-foreground: 220.9 39.3% 11%;
+
+    --muted: 220 14% 96%;
+    --muted-foreground: 220 9% 46%;
+
+    --accent: 220 14% 96%;
+    --accent-foreground: 220.9 39.3% 11%;
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 220.9 39.3% 11%;
+
+    --radius: 0.5rem;
+
+    /* ================================================================
+     * LuxTable Specific Variables - Light Mode
+     * Table component tokens that extend beyond shadcn's base palette.
+     * ================================================================ */
+
+    /* Table Base Colors */
+    --lux-table-background: 0 0% 100%;
+    --lux-table-foreground: 224 71% 4%;
+    --lux-table-border: 220 13% 91%;
+    --lux-table-ring: 220.9 39.3% 11%;
+
+    /* Table Header */
+    --lux-table-header-background: 220 14% 96%;
+    --lux-table-header-foreground: 220 9% 46%;
+    --lux-table-header-border: 220 13% 91%;
+
+    /* Table Row */
+    --lux-table-row-background: 0 0% 100%;
+    --lux-table-row-hover: 220 14% 96%;
+    --lux-table-row-selected: 220 100% 97%;
+    --lux-table-row-border: 220 13% 91%;
+
+    /* Table Cell */
+    --lux-table-cell-foreground: 224 71% 4%;
+    --lux-table-cell-muted: 220 9% 46%;
+
+    /* Table Footer */
+    --lux-table-footer-background: 220 14% 96%;
+    --lux-table-footer-foreground: 224 71% 4%;
+    --lux-table-footer-border: 220 13% 91%;
+
+    /* Toolbar */
+    --lux-toolbar-background: 220 14% 96%;
+    --lux-toolbar-border: 220 13% 91%;
+    --lux-toolbar-foreground: 224 71% 4%;
+    --lux-toolbar-input-background: 0 0% 100%;
+    --lux-toolbar-input-border: 220 13% 91%;
+    --lux-toolbar-input-foreground: 224 71% 4%;
+    --lux-toolbar-input-placeholder: 220 9% 46%;
+    --lux-toolbar-icon: 220 9% 46%;
+
+    /* Pagination */
+    --lux-pagination-background: 0 0% 100%;
+    --lux-pagination-border: 220 13% 91%;
+    --lux-pagination-foreground: 224 71% 4%;
+    --lux-pagination-hover: 220 14% 96%;
+    --lux-pagination-active-background: 220.9 39.3% 11%;
+    --lux-pagination-active-foreground: 210 20% 98%;
+    --lux-pagination-disabled: 220 9% 46%;
+
+    /* Status Colors */
+    --lux-status-active-bg: 142 76% 36%;
+    --lux-status-active-text: 0 0% 100%;
+    --lux-status-inactive-bg: 0 84% 60%;
+    --lux-status-inactive-text: 0 0% 100%;
+    --lux-status-pending-bg: 38 92% 50%;
+    --lux-status-pending-text: 0 0% 100%;
+    --lux-status-completed-bg: 221 83% 53%;
+    --lux-status-completed-text: 0 0% 100%;
+    --lux-status-cancelled-bg: 220 9% 46%;
+    --lux-status-cancelled-text: 0 0% 100%;
+    --lux-status-default-bg: 220 9% 46%;
+    --lux-status-default-text: 0 0% 100%;
+
+    /* Selection */
+    --lux-selection-background: 220 100% 97%;
+    --lux-selection-foreground: 220.9 39.3% 11%;
+    --lux-selection-border: 220 100% 97%;
+    --lux-selection-info-background: 220 100% 97%;
+    --lux-selection-info-foreground: 220.9 39.3% 11%;
+    --lux-selection-info-border: 220 13% 91%;
+
+    /* Filter */
+    --lux-filter-background: 220 14% 96%;
+    --lux-filter-border: 220 13% 91%;
+    --lux-filter-foreground: 224 71% 4%;
+
+    /* Focus Ring */
+    --lux-focus-ring: 220.9 39.3% 11%;
+    --lux-focus-ring-offset: 0 0% 100%;
+
+    /* Progress Bar */
+    --lux-progress-bg: 220 13% 91%;
+    --lux-progress-bar: 221 83% 53%;
+    --lux-progress-text: 220 9% 46%;
+
+    /* Boolean */
+    --lux-boolean-true: 142 76% 36%;
+    --lux-boolean-false: 0 84% 60%;
+
+    /* Sort Indicator */
+    --lux-sort-active: 221 83% 53%;
+    --lux-sort-idle: 220 9% 46%;
+    --lux-sort-sorted-text: 142 76% 36%;
+  }
+
+  .dark {
+    /* ================================================================
+     * shadcn/ui Base Variables - Dark Mode
+     * ================================================================ */
+    --background: 222 47% 5%;
+    --foreground: 210 40% 98%;
+
+    --card: 222 47% 5%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222 47% 6%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222 47% 5%;
+
+    --secondary: 217 33% 14%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217 33% 14%;
+    --muted-foreground: 215 20% 65%;
+
+    --accent: 217 33% 14%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217 33% 18%;
+    --input: 217 33% 18%;
+    --ring: 212 100% 67%;
+
+    /* ================================================================
+     * LuxTable Specific Variables - Dark Mode
+     * ================================================================ */
+
+    /* Table Base Colors */
+    --lux-table-background: 222 47% 5%;
+    --lux-table-foreground: 210 40% 98%;
+    --lux-table-border: 217 33% 18%;
+    --lux-table-ring: 212 100% 67%;
+
+    /* Table Header */
+    --lux-table-header-background: 222 40% 7%;
+    --lux-table-header-foreground: 0 0% 100%;
+    --lux-table-header-border: 217 33% 18%;
+
+    /* Table Row */
+    --lux-table-row-background: 222 47% 5%;
+    --lux-table-row-hover: 217 33% 10%;
+    --lux-table-row-selected: 213 50% 12%;
+    --lux-table-row-border: 217 33% 18%;
+
+    /* Table Cell */
+    --lux-table-cell-foreground: 0 0% 100%;
+    --lux-table-cell-muted: 0 0% 75%;
+
+    /* Table Footer */
+    --lux-table-footer-background: 217 33% 10%;
+    --lux-table-footer-foreground: 210 40% 93%;
+    --lux-table-footer-border: 217 33% 18%;
+
+    /* Toolbar */
+    --lux-toolbar-background: 222 40% 7%;
+    --lux-toolbar-border: 217 33% 18%;
+    --lux-toolbar-foreground: 0 0% 100%;
+    --lux-toolbar-input-background: 222 47% 5%;
+    --lux-toolbar-input-border: 217 33% 20%;
+    --lux-toolbar-input-foreground: 0 0% 100%;
+    --lux-toolbar-input-placeholder: 0 0% 60%;
+    --lux-toolbar-icon: 0 0% 90%;
+
+    /* Pagination */
+    --lux-pagination-background: 222 47% 5%;
+    --lux-pagination-border: 217 33% 18%;
+    --lux-pagination-foreground: 0 0% 100%;
+    --lux-pagination-hover: 217 33% 10%;
+    --lux-pagination-active-background: 212 100% 67%;
+    --lux-pagination-active-foreground: 222 47% 5%;
+    --lux-pagination-disabled: 0 0% 50%;
+
+    /* Status Colors */
+    --lux-status-active-bg: 142 65% 18%;
+    --lux-status-active-text: 142 76% 72%;
+    --lux-status-inactive-bg: 0 55% 22%;
+    --lux-status-inactive-text: 0 84% 75%;
+    --lux-status-pending-bg: 38 55% 22%;
+    --lux-status-pending-text: 38 92% 72%;
+    --lux-status-completed-bg: 221 50% 24%;
+    --lux-status-completed-text: 221 83% 75%;
+    --lux-status-cancelled-bg: 215 15% 18%;
+    --lux-status-cancelled-text: 215 20% 68%;
+    --lux-status-default-bg: 215 15% 18%;
+    --lux-status-default-text: 215 20% 68%;
+
+    /* Selection */
+    --lux-selection-background: 213 50% 12%;
+    --lux-selection-foreground: 210 40% 88%;
+    --lux-selection-border: 217 33% 18%;
+    --lux-selection-info-background: 213 50% 12%;
+    --lux-selection-info-foreground: 210 40% 93%;
+    --lux-selection-info-border: 217 33% 18%;
+
+    /* Filter */
+    --lux-filter-background: 222 40% 7%;
+    --lux-filter-border: 217 33% 20%;
+    --lux-filter-foreground: 0 0% 100%;
+
+    /* Focus Ring */
+    --lux-focus-ring: 212 100% 67%;
+    --lux-focus-ring-offset: 222 47% 5%;
+
+    /* Progress Bar */
+    --lux-progress-bg: 217 33% 18%;
+    --lux-progress-bar: 221 83% 58%;
+    --lux-progress-text: 0 0% 95%;
+
+    /* Boolean */
+    --lux-boolean-true: 142 76% 50%;
+    --lux-boolean-false: 0 84% 60%;
+
+    /* Sort Indicator */
+    --lux-sort-active: 212 100% 70%;
+    --lux-sort-idle: 0 0% 70%;
+    --lux-sort-sorted-text: 142 76% 55%;
+  }
+}