@blockle/blocks 0.2.3 → 0.3.0

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

@@ -0,0 +1,48 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+setFileScope("src/themes/momotaro/components/link.css.ts?used", "blocks");
+const link = makeComponentTheme({
+  type: "link",
+  base: style({
+    outline: "none",
+    border: "none",
+    textDecoration: "none",
+    background: "transparent",
+    ":hover": {
+      textDecoration: "underline"
+    },
+    ":focus-visible": {
+      textDecoration: "underline"
+    },
+    cursor: "pointer"
+  }, "link_base"),
+  variants: {
+    variant: {
+      inherit: style({
+        color: "inherit",
+        fontWeight: "inherit"
+      }, "link_variants_variant_inherit"),
+      primary: atoms({
+        color: "primary",
+        fontWeight: "medium"
+      }),
+      secondary: atoms({
+        color: "secondary",
+        fontWeight: "medium"
+      })
+    },
+    underline: style({
+      textDecoration: "underline"
+    }, "link_variants_underline")
+  },
+  defaultVariants: {
+    variant: "primary",
+    underline: true
+  }
+});
+endFileScope();
+export {
+  link
+};

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

@@ -0,0 +1,44 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts?used", "blocks");
+const spinAnimation = css.keyframes({
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+}, "spinAnimation");
+const spinner = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
+  type: "spinner",
+  base: css.style({
+    aspectRatio: "1 / 1",
+    overflow: "hidden",
+    borderRadius: "50%",
+    borderWidth: "3px",
+    borderStyle: "solid",
+    borderColor: "currentColor transparent currentColor transparent",
+    animation: `${spinAnimation} 1.2s linear infinite`
+  }, "spinner_base"),
+  variants: {
+    // note: colors are handled by atoms
+    size: {
+      small: css.style({
+        width: 16
+      }, "spinner_variants_size_small"),
+      medium: css.style({
+        width: 24
+      }, "spinner_variants_size_medium"),
+      large: css.style({
+        width: 32
+      }, "spinner_variants_size_large")
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+fileScope.endFileScope();
+exports.spinner = spinner;

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

@@ -0,0 +1,45 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { keyframes, style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+setFileScope("src/themes/momotaro/components/spinner.css.ts?used", "blocks");
+const spinAnimation = keyframes({
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+}, "spinAnimation");
+const spinner = makeComponentTheme({
+  type: "spinner",
+  base: style({
+    aspectRatio: "1 / 1",
+    overflow: "hidden",
+    borderRadius: "50%",
+    borderWidth: "3px",
+    borderStyle: "solid",
+    borderColor: "currentColor transparent currentColor transparent",
+    animation: `${spinAnimation} 1.2s linear infinite`
+  }, "spinner_base"),
+  variants: {
+    // note: colors are handled by atoms
+    size: {
+      small: style({
+        width: 16
+      }, "spinner_variants_size_small"),
+      medium: style({
+        width: 24
+      }, "spinner_variants_size_medium"),
+      large: style({
+        width: 32
+      }, "spinner_variants_size_large")
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+endFileScope();
+export {
+  spinner
+};

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

@@ -26,7 +26,7 @@ const tokens = {
     text: "#2D3142",
     textLight: "#9C9EB9",
     textDark: "#4C5980",
-    caution: "#FF9B90",
+    danger: "#FF9B90",
     link: "#7265E3"
   },
   shadow: {
@@ -34,7 +34,10 @@ const tokens = {
     medium: "0px 8px 16px rgba(0, 0, 0, 0.08)",
     large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
   },
-  space: {
+  focus: {
+    boxShadow: "0 0 4px 2px #AF8EFF"
+  },
+  spacing: {
     none: "0px",
     gutter: "28px",
     xsmall: "4px",

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

@@ -25,7 +25,7 @@ const tokens = {
     text: "#2D3142",
     textLight: "#9C9EB9",
     textDark: "#4C5980",
-    caution: "#FF9B90",
+    danger: "#FF9B90",
     link: "#7265E3"
   },
   shadow: {
@@ -33,7 +33,10 @@ const tokens = {
     medium: "0px 8px 16px rgba(0, 0, 0, 0.08)",
     large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
   },
-  space: {
+  focus: {
+    boxShadow: "0 0 4px 2px #AF8EFF"
+  },
+  spacing: {
     none: "0px",
     gutter: "28px",
     xsmall: "4px",

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
   "author": "Niek Saarberg <n.saarberg@gmail.com>",
+  "sideEffects": [
+    "./src/lib/theme/globalTheme.ts",
+    "dist/side-effects/**"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -32,10 +36,18 @@
     "themes/momotaro"
   ],
   "scripts": {
-    "build": "crackle package",
+    "build": "crackle package && node ./temp-use-client-fix.js",
+    "build-storybook": "storybook build",
+    "coverage": "vitest run --coverage",
     "fix": "crackle fix",
+    "lint": "eslint . --resolve-plugins-relative-to /Users/niek/Projects/blockle/blocks/",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "test": "vitest",
     "ts": "tsc --noemit --project ./tsconfig.json"
   },
+  "resolutions": {
+    "string-width": "^4.2.2"
+  },
   "dependencies": {
     "@radix-ui/react-polymorphic": "^0.0.14",
     "@vanilla-extract/css": "^1.13.0",
@@ -47,10 +59,24 @@
   "devDependencies": {
     "@crackle/cli": "^0.12.4",
     "@crackle/core": "^0.28.0",
+    "@storybook/addon-a11y": "^7.3.1",
+    "@storybook/addon-coverage": "^0.0.9",
+    "@storybook/addon-essentials": "^7.3.1",
+    "@storybook/addon-interactions": "^7.3.1",
+    "@storybook/addon-links": "^7.3.1",
+    "@storybook/blocks": "^7.3.1",
+    "@storybook/jest": "^0.2.0",
+    "@storybook/react": "^7.3.1",
+    "@storybook/react-vite": "^7.3.1",
+    "@storybook/testing-library": "^0.2.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.10",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
+    "@vanilla-extract/vite-plugin": "^3.8.2",
+    "@vitest/coverage-v8": "^0.34.6",
     "cross-env": "^7.0.3",
     "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
@@ -60,7 +86,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.14",
     "eslint-plugin-unicorn": "^48.0.1",
+    "jsdom": "^22.1.0",
     "prettier": "^3.0.3",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.3.1",
     "typescript": "^5.2.2",
     "vitest": "^0.34.6"
   },