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

package/esm/chunk-Y5CFWIGV.js

@@ -0,0 +1,543 @@
+import {
+  Pagination_default
+} from "./chunk-E5EDUOQT.js";
+import {
+  use_real_shape_default
+} from "./chunk-HKOESPKZ.js";
+import {
+  use_resize_default
+} from "./chunk-JJFOGZ6V.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 React5, {
+  useCallback,
+  useEffect as useEffect3,
+  useImperativeHandle,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState
+} from "react";
+
+// core/Table/TableHead.tsx
+import { useMemo } from "react";
+
+// core/Table/TableSelectBox.tsx
+import { useEffect, useRef } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Table/TableSelectBox.module.css.bolio-css-module-source
+var TableSelectBox_module_css_default = { "box": "TableSelectBox-module_box__UXj-E" };
+
+// core/Table/TableSelectBox.tsx
+import { jsx } from "react/jsx-runtime";
+function TableSelectBox({
+  checked,
+  indeterminate = false,
+  label,
+  onChange
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type: "checkbox",
+      className: TableSelectBox_module_css_default.box,
+      checked,
+      "aria-label": label,
+      onChange,
+      onClick: (event) => event.stopPropagation()
+    }
+  );
+}
+var TableSelectBox_default = TableSelectBox;
+
+// 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", "selectCell": "TableHead-module_selectCell__JRdGg", "sortButton": "TableHead-module_sortButton__whwp3", "sortIcon": "TableHead-module_sortIcon__VsHqp", "sorted": "TableHead-module_sorted__-6XtK" };
+
+// core/Table/TableHead.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SELECT_WIDTH = 40;
+var makeColgroup = (fullWidth, columns, leading) => {
+  const width = fullWidth - leading;
+  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__ */ jsx2("colgroup", {});
+  return /* @__PURE__ */ jsxs("colgroup", { children: [
+    leading > 0 && /* @__PURE__ */ jsx2("col", { width: leading }),
+    columns.map((column, index) => /* @__PURE__ */ jsx2("col", { width: column.width || averageWidth }, `colgroup-${index}`))
+  ] });
+};
+var TableHead = (props) => {
+  const theme = use_theme_default();
+  const { columns, width, sort, onSort, selection } = props;
+  const isScalableWidth = useMemo(
+    () => columns.find((item) => !!item.width),
+    [columns]
+  );
+  const colgroup = useMemo(() => {
+    if (!isScalableWidth) return /* @__PURE__ */ jsx2("colgroup", {});
+    return makeColgroup(width, columns, selection ? SELECT_WIDTH : 0);
+  }, [isScalableWidth, width, columns, selection]);
+  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,
+    "--table-head-sorted-color": theme.palette.foreground,
+    "--table-head-focus-color": theme.palette.primary
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    colgroup,
+    /* @__PURE__ */ jsx2("thead", { className: TableHead_module_css_default.thead, style: theadStyle, children: /* @__PURE__ */ jsxs("tr", { children: [
+      selection && /* @__PURE__ */ jsx2("th", { className: joinClasses(TableHead_module_css_default.th, TableHead_module_css_default.selectCell), children: /* @__PURE__ */ jsx2("div", { className: TableHead_module_css_default.theadBox, children: /* @__PURE__ */ jsx2(
+        TableSelectBox_default,
+        {
+          checked: selection.checked,
+          indeterminate: selection.indeterminate,
+          label: selection.label,
+          onChange: selection.onToggle
+        }
+      ) }) }),
+      columns.map((column, index) => {
+        const prop = String(column.prop);
+        const direction = sort && sort.prop === prop ? sort.direction : null;
+        return /* @__PURE__ */ jsx2(
+          "th",
+          {
+            className: joinClasses(TableHead_module_css_default.th, column.className),
+            "aria-sort": column.sortable ? direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none" : void 0,
+            children: /* @__PURE__ */ jsx2("div", { className: TableHead_module_css_default.theadBox, children: column.sortable ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: TableHead_module_css_default.sortButton,
+                onClick: () => onSort && onSort(prop),
+                children: [
+                  column.label,
+                  /* @__PURE__ */ jsx2(
+                    "svg",
+                    {
+                      viewBox: "0 0 24 24",
+                      width: "1em",
+                      height: "1em",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: joinClasses(TableHead_module_css_default.sortIcon, {
+                        [TableHead_module_css_default.sorted]: direction !== null
+                      }),
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx2(
+                        "path",
+                        {
+                          d: direction === "asc" ? "M12 19V5M5 12l7-7 7 7" : direction === "desc" ? "M12 5v14M19 12l-7 7-7-7" : "M8 9l4-4 4 4M8 15l4 4 4-4"
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) : column.label })
+          },
+          `table-th-${prop}-${index}`
+        );
+      })
+    ] }) })
+  ] });
+};
+TableHead.displayName = "BolioUITableHead";
+var TableHead_default = TableHead;
+
+// core/Table/TableCell.tsx
+import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
+var TableCell = ({
+  columns,
+  row,
+  rowIndex,
+  emptyText,
+  onCellClick
+}) => {
+  return /* @__PURE__ */ jsx3(Fragment2, { children: columns.map((column, index) => {
+    const currentRowValue = row[column.prop];
+    const cellValue = currentRowValue || emptyText;
+    const shouldBeRenderElement = column.renderHandler(
+      currentRowValue,
+      row,
+      rowIndex
+    );
+    return /* @__PURE__ */ jsx3(
+      "td",
+      {
+        onClick: () => onCellClick && onCellClick(currentRowValue, rowIndex, index),
+        className: column.className,
+        children: /* @__PURE__ */ jsx3("div", { className: "cell", children: shouldBeRenderElement ? shouldBeRenderElement : cellValue })
+      },
+      `row-td-${index}-${String(column.prop)}`
+    );
+  }) });
+};
+var TableCell_default = TableCell;
+
+// core/Table/TableContext.ts
+import React3 from "react";
+var defaultContext = {
+  columns: [],
+  updateColumn: () => {
+  }
+};
+var TableContext = React3.createContext(defaultContext);
+var useTableContext = () => React3.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", "selected": "TableBody-module_selected__7adtQ", "selectCell": "TableBody-module_selectCell__S8ZZn" };
+
+// core/Table/TableBody.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var TableBody = ({
+  data,
+  keys,
+  selection,
+  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,
+    "--table-body-selected-bg": `color-mix(in srgb, ${theme.palette.primary} 10%, transparent)`
+  };
+  return /* @__PURE__ */ jsx4("tbody", { children: data.map((row, index) => {
+    const className = rowClassName(row, index);
+    const selected = Boolean(selection == null ? void 0 : selection.keys.includes(keys[index]));
+    return /* @__PURE__ */ jsxs2(
+      "tr",
+      {
+        className: joinClasses(
+          TableBody_module_css_default.tr,
+          { [TableBody_module_css_default.hover]: hover, [TableBody_module_css_default.selected]: selected },
+          className
+        ),
+        onClick: () => rowClickHandler(row, index),
+        style: trStyle,
+        children: [
+          selection && /* @__PURE__ */ jsx4("td", { className: TableBody_module_css_default.selectCell, children: /* @__PURE__ */ jsx4("div", { className: "cell", children: /* @__PURE__ */ jsx4(
+            TableSelectBox_default,
+            {
+              checked: selected,
+              label: selection.label,
+              onChange: () => selection.onToggle(keys[index])
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx4(
+            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 as useEffect2 } from "react";
+var defaultRender = () => {
+};
+var TableColumn = (columnProps) => {
+  const {
+    children,
+    prop,
+    label,
+    width,
+    className = "",
+    sortable = false,
+    sorter,
+    render: renderHandler = defaultRender
+  } = columnProps;
+  const { updateColumn } = useTableContext();
+  const safeProp = String(prop).trim();
+  if (!safeProp) {
+    log_warning_default('The props "prop" is required.', "Table.Column");
+  }
+  useEffect2(() => {
+    updateColumn({
+      label: children || label,
+      prop: safeProp,
+      width,
+      className,
+      sortable,
+      sorter,
+      renderHandler
+    });
+  }, [
+    children,
+    label,
+    safeProp,
+    width,
+    className,
+    sortable,
+    sorter,
+    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 jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var noKeys = [];
+var compareValues = (a, b) => typeof a === "number" && typeof b === "number" ? a - b : String(a != null ? a : "").localeCompare(String(b != null ? b : ""), void 0, {
+  numeric: true,
+  sensitivity: "base"
+});
+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,
+    sort: customSort,
+    initialSort = null,
+    onSortChange,
+    selectable = false,
+    rowKey,
+    selectedKeys: customKeys,
+    initialSelectedKeys = noKeys,
+    onSelectionChange,
+    selectRowLabel = "Select row",
+    selectAllLabel = "Select all rows",
+    style,
+    ...props
+  } = tableProps;
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const tableRef = useRef2(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]
+  );
+  useEffect3(() => {
+    if (typeof customData === "undefined") return;
+    setData(customData);
+  }, [customData]);
+  use_resize_default(() => updateShape());
+  const [selfSort, setSelfSort] = useState(initialSort);
+  const sort = customSort !== void 0 ? customSort : selfSort;
+  const [selfKeys, setSelfKeys] = useState(initialSelectedKeys);
+  const selectedKeys = customKeys !== void 0 ? customKeys : selfKeys;
+  const keyOf = (row, index) => typeof rowKey === "function" ? rowKey(row) : rowKey !== void 0 ? row[rowKey] : index;
+  const sortedEntries = useMemo2(() => {
+    const entries = data.map((row, index) => ({ row, key: keyOf(row, index) }));
+    const column = sort && columns.find((item) => item.prop === sort.prop);
+    if (!sort || !column || (pagination == null ? void 0 : pagination.total) !== void 0) return entries;
+    const direction = sort.direction === "desc" ? -1 : 1;
+    const compare = column.sorter || ((a, b) => compareValues(a[column.prop], b[column.prop]));
+    return [...entries].sort((a, b) => direction * compare(a.row, b.row));
+  }, [data, sort, columns, pagination == null ? void 0 : pagination.total, rowKey]);
+  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 pageEntries = pagination && pagination.total === void 0 ? sortedEntries.slice((page - 1) * pageSize, page * pageSize) : sortedEntries;
+  const rows = pageEntries.map((entry) => entry.row);
+  const pageKeys = pageEntries.map((entry) => entry.key);
+  const sortHandler = (prop) => {
+    const next = !sort || sort.prop !== prop ? { prop, direction: "asc" } : sort.direction === "asc" ? { prop, direction: "desc" } : null;
+    setSelfSort(next);
+    if (onSortChange) onSortChange(next);
+  };
+  const selectKeys = (next) => {
+    setSelfKeys(next);
+    if (onSelectionChange)
+      onSelectionChange(
+        next,
+        sortedEntries.filter((entry) => next.includes(entry.key)).map((entry) => entry.row)
+      );
+  };
+  const toggleKey = (key) => selectKeys(
+    selectedKeys.includes(key) ? selectedKeys.filter((item) => item !== key) : [...selectedKeys, key]
+  );
+  const inView = pageKeys.filter((key) => selectedKeys.includes(key)).length;
+  const toggleAll = () => selectKeys(
+    inView === pageKeys.length ? selectedKeys.filter((key) => !pageKeys.includes(key)) : [
+      ...selectedKeys,
+      ...pageKeys.filter((key) => !selectedKeys.includes(key))
+    ]
+  );
+  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-select-accent": theme.palette.primary,
+    "--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__ */ jsxs3(
+      TableContext.Provider,
+      {
+        value: contextValue,
+        children: [
+          /* @__PURE__ */ jsxs3(
+            "table",
+            {
+              ref: tableRef,
+              className: use_classes_default(Table_module_css_default.table, className),
+              ...props,
+              style: tableStyle,
+              children: [
+                /* @__PURE__ */ jsx5(
+                  TableHead_default,
+                  {
+                    columns,
+                    width,
+                    sort,
+                    onSort: sortHandler,
+                    selection: selectable ? {
+                      checked: pageKeys.length > 0 && inView === pageKeys.length,
+                      indeterminate: inView > 0 && inView < pageKeys.length,
+                      label: selectAllLabel,
+                      onToggle: toggleAll
+                    } : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  TableBody_default,
+                  {
+                    data: rows,
+                    keys: pageKeys,
+                    selection: selectable ? {
+                      keys: selectedKeys,
+                      label: selectRowLabel,
+                      onToggle: toggleKey
+                    } : void 0,
+                    hover,
+                    emptyText,
+                    onRow,
+                    onCell,
+                    rowClassName
+                  }
+                ),
+                children
+              ]
+            }
+          ),
+          pageCount > 1 && /* @__PURE__ */ jsx5("div", { className: Table_module_css_default.footer, children: /* @__PURE__ */ jsx5(
+            Pagination_default,
+            {
+              count: pageCount,
+              page,
+              onChange: pageChangeHandler
+            }
+          ) })
+        ]
+      }
+    )
+  );
+}
+TableComponent.displayName = "BolioUITable";
+TableComponent.Column = TableColumn_default;
+var Table = with_scale_default(
+  React5.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-GYFW5NLU.js → chunk-YLLPYRJH.js}

@@ -6,10 +6,13 @@ import {
   fromISO,
   startOfDay,
   toISO
-} from "./chunk-P245HSVB.js";
+} from "./chunk-TLVSZCKU.js";
 import {
   use_click_away_default
 } from "./chunk-DGXZP4VJ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -18,6 +21,7 @@ import {
   use_theme_default
 } from "./chunk-V5I4ORQQ.js";
 import {
+  joinClasses,
   use_classes_default
 } from "./chunk-5KUROAEP.js";
 
@@ -25,10 +29,12 @@ import {
 import React, { useEffect, useRef, useState } from "react";
 
 // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/DateRangePicker/DateRangePicker.module.css.bolio-css-module-source
-var DateRangePicker_module_css_default = { "daterange": "DateRangePicker-module_daterange__id9HF", "field": "DateRangePicker-module_field__4UZhH", "input": "DateRangePicker-module_input__h9sDj", "separator": "DateRangePicker-module_separator__StR3E", "toggle": "DateRangePicker-module_toggle__gNukh", "popup": "DateRangePicker-module_popup__hKExw" };
+var DateRangePicker_module_css_default = { "daterange": "DateRangePicker-module_daterange__id9HF", "field": "DateRangePicker-module_field__4UZhH", "input": "DateRangePicker-module_input__h9sDj", "separator": "DateRangePicker-module_separator__StR3E", "toggle": "DateRangePicker-module_toggle__gNukh", "popup": "DateRangePicker-module_popup__hKExw", "alignEnd": "DateRangePicker-module_alignEnd__DgOia" };
 
 // core/DateRangePicker/DateRangePicker.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var TWO_MONTHS_EM = 46;
+var ONE_MONTH_EM = 22;
 var emptyRange = [null, null];
 var format = (date) => date ? toISO(date) : "";
 var DateRangePickerComponent = React.forwardRef(
@@ -57,6 +63,7 @@ var DateRangePickerComponent = React.forwardRef(
     ...props
   }, ref) => {
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const { SCALES } = use_scale_default();
     const colors = getColors(theme.palette, type, disabled, {
       filled,
@@ -72,6 +79,7 @@ var DateRangePickerComponent = React.forwardRef(
     const endText = format(end);
     const [texts, setTexts] = useState({ start: startText, end: endText });
     const [open, setOpen] = useState(false);
+    const [fit, setFit] = useState({ months: 2, alignEnd: false });
     useEffect(() => {
       setTexts({ start: startText, end: endText });
     }, [startText, endText]);
@@ -97,6 +105,18 @@ var DateRangePickerComponent = React.forwardRef(
       commit(edge === "start" ? [date, other] : [other, date]);
     };
     const blurHandler = () => setTexts({ start: startText, end: endText });
+    const toggle = () => {
+      const root = rootRef.current;
+      if (!open && root) {
+        const em = parseFloat(getComputedStyle(root).fontSize) || 16;
+        const room = document.documentElement.clientWidth - root.getBoundingClientRect().left;
+        setFit({
+          months: room >= TWO_MONTHS_EM * em ? 2 : 1,
+          alignEnd: room < ONE_MONTH_EM * em
+        });
+      }
+      setOpen((last) => !last);
+    };
     const pick = (next) => {
       var _a;
       commit(next);
@@ -124,7 +144,8 @@ var DateRangePickerComponent = React.forwardRef(
       "--daterange-margin-right": SCALES.mr(0),
       "--daterange-margin-bottom": SCALES.mb(0),
       "--daterange-margin-left": SCALES.ml(0),
-      "--daterange-bg": theme.palette.background,
+      "--daterange-bg": surface.bg,
+      "--calendar-popup-hover": surface.hover,
       "--daterange-border-color": theme.palette.border,
       "--daterange-radius": rounded ? "25px" : theme.layout.radius,
       "--daterange-popup-radius": theme.layout.radius,
@@ -138,7 +159,7 @@ var DateRangePickerComponent = React.forwardRef(
       "--daterange-separator-color": colors.iconColor,
       "--daterange-toggle-color": colors.iconColor,
       "--daterange-toggle-hover-color": colors.color,
-      "--daterange-shadow": theme.expressiveness.shadowMedium,
+      "--daterange-shadow": surface.shadow,
       ...style
     };
     const inputProps = {
@@ -195,7 +216,7 @@ var DateRangePickerComponent = React.forwardRef(
                 "aria-haspopup": "dialog",
                 "aria-expanded": open,
                 disabled,
-                onClick: () => setOpen((last) => !last),
+                onClick: toggle,
                 children: /* @__PURE__ */ jsxs(
                   "svg",
                   {
@@ -222,13 +243,15 @@ var DateRangePickerComponent = React.forwardRef(
             {
               role: "dialog",
               "aria-label": calendarLabel,
-              className: DateRangePicker_module_css_default.popup,
+              className: joinClasses(DateRangePicker_module_css_default.popup, {
+                [DateRangePicker_module_css_default.alignEnd]: fit.alignEnd
+              }),
               onKeyDown: keyDownHandler,
               children: /* @__PURE__ */ jsx(
                 Calendar_default,
                 {
                   mode: "range",
-                  numberOfMonths: 2,
+                  numberOfMonths: fit.months,
                   autoFocus: true,
                   value: range,
                   min,