@blockle/blocks 0.12.2 → 0.14.0

package/dist/styles/components/display/Divider/Divider.cjs

@@ -88,20 +88,6 @@ const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
 };
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      setRef(ref, node);
-    }
-  };
-}
 function mergeProps(slotProps, childProps) {
   const overrideProps = {};
   for (const propName in childProps) {
@@ -122,82 +108,81 @@ function mergeProps(slotProps, childProps) {
     } else if (propName === "style") {
       overrideProps[propName] = { ...slotPropValue, ...childPropValue };
     } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+      overrideProps[propName] = classnames(slotPropValue, childPropValue);
     } else {
       overrideProps[propName] = childPropValue;
     }
   }
   return { ...slotProps, ...overrideProps };
 }
-function createSlottable(defaultElement) {
-  function Slottable2(props, ref) {
-    const { asChild, children, ...slotProps } = props;
-    const Component = defaultElement;
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
+function createAsChildTemplate(defaultElement) {
+  const Tag = defaultElement;
+  const Template2 = react.forwardRef(function Template22({ asChild, children, ...rootProps }, ref) {
     if (!asChild) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...slotProps, children });
+      const tagProps = { ref, ...rootProps };
+      return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ...tagProps, children });
     }
     const childrenArray = react.Children.toArray(children);
-    const slot = childrenArray.find((child) => {
+    const slotIndex = childrenArray.findIndex((child) => {
       if (!react.isValidElement(child)) {
         return false;
       }
-      return child.type === Slot;
+      return child.type === Slot$1;
     });
+    const slot = childrenArray[slotIndex];
     if (!slot) {
-      const Slot2 = childrenArray[0];
-      if (!react.isValidElement(childrenArray[0])) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn("Slottable: First child is not a valid React element");
-        }
-        return null;
+      if (process.env.NODE_ENV === "development") {
+        console.error("Template: No Slot provided");
       }
-      if (!react.isValidElement(Slot2)) {
-        return null;
-      }
-      return react.cloneElement(
-        Slot2,
-        {
-          ...mergeProps(slotProps, Slot2.props),
-          ref: composeRefs(ref, Slot2.ref)
-        },
-        Slot2.props.children
-      );
+      return null;
     }
     if (!react.isValidElement(slot) || !react.isValidElement(slot.props.children)) {
       return null;
     }
-    const newChildren = childrenArray.map((child) => {
-      if (!react.isValidElement(child)) {
-        return child;
-      }
-      if (child.type === Slot) {
-        return slot.props.children.props.children;
-      }
-      return child;
-    });
+    const nextChildren = [...childrenArray];
+    nextChildren[slotIndex] = slot.props.children.props.children;
     return react.cloneElement(
       slot.props.children,
       {
-        ...mergeProps(slotProps, slot.props),
+        ...mergeProps(rootProps, slot.props.children.props),
         ref: composeRefs(ref, slot.props.children.ref)
       },
-      newChildren
+      nextChildren
     );
-  }
-  return react.forwardRef(Slottable2);
+  });
+  return {
+    Template: Template2,
+    Slot: Slot$1
+  };
 }
-const Slot = ({ children }) => children;
-const Slottable = createSlottable("div");
+const Slot$1 = ({ children }) => {
+  return children;
+};
+const { Template, Slot } = createAsChildTemplate("div");
 const Box = react.forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
   const [atomsProps, otherProps] = styles_lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Slottable,
+    Template,
     {
       ref,
       asChild,
       className: classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps)),
       ...otherProps,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
     }
   );
 });
@@ -218,10 +203,9 @@ const Divider = ({ className, color, ...restProps }) => {
 exports.BlocksProviderContext = BlocksProviderContext;
 exports.Box = Box;
 exports.Divider = Divider;
-exports.Slot = Slot;
 exports.classnames = classnames;
 exports.composeRefs = composeRefs;
-exports.createSlottable = createSlottable;
+exports.createAsChildTemplate = createAsChildTemplate;
 exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
 exports.useComponentStyles = useComponentStyles;
 exports.useTheme = useTheme;

package/dist/styles/components/display/Divider/Divider.mjs

@@ -87,20 +87,6 @@ const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
 };
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      setRef(ref, node);
-    }
-  };
-}
 function mergeProps(slotProps, childProps) {
   const overrideProps = {};
   for (const propName in childProps) {
@@ -121,82 +107,81 @@ function mergeProps(slotProps, childProps) {
     } else if (propName === "style") {
       overrideProps[propName] = { ...slotPropValue, ...childPropValue };
     } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+      overrideProps[propName] = classnames(slotPropValue, childPropValue);
     } else {
       overrideProps[propName] = childPropValue;
     }
   }
   return { ...slotProps, ...overrideProps };
 }
-function createSlottable(defaultElement) {
-  function Slottable2(props, ref) {
-    const { asChild, children, ...slotProps } = props;
-    const Component = defaultElement;
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
+function createAsChildTemplate(defaultElement) {
+  const Tag = defaultElement;
+  const Template2 = forwardRef(function Template22({ asChild, children, ...rootProps }, ref) {
     if (!asChild) {
-      return /* @__PURE__ */ jsx(Component, { ref, ...slotProps, children });
+      const tagProps = { ref, ...rootProps };
+      return /* @__PURE__ */ jsx(Tag, { ...tagProps, children });
     }
     const childrenArray = Children.toArray(children);
-    const slot = childrenArray.find((child) => {
+    const slotIndex = childrenArray.findIndex((child) => {
       if (!isValidElement(child)) {
         return false;
       }
-      return child.type === Slot;
+      return child.type === Slot$1;
     });
+    const slot = childrenArray[slotIndex];
     if (!slot) {
-      const Slot2 = childrenArray[0];
-      if (!isValidElement(childrenArray[0])) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn("Slottable: First child is not a valid React element");
-        }
-        return null;
+      if (process.env.NODE_ENV === "development") {
+        console.error("Template: No Slot provided");
       }
-      if (!isValidElement(Slot2)) {
-        return null;
-      }
-      return cloneElement(
-        Slot2,
-        {
-          ...mergeProps(slotProps, Slot2.props),
-          ref: composeRefs(ref, Slot2.ref)
-        },
-        Slot2.props.children
-      );
+      return null;
     }
     if (!isValidElement(slot) || !isValidElement(slot.props.children)) {
       return null;
     }
-    const newChildren = childrenArray.map((child) => {
-      if (!isValidElement(child)) {
-        return child;
-      }
-      if (child.type === Slot) {
-        return slot.props.children.props.children;
-      }
-      return child;
-    });
+    const nextChildren = [...childrenArray];
+    nextChildren[slotIndex] = slot.props.children.props.children;
     return cloneElement(
       slot.props.children,
       {
-        ...mergeProps(slotProps, slot.props),
+        ...mergeProps(rootProps, slot.props.children.props),
         ref: composeRefs(ref, slot.props.children.ref)
       },
-      newChildren
+      nextChildren
     );
-  }
-  return forwardRef(Slottable2);
+  });
+  return {
+    Template: Template2,
+    Slot: Slot$1
+  };
 }
-const Slot = ({ children }) => children;
-const Slottable = createSlottable("div");
+const Slot$1 = ({ children }) => {
+  return children;
+};
+const { Template, Slot } = createAsChildTemplate("div");
 const Box = forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
   const [atomsProps, otherProps] = getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsx(
-    Slottable,
+    Template,
     {
       ref,
       asChild,
       className: classnames(className, atoms(atomsProps)),
       ...otherProps,
-      children
+      children: /* @__PURE__ */ jsx(Slot, { children })
     }
   );
 });
@@ -218,10 +203,9 @@ export {
   BlocksProviderContext,
   Box,
   Divider,
-  Slot,
   classnames,
   composeRefs,
-  createSlottable,
+  createAsChildTemplate,
   useComponentStyleDefaultProps,
   useComponentStyles,
   useTheme

package/dist/styles/components/form/Button/Button.cjs

@@ -1,15 +1,15 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
 const styles_components_form_Button_Button_css_cjs = require("./Button.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 const Spinner = ({ className, size, color, ...restProps }) => {
   const spinnerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("spinner", { base: true, variants: { size, color } });
   return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { color, className: styles_components_display_Divider_Divider_cjs.classnames(spinnerClassName, className), ...restProps });
 };
-const Slottable = styles_components_display_Divider_Divider_cjs.createSlottable("button");
+const { Template, Slot } = styles_components_display_Divider_Divider_cjs.createAsChildTemplate("button");
 const Button = react.forwardRef(function Button2({
   children,
   className,
@@ -35,7 +35,7 @@ const Button = react.forwardRef(function Button2({
   });
   const [atomsProps, otherProps] = styles_lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Slottable,
+    Template,
     {
       ref,
       asChild,
@@ -45,7 +45,7 @@ const Button = react.forwardRef(function Button2({
       children: [
         startSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: startSlot }),
         loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size }),
-        /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Slot, { children }),
+        /* @__PURE__ */ jsxRuntime.jsx(Slot, { children }),
         endSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: endSlot })
       ]
     }

package/dist/styles/components/form/Button/Button.mjs

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useComponentStyles, Box, classnames, createAsChildTemplate } from "../../display/Divider/Divider.mjs";
 import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
-import { useComponentStyles, Box, classnames, createSlottable, Slot } from "../../display/Divider/Divider.mjs";
 import { buttonReset } from "./Button.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 const Spinner = ({ className, size, color, ...restProps }) => {
   const spinnerClassName = useComponentStyles("spinner", { base: true, variants: { size, color } });
   return /* @__PURE__ */ jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
 };
-const Slottable = createSlottable("button");
+const { Template, Slot } = createAsChildTemplate("button");
 const Button = forwardRef(function Button2({
   children,
   className,
@@ -34,7 +34,7 @@ const Button = forwardRef(function Button2({
   });
   const [atomsProps, otherProps] = getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsxs(
-    Slottable,
+    Template,
     {
       ref,
       asChild,

package/dist/styles/components/overlay/Dialog/Dialog.cjs

@@ -3,15 +3,6 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const styles_components_overlay_Dialog_dialog_css_cjs = require("./dialog.css.cjs");
-const reactDom = require("react-dom");
-const styles_components_other_BlocksProvider_BlocksProvider_cjs = require("../../other/BlocksProvider/BlocksProvider.cjs");
-const Portal = ({ children, container }) => {
-  const context = styles_components_display_Divider_Divider_cjs.useTheme();
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(styles_components_other_BlocksProvider_BlocksProvider_cjs.BlocksProvider, { theme: context, children }),
-    container || document.body
-  );
-};
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
   react.useEffect(() => {
     if (!enabled) {
@@ -22,8 +13,11 @@ const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
         onClickOutside();
       }
     };
-    document.addEventListener("click", listener);
+    const rafId = requestAnimationFrame(() => {
+      document.addEventListener("click", listener);
+    });
     return () => {
+      cancelAnimationFrame(rafId);
       document.removeEventListener("click", listener);
     };
   }, [ref, onClickOutside, enabled]);
@@ -45,27 +39,6 @@ const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) =
     };
   }, [callback, enabled, key, type]);
 };
-const useLayer = () => {
-  const layerRef = react.useRef();
-  react.useEffect(
-    () => () => {
-      if (layerRef.current) {
-        layerRef.current.remove();
-        layerRef.current = void 0;
-      }
-    },
-    []
-  );
-  return () => {
-    if (!layerRef.current) {
-      const div = document.createElement("div");
-      div.dataset.layer = "blocks";
-      layerRef.current = div;
-      document.body.append(layerRef.current);
-    }
-    return layerRef.current;
-  };
-};
 const usePreventBodyScroll = (enabled = true) => {
   useIsomorphicLayoutEffect(() => {
     if (!enabled) {
@@ -106,24 +79,15 @@ const useRestoreFocus = (active) => {
     }
   }, [active]);
 };
-const useVisibilityState = (open) => {
-  const [visible, setVisible] = react.useState(open);
-  const hide = react.useCallback(() => {
-    setVisible(false);
-  }, []);
-  react.useEffect(() => {
-    if (open) {
-      setVisible(true);
-    }
-  }, [open]);
-  return [visible, hide];
-};
 function hasAnimationDuration(element) {
   if (!element) {
     return false;
   }
   const style = window.getComputedStyle(element);
-  return style.transitionDuration !== "0s" || style.animationDuration !== "0s";
+  return hasDuration(style.transitionDuration) || hasDuration(style.animationDuration);
+}
+function hasDuration(duration) {
+  return duration.split(",").map((part) => Number.parseFloat(part.trim())).some((part) => part > 0);
 }
 const DialogContext = react.createContext(void 0);
 const useNestedDialog = (open) => {
@@ -149,12 +113,11 @@ const Dialog = ({
 }) => {
   const dialogClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("dialog", { dialog: true, variants: { size } });
   const dialogRef = react.useRef(null);
-  const layer = useLayer();
-  const [visible, hide] = useVisibilityState(open);
   const [enabled, setEnabled] = react.useState(true);
+  const [visible, setVisible] = react.useState(open);
   useRestoreFocus(open);
-  const isNested = useNestedDialog(visible);
-  usePreventBodyScroll(visible && !isNested);
+  const isNested = useNestedDialog(open);
+  usePreventBodyScroll(open && !isNested);
   const onEscape = react.useCallback(
     (event) => {
       event.preventDefault();
@@ -166,47 +129,32 @@ const Dialog = ({
   useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
-    if (!visible) {
-      (_a = dialogRef.current) == null ? void 0 : _a.close();
-    }
-    if (!open) {
-      (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
-      return;
+    if (open && visible) {
+      (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+    } else if (open) {
+      setVisible(true);
+    } else {
+      if (!hasAnimationDuration(dialogRef.current)) {
+        setVisible(false);
+      }
+      (_b = dialogRef.current) == null ? void 0 : _b.close();
     }
-    let timer = requestAnimationFrame(() => {
-      timer = requestAnimationFrame(() => {
-        var _a2, _b2;
-        (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
-        (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
-      });
-    });
-    return () => {
-      cancelAnimationFrame(timer);
-    };
   }, [open, visible]);
   const onAnimationEnd = react.useCallback(() => {
     if (!open) {
-      hide();
-    }
-  }, [hide, open]);
-  react.useEffect(() => {
-    if (open) {
-      return;
-    }
-    if (!hasAnimationDuration(dialogRef.current)) {
-      hide();
+      setVisible(false);
     }
-  }, [hide, open]);
+  }, [setVisible, open]);
   if (!visible) {
     return null;
   }
-  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const dataOpen = typeof window === "undefined" && open ? true : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "dialog",
     {
       ref: dialogRef,
       "aria-modal": "true",
-      "data-open": dataOpen,
+      open: dataOpen,
       className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_overlay_Dialog_dialog_css_cjs.dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
@@ -216,11 +164,8 @@ const Dialog = ({
   ) }) });
 };
 exports.Dialog = Dialog;
-exports.Portal = Portal;
 exports.hasAnimationDuration = hasAnimationDuration;
 exports.useClickOutside = useClickOutside;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useKeyboard = useKeyboard;
-exports.useLayer = useLayer;
 exports.usePreventBodyScroll = usePreventBodyScroll;
-exports.useVisibilityState = useVisibilityState;