@bolio-ui/core 3.0.0-alpha.1 → 3.0.0

package/esm/utils/surface.d.ts

@@ -0,0 +1,6 @@
+import { BolioUIThemes } from '../Themes/Presets';
+export declare const getSurface: (theme: BolioUIThemes, shadow?: string) => {
+    bg: string;
+    hover: string;
+    shadow: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolio-ui/core",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0",
   "description": "Amazing, modern and creative tools for React UI. 🥷🏼",
   "keywords": [
     "bolio",

package/esm/chunk-TKICX5R6.js

@@ -1,351 +0,0 @@
-import {
-  Pagination_default
-} from "./chunk-E5EDUOQT.js";
-import {
-  use_resize_default
-} from "./chunk-JJFOGZ6V.js";
-import {
-  use_real_shape_default
-} from "./chunk-HKOESPKZ.js";
-import {
-  log_warning_default
-} from "./chunk-AXYDJGTN.js";
-import {
-  use_scale_default,
-  with_scale_default
-} from "./chunk-MAICNLTY.js";
-import {
-  use_theme_default
-} from "./chunk-V5I4ORQQ.js";
-import {
-  joinClasses,
-  use_classes_default
-} from "./chunk-5KUROAEP.js";
-
-// core/Table/Table.tsx
-import React4, {
-  useCallback,
-  useEffect as useEffect2,
-  useImperativeHandle,
-  useMemo as useMemo2,
-  useRef,
-  useState
-} from "react";
-
-// core/Table/TableHead.tsx
-import { useMemo } from "react";
-
-// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Table/TableHead.module.css.bolio-css-module-source
-var TableHead_module_css_default = { "thead": "TableHead-module_thead__zMtMt", "th": "TableHead-module_th__GzIce", "theadBox": "TableHead-module_theadBox__6QaBJ" };
-
-// core/Table/TableHead.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var makeColgroup = (width, columns) => {
-  const unsetWidthCount = columns.filter((c) => !c.width).length;
-  const customWidthTotal = columns.reduce((pre, current) => {
-    return current.width ? pre + current.width : pre;
-  }, 0);
-  const averageWidth = (width - customWidthTotal) / unsetWidthCount;
-  if (averageWidth <= 0) return /* @__PURE__ */ jsx("colgroup", {});
-  return /* @__PURE__ */ jsx("colgroup", { children: columns.map((column, index) => /* @__PURE__ */ jsx("col", { width: column.width || averageWidth }, `colgroup-${index}`)) });
-};
-var TableHead = (props) => {
-  const theme = use_theme_default();
-  const { columns, width } = props;
-  const isScalableWidth = useMemo(
-    () => columns.find((item) => !!item.width),
-    [columns]
-  );
-  const colgroup = useMemo(() => {
-    if (!isScalableWidth) return /* @__PURE__ */ jsx("colgroup", {});
-    return makeColgroup(width, columns);
-  }, [isScalableWidth, width, columns]);
-  const theadStyle = {
-    "--table-head-text-color": theme.palette.accents_5,
-    "--table-head-bg": theme.palette.accents_1,
-    "--table-head-border-color": theme.palette.border,
-    "--table-head-radius": theme.layout.radius
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    colgroup,
-    /* @__PURE__ */ jsx("thead", { className: TableHead_module_css_default.thead, style: theadStyle, children: /* @__PURE__ */ jsx("tr", { children: columns.map((column, index) => /* @__PURE__ */ jsx(
-      "th",
-      {
-        className: joinClasses(TableHead_module_css_default.th, column.className),
-        children: /* @__PURE__ */ jsx("div", { className: TableHead_module_css_default.theadBox, children: column.label })
-      },
-      `table-th-${String(column.prop)}-${index}`
-    )) }) })
-  ] });
-};
-TableHead.displayName = "BolioUITableHead";
-var TableHead_default = TableHead;
-
-// core/Table/TableCell.tsx
-import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
-var TableCell = ({
-  columns,
-  row,
-  rowIndex,
-  emptyText,
-  onCellClick
-}) => {
-  return /* @__PURE__ */ jsx2(Fragment2, { children: columns.map((column, index) => {
-    const currentRowValue = row[column.prop];
-    const cellValue = currentRowValue || emptyText;
-    const shouldBeRenderElement = column.renderHandler(
-      currentRowValue,
-      row,
-      rowIndex
-    );
-    return /* @__PURE__ */ jsx2(
-      "td",
-      {
-        onClick: () => onCellClick && onCellClick(currentRowValue, rowIndex, index),
-        className: column.className,
-        children: /* @__PURE__ */ jsx2("div", { className: "cell", children: shouldBeRenderElement ? shouldBeRenderElement : cellValue })
-      },
-      `row-td-${index}-${String(column.prop)}`
-    );
-  }) });
-};
-var TableCell_default = TableCell;
-
-// core/Table/TableContext.ts
-import React2 from "react";
-var defaultContext = {
-  columns: [],
-  updateColumn: () => {
-  }
-};
-var TableContext = React2.createContext(defaultContext);
-var useTableContext = () => React2.useContext(TableContext);
-
-// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Table/TableBody.module.css.bolio-css-module-source
-var TableBody_module_css_default = { "tr": "TableBody-module_tr__lTn-M", "hover": "TableBody-module_hover__AjVlq" };
-
-// core/Table/TableBody.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var TableBody = ({
-  data,
-  hover,
-  emptyText,
-  onRow,
-  onCell,
-  rowClassName
-}) => {
-  const theme = use_theme_default();
-  const { columns } = useTableContext();
-  const rowClickHandler = (row, index) => {
-    if (onRow) onRow(row, index);
-  };
-  const trStyle = {
-    "--table-body-hover-bg": theme.palette.accents_1,
-    "--table-body-border-color": theme.palette.border,
-    "--table-body-text-color": theme.palette.accents_6
-  };
-  return /* @__PURE__ */ jsx3("tbody", { children: data.map((row, index) => {
-    const className = rowClassName(row, index);
-    return /* @__PURE__ */ jsx3(
-      "tr",
-      {
-        className: joinClasses(
-          TableBody_module_css_default.tr,
-          { [TableBody_module_css_default.hover]: hover },
-          className
-        ),
-        onClick: () => rowClickHandler(row, index),
-        style: trStyle,
-        children: /* @__PURE__ */ jsx3(
-          TableCell_default,
-          {
-            columns,
-            row,
-            rowIndex: index,
-            emptyText,
-            onCellClick: onCell
-          }
-        )
-      },
-      `tbody-row-${index}`
-    );
-  }) });
-};
-TableBody.displayName = "BolioUITableBody";
-var TableBody_default = TableBody;
-
-// core/Table/TableColumn.tsx
-import { useEffect } from "react";
-var defaultRender = () => {
-};
-var TableColumn = (columnProps) => {
-  const {
-    children,
-    prop,
-    label,
-    width,
-    className = "",
-    render: renderHandler = defaultRender
-  } = columnProps;
-  const { updateColumn } = useTableContext();
-  const safeProp = String(prop).trim();
-  if (!safeProp) {
-    log_warning_default('The props "prop" is required.', "Table.Column");
-  }
-  useEffect(() => {
-    updateColumn({
-      label: children || label,
-      prop: safeProp,
-      width,
-      className,
-      renderHandler
-    });
-  }, [children, label, safeProp, width, className, renderHandler, updateColumn]);
-  return null;
-};
-TableColumn.displayName = "BolioUITableColumn";
-var TableColumn_default = TableColumn;
-
-// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Table/Table.module.css.bolio-css-module-source
-var Table_module_css_default = { "table": "Table-module_table__H9ZOx", "footer": "Table-module_footer__7eFVi" };
-
-// core/Table/Table.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var defaultProps = {
-  hover: true,
-  initialData: [],
-  emptyText: "",
-  className: "",
-  rowClassName: () => ""
-};
-function TableComponent(tableProps, forwardedRef) {
-  var _a, _b;
-  const {
-    children,
-    data: customData,
-    initialData = defaultProps.initialData,
-    hover = defaultProps.hover,
-    emptyText = defaultProps.emptyText,
-    onRow,
-    onCell,
-    onChange,
-    pagination,
-    className = defaultProps.className,
-    rowClassName = defaultProps.rowClassName,
-    style,
-    ...props
-  } = tableProps;
-  const { SCALES } = use_scale_default();
-  const tableRef = useRef(null);
-  useImperativeHandle(forwardedRef, () => tableRef.current);
-  const [{ width }, updateShape] = use_real_shape_default(tableRef);
-  const [columns, setColumns] = useState([]);
-  const [data, setData] = useState(initialData);
-  const updateColumn = useCallback(
-    (column) => {
-      setColumns((last) => {
-        const hasColumn = last.find((item) => item.prop === column.prop);
-        if (!hasColumn) return [...last, column];
-        return last.map((item) => {
-          if (item.prop !== column.prop) return item;
-          return column;
-        });
-      });
-    },
-    []
-  );
-  const contextValue = useMemo2(
-    () => ({
-      columns,
-      updateColumn
-    }),
-    [columns, updateColumn]
-  );
-  useEffect2(() => {
-    if (typeof customData === "undefined") return;
-    setData(customData);
-  }, [customData]);
-  use_resize_default(() => updateShape());
-  const [selfPage, setSelfPage] = useState(1);
-  const pageSize = pagination ? Math.max(1, pagination.pageSize) : 0;
-  const totalRows = (_a = pagination == null ? void 0 : pagination.total) != null ? _a : data.length;
-  const pageCount = pagination ? Math.ceil(totalRows / pageSize) : 0;
-  const page = Math.min((_b = pagination == null ? void 0 : pagination.page) != null ? _b : selfPage, Math.max(pageCount, 1));
-  const rows = pagination && pagination.total === void 0 ? data.slice((page - 1) * pageSize, page * pageSize) : data;
-  const pageChangeHandler = (next) => {
-    if (next === page) return;
-    setSelfPage(next);
-    if (pagination == null ? void 0 : pagination.onPageChange) pagination.onPageChange(next);
-  };
-  const tableStyle = {
-    "--table-font-size": SCALES.font(1),
-    "--table-width": SCALES.width(1, "100%"),
-    "--table-height": SCALES.height(1, "auto"),
-    "--table-padding-top": SCALES.pt(0),
-    "--table-padding-right": SCALES.pr(0),
-    "--table-padding-bottom": SCALES.pb(0),
-    "--table-padding-left": SCALES.pl(0),
-    "--table-margin-top": SCALES.mt(0),
-    "--table-margin-right": SCALES.mr(0),
-    "--table-margin-bottom": SCALES.mb(0),
-    "--table-margin-left": SCALES.ml(0),
-    ...style
-  };
-  return (
-    // the context is typed for any row: each Table provides its own
-    /* @__PURE__ */ jsxs2(
-      TableContext.Provider,
-      {
-        value: contextValue,
-        children: [
-          /* @__PURE__ */ jsxs2(
-            "table",
-            {
-              ref: tableRef,
-              className: use_classes_default(Table_module_css_default.table, className),
-              ...props,
-              style: tableStyle,
-              children: [
-                /* @__PURE__ */ jsx4(TableHead_default, { columns, width }),
-                /* @__PURE__ */ jsx4(
-                  TableBody_default,
-                  {
-                    data: rows,
-                    hover,
-                    emptyText,
-                    onRow,
-                    onCell,
-                    rowClassName
-                  }
-                ),
-                children
-              ]
-            }
-          ),
-          pageCount > 1 && /* @__PURE__ */ jsx4("div", { className: Table_module_css_default.footer, children: /* @__PURE__ */ jsx4(
-            Pagination_default,
-            {
-              count: pageCount,
-              page,
-              onChange: pageChangeHandler
-            }
-          ) })
-        ]
-      }
-    )
-  );
-}
-TableComponent.displayName = "BolioUITable";
-TableComponent.Column = TableColumn_default;
-var Table = with_scale_default(
-  React4.forwardRef(TableComponent)
-);
-Table.Column = TableColumn_default;
-var Table_default = Table;
-
-// core/Table/index.ts
-var Table_default2 = Table_default;
-
-export {
-  Table_default2 as Table_default
-};

package/dist/{chunk-DXHNQANX.js → chunk-TPZUTHTQ.js}

@@ -3,6 +3,9 @@
 var _chunkBSDZWWUSjs = require('./chunk-BSDZWWUS.js');
 
 
+var _chunkNDERASK2js = require('./chunk-NDERASK2.js');
+
+
 
 var _chunkGJZT47MPjs = require('./chunk-GJZT47MP.js');
 
@@ -13,9 +16,6 @@ var _chunkRZBEZ26Ajs = require('./chunk-RZBEZ26A.js');
 var _chunkLMDBE6T6js = require('./chunk-LMDBE6T6.js');
 
 
-var _chunkNDERASK2js = require('./chunk-NDERASK2.js');
-
-
 
 var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
 

package/dist/{chunk-TKIUVNKP.js → chunk-XKJDF225.js}

@@ -3,10 +3,10 @@
 var _chunkO3RTRCY5js = require('./chunk-O3RTRCY5.js');
 
 
-var _chunkLDTDMDE6js = require('./chunk-LDTDMDE6.js');
+var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
 
 
-var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
+var _chunkLDTDMDE6js = require('./chunk-LDTDMDE6.js');
 
 
 

package/esm/{chunk-DXHNQANX.js → chunk-TPZUTHTQ.js}

@@ -1,6 +1,9 @@
 import {
   use_default_props_default
 } from "./chunk-BSDZWWUS.js";
+import {
+  useButtonGroupContext
+} from "./chunk-NDERASK2.js";
 import {
   getVariantColors,
   isSemanticColorType
@@ -11,9 +14,6 @@ import {
 import {
   Loading_default
 } from "./chunk-LMDBE6T6.js";
-import {
-  useButtonGroupContext
-} from "./chunk-NDERASK2.js";
 import {
   use_scale_default,
   with_scale_default

package/esm/{chunk-TKIUVNKP.js → chunk-XKJDF225.js}

@@ -1,12 +1,12 @@
 import {
   use_body_scroll_default
 } from "./chunk-O3RTRCY5.js";
-import {
-  css_transition_default
-} from "./chunk-LDTDMDE6.js";
 import {
   use_current_state_default
 } from "./chunk-33BUV2RX.js";
+import {
+  css_transition_default
+} from "./chunk-LDTDMDE6.js";
 import {
   use_scale_default,
   with_scale_default