@blockle/blocks 0.7.2 → 0.8.1

package/dist/index.cjs

@@ -12,8 +12,10 @@ const styles_components_Checkbox_checkbox_css_cjs = require("./styles/components
 const styles_components_Dialog_dialog_css_cjs = require("./styles/components/Dialog/dialog.css.cjs");
 const reactDom = require("react-dom");
 const styles_components_Divider_divider_css_cjs = require("./styles/components/Divider/divider.css.cjs");
+const styles_components_Heading_heading_css_cjs = require("./styles/components/Heading/heading.css.cjs");
 const styles_components_Input_input_css_cjs = require("./styles/components/Input/input.css.cjs");
 const styles_components_Radio_radio_css_cjs = require("./styles/components/Radio/radio.css.cjs");
+const styles_components_Text_text_css_cjs = require("./styles/components/Text/text.css.cjs");
 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 = react.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 (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
       atomProps[name] = value;
     } else {
       otherProps[name] = value;
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.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__ */ jsxRuntime.jsx(Component, { ref, ...slotProps, children });
+    }
+    const childrenArray = react.Children.toArray(children);
+    const slot = childrenArray.find((child) => {
+      if (!react.isValidElement(child)) {
+        return false;
+      }
+      return child.type === Slot;
+    });
+    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 (!react.isValidElement(Slot2)) {
+        return null;
+      }
+      return react.cloneElement(
+        Slot2,
+        {
+          ...mergeProps(slotProps, Slot2.props),
+          ref: composeRefs(ref, Slot2.ref)
+        },
+        Slot2.props.children
+      );
+    }
+    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;
+    });
+    return react.cloneElement(
+      slot.props.children,
+      {
+        ...mergeProps(slotProps, slot.props),
+        ref: composeRefs(ref, slot.props.children.ref)
+      },
+      newChildren
+    );
+  }
+  return react.forwardRef(Slottable2);
+}
+const Slot = ({ children }) => children;
+const Slottable$2 = createSlottable("div");
+const Box = react.forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
+  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Slottable$2,
+    {
+      ref,
+      asChild,
+      className: classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps)),
+      ...otherProps,
+      children
+    }
+  );
 });
 const useTheme = () => {
   const theme = react.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__ */ jsxRuntime.jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
 };
+const Slottable$1 = createSlottable("button");
 const Button = react.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 = react.forwardRef(function Button2({
       loading
     }
   });
+  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Box,
+    Slottable$1,
     {
       ref,
-      as: "button",
-      className: classnames(styles_components_Button_Button_css_cjs.buttonReset, buttonClassName, className),
-      width,
-      type,
+      asChild,
       disabled: disabled || loading,
-      ...restProps,
+      className: classnames(styles_components_Button_Button_css_cjs.buttonReset, buttonClassName, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps), className),
+      ...otherProps,
       children: [
-        startSlot && /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingRight: "medium", children: startSlot }),
-        loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size, marginRight: "medium" }),
-        children,
-        endSlot && /* @__PURE__ */ jsxRuntime.jsx(Box, { paddingLeft: "medium", children: endSlot })
+        startSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: startSlot }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size }),
+        /* @__PURE__ */ jsxRuntime.jsx(Slot, { children }),
+        endSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: endSlot })
       ]
     }
   );
@@ -263,12 +375,26 @@ const useLayer = () => {
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
 const usePreventBodyScroll = (enabled = true) => {
   useIsomorphicLayoutEffect(() => {
-    const prevValue = document.body.style.getPropertyValue("overflow");
-    if (enabled) {
+    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.overflow = prevValue;
+      document.body.style.position = "";
+      document.body.style.overflow = prevOverflow;
+      document.body.style.overflowY = "";
+      document.body.style.width = "";
+      document.documentElement.scrollTop = prevScrollTop;
     };
   }, [enabled]);
 };
@@ -376,10 +502,9 @@ const Dialog = ({
       onClick: onBackdropClick,
       onAnimationEnd,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        Box,
+        "dialog",
         {
           ref: dialogRef,
-          as: "dialog",
           "aria-modal": "true",
           open: true,
           className: classnames(
@@ -413,28 +538,10 @@ const Heading = ({
   className,
   level = 1,
   children,
-  align,
-  fontSize,
-  fontWeight = "strong",
-  fontFamily,
   ...restProps
 }) => {
-  const as = `h${level}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      as,
-      className,
-      fontFamily,
-      fontWeight,
-      fontSize,
-      textAlign: align,
-      padding: "none",
-      margin: "none",
-      ...restProps,
-      children
-    }
-  );
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { asChild: true, className: classnames(styles_components_Heading_heading_css_cjs.heading, className), ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
 };
 const justifyContentMap = {
   left: "flex-start",
@@ -452,7 +559,7 @@ const alignItemsMap = {
 const Inline = ({
   alignX,
   alignY,
-  as = "div",
+  tag: Tag = "div",
   children,
   display = "flex",
   gap,
@@ -461,7 +568,7 @@ const Inline = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
-      as,
+      asChild: true,
       display,
       gap,
       flexDirection: "row",
@@ -469,7 +576,7 @@ const Inline = ({
       alignItems: alignY ? alignItemsMap[alignY] : void 0,
       flexWrap: "wrap",
       ...props,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
     }
   );
 };
@@ -479,32 +586,37 @@ const Input = react.forwardRef(function Input2({ className, name, type = "text",
   const inputClassName = useComponentStyles("input", { input: true });
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", alignItems: "center", className: classnames(containerClassName, className), children: [
     startSlot,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Box,
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { asChild: true, width: "full", overflow: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
       {
-        as: "input",
         id,
         ref,
         name,
         type,
         placeholder: placeholder || label,
-        width: "full",
-        overflow: "hidden",
         className: classnames(styles_components_Input_input_css_cjs.input, inputClassName),
         ...restProps
       }
-    ),
+    ) }),
     endSlot
   ] }) });
 });
-const defaultElement = "a";
-const Link = react.forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
-  const Component = as || defaultElement;
+const Slottable = createSlottable("a");
+const Link = react.forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
   const linkClassName = useComponentStyles("link", {
     base: true,
     variants: { variant, underline }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Slottable,
+    {
+      asChild,
+      ref,
+      className: classnames(className, linkClassName),
+      ...restProps,
+      children
+    }
+  );
 });
 const Radio = react.forwardRef(function Checkbox3({ name, label, className, ...restProps }, ref) {
   const containerClassName = useComponentStyles("radio", { base: true }, false);
@@ -523,55 +635,32 @@ const Radio = react.forwardRef(function Checkbox3({ name, label, className, ...r
   ] });
 });
 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__ */ jsxRuntime.jsx(
     Box,
     {
-      as,
+      asChild: true,
       display,
       gap,
       flexDirection: "column",
       alignItems: alignX ? alignItemsMap[alignX] : void 0,
       ...restProps,
-      children
-    }
-  );
-};
-const Text = ({
-  as = "span",
-  children,
-  color,
-  fontSize,
-  fontWeight,
-  fontFamily,
-  textAlign,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      as,
-      color,
-      fontSize,
-      fontWeight,
-      fontFamily,
-      textAlign,
-      padding: "none",
-      margin: "none",
-      ...restProps,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
     }
   );
 };
+const Text = react.forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, asChild: true, className: classnames(styles_components_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
+});
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
 exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;
 exports.makeTheme = styles_lib_theme_makeTheme_cjs.makeTheme;
@@ -590,9 +679,11 @@ exports.Label = Label;
 exports.Link = Link;
 exports.Portal = Portal;
 exports.Radio = Radio;
+exports.Slot = Slot;
 exports.Spinner = Spinner;
 exports.Stack = Stack;
 exports.Text = Text;
 exports.classnames = classnames;
+exports.createSlottable = createSlottable;
 exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
 exports.useComponentStyles = useComponentStyles;

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Radio, RadioProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, vars } from './momotaro.chunk.js';