@blockle/blocks 0.9.1 → 0.11.0

package/dist/index.cjs

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const styles_lib_css_atoms_breakpoints_cjs = require("./styles/lib/css/atoms/breakpoints.cjs");
-const styles_lib_css_style_style_cjs = require("./styles/lib/css/style/style.cjs");
-const styles_lib_theme_makeComponentTheme_cjs = require("./styles/lib/theme/makeComponentTheme.cjs");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
 const styles_lib_theme_makeTheme_cjs = require("./styles/lib/theme/makeTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("./styles/lib/theme/vars.css.cjs");
 const styles_components_display_Divider_Divider_cjs = require("./styles/components/display/Divider/Divider.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const styles_components_form_Button_Button_cjs = require("./styles/components/form/Button/Button.cjs");
@@ -14,11 +12,46 @@ const styles_components_form_Checkbox_Checkbox_cjs = require("./styles/component
 const styles_components_form_Input_Input_cjs = require("./styles/components/form/Input/Input.cjs");
 const styles_components_form_Radio_Radio_cjs = require("./styles/components/form/Radio/Radio.cjs");
 const styles_components_form_Select_Select_cjs = require("./styles/components/form/Select/Select.cjs");
+const styles_components_form_Slider_Slider_cjs = require("./styles/components/form/Slider/Slider.cjs");
 const styles_components_form_Switch_Switch_cjs = require("./styles/components/form/Switch/Switch.cjs");
 const styles_components_other_BlocksProvider_BlocksProvider_cjs = require("./styles/components/other/BlocksProvider/BlocksProvider.cjs");
 const styles_components_overlay_Dialog_Dialog_cjs = require("./styles/components/overlay/Dialog/Dialog.cjs");
 const styles_components_typography_Heading_Heading_cjs = require("./styles/components/typography/Heading/Heading.cjs");
 const styles_components_typography_Text_Text_cjs = require("./styles/components/typography/Text/Text.cjs");
+const breakpoints = {
+  mobile: 0,
+  tablet: 740,
+  desktop: 992,
+  wide: 1200
+};
+const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
+function style(props) {
+  const styleRule = {};
+  const atomClassNames = [];
+  if (Array.isArray(props)) {
+    return props.map((rule) => {
+      if (typeof rule === "string") {
+        return rule;
+      }
+      return style(rule);
+    }).join(" ");
+  }
+  for (const [name, value] of Object.entries(props)) {
+    if (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
+      try {
+        atomClassNames.push(styles_lib_css_atoms_sprinkles_css_cjs.atoms({ [name]: value }));
+      } catch {
+        styleRule[name] = value;
+      }
+    } else {
+      styleRule[name] = value;
+    }
+  }
+  return css.style([styleRule, ...atomClassNames]);
+}
+function makeComponentTheme(component, componentTheme) {
+  return componentTheme;
+}
 const Progress = react.forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
   const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles(
     "progress",
@@ -135,9 +168,222 @@ const Link = react.forwardRef(function Link2({ asChild, className, children, var
     }
   );
 });
-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;
+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: style2,
+  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: {
+        ...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 = 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.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 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;
@@ -147,7 +393,6 @@ exports.classnames = styles_components_display_Divider_Divider_cjs.classnames;
 exports.createSlottable = styles_components_display_Divider_Divider_cjs.createSlottable;
 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;
 exports.Button = styles_components_form_Button_Button_cjs.Button;
 exports.Spinner = styles_components_form_Button_Button_cjs.Spinner;
 exports.Checkbox = styles_components_form_Checkbox_Checkbox_cjs.Checkbox;
@@ -155,6 +400,7 @@ exports.Label = styles_components_form_Checkbox_Checkbox_cjs.Label;
 exports.Input = styles_components_form_Input_Input_cjs.Input;
 exports.Radio = styles_components_form_Radio_Radio_cjs.Radio;
 exports.Select = styles_components_form_Select_Select_cjs.Select;
+exports.Slider = styles_components_form_Slider_Slider_cjs.Slider;
 exports.Switch = styles_components_form_Switch_Switch_cjs.Switch;
 exports.BlocksProvider = styles_components_other_BlocksProvider_BlocksProvider_cjs.BlocksProvider;
 exports.Dialog = styles_components_overlay_Dialog_Dialog_cjs.Dialog;
@@ -169,3 +415,7 @@ exports.Inline = Inline;
 exports.Link = Link;
 exports.Progress = Progress;
 exports.Stack = Stack;
+exports.Tooltip = Tooltip;
+exports.breakpointQuery = breakpointQuery;
+exports.makeComponentTheme = makeComponentTheme;
+exports.style = style;

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

@@ -1,25 +1,59 @@
 'use client';
 
-import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
-import { style } from "./styles/lib/css/style/style.mjs";
-import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
+import { style as style$1 } from "@vanilla-extract/css";
+import { atoms } from "./styles/lib/css/atoms/sprinkles.css.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";
 import { Radio } from "./styles/components/form/Radio/Radio.mjs";
 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 breakpoints = {
+  mobile: 0,
+  tablet: 740,
+  desktop: 992,
+  wide: 1200
+};
+const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
+function style(props) {
+  const styleRule = {};
+  const atomClassNames = [];
+  if (Array.isArray(props)) {
+    return props.map((rule) => {
+      if (typeof rule === "string") {
+        return rule;
+      }
+      return style(rule);
+    }).join(" ");
+  }
+  for (const [name, value] of Object.entries(props)) {
+    if (atoms.properties.has(name)) {
+      try {
+        atomClassNames.push(atoms({ [name]: value }));
+      } catch {
+        styleRule[name] = value;
+      }
+    } else {
+      styleRule[name] = value;
+    }
+  }
+  return style$1([styleRule, ...atomClassNames]);
+}
+function makeComponentTheme(component, componentTheme) {
+  return componentTheme;
+}
 const Progress = forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
   const containerClassName = useComponentStyles(
     "progress",
@@ -136,6 +170,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,
@@ -152,11 +401,13 @@ export {
   Progress,
   Radio,
   Select,
+  Slider,
   Slot,
   Spinner,
   Stack,
   Switch,
   Text,
+  Tooltip,
   atoms,
   breakpointQuery,
   classnames,