@blockle/blocks 0.19.1 → 0.20.0-alpha1

package/dist/components/overlay/Popover/popover-utils.mjs

@@ -0,0 +1,62 @@
+function getPopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
+    return [0, 0];
+  }
+  popoverRef.current.style.transform = "none";
+  popoverRef.current.style.transitionDuration = "0s";
+  const anchorRect = anchorRef.current.getBoundingClientRect();
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  let popoverStyles = getComputedStyle(popoverRef.current);
+  const top = popoverStyles.getPropertyValue("top");
+  const left = popoverStyles.getPropertyValue("left");
+  popoverRef.current.style.left = "0";
+  popoverRef.current.style.top = "0";
+  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;
+  const docWidth = document.documentElement.clientWidth;
+  const docScrollTop = document.documentElement.scrollTop;
+  const docScrollLeft = document.documentElement.scrollLeft;
+  const anchorLeft = anchorRect.left + docScrollLeft;
+  const anchorTop = anchorRect.top + docScrollTop;
+  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 = "";
+  popoverRef.current.style.top = top;
+  popoverRef.current.style.left = left;
+  switch (align) {
+    case "top": {
+      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 - popoverRect.height - marginY];
+    }
+    case "left": {
+      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 - popoverRect.width - marginX, offsetY];
+    }
+  }
+}
+export {
+  getPopoverPosition
+};

package/dist/components/overlay/Tooltip/Tooltip.cjs

@@ -0,0 +1,71 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const lib_react_refs_cjs = require("../../../lib/react/refs.cjs");
+const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
+const components_overlay_Popover_Popover_cjs = require("../Popover/Popover.cjs");
+const Tooltip = ({
+  align = "top",
+  children,
+  label,
+  colorScheme
+}) => {
+  const id = react.useId();
+  const ref = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const tooltipClassName = lib_theme_store_theme_cjs.getComponentStyles("tooltip", {
+    base: true,
+    variants: { colorScheme }
+  });
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    function onEnter() {
+      setOpen(true);
+    }
+    function onLeave() {
+      setOpen(false);
+    }
+    element.addEventListener("mouseenter", onEnter);
+    element.addEventListener("mouseleave", onLeave);
+    element.addEventListener("focusin", onEnter);
+    element.addEventListener("focusout", onLeave);
+    return () => {
+      element.removeEventListener("mouseenter", onEnter);
+      element.removeEventListener("mouseleave", onLeave);
+      element.removeEventListener("focusin", onEnter);
+      element.removeEventListener("focusout", onLeave);
+    };
+  }, []);
+  if (react.Children.count(children) !== 1) {
+    throw new Error("Tooltip component can only have one child");
+  }
+  const child = react.Children.toArray(children)[0];
+  if (!react.isValidElement(child)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    react.cloneElement(child, {
+      ref: lib_react_refs_cjs.composeRefs(ref, child.ref),
+      ["aria-describedby"]: open ? id : void 0
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_overlay_Popover_Popover_cjs.Popover,
+      {
+        id,
+        role: "tooltip",
+        anchorElement: ref,
+        open,
+        onRequestClose: () => {
+          setOpen(false);
+        },
+        align,
+        className: tooltipClassName,
+        children: label
+      }
+    )
+  ] });
+};
+exports.Tooltip = Tooltip;

package/dist/components/overlay/Tooltip/Tooltip.mjs

@@ -0,0 +1,74 @@
+'use client';
+
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useId, useRef, useState, useEffect, Children, isValidElement, cloneElement } from "react";
+import { composeRefs } from "../../../lib/react/refs.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
+import { Popover } from "../Popover/Popover.mjs";
+const Tooltip = ({
+  align = "top",
+  children,
+  label,
+  colorScheme
+}) => {
+  const id = useId();
+  const ref = useRef(null);
+  const [open, setOpen] = useState(false);
+  const tooltipClassName = getComponentStyles("tooltip", {
+    base: true,
+    variants: { colorScheme }
+  });
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    function onEnter() {
+      setOpen(true);
+    }
+    function onLeave() {
+      setOpen(false);
+    }
+    element.addEventListener("mouseenter", onEnter);
+    element.addEventListener("mouseleave", onLeave);
+    element.addEventListener("focusin", onEnter);
+    element.addEventListener("focusout", onLeave);
+    return () => {
+      element.removeEventListener("mouseenter", onEnter);
+      element.removeEventListener("mouseleave", onLeave);
+      element.removeEventListener("focusin", onEnter);
+      element.removeEventListener("focusout", onLeave);
+    };
+  }, []);
+  if (Children.count(children) !== 1) {
+    throw new Error("Tooltip component can only have one child");
+  }
+  const child = Children.toArray(children)[0];
+  if (!isValidElement(child)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloneElement(child, {
+      ref: composeRefs(ref, child.ref),
+      ["aria-describedby"]: open ? id : void 0
+    }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id,
+        role: "tooltip",
+        anchorElement: ref,
+        open,
+        onRequestClose: () => {
+          setOpen(false);
+        },
+        align,
+        className: tooltipClassName,
+        children: label
+      }
+    )
+  ] });
+};
+export {
+  Tooltip
+};

package/dist/components/overlay/Tooltip/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/components/overlay/Tooltip/index.mjs

@@ -0,0 +1 @@
+

package/dist/components/typography/Heading/Heading.cjs

@@ -0,0 +1,23 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
+const components_typography_Heading_heading_css_cjs = require("./heading.css.cjs");
+const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
+const Heading = ({
+  className,
+  level = 1,
+  children,
+  ...restProps
+}) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_layout_Box_Box_cjs.Box,
+    {
+      asChild: true,
+      className: lib_utils_classnames_cjs.classnames(components_typography_Heading_heading_css_cjs.heading, className),
+      ...restProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
+    }
+  );
+};
+exports.Heading = Heading;

package/dist/components/typography/Heading/Heading.mjs

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "../../../lib/utils/classnames.mjs";
+import { heading } from "./heading.css.mjs";
+import { Box } from "../../layout/Box/Box.mjs";
+const Heading = ({
+  className,
+  level = 1,
+  children,
+  ...restProps
+}) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      className: classnames(heading, className),
+      ...restProps,
+      children: /* @__PURE__ */ jsx(Tag, { children })
+    }
+  );
+};
+export {
+  Heading
+};

package/dist/{styles/components → components}/typography/Heading/heading.css.cjs

@@ -1,11 +1,11 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks");
 const heading = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       margin: 0,
       padding: 0
     }

package/dist/components/typography/Heading/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/components/typography/Heading/index.mjs

@@ -0,0 +1 @@
+

package/dist/components/typography/Text/Text.cjs

@@ -0,0 +1,20 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
+const components_typography_Text_text_css_cjs = require("./text.css.cjs");
+const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
+const Text = ({
+  asChild,
+  children,
+  className,
+  ref,
+  tag,
+  ...restProps
+}) => {
+  const Component = tag ?? "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(components_layout_Box_Box_cjs.Box, { asChild: true, className: lib_utils_classnames_cjs.classnames(components_typography_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, children })
+  ) });
+};
+exports.Text = Text;

package/dist/{styles/components → components}/typography/Text/Text.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
+import { classnames } from "../../../lib/utils/classnames.mjs";
 import { text } from "./text.css.mjs";
-import { Box } from "../../display/Divider/Divider.mjs";
+import { Box } from "../../layout/Box/Box.mjs";
 const Text = ({
   asChild,
   children,

package/dist/components/typography/Text/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/components/typography/Text/index.mjs

@@ -0,0 +1 @@
+

package/dist/{styles/components → components}/typography/Text/text.css.cjs

@@ -1,11 +1,11 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks");
 const text = css.style({
   "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [lib_css_layers_layers_css_cjs.blocksLayer]: {
       margin: 0,
       padding: 0
     }

package/dist/hooks/useClickOutside/useClickOutside.cjs

@@ -0,0 +1,22 @@
+"use strict";
+const react = require("react");
+const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
+  react.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const listener = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
+      }
+    };
+    const rafId = requestAnimationFrame(() => {
+      document.addEventListener("click", listener);
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      document.removeEventListener("click", listener);
+    };
+  }, [ref, onClickOutside, enabled]);
+};
+exports.useClickOutside = useClickOutside;

package/dist/hooks/useClickOutside/useClickOutside.mjs

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const listener = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
+      }
+    };
+    const rafId = requestAnimationFrame(() => {
+      document.addEventListener("click", listener);
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      document.removeEventListener("click", listener);
+    };
+  }, [ref, onClickOutside, enabled]);
+};
+export {
+  useClickOutside
+};

package/dist/hooks/useControlledValue/useControlledValue.cjs

@@ -0,0 +1,31 @@
+"use strict";
+const react = require("react");
+function useControlledValue({
+  defaultValue,
+  value,
+  onChange,
+  transformValue
+}) {
+  const [internValue, setInternValue] = react.useState(defaultValue);
+  const currentValue = (onChange ? value : internValue) ?? defaultValue;
+  const setValue = react.useCallback(
+    function setValue2(value2) {
+      const nextValue = transformValue ? transformValue(value2) : value2;
+      if (onChange) {
+        onChange(nextValue);
+      } else {
+        setInternValue(nextValue);
+      }
+    },
+    [onChange, transformValue]
+  );
+  if (process.env.NODE_ENV !== "production") {
+    react.useEffect(() => {
+      if (onChange && value === void 0) {
+        console.error("Slider is in controlled mode but no value is provided");
+      }
+    }, []);
+  }
+  return [currentValue, setValue];
+}
+exports.useControlledValue = useControlledValue;

package/dist/hooks/useControlledValue/useControlledValue.mjs

@@ -0,0 +1,32 @@
+import { useState, useCallback, useEffect } from "react";
+function useControlledValue({
+  defaultValue,
+  value,
+  onChange,
+  transformValue
+}) {
+  const [internValue, setInternValue] = useState(defaultValue);
+  const currentValue = (onChange ? value : internValue) ?? defaultValue;
+  const setValue = useCallback(
+    function setValue2(value2) {
+      const nextValue = transformValue ? transformValue(value2) : value2;
+      if (onChange) {
+        onChange(nextValue);
+      } else {
+        setInternValue(nextValue);
+      }
+    },
+    [onChange, transformValue]
+  );
+  if (process.env.NODE_ENV !== "production") {
+    useEffect(() => {
+      if (onChange && value === void 0) {
+        console.error("Slider is in controlled mode but no value is provided");
+      }
+    }, []);
+  }
+  return [currentValue, setValue];
+}
+export {
+  useControlledValue
+};

package/dist/hooks/useIsomorphicLayoutEffect/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/hooks/useIsomorphicLayoutEffect/index.mjs

@@ -0,0 +1 @@
+

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs

@@ -0,0 +1,4 @@
+"use strict";
+const react = require("react");
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs

@@ -0,0 +1,7 @@
+'use client';
+
+import { useEffect, useLayoutEffect } from "react";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export {
+  useIsomorphicLayoutEffect
+};

package/dist/hooks/useKeyboard/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/hooks/useKeyboard/index.mjs

@@ -0,0 +1 @@
+

package/dist/hooks/useKeyboard/useKeyboard.cjs

@@ -0,0 +1,19 @@
+"use strict";
+const react = require("react");
+const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
+  react.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === key) {
+        callback(event);
+      }
+    }
+    document.addEventListener(type, handleKeyDown);
+    return () => {
+      document.removeEventListener(type, handleKeyDown);
+    };
+  }, [callback, enabled, key, type]);
+};
+exports.useKeyboard = useKeyboard;

package/dist/hooks/useKeyboard/useKeyboard.mjs

@@ -0,0 +1,22 @@
+'use client';
+
+import { useEffect } from "react";
+const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === key) {
+        callback(event);
+      }
+    }
+    document.addEventListener(type, handleKeyDown);
+    return () => {
+      document.removeEventListener(type, handleKeyDown);
+    };
+  }, [callback, enabled, key, type]);
+};
+export {
+  useKeyboard
+};

package/dist/hooks/useLayer/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/hooks/useLayer/index.mjs

@@ -0,0 +1 @@
+

package/dist/hooks/useLayer/useLayer.cjs

@@ -0,0 +1,25 @@
+"use strict";
+const react = require("react");
+const useLayer = () => {
+  const layerRef = react.useRef(null);
+  react.useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+        layerRef.current = null;
+      }
+    },
+    []
+  );
+  function getLayer() {
+    if (!layerRef.current) {
+      const div = document.createElement("div");
+      div.dataset.layer = "blocks";
+      layerRef.current = div;
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  }
+  return getLayer;
+};
+exports.useLayer = useLayer;

package/dist/hooks/useLayer/useLayer.mjs

@@ -0,0 +1,26 @@
+import { useRef, useEffect } from "react";
+const useLayer = () => {
+  const layerRef = useRef(null);
+  useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+        layerRef.current = null;
+      }
+    },
+    []
+  );
+  function getLayer() {
+    if (!layerRef.current) {
+      const div = document.createElement("div");
+      div.dataset.layer = "blocks";
+      layerRef.current = div;
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  }
+  return getLayer;
+};
+export {
+  useLayer
+};

package/dist/hooks/usePreventBodyScroll/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/hooks/usePreventBodyScroll/index.mjs

@@ -0,0 +1 @@
+

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.cjs

@@ -0,0 +1,29 @@
+"use strict";
+const hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs = require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
+const usePreventBodyScroll = (enabled = true) => {
+  hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const prevOverflow = document.body.style.getPropertyValue("overflow");
+    const prevScrollTop = document.documentElement.scrollTop;
+    if (document.body.scrollHeight > window.innerHeight) {
+      document.body.style.position = "fixed";
+      document.body.style.overflow = "hidden";
+      document.body.style.overflowY = "scroll";
+      document.body.style.width = "100%";
+      document.body.style.top = `-${prevScrollTop}px`;
+    } else {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.position = "";
+      document.body.style.overflow = prevOverflow;
+      document.body.style.overflowY = "";
+      document.body.style.width = "";
+      document.body.style.top = "";
+      document.documentElement.scrollTop = prevScrollTop;
+    };
+  }, [enabled]);
+};
+exports.usePreventBodyScroll = usePreventBodyScroll;

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.mjs

@@ -0,0 +1,30 @@
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const prevOverflow = document.body.style.getPropertyValue("overflow");
+    const prevScrollTop = document.documentElement.scrollTop;
+    if (document.body.scrollHeight > window.innerHeight) {
+      document.body.style.position = "fixed";
+      document.body.style.overflow = "hidden";
+      document.body.style.overflowY = "scroll";
+      document.body.style.width = "100%";
+      document.body.style.top = `-${prevScrollTop}px`;
+    } else {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.position = "";
+      document.body.style.overflow = prevOverflow;
+      document.body.style.overflowY = "";
+      document.body.style.width = "";
+      document.body.style.top = "";
+      document.documentElement.scrollTop = prevScrollTop;
+    };
+  }, [enabled]);
+};
+export {
+  usePreventBodyScroll
+};

package/dist/hooks/useRestoreFocus/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/hooks/useRestoreFocus/index.mjs

@@ -0,0 +1 @@
+