@sikka/hawa 0.15.8-next → 0.15.11-next

package/dist/index.css

@@ -1181,6 +1181,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-max-h-\[300px\] {
   max-height: 300px;
 }
+.hawa-max-h-\[400px\] {
+  max-height: 400px;
+}
 .hawa-max-h-fit {
   max-height: -moz-fit-content;
   max-height: fit-content;
@@ -1905,6 +1908,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
+.hawa-bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+}
 .hawa-bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@@ -1977,6 +1984,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
 }
+.hawa-bg-green-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+}
 .hawa-bg-green-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(74 222 128 / var(--tw-bg-opacity));
@@ -2043,6 +2054,14 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
+.hawa-bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+.hawa-bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
 .hawa-bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));

package/dist/index.d.mts

@@ -635,7 +635,8 @@ type DataTableProps<DataProps = {}> = {
 };
 declare module "@tanstack/table-core" {
     interface ColumnMeta<TData extends RowData, TValue> {
-        sortable: any;
+        padding?: "condensed" | "default" | "noPadding";
+        sortable?: boolean;
     }
 }
 declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React$1.JSX.Element;
@@ -648,6 +649,7 @@ type SimpleTableProps = {
     condensed?: boolean;
     isLoading?: boolean;
     defaultSort?: string;
+    classNames?: string;
     texts?: {
         searchPlaceholder?: string;
         noData?: any;
@@ -659,7 +661,7 @@ type SimpleTableProps = {
 };
 declare module "@tanstack/table-core" {
     interface ColumnMeta<TData extends RowData, TValue> {
-        sortable: any;
+        padding?: "condensed" | "default" | "noPadding";
     }
 }
 declare const SimpleTable: React$1.FC<SimpleTableProps>;
@@ -676,6 +678,8 @@ declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttribu
 declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
 interface TableCellProps extends React$1.TdHTMLAttributes<HTMLTableCellElement> {
     condensed?: boolean;
+    enablePadding?: boolean;
+    padding?: "condensed" | "default" | "noPadding";
 }
 declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;

package/dist/index.d.ts

@@ -635,7 +635,8 @@ type DataTableProps<DataProps = {}> = {
 };
 declare module "@tanstack/table-core" {
     interface ColumnMeta<TData extends RowData, TValue> {
-        sortable: any;
+        padding?: "condensed" | "default" | "noPadding";
+        sortable?: boolean;
     }
 }
 declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React$1.JSX.Element;
@@ -648,6 +649,7 @@ type SimpleTableProps = {
     condensed?: boolean;
     isLoading?: boolean;
     defaultSort?: string;
+    classNames?: string;
     texts?: {
         searchPlaceholder?: string;
         noData?: any;
@@ -659,7 +661,7 @@ type SimpleTableProps = {
 };
 declare module "@tanstack/table-core" {
     interface ColumnMeta<TData extends RowData, TValue> {
-        sortable: any;
+        padding?: "condensed" | "default" | "noPadding";
     }
 }
 declare const SimpleTable: React$1.FC<SimpleTableProps>;
@@ -676,6 +678,8 @@ declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttribu
 declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
 interface TableCellProps extends React$1.TdHTMLAttributes<HTMLTableCellElement> {
     condensed?: boolean;
+    enablePadding?: boolean;
+    padding?: "condensed" | "default" | "noPadding";
 }
 declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;

package/dist/index.js

@@ -5484,7 +5484,7 @@ var Table = React42.forwardRef(function(_param, ref) /* @__PURE__ */ {
         "className"
     ]);
     return React42.createElement("div", {
-        className: "hawa-relative hawa-w-full hawa-overflow-auto hawa-rounded hawa-border"
+        className: "hawa-relative hawa-w-full  hawa-overflow-auto hawa-rounded hawa-border"
     }, /* @__PURE__ */ React42.createElement("table", _object_spread({
         ref: ref,
         className: cn("hawa-w-full hawa-caption-bottom hawa-text-sm", className)
@@ -5543,14 +5543,24 @@ var TableRow = React42.forwardRef(function(_param, ref) /* @__PURE__ */ {
     }, props));
 });
 TableRow.displayName = "TableRow";
-var TableCell = React42.forwardRef(function(_param, ref) /* @__PURE__ */ {
-    var className = _param.className, props = _object_without_properties(_param, [
-        "className"
+var TableCell = React42.forwardRef(function(_param, ref) {
+    var className = _param.className, _param_enablePadding = _param.enablePadding, enablePadding = _param_enablePadding === void 0 ? true : _param_enablePadding, _param_padding = _param.padding, padding = _param_padding === void 0 ? "default" : _param_padding, props = _object_without_properties(_param, [
+        "className",
+        "enablePadding",
+        "padding"
     ]);
-    return React42.createElement("td", _object_spread({
+    var paddingStyles = {
+        condensed: "hawa-p-0 hawa-px-4",
+        default: "hawa-p-4",
+        noPadding: "hawa-p-0"
+    };
+    return /* @__PURE__ */ React42.createElement("td", _object_spread({
         ref: ref,
-        className: cn(// "border-x",
-        props.condensed ? "hawa-p-0 hawa-px-4" : "hawa-p-4", "hawa-align-middle [&:has([role=checkbox])]:hawa-pr-0 ", "[&:not(:last-child)&:not(:first-child)]:hawa-border-x", // "[&:not(:last-child)]:hawa-border-r",
+        className: cn(paddingStyles[padding], // "border-x",
+        // enablePadding ? "hawa-p-4" : "hawa-p-0",
+        // props.disablePadding ? "hawa-p-0" : "hawa-p-4",
+        // props.condensed ? "hawa-p-0 hawa-px-4" : "hawa-p-4",
+        "hawa-align-middle [&:has([role=checkbox])]:hawa-pr-0 ", "[&:not(:last-child)&:not(:first-child)]:hawa-border-x", // "[&:not(:last-child)]:hawa-border-r",
         props.dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r", className)
     }, props));
 });
@@ -5686,9 +5696,10 @@ var DataTable = function(_param) {
             key: row.id,
             "data-state": row.getIsSelected() && "selected"
         }, row.getVisibleCells().map(function(cell) {
+            var _cell_column_columnDef_meta;
             return /* @__PURE__ */ React43.createElement(TableCell, {
                 dir: props.direction,
-                condensed: props.condensed,
+                padding: props.condensed ? "condensed" : (_cell_column_columnDef_meta = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : _cell_column_columnDef_meta.padding,
                 key: cell.id
             }, (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()));
         }));
@@ -5702,7 +5713,7 @@ var DataTable = function(_param) {
     }), props.showCount && /* @__PURE__ */ React43.createElement("div", {
         className: "text-sm text-muted-foreground",
         dir: props.direction
-    }, /* @__PURE__ */ React43.createElement("span", null, (_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.total), " ", /* @__PURE__ */ React43.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())), table.getPageCount() !== 0 && /* @__PURE__ */ React43.createElement("div", {
+    }, /* @__PURE__ */ React43.createElement("span", null, (_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.total), " ", /* @__PURE__ */ React43.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())), table.getPageCount() > 1 && /* @__PURE__ */ React43.createElement("div", {
         className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 "
     }, enableGoTo && /* @__PURE__ */ React43.createElement("div", {
         className: "hawa-flex hawa-flex-row hawa-justify-center hawa-items-center hawa-gap-2"
@@ -5812,9 +5823,10 @@ var DataTable = function(_param) {
 var React44 = __toESM(require("react"));
 var import_react_table2 = require("@tanstack/react-table");
 var SimpleTable = function(_param) {
-    var columns = _param.columns, data = _param.data, props = _object_without_properties(_param, [
+    var columns = _param.columns, data = _param.data, classNames = _param.classNames, props = _object_without_properties(_param, [
         "columns",
-        "data"
+        "data",
+        "classNames"
     ]);
     var _table_getRowModel_rows, _props_texts;
     var table = (0, import_react_table2.useReactTable)({
@@ -5823,10 +5835,10 @@ var SimpleTable = function(_param) {
         getCoreRowModel: (0, import_react_table2.getCoreRowModel)()
     });
     return /* @__PURE__ */ React44.createElement("div", {
-        className: "hawa-flex  hawa-w-full hawa-flex-col hawa-gap-4"
+        className: cn("hawa-flex  hawa-w-full hawa-flex-col hawa-gap-4", classNames)
     }, props.isLoading ? /* @__PURE__ */ React44.createElement(Skeleton, {
         className: "h-[130px] w-full"
-    }) : /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement("div", {
+    }) : /* @__PURE__ */ React44.createElement("div", {
         className: "hawa-rounded"
     }, /* @__PURE__ */ React44.createElement(Table, null, table.getAllColumns().length > 0 && /* @__PURE__ */ React44.createElement(TableHeader, null, table.getHeaderGroups().map(function(headerGroup) {
         return /* @__PURE__ */ React44.createElement(TableRow, {
@@ -5843,16 +5855,17 @@ var SimpleTable = function(_param) {
             key: row.id,
             "data-state": row.getIsSelected() && "selected"
         }, row.getVisibleCells().map(function(cell) {
+            var _cell_column_columnDef_meta;
             return /* @__PURE__ */ React44.createElement(TableCell, {
                 dir: props.direction,
-                condensed: props.condensed,
+                padding: props.condensed ? "condensed" : (_cell_column_columnDef_meta = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : _cell_column_columnDef_meta.padding,
                 key: cell.id
             }, (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext()));
         }));
     }) : /* @__PURE__ */ React44.createElement(TableRow, null, /* @__PURE__ */ React44.createElement(TableCell, {
         colSpan: columns.length,
         className: "hawa-h-24 hawa-text-center"
-    }, (_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.noData)))))));
+    }, (_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.noData))))));
 };
 // components/elements/Accordion.tsx
 var React45 = __toESM(require("react"));

package/dist/index.mjs

@@ -5158,7 +5158,7 @@ import {
 
 // components/elements/Table.tsx
 import * as React42 from "react";
-var Table = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React42.createElement("div", { className: "hawa-relative hawa-w-full hawa-overflow-auto hawa-rounded hawa-border" }, /* @__PURE__ */ React42.createElement(
+var Table = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React42.createElement("div", { className: "hawa-relative hawa-w-full  hawa-overflow-auto hawa-rounded hawa-border" }, /* @__PURE__ */ React42.createElement(
   "table",
   {
     ref,
@@ -5225,22 +5225,32 @@ var TableRow = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 TableRow.displayName = "TableRow";
 var TableCell = React42.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React42.createElement(
-    "td",
-    {
-      ref,
-      className: cn(
-        // "border-x",
-        props.condensed ? "hawa-p-0 hawa-px-4" : "hawa-p-4",
-        "hawa-align-middle [&:has([role=checkbox])]:hawa-pr-0 ",
-        "[&:not(:last-child)&:not(:first-child)]:hawa-border-x",
-        // "[&:not(:last-child)]:hawa-border-r",
-        props.dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r",
-        className
-      ),
-      ...props
-    }
-  )
+  ({ className, enablePadding = true, padding = "default", ...props }, ref) => {
+    let paddingStyles = {
+      condensed: "hawa-p-0 hawa-px-4",
+      default: "hawa-p-4",
+      noPadding: "hawa-p-0"
+    };
+    return /* @__PURE__ */ React42.createElement(
+      "td",
+      {
+        ref,
+        className: cn(
+          paddingStyles[padding],
+          // "border-x",
+          // enablePadding ? "hawa-p-4" : "hawa-p-0",
+          // props.disablePadding ? "hawa-p-0" : "hawa-p-4",
+          // props.condensed ? "hawa-p-0 hawa-px-4" : "hawa-p-4",
+          "hawa-align-middle [&:has([role=checkbox])]:hawa-pr-0 ",
+          "[&:not(:last-child)&:not(:first-child)]:hawa-border-x",
+          // "[&:not(:last-child)]:hawa-border-r",
+          props.dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 TableCell.displayName = "TableCell";
 var TableCaption = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React42.createElement(
@@ -5388,7 +5398,7 @@ var DataTable = ({
         TableCell,
         {
           dir: props.direction,
-          condensed: props.condensed,
+          padding: props.condensed ? "condensed" : cell.column.columnDef.meta?.padding,
           key: cell.id
         },
         flexRender(
@@ -5413,7 +5423,7 @@ var DataTable = ({
       /* @__PURE__ */ React43.createElement("span", null, props.texts?.total),
       " ",
       /* @__PURE__ */ React43.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
-    ), table.getPageCount() !== 0 && /* @__PURE__ */ React43.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 " }, enableGoTo && /* @__PURE__ */ React43.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center hawa-items-center hawa-gap-2" }, /* @__PURE__ */ React43.createElement("span", { className: "hawa-text-sm" }, props.texts?.goTo), /* @__PURE__ */ React43.createElement(
+    ), table.getPageCount() > 1 && /* @__PURE__ */ React43.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 " }, enableGoTo && /* @__PURE__ */ React43.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center hawa-items-center hawa-gap-2" }, /* @__PURE__ */ React43.createElement("span", { className: "hawa-text-sm" }, props.texts?.goTo), /* @__PURE__ */ React43.createElement(
       "input",
       {
         max: table.getPageCount(),
@@ -5526,6 +5536,7 @@ import {
 var SimpleTable = ({
   columns,
   data,
+  classNames,
   ...props
 }) => {
   const table = useReactTable2({
@@ -5533,45 +5544,54 @@ var SimpleTable = ({
     columns,
     getCoreRowModel: getCoreRowModel2()
   });
-  return /* @__PURE__ */ React44.createElement("div", { className: "hawa-flex  hawa-w-full hawa-flex-col hawa-gap-4" }, props.isLoading ? /* @__PURE__ */ React44.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React44.createElement(Table, null, table.getAllColumns().length > 0 && /* @__PURE__ */ React44.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React44.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
-    return /* @__PURE__ */ React44.createElement(
-      TableHead,
-      {
-        condensed: props.condensed,
-        dir: props.direction,
-        key: header.id
-      },
-      header.isPlaceholder ? null : flexRender2(
-        header.column.columnDef.header,
-        header.getContext()
-      )
-    );
-  })))), /* @__PURE__ */ React44.createElement(TableBody, null, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React44.createElement(
-    TableRow,
+  return /* @__PURE__ */ React44.createElement(
+    "div",
     {
-      key: row.id,
-      "data-state": row.getIsSelected() && "selected"
+      className: cn(
+        "hawa-flex  hawa-w-full hawa-flex-col hawa-gap-4",
+        classNames
+      )
     },
-    row.getVisibleCells().map((cell) => /* @__PURE__ */ React44.createElement(
+    props.isLoading ? /* @__PURE__ */ React44.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React44.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React44.createElement(Table, null, table.getAllColumns().length > 0 && /* @__PURE__ */ React44.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React44.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
+      return /* @__PURE__ */ React44.createElement(
+        TableHead,
+        {
+          condensed: props.condensed,
+          dir: props.direction,
+          key: header.id
+        },
+        header.isPlaceholder ? null : flexRender2(
+          header.column.columnDef.header,
+          header.getContext()
+        )
+      );
+    })))), /* @__PURE__ */ React44.createElement(TableBody, null, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React44.createElement(
+      TableRow,
+      {
+        key: row.id,
+        "data-state": row.getIsSelected() && "selected"
+      },
+      row.getVisibleCells().map((cell) => /* @__PURE__ */ React44.createElement(
+        TableCell,
+        {
+          dir: props.direction,
+          padding: props.condensed ? "condensed" : cell.column.columnDef.meta?.padding,
+          key: cell.id
+        },
+        flexRender2(
+          cell.column.columnDef.cell,
+          cell.getContext()
+        )
+      ))
+    )) : /* @__PURE__ */ React44.createElement(TableRow, null, /* @__PURE__ */ React44.createElement(
       TableCell,
       {
-        dir: props.direction,
-        condensed: props.condensed,
-        key: cell.id
+        colSpan: columns.length,
+        className: "hawa-h-24 hawa-text-center"
       },
-      flexRender2(
-        cell.column.columnDef.cell,
-        cell.getContext()
-      )
-    ))
-  )) : /* @__PURE__ */ React44.createElement(TableRow, null, /* @__PURE__ */ React44.createElement(
-    TableCell,
-    {
-      colSpan: columns.length,
-      className: "hawa-h-24 hawa-text-center"
-    },
-    props.texts?.noData
-  )))))));
+      props.texts?.noData
+    )))))
+  );
 };
 
 // components/elements/Accordion.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.15.8-next",
+  "version": "0.15.11-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {