@blockle/blocks 0.8.8 → 0.8.9

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

@@ -0,0 +1,55 @@
+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", "blocks");
+const dropdown = makeComponentTheme("dropdown", {
+  base: style({
+    backgroundColor: "white",
+    borderRadius: "small",
+    boxShadow: "medium",
+    padding: "medium",
+    vars: {
+      "--spacing": "0.5rem"
+    },
+    selectors: {
+      "&[data-open]": {
+        transform: "translate(0, 0)",
+        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))",
+        transition: "opacity 80ms linear, transform 80ms",
+        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
+};

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

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts", "blocks");
 const focusRingColor = css.createVar("focusRingColor");
 const focusable = css.style({
   ":focus-visible": {

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

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createVar, style, fallbackVar } from "@vanilla-extract/css";
 import { vars } from "../../../lib/theme/vars.css.mjs";
-setFileScope("src/themes/momotaro/components/helpers.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/helpers.css.ts", "blocks");
 const focusRingColor = createVar("focusRingColor");
 const focusable = style({
   ":focus-visible": {

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

@@ -3,6 +3,7 @@ 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");
@@ -21,6 +22,7 @@ const components = {
   progress: styles_themes_momotaro_components_progress_css_cjs.progress,
   radio: styles_themes_momotaro_components_radio_css_cjs.radio,
   spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
+  dropdown: styles_themes_momotaro_components_dropdown_css_cjs.dropdown,
   switch: styles_themes_momotaro_components_switch_css_cjs.switchTheme
 };
 exports.components = components;

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

@@ -2,6 +2,7 @@ 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";
@@ -20,6 +21,7 @@ const components = {
   progress,
   radio,
   spinner,
+  dropdown,
   switch: switchTheme
 };
 export {

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

@@ -4,7 +4,7 @@ const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/input.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/input.css.ts", "blocks");
 const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input", {
   input: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     color: "text",

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

@@ -3,7 +3,7 @@ import { style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { vars } from "../../../lib/theme/vars.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-setFileScope("src/themes/momotaro/components/input.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/input.css.ts", "blocks");
 const input = makeComponentTheme("input", {
   input: style([atoms({
     color: "text",

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

@@ -3,7 +3,7 @@ const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/label.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/label.css.ts", "blocks");
 const label = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("label", {
   base: css.style({}, "label_base"),
   variants: {

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

@@ -2,7 +2,7 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { vars } from "../../../lib/theme/vars.css.mjs";
-setFileScope("src/themes/momotaro/components/label.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/label.css.ts", "blocks");
 const label = makeComponentTheme("label", {
   base: style({}, "label_base"),
   variants: {

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

@@ -4,7 +4,7 @@ const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/link.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/link.css.ts", "blocks");
 const link = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("link", {
   base: css.style([{
     outline: "none",

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

@@ -3,7 +3,7 @@ import { style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { focusable } from "./helpers.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-setFileScope("src/themes/momotaro/components/link.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/link.css.ts", "blocks");
 const link = makeComponentTheme("link", {
   base: style([{
     outline: "none",

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

@@ -4,7 +4,7 @@ const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/progress.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/progress.css.ts", "blocks");
 const indeterminateAnimation = css.keyframes({
   "0%": {
     transform: "translateX(-100%)"

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

@@ -3,7 +3,7 @@ import { keyframes, style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { vars } from "../../../lib/theme/vars.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-setFileScope("src/themes/momotaro/components/progress.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/progress.css.ts", "blocks");
 const indeterminateAnimation = keyframes({
   "0%": {
     transform: "translateX(-100%)"

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

@@ -6,7 +6,7 @@ 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");
 const styles_themes_momotaro_components_transitions_cjs = require("./transitions.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/radio.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/radio.css.ts", "blocks");
 const radio = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("radio", {
   base: css.style([{
     display: "flex",

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

@@ -5,7 +5,7 @@ import { vars } from "../../../lib/theme/vars.css.mjs";
 import { focusable } from "./helpers.css.mjs";
 import { bounceOut } from "./transitions.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-setFileScope("src/themes/momotaro/components/radio.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/radio.css.ts", "blocks");
 const radio = makeComponentTheme("radio", {
   base: style([{
     display: "flex",

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

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts", "blocks");
 const spinAnimation = css.keyframes({
   "0%": {
     transform: "rotate(0deg)"

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

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { keyframes, style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-setFileScope("src/themes/momotaro/components/spinner.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/spinner.css.ts", "blocks");
 const spinAnimation = keyframes({
   "0%": {
     transform: "rotate(0deg)"

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

@@ -5,7 +5,7 @@ const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 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/switch.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/switch.css.ts", "blocks");
 const activeScaleFactor = css.createVar("activeScaleFactor");
 const switchTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("switch", {
   base: styles_lib_css_style_style_cjs.style([{

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

@@ -4,7 +4,7 @@ import { style } from "../../../lib/css/style/style.mjs";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { vars } from "../../../lib/theme/vars.css.mjs";
 import { focusable } from "./helpers.css.mjs";
-setFileScope("src/themes/momotaro/components/switch.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/switch.css.ts", "blocks");
 const activeScaleFactor = createVar("activeScaleFactor");
 const switchTheme = makeComponentTheme("switch", {
   base: style([{

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+

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

@@ -3,7 +3,7 @@ const fileScope = require("@vanilla-extract/css/fileScope");
 const styles_lib_theme_makeTheme_cjs = require("../../lib/theme/makeTheme.cjs");
 const styles_themes_momotaro_components_index_cjs = require("./components/index.cjs");
 const styles_themes_momotaro_tokens_css_cjs = require("./tokens.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts", "blocks");
 const momotaro = styles_lib_theme_makeTheme_cjs.makeTheme({
   name: "momotaro",
   tokens: styles_themes_momotaro_tokens_css_cjs.tokens,

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

@@ -2,7 +2,7 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeTheme } from "../../lib/theme/makeTheme.mjs";
 import { components } from "./components/index.mjs";
 import { tokens } from "./tokens.css.mjs";
-setFileScope("src/themes/momotaro/momotaro.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/momotaro.css.ts", "blocks");
 const momotaro = makeTheme({
   name: "momotaro",
   tokens,

package/dist/styles/themes/momotaro/tokens.css.cjs

@@ -1,6 +1,6 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-fileScope.setFileScope("src/themes/momotaro/tokens.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/tokens.css.ts", "blocks");
 const tokens = {
   border: {
     radius: {

package/dist/styles/themes/momotaro/tokens.css.mjs

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-setFileScope("src/themes/momotaro/tokens.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/tokens.css.ts", "blocks");
 const tokens = {
   border: {
     radius: {

package/dist/themes/momotaro.d.mts

@@ -0,0 +1 @@
+export { momotaro } from '../momotaro.chunk.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -11,17 +11,26 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.mts",
+        "require": "./dist/index.d.ts"
+      },
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
     "./reset.css": {
-      "types": "./dist/reset.css.d.ts",
+      "types": {
+        "import": "./dist/reset.css.d.mts",
+        "require": "./dist/reset.css.d.ts"
+      },
       "import": "./dist/reset.css.mjs",
       "require": "./dist/reset.css.cjs"
     },
     "./themes/momotaro": {
-      "types": "./dist/themes/momotaro.d.ts",
+      "types": {
+        "import": "./dist/themes/momotaro.d.mts",
+        "require": "./dist/themes/momotaro.d.ts"
+      },
       "import": "./dist/themes/momotaro.mjs",
       "require": "./dist/themes/momotaro.cjs"
     },
@@ -41,59 +50,60 @@
     "coverage": "vitest run --coverage",
     "fix": "crackle fix",
     "lint": "eslint .",
+    "release": "yarn ts && yarn test && yarn build && changeset publish",
     "storybook": "storybook dev -p 6006 --no-open",
     "test": "vitest",
-    "ts": "tsc --noemit --project ./tsconfig.json",
-    "release": "yarn ts && yarn test && yarn build && changeset publish"
+    "ts": "tsc --noemit --project ./tsconfig.json"
   },
   "resolutions": {
     "string-width": "^4.2.2"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/css": "^1.14.0",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/sprinkles": "^1.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.26.2",
-    "@crackle/cli": "^0.12.4",
-    "@crackle/core": "^0.28.0",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-coverage": "^0.0.9",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
+    "@changesets/cli": "^2.27.1",
+    "@crackle/cli": "^0.13.0",
+    "@crackle/core": "^0.31.0",
+    "@storybook/addon-a11y": "^7.6.9",
+    "@storybook/addon-coverage": "^1.0.0",
+    "@storybook/addon-essentials": "^7.6.9",
+    "@storybook/addon-interactions": "^7.6.9",
+    "@storybook/addon-links": "^7.6.9",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/blocks": "^7.6.9",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
+    "@storybook/react": "^7.6.9",
+    "@storybook/react-vite": "^7.6.9",
     "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
-    "@types/react": "^18.2.34",
-    "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@vanilla-extract/vite-plugin": "^3.8.2",
-    "@vitest/coverage-v8": "^0.34.6",
-    "autoprefixer": "^10.4.16",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "@vanilla-extract/vite-plugin": "^3.9.3",
+    "@vitest/coverage-v8": "^1.2.1",
+    "autoprefixer": "^10.4.17",
     "cross-env": "^7.0.3",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jest": "^27.6.3",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-unicorn": "^49.0.0",
-    "jsdom": "^22.1.0",
-    "prettier": "^3.0.3",
+    "eslint-plugin-unicorn": "^50.0.1",
+    "jsdom": "^23.2.0",
+    "prettier": "^3.2.4",
     "prop-types": "^15.8.1",
-    "storybook": "^7.5.3",
-    "typescript": "^5.2.2",
-    "vitest": "^0.34.6"
+    "storybook": "^7.6.9",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.1"
   },
   "packageManager": "yarn@1.22.19"
 }