@bolio-ui/core 3.0.0-alpha.0 → 3.0.0-alpha.2

package/esm/chunk-3S6G7WGK.js

@@ -0,0 +1,109 @@
+import {
+  Menu_default
+} from "./chunk-FL6J36B7.js";
+import {
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/ContextMenu/ContextMenu.tsx
+import React, { useEffect, useRef, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/ContextMenu/ContextMenu.module.css.bolio-css-module-source
+var ContextMenu_module_css_default = { "area": "ContextMenu-module_area__IAOF5", "trigger": "ContextMenu-module_trigger__OY2LR" };
+
+// core/ContextMenu/ContextMenu.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ContextMenuComponent = React.forwardRef(
+  ({
+    content,
+    disabled = false,
+    onVisibleChange,
+    className = "",
+    children,
+    onContextMenu,
+    ...props
+  }, ref) => {
+    const [point, setPoint] = useState(null);
+    const area = useRef(null);
+    const setRefs = (element) => {
+      area.current = element;
+      if (typeof ref === "function") ref(element);
+      else if (ref) ref.current = element;
+    };
+    const change = (visible, next = null) => {
+      setPoint(visible ? next : null);
+      if (onVisibleChange) onVisibleChange(visible);
+    };
+    const contextMenuHandler = (event) => {
+      if (onContextMenu) onContextMenu(event);
+      if (disabled || event.defaultPrevented) return;
+      event.preventDefault();
+      change(true, { x: event.clientX, y: event.clientY });
+    };
+    const open = point !== null;
+    useEffect(() => {
+      if (!open) return;
+      const close = () => {
+        setPoint(null);
+        if (onVisibleChange) onVisibleChange(false);
+      };
+      window.addEventListener("scroll", close, { capture: true, once: true });
+      return () => window.removeEventListener("scroll", close, true);
+    }, [open, onVisibleChange]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setRefs,
+        className: use_classes_default(ContextMenu_module_css_default.area, className),
+        ...props,
+        onContextMenu: contextMenuHandler,
+        children: [
+          children,
+          point && // a new point opens a new menu, so it is placed there
+          /* @__PURE__ */ jsx(
+            Menu_default,
+            {
+              visible: true,
+              onVisibleChange: (visible) => change(visible),
+              style: {
+                position: "fixed",
+                left: point.x,
+                top: point.y,
+                width: 0,
+                height: 0
+              },
+              trigger: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-hidden": "true",
+                  className: ContextMenu_module_css_default.trigger,
+                  onFocus: () => {
+                    var _a;
+                    return (_a = area.current) == null ? void 0 : _a.focus();
+                  }
+                }
+              ),
+              children: content
+            },
+            `${point.x}:${point.y}`
+          )
+        ]
+      }
+    );
+  }
+);
+ContextMenuComponent.displayName = "BolioUIContextMenu";
+var ContextMenu = with_scale_default(ContextMenuComponent);
+var ContextMenu_default = ContextMenu;
+
+// core/ContextMenu/index.ts
+var ContextMenu_default2 = ContextMenu_default;
+
+export {
+  ContextMenu_default2 as ContextMenu_default
+};

package/esm/chunk-4X4ELIMQ.js

@@ -0,0 +1,231 @@
+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/Dropzone/Dropzone.tsx
+import React2, { useState as useState2 } from "react";
+
+// core/Dropzone/DropzoneThumbnail.tsx
+import { useEffect, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Dropzone/Dropzone.module.css.bolio-css-module-source
+var Dropzone_module_css_default = { "dropzone": "Dropzone-module_dropzone__-6nFN", "input": "Dropzone-module_input__-FpKo", "content": "Dropzone-module_content__Uafwo", "dragging": "Dropzone-module_dragging__z9VG8", "disabled": "Dropzone-module_disabled__rvXlc", "thumbnails": "Dropzone-module_thumbnails__x67bm", "thumbnail": "Dropzone-module_thumbnail__-ke6R", "tile": "Dropzone-module_tile__o-TLL", "preview": "Dropzone-module_preview__pQ3gz", "fileIcon": "Dropzone-module_fileIcon__hnpZV", "format": "Dropzone-module_format__oEMEw", "remove": "Dropzone-module_remove__pjfHy", "name": "Dropzone-module_name__OAPKM" };
+
+// core/Dropzone/DropzoneThumbnail.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var formatOf = (file) => {
+  const extension = file.name.includes(".") ? file.name.split(".").pop() : file.type.split("/")[1];
+  return (extension || "file").slice(0, 4).toUpperCase();
+};
+function DropzoneThumbnail({ file, removeLabel, disabled, onRemove }) {
+  const previewable = file.type.startsWith("image/");
+  const [url, setUrl] = useState();
+  useEffect(() => {
+    if (!previewable) return;
+    const objectUrl = URL.createObjectURL(file);
+    setUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [file, previewable]);
+  return /* @__PURE__ */ jsxs("li", { className: Dropzone_module_css_default.thumbnail, children: [
+    /* @__PURE__ */ jsxs("div", { className: Dropzone_module_css_default.tile, children: [
+      previewable ? (
+        // the name below the tile describes the file
+        url && /* @__PURE__ */ jsx("img", { src: url, alt: "", className: Dropzone_module_css_default.preview })
+      ) : /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          width: "2.5em",
+          height: "2.5em",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: Dropzone_module_css_default.fileIcon,
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+            /* @__PURE__ */ jsx("path", { d: "M14 3v5h5" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: Dropzone_module_css_default.format, children: formatOf(file) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: Dropzone_module_css_default.remove,
+          "aria-label": removeLabel,
+          disabled,
+          onClick: onRemove,
+          children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M6 6l12 12M18 6L6 18",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round"
+            }
+          ) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: Dropzone_module_css_default.name, title: file.name, children: file.name })
+  ] });
+}
+var DropzoneThumbnail_default = DropzoneThumbnail;
+
+// core/Dropzone/Dropzone.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var matchesAccept = (file, accept) => {
+  if (!accept) return true;
+  const name = file.name.toLowerCase();
+  return accept.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean).some(
+    (token) => token.startsWith(".") ? name.endsWith(token) : token.endsWith("/*") ? file.type.toLowerCase().startsWith(token.slice(0, -1)) : file.type.toLowerCase() === token
+  );
+};
+var DropzoneComponent = React2.forwardRef(
+  ({
+    accept,
+    multiple = false,
+    maxSize,
+    maxFiles,
+    onDrop,
+    thumbnails = false,
+    value,
+    onChange,
+    removeLabel = (file) => `Remove ${file.name}`,
+    disabled = false,
+    className = "",
+    children = "Drag files here or click to choose them",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const [dragging, setDragging] = useState2(false);
+    const [selfFiles, setSelfFiles] = useState2([]);
+    const files = value !== void 0 ? value : selfFiles;
+    const updateFiles = (next) => {
+      if (value === void 0) setSelfFiles(next);
+      if (onChange) onChange(next);
+    };
+    const receive = (list) => {
+      if (disabled || !list) return;
+      const kept = thumbnails && multiple ? files : [];
+      const limit = multiple ? (maxFiles != null ? maxFiles : Infinity) - kept.length : 1;
+      const accepted = [];
+      const rejected = [];
+      Array.from(list).forEach((file) => {
+        if (!matchesAccept(file, accept))
+          rejected.push({ file, reason: "file-type" });
+        else if (maxSize !== void 0 && file.size > maxSize)
+          rejected.push({ file, reason: "file-too-large" });
+        else if (accepted.length >= limit)
+          rejected.push({ file, reason: "too-many-files" });
+        else accepted.push(file);
+      });
+      if (thumbnails && accepted.length)
+        updateFiles(multiple ? [...kept, ...accepted] : accepted);
+      if (onDrop) onDrop(accepted, rejected);
+    };
+    const dragHandler = (event) => {
+      if (disabled) return;
+      event.preventDefault();
+      if (event.type === "dragleave" && event.currentTarget.contains(event.relatedTarget))
+        return;
+      setDragging(event.type !== "dragleave");
+    };
+    const dropHandler = (event) => {
+      if (disabled) return;
+      event.preventDefault();
+      setDragging(false);
+      receive(event.dataTransfer.files);
+    };
+    const changeHandler = (event) => {
+      receive(event.target.files);
+      event.target.value = "";
+    };
+    const dropzoneStyle = {
+      width: SCALES.width(1, "100%"),
+      height: SCALES.height(1, "auto"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      fontSize: SCALES.font(0.875),
+      "--dropzone-color": theme.palette.accents_6,
+      "--dropzone-bg": theme.palette.background,
+      "--dropzone-border": theme.palette.accents_3,
+      "--dropzone-hover-border": theme.palette.accents_5,
+      "--dropzone-active": theme.palette.primary,
+      "--dropzone-radius": theme.layout.radius,
+      "--dropzone-tile-bg": theme.palette.accents_1,
+      "--dropzone-tile-color": theme.palette.accents_4,
+      "--dropzone-name-color": theme.palette.accents_6,
+      "--dropzone-badge-bg": theme.palette.foreground,
+      "--dropzone-badge-color": theme.palette.background,
+      "--dropzone-remove-bg": theme.palette.background,
+      "--dropzone-remove-color": theme.palette.accents_6,
+      "--dropzone-remove-hover-color": theme.palette.foreground,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs2("div", { className, style: dropzoneStyle, children: [
+      /* @__PURE__ */ jsxs2(
+        "label",
+        {
+          className: use_classes_default(Dropzone_module_css_default.dropzone, {
+            [Dropzone_module_css_default.dragging]: dragging,
+            [Dropzone_module_css_default.disabled]: disabled
+          }),
+          onDragEnter: dragHandler,
+          onDragOver: dragHandler,
+          onDragLeave: dragHandler,
+          onDrop: dropHandler,
+          children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                ref,
+                type: "file",
+                className: Dropzone_module_css_default.input,
+                accept,
+                multiple,
+                disabled,
+                onChange: changeHandler,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx2("span", { className: Dropzone_module_css_default.content, children })
+          ]
+        }
+      ),
+      thumbnails && files.length > 0 && /* @__PURE__ */ jsx2("ul", { className: Dropzone_module_css_default.thumbnails, children: files.map((file, index) => /* @__PURE__ */ jsx2(
+        DropzoneThumbnail_default,
+        {
+          file,
+          removeLabel: removeLabel(file),
+          disabled,
+          onRemove: () => updateFiles(files.filter((_, i) => i !== index))
+        },
+        `${file.name}-${file.size}-${file.lastModified}-${index}`
+      )) })
+    ] });
+  }
+);
+DropzoneComponent.displayName = "BolioUIDropzone";
+var Dropzone = with_scale_default(DropzoneComponent);
+var Dropzone_default = Dropzone;
+
+// core/Dropzone/index.ts
+var Dropzone_default2 = Dropzone_default;
+
+export {
+  Dropzone_default2 as Dropzone_default
+};

package/esm/{chunk-UVVBMWR4.js → chunk-AG2NWQYL.js}

@@ -53,12 +53,16 @@ var defaultRect = {
   top: -1e3,
   left: -1e3,
   right: -1e3,
-  width: 0
+  width: 0,
+  elementTop: -1e3
 };
+var GAP = 2;
 var Dropdown = React.memo(
   ({ children, parent, visible, disableMatchWidth, getPopupContainer }) => {
     const el = use_portal_default("dropdown", getPopupContainer);
     const [rect, setRect] = useState(defaultRect);
+    const [menu, setMenu] = useState(null);
+    const [flipHeight, setFlipHeight] = useState(null);
     if (parent && process.env.NODE_ENV !== "production") {
       if (getPopupContainer && getPopupContainer()) {
         const el2 = getPopupContainer();
@@ -76,9 +80,10 @@ var Dropdown = React.memo(
         top,
         left,
         right,
-        width: nativeWidth
+        width: nativeWidth,
+        elementTop
       } = getRefRect(parent, getPopupContainer);
-      setRect({ top, left, right, width: nativeWidth });
+      setRect({ top, left, right, width: nativeWidth, elementTop });
     };
     use_resize_default(updateRect);
     use_click_anywhere_default(() => {
@@ -106,10 +111,18 @@ var Dropdown = React.memo(
     const mouseDownHandler = (event) => {
       event.preventDefault();
     };
+    useEffect2(() => {
+      const trigger = parent == null ? void 0 : parent.current;
+      if (!visible || !trigger || !menu) return setFlipHeight(null);
+      const { top, bottom } = trigger.getBoundingClientRect();
+      const height = menu.offsetHeight;
+      const below = window.innerHeight - bottom;
+      setFlipHeight(height + GAP > below && top > below ? height : null);
+    }, [visible, parent, menu, rect]);
     if (!parent || !el) return null;
     const dropdownStyle = {
       position: "absolute",
-      top: rect.top + 2,
+      top: flipHeight === null ? rect.top + GAP : rect.elementTop - flipHeight - GAP,
       left: rect.left,
       zIndex: 1100,
       ...disableMatchWidth ? { minWidth: rect.width } : { width: rect.width }
@@ -118,6 +131,7 @@ var Dropdown = React.memo(
       /* @__PURE__ */ jsx(css_transition_default, { visible, children: /* @__PURE__ */ jsx(
         "div",
         {
+          ref: setMenu,
           className: "",
           onClick: clickHandler,
           onMouseDown: mouseDownHandler,

package/esm/chunk-BHQRX76X.js

@@ -0,0 +1,275 @@
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.js";
+import {
+  Calendar_default,
+  fromISO,
+  startOfDay,
+  toISO
+} from "./chunk-P245HSVB.js";
+import {
+  use_click_away_default
+} from "./chunk-DGXZP4VJ.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/DateRangePicker/DateRangePicker.tsx
+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", "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(
+  ({
+    value: customValue,
+    initialValue = emptyRange,
+    onChange,
+    min,
+    max,
+    locale,
+    weekStartsOn,
+    startPlaceholder = "YYYY-MM-DD",
+    endPlaceholder = "YYYY-MM-DD",
+    startLabel = "Start date",
+    endLabel = "End date",
+    calendarLabel = "Choose dates",
+    disabled = false,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const colors = getColors(theme.palette, type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const range = isControlled ? customValue : selfValue;
+    const [start, end] = range;
+    const startText = format(start);
+    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]);
+    const rootRef = useRef(null);
+    const endRef = useRef(null);
+    const buttonRef = useRef(null);
+    use_click_away_default(rootRef, () => setOpen(false));
+    const isInBounds = (date) => !(min && date < startOfDay(min) || max && date > startOfDay(max));
+    const commit = (next) => {
+      if (!isControlled) setSelfValue(next);
+      if (onChange) onChange(next);
+    };
+    const inputHandler = (edge) => (event) => {
+      const next = event.target.value;
+      setTexts((last) => ({ ...last, [edge]: next }));
+      const other = edge === "start" ? end : start;
+      if (next === "") {
+        return commit(edge === "start" ? [null, other] : [other, null]);
+      }
+      const date = fromISO(next);
+      if (!date || !isInBounds(date)) return;
+      if (other && (edge === "start" ? date > other : date < other)) return;
+      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);
+      if (!next[1]) return;
+      setOpen(false);
+      (_a = endRef.current) == null ? void 0 : _a.focus();
+    };
+    const keyDownHandler = (event) => {
+      var _a;
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      setOpen(false);
+      (_a = buttonRef.current) == null ? void 0 : _a.focus();
+    };
+    const rangeStyle = {
+      "--daterange-font-size": SCALES.font(0.875),
+      "--daterange-input-height": SCALES.height(2.25),
+      "--daterange-width": SCALES.width(1, "initial"),
+      "--daterange-height": SCALES.height(1, "auto"),
+      "--daterange-padding-top": SCALES.pt(0),
+      "--daterange-padding-right": SCALES.pr(0),
+      "--daterange-padding-bottom": SCALES.pb(0),
+      "--daterange-padding-left": SCALES.pl(0),
+      "--daterange-margin-top": SCALES.mt(0),
+      "--daterange-margin-right": SCALES.mr(0),
+      "--daterange-margin-bottom": SCALES.mb(0),
+      "--daterange-margin-left": SCALES.ml(0),
+      "--daterange-bg": theme.palette.background,
+      "--daterange-border-color": theme.palette.border,
+      "--daterange-radius": rounded ? "25px" : theme.layout.radius,
+      "--daterange-popup-radius": theme.layout.radius,
+      "--daterange-field-color": colors.color,
+      "--daterange-field-bg": colors.bgColor,
+      "--daterange-field-border": colors.borderColor,
+      "--daterange-field-hover-bg": colors.hoverBgColor,
+      "--daterange-field-hover-border": colors.hoverBorder,
+      "--daterange-focus-border-color": colors.focusBorder,
+      "--daterange-placeholder-color": colors.placeholderColor,
+      "--daterange-separator-color": colors.iconColor,
+      "--daterange-toggle-color": colors.iconColor,
+      "--daterange-toggle-hover-color": colors.color,
+      "--daterange-shadow": theme.expressiveness.shadowMedium,
+      ...style
+    };
+    const inputProps = {
+      type: "text",
+      autoComplete: "off",
+      inputMode: "numeric",
+      disabled,
+      onBlur: blurHandler,
+      className: DateRangePicker_module_css_default.input
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          rootRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: use_classes_default(DateRangePicker_module_css_default.daterange, className),
+        style: rangeStyle,
+        role: "group",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: DateRangePicker_module_css_default.field, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...inputProps,
+                value: texts.start,
+                placeholder: startPlaceholder,
+                "aria-label": startLabel,
+                onChange: inputHandler("start")
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: DateRangePicker_module_css_default.separator, "aria-hidden": "true", children: "\u2013" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...inputProps,
+                ref: endRef,
+                value: texts.end,
+                placeholder: endPlaceholder,
+                "aria-label": endLabel,
+                onChange: inputHandler("end")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: buttonRef,
+                type: "button",
+                className: DateRangePicker_module_css_default.toggle,
+                "aria-label": calendarLabel,
+                "aria-haspopup": "dialog",
+                "aria-expanded": open,
+                disabled,
+                onClick: toggle,
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "1.25em",
+                    height: "1.25em",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: [
+                      /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                      /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          open && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "dialog",
+              "aria-label": calendarLabel,
+              className: joinClasses(DateRangePicker_module_css_default.popup, {
+                [DateRangePicker_module_css_default.alignEnd]: fit.alignEnd
+              }),
+              onKeyDown: keyDownHandler,
+              children: /* @__PURE__ */ jsx(
+                Calendar_default,
+                {
+                  mode: "range",
+                  numberOfMonths: fit.months,
+                  autoFocus: true,
+                  value: range,
+                  min,
+                  max,
+                  locale,
+                  weekStartsOn,
+                  onChange: pick
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DateRangePickerComponent.displayName = "BolioUIDateRangePicker";
+var DateRangePicker = with_scale_default(DateRangePickerComponent);
+var DateRangePicker_default = DateRangePicker;
+
+// core/DateRangePicker/index.ts
+var DateRangePicker_default2 = DateRangePicker_default;
+
+export {
+  DateRangePicker_default2 as DateRangePicker_default
+};