@blockle/blocks-theme-momotaro 1.0.6 → 3.0.0

package/dist/components/switch.css.js

@@ -4,62 +4,65 @@ import { style, createVar } from "@vanilla-extract/css";
 import { focusable } from "./helpers.css.js";
 setFileScope("src/components/switch.css.ts", "@blockle/blocks-theme-momotaro");
 const activeScaleFactor = createVar();
-const switchTheme = makeComponentTheme("switch", {
-  base: style([
-    atoms({
-      borderRadius: "xlarge",
-      backgroundColor: "textLight"
-    }),
-    {
-      width: 52,
-      height: 32,
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: `background-color 120ms linear, box-shadow ${vars.transition.fast}`
-        }
-      },
-      selectors: {
-        '&[data-checked="true"]': {
-          backgroundColor: vars.color.secondary
-        }
-      },
-      // Scale the switch when it's `:active`
-      vars: {
-        [activeScaleFactor]: "1"
-      },
-      ":active": {
+const switchTheme = makeComponentTheme(
+  "switch",
+  {
+    base: style([
+      atoms({
+        borderRadius: "xlarge",
+        backgroundColor: "textLight"
+      }),
+      {
+        width: 52,
+        height: 32,
+        "@media": {
+          "(prefers-reduced-motion: no-preference)": {
+            transition: `background-color 120ms linear, box-shadow ${vars.transition.fast}`
+          }
+        },
+        selectors: {
+          '&[data-checked="true"]': {
+            backgroundColor: vars.color.secondary
+          }
+        },
+        // Scale the switch when it's `:active`
         vars: {
-          [activeScaleFactor]: "0.96"
-        }
-      }
-    },
-    focusable
-  ]),
-  slider: style([
-    atoms({
-      borderRadius: "xlarge"
-    }),
-    {
-      width: 24,
-      height: 24,
-      top: 4,
-      left: 4,
-      transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
-      position: "absolute",
-      backgroundColor: "white",
-      selectors: {
-        '&[data-checked="true"]': {
-          transform: `translateX(20px) scale(${activeScaleFactor})`
+          [activeScaleFactor]: "1"
+        },
+        ":active": {
+          vars: {
+            [activeScaleFactor]: "0.96"
+          }
         }
       },
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: "transform 120ms ease-out"
+      focusable
+    ]),
+    slider: style([
+      atoms({
+        borderRadius: "xlarge"
+      }),
+      {
+        width: 24,
+        height: 24,
+        top: 4,
+        left: 4,
+        transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
+        position: "absolute",
+        backgroundColor: "white",
+        selectors: {
+          '&[data-checked="true"]': {
+            transform: `translateX(20px) scale(${activeScaleFactor})`
+          }
+        },
+        "@media": {
+          "(prefers-reduced-motion: no-preference)": {
+            transition: "transform 120ms ease-out"
+          }
         }
       }
-    }
-  ])
-});
+    ])
+  }
+);
 endFileScope();
 export {
   switchTheme

package/dist/components/tooltip.css.d.ts

@@ -1 +1,2 @@
-export declare const tooltip: any;
+import { ThemeComponentsStyles } from '@blockle/blocks-core';
+export declare const tooltip: ThemeComponentsStyles['tooltip'];

package/dist/components/tooltip.css.js

@@ -2,28 +2,31 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeComponentTheme, atoms } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/tooltip.css.ts", "@blockle/blocks-theme-momotaro");
-const tooltip = makeComponentTheme("tooltip", {
-  base: atoms({
-    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"
-      })
+const tooltip = makeComponentTheme(
+  "tooltip",
+  {
+    base: atoms({
+      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"
     }
-  },
-  defaultVariants: {
-    colorScheme: "primary"
   }
-});
+);
 endFileScope();
 export {
   tooltip

package/dist/index.d.ts

@@ -1 +1 @@
-export { momotaro } from './theme.css';
+export { momotaro } from './theme.css.js';

package/package.json

@@ -1,25 +1,18 @@
 {
   "name": "@blockle/blocks-theme-momotaro",
-  "version": "1.0.6",
+  "version": "3.0.0",
   "description": "Momotaro theme for Blocks",
   "type": "module",
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": {
-        "import": "./dist/index.d.mts",
-        "require": "./dist/index.d.ts"
-      },
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
   "files": [
     "dist"
   ],
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
   "scripts": {
     "build": "vite build",
     "test": "vitest ",
@@ -41,6 +34,7 @@
     "@vanilla-extract/css": "^1.17.1"
   },
   "peerDependencies": {
-    "@blockle/blocks-core": ">=0.x"
+    "@blockle/blocks-core": "^0.23.0",
+    "@vanilla-extract/css": ">= 1.17.1"
   }
 }

package/dist/components/button.css.cjs

@@ -1,126 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const blocksCore = require("@blockle/blocks-core");
-const helpers_css = require("./helpers.css.cjs");
-fileScope.setFileScope("src/components/button.css.ts", "@blockle/blocks-theme-momotaro");
-const intentColor = css.createVar();
-const hoverBackgroundColor = css.createVar();
-const button = blocksCore.makeComponentTheme("button", {
-  base: css.style([
-    blocksCore.atoms({
-      display: "inline-flex",
-      placeItems: "center",
-      fontSize: "medium",
-      borderRadius: "medium",
-      fontWeight: "medium",
-      // Space between `startSlot | children | endSlot`
-      gap: "small"
-    }),
-    {
-      selectors: {
-        "&:hover:not(:disabled)": {
-          backgroundColor: hoverBackgroundColor
-        }
-      }
-    },
-    helpers_css.clickable
-  ]),
-  variants: {
-    variant: {
-      solid: css.style({
-        color: blocksCore.vars.color.white,
-        backgroundColor: intentColor,
-        border: "none"
-      }),
-      outline: css.style([
-        blocksCore.atoms({
-          borderWidth: "small"
-        }),
-        {
-          color: intentColor,
-          borderStyle: "solid",
-          borderColor: intentColor,
-          background: "transparent"
-        }
-      ]),
-      ghost: css.style({
-        color: intentColor,
-        background: "transparent"
-      })
-    },
-    size: {
-      small: css.style([
-        blocksCore.atoms({
-          paddingInline: "large"
-        }),
-        {
-          height: 40
-        }
-      ]),
-      medium: css.style([
-        blocksCore.atoms({
-          paddingInline: "xlarge"
-        }),
-        {
-          height: 56
-        }
-      ]),
-      large: css.style([
-        blocksCore.atoms({
-          paddingInline: "xlarge"
-        }),
-        {
-          height: 72
-        }
-      ])
-    },
-    intent: {
-      neutral: css.style({
-        vars: {
-          [intentColor]: blocksCore.vars.color.primary,
-          [hoverBackgroundColor]: blocksCore.vars.color.primaryLight
-        }
-      }),
-      danger: css.style({
-        vars: {
-          [intentColor]: blocksCore.vars.color.danger,
-          [hoverBackgroundColor]: "#fff8f7",
-          [helpers_css.focusRingColor]: blocksCore.vars.color.danger
-        }
-      })
-    }
-  },
-  compoundVariants: [
-    {
-      variants: {
-        variant: "solid",
-        intent: "neutral"
-      },
-      style: css.style({
-        vars: {
-          [hoverBackgroundColor]: blocksCore.vars.color.primaryDark
-        }
-      })
-    },
-    {
-      variants: {
-        variant: "solid",
-        intent: "danger"
-      },
-      style: css.style({
-        vars: {
-          [hoverBackgroundColor]: "#f9b1a9"
-        }
-      })
-    }
-  ],
-  defaultVariants: {
-    size: "small",
-    variant: "solid",
-    intent: "neutral"
-  }
-});
-fileScope.endFileScope();
-exports.button = button;

package/dist/components/checkbox.css.cjs

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const blocksCore = require("@blockle/blocks-core");
-const css = require("@vanilla-extract/css");
-const helpers_css = require("./helpers.css.cjs");
-const transitions = require("./transitions.cjs");
-fileScope.setFileScope("src/components/checkbox.css.ts", "@blockle/blocks-theme-momotaro");
-const checkbox = blocksCore.makeComponentTheme("checkbox", {
-  base: css.style([
-    {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      inlineSize: 24,
-      blockSize: 24,
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: `background-color ${blocksCore.vars.transition.normal}, box-shadow ${blocksCore.vars.transition.fast}`
-        }
-      },
-      selectors: {
-        "&:hover:not(:has(input:disabled))": {
-          backgroundColor: blocksCore.vars.color.primaryDark
-        },
-        "&:has(input:checked)": {
-          backgroundColor: blocksCore.vars.color.primary
-        }
-      }
-    },
-    blocksCore.atoms({
-      backgroundColor: "primaryLight",
-      borderRadius: "small"
-    }),
-    helpers_css.focusable
-  ]),
-  icon: css.style({
-    inlineSize: "1rem",
-    blockSize: "1rem",
-    color: "white",
-    transform: "scale(0)",
-    selectors: {
-      "input:checked ~ &": {
-        transform: "scale(1)"
-      }
-    },
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `transform ${blocksCore.vars.transition.normal} ${transitions.bounceOut}`
-      }
-    }
-  }),
-  label: blocksCore.atoms({
-    display: "flex",
-    flexDirection: "row",
-    padding: "xsmall",
-    gap: "medium",
-    cursor: "pointer"
-  })
-});
-fileScope.endFileScope();
-exports.checkbox = checkbox;

package/dist/components/dialog.css.cjs

@@ -1,81 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const blocksCore = require("@blockle/blocks-core");
-const css = require("@vanilla-extract/css");
-fileScope.setFileScope("src/components/dialog.css.ts", "@blockle/blocks-theme-momotaro");
-const dialog = blocksCore.makeComponentTheme("dialog", {
-  dialog: css.style([
-    blocksCore.atoms({
-      display: "flex",
-      flexDirection: "column",
-      padding: "gutter",
-      border: "none",
-      overflow: "auto",
-      borderRadius: "medium",
-      boxShadow: "large"
-    }),
-    {
-      maxHeight: "90%",
-      minWidth: "300px",
-      "::backdrop": {
-        backgroundColor: "rgba(0, 0, 0, 0.5)"
-      },
-      selectors: {
-        "&[open]": {
-          transform: "translate(0, 0)",
-          opacity: 1,
-          // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
-          "@starting-style": {
-            transform: "translate(0, -120px)",
-            opacity: 0
-          }
-        },
-        "&[open]::backdrop": {
-          opacity: 1,
-          "@starting-style": {
-            opacity: 0
-          }
-        }
-      },
-      // Apply the animation only if the user has not requested reduced motion
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          // Ending style
-          transform: "translate(0, -120px)",
-          opacity: 0,
-          transitionBehavior: "allow-discrete",
-          transitionProperty: "opacity, transform, overlay, display",
-          transitionDuration: "240ms, 160ms, 240ms, 240ms",
-          "::backdrop": {
-            opacity: 0,
-            transitionBehavior: "allow-discrete",
-            transitionProperty: "opacity, overlay, display",
-            transitionDuration: "160ms, 240ms, 240ms"
-          }
-        }
-      }
-    }
-  ]),
-  variants: {
-    size: {
-      small: css.style({
-        width: "400px",
-        maxWidth: "min(400px, 90%)"
-      }),
-      medium: css.style({
-        width: "600px",
-        maxWidth: "min(600px, 90%)"
-      }),
-      large: css.style({
-        width: "800px",
-        maxWidth: "min(800px, 90%)"
-      })
-    }
-  },
-  defaultVariants: {
-    size: "small"
-  }
-});
-fileScope.endFileScope();
-exports.dialog = dialog;

package/dist/components/divider.css.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const blocksCore = require("@blockle/blocks-core");
-const css = require("@vanilla-extract/css");
-fileScope.setFileScope("src/components/divider.css.ts", "@blockle/blocks-theme-momotaro");
-const divider = blocksCore.makeComponentTheme("divider", {
-  base: css.style({
-    blockSize: 1
-  }),
-  defaultVariants: {
-    color: "textLight"
-  }
-});
-fileScope.endFileScope();
-exports.divider = divider;

package/dist/components/helpers.css.cjs

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const blocksCore = require("@blockle/blocks-core");
-const css = require("@vanilla-extract/css");
-fileScope.setFileScope("src/components/helpers.css.ts", "@blockle/blocks-theme-momotaro");
-const focusRingColor = css.createVar();
-const focusable = css.style({
-  "@media": {
-    "(prefers-reduced-motion: no-preference)": {
-      transition: `box-shadow ${blocksCore.vars.transition.fast}`
-    }
-  },
-  ":focus-visible": {
-    outline: "2px solid transparent",
-    outlineOffset: "2px",
-    boxShadow: `0 0 1px 2px ${css.fallbackVar(focusRingColor, "#AF8EFF")}`
-  },
-  selectors: {
-    "&:disabled, &[disabled]": {
-      opacity: 0.5,
-      cursor: "auto",
-      pointerEvents: "none"
-    },
-    "&:has(input:focus-visible)": {
-      outline: "2px solid transparent",
-      outlineOffset: "2px",
-      boxShadow: blocksCore.vars.focus.boxShadow
-    },
-    "&:has(input:disabled)": {
-      opacity: 0.5,
-      cursor: "auto"
-    }
-  }
-});
-const clickable = css.style([
-  focusable,
-  {
-    ":active": {
-      transform: "scale(0.975)"
-    }
-  }
-]);
-fileScope.endFileScope();
-exports.clickable = clickable;
-exports.focusRingColor = focusRingColor;
-exports.focusable = focusable;

package/dist/components/index.cjs

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const button_css = require("./button.css.cjs");
-const checkbox_css = require("./checkbox.css.cjs");
-const dialog_css = require("./dialog.css.cjs");
-const divider_css = require("./divider.css.cjs");
-const input_css = require("./input.css.cjs");
-const label_css = require("./label.css.cjs");
-const link_css = require("./link.css.cjs");
-const popover_css = require("./popover.css.cjs");
-const progress_css = require("./progress.css.cjs");
-const radio_css = require("./radio.css.cjs");
-const select_css = require("./select.css.cjs");
-const slider_css = require("./slider.css.cjs");
-const spinner_css = require("./spinner.css.cjs");
-const switch_css = require("./switch.css.cjs");
-const tooltip_css = require("./tooltip.css.cjs");
-const components = {
-  button: button_css.button,
-  checkbox: checkbox_css.checkbox,
-  dialog: dialog_css.dialog,
-  divider: divider_css.divider,
-  input: input_css.input,
-  label: label_css.label,
-  link: link_css.link,
-  popover: popover_css.popover,
-  progress: progress_css.progress,
-  radio: radio_css.radio,
-  select: select_css.select,
-  slider: slider_css.slider,
-  spinner: spinner_css.spinner,
-  switch: switch_css.switchTheme,
-  tooltip: tooltip_css.tooltip
-};
-exports.components = components;

package/dist/components/input.css.cjs

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const blocksCore = require("@blockle/blocks-core");
-const css = require("@vanilla-extract/css");
-fileScope.setFileScope("src/components/input.css.ts", "@blockle/blocks-theme-momotaro");
-const input = blocksCore.makeComponentTheme("input", {
-  input: css.style([
-    blocksCore.atoms({
-      color: "text",
-      padding: "large",
-      border: "none",
-      borderRadius: "small"
-    }),
-    {
-      outline: "none",
-      background: "transparent",
-      "::placeholder": {
-        color: blocksCore.vars.color.textLight
-      },
-      ":disabled": {}
-    }
-  ]),
-  container: css.style([
-    {
-      minHeight: 56,
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: `box-shadow ${blocksCore.vars.transition.fast}`
-        }
-      },
-      ":focus-within": {
-        outline: "2px solid transparent",
-        outlineOffset: "2px",
-        boxShadow: `${blocksCore.vars.shadow.small}, ${blocksCore.vars.focus.boxShadow}`
-      }
-    },
-    blocksCore.atoms({
-      backgroundColor: "white",
-      borderRadius: "medium",
-      boxShadow: "medium"
-    })
-  ])
-});
-fileScope.endFileScope();
-exports.input = input;

package/dist/components/label.css.cjs

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const blocksCore = require("@blockle/blocks-core");
-const css = require("@vanilla-extract/css");
-fileScope.setFileScope("src/components/label.css.ts", "@blockle/blocks-theme-momotaro");
-const label = blocksCore.makeComponentTheme("label", {
-  base: css.style({}),
-  variants: {
-    size: {
-      small: css.style({
-        fontSize: blocksCore.vars.fontSize.xsmall
-      }),
-      medium: css.style({
-        fontSize: blocksCore.vars.fontSize.small
-      }),
-      large: css.style({
-        fontSize: blocksCore.vars.fontSize.medium
-      })
-    },
-    required: css.style({
-      ":after": {
-        content: '"*"',
-        marginLeft: blocksCore.vars.space.xsmall
-      }
-    })
-  },
-  defaultVariants: {
-    size: "large"
-  }
-});
-fileScope.endFileScope();
-exports.label = label;