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

package/dist/Select/index.js

@@ -1,19 +1,19 @@
 'use client';
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkYHZFOVVIjs = require('../chunk-YHZFOVVI.js');
-require('../chunk-UVVBMWR4.js');
+var _chunkDIMJQLWYjs = require('../chunk-DIMJQLWY.js');
+require('../chunk-JFNYQSEZ.js');
+require('../chunk-AG2NWQYL.js');
 require('../chunk-DSX6YDJM.js');
 require('../chunk-V57PNXMD.js');
 require('../chunk-JJFOGZ6V.js');
-require('../chunk-JFNYQSEZ.js');
-require('../chunk-AXYDJGTN.js');
 require('../chunk-KBZEYKCZ.js');
+require('../chunk-AXYDJGTN.js');
 require('../chunk-LDTDMDE6.js');
 require('../chunk-BXDUHMWS.js');
-require('../chunk-ZRORQ2WH.js');
 require('../chunk-33BUV2RX.js');
 require('../chunk-GGD4BGH2.js');
+require('../chunk-ZRORQ2WH.js');
 require('../chunk-GJZT47MP.js');
 require('../chunk-MAICNLTY.js');
 require('../chunk-UX2B3G6U.js');
@@ -24,4 +24,4 @@ require('../chunk-SZIX7BM5.js');
 require('../chunk-5KUROAEP.js');
 
 
-exports.default = _chunkYHZFOVVIjs.Select_default;
+exports.default = _chunkDIMJQLWYjs.Select_default;

package/dist/Slider/index.js

@@ -1,10 +1,10 @@
 'use client';
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkFLK7EAOEjs = require('../chunk-FLK7EAOE.js');
-require('../chunk-ZRORQ2WH.js');
+var _chunkIUZV5Y27js = require('../chunk-IUZV5Y27.js');
 require('../chunk-33BUV2RX.js');
 require('../chunk-GGD4BGH2.js');
+require('../chunk-ZRORQ2WH.js');
 require('../chunk-MAICNLTY.js');
 require('../chunk-UX2B3G6U.js');
 require('../chunk-V5I4ORQQ.js');
@@ -14,4 +14,4 @@ require('../chunk-SZIX7BM5.js');
 require('../chunk-5KUROAEP.js');
 
 
-exports.default = _chunkFLK7EAOEjs.Slider_default;
+exports.default = _chunkIUZV5Y27js.Slider_default;

package/dist/Table/index.js

@@ -6,9 +6,9 @@ require('../chunk-E5EDUOQT.js');
 require('../chunk-JJFOGZ6V.js');
 require('../chunk-HKOESPKZ.js');
 require('../chunk-AXYDJGTN.js');
-require('../chunk-ZRORQ2WH.js');
 require('../chunk-33BUV2RX.js');
 require('../chunk-GGD4BGH2.js');
+require('../chunk-ZRORQ2WH.js');
 require('../chunk-RZBEZ26A.js');
 require('../chunk-MAICNLTY.js');
 require('../chunk-UX2B3G6U.js');

package/dist/TagsInput/TagsInput.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { NormalTypes } from '../utils/prop-types';
+interface Props {
+    value?: Array<string>;
+    initialValue?: Array<string>;
+    onChange?: (tags: Array<string>) => void;
+    max?: number;
+    allowDuplicates?: boolean;
+    type?: NormalTypes;
+    rounded?: boolean;
+    filled?: boolean;
+    light?: boolean;
+    ghost?: boolean;
+    subtle?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    className?: string;
+}
+type NativeAttrs = Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof Props | 'defaultValue' | 'type'>;
+export type TagsInputProps = Props & NativeAttrs;
+declare const TagsInput: import("../use-scale/with-scale").ScaleComponent<HTMLInputElement, Props & NativeAttrs & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default TagsInput;

package/dist/TagsInput/index.d.ts

@@ -0,0 +1,3 @@
+import TagsInput from './TagsInput';
+export type { TagsInputProps } from './TagsInput';
+export default TagsInput;

package/dist/TagsInput/index.js

@@ -0,0 +1,17 @@
+'use client';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkG4KB56ROjs = require('../chunk-G4KB56RO.js');
+require('../chunk-UOGCO6CV.js');
+require('../chunk-KBZEYKCZ.js');
+require('../chunk-GJZT47MP.js');
+require('../chunk-MAICNLTY.js');
+require('../chunk-UX2B3G6U.js');
+require('../chunk-V5I4ORQQ.js');
+require('../chunk-FEA5BJ35.js');
+require('../chunk-X5PGXMVQ.js');
+require('../chunk-SZIX7BM5.js');
+require('../chunk-5KUROAEP.js');
+
+
+exports.default = _chunkG4KB56ROjs.TagsInput_default;

package/dist/Tree/Tree.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { TreeNodeData } from './TreeContext';
+export type { TreeNodeData } from './TreeContext';
+interface Props {
+    data: Array<TreeNodeData>;
+    value?: string | null;
+    initialValue?: string | null;
+    onChange?: (value: string, node: TreeNodeData) => void;
+    expanded?: Array<string>;
+    initialExpanded?: Array<string>;
+    onExpandedChange?: (expanded: Array<string>) => void;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLUListElement>, keyof Props | 'defaultValue'>;
+export type TreeProps = Props & NativeAttrs;
+declare const Tree: import("../use-scale/with-scale").ScaleComponent<HTMLUListElement, Props & NativeAttrs & React.RefAttributes<HTMLUListElement>>;
+export default Tree;

package/dist/Tree/TreeContext.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface TreeNodeData {
+    value: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    children?: Array<TreeNodeData>;
+}
+export interface TreeConfig {
+    selected: string | null;
+    expanded: Array<string>;
+    tabbable: string | undefined;
+    activate: (node: TreeNodeData) => void;
+    register: (value: string, element: HTMLLIElement | null) => void;
+}
+export declare const TreeContext: React.Context<TreeConfig>;
+export declare const useTreeContext: () => TreeConfig;

package/dist/Tree/TreeNode.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TreeNodeData } from './TreeContext';
+interface Props {
+    node: TreeNodeData;
+    level: number;
+}
+declare function TreeNode({ node, level }: Props): React.JSX.Element;
+export default TreeNode;

package/dist/Tree/index.d.ts

@@ -0,0 +1,3 @@
+import Tree from './Tree';
+export type { TreeProps, TreeNodeData } from './Tree';
+export default Tree;

package/dist/Tree/index.js

@@ -0,0 +1,14 @@
+'use client';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkK6UULETPjs = require('../chunk-K6UULETP.js');
+require('../chunk-MAICNLTY.js');
+require('../chunk-UX2B3G6U.js');
+require('../chunk-V5I4ORQQ.js');
+require('../chunk-FEA5BJ35.js');
+require('../chunk-X5PGXMVQ.js');
+require('../chunk-SZIX7BM5.js');
+require('../chunk-5KUROAEP.js');
+
+
+exports.default = _chunkK6UULETPjs.Tree_default;

package/dist/chunk-2A4BSQ66.js

@@ -0,0 +1,130 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/SegmentedControl/SegmentedControl.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/SegmentedControl/SegmentedControlContext.ts
+
+var SegmentedControlContext = _react2.default.createContext({ disabled: false });
+var useSegmentedControlContext = () => _react2.default.useContext(SegmentedControlContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/SegmentedControl/SegmentedControl.module.css.bolio-css-module-source
+var SegmentedControl_module_css_default = { "segmented": "SegmentedControl-module_segmented__DCgXM" };
+
+// core/SegmentedControl/SegmentedControl.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var SegmentedControlComponent = _react2.default.forwardRef(
+  ({
+    value,
+    initialValue,
+    onChange,
+    disabled = false,
+    fullWidth = false,
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const name = _react.useId.call(void 0, );
+    const [selfValue, setSelfValue] = _react.useState.call(void 0, initialValue);
+    const current = value !== void 0 ? value : selfValue;
+    const providerValue = _react.useMemo.call(void 0, 
+      () => ({
+        name,
+        value: current,
+        disabled,
+        select: (next) => {
+          setSelfValue(next);
+          if (onChange) onChange(next);
+        }
+      }),
+      [name, current, disabled, onChange]
+    );
+    const groupStyle = {
+      width: SCALES.width(1, fullWidth ? "100%" : "fit-content"),
+      height: SCALES.height(2.25),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      fontSize: SCALES.font(0.875),
+      "--segmented-bg": theme.palette.accents_1,
+      "--segmented-border": theme.palette.border,
+      "--segmented-color": theme.palette.accents_5,
+      "--segmented-hover-color": theme.palette.foreground,
+      "--segmented-active-bg": theme.palette.background,
+      "--segmented-active-color": theme.palette.foreground,
+      "--segmented-shadow": theme.expressiveness.shadowSmall,
+      "--segmented-focus": theme.palette.primary,
+      "--segmented-radius": theme.layout.radius,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SegmentedControlContext.Provider, { value: providerValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-disabled": disabled || void 0,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, SegmentedControl_module_css_default.segmented, className),
+        ...props,
+        style: groupStyle,
+        children
+      }
+    ) });
+  }
+);
+SegmentedControlComponent.displayName = "BolioUISegmentedControl";
+var SegmentedControl = _chunkMAICNLTYjs.with_scale_default.call(void 0, SegmentedControlComponent);
+var SegmentedControl_default = SegmentedControl;
+
+// core/SegmentedControl/SegmentedControlItem.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/SegmentedControl/SegmentedControlItem.module.css.bolio-css-module-source
+var SegmentedControlItem_module_css_default = { "item": "SegmentedControlItem-module_item__R48V1", "input": "SegmentedControlItem-module_input__Q8UWL", "text": "SegmentedControlItem-module_text__7YVZC" };
+
+// core/SegmentedControl/SegmentedControlItem.tsx
+
+var SegmentedControlItem = _react2.default.forwardRef(
+  ({ value, disabled = false, className = "", children, style, ...props }, ref) => {
+    const group = useSegmentedControlContext();
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: _chunk5KUROAEPjs.use_classes_default.call(void 0, SegmentedControlItem_module_css_default.item, className), style, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          ref,
+          type: "radio",
+          className: SegmentedControlItem_module_css_default.input,
+          name: group.name,
+          value,
+          checked: group.value === value,
+          disabled: disabled || group.disabled,
+          onChange: () => {
+            var _a;
+            return (_a = group.select) == null ? void 0 : _a.call(group, value);
+          },
+          ...props
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: SegmentedControlItem_module_css_default.text, children })
+    ] });
+  }
+);
+SegmentedControlItem.displayName = "BolioUISegmentedControlItem";
+var SegmentedControlItem_default = SegmentedControlItem;
+
+// core/SegmentedControl/index.ts
+SegmentedControl_default.Item = SegmentedControlItem_default;
+var SegmentedControl_default2 = SegmentedControl_default;
+
+
+
+exports.SegmentedControl_default = SegmentedControl_default2;

package/dist/{chunk-HIFS4JIO.js → chunk-2EYJZXS4.js}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
 
 
 
-var _chunkIBC5BABSjs = require('./chunk-IBC5BABS.js');
 
 
-var _chunkKBZEYKCZjs = require('./chunk-KBZEYKCZ.js');
+var _chunkP245HSVBjs = require('./chunk-P245HSVB.js');
 
 
 var _chunkDGXZP4VJjs = require('./chunk-DGXZP4VJ.js');
@@ -62,7 +62,7 @@ var DatePickerComponent = _react2.default.forwardRef(
     const isControlled = customValue !== void 0;
     const [selfValue, setSelfValue] = _react.useState.call(void 0, initialValue);
     const selected = isControlled ? customValue : selfValue;
-    const selectedText = selected ? _chunkIBC5BABSjs.toISO.call(void 0, selected) : "";
+    const selectedText = selected ? _chunkP245HSVBjs.toISO.call(void 0, selected) : "";
     const [text, setText] = _react.useState.call(void 0, selectedText);
     const [open, setOpen] = _react.useState.call(void 0, false);
     _react.useEffect.call(void 0, () => {
@@ -73,7 +73,7 @@ var DatePickerComponent = _react2.default.forwardRef(
     const buttonRef = _react.useRef.call(void 0, null);
     _react.useImperativeHandle.call(void 0, ref, () => inputRef.current);
     _chunkDGXZP4VJjs.use_click_away_default.call(void 0, rootRef, () => setOpen(false));
-    const isInRange = (date) => !(min && date < _chunkIBC5BABSjs.startOfDay.call(void 0, min) || max && date > _chunkIBC5BABSjs.startOfDay.call(void 0, max));
+    const isInRange = (date) => !(min && date < _chunkP245HSVBjs.startOfDay.call(void 0, min) || max && date > _chunkP245HSVBjs.startOfDay.call(void 0, max));
     const commit = (date) => {
       if (!isControlled) setSelfValue(date);
       if (onChange) onChange(date);
@@ -82,7 +82,7 @@ var DatePickerComponent = _react2.default.forwardRef(
       const next = event.target.value;
       setText(next);
       if (next === "") return commit(null);
-      const date = _chunkIBC5BABSjs.fromISO.call(void 0, next);
+      const date = _chunkP245HSVBjs.fromISO.call(void 0, next);
       if (date && isInRange(date)) commit(date);
     };
     const blurHandler = (event) => {
@@ -92,7 +92,7 @@ var DatePickerComponent = _react2.default.forwardRef(
     const pick = (date) => {
       var _a;
       commit(date);
-      setText(_chunkIBC5BABSjs.toISO.call(void 0, date));
+      setText(_chunkP245HSVBjs.toISO.call(void 0, date));
       setOpen(false);
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     };
@@ -195,7 +195,7 @@ var DatePickerComponent = _react2.default.forwardRef(
               className: DatePicker_module_css_default.popup,
               onKeyDown: keyDownHandler,
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkIBC5BABSjs.Calendar_default,
+                _chunkP245HSVBjs.Calendar_default,
                 {
                   autoFocus: true,
                   value: selected,

package/dist/chunk-4X4ELIMQ.js

@@ -0,0 +1,231 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Dropzone/Dropzone.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Dropzone/DropzoneThumbnail.tsx
+
+
+// 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
+var _jsxruntime = require('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] = _react.useState.call(void 0, );
+  _react.useEffect.call(void 0, () => {
+    if (!previewable) return;
+    const objectUrl = URL.createObjectURL(file);
+    setUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [file, previewable]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: Dropzone_module_css_default.thumbnail, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Dropzone_module_css_default.tile, children: [
+      previewable ? (
+        // the name below the tile describes the file
+        url && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: url, alt: "", className: Dropzone_module_css_default.preview })
+      ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "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__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M14 3v5h5" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Dropzone_module_css_default.format, children: formatOf(file) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: Dropzone_module_css_default.remove,
+          "aria-label": removeLabel,
+          disabled,
+          onClick: onRemove,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "path",
+            {
+              d: "M6 6l12 12M18 6L6 18",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round"
+            }
+          ) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Dropzone_module_css_default.name, title: file.name, children: file.name })
+  ] });
+}
+var DropzoneThumbnail_default = DropzoneThumbnail;
+
+// core/Dropzone/Dropzone.tsx
+
+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.default.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 = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const [dragging, setDragging] = _react.useState.call(void 0, false);
+    const [selfFiles, setSelfFiles] = _react.useState.call(void 0, []);
+    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__ */ _jsxruntime.jsxs.call(void 0, "div", { className, style: dropzoneStyle, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "label",
+        {
+          className: _chunk5KUROAEPjs.use_classes_default.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, 
+              "input",
+              {
+                ref,
+                type: "file",
+                className: Dropzone_module_css_default.input,
+                accept,
+                multiple,
+                disabled,
+                onChange: changeHandler,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Dropzone_module_css_default.content, children })
+          ]
+        }
+      ),
+      thumbnails && files.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: Dropzone_module_css_default.thumbnails, children: files.map((file, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        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 = _chunkMAICNLTYjs.with_scale_default.call(void 0, DropzoneComponent);
+var Dropzone_default = Dropzone;
+
+// core/Dropzone/index.ts
+var Dropzone_default2 = Dropzone_default;
+
+
+
+exports.Dropzone_default = Dropzone_default2;

package/dist/{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 = _react2.default.memo(
   ({ children, parent, visible, disableMatchWidth, getPopupContainer }) => {
     const el = _chunkBXDUHMWSjs.use_portal_default.call(void 0, "dropdown", getPopupContainer);
     const [rect, setRect] = _react.useState.call(void 0, defaultRect);
+    const [menu, setMenu] = _react.useState.call(void 0, null);
+    const [flipHeight, setFlipHeight] = _react.useState.call(void 0, null);
     if (parent && process.env.NODE_ENV !== "production") {
       if (getPopupContainer && getPopupContainer()) {
         const el2 = getPopupContainer();
@@ -76,9 +80,10 @@ var Dropdown = _react2.default.memo(
         top,
         left,
         right,
-        width: nativeWidth
+        width: nativeWidth,
+        elementTop
       } = _chunkDSX6YDJMjs.getRefRect.call(void 0, parent, getPopupContainer);
-      setRect({ top, left, right, width: nativeWidth });
+      setRect({ top, left, right, width: nativeWidth, elementTop });
     };
     _chunkJJFOGZ6Vjs.use_resize_default.call(void 0, updateRect);
     _chunkV57PNXMDjs.use_click_anywhere_default.call(void 0, () => {
@@ -106,10 +111,18 @@ var Dropdown = _react2.default.memo(
     const mouseDownHandler = (event) => {
       event.preventDefault();
     };
+    _react.useEffect.call(void 0, () => {
+      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 = _react2.default.memo(
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLDTDMDE6js.css_transition_default, { visible, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "div",
         {
+          ref: setMenu,
           className: "",
           onClick: clickHandler,
           onMouseDown: mouseDownHandler,