qaema-ui 0.0.61 → 0.0.63

package/dist/components/Table/Table.styles.js

@@ -1,4 +1,4 @@
-import r, { css as n } from "styled-components";
+import r, { css as e } from "styled-components";
 import { Scrollbar as s } from "../../styles/Scrollbar.styles.js";
 r.button`
   background: none;
@@ -52,7 +52,7 @@ const a = r.div`
   color: ${({ theme: o }) => o.colors.grey.n600};
 
   &:hover {
-    background-color: ${({ theme: o, $disabled: e }) => e ? "transparent" : o.colors.primary.purple.n100};
+    background-color: ${({ theme: o, $disabled: n }) => n ? "transparent" : o.colors.primary.purple.n100};
   }
 
   svg {
@@ -62,7 +62,7 @@ const a = r.div`
   width: 100%;
   position: relative;
   border-radius: ${({ theme: o }) => o.borderRadius.md};
-  box-shadow: ${({ theme: o }) => o.boxShadow.s2};
+  /* box-shadow: ${({ theme: o }) => o.boxShadow.s2}; */
   background-color: ${({ theme: o }) => o.colors.grey.n50};
   overflow-x: hidden;
   overflow-y: auto;
@@ -79,7 +79,7 @@ r(s)`
   -webkit-overflow-scrolling: touch;
 `;
 const u = r.thead`
-  ${({ $sticky: o }) => o && n`
+  ${({ $sticky: o }) => o && e`
       top: 0;
     `}
 `, $ = r.tr`
@@ -99,61 +99,73 @@ const u = r.thead`
   height: 3.5rem;
 
   /* Apply sticky positioning for first and last columns */
-  ${({ $isFirstColumn: o }) => o && n`
+  ${({ $isFirstColumn: o }) => o && e`
       left: 0;
       /* z-index: 2; */
     `}
 
-  ${({ $isLastColumn: o }) => o && n`
+  ${({ $isLastColumn: o }) => o && e`
       right: 0;
       /* z-index: 2; */
       text-align: end;
     `}
-        ${({ $isActionCell: o }) => o && n`
-      padding: ${({ theme: e }) => e.spacing.sm} 0;
+        ${({ $isActionCell: o }) => o && e`
+      padding: ${({ theme: n }) => n.spacing.sm} 0;
       text-align: center;
     `}
  
   &:hover {
-    ${({ $sortable: o }) => o && n`
-        background-color: ${({ theme: e }) => e.colors.grey.n150};
+    ${({ $sortable: o }) => o && e`
+        background-color: ${({ theme: n }) => n.colors.grey.n150};
       `}
   }
-`, y = r.tbody``, x = r.tr`
-  background-color: ${({ theme: o, $selected: e }) => e ? o.colors.primary.purple.n100 : o.colors.grey.n50};
+`, y = r.tbody``, m = r.tr`
+  background-color: ${({ theme: o, $selected: n }) => n ? o.colors.primary.purple.n100 : o.colors.grey.n50};
   height: 3.5rem;
-  ${({ $disabled: o }) => o && n`
+  transition: background-color 0.2s;
+
+  ${({ $disabled: o }) => o && e`
       opacity: 0.6;
       pointer-events: none;
     `}
 
-  ${({ $clickable: o }) => o && n`
+  ${({ $clickable: o }) => o && e`
       cursor: pointer;
     `}
-`, h = r.td`
+
+  &:hover {
+    ${({ $disabled: o }) => !o && e`
+        background-color: ${({ theme: n }) => n.colors.grey.n100};
+
+        td {
+          background-color: ${({ theme: n }) => n.colors.grey.n100};
+        }
+      `}
+  }
+`, x = r.td`
   padding: ${({ theme: o }) => o.spacing.s} ${({ theme: o }) => o.spacing.sm};
   text-align: ${({ $align: o }) => o ?? "left"};
-  /* border-bottom: 1px solid ${({ theme: o }) => o.colors.grey.n150}; */
+  border-bottom: 1px solid ${({ theme: o }) => o.colors.grey.n150};
   color: ${({ theme: o }) => o.colors.grey.n700};
   /* min-height: 3.5rem;
   max-height: 3.5rem; */
   background-color: ${({ theme: o }) => o.colors.grey.n50};
   /* height: 3.5rem; */
   /* Apply sticky positioning for first and last columns */
-  ${({ $isFirstColumn: o }) => o && n`
+  ${({ $isFirstColumn: o }) => o && e`
       z-index: 1;
       left: 0;
     `}
 
-  ${({ $isLastColumn: o }) => o && n`
+  ${({ $isLastColumn: o }) => o && e`
       right: 0;
       width: 0px;
       z-index: 1;
       background-color: transparent;
     `}
 
-      ${({ $isActionCell: o }) => o && n`
-      padding: 0 ${({ theme: e }) => e.spacing.sm};
+      ${({ $isActionCell: o }) => o && e`
+      padding: 0 ${({ theme: n }) => n.spacing.sm};
     `}
 `;
 r.span`
@@ -161,7 +173,7 @@ r.span`
   align-items: center;
   margin-left: ${({ theme: o }) => o.spacing.xxs};
 `;
-const m = r.div`
+const h = r.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -192,30 +204,30 @@ r.span`
   font-size: ${({ theme: o }) => o.typography.sizes.s2};
   font-weight: ${({ theme: o }) => o.typography.weights.semiBold};
 
-  ${({ theme: o, $variant: e }) => {
-  switch (e) {
+  ${({ theme: o, $variant: n }) => {
+  switch (n) {
     case "primary":
-      return n`
+      return e`
           background-color: ${o.colors.primary.purple.n100};
           color: ${o.colors.primary.purple.n500};
         `;
     case "success":
-      return n`
+      return e`
           background-color: ${o.colors.state.success.n100};
           color: ${o.colors.state.success.n500};
         `;
     case "warning":
-      return n`
+      return e`
           background-color: ${o.colors.secondary.yellow.n200};
           color: ${o.colors.secondary.yellow.n600};
         `;
     case "error":
-      return n`
+      return e`
           background-color: ${o.colors.state.error.n100};
           color: ${o.colors.state.error.n500};
         `;
     default:
-      return n`
+      return e`
           background-color: ${o.colors.grey.n200};
           color: ${o.colors.grey.n600};
         `;
@@ -228,8 +240,8 @@ r.span`
   height: 0.5rem;
   border-radius: 50%;
   margin-right: ${({ theme: o }) => o.spacing.xxs};
-  background-color: ${({ theme: o, $status: e }) => {
-  switch (e) {
+  background-color: ${({ theme: o, $status: n }) => {
+  switch (n) {
     case "success":
       return o.colors.state.success.n500;
     case "warning":
@@ -245,9 +257,11 @@ const k = r.div`
   display: flex;
   position: relative;
   width: 100%;
+  gap: 0;
 `, v = r(s)`
   flex: 1 1 auto;
   overflow-x: auto;
+  overflow-y: hidden;
   min-width: 0;
   &::-webkit-scrollbar {
     height: ${({ theme: o }) => o.spacing.s};
@@ -256,12 +270,11 @@ const k = r.div`
     height: ${({ theme: o }) => o.spacing.s};
   }
 `, T = r(t)`
-  /* position: sticky;
-  right: 0; */
   flex: 0 0 auto;
-  width: 6rem; /* adjust to your icon width */
+  width: auto;
   table-layout: fixed;
   background-color: ${({ theme: o }) => o.colors.grey.n50};
+  margin-bottom: ${({ theme: o, $hasScrollbar: n }) => n ? o.spacing.s : "0"};
 `;
 export {
   T as ActionsTable,
@@ -275,11 +288,11 @@ export {
   t as StyledTable,
   u as StyledTableHead,
   y as TableBody,
-  h as TableCellContainer,
+  x as TableCellContainer,
   g as TableContainer,
-  m as TableFooter,
+  h as TableFooter,
   b as TableHeaderCell,
   $ as TableHeaderRow,
-  x as TableRow,
+  m as TableRow,
   k as TablesWrapper
 };

package/dist/components/Table/Table.types.d.ts

@@ -50,6 +50,7 @@ export type TableProps<T> = {
         onItemsPerPageChange?: (itemsPerPage: number) => void;
     };
     onRowClick?: (row: T) => void;
+    onClickView?: (row: T) => void;
     rowClassName?: (row: T, index: number) => string;
     isRowDisabled?: (row: T) => boolean;
     breakpoint?: string;

package/dist/node_modules/react-icons/fi/index.js

@@ -22,6 +22,9 @@ function u(t) {
   return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "12", y1: "5", x2: "12", y2: "19" }, child: [] }, { tag: "line", attr: { x1: "5", y1: "12", x2: "19", y2: "12" }, child: [] }] })(t);
 }
 function s(t) {
+  return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "circle", attr: { cx: "11", cy: "11", r: "8" }, child: [] }, { tag: "line", attr: { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }, child: [] }] })(t);
+}
+function h(t) {
   return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "18", y1: "6", x2: "6", y2: "18" }, child: [] }, { tag: "line", attr: { x1: "6", y1: "6", x2: "18", y2: "18" }, child: [] }] })(t);
 }
 export {
@@ -32,5 +35,6 @@ export {
   a as FiMinus,
   d as FiMoreHorizontal,
   u as FiPlus,
-  s as FiX
+  s as FiSearch,
+  h as FiX
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qaema-ui",
   "private": false,
-  "version": "0.0.61",
+  "version": "0.0.63",
   "type": "module",
   "publishConfig": {
     "access": "public"