@blockle/blocks 0.7.1 → 0.8.0

package/dist/index.mjs

@@ -6,14 +6,16 @@ import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/theme/vars.css.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useId } from "react";
+import { createContext, forwardRef, Children, isValidElement, cloneElement, useContext, useEffect, useRef, useLayoutEffect, useState, useCallback, useId } from "react";
 import { buttonReset } from "./styles/components/Button/Button.css.mjs";
 import { container, input, icon } from "./styles/components/Checkbox/checkbox.css.mjs";
 import { backdropLeaveAnimation, backdropLeave, backdrop, dialogLeave, dialog } from "./styles/components/Dialog/dialog.css.mjs";
 import { createPortal } from "react-dom";
 import { divider } from "./styles/components/Divider/divider.css.mjs";
+import { heading } from "./styles/components/Heading/heading.css.mjs";
 import { input as input$1 } from "./styles/components/Input/input.css.mjs";
 import { container as container$1, input as input$2, icon as icon$1 } from "./styles/components/Radio/radio.css.mjs";
+import { text } from "./styles/components/Text/text.css.mjs";
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -34,19 +36,130 @@ const BlocksProvider = ({
     }
   ) });
 };
-const defaultElement$1 = "div";
-const Box = forwardRef(function Box2({ className, as, ...restProps }, ref) {
-  const Component = as || defaultElement$1;
+function getAtomsAndProps(props) {
   const atomProps = {};
   const otherProps = {};
-  for (const [name, value] of Object.entries(restProps)) {
+  for (const [name, value] of Object.entries(props)) {
     if (atoms.properties.has(name)) {
       atomProps[name] = value;
     } else {
       otherProps[name] = value;
     }
   }
-  return /* @__PURE__ */ jsx(Component, { ref, className: classnames(className, atoms(atomProps)), ...otherProps });
+  return [atomProps, otherProps];
+}
+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) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    if (childPropValue === void 0) {
+      continue;
+    }
+    if (slotPropValue === void 0) {
+      overrideProps[propName] = childPropValue;
+      continue;
+    }
+    if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
+      overrideProps[propName] = (...args) => {
+        childPropValue(...args);
+        slotPropValue(...args);
+      };
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    } else {
+      overrideProps[propName] = childPropValue;
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function createSlottable(defaultElement) {
+  function Slottable2(props, ref) {
+    const { asChild, children, ...slotProps } = props;
+    const Component = defaultElement;
+    if (!asChild) {
+      return /* @__PURE__ */ jsx(Component, { ref, ...slotProps, children });
+    }
+    const childrenArray = Children.toArray(children);
+    const slot = childrenArray.find((child) => {
+      if (!isValidElement(child)) {
+        return false;
+      }
+      return child.type === Slot;
+    });
+    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 (!isValidElement(Slot2)) {
+        return null;
+      }
+      return cloneElement(
+        Slot2,
+        {
+          ...mergeProps(slotProps, Slot2.props),
+          ref: composeRefs(ref, Slot2.ref)
+        },
+        Slot2.props.children
+      );
+    }
+    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;
+    });
+    return cloneElement(
+      slot.props.children,
+      {
+        ...mergeProps(slotProps, slot.props),
+        ref: composeRefs(ref, slot.props.children.ref)
+      },
+      newChildren
+    );
+  }
+  return forwardRef(Slottable2);
+}
+const Slot = ({ children }) => children;
+const Slottable$2 = createSlottable("div");
+const Box = forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
+  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsx(
+    Slottable$2,
+    {
+      ref,
+      asChild,
+      className: classnames(className, atoms(atomsProps)),
+      ...otherProps,
+      children
+    }
+  );
 });
 const useTheme = () => {
   const theme = useContext(BlocksProviderContext);
@@ -87,7 +200,7 @@ function useComponentStyles(name, props, useDefaultVariants = true) {
   const componentVariants = component.variants;
   for (const key of keys) {
     const value = variantsWithDefaults[key];
-    if (value === void 0) {
+    if (value === void 0 || componentVariants[key] === void 0) {
       continue;
     }
     if (typeof value === "boolean") {
@@ -131,18 +244,18 @@ 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$1 = createSlottable("button");
 const Button = forwardRef(function Button2({
   children,
   className,
-  type = "button",
   variant,
   intent,
   size,
-  width,
   startSlot,
   endSlot,
   loading,
   disabled,
+  asChild,
   ...restProps
 }, ref) {
   const buttonClassName = useComponentStyles("button", {
@@ -155,21 +268,20 @@ const Button = forwardRef(function Button2({
       loading
     }
   });
+  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsxs(
-    Box,
+    Slottable$1,
     {
       ref,
-      as: "button",
-      className: classnames(buttonReset, buttonClassName, className),
-      width,
-      type,
+      asChild,
       disabled: disabled || loading,
-      ...restProps,
+      className: classnames(buttonReset, buttonClassName, atoms(atomsProps), className),
+      ...otherProps,
       children: [
-        startSlot && /* @__PURE__ */ jsx(Box, { paddingRight: "medium", children: startSlot }),
-        loading && /* @__PURE__ */ jsx(Spinner, { size, marginRight: "medium" }),
-        children,
-        endSlot && /* @__PURE__ */ jsx(Box, { paddingLeft: "medium", children: endSlot })
+        startSlot && /* @__PURE__ */ jsx("div", { children: startSlot }),
+        loading && /* @__PURE__ */ jsx(Spinner, { size }),
+        /* @__PURE__ */ jsx(Slot, { children }),
+        endSlot && /* @__PURE__ */ jsx("div", { children: endSlot })
       ]
     }
   );
@@ -213,38 +325,6 @@ const Checkbox = forwardRef(function Checkbox2({ name, label, required, classNam
     label && /* @__PURE__ */ jsx(Label, { visualOnly: true, required, children: label })
   ] });
 });
-const useLayer = () => {
-  const layerRef = useRef();
-  useEffect(
-    () => () => {
-      if (layerRef.current) {
-        layerRef.current.remove();
-      }
-    },
-    []
-  );
-  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 useVisibilityState = (open) => {
-  const [visible, setVisible] = useState(open);
-  const hide = useCallback(() => {
-    setVisible(false);
-  }, []);
-  useEffect(() => {
-    if (open) {
-      setVisible(true);
-    }
-  }, [open]);
-  return [visible, hide];
-};
 const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const getFirstFocusableElement = (container2) => {
   const focusable = container2.querySelector(focusableSelectors);
@@ -272,7 +352,38 @@ const useFocusLock = ({ ref, active }) => {
     };
   }, [active]);
 };
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const useLayer = () => {
+  const layerRef = useRef();
+  useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+      }
+    },
+    []
+  );
+  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 useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect(() => {
+    const prevValue = document.body.style.getPropertyValue("overflow");
+    if (enabled) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = prevValue;
+    };
+  }, [enabled]);
+};
 const useRestoreFocus = (active) => {
   const [target, setTarget] = useState(null);
   useIsomorphicLayoutEffect(() => {
@@ -286,6 +397,25 @@ const useRestoreFocus = (active) => {
     }
   }, [active]);
 };
+const useVisibilityState = (open) => {
+  const [visible, setVisible] = useState(open);
+  const hide = useCallback(() => {
+    setVisible(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+const Portal = ({ children, container: container2 }) => {
+  const context = useTheme();
+  return createPortal(
+    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
+    container2 || document.body
+  );
+};
 const DialogContext = createContext(void 0);
 const useNestedDialog = (open) => {
   const parentDialog = useContext(DialogContext);
@@ -300,24 +430,6 @@ const useNestedDialog = (open) => {
   }, [parentDialog, open]);
   return !!parentDialog;
 };
-const usePreventBodyScroll = (enabled = true) => {
-  useIsomorphicLayoutEffect(() => {
-    const prevValue = document.body.style.getPropertyValue("overflow");
-    if (enabled) {
-      document.body.style.overflow = "hidden";
-    }
-    return () => {
-      document.body.style.overflow = prevValue;
-    };
-  }, [enabled]);
-};
-const Portal = ({ children, container: container2 }) => {
-  const context = useTheme();
-  return createPortal(
-    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
-    container2 || document.body
-  );
-};
 const Dialog = ({
   children,
   open,
@@ -376,10 +488,9 @@ const Dialog = ({
       onClick: onBackdropClick,
       onAnimationEnd,
       children: /* @__PURE__ */ jsx(
-        Box,
+        "dialog",
         {
           ref: dialogRef,
-          as: "dialog",
           "aria-modal": "true",
           open: true,
           className: classnames(
@@ -419,20 +530,18 @@ const Heading = ({
   fontFamily,
   ...restProps
 }) => {
-  const as = `h${level}`;
+  const Tag = `h${level}`;
   return /* @__PURE__ */ jsx(
     Box,
     {
-      as,
-      className,
+      asChild: true,
+      className: classnames(heading, className),
       fontFamily,
       fontWeight,
       fontSize,
       textAlign: align,
-      padding: "none",
-      margin: "none",
       ...restProps,
-      children
+      children: /* @__PURE__ */ jsx(Tag, { children })
     }
   );
 };
@@ -452,7 +561,7 @@ const alignItemsMap = {
 const Inline = ({
   alignX,
   alignY,
-  as = "div",
+  tag: Tag = "div",
   children,
   display = "flex",
   gap,
@@ -461,7 +570,7 @@ const Inline = ({
   return /* @__PURE__ */ jsx(
     Box,
     {
-      as,
+      asChild: true,
       display,
       gap,
       flexDirection: "row",
@@ -469,7 +578,7 @@ const Inline = ({
       alignItems: alignY ? alignItemsMap[alignY] : void 0,
       flexWrap: "wrap",
       ...props,
-      children
+      children: /* @__PURE__ */ jsx(Tag, { children })
     }
   );
 };
@@ -479,32 +588,37 @@ const Input = forwardRef(function Input2({ className, name, type = "text", start
   const inputClassName = useComponentStyles("input", { input: true });
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", className: classnames(containerClassName, className), children: [
     startSlot,
-    /* @__PURE__ */ jsx(
-      Box,
+    /* @__PURE__ */ jsx(Box, { asChild: true, width: "full", overflow: "hidden", children: /* @__PURE__ */ jsx(
+      "input",
       {
-        as: "input",
         id,
         ref,
         name,
         type,
         placeholder: placeholder || label,
-        width: "full",
-        overflow: "hidden",
         className: classnames(input$1, inputClassName),
         ...restProps
       }
-    ),
+    ) }),
     endSlot
   ] }) });
 });
-const defaultElement = "a";
-const Link = forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
-  const Component = as || defaultElement;
+const Slottable = createSlottable("a");
+const Link = forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
   const linkClassName = useComponentStyles("link", {
     base: true,
     variants: { variant, underline }
   });
-  return /* @__PURE__ */ jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
+  return /* @__PURE__ */ jsx(
+    Slottable,
+    {
+      asChild,
+      ref,
+      className: classnames(className, linkClassName),
+      ...restProps,
+      children
+    }
+  );
 });
 const Radio = forwardRef(function Checkbox3({ name, label, className, ...restProps }, ref) {
   const containerClassName = useComponentStyles("radio", { base: true }, false);
@@ -523,55 +637,57 @@ const Radio = forwardRef(function Checkbox3({ name, label, className, ...restPro
   ] });
 });
 const Stack = ({
-  as = "div",
+  tag: Tag = "div",
   display = "flex",
   children,
   gap,
   alignX,
   ...restProps
 }) => {
-  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && as !== "ol") {
-    console.warn('Stack: start prop is only valid when as="ol"');
+  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && Tag !== "ol") {
+    console.warn('Stack: start prop is only valid when tag="ol"');
   }
   return /* @__PURE__ */ jsx(
     Box,
     {
-      as,
+      asChild: true,
       display,
       gap,
       flexDirection: "column",
       alignItems: alignX ? alignItemsMap[alignX] : void 0,
       ...restProps,
-      children
+      children: /* @__PURE__ */ jsx(Tag, { children })
     }
   );
 };
-const Text = ({
-  as = "span",
+const Text = forwardRef(function Text2({
+  tag: Tag = "span",
+  asChild,
   children,
   color,
   fontSize,
   fontWeight,
   fontFamily,
   textAlign,
+  className,
   ...restProps
-}) => {
+}, ref) {
   return /* @__PURE__ */ jsx(
     Box,
     {
-      as,
+      ref,
+      asChild: true,
       color,
       fontSize,
       fontWeight,
       fontFamily,
       textAlign,
-      padding: "none",
-      margin: "none",
+      className: classnames(text, className),
       ...restProps,
-      children
+      children: asChild ? children : /* @__PURE__ */ jsx(Tag, { children })
     }
   );
-};
+});
 export {
   BlocksProvider,
   Box,
@@ -586,12 +702,14 @@ export {
   Link,
   Portal,
   Radio,
+  Slot,
   Spinner,
   Stack,
   Text,
   atoms,
   breakpointQuery,
   classnames,
+  createSlottable,
   makeComponentTheme,
   makeTheme,
   useComponentStyleDefaultProps,