@blockle/blocks 0.12.1 → 0.13.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 })
     }
   );
 });
@@ -208,7 +193,7 @@ const Divider = ({ className, color, ...restProps }) => {
     Box,
     {
       role: "separator",
-      width: "full",
+      inlineSize: "full",
       backgroundColor: color ?? dividerDefaults.color,
       className: classnames(className, dividerClass, styles_components_display_Divider_divider_css_cjs.divider),
       ...restProps
@@ -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 })
     }
   );
 });
@@ -207,7 +192,7 @@ const Divider = ({ className, color, ...restProps }) => {
     Box,
     {
       role: "separator",
-      width: "full",
+      inlineSize: "full",
       backgroundColor: color ?? dividerDefaults.color,
       className: classnames(className, dividerClass, divider),
       ...restProps
@@ -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

@@ -12,6 +12,22 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
+const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
+  react.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const listener = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
+      }
+    };
+    document.addEventListener("click", listener);
+    return () => {
+      document.removeEventListener("click", listener);
+    };
+  }, [ref, onClickOutside, enabled]);
+};
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
 const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
   react.useEffect(() => {
@@ -136,7 +152,6 @@ const Dialog = ({
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
   const [enabled, setEnabled] = react.useState(true);
-  const lastAction = react.useRef(0);
   useRestoreFocus(open);
   const isNested = useNestedDialog(visible);
   usePreventBodyScroll(visible && !isNested);
@@ -148,26 +163,7 @@ const Dialog = ({
     [onRequestClose]
   );
   useKeyboard("Escape", onEscape, { enabled: open && enabled });
-  react.useEffect(() => {
-    if (!open || !enabled) {
-      return;
-    }
-    lastAction.current = Date.now();
-    const listener = (event) => {
-      var _a;
-      if (lastAction.current + 30 > Date.now()) {
-        return;
-      }
-      if ((_a = dialogRef.current) == null ? void 0 : _a.contains(event.target)) {
-        return;
-      }
-      onRequestClose();
-    };
-    document.addEventListener("click", listener);
-    return () => {
-      document.removeEventListener("click", listener);
-    };
-  }, [enabled, onRequestClose, open]);
+  useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
     if (!visible) {
@@ -222,6 +218,7 @@ const Dialog = ({
 exports.Dialog = Dialog;
 exports.Portal = Portal;
 exports.hasAnimationDuration = hasAnimationDuration;
+exports.useClickOutside = useClickOutside;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useKeyboard = useKeyboard;
 exports.useLayer = useLayer;

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

@@ -11,6 +11,22 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
+const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const listener = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
+      }
+    };
+    document.addEventListener("click", listener);
+    return () => {
+      document.removeEventListener("click", listener);
+    };
+  }, [ref, onClickOutside, enabled]);
+};
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
   useEffect(() => {
@@ -135,7 +151,6 @@ const Dialog = ({
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
   const [enabled, setEnabled] = useState(true);
-  const lastAction = useRef(0);
   useRestoreFocus(open);
   const isNested = useNestedDialog(visible);
   usePreventBodyScroll(visible && !isNested);
@@ -147,26 +162,7 @@ const Dialog = ({
     [onRequestClose]
   );
   useKeyboard("Escape", onEscape, { enabled: open && enabled });
-  useEffect(() => {
-    if (!open || !enabled) {
-      return;
-    }
-    lastAction.current = Date.now();
-    const listener = (event) => {
-      var _a;
-      if (lastAction.current + 30 > Date.now()) {
-        return;
-      }
-      if ((_a = dialogRef.current) == null ? void 0 : _a.contains(event.target)) {
-        return;
-      }
-      onRequestClose();
-    };
-    document.addEventListener("click", listener);
-    return () => {
-      document.removeEventListener("click", listener);
-    };
-  }, [enabled, onRequestClose, open]);
+  useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
     if (!visible) {
@@ -222,6 +218,7 @@ export {
   Dialog,
   Portal,
   hasAnimationDuration,
+  useClickOutside,
   useIsomorphicLayoutEffect,
   useKeyboard,
   useLayer,

package/dist/styles/themes/momotaro/components/divider.css.cjs

@@ -1,8 +1,12 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
 const divider = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
+  base: css.style({
+    blockSize: 1
+  }, "divider_base"),
   defaultVariants: {
     color: "textLight"
   }

package/dist/styles/themes/momotaro/components/divider.css.mjs

@@ -1,7 +1,11 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
 const divider = makeComponentTheme("divider", {
+  base: style({
+    blockSize: 1
+  }, "divider_base"),
   defaultVariants: {
     color: "textLight"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -68,7 +68,6 @@
     "@storybook/addon-essentials": "^8.1.6",
     "@storybook/addon-interactions": "^8.1.6",
     "@storybook/addon-links": "^8.1.6",
-    "@storybook/addons": "^7.6.17",
     "@storybook/blocks": "^8.1.6",
     "@storybook/react": "^8.1.6",
     "@storybook/react-vite": "^8.1.6",