indas-ui 0.0.1

package/dist/sidebar-scrollbar-NBCB2OO2.css

@@ -0,0 +1,46 @@
+/* Styled scrollbar for sidebar */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+/* Hide scrollbar arrow buttons at top and bottom */
+.custom-scrollbar::-webkit-scrollbar-button {
+  display: none;
+  height: 0;
+  width: 0;
+}
+
+/* Sidebar hover overlay - ensure it appears above all content */
+.sidebar-hover-overlay {
+  z-index: 99999 !important;
+  isolation: isolate;
+  transform: translateZ(0);
+}
+
+.sidebar-hover-overlay::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}

package/package.json

@@ -0,0 +1,119 @@
+{
+  "name": "indas-ui",
+  "version": "0.0.1",
+  "description": "Reusable React component library extracted from Indas Estimo (ERP). Tailwind + Radix + Lucide + DataGrid.",
+  "license": "MIT",
+  "author": "Indas Analytics Pvt Ltd",
+  "contributors": [
+    "Shreyansh Patidar",
+    "Abhinav"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ShreyanshPatidar/indas-ui.git",
+    "directory": "packages/indas-ui"
+  },
+  "homepage": "https://shreyanshpatidar.github.io/indas-ui",
+  "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"
+    },
+    "./tokens.css": "./src/styles/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@dicebear/collection": "^9.4.2",
+    "@dicebear/core": "^9.4.2",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@headlessui/react": "^2.2.10",
+    "@heroicons/react": "^2.2.0",
+    "@microsoft/signalr": "^10.0.0",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@react-pdf/renderer": "^4.5.1",
+    "@tanstack/react-query": "^5.90.10",
+    "@tanstack/react-query-devtools": "^5.90.2",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.12",
+    "@types/react-window": "^1.8.8",
+    "@types/three": "^0.182.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.3.0",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.5",
+    "emoji-picker-react": "^4.19.1",
+    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
+    "framer-motion": "^12.23.12",
+    "jspdf": "^3.0.2",
+    "jspdf-autotable": "^5.0.2",
+    "ldrs": "^1.1.9",
+    "lucide-react": "^0.562.0",
+    "next-auth": "^4.24.7",
+    "papaparse": "^5.5.3",
+    "react-hook-form": "^7.76.1",
+    "react-image-crop": "^11.0.10",
+    "react-is": "^19.2.6",
+    "react-markdown": "^10.1.0",
+    "react-window": "^2.2.7",
+    "react-window-infinite-loader": "^2.0.1",
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "svg2pdf.js": "^2.7.0",
+    "tailwind-merge": "^3.3.1",
+    "three": "^0.182.0",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "next": "^16.2.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "tailwind",
+    "design-system",
+    "datagrid",
+    "indas",
+    "erp"
+  ]
+}

package/src/styles/grid-themes.css

@@ -0,0 +1,346 @@
+/* Advanced Data Grid Theme System */
+
+/* Light Theme (Default) */
+:root,
+[data-theme="light"] {
+  /* Background Colors */
+  --grid-bg-primary: #ffffff;
+  --grid-bg-secondary: #f8fafc;
+  --grid-bg-tertiary: #f1f5f9;
+  --grid-bg-hover: #f8fafc;
+  --grid-bg-selected: #eff6ff;
+  --grid-bg-focused: #dbeafe;
+
+  /* Border Colors */
+  --grid-border-primary: #e2e8f0;
+  --grid-border-secondary: #cbd5e1;
+  --grid-border-focused: #3b82f6;
+  --grid-border-error: #ef4444;
+  --grid-border-success: #22c55e;
+
+  /* Text Colors */
+  --grid-text-primary: #1e293b;
+  --grid-text-secondary: #64748b;
+  --grid-text-muted: #94a3b8;
+  --grid-text-inverse: #ffffff;
+  --grid-text-error: #dc2626;
+  --grid-text-success: #16a34a;
+  --grid-text-warning: #d97706;
+
+  /* Header Colors */
+  --grid-header-bg: #f1f5f9;
+  --grid-header-text: #374151;
+  --grid-header-border: #d1d5db;
+  --grid-header-hover: #e5e7eb;
+  --grid-header-sort: #3b82f6;
+
+  /* Footer Colors */
+  --grid-footer-bg: linear-gradient(to right, #f9fafb, #f3f4f6);
+  --grid-footer-text: #374151;
+  --grid-footer-border: #d1d5db;
+
+  /* Interactive Colors */
+  --grid-accent-primary: #3b82f6;
+  --grid-accent-secondary: #8b5cf6;
+  --grid-accent-success: #10b981;
+  --grid-accent-warning: #f59e0b;
+  --grid-accent-error: #ef4444;
+
+  /* Shadow Values */
+  --grid-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --grid-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --grid-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  /* Transition Values */
+  --grid-transition-fast: 150ms ease-in-out;
+  --grid-transition-normal: 200ms ease-in-out;
+  --grid-transition-slow: 300ms ease-in-out;
+
+  /* Spacing Values */
+  --grid-spacing-xs: 0.25rem;
+  --grid-spacing-sm: 0.5rem;
+  --grid-spacing-md: 0.75rem;
+  --grid-spacing-lg: 1rem;
+  --grid-spacing-xl: 1.5rem;
+
+  /* Typography */
+  --grid-font-size-xs: 0.75rem;
+  --grid-font-size-sm: 0.875rem;
+  --grid-font-size-base: 1rem;
+  --grid-font-size-lg: 1.125rem;
+  --grid-line-height-tight: 1.25;
+  --grid-line-height-normal: 1.5;
+
+  /* Border Radius */
+  --grid-radius-sm: 0.25rem;
+  --grid-radius-md: 0.375rem;
+  --grid-radius-lg: 0.5rem;
+
+  /* Z-Index - Keep below sidebar (z-30) to prevent overlap issues */
+  --grid-z-sticky: 10;
+  --grid-z-sticky-header: 10;
+  --grid-z-frozen: 11;
+  --grid-z-pinned-right: 12;
+  --grid-z-cell-frozen: 20;
+  --grid-z-dropdown: 25;
+  --grid-z-modal: 50;
+  --grid-z-tooltip: 50;
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+  /* Background Colors */
+  --grid-bg-primary: #0f172a;
+  --grid-bg-secondary: #1e293b;
+  --grid-bg-tertiary: #334155;
+  --grid-bg-hover: #1e293b;
+  --grid-bg-selected: #1e3a8a;
+  --grid-bg-focused: #1d4ed8;
+
+  /* Border Colors */
+  --grid-border-primary: #334155;
+  --grid-border-secondary: #475569;
+  --grid-border-focused: #3b82f6;
+  --grid-border-error: #ef4444;
+  --grid-border-success: #22c55e;
+
+  /* Text Colors */
+  --grid-text-primary: #f1f5f9;
+  --grid-text-secondary: #cbd5e1;
+  --grid-text-muted: #64748b;
+  --grid-text-inverse: #0f172a;
+  --grid-text-error: #fca5a5;
+  --grid-text-success: #86efac;
+  --grid-text-warning: #fcd34d;
+
+  /* Header Colors */
+  --grid-header-bg: #1e293b;
+  --grid-header-text: #e2e8f0;
+  --grid-header-border: #475569;
+  --grid-header-hover: #334155;
+  --grid-header-sort: #60a5fa;
+
+  /* Footer Colors */
+  --grid-footer-bg: linear-gradient(to right, #1e293b, #334155);
+  --grid-footer-text: #e2e8f0;
+  --grid-footer-border: #475569;
+
+  /* Interactive Colors */
+  --grid-accent-primary: #60a5fa;
+  --grid-accent-secondary: #a78bfa;
+  --grid-accent-success: #34d399;
+  --grid-accent-warning: #fbbf24;
+  --grid-accent-error: #f87171;
+
+  /* Shadow Values (darker for dark theme) */
+  --grid-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
+  --grid-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
+  --grid-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+}
+
+/* High Contrast Theme */
+[data-theme="high-contrast"] {
+  /* Background Colors */
+  --grid-bg-primary: #ffffff;
+  --grid-bg-secondary: #f0f0f0;
+  --grid-bg-tertiary: #e0e0e0;
+  --grid-bg-hover: #ffffcc;
+  --grid-bg-selected: #0066cc;
+  --grid-bg-focused: #ff6600;
+
+  /* Border Colors */
+  --grid-border-primary: #000000;
+  --grid-border-secondary: #333333;
+  --grid-border-focused: #ff6600;
+  --grid-border-error: #cc0000;
+  --grid-border-success: #009900;
+
+  /* Text Colors */
+  --grid-text-primary: #000000;
+  --grid-text-secondary: #333333;
+  --grid-text-muted: #666666;
+  --grid-text-inverse: #ffffff;
+  --grid-text-error: #cc0000;
+  --grid-text-success: #009900;
+  --grid-text-warning: #cc6600;
+
+  /* Header Colors */
+  --grid-header-bg: #e0e0e0;
+  --grid-header-text: #000000;
+  --grid-header-border: #000000;
+  --grid-header-hover: #cccccc;
+  --grid-header-sort: #0066cc;
+
+  /* Footer Colors */
+  --grid-footer-bg: #f0f0f0;
+  --grid-footer-text: #000000;
+  --grid-footer-border: #000000;
+
+  /* Interactive Colors */
+  --grid-accent-primary: #0066cc;
+  --grid-accent-secondary: #6600cc;
+  --grid-accent-success: #009900;
+  --grid-accent-warning: #cc6600;
+  --grid-accent-error: #cc0000;
+}
+
+/* Grid Component Styles Using CSS Variables */
+.advanced-data-grid {
+  background-color: var(--grid-bg-primary);
+  color: var(--grid-text-primary);
+  border: 1px solid var(--grid-border-primary);
+  border-radius: var(--grid-radius-md);
+  font-size: var(--grid-font-size-sm);
+  line-height: var(--grid-line-height-normal);
+}
+
+.grid-header {
+  background-color: var(--grid-header-bg);
+  color: var(--grid-header-text);
+  border-bottom: 1px solid var(--grid-header-border);
+  font-weight: 500;
+}
+
+.grid-header:hover {
+  background-color: var(--grid-header-hover);
+}
+
+.grid-header.sortable {
+  color: var(--grid-header-sort);
+}
+
+.grid-cell {
+  background-color: var(--grid-bg-primary);
+  color: var(--grid-text-primary);
+  border-bottom: 1px solid var(--grid-border-primary);
+  border-right: 1px solid var(--grid-border-primary);
+  padding: var(--grid-spacing-sm) var(--grid-spacing-md);
+  transition: background-color var(--grid-transition-fast);
+}
+
+.grid-cell:hover {
+  background-color: var(--grid-bg-hover);
+}
+
+.grid-cell.selected {
+  background-color: var(--grid-bg-selected);
+}
+
+.grid-cell.focused {
+  background-color: var(--grid-bg-focused);
+  outline: 2px solid var(--grid-border-focused);
+  outline-offset: -2px;
+}
+
+.grid-footer {
+  background: var(--grid-footer-bg);
+  color: var(--grid-footer-text);
+  border-top: 1px solid var(--grid-footer-border);
+  padding: var(--grid-spacing-md);
+  box-shadow: var(--grid-shadow-md);
+}
+
+.grid-button {
+  background-color: var(--grid-accent-primary);
+  color: var(--grid-text-inverse);
+  border: 1px solid var(--grid-accent-primary);
+  border-radius: var(--grid-radius-sm);
+  padding: var(--grid-spacing-xs) var(--grid-spacing-sm);
+  font-size: var(--grid-font-size-xs);
+  transition: all var(--grid-transition-fast);
+}
+
+.grid-button:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: var(--grid-shadow-sm);
+}
+
+.grid-button.secondary {
+  background-color: var(--grid-bg-secondary);
+  color: var(--grid-text-secondary);
+  border-color: var(--grid-border-secondary);
+}
+
+.grid-input {
+  background-color: var(--grid-bg-primary);
+  color: var(--grid-text-primary);
+  border: 1px solid var(--grid-border-secondary);
+  border-radius: var(--grid-radius-sm);
+  padding: var(--grid-spacing-xs) var(--grid-spacing-sm);
+  font-size: var(--grid-font-size-xs);
+  transition: border-color var(--grid-transition-fast);
+}
+
+.grid-input:focus {
+  border-color: var(--grid-border-focused);
+  outline: 2px solid var(--grid-border-focused);
+  outline-offset: -1px;
+}
+
+.grid-input.error {
+  border-color: var(--grid-border-error);
+}
+
+.grid-input.success {
+  border-color: var(--grid-border-success);
+}
+
+/* Status Colors */
+.status-success {
+  background-color: var(--grid-accent-success);
+  color: var(--grid-text-inverse);
+}
+
+.status-warning {
+  background-color: var(--grid-accent-warning);
+  color: var(--grid-text-inverse);
+}
+
+.status-error {
+  background-color: var(--grid-accent-error);
+  color: var(--grid-text-inverse);
+}
+
+/* Accessibility Improvements */
+@media (prefers-reduced-motion: reduce) {
+  .advanced-data-grid,
+  .grid-cell,
+  .grid-button,
+  .grid-input {
+    transition: none;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    /* Auto dark mode when no theme is explicitly set */
+    --grid-bg-primary: #0f172a;
+    --grid-bg-secondary: #1e293b;
+    --grid-text-primary: #f1f5f9;
+    --grid-text-secondary: #cbd5e1;
+    --grid-border-primary: #334155;
+    /* Add other dark theme variables as needed */
+  }
+}
+
+/* Print Styles */
+@media print {
+  .advanced-data-grid {
+    background: white !important;
+    color: black !important;
+    border: 1px solid #000 !important;
+  }
+
+  .grid-cell,
+  .grid-header {
+    background: white !important;
+    color: black !important;
+    border: 1px solid #000 !important;
+  }
+
+  .grid-button,
+  .grid-footer {
+    display: none !important;
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import './tokens.css';

package/src/styles/sidebar-scrollbar.css

@@ -0,0 +1,46 @@
+/* Styled scrollbar for sidebar */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+/* Hide scrollbar arrow buttons at top and bottom */
+.custom-scrollbar::-webkit-scrollbar-button {
+  display: none;
+  height: 0;
+  width: 0;
+}
+
+/* Sidebar hover overlay - ensure it appears above all content */
+.sidebar-hover-overlay {
+  z-index: 99999 !important;
+  isolation: isolate;
+  transform: translateZ(0);
+}
+
+.sidebar-hover-overlay::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}