@elsapiens/ui 0.1.0 → 0.1.6

package/dist/index.d.ts

@@ -609,6 +609,12 @@ interface ModalProps {
     children: ReactNode;
     /** Optional footer content (typically action buttons) */
     footer?: ReactNode;
+    /** Whether the modal body should be scrollable (default: true) */
+    scrollable?: boolean;
+    /** Whether the modal body should have padding (default: true) */
+    padded?: boolean;
+    /** Custom header content, replaces the default title bar */
+    header?: ReactNode;
 }
 /**
  * A dialog overlay component for displaying content that requires user attention.
@@ -660,7 +666,7 @@ interface ModalProps {
  *   <ImportantFormThatShouldNotBeAccidentallyClosed />
  * </Modal>
  */
-declare function Modal({ isOpen, onClose, title, description, size, closeOnOutsideClick, closeOnEscape, showCloseButton, children, footer, }: ModalProps): react.ReactPortal | null;
+declare function Modal({ isOpen, onClose, title, description, size, closeOnOutsideClick, closeOnEscape, showCloseButton, children, footer, scrollable, padded, header, }: ModalProps): react.ReactPortal | null;
 /**
  * Props for the ConfirmDialog component.
  */
@@ -856,6 +862,10 @@ interface TooltipProps {
     delayDuration?: number;
     /** Additional CSS classes for the tooltip */
     className?: string;
+    /** Additional CSS classes for the trigger wrapper element */
+    wrapperClassName?: string;
+    /** Additional inline styles for the trigger wrapper element (useful for fixed positioning) */
+    wrapperStyle?: React.CSSProperties;
 }
 /**
  * A floating label that appears on hover/focus to provide additional context.
@@ -892,7 +902,7 @@ interface TooltipProps {
  *   <InfoIcon />
  * </Tooltip>
  */
-declare function Tooltip({ content, children, side, delayDuration, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ content, children, side, delayDuration, className, wrapperClassName, wrapperStyle, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Hook to detect mobile viewport based on window width.
@@ -1028,8 +1038,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 +1114,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 +1280,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 +1349,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

@@ -2838,7 +2838,10 @@ function Modal({
   closeOnEscape = true,
   showCloseButton = true,
   children,
-  footer
+  footer,
+  scrollable = true,
+  padded = true,
+  header
 }) {
   const modalRef = useRef7(null);
   const previousActiveElement = useRef7(null);
@@ -2911,7 +2914,7 @@ function Modal({
                 ),
                 onClick: (e) => e.stopPropagation(),
                 children: [
-                  (title || showCloseButton) && /* @__PURE__ */ jsxs10(
+                  header ? /* @__PURE__ */ jsx10("div", { className: "flex-none rounded-t-lg bg-card border-b border-border", children: header }) : title || showCloseButton ? /* @__PURE__ */ jsxs10(
                     "div",
                     {
                       className: "flex items-start justify-between border-b border-border bg-card rounded-t-lg",
@@ -2958,12 +2961,15 @@ function Modal({
                         )
                       ]
                     }
-                  ),
+                  ) : null,
                   /* @__PURE__ */ jsx10(
                     "div",
                     {
-                      className: "overflow-y-auto flex-1 min-h-0",
-                      style: { padding: "var(--modal-padding)" },
+                      className: cn10(
+                        "flex-1 min-h-0",
+                        scrollable ? "overflow-y-auto" : "overflow-hidden"
+                      ),
+                      style: padded ? { padding: "var(--modal-padding)" } : void 0,
                       children
                     }
                   ),
@@ -3238,7 +3244,9 @@ function Tooltip({
   children,
   side = "top",
   delayDuration = 200,
-  className
+  className,
+  wrapperClassName,
+  wrapperStyle
 }) {
   const [isOpen, setIsOpen] = useState9(false);
   const [position, setPosition] = useState9({ top: 0, left: 0 });
@@ -3290,7 +3298,8 @@ function Tooltip({
       "div",
       {
         ref: triggerRef,
-        className: "inline-block",
+        className: cn12("inline-block", wrapperClassName),
+        style: wrapperStyle,
         onMouseEnter: showTooltip,
         onMouseLeave: hideTooltip,
         onFocus: showTooltip,
@@ -3314,11 +3323,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 +3355,8 @@ function Table({
   inCard = false,
   cardPadding: _cardPadding = "md",
   stickyColumns,
+  stickyColumnsLeft,
+  stickyColumnsRight,
   stickyHeader = false,
   stickyHeaderTop,
   stickyColumnsOffset,
@@ -3414,11 +3425,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 +3456,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 +3508,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 +3607,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 +3620,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 +3629,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 +3642,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 +3727,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 +3750,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 +3761,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 +4042,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 +5151,10 @@ function FilterBar({
   conditions = [],
   onConditionsChange,
   onSaveFilter,
+  onRefresh,
   inCard = false,
+  firstInCard = false,
+  lastInCard = false,
   className
 }) {
   const isMobile = useIsMobile2();
@@ -5352,12 +5414,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 +5499,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 +5656,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(
@@ -6515,7 +6614,7 @@ var NumericInput = forwardRef12(
     const displayValue = value !== null && value !== void 0 ? String(value) : "";
     return /* @__PURE__ */ jsxs21("div", { className: "w-full", children: [
       /* @__PURE__ */ jsxs21("div", { className: "relative", children: [
-        prefix && /* @__PURE__ */ jsx22("div", { className: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-muted-foreground", children: prefix }),
+        prefix && /* @__PURE__ */ jsx22("div", { className: "el-input-prefix-icon", children: prefix }),
         /* @__PURE__ */ jsx22(
           "input",
           {
@@ -6529,14 +6628,14 @@ var NumericInput = forwardRef12(
             className: cn22(
               "el-input el-input-md el-numeric-input",
               error && "el-input-invalid",
-              prefix && "pl-8",
-              suffix && "pr-8",
+              prefix && "el-input-has-prefix-narrow",
+              suffix && "el-input-has-suffix",
               className
             ),
             ...props
           }
         ),
-        suffix && /* @__PURE__ */ jsx22("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-muted-foreground", children: suffix })
+        suffix && /* @__PURE__ */ jsx22("div", { className: "el-input-suffix-icon", children: suffix })
       ] }),
       !hideMessage && error && /* @__PURE__ */ jsx22("div", { className: "el-field-message", children: /* @__PURE__ */ jsx22("p", { className: "el-field-error", children: error }) })
     ] });
@@ -6665,10 +6764,10 @@ function PhoneInput({
           hasError && "el-input-invalid"
         ),
         children: [
-          /* @__PURE__ */ jsx23("div", { className: "flex-shrink-0 border-r border-input flex items-stretch overflow-hidden pl-2", children: /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx23("div", { className: "flex-shrink-0 border-r border-input flex items-center el-pl-md", children: /* @__PURE__ */ jsx23(
             SearchableSelect,
             {
-              className: "!border-0 !h-full !shadow-none !ring-0 !outline-none focus:!ring-0 focus:!outline-none focus-within:!ring-0 focus-within:!outline-none !rounded-none min-w-[100px] [&>button]:!border-0 [&>button]:!shadow-none [&>button]:!ring-0 [&>button]:!rounded-none [&>button]:h-full [&>button]:!ml-0",
+              className: "!border-0 !shadow-none !ring-0 !outline-none focus:!ring-0 focus:!outline-none focus-within:!ring-0 focus-within:!outline-none !rounded-none [&>button]:!border-0 [&>button]:!shadow-none [&>button]:!ring-0 [&>button]:!rounded-none [&>button]:!bg-transparent [&>button>svg]:hidden [&>button]:el-px-md",
               disabled,
               options: COUNTRY_OPTIONS,
               placeholder: "Country",
@@ -12995,9 +13094,9 @@ var Summary = forwardRef44(
                 ref: scrollContainerRef,
                 className: "overflow-x-auto hide-native-scrollbar",
                 onScroll: handleScroll,
-                children: /* @__PURE__ */ jsx58("div", { ref: itemsContainerRef, className: "flex items-center", children: items.map((item, index) => /* @__PURE__ */ jsxs49("div", { className: "flex items-center", children: [
+                children: /* @__PURE__ */ jsx58("div", { ref: itemsContainerRef, className: "flex items-center el-px-md", children: items.map((item, index) => /* @__PURE__ */ jsxs49("div", { className: "flex items-center", children: [
                   /* @__PURE__ */ jsx58(SummaryItem, { ...item }),
-                  showDividers && index < items.length - 1 && /* @__PURE__ */ jsx58("div", { className: "w-px h-8 bg-border flex-shrink-0" })
+                  showDividers && index < items.length - 1 && /* @__PURE__ */ jsx58("div", { className: "w-px h-8 bg-border flex-shrink-0 el-mx-md" })
                 ] }, index)) })
               }
             ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elsapiens/ui",
-  "version": "0.1.0",
+  "version": "0.1.6",
   "description": "UI components for elSapiens SDK",
   "license": "MIT",
   "type": "module",
@@ -20,11 +20,14 @@
   "files": [
     "dist"
   ],
+  "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",