alope-ui 1.2.10 → 1.2.12

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

@@ -13,6 +13,8 @@ export type TableType<T> = {
     data: T[];
     striped?: boolean;
     stripeColor?: string;
+    hoverable?: boolean;
+    hoverColor?: string;
     headerClassName?: string;
     dataColumnClassName?: string;
     dataRowClassName?: string;
@@ -30,5 +32,5 @@ export type TableType<T> = {
 };
 export declare function Table<T extends {
     id: any;
-}>({ columns, data, striped, stripeColor, headerClassName, dataColumnClassName, dataRowClassName, customEmptyData, tableClassName, captionClassName, containerClassName, size, caption, captionPosition, stickyHeader, selectable, onSelectionChange, selectedRows, }: TableType<T>): import("react/jsx-runtime").JSX.Element;
+}>({ columns, data, striped, stripeColor, hoverable, hoverColor, headerClassName, dataColumnClassName, dataRowClassName, customEmptyData, tableClassName, captionClassName, containerClassName, size, caption, captionPosition, stickyHeader, selectable, onSelectionChange, selectedRows, }: TableType<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main.cjs

@@ -107,9 +107,9 @@ return{left:`calc(${100*r}% + ${r*-v+v/2}px)`,opacity:k?1:0,pointerEvents:"none"
 const r=Number(d)-Number(n),t=Math.floor(r/Number(i)),s=Array.from({length:t+1},(r,s)=>{const o=s/t*100
 return e.jsx("div",{className:a.cn("absolute top-1/2 -translate-y-1/2 w-[2px] h-2 rounded-full",y),style:{left:`${o}%`}},s)})
 return e.jsx("div",{className:"absolute top-full mt-2 -left-0.5 -right-0.5 h-2 me-[11px] ms-[9px]",children:s})})()]}),g,e.jsx("div",{className:"w-32",children:e.jsx(j,{min:n,max:d,step:i,type:Number(c)<=0?"text":"number",value:Number(c)<=0?"":c,onChange:p})})]})]})},exports.Spinner=({color:r="primary",size:t="md",className:s,duration:o=1e3,thickness:n})=>{const l=J[r],d=_[t],i=`${o}ms`,c=n&&`${n}px`
-return e.jsx("span",{className:a.cn(d,l,"flex rounded-full animate-spin",s,"border-t-transparent dark:border-t-transparent"),style:{animationDuration:i,borderWidth:c}})},exports.Table=function({columns:r,data:t,striped:s=!1,stripeColor:o,headerClassName:n,dataColumnClassName:l,dataRowClassName:d,customEmptyData:i,tableClassName:c,captionClassName:m,containerClassName:u,size:p="md",caption:x,captionPosition:b="bottom",stickyHeader:g=!1,selectable:h=!1,onSelectionChange:k,selectedRows:f=[]}){const w=Q[p],v=t.length>0&&f.length===t.length,N=f.length>0&&f.length<t.length
-return e.jsxs("div",{className:a.cn("overflow-x-auto w-full",g&&"max-h-[400px] overflow-y-auto",u),children:[x&&"top"===b&&e.jsx("p",{className:a.cn("text-center text-sm font-medium mb-1 dark:text-white",m),children:x}),e.jsxs("table",{className:a.cn("relative min-w-full outline outline-gray-200 dark:outline-gray-600",w,c),children:[e.jsx("thead",{className:a.cn("dark:bg-gray-700 dark:text-white",n),children:e.jsxs("tr",{children:[h&&e.jsx("th",{className:a.cn("px-4 py-2 text-left text-sm border-b dark:border-b-secondary-700",w,g&&"sticky top-0 bg-secondary dark:bg-gray-700 z-10",n),children:e.jsx(y,{checked:v,indeterminate:N,onChange:e=>{e.target.checked?k?.(t):k?.([])}})}),r.map((r,t)=>e.jsx("th",{className:a.cn("px-4 py-2 text-left text-sm border-b dark:border-b-secondary-700",w,g&&"sticky top-0 bg-secondary dark:bg-gray-700 z-10",n),children:r.header},t))]})}),e.jsx("tbody",{className:"dark:bg-gray-800 dark:text-white",children:t.length>0?t.map((t,n)=>e.jsxs("tr",{className:a.cn("hover:bg-gray-700 hover:text-white dark:hover:bg-gray-600 transition-colors",s&&n%2!=0&&(o??"bg-gray-300 dark:bg-gray-700"),d),children:[h&&e.jsx("td",{className:a.cn("px-4 py-2 border-b border-secondary-700 dark:border-secondary-dark-700",(s||o)&&"border-none",l,w),children:e.jsx(y,{checked:f.some(e=>e.id===t.id),onChange:()=>(e=>{const r=f.some(r=>r.id===e.id)
-k?.(r?f.filter(r=>r.id!==e.id):[...f,e])})(t)})}),r.map((r,n)=>e.jsx("td",{className:a.cn("px-4 py-2 border-b border-secondary-700 dark:border-secondary-dark-700",(s||o)&&"border-none",l,w),children:r.render?r.render(t[r.accessor],t):String(t[r.accessor])},n))]},n)):e.jsx("tr",{children:e.jsx("td",{colSpan:r.length+(h?1:0),className:a.cn("px-4 py-6 text-center",w),children:i??"Tidak ada data."})})})]}),x&&"bottom"===b&&e.jsx("p",{className:a.cn("text-center text-sm font-medium mt-1 dark:text-white",m),children:x})]})},exports.Tabs=({tabs:t,fitted:s,variant:o="line",wrapperClassName:n,buttonClassName:l,activeClassName:d,inactiveClassName:i,activeTab:c,onTabChange:m})=>{const[u,p]=r.useState(0),x=void 0!==c&&void 0!==m,b=x?c:u,g=ee[o],h=re[o],k=r.useRef([]),f=r.useRef(null)
+return e.jsx("span",{className:a.cn(d,l,"flex rounded-full animate-spin",s,"border-t-transparent dark:border-t-transparent"),style:{animationDuration:i,borderWidth:c}})},exports.Table=function({columns:r,data:t,striped:s=!1,stripeColor:o,hoverable:n=!0,hoverColor:l,headerClassName:d,dataColumnClassName:i,dataRowClassName:c,customEmptyData:m,tableClassName:u,captionClassName:p,containerClassName:x,size:b="md",caption:g,captionPosition:h="bottom",stickyHeader:k=!1,selectable:f=!1,onSelectionChange:w,selectedRows:v=[]}){const N=Q[b],j=t.length>0&&v.length===t.length,C=v.length>0&&v.length<t.length
+return e.jsxs("div",{className:a.cn("overflow-x-auto w-full",k&&"max-h-[400px] overflow-y-auto",x),children:[g&&"top"===h&&e.jsx("p",{className:a.cn("text-center text-sm font-medium mb-1 dark:text-white",p),children:g}),e.jsxs("table",{className:a.cn("relative min-w-full outline outline-gray-200 dark:outline-gray-600",N,u),children:[e.jsx("thead",{className:a.cn("dark:bg-gray-700 dark:text-white",d),children:e.jsxs("tr",{children:[f&&e.jsx("th",{className:a.cn("px-4 py-2 text-left text-sm border-b dark:border-b-secondary-700",N,k&&"sticky top-0 bg-secondary dark:bg-gray-700 z-10",d),children:e.jsx(y,{checked:j,indeterminate:C,onChange:e=>{e.target.checked?w?.(t):w?.([])}})}),r.map((r,t)=>e.jsx("th",{className:a.cn("px-4 py-2 text-left text-sm border-b dark:border-b-secondary-700",N,k&&"sticky top-0 bg-secondary dark:bg-gray-700 z-10",d),children:r.header},t))]})}),e.jsx("tbody",{className:"dark:bg-gray-800 dark:text-white",children:t.length>0?t.map((t,d)=>e.jsxs("tr",{className:a.cn("transition-colors",s&&d%2!=0&&(o??"bg-gray-300 dark:bg-gray-700"),n&&(l??"hover:bg-gray-700 hover:text-white dark:hover:bg-gray-600"),c),children:[f&&e.jsx("td",{className:a.cn("px-4 py-2 border-b border-secondary-700 dark:border-secondary-dark-700",(s||o)&&"border-none",i,N),children:e.jsx(y,{checked:v.some(e=>e.id===t.id),onChange:()=>(e=>{const r=v.some(r=>r.id===e.id)
+w?.(r?v.filter(r=>r.id!==e.id):[...v,e])})(t)})}),r.map((r,n)=>e.jsx("td",{className:a.cn("px-4 py-2 border-b border-secondary-700 dark:border-secondary-dark-700",(s||o)&&"border-none",i,N),children:r.render?r.render(t[r.accessor],t):String(t[r.accessor])},n))]},t.id??d)):e.jsx("tr",{children:e.jsx("td",{colSpan:r.length+(f?1:0),className:a.cn("px-4 py-6 text-center",N),children:m??"Tidak ada data."})})})]}),g&&"bottom"===h&&e.jsx("p",{className:a.cn("text-center text-sm font-medium mt-1 dark:text-white",p),children:g})]})},exports.Tabs=({tabs:t,fitted:s,variant:o="line",wrapperClassName:n,buttonClassName:l,activeClassName:d,inactiveClassName:i,activeTab:c,onTabChange:m})=>{const[u,p]=r.useState(0),x=void 0!==c&&void 0!==m,b=x?c:u,g=ee[o],h=re[o],k=r.useRef([]),f=r.useRef(null)
 return r.useEffect(()=>{!x&&b>=t.length&&p(Math.max(0,t.length-1))},[t,b,x]),r.useEffect(()=>{const e=k.current[b],r=f.current
 if(e&&r){const a=e.offsetLeft,t=e.offsetWidth
 r.style.transform=`translateX(${a}px)`,r.style.width=`${t}px`,e.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})}},[b,t]),e.jsxs("div",{children:[e.jsx("div",{className:a.cn("relative",g.wrapper,n),children:e.jsxs("nav",{className:"relative -mb-px flex space-x-2 overflow-x-auto scroll-smooth","aria-label":"Tabs",children:[t.map((r,t)=>{const o=a.cn("hover:cursor-pointer",s&&"flex-1",g.button,l,b===t?a.cn(g.active,d):a.cn(g.inactive,i),r.disabled&&"hover:cursor-not-allowed cursor-not-allowed opacity-50")

package/dist/main.js

@@ -2753,6 +2753,8 @@ function Table({
   data,
   striped = false,
   stripeColor,
+  hoverable = true,
+  hoverColor,
   headerClassName,
   dataColumnClassName,
   dataRowClassName,
@@ -2826,7 +2828,12 @@ function Table({
       /* @__PURE__ */ jsx("tbody", { className: "dark:bg-gray-800 dark:text-white", children: data.length > 0 ? data.map((row, rIdx) => /* @__PURE__ */ jsxs(
         "tr",
         {
-          className: cn("hover:bg-gray-700 hover:text-white dark:hover:bg-gray-600 transition-colors", striped && rIdx % 2 !== 0 && (stripeColor ?? "bg-gray-300 dark:bg-gray-700"), dataRowClassName),
+          className: cn(
+            "transition-colors",
+            striped && rIdx % 2 !== 0 && (stripeColor ?? "bg-gray-300 dark:bg-gray-700"),
+            hoverable && (hoverColor ?? "hover:bg-gray-700 hover:text-white dark:hover:bg-gray-600"),
+            dataRowClassName
+          ),
           children: [
             selectable && /* @__PURE__ */ jsx("td", { className: cn("px-4 py-2 border-b border-secondary-700 dark:border-secondary-dark-700", (striped || stripeColor) && "border-none", dataColumnClassName, tableSizeClass), children: /* @__PURE__ */ jsx(
               CheckboxInput,
@@ -2845,7 +2852,7 @@ function Table({
             ))
           ]
         },
-        rIdx
+        row.id ?? rIdx
       )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
         "td",
         {

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/Alope-Community/alope-ui.git"
   },
-  "version": "1.2.10",
+  "version": "1.2.12",
   "type": "module",
   "files": [
     "dist"
@@ -38,6 +38,7 @@
     "react-select": "^5.10.1"
   },
   "dependencies": {
+    "alope-ui": "^1.2.9",
     "lucide-react": "^0.542.0",
     "next-themes": "^0.4.6",
     "prism-react-renderer": "^2.4.1",