@blockle/blocks 0.19.1 → 0.20.0-alpha1

package/dist/index.mjs

@@ -1,416 +1,38 @@
-'use client';
-
-import { minMediaQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
-import { style } from "./styles/lib/css/style/style.mjs";
-import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
-import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
-import { vars } from "./styles/lib/theme/vars.css.mjs";
-import { useComponentStyles, Box, createAsChildTemplate, useTheme, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
-import { Divider, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
-import { classnames } from "./styles/components/Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { VisuallyHidden } from "./styles/components/Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Button, Spinner } from "./styles/components/form/Button/Button.mjs";
-import { Checkbox, Label } from "./styles/components/form/Checkbox/Checkbox.mjs";
-import { Input } from "./styles/components/form/Input/Input.mjs";
-import { Radio } from "./styles/components/form/Radio/Radio.mjs";
-import { Select } from "./styles/components/form/Select/Select.mjs";
-import { Slider } from "./styles/components/form/Slider/Slider.mjs";
-import { Switch } from "./styles/components/form/Switch/Switch.mjs";
-import { BlocksProvider } from "./styles/components/other/BlocksProvider/BlocksProvider.mjs";
-import { createPortal } from "react-dom";
-import { useIsomorphicLayoutEffect, hasAnimationDuration, useKeyboard, useClickOutside } from "./styles/components/overlay/Dialog/Dialog.mjs";
-import { Dialog, usePreventBodyScroll } from "./styles/components/overlay/Dialog/Dialog.mjs";
-import { useRef, useEffect, useState, useCallback, useLayoutEffect, useId, Children, isValidElement, cloneElement, useContext } from "react";
-import { Heading } from "./styles/components/typography/Heading/Heading.mjs";
-import { Text } from "./styles/components/typography/Text/Text.mjs";
-const Progress = ({
-  className,
-  indeterminate,
-  max = 100,
-  ref,
-  value = 0,
-  ...restProps
-}) => {
-  const progress = value / max * 100;
-  const containerClassName = useComponentStyles(
-    "progress",
-    {
-      base: true
-    },
-    false
-  );
-  const barClassName = useComponentStyles(
-    "progress",
-    { bar: true, variants: { indeterminate } },
-    false
-  );
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      className: classnames(containerClassName, className),
-      overflow: "hidden",
-      role: "progressbar",
-      "aria-valuenow": value,
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
-      ...restProps,
-      children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: barClassName,
-          backgroundColor: "currentColor",
-          inlineSize: "full",
-          blockSize: "full",
-          style: { transform: indeterminate ? void 0 : `translateX(-${100 - progress}%)` }
-        }
-      )
-    }
-  );
-};
-const justifyContentMap = {
-  left: "flex-start",
-  right: "flex-end",
-  center: "center",
-  between: "space-between",
-  around: "space-around"
-};
-const alignItemsMap = {
-  left: "flex-start",
-  right: "flex-end",
-  center: "center",
-  stretch: "stretch"
-};
-const Inline = ({
-  alignX,
-  alignY,
-  tag: Tag = "div",
-  children,
-  display = "flex",
-  spacing,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      asChild: true,
-      display,
-      gap: spacing,
-      flexDirection: "row",
-      justifyContent: alignX ? justifyContentMap[alignX] : void 0,
-      alignItems: alignY ? alignItemsMap[alignY] : void 0,
-      flexWrap: "wrap",
-      ...props,
-      children: /* @__PURE__ */ jsx(Tag, { children })
-    }
-  );
-};
-const Stack = ({
-  tag: Tag = "div",
-  display = "flex",
-  children,
-  spacing,
-  alignX,
-  ...restProps
-}) => {
-  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && Tag !== "ol") {
-    console.warn('Stack: "start" prop is only valid with tag="ol"');
-  }
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      asChild: true,
-      display,
-      gap: spacing,
-      flexDirection: "column",
-      alignItems: alignX ? alignItemsMap[alignX] : void 0,
-      ...restProps,
-      children: /* @__PURE__ */ jsx(Tag, { children })
-    }
-  );
-};
-const { Template, Slot } = createAsChildTemplate("a");
-const Link = ({
-  asChild,
-  children,
-  className,
-  ref,
-  underline,
-  variant,
-  ...restProps
-}) => {
-  const linkClassName = useComponentStyles("link", {
-    base: true,
-    variants: { variant, underline }
-  });
-  return /* @__PURE__ */ jsx(
-    Template,
-    {
-      asChild,
-      ref,
-      className: classnames(className, linkClassName),
-      ...restProps,
-      children: /* @__PURE__ */ jsx(Slot, { children })
-    }
-  );
-};
-const Portal = ({ children, container }) => {
-  const context = useTheme();
-  return createPortal(
-    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
-    container || document.body
-  );
-};
-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;
-};
-const useVisibilityState = (open) => {
-  const [visible, setVisible] = useState(open);
-  const hide = useCallback(() => {
-    setVisible(false);
-  }, []);
-  useEffect(() => {
-    if (open) {
-      setVisible(true);
-    }
-  }, [open]);
-  return [visible, hide];
-};
-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];
-    }
-  }
-}
-const Popover = ({
-  align = "bottom",
-  anchorElement,
-  children,
-  className,
-  onRequestClose,
-  open,
-  repositionOnScroll,
-  style: style2,
-  ...restProps
-}) => {
-  const layer = useLayer();
-  const [visible, hide] = useVisibilityState(open);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const popoverRef = useRef(null);
-  const containerClassName = useComponentStyles("popover", { base: true }, false);
-  useLayoutEffect(() => {
-    if (!visible) {
-      return;
-    }
-    const position2 = getPopoverPosition(align, anchorElement, popoverRef);
-    setPosition({ x: position2[0], y: position2[1] });
-  }, [align, anchorElement, visible]);
-  useEffect(() => {
-    if (!open || !repositionOnScroll) {
-      return;
-    }
-    function handleResize() {
-      const position2 = getPopoverPosition(align, anchorElement, popoverRef);
-      setPosition({ x: position2[0], y: position2[1] });
-    }
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleResize);
-    };
-  }, [align, anchorElement, open, repositionOnScroll]);
-  useIsomorphicLayoutEffect(() => {
-    var _a;
-    if (!open) {
-      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
-      return;
-    }
-    let timer = requestAnimationFrame(() => {
-      timer = requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
-      });
-    });
-    return () => {
-      cancelAnimationFrame(timer);
-    };
-  }, [open, visible]);
-  const onAnimationEnd = useCallback(() => {
-    if (!open) {
-      hide();
-    }
-  }, [hide, open]);
-  useEffect(() => {
-    if (open) {
-      return;
-    }
-    if (!hasAnimationDuration(popoverRef.current)) {
-      hide();
-    }
-  }, [hide, open]);
-  useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
-  if (!visible) {
-    return null;
-  }
-  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref: popoverRef,
-      "data-open": dataOpen,
-      onAnimationEnd,
-      onTransitionEnd: onAnimationEnd,
-      className: classnames(containerClassName, className),
-      position: "absolute",
-      style: {
-        ...style2,
-        left: position.x,
-        top: position.y
-      },
-      ...restProps,
-      children
-    }
-  ) });
-};
-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) {
-      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);
-    };
-  }, [ref, setOpen]);
-  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
-      }
-    )
-  ] });
-};
-const useRootAriaHidden = (hidden) => {
-  const context = useContext(BlocksProviderContext);
-  if (!context) {
-    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
-  }
-  context.setAriaHidden(hidden);
-};
+import { minMediaQuery } from "./lib/css/atoms/breakpoints.mjs";
+import { style } from "./lib/css/style/style.mjs";
+import { makeComponentTheme } from "./lib/theme/makeComponentTheme.mjs";
+import { makeTheme } from "./lib/theme/makeTheme.mjs";
+import { vars } from "./lib/theme/vars.css.mjs";
+import { createAsChildTemplate } from "./lib/asChildRenderer/createAsChildTemplate.mjs";
+import { getTheme, setTheme } from "./lib/theme/store/theme.mjs";
+import { classnames } from "./lib/utils/classnames.mjs";
+import { atoms } from "./lib/css/atoms/sprinkles.css.mjs";
+import { VisuallyHidden } from "./components/accessibility/VisuallyHidden/VisuallyHidden.mjs";
+import { Divider } from "./components/display/Divider/Divider.mjs";
+import { Progress } from "./components/feedback/Progress/Progress.mjs";
+import { Spinner } from "./components/feedback/Spinner/Spinner.mjs";
+import { Button } from "./components/form/Button/Button.mjs";
+import { Checkbox } from "./components/form/Checkbox/Checkbox.mjs";
+import { Input } from "./components/form/Input/Input.mjs";
+import { Label } from "./components/form/Label/Label.mjs";
+import { Radio } from "./components/form/Radio/Radio.mjs";
+import { Select } from "./components/form/Select/Select.mjs";
+import { Slider } from "./components/form/Slider/Slider.mjs";
+import { Switch } from "./components/form/Switch/Switch.mjs";
+import { Box } from "./components/layout/Box/Box.mjs";
+import { Inline } from "./components/layout/Inline/Inline.mjs";
+import { Stack } from "./components/layout/Stack/Stack.mjs";
+import { Link } from "./components/navigation/Link/Link.mjs";
+import { BlocksProvider } from "./components/other/BlocksProvider/BlocksProvider.mjs";
+import { Portal } from "./components/other/Portal/Portal.mjs";
+import { Dialog } from "./components/overlay/Dialog/Dialog.mjs";
+import { Tooltip } from "./components/overlay/Tooltip/Tooltip.mjs";
+import { Heading } from "./components/typography/Heading/Heading.mjs";
+import { Text } from "./components/typography/Text/Text.mjs";
+import { useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import { useKeyboard } from "./hooks/useKeyboard/useKeyboard.mjs";
+import { usePreventBodyScroll } from "./hooks/usePreventBodyScroll/usePreventBodyScroll.mjs";
+import { useRootAriaHidden } from "./hooks/useRootAriaHidden/useRootAriaHidden.mjs";
 export {
   BlocksProvider,
   Box,
@@ -437,12 +59,12 @@ export {
   atoms,
   classnames,
   createAsChildTemplate,
+  getTheme,
   makeComponentTheme,
   makeTheme,
   minMediaQuery,
+  setTheme,
   style,
-  useComponentStyleDefaultProps,
-  useComponentStyles,
   useIsomorphicLayoutEffect,
   useKeyboard,
   usePreventBodyScroll,

package/dist/lib/asChildRenderer/createAsChildTemplate.cjs

@@ -0,0 +1,72 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const lib_react_mergeProps_cjs = require("../react/mergeProps.cjs");
+function createAsChildTemplate(defaultElement) {
+  const Tag = defaultElement;
+  const Template = ({
+    asChild,
+    children,
+    ref,
+    ...rootProps
+  }) => {
+    if (!asChild) {
+      const tagProps = { ref, ...rootProps };
+      return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ...tagProps, children });
+    }
+    const childrenArray = react.Children.toArray(children);
+    const slotIndex = childrenArray.findIndex((child) => {
+      if (!react.isValidElement(child)) {
+        return false;
+      }
+      return child.type === Slot;
+    });
+    const slot = childrenArray[slotIndex];
+    if (!slot) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("Template: No Slot provided");
+      }
+      return null;
+    }
+    if (!isValidElementWithChildren(slot)) {
+      return null;
+    }
+    if (!react.isValidElement(slot.props.children)) {
+      if (process.env.NODE_ENV !== "production") {
+        if (react.Children.toArray(slot.props.children).length === 0) {
+          console.error("When using asChild, at least one child is required");
+        } else {
+          console.error("When using asChild, only one child is allowed");
+        }
+      }
+      return null;
+    }
+    if (!isValidElementWithChildren(slot.props.children)) {
+      return null;
+    }
+    const nextChildren = [...childrenArray];
+    if (nextChildren.length === 1 && !slot.props.children.props.children) {
+      return react.cloneElement(
+        slot.props.children,
+        lib_react_mergeProps_cjs.mergeProps(rootProps, slot.props.children.props)
+      );
+    }
+    nextChildren[slotIndex] = slot.props.children.props.children;
+    return react.cloneElement(
+      slot.props.children,
+      lib_react_mergeProps_cjs.mergeProps(rootProps, slot.props.children.props),
+      nextChildren
+    );
+  };
+  return {
+    Template,
+    Slot
+  };
+}
+function isValidElementWithChildren(child) {
+  return react.isValidElement(child) && !!child.props;
+}
+const Slot = ({ children }) => {
+  return children;
+};
+exports.createAsChildTemplate = createAsChildTemplate;

package/dist/lib/asChildRenderer/createAsChildTemplate.mjs

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { Children, isValidElement, cloneElement } from "react";
+import { mergeProps } from "../react/mergeProps.mjs";
+function createAsChildTemplate(defaultElement) {
+  const Tag = defaultElement;
+  const Template = ({
+    asChild,
+    children,
+    ref,
+    ...rootProps
+  }) => {
+    if (!asChild) {
+      const tagProps = { ref, ...rootProps };
+      return /* @__PURE__ */ jsx(Tag, { ...tagProps, children });
+    }
+    const childrenArray = Children.toArray(children);
+    const slotIndex = childrenArray.findIndex((child) => {
+      if (!isValidElement(child)) {
+        return false;
+      }
+      return child.type === Slot;
+    });
+    const slot = childrenArray[slotIndex];
+    if (!slot) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("Template: No Slot provided");
+      }
+      return null;
+    }
+    if (!isValidElementWithChildren(slot)) {
+      return null;
+    }
+    if (!isValidElement(slot.props.children)) {
+      if (process.env.NODE_ENV !== "production") {
+        if (Children.toArray(slot.props.children).length === 0) {
+          console.error("When using asChild, at least one child is required");
+        } else {
+          console.error("When using asChild, only one child is allowed");
+        }
+      }
+      return null;
+    }
+    if (!isValidElementWithChildren(slot.props.children)) {
+      return null;
+    }
+    const nextChildren = [...childrenArray];
+    if (nextChildren.length === 1 && !slot.props.children.props.children) {
+      return cloneElement(
+        slot.props.children,
+        mergeProps(rootProps, slot.props.children.props)
+      );
+    }
+    nextChildren[slotIndex] = slot.props.children.props.children;
+    return cloneElement(
+      slot.props.children,
+      mergeProps(rootProps, slot.props.children.props),
+      nextChildren
+    );
+  };
+  return {
+    Template,
+    Slot
+  };
+}
+function isValidElementWithChildren(child) {
+  return isValidElement(child) && !!child.props;
+}
+const Slot = ({ children }) => {
+  return children;
+};
+export {
+  createAsChildTemplate
+};