@elsapiens/ui 0.1.0 → 0.1.4

package/dist/index.d.ts

@@ -1028,8 +1028,13 @@ interface TableProps<T> {
      * - 'first': first column is sticky
      * - 'last': last column is sticky
      * - 'both': first and last columns are sticky
+     * @deprecated Use stickyColumnsLeft/stickyColumnsRight or pass an array of column keys
      */
-    stickyColumns?: 'first' | 'last' | 'both';
+    stickyColumns?: 'first' | 'last' | 'both' | string[];
+    /** Number of columns from the left to make sticky (e.g., 2 for first two columns) */
+    stickyColumnsLeft?: number;
+    /** Number of columns from the right to make sticky (e.g., 1 for last column) */
+    stickyColumnsRight?: number;
     /** Make the header row sticky on vertical scroll */
     stickyHeader?: boolean;
     /** Top offset for sticky header (e.g., '64px' to account for a fixed navbar) */
@@ -1099,12 +1104,23 @@ interface TableProps<T> {
  *   columns={transactionColumns}
  *   inCard="full"
  *   stickyHeader
- *   stickyColumns="first"
+ *   stickyColumnsLeft={2}  // First 2 columns sticky
+ *   stickyColumnsRight={1} // Last column sticky
  *   stickyScrollbar
  * />
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Sticky columns by key
+ * <Table
+ *   data={data}
+ *   columns={columns}
+ *   stickyColumns={['id', 'name', 'actions']}
+ * />
+ * ```
  */
-declare function Table<T extends Record<string, unknown>>({ data, columns, onRowClick, emptyMessage, className, striped, hoverable, aligned, size, inCard, cardPadding: _cardPadding, stickyColumns, stickyHeader, stickyHeaderTop, stickyColumnsOffset, scrollable, stickyScrollbar, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, unknown>>({ data, columns, onRowClick, emptyMessage, className, striped, hoverable, aligned, size, inCard, cardPadding: _cardPadding, stickyColumns, stickyColumnsLeft, stickyColumnsRight, stickyHeader, stickyHeaderTop, stickyColumnsOffset, scrollable, stickyScrollbar, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 type FilterOperator = 'equals' | 'not_equals' | 'contains' | 'not_contains' | 'starts_with' | 'ends_with' | 'greater_than' | 'less_than' | 'greater_or_equal' | 'less_or_equal' | 'between' | 'is_empty' | 'is_not_empty';
 interface FilterField {
@@ -1254,8 +1270,14 @@ interface FilterBarProps {
     onConditionsChange?: (conditions: FilterBarCondition[]) => void;
     /** Callback when user saves current filters as a new view */
     onSaveFilter?: (name: string, conditions: FilterBarCondition[]) => void;
+    /** Callback when refresh button is clicked */
+    onRefresh?: () => void;
     /** Apply negative margin for edge-to-edge display inside a Card */
     inCard?: boolean;
+    /** When true, adds rounded top corners, negative top margin, and removes top border to merge with card header */
+    firstInCard?: boolean;
+    /** When true, adds rounded bottom corners, negative bottom margin, and removes bottom border to merge with card footer */
+    lastInCard?: boolean;
     /** Additional CSS classes */
     className?: string;
 }
@@ -1317,7 +1339,7 @@ interface FilterBarProps {
  * />
  * ```
  */
-declare function FilterBar({ tabs, activeTab, onTabChange, allowAddTab: _allowAddTab, onAddTab: _onAddTab, search, sort, fields, conditions, onConditionsChange, onSaveFilter, inCard, className, }: FilterBarProps): react_jsx_runtime.JSX.Element | null;
+declare function FilterBar({ tabs, activeTab, onTabChange, allowAddTab: _allowAddTab, onAddTab: _onAddTab, search, sort, fields, conditions, onConditionsChange, onSaveFilter, onRefresh, inCard, firstInCard, lastInCard, className, }: FilterBarProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Internal context value for Form component.

package/dist/index.js

@@ -3314,11 +3314,11 @@ function Tooltip({
           style: {
             top: position.top,
             left: position.left,
-            paddingLeft: "var(--el-tooltip-px)",
-            paddingRight: "var(--el-tooltip-px)",
-            paddingTop: "var(--el-tooltip-py)",
-            paddingBottom: "var(--el-tooltip-py)",
-            fontSize: "var(--el-font-size-md)"
+            paddingLeft: "var(--el-tooltip-px, 0.5rem)",
+            paddingRight: "var(--el-tooltip-px, 0.5rem)",
+            paddingTop: "var(--el-tooltip-py, 0.25rem)",
+            paddingBottom: "var(--el-tooltip-py, 0.25rem)",
+            fontSize: "var(--el-font-size-sm, 0.8125rem)"
           },
           role: "tooltip",
           children: content
@@ -3346,6 +3346,8 @@ function Table({
   inCard = false,
   cardPadding: _cardPadding = "md",
   stickyColumns,
+  stickyColumnsLeft,
+  stickyColumnsRight,
   stickyHeader = false,
   stickyHeaderTop,
   stickyColumnsOffset,
@@ -3414,11 +3416,26 @@ function Table({
     handleScroll();
     return () => scrollParent.removeEventListener("scroll", handleScroll);
   }, [stickyHeader]);
+  const getStickyConfig = () => {
+    const leftCount = stickyColumnsLeft ?? (stickyColumns === "first" || stickyColumns === "both" ? 1 : 0);
+    const rightCount = stickyColumnsRight ?? (stickyColumns === "last" || stickyColumns === "both" ? 1 : 0);
+    const keys = Array.isArray(stickyColumns) ? stickyColumns : [];
+    return { leftCount, rightCount, keys };
+  };
+  const { leftCount: stickyLeftCount, rightCount: stickyRightCount, keys: stickyKeys } = getStickyConfig();
+  const needsColumnMeasurement = stickyLeftCount > 1 || stickyRightCount > 1 || stickyKeys.length > 0;
   useEffect9(() => {
-    if (!stickyScrollbar && !stickyHeader || !tableContainerRef.current) return;
+    if (!stickyScrollbar && !stickyHeader && !needsColumnMeasurement || !tableContainerRef.current) return;
     const updateDimensions = () => {
       if (tableContainerRef.current) {
         setScrollWidth(tableContainerRef.current.scrollWidth);
+        if (theadRef.current && needsColumnMeasurement) {
+          const headerCells = theadRef.current.querySelectorAll("th:not(.el-table-spacer)");
+          headerCells.forEach((cell, idx) => {
+            const width = cell.getBoundingClientRect().width;
+            tableContainerRef.current?.style.setProperty(`--el-table-col-${idx}-width`, `${width}px`);
+          });
+        }
       }
       if (theadRef.current && stickyHeader) {
         const headerCells = theadRef.current.querySelectorAll("th");
@@ -3430,7 +3447,7 @@ function Table({
     const resizeObserver = new ResizeObserver(updateDimensions);
     resizeObserver.observe(tableContainerRef.current);
     return () => resizeObserver.disconnect();
-  }, [stickyScrollbar, stickyHeader, data, columns]);
+  }, [stickyScrollbar, stickyHeader, needsColumnMeasurement, data, columns]);
   const handleSort = (key) => {
     if (sortColumn === key) {
       if (sortDirection === "asc") {
@@ -3482,12 +3499,43 @@ function Table({
         return "text-left";
     }
   };
-  const isFirstSticky = stickyColumns === "first" || stickyColumns === "both";
-  const isLastSticky = stickyColumns === "last" || stickyColumns === "both";
+  const isColumnSticky = (idx, columnKey) => {
+    if (stickyKeys.includes(columnKey)) return true;
+    if (idx < stickyLeftCount) return true;
+    if (idx >= columns.length - stickyRightCount) return true;
+    return false;
+  };
+  const getStickyPosition = (idx, columnKey) => {
+    if (stickyKeys.includes(columnKey)) {
+      const isLeftSide = idx < columns.length / 2;
+      return isLeftSide ? "left" : "right";
+    }
+    if (idx < stickyLeftCount) return "left";
+    if (idx >= columns.length - stickyRightCount) return "right";
+    return null;
+  };
   const getOffsetValue = (offset) => {
     if (!offset) return "0";
     return typeof offset === "number" ? `${offset}px` : offset;
   };
+  const getStickyOffset = (idx, position) => {
+    const baseOffset = stickyColumnsOffset ? getOffsetValue(stickyColumnsOffset) : "0px";
+    const spacerWidth = "var(--el-table-spacer-width)";
+    if (position === "left") {
+      if (idx === 0) {
+        return stickyColumnsOffset ? `calc(${baseOffset} + ${spacerWidth})` : spacerWidth;
+      }
+      const prevWidths = Array.from({ length: idx }, (_, i) => `var(--el-table-col-${i}-width, 0px)`).join(" + ");
+      return stickyColumnsOffset ? `calc(${baseOffset} + ${spacerWidth} + ${prevWidths})` : `calc(${spacerWidth} + ${prevWidths})`;
+    } else {
+      const colsFromRight = columns.length - 1 - idx;
+      if (colsFromRight === 0) {
+        return stickyColumnsOffset ? `calc(${baseOffset} + ${spacerWidth})` : spacerWidth;
+      }
+      const nextWidths = Array.from({ length: colsFromRight }, (_, i) => `var(--el-table-col-${idx + 1 + i}-width, 0px)`).join(" + ");
+      return stickyColumnsOffset ? `calc(${baseOffset} + ${spacerWidth} + ${nextWidths})` : `calc(${spacerWidth} + ${nextWidths})`;
+    }
+  };
   const SpacerCell = ({ isHeader = false, position, isStriped = false, isHoverable = false }) => {
     if (!aligned) return null;
     const Component = isHeader ? "th" : "td";
@@ -3550,8 +3598,9 @@ function Table({
     columns.map((column, idx) => {
       const isFirst = idx === 0;
       const isLast = idx === columns.length - 1;
-      const shouldStickyFirst = isFirst && isFirstSticky;
-      const shouldStickyLast = isLast && isLastSticky;
+      const columnKey = String(column.key);
+      const isSticky = isColumnSticky(idx, columnKey);
+      const stickyPosition = getStickyPosition(idx, columnKey);
       const measuredWidth = isDummy && columnWidths.length > 0 && columnWidths[idx + 1] ? columnWidths[idx + 1] : void 0;
       return /* @__PURE__ */ jsx13(
         "th",
@@ -3562,8 +3611,7 @@ function Table({
             column.sortable && "cursor-pointer select-none hover:bg-wisteria-200 dark:hover:bg-wisteria-700",
             aligned && isFirst && "el-table-header-first",
             aligned && isLast && "el-table-header-last",
-            shouldStickyFirst && "sticky z-10 bg-wisteria-100 dark:bg-wisteria-800",
-            shouldStickyLast && "sticky z-10 bg-wisteria-100 dark:bg-wisteria-800",
+            isSticky && "sticky z-10 bg-wisteria-100 dark:bg-wisteria-800",
             column.className
           ),
           style: {
@@ -3572,12 +3620,12 @@ function Table({
             ...aligned && isLast && { paddingRight: 0 },
             ...column.width && { width: column.width },
             ...column.maxWidth && { maxWidth: column.maxWidth },
-            ...shouldStickyFirst && { left: stickyColumnsOffset ? `calc(${getOffsetValue(stickyColumnsOffset)} + var(--el-table-spacer-width))` : "var(--el-table-spacer-width)" },
-            ...shouldStickyLast && { right: stickyColumnsOffset ? `calc(${getOffsetValue(stickyColumnsOffset)} + var(--el-table-spacer-width))` : "var(--el-table-spacer-width)" },
+            ...isSticky && stickyPosition === "left" && { left: getStickyOffset(idx, "left") },
+            ...isSticky && stickyPosition === "right" && { right: getStickyOffset(idx, "right") },
             // Use measured width for dummy header to match main table exactly
             ...measuredWidth && { width: measuredWidth, minWidth: measuredWidth, maxWidth: measuredWidth, boxSizing: "border-box" }
           },
-          onClick: () => column.sortable && handleSort(String(column.key)),
+          onClick: () => column.sortable && handleSort(columnKey),
           children: /* @__PURE__ */ jsxs13("div", { className: cn13(
             "flex items-center el-gap-sm",
             column.align === "right" && "justify-end",
@@ -3585,10 +3633,10 @@ function Table({
             !column.wrap && "whitespace-nowrap overflow-hidden text-ellipsis"
           ), children: [
             column.header,
-            column.sortable && sortColumn === String(column.key) && /* @__PURE__ */ jsx13("span", { className: "text-xs flex-shrink-0", children: sortDirection === "asc" ? "\u2191" : "\u2193" })
+            column.sortable && sortColumn === columnKey && /* @__PURE__ */ jsx13("span", { className: "text-xs flex-shrink-0", children: sortDirection === "asc" ? "\u2191" : "\u2193" })
           ] })
         },
-        String(column.key)
+        columnKey
       );
     }),
     /* @__PURE__ */ jsx13(SpacerCell, { isHeader: true, position: "right" })
@@ -3670,8 +3718,9 @@ function Table({
                       columns.map((column, idx) => {
                         const isFirst = idx === 0;
                         const isLast = idx === columns.length - 1;
-                        const shouldStickyFirst = isFirst && isFirstSticky;
-                        const shouldStickyLast = isLast && isLastSticky;
+                        const columnKey = String(column.key);
+                        const isSticky = isColumnSticky(idx, columnKey);
+                        const stickyPosition = getStickyPosition(idx, columnKey);
                         const getStickyBgClass = () => {
                           if (isStripedRow) {
                             return "bg-wisteria-50 dark:bg-[hsl(var(--wisteria-850))]";
@@ -3692,9 +3741,9 @@ function Table({
                               getAlignClass(column.align),
                               aligned && isFirst && "el-table-cell-first",
                               aligned && isLast && "el-table-cell-last",
-                              (shouldStickyFirst || shouldStickyLast) && "sticky z-10 transition-colors duration-150",
-                              (shouldStickyFirst || shouldStickyLast) && getStickyBgClass(),
-                              (shouldStickyFirst || shouldStickyLast) && getStickyHoverClass(),
+                              isSticky && "sticky z-10 transition-colors duration-150",
+                              isSticky && getStickyBgClass(),
+                              isSticky && getStickyHoverClass(),
                               !column.wrap && "whitespace-nowrap overflow-hidden text-ellipsis",
                               column.className
                             ),
@@ -3703,16 +3752,16 @@ function Table({
                               ...aligned && isFirst && { paddingLeft: 0 },
                               ...aligned && isLast && { paddingRight: 0 },
                               ...column.maxWidth && { maxWidth: column.maxWidth },
-                              ...shouldStickyFirst && {
-                                left: stickyColumnsOffset ? `calc(${getOffsetValue(stickyColumnsOffset)} + var(--el-table-spacer-width))` : "var(--el-table-spacer-width)"
+                              ...isSticky && stickyPosition === "left" && {
+                                left: getStickyOffset(idx, "left")
                               },
-                              ...shouldStickyLast && {
-                                right: stickyColumnsOffset ? `calc(${getOffsetValue(stickyColumnsOffset)} + var(--el-table-spacer-width))` : "var(--el-table-spacer-width)"
+                              ...isSticky && stickyPosition === "right" && {
+                                right: getStickyOffset(idx, "right")
                               }
                             },
                             children: column.render ? column.render(item, index) : String(item[column.key] ?? "")
                           },
-                          String(column.key)
+                          columnKey
                         );
                       }),
                       /* @__PURE__ */ jsx13(SpacerCell, { position: "right", isStriped: isStripedRow, isHoverable: hoverable })
@@ -3984,6 +4033,7 @@ var CloseIcon = ({ className, style }) => /* @__PURE__ */ jsx15("svg", { classNa
 var PlusIcon = ({ className, style }) => /* @__PURE__ */ jsx15("svg", { className, width: "16", height: "16", style: { width: "var(--el-icon-size-sm, 1rem)", height: "var(--el-icon-size-sm, 1rem)", ...style }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) });
 var SortIcon = ({ className, style }) => /* @__PURE__ */ jsx15("svg", { className, width: "16", height: "16", style: { width: "var(--el-icon-size-sm, 1rem)", height: "var(--el-icon-size-sm, 1rem)", ...style }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) });
 var FilterIcon = ({ className, style }) => /* @__PURE__ */ jsx15("svg", { className, width: "16", height: "16", style: { width: "var(--el-icon-size-sm, 1rem)", height: "var(--el-icon-size-sm, 1rem)", ...style }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) });
+var RefreshIcon = ({ className, style }) => /* @__PURE__ */ jsx15("svg", { className, width: "16", height: "16", style: { width: "var(--el-icon-size-sm, 1rem)", height: "var(--el-icon-size-sm, 1rem)", ...style }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) });
 function useIsMobile2(breakpoint = 768) {
   const [isMobile, setIsMobile] = useState12(false);
   useEffect11(() => {
@@ -5092,7 +5142,10 @@ function FilterBar({
   conditions = [],
   onConditionsChange,
   onSaveFilter,
+  onRefresh,
   inCard = false,
+  firstInCard = false,
+  lastInCard = false,
   className
 }) {
   const isMobile = useIsMobile2();
@@ -5352,12 +5405,28 @@ function FilterBar({
     ] });
   }
   const showMainBar = tabs.length > 0 || search || sort;
-  return /* @__PURE__ */ jsxs15("div", { className: cn15("flex flex-col", className), style: { gap: "var(--el-filter-gap)" }, children: [
+  const seamlessConnection = inCard && showMainBar && isFilterPanelOpen && fields.length > 0;
+  return /* @__PURE__ */ jsxs15("div", { className: cn15("flex flex-col", className), style: { gap: seamlessConnection ? 0 : "var(--el-filter-gap)" }, children: [
     showMainBar && /* @__PURE__ */ jsxs15(
       "div",
       {
-        className: cn15("flex items-center justify-between", inCard && "el-filter-bar"),
-        style: { gap: "var(--el-gap-lg)" },
+        className: cn15(
+          "flex items-center justify-between bg-slate-100 dark:bg-slate-800 border-slate-300 dark:border-slate-600",
+          inCard ? cn15(
+            "el-filter-bar",
+            firstInCard && "el-filter-bar-first",
+            firstInCard && !seamlessConnection && "border-b",
+            !firstInCard && "border-t",
+            !seamlessConnection && !lastInCard && "border-b",
+            lastInCard && !seamlessConnection && "el-filter-bar-last border-t"
+          ) : "border rounded-lg"
+        ),
+        style: {
+          gap: "var(--el-gap-lg)",
+          paddingTop: "var(--el-gap-md)",
+          paddingBottom: "var(--el-gap-md)",
+          ...!inCard && { paddingInline: "var(--el-gap-md)" }
+        },
         children: [
           /* @__PURE__ */ jsxs15("div", { className: "flex items-center min-w-0 flex-1 overflow-x-auto hide-native-scrollbar", style: { gap: "var(--el-gap-sm)" }, children: [
             tabs.map((tab) => /* @__PURE__ */ jsxs15(
@@ -5421,6 +5490,16 @@ function FilterBar({
                     children: "Save"
                   }
                 ),
+                onRefresh && /* @__PURE__ */ jsx15(
+                  "button",
+                  {
+                    onClick: onRefresh,
+                    className: "text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors",
+                    style: { padding: "var(--el-filter-pill-py)" },
+                    title: "Refresh",
+                    children: /* @__PURE__ */ jsx15(RefreshIcon, {})
+                  }
+                ),
                 search && /* @__PURE__ */ jsx15("div", { className: "relative", children: isSearchOpen ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center", children: [
                   /* @__PURE__ */ jsx15(
                     "input",
@@ -5568,11 +5647,22 @@ function FilterBar({
     isFilterPanelOpen && fields.length > 0 && /* @__PURE__ */ jsxs15(
       "div",
       {
-        className: "el-filter-bar flex items-center bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg",
+        className: cn15(
+          "flex items-center bg-slate-100 dark:bg-slate-800 border-slate-300 dark:border-slate-600",
+          inCard ? cn15(
+            "el-filter-bar",
+            // If no main bar, filter pills can be first
+            !showMainBar && firstInCard && "el-filter-bar-first",
+            lastInCard && "el-filter-bar-last",
+            !lastInCard && "border-b",
+            !seamlessConnection && !(!showMainBar && firstInCard) && "border-t"
+          ) : "border rounded-lg"
+        ),
         style: {
           gap: "var(--el-gap-md)",
           paddingTop: "var(--el-gap-md)",
-          paddingBottom: "var(--el-gap-md)"
+          paddingBottom: "var(--el-gap-md)",
+          ...!inCard && { paddingInline: "var(--el-gap-md)" }
         },
         children: [
           /* @__PURE__ */ jsxs15(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elsapiens/ui",
-  "version": "0.1.0",
+  "version": "0.1.4",
   "description": "UI components for elSapiens SDK",
   "license": "MIT",
   "type": "module",
@@ -20,11 +20,22 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --external react --external react-dom --external lucide-react",
+    "dev": "tsup src/index.ts --format esm --dts --watch --external react --external react-dom --external lucide-react",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
+    "@elsapiens/utils": "^0.1.0",
     "date-fns": "^3.6.0",
     "lucide-react": "^0.468.0",
-    "recharts": "^3.7.0",
-    "@elsapiens/utils": "0.1.0"
+    "recharts": "^3.7.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -38,13 +49,5 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
-  },
-  "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --clean --external react --external react-dom --external lucide-react",
-    "dev": "tsup src/index.ts --format esm --dts --watch --external react --external react-dom --external lucide-react",
-    "clean": "rm -rf dist",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest"
   }
-}
+}