@moontra/moonui-pro 2.2.19 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.2.19",
+  "version": "2.3.1",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/calendar/index.tsx

@@ -313,13 +313,13 @@ export function Calendar({
           </div>
         </div>
       </CardHeader>
-      <CardContent className="overflow-x-auto">
+      <CardContent>
         <div className="space-y-4">
           {/* Calendar Grid */}
-          <div className="grid grid-cols-7 gap-1 w-full" style={{ minWidth: "500px" }}>
+          <div className="grid grid-cols-7 gap-1 w-full">
             {/* Day Headers */}
             {visibleDaysOfWeek.map((day) => (
-              <div key={day} className="p-1 text-center text-xs font-medium text-muted-foreground min-w-[70px]">
+              <div key={day} className="p-1 text-center text-xs font-medium text-muted-foreground">
                 {day}
               </div>
             ))}
@@ -336,7 +336,7 @@ export function Calendar({
                 <div
                   key={index}
                   className={cn(
-                    "min-h-[80px] min-w-[70px] p-1 border border-border/50 cursor-pointer hover:bg-muted/50 transition-colors text-xs flex flex-col",
+                    "min-h-[80px] p-1 border border-border/50 cursor-pointer hover:bg-muted/50 transition-colors text-xs flex flex-col",
                     !isCurrentMonthDate && "text-muted-foreground bg-muted/20",
                     isTodayDate && highlightToday && "bg-primary/10 border-primary/50",
                     isSelectedDate && "bg-primary/20 border-primary",

package/src/components/data-table/data-table.css

@@ -0,0 +1,54 @@
+/* MoonUI DataTable Component Styles */
+.moonui-data-table-container {
+  /* Container specific styles */
+}
+
+.moonui-data-table-wrapper {
+  /* Wrapper specific styles */
+}
+
+.moonui-data-table {
+  /* Table specific styles */
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.moonui-data-table-header {
+  /* Header specific styles */
+}
+
+.moonui-data-table-body {
+  /* Body specific styles */
+}
+
+.moonui-data-table-row {
+  /* Row specific styles */
+}
+
+.moonui-data-table-th {
+  /* Table header cell specific styles */
+}
+
+.moonui-data-table-td {
+  /* Table data cell specific styles */
+}
+
+.moonui-data-table-toolbar {
+  /* Toolbar specific styles */
+}
+
+/* Prevent style leakage */
+.moonui-data-table-container * {
+  box-sizing: border-box;
+}
+
+/* Ensure DataTable styles don't affect global styles */
+.moonui-data-table-container table {
+  margin: 0;
+  padding: 0;
+}
+
+.moonui-data-table-container th,
+.moonui-data-table-container td {
+  margin: 0;
+}

package/src/components/data-table/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import React from 'react'
+import './data-table.css'
 import {
   useReactTable,
   getCoreRowModel,
@@ -21,6 +22,7 @@ import {
   ChevronRight, 
   ChevronsLeft, 
   ChevronsRight,
+  ChevronDown,
   ArrowUpDown,
   ArrowUp,
   ArrowDown,
@@ -29,10 +31,12 @@ import {
   Download,
   Settings,
   Lock,
-  Sparkles
+  Sparkles,
+  Loader2
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 import { useSubscription } from '../../hooks/use-subscription'
+import { motion, AnimatePresence } from 'framer-motion'
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -46,6 +50,10 @@ interface DataTableProps<TData, TValue> {
   className?: string
   onRowSelect?: (rows: TData[]) => void
   onExport?: (data: TData[]) => void
+  enableExpandable?: boolean
+  renderSubComponent?: (props: { row: { original: TData; id: string } }) => React.ReactNode
+  expandedRows?: Set<string>
+  onRowExpandChange?: (expandedRows: Set<string>) => void
   features?: {
     sorting?: boolean
     filtering?: boolean
@@ -89,6 +97,10 @@ export function DataTable<TData, TValue>({
   className,
   onRowSelect,
   onExport,
+  enableExpandable = false,
+  renderSubComponent,
+  expandedRows: controlledExpandedRows,
+  onRowExpandChange,
   features = {},
   theme = {},
   texts = {},
@@ -131,6 +143,14 @@ export function DataTable<TData, TValue>({
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
   const [rowSelection, setRowSelection] = React.useState({})
   const [globalFilter, setGlobalFilter] = React.useState('')
+  const [isPaginationLoading, setIsPaginationLoading] = React.useState(false)
+  const [internalExpandedRows, setInternalExpandedRows] = React.useState<Set<string>>(new Set())
+
+  // Use controlled or internal expanded state
+  const expandedRows = controlledExpandedRows || internalExpandedRows
+  const setExpandedRows = onRowExpandChange ? 
+    (newExpanded: Set<string>) => onRowExpandChange(newExpanded) :
+    setInternalExpandedRows
 
   const table = useReactTable({
     data,
@@ -188,9 +208,9 @@ export function DataTable<TData, TValue>({
   }
 
   return (
-    <div className={cn("space-y-4", className)}>
+    <div className={cn("moonui-data-table-container space-y-4", className)}>
       {/* Toolbar */}
-      <div className="flex items-center justify-between">
+      <div className="moonui-data-table-toolbar flex items-center justify-between">
         <div className="flex items-center space-x-2">
           {searchable && (
             <div className="relative">
@@ -228,15 +248,15 @@ export function DataTable<TData, TValue>({
       </div>
 
       {/* Table */}
-      <div className="rounded-md border">
-        <table className="w-full">
-          <thead>
+      <div className="moonui-data-table-wrapper rounded-md border overflow-hidden">
+        <table className="moonui-data-table w-full">
+          <thead className="moonui-data-table-header">
             {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id} className="border-b">
+              <tr key={headerGroup.id} className="moonui-data-table-row border-b">
                 {headerGroup.headers.map((header) => (
                   <th
                     key={header.id}
-                    className="h-12 px-4 text-left align-middle font-medium text-muted-foreground"
+                    className="moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground"
                   >
                     {header.isPlaceholder ? null : (
                       <div
@@ -265,30 +285,86 @@ export function DataTable<TData, TValue>({
               </tr>
             ))}
           </thead>
-          <tbody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <tr
-                  key={row.id}
-                  className={cn(
-                    "border-b transition-colors hover:bg-muted/50",
-                    row.getIsSelected() && "bg-muted"
-                  )}
+          <tbody className="moonui-data-table-body">
+            <AnimatePresence mode="wait">
+              {isPaginationLoading ? (
+                <motion.tr
+                  key="loading"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.2 }}
                 >
-                  {row.getVisibleCells().map((cell) => (
-                    <td key={cell.id} className="p-4 align-middle">
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </td>
-                  ))}
-                </tr>
-              ))
-            ) : (
-              <tr>
-                <td colSpan={columns.length} className="h-24 text-center">
-                  No results found.
-                </td>
-              </tr>
-            )}
+                  <td colSpan={columns.length} className="h-24 text-center">
+                    <div className="flex items-center justify-center space-x-2">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      <span className="text-sm text-muted-foreground">Loading...</span>
+                    </div>
+                  </td>
+                </motion.tr>
+              ) : table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.flatMap((row, index) => {
+                  const rowId = (row.original as any).id || row.id
+                  const isExpanded = enableExpandable && expandedRows.has(rowId)
+                  
+                  const mainRow = (
+                    <motion.tr
+                      key={row.id}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -20 }}
+                      transition={{ 
+                        duration: 0.3,
+                        delay: index * 0.05,
+                        ease: "easeOut"
+                      }}
+                      className={cn(
+                        "border-b transition-colors hover:bg-muted/50",
+                        row.getIsSelected() && "bg-muted",
+                        isExpanded && "border-b-0"
+                      )}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      ))}
+                    </motion.tr>
+                  )
+
+                  const expandedRow = isExpanded && renderSubComponent ? (
+                    <motion.tr
+                      key={`${row.id}-expanded`}
+                      initial={{ opacity: 0, height: 0 }}
+                      animate={{ opacity: 1, height: "auto" }}
+                      exit={{ opacity: 0, height: 0 }}
+                      transition={{ duration: 0.3, ease: "easeOut" }}
+                      className="border-b"
+                    >
+                      <td colSpan={columns.length} className="p-0">
+                        <div className="border-t border-border/50">
+                          {renderSubComponent({ row: { original: row.original, id: rowId } })}
+                        </div>
+                      </td>
+                    </motion.tr>
+                  ) : null;
+
+                  return expandedRow ? [mainRow, expandedRow] : [mainRow];
+                })
+              ) : (
+                <motion.tr
+                  key="no-results"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <td colSpan={columns.length} className="h-24 text-center">
+                    No results found.
+                  </td>
+                </motion.tr>
+              )}
+            </AnimatePresence>
           </tbody>
         </table>
       </div>
@@ -309,8 +385,14 @@ export function DataTable<TData, TValue>({
               <p className="text-sm font-medium">Rows per page</p>
               <select
                 value={table.getState().pagination.pageSize}
-                onChange={(e) => table.setPageSize(Number(e.target.value))}
+                onChange={async (e) => {
+                  setIsPaginationLoading(true)
+                  await new Promise(resolve => setTimeout(resolve, 300))
+                  table.setPageSize(Number(e.target.value))
+                  setIsPaginationLoading(false)
+                }}
                 className="h-8 w-[70px] rounded border border-input bg-background px-3 py-1 text-sm"
+                disabled={isPaginationLoading}
               >
                 {[10, 20, 30, 40, 50].map((pageSize) => (
                   <option key={pageSize} value={pageSize}>
@@ -327,32 +409,52 @@ export function DataTable<TData, TValue>({
               <Button
                 variant="outline"
                 className="hidden h-8 w-8 p-0 lg:flex"
-                onClick={() => table.setPageIndex(0)}
-                disabled={!table.getCanPreviousPage()}
+                onClick={async () => {
+                  setIsPaginationLoading(true)
+                  await new Promise(resolve => setTimeout(resolve, 300))
+                  table.setPageIndex(0)
+                  setIsPaginationLoading(false)
+                }}
+                disabled={!table.getCanPreviousPage() || isPaginationLoading}
               >
                 <ChevronsLeft className="h-4 w-4" />
               </Button>
               <Button
                 variant="outline"
                 className="h-8 w-8 p-0"
-                onClick={() => table.previousPage()}
-                disabled={!table.getCanPreviousPage()}
+                onClick={async () => {
+                  setIsPaginationLoading(true)
+                  await new Promise(resolve => setTimeout(resolve, 300))
+                  table.previousPage()
+                  setIsPaginationLoading(false)
+                }}
+                disabled={!table.getCanPreviousPage() || isPaginationLoading}
               >
                 <ChevronLeft className="h-4 w-4" />
               </Button>
               <Button
                 variant="outline"
                 className="h-8 w-8 p-0"
-                onClick={() => table.nextPage()}
-                disabled={!table.getCanNextPage()}
+                onClick={async () => {
+                  setIsPaginationLoading(true)
+                  await new Promise(resolve => setTimeout(resolve, 300))
+                  table.nextPage()
+                  setIsPaginationLoading(false)
+                }}
+                disabled={!table.getCanNextPage() || isPaginationLoading}
               >
                 <ChevronRight className="h-4 w-4" />
               </Button>
               <Button
                 variant="outline"
                 className="hidden h-8 w-8 p-0 lg:flex"
-                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-                disabled={!table.getCanNextPage()}
+                onClick={async () => {
+                  setIsPaginationLoading(true)
+                  await new Promise(resolve => setTimeout(resolve, 300))
+                  table.setPageIndex(table.getPageCount() - 1)
+                  setIsPaginationLoading(false)
+                }}
+                disabled={!table.getCanNextPage() || isPaginationLoading}
               >
                 <ChevronsRight className="h-4 w-4" />
               </Button>
@@ -363,3 +465,81 @@ export function DataTable<TData, TValue>({
     </div>
   )
 }
+
+/**
+ * Helper function to create an expandable column
+ * @param expandedRows - Set of expanded row IDs
+ * @param onToggle - Function to toggle row expansion
+ * @returns ColumnDef for expandable rows
+ */
+export function getExpandableColumn<TData>(
+  expandedRows: Set<string>,
+  onToggle: (id: string) => void
+): ColumnDef<TData, any> {
+  return {
+    id: "expander",
+    header: () => null,
+    size: 50,
+    cell: ({ row }) => {
+      const rowId = (row.original as any).id || row.id;
+      const isExpanded = expandedRows.has(rowId);
+      
+      return (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggle(rowId);
+          }}
+          className="p-2 hover:bg-muted rounded-md transition-colors"
+          aria-label={isExpanded ? "Collapse row" : "Expand row"}
+        >
+          {isExpanded ? (
+            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+          )}
+        </button>
+      );
+    },
+  };
+}
+
+/**
+ * Hook for managing expandable rows
+ * @param initialExpanded - Initial set of expanded row IDs
+ * @returns Object with expandedRows, toggleRow, and expandAll/collapseAll functions
+ */
+export function useExpandableRows(initialExpanded: Set<string> = new Set()) {
+  const [expandedRows, setExpandedRows] = React.useState<Set<string>>(initialExpanded);
+
+  const toggleRow = React.useCallback((id: string) => {
+    setExpandedRows(prev => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(id)) {
+        newExpanded.delete(id);
+      } else {
+        newExpanded.add(id);
+      }
+      return newExpanded;
+    });
+  }, []);
+
+  const expandAll = React.useCallback((rowIds: string[]) => {
+    setExpandedRows(new Set(rowIds));
+  }, []);
+
+  const collapseAll = React.useCallback(() => {
+    setExpandedRows(new Set());
+  }, []);
+
+  return {
+    expandedRows,
+    setExpandedRows,
+    toggleRow,
+    expandAll,
+    collapseAll,
+  };
+}
+
+// Re-export types for convenience
+export { type ColumnDef } from "@tanstack/react-table";