@blockle/blocks 0.11.2 → 0.12.0

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.2",
+  "version": "0.12.0",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -105,7 +105,9 @@
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.14",
-    "react": "^18"
+    "@vanilla-extract/sprinkles": "^1.6",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "packageManager": "yarn@1.22.19"
 }