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

package/esm/chunk-TKICX5R6.js

@@ -0,0 +1,351 @@
+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/esm/chunk-TKIUVNKP.js

@@ -0,0 +1,217 @@
+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 {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Modal/ModalContext.ts
+import React from "react";
+var defaultContext = {};
+var ModalContext = React.createContext(defaultContext);
+var useModalContext = () => React.useContext(ModalContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Modal/ModalTitle.module.css.bolio-css-module-source
+var ModalTitle_module_css_default = { "title": "ModalTitle-module_title__ThnLn" };
+
+// core/Modal/ModalTitle.tsx
+import { jsx } from "react/jsx-runtime";
+function ModalTitleComponent({
+  className = "",
+  children,
+  style,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const { titleId } = useModalContext();
+  const titleStyle = {
+    fontSize: SCALES.font(1.5),
+    color: theme.palette.foreground,
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(1, "auto"),
+    padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      id: titleId,
+      className: `${ModalTitle_module_css_default.title} ${className}`.trim(),
+      ...props,
+      style: titleStyle,
+      children
+    }
+  );
+}
+ModalTitleComponent.displayName = "BolioUIModalTitle";
+var ModalTitle = with_scale_default(ModalTitleComponent);
+var ModalTitle_default = ModalTitle;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Modal/ModalSubtitle.module.css.bolio-css-module-source
+var ModalSubtitle_module_css_default = { "subtitle": "ModalSubtitle-module_subtitle__Hudi-" };
+
+// core/Modal/ModalSubtitle.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ModalSubtitleComponent({
+  className = "",
+  children,
+  style,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const { descriptionId } = useModalContext();
+  const subtitleStyle = {
+    color: theme.palette.accents_5,
+    fontSize: SCALES.font(0.875),
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(1, "1.5em"),
+    padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx2(
+    "p",
+    {
+      id: descriptionId,
+      className: `${ModalSubtitle_module_css_default.subtitle} ${className}`.trim(),
+      ...props,
+      style: subtitleStyle,
+      children
+    }
+  );
+}
+ModalSubtitleComponent.displayName = "BolioUIModalSubtitle";
+var ModalSubtitle = with_scale_default(ModalSubtitleComponent);
+var ModalSubtitle_default = ModalSubtitle;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Modal/ModalContent.module.css.bolio-css-module-source
+var ModalContent_module_css_default = { "content": "ModalContent-module_content__RXGwI" };
+
+// core/Modal/ModalContent.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ModalContentComponent({
+  className = "",
+  children,
+  style,
+  ...props
+}) {
+  const { SCALES } = use_scale_default();
+  const contentStyle = {
+    fontSize: SCALES.font(1),
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(1, "auto"),
+    padding: `${SCALES.pt(1.3125)} ${SCALES.pr(1.3125)} ${SCALES.pb(0.6625)} ${SCALES.pl(1.3125)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0, "calc(var(--modal-wrapper-padding-right) * -1)")} ${SCALES.mb(0)} ${SCALES.ml(0, "calc(var(--modal-wrapper-padding-left) * -1)")}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: use_classes_default(ModalContent_module_css_default.content, className),
+      ...props,
+      style: contentStyle,
+      children
+    }
+  );
+}
+ModalContentComponent.displayName = "BolioUIModalContent";
+var ModalContent = with_scale_default(ModalContentComponent);
+var ModalContent_default = ModalContent;
+
+// core/utils/use-body-scroll.ts
+var use_body_scroll_default2 = use_body_scroll_default;
+
+// core/Shared/backdrop.tsx
+import React2, { useRef } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Shared/backdrop.module.css.bolio-css-module-source
+var backdrop_module_css_default = { "backdrop": "backdrop-module_backdrop__fZn5s", "position": "backdrop-module_position__rOSQr", "layer": "backdrop-module_layer__SC2h8" };
+
+// core/Shared/backdrop.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function BackdropComponent({
+  children,
+  onClick = () => {
+  },
+  visible = false,
+  width,
+  onContentClick,
+  backdropClassName = "",
+  positionClassName = "",
+  layerClassName = "",
+  style,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const [, setIsContentMouseDown, IsContentMouseDownRef] = use_current_state_default(false);
+  const contentRef = useRef(null);
+  const clickHandler = (event) => {
+    var _a;
+    if (IsContentMouseDownRef.current) return;
+    if ((_a = contentRef.current) == null ? void 0 : _a.contains(event.target)) return;
+    if (onClick) onClick(event);
+  };
+  const mouseUpHandler = () => {
+    if (!IsContentMouseDownRef.current) return;
+    const timer = setTimeout(() => {
+      setIsContentMouseDown(false);
+      clearTimeout(timer);
+    }, 0);
+  };
+  return /* @__PURE__ */ jsx4(css_transition_default, { name: "backdrop-wrapper", visible, clearTime: 300, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: use_classes_default(backdrop_module_css_default.backdrop, backdropClassName),
+      onClick: clickHandler,
+      onMouseUp: mouseUpHandler,
+      ...props,
+      style: {
+        "--backdrop-portal-opacity": theme.expressiveness.portalOpacity,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: use_classes_default(backdrop_module_css_default.layer, layerClassName) }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            ref: contentRef,
+            onClick: onContentClick,
+            className: use_classes_default(backdrop_module_css_default.position, positionClassName),
+            onMouseDown: () => setIsContentMouseDown(true),
+            style: { width },
+            children
+          }
+        )
+      ]
+    }
+  ) });
+}
+BackdropComponent.displayName = "BolioUIBackdrop";
+var Backdrop = React2.memo(BackdropComponent);
+var backdrop_default = Backdrop;
+
+export {
+  use_body_scroll_default2 as use_body_scroll_default,
+  backdrop_default,
+  ModalContext,
+  useModalContext,
+  ModalTitle_default,
+  ModalSubtitle_default,
+  ModalContent_default
+};