@blockle/blocks 0.12.1 → 0.13.0

package/dist/index.cjs

@@ -119,39 +119,23 @@ const Stack = ({
     }
   );
 };
-const Slottable = styles_components_display_Divider_Divider_cjs.createSlottable("a");
+const { Template, Slot } = styles_components_display_Divider_Divider_cjs.createAsChildTemplate("a");
 const Link = react.forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
   const linkClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("link", {
     base: true,
     variants: { variant, underline }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Slottable,
+    Template,
     {
       asChild,
       ref,
       className: styles_components_display_Divider_Divider_cjs.classnames(className, linkClassName),
       ...restProps,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
     }
   );
 });
-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]);
-};
 function getDopoverPosition(align, anchorRef, popoverRef) {
   if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
@@ -264,7 +248,7 @@ const Popover = ({
     }
   }, [hide, open]);
   styles_components_overlay_Dialog_Dialog_cjs.useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
+  styles_components_overlay_Dialog_Dialog_cjs.useClickOutside(popoverRef, onRequestClose, { enabled: visible });
   if (!visible) {
     return null;
   }
@@ -366,9 +350,8 @@ exports.makeTheme = styles_lib_theme_makeTheme_cjs.makeTheme;
 exports.vars = styles_lib_theme_vars_css_cjs.vars;
 exports.Box = styles_components_display_Divider_Divider_cjs.Box;
 exports.Divider = styles_components_display_Divider_Divider_cjs.Divider;
-exports.Slot = styles_components_display_Divider_Divider_cjs.Slot;
 exports.classnames = styles_components_display_Divider_Divider_cjs.classnames;
-exports.createSlottable = styles_components_display_Divider_Divider_cjs.createSlottable;
+exports.createAsChildTemplate = styles_components_display_Divider_Divider_cjs.createAsChildTemplate;
 exports.useComponentStyleDefaultProps = styles_components_display_Divider_Divider_cjs.useComponentStyleDefaultProps;
 exports.useComponentStyles = styles_components_display_Divider_Divider_cjs.useComponentStyles;
 exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;

package/dist/index.d.mts

@@ -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, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, 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, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createAsChildTemplate, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';

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, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, 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, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, Tooltip, TooltipProps, atoms, breakpointQuery, classnames, createAsChildTemplate, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';

package/dist/index.mjs

@@ -5,11 +5,11 @@ 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, classnames, createSlottable, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
-import { Divider, Slot, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
+import { useComponentStyles, Box, classnames, createAsChildTemplate, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
+import { Divider, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState, useRef, useLayoutEffect, useCallback, useId, Children, isValidElement, cloneElement, useContext } from "react";
+import { forwardRef, useState, useRef, useLayoutEffect, useEffect, useCallback, useId, Children, isValidElement, cloneElement, useContext } from "react";
 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";
@@ -18,7 +18,7 @@ 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 { useLayer, useVisibilityState, useIsomorphicLayoutEffect, hasAnimationDuration, useKeyboard, Portal } from "./styles/components/overlay/Dialog/Dialog.mjs";
+import { useLayer, useVisibilityState, useIsomorphicLayoutEffect, hasAnimationDuration, useKeyboard, useClickOutside, Portal } from "./styles/components/overlay/Dialog/Dialog.mjs";
 import { Dialog, usePreventBodyScroll } from "./styles/components/overlay/Dialog/Dialog.mjs";
 import { Heading } from "./styles/components/typography/Heading/Heading.mjs";
 import { Text } from "./styles/components/typography/Text/Text.mjs";
@@ -121,39 +121,23 @@ const Stack = ({
     }
   );
 };
-const Slottable = createSlottable("a");
+const { Template, Slot } = createAsChildTemplate("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(
-    Slottable,
+    Template,
     {
       asChild,
       ref,
       className: classnames(className, linkClassName),
       ...restProps,
-      children
+      children: /* @__PURE__ */ jsx(Slot, { children })
     }
   );
 });
-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]);
-};
 function getDopoverPosition(align, anchorRef, popoverRef) {
   if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
@@ -378,7 +362,6 @@ export {
   Radio,
   Select,
   Slider,
-  Slot,
   Spinner,
   Stack,
   Switch,
@@ -387,7 +370,7 @@ export {
   atoms,
   breakpointQuery,
   classnames,
-  createSlottable,
+  createAsChildTemplate,
   makeComponentTheme,
   makeTheme,
   style,