@blockle/blocks 0.10.0 → 0.11.1

package/dist/index.cjs

@@ -136,6 +136,221 @@ const Link = react.forwardRef(function Link2({ asChild, className, children, var
     }
   );
 });
+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 getDropdownPosition(align, anchorRef, dropdownRef) {
+  if (!anchorRef.current || !dropdownRef.current) {
+    return [0, 0];
+  }
+  dropdownRef.current.style.transform = "none";
+  dropdownRef.current.style.transitionDuration = "0s";
+  const anchorRect = anchorRef.current.getBoundingClientRect();
+  const dropdownRect = dropdownRef.current.getBoundingClientRect();
+  const dropdownStyles = getComputedStyle(dropdownRef.current);
+  const marginTop = Number.parseFloat(dropdownStyles.getPropertyValue("margin-top"));
+  const marginRight = Number.parseFloat(dropdownStyles.getPropertyValue("margin-right"));
+  const marginBottom = Number.parseFloat(dropdownStyles.getPropertyValue("margin-bottom"));
+  const marginLeft = Number.parseFloat(dropdownStyles.getPropertyValue("margin-left"));
+  const marginY = marginTop + marginBottom;
+  const marginX = marginRight + marginLeft;
+  const docHeight = document.documentElement.clientHeight;
+  const docWidth = document.documentElement.clientWidth;
+  const docScrollTop = document.documentElement.scrollTop;
+  const docScrollLeft = document.documentElement.scrollLeft;
+  const anchorLeft = anchorRect.left + docScrollLeft;
+  const anchorTop = anchorRect.top + docScrollTop;
+  const topPosition = anchorRect.top - (dropdownRect.height + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + dropdownRect.width;
+  const bottomPosition = anchorRect.top + anchorRect.height + dropdownRect.height;
+  const leftPosition = anchorRect.left - dropdownRect.width;
+  const offsetX = anchorLeft - (dropdownRect.width - anchorRect.width) / 2;
+  const offsetY = anchorTop - (dropdownRect.height - anchorRect.height) / 2;
+  dropdownRef.current.style.transform = "";
+  dropdownRef.current.style.transitionDuration = "";
+  switch (align) {
+    case "top": {
+      return topPosition > 0 ? [offsetX, anchorTop - dropdownRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+    }
+    case "bottom": {
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - dropdownRect.height - marginY];
+    }
+    case "left": {
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - dropdownRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+    }
+    case "right": {
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - dropdownRect.width - marginX, offsetY];
+    }
+  }
+}
+const Dropdown = ({
+  align = "bottom",
+  anchorElement,
+  children,
+  className,
+  onRequestClose,
+  open,
+  repositionOnScroll,
+  style,
+  variant,
+  ...restProps
+}) => {
+  const layer = styles_components_overlay_Dialog_Dialog_cjs.useLayer();
+  const [visible, hide] = styles_components_overlay_Dialog_Dialog_cjs.useVisibilityState(open);
+  const [position, setPosition] = react.useState({ x: 0, y: 0 });
+  const dropdownRef = react.useRef(null);
+  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles(
+    "dropdown",
+    { base: true, variants: { variant } },
+    false
+  );
+  react.useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+    setPosition({ x: position2[0], y: position2[1] });
+  }, [align, anchorElement, visible]);
+  react.useEffect(() => {
+    if (!open || !repositionOnScroll) {
+      return;
+    }
+    function handleResize() {
+      const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+      setPosition({ x: position2[0], y: position2[1] });
+    }
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleResize);
+    };
+  }, [align, anchorElement, open, repositionOnScroll]);
+  styles_components_overlay_Dialog_Dialog_cjs.useIsomorphicLayoutEffect(() => {
+    var _a;
+    if (!open) {
+      (_a = dropdownRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      return;
+    }
+    let timer = requestAnimationFrame(() => {
+      timer = requestAnimationFrame(() => {
+        var _a2;
+        (_a2 = dropdownRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+      });
+    });
+    return () => {
+      cancelAnimationFrame(timer);
+    };
+  }, [open, visible]);
+  const onAnimationEnd = react.useCallback(() => {
+    if (!open) {
+      hide();
+    }
+  }, [hide, open]);
+  react.useEffect(() => {
+    if (open) {
+      return;
+    }
+    if (!styles_components_overlay_Dialog_Dialog_cjs.hasAnimationDuration(dropdownRef.current)) {
+      hide();
+    }
+  }, [hide, open]);
+  styles_components_overlay_Dialog_Dialog_cjs.useKeyboard("Escape", onRequestClose, { enabled: visible });
+  useClickOutside(dropdownRef, onRequestClose, { enabled: visible });
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_overlay_Dialog_Dialog_cjs.Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(
+    styles_components_display_Divider_Divider_cjs.Box,
+    {
+      ref: dropdownRef,
+      "data-open": dataOpen,
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      className: styles_components_display_Divider_Divider_cjs.classnames(containerClassName, className),
+      position: "absolute",
+      style: {
+        ...style,
+        // TODO Think about how to handle this, perhaps we could add a custom class to the dropdown
+        // Or we remove it from getDropdownPosition?
+        // "horizontal" ? "vertical"
+        margin: align === "bottom" || align === "top" ? "var(--spacing) 0" : "0 var(--spacing)",
+        left: position.x,
+        top: position.y
+      },
+      ...restProps,
+      children
+    }
+  ) });
+};
+const Tooltip = ({ align = "top", children, label }) => {
+  const id = react.useId();
+  const ref = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    function onEnter() {
+      setOpen(true);
+    }
+    function onLeave() {
+      setOpen(false);
+    }
+    element.addEventListener("mouseenter", onEnter);
+    element.addEventListener("mouseleave", onLeave);
+    element.addEventListener("focusin", onEnter);
+    element.addEventListener("focusout", onLeave);
+    return () => {
+      element.removeEventListener("mouseenter", onEnter);
+      element.removeEventListener("mouseleave", onLeave);
+      element.removeEventListener("focusin", onEnter);
+      element.removeEventListener("focusout", onLeave);
+    };
+  }, [ref, setOpen]);
+  if (react.Children.count(children) !== 1) {
+    throw new Error("Tooltip component can only have one child");
+  }
+  const child = react.Children.toArray(children)[0];
+  if (!react.isValidElement(child)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    react.cloneElement(child, {
+      ref: styles_components_display_Divider_Divider_cjs.composeRefs(ref, child.ref),
+      ["aria-describedby"]: open ? id : void 0
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Dropdown,
+      {
+        id,
+        role: "tooltip",
+        anchorElement: ref,
+        open,
+        onRequestClose: () => {
+          setOpen(false);
+        },
+        align,
+        children: label
+      }
+    )
+  ] });
+};
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
 exports.style = styles_lib_css_style_style_cjs.style;
 exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;
@@ -171,3 +386,4 @@ exports.Inline = Inline;
 exports.Link = Link;
 exports.Progress = Progress;
 exports.Stack = Stack;
+exports.Tooltip = Tooltip;

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, 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, 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';

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, 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, 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';

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 } from "./styles/components/display/Divider/Divider.mjs";
+import { useComponentStyles, Box, classnames, createSlottable, composeRefs } from "./styles/components/display/Divider/Divider.mjs";
 import { Divider, Slot, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState, useRef, useLayoutEffect, useCallback, useId, Children, isValidElement, cloneElement } 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,8 @@ 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 { Dialog, Portal, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden } from "./styles/components/overlay/Dialog/Dialog.mjs";
+import { useLayer, useVisibilityState, useIsomorphicLayoutEffect, hasAnimationDuration, useKeyboard, Portal } from "./styles/components/overlay/Dialog/Dialog.mjs";
+import { Dialog, usePreventBodyScroll, useRootAriaHidden } 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";
 const Progress = forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
@@ -137,6 +138,221 @@ const Link = forwardRef(function Link2({ asChild, className, children, variant,
     }
   );
 });
+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 getDropdownPosition(align, anchorRef, dropdownRef) {
+  if (!anchorRef.current || !dropdownRef.current) {
+    return [0, 0];
+  }
+  dropdownRef.current.style.transform = "none";
+  dropdownRef.current.style.transitionDuration = "0s";
+  const anchorRect = anchorRef.current.getBoundingClientRect();
+  const dropdownRect = dropdownRef.current.getBoundingClientRect();
+  const dropdownStyles = getComputedStyle(dropdownRef.current);
+  const marginTop = Number.parseFloat(dropdownStyles.getPropertyValue("margin-top"));
+  const marginRight = Number.parseFloat(dropdownStyles.getPropertyValue("margin-right"));
+  const marginBottom = Number.parseFloat(dropdownStyles.getPropertyValue("margin-bottom"));
+  const marginLeft = Number.parseFloat(dropdownStyles.getPropertyValue("margin-left"));
+  const marginY = marginTop + marginBottom;
+  const marginX = marginRight + marginLeft;
+  const docHeight = document.documentElement.clientHeight;
+  const docWidth = document.documentElement.clientWidth;
+  const docScrollTop = document.documentElement.scrollTop;
+  const docScrollLeft = document.documentElement.scrollLeft;
+  const anchorLeft = anchorRect.left + docScrollLeft;
+  const anchorTop = anchorRect.top + docScrollTop;
+  const topPosition = anchorRect.top - (dropdownRect.height + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + dropdownRect.width;
+  const bottomPosition = anchorRect.top + anchorRect.height + dropdownRect.height;
+  const leftPosition = anchorRect.left - dropdownRect.width;
+  const offsetX = anchorLeft - (dropdownRect.width - anchorRect.width) / 2;
+  const offsetY = anchorTop - (dropdownRect.height - anchorRect.height) / 2;
+  dropdownRef.current.style.transform = "";
+  dropdownRef.current.style.transitionDuration = "";
+  switch (align) {
+    case "top": {
+      return topPosition > 0 ? [offsetX, anchorTop - dropdownRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+    }
+    case "bottom": {
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - dropdownRect.height - marginY];
+    }
+    case "left": {
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - dropdownRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+    }
+    case "right": {
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - dropdownRect.width - marginX, offsetY];
+    }
+  }
+}
+const Dropdown = ({
+  align = "bottom",
+  anchorElement,
+  children,
+  className,
+  onRequestClose,
+  open,
+  repositionOnScroll,
+  style: style2,
+  variant,
+  ...restProps
+}) => {
+  const layer = useLayer();
+  const [visible, hide] = useVisibilityState(open);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const dropdownRef = useRef(null);
+  const containerClassName = useComponentStyles(
+    "dropdown",
+    { base: true, variants: { variant } },
+    false
+  );
+  useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+    setPosition({ x: position2[0], y: position2[1] });
+  }, [align, anchorElement, visible]);
+  useEffect(() => {
+    if (!open || !repositionOnScroll) {
+      return;
+    }
+    function handleResize() {
+      const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+      setPosition({ x: position2[0], y: position2[1] });
+    }
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleResize);
+    };
+  }, [align, anchorElement, open, repositionOnScroll]);
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+    if (!open) {
+      (_a = dropdownRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      return;
+    }
+    let timer = requestAnimationFrame(() => {
+      timer = requestAnimationFrame(() => {
+        var _a2;
+        (_a2 = dropdownRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+      });
+    });
+    return () => {
+      cancelAnimationFrame(timer);
+    };
+  }, [open, visible]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      hide();
+    }
+  }, [hide, open]);
+  useEffect(() => {
+    if (open) {
+      return;
+    }
+    if (!hasAnimationDuration(dropdownRef.current)) {
+      hide();
+    }
+  }, [hide, open]);
+  useKeyboard("Escape", onRequestClose, { enabled: visible });
+  useClickOutside(dropdownRef, onRequestClose, { enabled: visible });
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
+  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: dropdownRef,
+      "data-open": dataOpen,
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      className: classnames(containerClassName, className),
+      position: "absolute",
+      style: {
+        ...style2,
+        // TODO Think about how to handle this, perhaps we could add a custom class to the dropdown
+        // Or we remove it from getDropdownPosition?
+        // "horizontal" ? "vertical"
+        margin: align === "bottom" || align === "top" ? "var(--spacing) 0" : "0 var(--spacing)",
+        left: position.x,
+        top: position.y
+      },
+      ...restProps,
+      children
+    }
+  ) });
+};
+const Tooltip = ({ align = "top", children, label }) => {
+  const id = useId();
+  const ref = useRef(null);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    function onEnter() {
+      setOpen(true);
+    }
+    function onLeave() {
+      setOpen(false);
+    }
+    element.addEventListener("mouseenter", onEnter);
+    element.addEventListener("mouseleave", onLeave);
+    element.addEventListener("focusin", onEnter);
+    element.addEventListener("focusout", onLeave);
+    return () => {
+      element.removeEventListener("mouseenter", onEnter);
+      element.removeEventListener("mouseleave", onLeave);
+      element.removeEventListener("focusin", onEnter);
+      element.removeEventListener("focusout", onLeave);
+    };
+  }, [ref, setOpen]);
+  if (Children.count(children) !== 1) {
+    throw new Error("Tooltip component can only have one child");
+  }
+  const child = Children.toArray(children)[0];
+  if (!isValidElement(child)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloneElement(child, {
+      ref: composeRefs(ref, child.ref),
+      ["aria-describedby"]: open ? id : void 0
+    }),
+    /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        id,
+        role: "tooltip",
+        anchorElement: ref,
+        open,
+        onRequestClose: () => {
+          setOpen(false);
+        },
+        align,
+        children: label
+      }
+    )
+  ] });
+};
 export {
   BlocksProvider,
   Box,
@@ -159,6 +375,7 @@ export {
   Stack,
   Switch,
   Text,
+  Tooltip,
   atoms,
   breakpointQuery,
   classnames,

package/dist/momotaro.chunk.d.ts

@@ -713,14 +713,12 @@ declare const Radio: react.ForwardRefExoticComponent<{
 type SelectProps = {
     children: react__default.ReactNode;
     placeholder?: string;
-    variant?: SelectTheme['variants'];
+    variant?: SelectTheme['variants']['variant'];
 } & HTMLElementProps<HTMLSelectElement>;
 declare const Select: react__default.ForwardRefExoticComponent<{
     children: react__default.ReactNode;
     placeholder?: string | undefined;
-    variant?: {
-        variant: "outline" | "solid";
-    } | undefined;
+    variant?: "outline" | "solid" | undefined;
 } & HTMLElementProps<HTMLSelectElement> & react__default.RefAttributes<HTMLSelectElement>>;
 
 type SliderProps = {
@@ -1071,6 +1069,26 @@ type DialogProps = {
 };
 declare const Dialog: React.FC<DialogProps>;
 
+type DropdownProps = {
+    align?: 'top' | 'bottom' | 'left' | 'right';
+    anchorElement: React.RefObject<HTMLElement>;
+    children: React.ReactNode;
+    className?: string;
+    onRequestClose: () => void;
+    open: boolean;
+    repositionOnScroll?: boolean;
+    style?: React.CSSProperties;
+    variant?: DropdownTheme['variants']['variant'];
+} & HTMLElementProps<HTMLDivElement>;
+
+type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+type TooltipProps = {
+    align?: DropdownProps['align'];
+    children: ReactElement;
+    label: React.ReactNode;
+};
+declare const Tooltip: React.FC<TooltipProps>;
+
 type HeadingProps = {
     children: React.ReactNode;
     className?: string;
@@ -1134,4 +1152,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
 
 declare const momotaro: Theme;
 
-export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };
+export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, Tooltip, type TooltipProps, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };

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

@@ -220,6 +220,7 @@ exports.Box = Box;
 exports.Divider = Divider;
 exports.Slot = Slot;
 exports.classnames = classnames;
+exports.composeRefs = composeRefs;
 exports.createSlottable = createSlottable;
 exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
 exports.useComponentStyles = useComponentStyles;

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

@@ -220,6 +220,7 @@ export {
   Divider,
   Slot,
   classnames,
+  composeRefs,
   createSlottable,
   useComponentStyleDefaultProps,
   useComponentStyles,

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

@@ -3,9 +3,9 @@ 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_form_Select_select_css_cjs = require("./select.css.cjs");
-const Select = react.forwardRef(function Select2({ children, placeholder, className, ...restProps }, ref) {
+const Select = react.forwardRef(function Select2({ children, placeholder, className, variant, ...restProps }, ref) {
   const wrapperClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { wrapper: true }, false);
-  const selectClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { select: true });
+  const selectClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { select: true, variants: { variant } });
   const iconClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { icon: true }, false);
   return /* @__PURE__ */ jsxRuntime.jsxs(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Select_select_css_cjs.wrapper, wrapperClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(

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

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
 import { wrapper, select, icon } from "./select.css.mjs";
-const Select = forwardRef(function Select2({ children, placeholder, className, ...restProps }, ref) {
+const Select = forwardRef(function Select2({ children, placeholder, className, variant, ...restProps }, ref) {
   const wrapperClassName = useComponentStyles("select", { wrapper: true }, false);
-  const selectClassName = useComponentStyles("select", { select: true });
+  const selectClassName = useComponentStyles("select", { select: true, variants: { variant } });
   const iconClassName = useComponentStyles("select", { icon: true }, false);
   return /* @__PURE__ */ jsxs(Box, { className: classnames(wrapper, wrapperClassName), children: [
     /* @__PURE__ */ jsxs(

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

@@ -248,7 +248,10 @@ const Dialog = ({
 };
 exports.Dialog = Dialog;
 exports.Portal = Portal;
+exports.hasAnimationDuration = hasAnimationDuration;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useKeyboard = useKeyboard;
+exports.useLayer = useLayer;
 exports.usePreventBodyScroll = usePreventBodyScroll;
 exports.useRootAriaHidden = useRootAriaHidden;
+exports.useVisibilityState = useVisibilityState;

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

@@ -248,8 +248,11 @@ const Dialog = ({
 export {
   Dialog,
   Portal,
+  hasAnimationDuration,
   useIsomorphicLayoutEffect,
   useKeyboard,
+  useLayer,
   usePreventBodyScroll,
-  useRootAriaHidden
+  useRootAriaHidden,
+  useVisibilityState
 };

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

@@ -14,15 +14,14 @@ const dropdown = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dro
     },
     selectors: {
       "&[data-open]": {
-        transform: "translate(0, 0)",
+        transform: "scale(1)",
         opacity: 1
       }
     },
     // Apply the animation only if the user has not requested reduced motion
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
-        // transform: 'scale(0.9)',
-        transform: "translateY(var(--spacing))",
+        transform: "scale(0.95)",
         transition: "opacity 80ms linear, transform 80ms",
         opacity: 0
       }

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

@@ -13,15 +13,14 @@ const dropdown = makeComponentTheme("dropdown", {
     },
     selectors: {
       "&[data-open]": {
-        transform: "translate(0, 0)",
+        transform: "scale(1)",
         opacity: 1
       }
     },
     // Apply the animation only if the user has not requested reduced motion
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
-        // transform: 'scale(0.9)',
-        transform: "translateY(var(--spacing))",
+        transform: "scale(0.95)",
         transition: "opacity 80ms linear, transform 80ms",
         opacity: 0
       }

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

@@ -6,7 +6,6 @@ const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs")
 const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/select.css.ts", "@blockle/blocks");
 const select = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("select", {
-  // wrapper: style({}),
   select: styles_lib_css_style_style_cjs.style([{
     color: "text",
     padding: "large",
@@ -24,11 +23,21 @@ const select = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("selec
       boxShadow: `${styles_lib_theme_vars_css_cjs.vars.shadow.small}, ${styles_lib_theme_vars_css_cjs.vars.focus.boxShadow}`
     }
   }, styles_themes_momotaro_components_helpers_css_cjs.focusable]),
+  variants: {
+    variant: {
+      outline: styles_lib_css_style_style_cjs.style({
+        borderWidth: "small",
+        borderStyle: "solid",
+        borderColor: "primary"
+      }),
+      solid: styles_lib_css_style_style_cjs.style({})
+    }
+  },
   icon: styles_lib_css_style_style_cjs.style({
     paddingInline: "large"
   }),
   defaultVariants: {
-    variant: "outline"
+    variant: "solid"
   }
 });
 fileScope.endFileScope();

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

@@ -5,7 +5,6 @@ import { vars } from "../../../lib/theme/vars.css.mjs";
 import { focusable } from "./helpers.css.mjs";
 setFileScope("src/themes/momotaro/components/select.css.ts", "@blockle/blocks");
 const select = makeComponentTheme("select", {
-  // wrapper: style({}),
   select: style([{
     color: "text",
     padding: "large",
@@ -23,11 +22,21 @@ const select = makeComponentTheme("select", {
       boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
     }
   }, focusable]),
+  variants: {
+    variant: {
+      outline: style({
+        borderWidth: "small",
+        borderStyle: "solid",
+        borderColor: "primary"
+      }),
+      solid: style({})
+    }
+  },
   icon: style({
     paddingInline: "large"
   }),
   defaultVariants: {
-    variant: "outline"
+    variant: "solid"
   }
 });
 endFileScope();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -34,6 +34,7 @@
       "import": "./dist/themes/momotaro.mjs",
       "require": "./dist/themes/momotaro.cjs"
     },
+    "./dist/style.css": "./dist/style.css",
     "./package.json": "./package.json"
   },
   "main": "./dist/index.cjs",
@@ -59,6 +60,7 @@
     "string-width": "^4.2.2"
   },
   "dependencies": {
+    "@storybook/test": "^8.0.2",
     "@vanilla-extract/css": "^1.14.1",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/sprinkles": "^1.6.1",
@@ -69,41 +71,39 @@
     "@changesets/cli": "^2.27.1",
     "@crackle/cli": "^0.15.2",
     "@crackle/core": "^0.33.1",
-    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-a11y": "^8.0.2",
     "@storybook/addon-coverage": "^1.0.1",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-interactions": "^8.0.2",
+    "@storybook/addon-links": "^8.0.2",
     "@storybook/addons": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/blocks": "^8.0.2",
+    "@storybook/react": "^8.0.2",
+    "@storybook/react-vite": "^8.0.2",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "@types/react": "^18.2.60",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
-    "@vanilla-extract/vite-plugin": "^4.0.4",
-    "@vitest/coverage-v8": "^1.3.1",
-    "autoprefixer": "^10.4.17",
+    "@testing-library/react": "^14.2.2",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "@vanilla-extract/vite-plugin": "^4.0.6",
+    "@vitest/coverage-v8": "^1.4.0",
+    "autoprefixer": "^10.4.18",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unicorn": "^51.0.1",
     "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
-    "storybook": "^7.6.17",
-    "typescript": "^5.3.3",
-    "vitest": "^1.3.1"
+    "storybook": "^8.0.2",
+    "typescript": "^5.4.2",
+    "vitest": "^1.4.0"
   },
   "packageManager": "yarn@1.22.19"
 }