@blockle/blocks 0.11.2 → 0.12.0

package/dist/index.cjs

@@ -8,7 +8,7 @@ const styles_lib_theme_vars_css_cjs = require("./styles/lib/theme/vars.css.cjs")
 const styles_components_display_Divider_Divider_cjs = require("./styles/components/display/Divider/Divider.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
 const jsxRuntime = require("react/jsx-runtime");
-const require$$0 = require("react");
+const react = require("react");
 const styles_components_form_Button_Button_cjs = require("./styles/components/form/Button/Button.cjs");
 const styles_components_form_Checkbox_Checkbox_cjs = require("./styles/components/form/Checkbox/Checkbox.cjs");
 const styles_components_form_Input_Input_cjs = require("./styles/components/form/Input/Input.cjs");
@@ -20,7 +20,7 @@ const styles_components_other_BlocksProvider_BlocksProvider_cjs = require("./sty
 const styles_components_overlay_Dialog_Dialog_cjs = require("./styles/components/overlay/Dialog/Dialog.cjs");
 const styles_components_typography_Heading_Heading_cjs = require("./styles/components/typography/Heading/Heading.cjs");
 const styles_components_typography_Text_Text_cjs = require("./styles/components/typography/Text/Text.cjs");
-const Progress = require$$0.forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
+const Progress = react.forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
   const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles(
     "progress",
     {
@@ -120,7 +120,7 @@ const Stack = ({
   );
 };
 const Slottable = styles_components_display_Divider_Divider_cjs.createSlottable("a");
-const Link = require$$0.forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
+const Link = react.forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
   const linkClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("link", {
     base: true,
     variants: { variant, underline }
@@ -137,7 +137,7 @@ const Link = require$$0.forwardRef(function Link2({ asChild, className, children
   );
 });
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
-  require$$0.useEffect(() => {
+  react.useEffect(() => {
     if (!enabled) {
       return;
     }
@@ -152,19 +152,19 @@ const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
     };
   }, [ref, onClickOutside, enabled]);
 };
-function getDropdownPosition(align, anchorRef, dropdownRef) {
-  if (!anchorRef.current || !dropdownRef.current) {
+function getDopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
   }
-  dropdownRef.current.style.transform = "none";
-  dropdownRef.current.style.transitionDuration = "0s";
+  popoverRef.current.style.transform = "none";
+  popoverRef.current.style.transitionDuration = "0s";
   const anchorRect = anchorRef.current.getBoundingClientRect();
-  const dropdownRect = dropdownRef.current.getBoundingClientRect();
-  const dropdownStyles = getComputedStyle(dropdownRef.current);
-  const marginTop = Number.parseFloat(dropdownStyles.getPropertyValue("margin-top"));
-  const marginRight = Number.parseFloat(dropdownStyles.getPropertyValue("margin-right"));
-  const marginBottom = Number.parseFloat(dropdownStyles.getPropertyValue("margin-bottom"));
-  const marginLeft = Number.parseFloat(dropdownStyles.getPropertyValue("margin-left"));
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  const popoverStyles = getComputedStyle(popoverRef.current);
+  const marginTop = Number.parseFloat(popoverStyles.getPropertyValue("margin-top"));
+  const marginRight = Number.parseFloat(popoverStyles.getPropertyValue("margin-right"));
+  const marginBottom = Number.parseFloat(popoverStyles.getPropertyValue("margin-bottom"));
+  const marginLeft = Number.parseFloat(popoverStyles.getPropertyValue("margin-left"));
   const marginY = marginTop + marginBottom;
   const marginX = marginRight + marginLeft;
   const docHeight = document.documentElement.clientHeight;
@@ -173,30 +173,30 @@ function getDropdownPosition(align, anchorRef, dropdownRef) {
   const docScrollLeft = document.documentElement.scrollLeft;
   const anchorLeft = anchorRect.left + docScrollLeft;
   const anchorTop = anchorRect.top + docScrollTop;
-  const topPosition = anchorRect.top - (dropdownRect.height + marginTop);
-  const rightPosition = anchorRect.left + anchorRect.width + dropdownRect.width;
-  const bottomPosition = anchorRect.top + anchorRect.height + dropdownRect.height;
-  const leftPosition = anchorRect.left - dropdownRect.width;
-  const offsetX = anchorLeft - (dropdownRect.width - anchorRect.width) / 2;
-  const offsetY = anchorTop - (dropdownRect.height - anchorRect.height) / 2;
-  dropdownRef.current.style.transform = "";
-  dropdownRef.current.style.transitionDuration = "";
+  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
+  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
+  const leftPosition = anchorRect.left - popoverRect.width;
+  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
+  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
+  popoverRef.current.style.transform = "";
+  popoverRef.current.style.transitionDuration = "";
   switch (align) {
     case "top": {
-      return topPosition > 0 ? [offsetX, anchorTop - dropdownRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
     }
     case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - dropdownRect.height - marginY];
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
     }
     case "left": {
-      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - dropdownRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
     }
     case "right": {
-      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - dropdownRect.width - marginX, offsetY];
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
     }
   }
 }
-const Dropdown = ({
+const Popover = ({
   align = "bottom",
   anchorElement,
   children,
@@ -205,31 +205,26 @@ const Dropdown = ({
   open,
   repositionOnScroll,
   style,
-  variant,
   ...restProps
 }) => {
   const layer = styles_components_overlay_Dialog_Dialog_cjs.useLayer();
   const [visible, hide] = styles_components_overlay_Dialog_Dialog_cjs.useVisibilityState(open);
-  const [position, setPosition] = require$$0.useState({ x: 0, y: 0 });
-  const dropdownRef = require$$0.useRef(null);
-  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles(
-    "dropdown",
-    { base: true, variants: { variant } },
-    false
-  );
-  require$$0.useLayoutEffect(() => {
+  const [position, setPosition] = react.useState({ x: 0, y: 0 });
+  const popoverRef = react.useRef(null);
+  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("popover", { base: true }, false);
+  react.useLayoutEffect(() => {
     if (!visible) {
       return;
     }
-    const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+    const position2 = getDopoverPosition(align, anchorElement, popoverRef);
     setPosition({ x: position2[0], y: position2[1] });
   }, [align, anchorElement, visible]);
-  require$$0.useEffect(() => {
+  react.useEffect(() => {
     if (!open || !repositionOnScroll) {
       return;
     }
     function handleResize() {
-      const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+      const position2 = getDopoverPosition(align, anchorElement, popoverRef);
       setPosition({ x: position2[0], y: position2[1] });
     }
     window.addEventListener("resize", handleResize);
@@ -242,34 +237,34 @@ const Dropdown = ({
   styles_components_overlay_Dialog_Dialog_cjs.useIsomorphicLayoutEffect(() => {
     var _a;
     if (!open) {
-      (_a = dropdownRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
       return;
     }
     let timer = requestAnimationFrame(() => {
       timer = requestAnimationFrame(() => {
         var _a2;
-        (_a2 = dropdownRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
       });
     });
     return () => {
       cancelAnimationFrame(timer);
     };
   }, [open, visible]);
-  const onAnimationEnd = require$$0.useCallback(() => {
+  const onAnimationEnd = react.useCallback(() => {
     if (!open) {
       hide();
     }
   }, [hide, open]);
-  require$$0.useEffect(() => {
+  react.useEffect(() => {
     if (open) {
       return;
     }
-    if (!styles_components_overlay_Dialog_Dialog_cjs.hasAnimationDuration(dropdownRef.current)) {
+    if (!styles_components_overlay_Dialog_Dialog_cjs.hasAnimationDuration(popoverRef.current)) {
       hide();
     }
   }, [hide, open]);
   styles_components_overlay_Dialog_Dialog_cjs.useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(dropdownRef, onRequestClose, { enabled: visible });
+  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
   if (!visible) {
     return null;
   }
@@ -277,7 +272,7 @@ const Dropdown = ({
   return /* @__PURE__ */ jsxRuntime.jsx(styles_components_overlay_Dialog_Dialog_cjs.Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(
     styles_components_display_Divider_Divider_cjs.Box,
     {
-      ref: dropdownRef,
+      ref: popoverRef,
       "data-open": dataOpen,
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
@@ -285,10 +280,6 @@ const Dropdown = ({
       position: "absolute",
       style: {
         ...style,
-        // TODO Think about how to handle this, perhaps we could add a custom class to the dropdown
-        // Or we remove it from getDropdownPosition?
-        // "horizontal" ? "vertical"
-        margin: align === "bottom" || align === "top" ? "var(--spacing) 0" : "0 var(--spacing)",
         left: position.x,
         top: position.y
       },
@@ -297,11 +288,20 @@ const Dropdown = ({
     }
   ) });
 };
-const Tooltip = ({ align = "top", children, label }) => {
-  const id = require$$0.useId();
-  const ref = require$$0.useRef(null);
-  const [open, setOpen] = require$$0.useState(false);
-  require$$0.useEffect(() => {
+const Tooltip = ({
+  align = "top",
+  children,
+  label,
+  colorScheme
+}) => {
+  const id = react.useId();
+  const ref = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const tooltipClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("tooltip", {
+    base: true,
+    variants: { colorScheme }
+  });
+  react.useEffect(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -323,20 +323,20 @@ const Tooltip = ({ align = "top", children, label }) => {
       element.removeEventListener("focusout", onLeave);
     };
   }, [ref, setOpen]);
-  if (require$$0.Children.count(children) !== 1) {
+  if (react.Children.count(children) !== 1) {
     throw new Error("Tooltip component can only have one child");
   }
-  const child = require$$0.Children.toArray(children)[0];
-  if (!require$$0.isValidElement(child)) {
+  const child = react.Children.toArray(children)[0];
+  if (!react.isValidElement(child)) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    require$$0.cloneElement(child, {
+    react.cloneElement(child, {
       ref: styles_components_display_Divider_Divider_cjs.composeRefs(ref, child.ref),
       ["aria-describedby"]: open ? id : void 0
     }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      Dropdown,
+      Popover,
       {
         id,
         role: "tooltip",
@@ -346,6 +346,7 @@ const Tooltip = ({ align = "top", children, label }) => {
           setOpen(false);
         },
         align,
+        className: tooltipClassName,
         children: label
       }
     )

package/dist/index.mjs

@@ -154,19 +154,19 @@ const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
     };
   }, [ref, onClickOutside, enabled]);
 };
-function getDropdownPosition(align, anchorRef, dropdownRef) {
-  if (!anchorRef.current || !dropdownRef.current) {
+function getDopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
   }
-  dropdownRef.current.style.transform = "none";
-  dropdownRef.current.style.transitionDuration = "0s";
+  popoverRef.current.style.transform = "none";
+  popoverRef.current.style.transitionDuration = "0s";
   const anchorRect = anchorRef.current.getBoundingClientRect();
-  const dropdownRect = dropdownRef.current.getBoundingClientRect();
-  const dropdownStyles = getComputedStyle(dropdownRef.current);
-  const marginTop = Number.parseFloat(dropdownStyles.getPropertyValue("margin-top"));
-  const marginRight = Number.parseFloat(dropdownStyles.getPropertyValue("margin-right"));
-  const marginBottom = Number.parseFloat(dropdownStyles.getPropertyValue("margin-bottom"));
-  const marginLeft = Number.parseFloat(dropdownStyles.getPropertyValue("margin-left"));
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  const popoverStyles = getComputedStyle(popoverRef.current);
+  const marginTop = Number.parseFloat(popoverStyles.getPropertyValue("margin-top"));
+  const marginRight = Number.parseFloat(popoverStyles.getPropertyValue("margin-right"));
+  const marginBottom = Number.parseFloat(popoverStyles.getPropertyValue("margin-bottom"));
+  const marginLeft = Number.parseFloat(popoverStyles.getPropertyValue("margin-left"));
   const marginY = marginTop + marginBottom;
   const marginX = marginRight + marginLeft;
   const docHeight = document.documentElement.clientHeight;
@@ -175,30 +175,30 @@ function getDropdownPosition(align, anchorRef, dropdownRef) {
   const docScrollLeft = document.documentElement.scrollLeft;
   const anchorLeft = anchorRect.left + docScrollLeft;
   const anchorTop = anchorRect.top + docScrollTop;
-  const topPosition = anchorRect.top - (dropdownRect.height + marginTop);
-  const rightPosition = anchorRect.left + anchorRect.width + dropdownRect.width;
-  const bottomPosition = anchorRect.top + anchorRect.height + dropdownRect.height;
-  const leftPosition = anchorRect.left - dropdownRect.width;
-  const offsetX = anchorLeft - (dropdownRect.width - anchorRect.width) / 2;
-  const offsetY = anchorTop - (dropdownRect.height - anchorRect.height) / 2;
-  dropdownRef.current.style.transform = "";
-  dropdownRef.current.style.transitionDuration = "";
+  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
+  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
+  const leftPosition = anchorRect.left - popoverRect.width;
+  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
+  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
+  popoverRef.current.style.transform = "";
+  popoverRef.current.style.transitionDuration = "";
   switch (align) {
     case "top": {
-      return topPosition > 0 ? [offsetX, anchorTop - dropdownRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
     }
     case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - dropdownRect.height - marginY];
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
     }
     case "left": {
-      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - dropdownRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
     }
     case "right": {
-      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - dropdownRect.width - marginX, offsetY];
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
     }
   }
 }
-const Dropdown = ({
+const Popover = ({
   align = "bottom",
   anchorElement,
   children,
@@ -207,23 +207,18 @@ const Dropdown = ({
   open,
   repositionOnScroll,
   style: style2,
-  variant,
   ...restProps
 }) => {
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
   const [position, setPosition] = useState({ x: 0, y: 0 });
-  const dropdownRef = useRef(null);
-  const containerClassName = useComponentStyles(
-    "dropdown",
-    { base: true, variants: { variant } },
-    false
-  );
+  const popoverRef = useRef(null);
+  const containerClassName = useComponentStyles("popover", { base: true }, false);
   useLayoutEffect(() => {
     if (!visible) {
       return;
     }
-    const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+    const position2 = getDopoverPosition(align, anchorElement, popoverRef);
     setPosition({ x: position2[0], y: position2[1] });
   }, [align, anchorElement, visible]);
   useEffect(() => {
@@ -231,7 +226,7 @@ const Dropdown = ({
       return;
     }
     function handleResize() {
-      const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+      const position2 = getDopoverPosition(align, anchorElement, popoverRef);
       setPosition({ x: position2[0], y: position2[1] });
     }
     window.addEventListener("resize", handleResize);
@@ -244,13 +239,13 @@ const Dropdown = ({
   useIsomorphicLayoutEffect(() => {
     var _a;
     if (!open) {
-      (_a = dropdownRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
       return;
     }
     let timer = requestAnimationFrame(() => {
       timer = requestAnimationFrame(() => {
         var _a2;
-        (_a2 = dropdownRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
       });
     });
     return () => {
@@ -266,12 +261,12 @@ const Dropdown = ({
     if (open) {
       return;
     }
-    if (!hasAnimationDuration(dropdownRef.current)) {
+    if (!hasAnimationDuration(popoverRef.current)) {
       hide();
     }
   }, [hide, open]);
   useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(dropdownRef, onRequestClose, { enabled: visible });
+  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
   if (!visible) {
     return null;
   }
@@ -279,7 +274,7 @@ const Dropdown = ({
   return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(
     Box,
     {
-      ref: dropdownRef,
+      ref: popoverRef,
       "data-open": dataOpen,
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
@@ -287,10 +282,6 @@ const Dropdown = ({
       position: "absolute",
       style: {
         ...style2,
-        // TODO Think about how to handle this, perhaps we could add a custom class to the dropdown
-        // Or we remove it from getDropdownPosition?
-        // "horizontal" ? "vertical"
-        margin: align === "bottom" || align === "top" ? "var(--spacing) 0" : "0 var(--spacing)",
         left: position.x,
         top: position.y
       },
@@ -299,10 +290,19 @@ const Dropdown = ({
     }
   ) });
 };
-const Tooltip = ({ align = "top", children, label }) => {
+const Tooltip = ({
+  align = "top",
+  children,
+  label,
+  colorScheme
+}) => {
   const id = useId();
   const ref = useRef(null);
   const [open, setOpen] = useState(false);
+  const tooltipClassName = useComponentStyles("tooltip", {
+    base: true,
+    variants: { colorScheme }
+  });
   useEffect(() => {
     const element = ref.current;
     if (!element) {
@@ -338,7 +338,7 @@ const Tooltip = ({ align = "top", children, label }) => {
       ["aria-describedby"]: open ? id : void 0
     }),
     /* @__PURE__ */ jsx(
-      Dropdown,
+      Popover,
       {
         id,
         role: "tooltip",
@@ -348,6 +348,7 @@ const Tooltip = ({ align = "top", children, label }) => {
           setOpen(false);
         },
         align,
+        className: tooltipClassName,
         children: label
       }
     )