@blockle/blocks 0.4.0 → 0.5.0

package/README.md

@@ -46,9 +46,18 @@ import { makeTokens, makeComponentTheme, makeTheme } from "@blockle/blocks";
 
 const tokens = makeTokens({ ... });
 
-const button = makeComponentTheme({
-  type: 'button',
-  ...
+const button = makeComponentTheme('button', {
+  base: style({
+    ...
+  }),
+  variants: {
+    primary: style({
+      ...
+    }),
+    secondary: style({
+      ...
+    })
+  },
 });
 
 const theme = makeTheme({

package/dist/momotaro.chunk.d.ts

@@ -269,7 +269,7 @@ type CreateComponentTheme<T extends Theme$1> = {
     compoundVariants?: Array<{
         style: string;
         variants: {
-            [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup];
+            [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
         };
     }>;
     defaultVariants?: {
@@ -282,14 +282,17 @@ type CreateThemeProps<T extends Theme$1> = {
     type: T['type'];
     base?: boolean;
 };
-declare const makeComponentTheme: <T extends ComponentThemes>(options: T) => T;
+declare const makeComponentTheme: <T extends "button" | "link" | "spinner" | "divider" | "dialog", const O extends ComponentThemesMap[T]>(name: T, options: O) => O;
 
 type ButtonTheme = {
     type: 'button';
+    base: boolean;
     variants: {
         variant: 'solid' | 'outline' | 'ghost' | 'link';
         intent: 'neutral' | 'danger';
         size: 'small' | 'medium' | 'large';
+        loading: boolean;
+        disabled: boolean;
     };
 };
 type ButtonThemeProps = CreateThemeProps<ButtonTheme>;
@@ -570,7 +573,7 @@ type TextProps = {
 declare const Text: React.FC<TextProps>;
 
 type LinkProps = {
-    variant: LinkTheme['variants']['variant'];
+    variant?: LinkTheme['variants']['variant'];
     underline?: LinkTheme['variants']['underline'];
     children?: ReactNode;
     className?: string;

package/dist/styles/lib/css/theme/makeComponentTheme.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const makeComponentTheme = (options) => options;
+const makeComponentTheme = (name, options) => options;
 exports.makeComponentTheme = makeComponentTheme;

package/dist/styles/lib/css/theme/makeComponentTheme.mjs

@@ -1,4 +1,4 @@
-const makeComponentTheme = (options) => options;
+const makeComponentTheme = (name, options) => options;
 export {
   makeComponentTheme
 };

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

@@ -7,8 +7,7 @@ const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
 const primaryColor = css.createVar("primaryColor");
-const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
-  type: "button",
+const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("button", {
   base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     display: "inline-flex",
     placeItems: "center",
@@ -17,8 +16,6 @@ const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
     fontWeight: "medium"
   }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "button_base"),
   variants: {
-    // ...
-    // styleVariants could be used to but lacks correct typings atm
     variant: {
       solid: css.style({
         color: styles_lib_css_theme_vars_css_cjs.vars.color.white,

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

@@ -6,8 +6,7 @@ import { focusable } from "./helpers.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
 const primaryColor = createVar("primaryColor");
-const button = makeComponentTheme({
-  type: "button",
+const button = makeComponentTheme("button", {
   base: style([atoms({
     display: "inline-flex",
     placeItems: "center",
@@ -16,8 +15,6 @@ const button = makeComponentTheme({
     fontWeight: "medium"
   }), focusable], "button_base"),
   variants: {
-    // ...
-    // styleVariants could be used to but lacks correct typings atm
     variant: {
       solid: style({
         color: vars.color.white,

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

@@ -4,8 +4,7 @@ const css = require("@vanilla-extract/css");
 const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
-const dialog = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
-  type: "dialog",
+const dialog = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
   base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     display: "flex",
     flexDirection: "column",

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

@@ -3,8 +3,7 @@ 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/dialog.css.ts?used", "blocks");
-const dialog = makeComponentTheme({
-  type: "dialog",
+const dialog = makeComponentTheme("dialog", {
   base: style([atoms({
     display: "flex",
     flexDirection: "column",

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

@@ -2,8 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts?used", "blocks");
-const divider = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
-  type: "divider",
+const divider = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
   defaultVariants: {
     color: "textLight"
   }

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

@@ -1,8 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
 setFileScope("src/themes/momotaro/components/divider.css.ts?used", "blocks");
-const divider = makeComponentTheme({
-  type: "divider",
+const divider = makeComponentTheme("divider", {
   defaultVariants: {
     color: "textLight"
   }

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

@@ -4,8 +4,7 @@ const css = require("@vanilla-extract/css");
 const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.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");
-const link = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
-  type: "link",
+const link = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("link", {
   base: css.style({
     outline: "none",
     border: "none",

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

@@ -3,8 +3,7 @@ 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",
+const link = makeComponentTheme("link", {
   base: style({
     outline: "none",
     border: "none",

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

@@ -11,8 +11,7 @@ const spinAnimation = css.keyframes({
     transform: "rotate(360deg)"
   }
 }, "spinAnimation");
-const spinner = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
-  type: "spinner",
+const spinner = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
   base: css.style({
     aspectRatio: "1 / 1",
     overflow: "hidden",

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

@@ -10,8 +10,7 @@ const spinAnimation = keyframes({
     transform: "rotate(360deg)"
   }
 }, "spinAnimation");
-const spinner = makeComponentTheme({
-  type: "spinner",
+const spinner = makeComponentTheme("spinner", {
   base: style({
     aspectRatio: "1 / 1",
     overflow: "hidden",

package/package.json

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