@blockle/blocks 0.11.3 → 0.12.0

package/dist/index.cjs

@@ -152,19 +152,19 @@ const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
     };
   }, [ref, onClickOutside, enabled]);
 };
-function getDropdownPosition(align, anchorRef, dropdownRef) {
-  if (!anchorRef.current || !dropdownRef.current) {
+function getDopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
   }
-  dropdownRef.current.style.transform = "none";
-  dropdownRef.current.style.transitionDuration = "0s";
+  popoverRef.current.style.transform = "none";
+  popoverRef.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 popoverRect = popoverRef.current.getBoundingClientRect();
+  const popoverStyles = getComputedStyle(popoverRef.current);
+  const marginTop = Number.parseFloat(popoverStyles.getPropertyValue("margin-top"));
+  const marginRight = Number.parseFloat(popoverStyles.getPropertyValue("margin-right"));
+  const marginBottom = Number.parseFloat(popoverStyles.getPropertyValue("margin-bottom"));
+  const marginLeft = Number.parseFloat(popoverStyles.getPropertyValue("margin-left"));
   const marginY = marginTop + marginBottom;
   const marginX = marginRight + marginLeft;
   const docHeight = document.documentElement.clientHeight;
@@ -173,30 +173,30 @@ function getDropdownPosition(align, anchorRef, dropdownRef) {
   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 = "";
+  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
+  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
+  const leftPosition = anchorRect.left - popoverRect.width;
+  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
+  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
+  popoverRef.current.style.transform = "";
+  popoverRef.current.style.transitionDuration = "";
   switch (align) {
     case "top": {
-      return topPosition > 0 ? [offsetX, anchorTop - dropdownRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
     }
     case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - dropdownRect.height - marginY];
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
     }
     case "left": {
-      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - dropdownRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
     }
     case "right": {
-      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - dropdownRect.width - marginX, offsetY];
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
     }
   }
 }
-const Dropdown = ({
+const Popover = ({
   align = "bottom",
   anchorElement,
   children,
@@ -205,23 +205,18 @@ const Dropdown = ({
   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
-  );
+  const popoverRef = react.useRef(null);
+  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("popover", { base: true }, false);
   react.useLayoutEffect(() => {
     if (!visible) {
       return;
     }
-    const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+    const position2 = getDopoverPosition(align, anchorElement, popoverRef);
     setPosition({ x: position2[0], y: position2[1] });
   }, [align, anchorElement, visible]);
   react.useEffect(() => {
@@ -229,7 +224,7 @@ const Dropdown = ({
       return;
     }
     function handleResize() {
-      const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+      const position2 = getDopoverPosition(align, anchorElement, popoverRef);
       setPosition({ x: position2[0], y: position2[1] });
     }
     window.addEventListener("resize", handleResize);
@@ -242,13 +237,13 @@ const Dropdown = ({
   styles_components_overlay_Dialog_Dialog_cjs.useIsomorphicLayoutEffect(() => {
     var _a;
     if (!open) {
-      (_a = dropdownRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      (_a = popoverRef.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", "");
+        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
       });
     });
     return () => {
@@ -264,12 +259,12 @@ const Dropdown = ({
     if (open) {
       return;
     }
-    if (!styles_components_overlay_Dialog_Dialog_cjs.hasAnimationDuration(dropdownRef.current)) {
+    if (!styles_components_overlay_Dialog_Dialog_cjs.hasAnimationDuration(popoverRef.current)) {
       hide();
     }
   }, [hide, open]);
   styles_components_overlay_Dialog_Dialog_cjs.useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(dropdownRef, onRequestClose, { enabled: visible });
+  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
   if (!visible) {
     return null;
   }
@@ -277,7 +272,7 @@ const Dropdown = ({
   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,
+      ref: popoverRef,
       "data-open": dataOpen,
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
@@ -285,10 +280,6 @@ const Dropdown = ({
       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
       },
@@ -297,10 +288,19 @@ const Dropdown = ({
     }
   ) });
 };
-const Tooltip = ({ align = "top", children, label }) => {
+const Tooltip = ({
+  align = "top",
+  children,
+  label,
+  colorScheme
+}) => {
   const id = react.useId();
   const ref = react.useRef(null);
   const [open, setOpen] = react.useState(false);
+  const tooltipClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("tooltip", {
+    base: true,
+    variants: { colorScheme }
+  });
   react.useEffect(() => {
     const element = ref.current;
     if (!element) {
@@ -336,7 +336,7 @@ const Tooltip = ({ align = "top", children, label }) => {
       ["aria-describedby"]: open ? id : void 0
     }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      Dropdown,
+      Popover,
       {
         id,
         role: "tooltip",
@@ -346,6 +346,7 @@ const Tooltip = ({ align = "top", children, label }) => {
           setOpen(false);
         },
         align,
+        className: tooltipClassName,
         children: label
       }
     )

package/dist/index.mjs

@@ -154,19 +154,19 @@ const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
     };
   }, [ref, onClickOutside, enabled]);
 };
-function getDropdownPosition(align, anchorRef, dropdownRef) {
-  if (!anchorRef.current || !dropdownRef.current) {
+function getDopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
   }
-  dropdownRef.current.style.transform = "none";
-  dropdownRef.current.style.transitionDuration = "0s";
+  popoverRef.current.style.transform = "none";
+  popoverRef.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 popoverRect = popoverRef.current.getBoundingClientRect();
+  const popoverStyles = getComputedStyle(popoverRef.current);
+  const marginTop = Number.parseFloat(popoverStyles.getPropertyValue("margin-top"));
+  const marginRight = Number.parseFloat(popoverStyles.getPropertyValue("margin-right"));
+  const marginBottom = Number.parseFloat(popoverStyles.getPropertyValue("margin-bottom"));
+  const marginLeft = Number.parseFloat(popoverStyles.getPropertyValue("margin-left"));
   const marginY = marginTop + marginBottom;
   const marginX = marginRight + marginLeft;
   const docHeight = document.documentElement.clientHeight;
@@ -175,30 +175,30 @@ function getDropdownPosition(align, anchorRef, dropdownRef) {
   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 = "";
+  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
+  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
+  const leftPosition = anchorRect.left - popoverRect.width;
+  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
+  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
+  popoverRef.current.style.transform = "";
+  popoverRef.current.style.transitionDuration = "";
   switch (align) {
     case "top": {
-      return topPosition > 0 ? [offsetX, anchorTop - dropdownRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
     }
     case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - dropdownRect.height - marginY];
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
     }
     case "left": {
-      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - dropdownRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
     }
     case "right": {
-      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - dropdownRect.width - marginX, offsetY];
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
     }
   }
 }
-const Dropdown = ({
+const Popover = ({
   align = "bottom",
   anchorElement,
   children,
@@ -207,23 +207,18 @@ const Dropdown = ({
   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
-  );
+  const popoverRef = useRef(null);
+  const containerClassName = useComponentStyles("popover", { base: true }, false);
   useLayoutEffect(() => {
     if (!visible) {
       return;
     }
-    const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+    const position2 = getDopoverPosition(align, anchorElement, popoverRef);
     setPosition({ x: position2[0], y: position2[1] });
   }, [align, anchorElement, visible]);
   useEffect(() => {
@@ -231,7 +226,7 @@ const Dropdown = ({
       return;
     }
     function handleResize() {
-      const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+      const position2 = getDopoverPosition(align, anchorElement, popoverRef);
       setPosition({ x: position2[0], y: position2[1] });
     }
     window.addEventListener("resize", handleResize);
@@ -244,13 +239,13 @@ const Dropdown = ({
   useIsomorphicLayoutEffect(() => {
     var _a;
     if (!open) {
-      (_a = dropdownRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      (_a = popoverRef.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", "");
+        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
       });
     });
     return () => {
@@ -266,12 +261,12 @@ const Dropdown = ({
     if (open) {
       return;
     }
-    if (!hasAnimationDuration(dropdownRef.current)) {
+    if (!hasAnimationDuration(popoverRef.current)) {
       hide();
     }
   }, [hide, open]);
   useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(dropdownRef, onRequestClose, { enabled: visible });
+  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
   if (!visible) {
     return null;
   }
@@ -279,7 +274,7 @@ const Dropdown = ({
   return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(
     Box,
     {
-      ref: dropdownRef,
+      ref: popoverRef,
       "data-open": dataOpen,
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
@@ -287,10 +282,6 @@ const Dropdown = ({
       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
       },
@@ -299,10 +290,19 @@ const Dropdown = ({
     }
   ) });
 };
-const Tooltip = ({ align = "top", children, label }) => {
+const Tooltip = ({
+  align = "top",
+  children,
+  label,
+  colorScheme
+}) => {
   const id = useId();
   const ref = useRef(null);
   const [open, setOpen] = useState(false);
+  const tooltipClassName = useComponentStyles("tooltip", {
+    base: true,
+    variants: { colorScheme }
+  });
   useEffect(() => {
     const element = ref.current;
     if (!element) {
@@ -338,7 +338,7 @@ const Tooltip = ({ align = "top", children, label }) => {
       ["aria-describedby"]: open ? id : void 0
     }),
     /* @__PURE__ */ jsx(
-      Dropdown,
+      Popover,
       {
         id,
         role: "tooltip",
@@ -348,6 +348,7 @@ const Tooltip = ({ align = "top", children, label }) => {
           setOpen(false);
         },
         align,
+        className: tooltipClassName,
         children: label
       }
     )

package/dist/momotaro.chunk.d.ts

@@ -376,11 +376,8 @@ type SwitchTheme = {
     base: string;
     slider: string;
 };
-type DropdownTheme = {
+type PopoverTheme = {
     base: string;
-    variants: {
-        variant: 'solid' | 'outline';
-    };
 };
 type SelectTheme = {
     wrapper?: string;
@@ -400,21 +397,28 @@ type SliderTheme = {
         colorScheme: 'primary' | 'secondary';
     };
 };
+type TooltipTheme = {
+    base: string;
+    variants: {
+        colorScheme: 'primary' | 'secondary';
+    };
+};
 type ComponentThemes = {
     button: ButtonTheme;
     checkbox: CheckboxTheme;
     dialog: DialogTheme;
     divider: DividerTheme;
-    dropdown: DropdownTheme;
     input: InputTheme;
     label: LabelTheme;
     link: LinkTheme;
+    popover: PopoverTheme;
     progress: ProgressTheme;
     radio: RadioTheme;
     select: SelectTheme;
+    slider: SliderTheme;
     spinner: SpinnerTheme;
     switch: SwitchTheme;
-    slider: SliderTheme;
+    tooltip: TooltipTheme;
 };
 /**
  * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
@@ -1069,7 +1073,7 @@ type DialogProps = {
 };
 declare const Dialog: React.FC<DialogProps>;
 
-type DropdownProps = {
+type PopoverProps = {
     align?: 'top' | 'bottom' | 'left' | 'right';
     anchorElement: React.RefObject<HTMLElement>;
     children: React.ReactNode;
@@ -1078,14 +1082,14 @@ type DropdownProps = {
     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'];
+    align?: PopoverProps['align'];
     children: ReactElement;
     label: React.ReactNode;
+    colorScheme?: TooltipTheme['variants']['colorScheme'];
 };
 declare const Tooltip: React.FC<TooltipProps>;
 

package/dist/styles/themes/momotaro/components/index.cjs

@@ -3,30 +3,32 @@ const styles_themes_momotaro_components_button_css_cjs = require("./button.css.c
 const styles_themes_momotaro_components_checkbox_css_cjs = require("./checkbox.css.cjs");
 const styles_themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
 const styles_themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
-const styles_themes_momotaro_components_dropdown_css_cjs = require("./dropdown.css.cjs");
 const styles_themes_momotaro_components_input_css_cjs = require("./input.css.cjs");
 const styles_themes_momotaro_components_label_css_cjs = require("./label.css.cjs");
 const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
+const styles_themes_momotaro_components_popover_css_cjs = require("./popover.css.cjs");
 const styles_themes_momotaro_components_progress_css_cjs = require("./progress.css.cjs");
 const styles_themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
 const styles_themes_momotaro_components_select_css_cjs = require("./select.css.cjs");
 const styles_themes_momotaro_components_slider_css_cjs = require("./slider.css.cjs");
 const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
 const styles_themes_momotaro_components_switch_css_cjs = require("./switch.css.cjs");
+const styles_themes_momotaro_components_tooltip_css_cjs = require("./tooltip.css.cjs");
 const components = {
   button: styles_themes_momotaro_components_button_css_cjs.button,
   checkbox: styles_themes_momotaro_components_checkbox_css_cjs.checkbox,
   dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog,
   divider: styles_themes_momotaro_components_divider_css_cjs.divider,
-  dropdown: styles_themes_momotaro_components_dropdown_css_cjs.dropdown,
   input: styles_themes_momotaro_components_input_css_cjs.input,
   label: styles_themes_momotaro_components_label_css_cjs.label,
   link: styles_themes_momotaro_components_link_css_cjs.link,
+  popover: styles_themes_momotaro_components_popover_css_cjs.popover,
   progress: styles_themes_momotaro_components_progress_css_cjs.progress,
   radio: styles_themes_momotaro_components_radio_css_cjs.radio,
   select: styles_themes_momotaro_components_select_css_cjs.select,
+  slider: styles_themes_momotaro_components_slider_css_cjs.slider,
   spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
   switch: styles_themes_momotaro_components_switch_css_cjs.switchTheme,
-  slider: styles_themes_momotaro_components_slider_css_cjs.slider
+  tooltip: styles_themes_momotaro_components_tooltip_css_cjs.tooltip
 };
 exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -2,31 +2,33 @@ import { button } from "./button.css.mjs";
 import { checkbox } from "./checkbox.css.mjs";
 import { dialog } from "./dialog.css.mjs";
 import { divider } from "./divider.css.mjs";
-import { dropdown } from "./dropdown.css.mjs";
 import { input } from "./input.css.mjs";
 import { label } from "./label.css.mjs";
 import { link } from "./link.css.mjs";
+import { popover } from "./popover.css.mjs";
 import { progress } from "./progress.css.mjs";
 import { radio } from "./radio.css.mjs";
 import { select } from "./select.css.mjs";
 import { slider } from "./slider.css.mjs";
 import { spinner } from "./spinner.css.mjs";
 import { switchTheme } from "./switch.css.mjs";
+import { tooltip } from "./tooltip.css.mjs";
 const components = {
   button,
   checkbox,
   dialog,
   divider,
-  dropdown,
   input,
   label,
   link,
+  popover,
   progress,
   radio,
   select,
+  slider,
   spinner,
   switch: switchTheme,
-  slider
+  tooltip
 };
 export {
   components

package/dist/styles/themes/momotaro/components/{dropdown.css.cjs → popover.css.cjs}

@@ -2,16 +2,15 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/dropdown.css.ts", "@blockle/blocks");
-const dropdown = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dropdown", {
+fileScope.setFileScope("src/themes/momotaro/components/popover.css.ts", "@blockle/blocks");
+const popover = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("popover", {
   base: styles_lib_css_style_style_cjs.style({
     backgroundColor: "white",
     borderRadius: "small",
     boxShadow: "medium",
     padding: "medium",
-    vars: {
-      "--spacing": "0.5rem"
-    },
+    margin: "small",
+    // Space between the popover and the anchor element
     selectors: {
       "&[data-open]": {
         transform: "scale(1)",
@@ -26,28 +25,7 @@ const dropdown = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dro
         opacity: 0
       }
     }
-  }),
-  variants: {
-    variant: {
-      solid: styles_lib_css_style_style_cjs.style({
-        backgroundColor: "white",
-        border: "none",
-        boxShadow: "medium",
-        color: "black",
-        padding: "medium"
-      }),
-      outline: styles_lib_css_style_style_cjs.style({
-        backgroundColor: "transparent",
-        border: "1px solid black",
-        boxShadow: "none",
-        color: "black",
-        padding: "medium"
-      })
-    }
-  },
-  defaultVariants: {
-    variant: "solid"
-  }
+  })
 });
 fileScope.endFileScope();
-exports.dropdown = dropdown;
+exports.popover = popover;

package/dist/styles/themes/momotaro/components/{dropdown.css.mjs → popover.css.mjs}

@@ -1,16 +1,15 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "../../../lib/css/style/style.mjs";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-setFileScope("src/themes/momotaro/components/dropdown.css.ts", "@blockle/blocks");
-const dropdown = makeComponentTheme("dropdown", {
+setFileScope("src/themes/momotaro/components/popover.css.ts", "@blockle/blocks");
+const popover = makeComponentTheme("popover", {
   base: style({
     backgroundColor: "white",
     borderRadius: "small",
     boxShadow: "medium",
     padding: "medium",
-    vars: {
-      "--spacing": "0.5rem"
-    },
+    margin: "small",
+    // Space between the popover and the anchor element
     selectors: {
       "&[data-open]": {
         transform: "scale(1)",
@@ -25,30 +24,9 @@ const dropdown = makeComponentTheme("dropdown", {
         opacity: 0
       }
     }
-  }),
-  variants: {
-    variant: {
-      solid: style({
-        backgroundColor: "white",
-        border: "none",
-        boxShadow: "medium",
-        color: "black",
-        padding: "medium"
-      }),
-      outline: style({
-        backgroundColor: "transparent",
-        border: "1px solid black",
-        boxShadow: "none",
-        color: "black",
-        padding: "medium"
-      })
-    }
-  },
-  defaultVariants: {
-    variant: "solid"
-  }
+  })
 });
 endFileScope();
 export {
-  dropdown
+  popover
 };

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

@@ -0,0 +1,30 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/tooltip.css.ts", "@blockle/blocks");
+const tooltip = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("tooltip", {
+  base: styles_lib_css_style_style_cjs.style({
+    backgroundColor: "primary",
+    padding: "small"
+  }),
+  variants: {
+    colorScheme: {
+      primary: styles_lib_css_style_style_cjs.style({
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.1)",
+        color: "white"
+      }),
+      secondary: styles_lib_css_style_style_cjs.style({
+        backgroundColor: "rgba(255, 255, 255, 0.8)",
+        boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
+        color: "black"
+      })
+    }
+  },
+  defaultVariants: {
+    colorScheme: "primary"
+  }
+});
+fileScope.endFileScope();
+exports.tooltip = tooltip;

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

@@ -0,0 +1,31 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "../../../lib/css/style/style.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+setFileScope("src/themes/momotaro/components/tooltip.css.ts", "@blockle/blocks");
+const tooltip = makeComponentTheme("tooltip", {
+  base: style({
+    backgroundColor: "primary",
+    padding: "small"
+  }),
+  variants: {
+    colorScheme: {
+      primary: style({
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.1)",
+        color: "white"
+      }),
+      secondary: style({
+        backgroundColor: "rgba(255, 255, 255, 0.8)",
+        boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
+        color: "black"
+      })
+    }
+  },
+  defaultVariants: {
+    colorScheme: "primary"
+  }
+});
+endFileScope();
+export {
+  tooltip
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",