@blockle/blocks 0.19.1 → 0.20.0-alpha1.0

package/dist/{styles/themes → themes}/momotaro/components/helpers.css.cjs

@@ -1,13 +1,14 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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");
+const vars_css = require("../../../lib/theme/vars.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts", "@blockle/blocks");
-const focusRingColor = css.createVar("focusRingColor");
+const focusRingColor = css.createVar();
 const focusable = css.style({
   "@media": {
     "(prefers-reduced-motion: no-preference)": {
-      transition: `box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+      transition: `box-shadow ${vars_css.vars.transition.fast}`
     }
   },
   ":focus-visible": {
@@ -24,19 +25,22 @@ const focusable = css.style({
     "&:has(input:focus-visible)": {
       outline: "2px solid transparent",
       outlineOffset: "2px",
-      boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow
+      boxShadow: vars_css.vars.focus.boxShadow
     },
     "&:has(input:disabled)": {
       opacity: 0.5,
       cursor: "auto"
     }
   }
-}, "focusable");
-const clickable = css.style([focusable, {
-  ":active": {
-    transform: "scale(0.975)"
+});
+const clickable = css.style([
+  focusable,
+  {
+    ":active": {
+      transform: "scale(0.975)"
+    }
   }
-}], "clickable");
+]);
 fileScope.endFileScope();
 exports.clickable = clickable;
 exports.focusRingColor = focusRingColor;

package/dist/themes/momotaro/components/helpers.css.d.ts

@@ -0,0 +1,8 @@
+export declare const focusRingColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+/**
+ * NOTE: When the original element has a transition, make sure to include
+ * `box-shadow ${vars.transition.fast}` in the transition property for the
+ * focus transition to work correctly.
+ */
+export declare const focusable: string;
+export declare const clickable: string;

package/dist/{styles/themes/momotaro/components/helpers.css.mjs → themes/momotaro/components/helpers.css.js}

@@ -1,8 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, fallbackVar, createVar } from "@vanilla-extract/css";
-import { vars } from "../../../lib/theme/vars.css.mjs";
+import { vars } from "../../../lib/theme/vars.css.js";
 setFileScope("src/themes/momotaro/components/helpers.css.ts", "@blockle/blocks");
-const focusRingColor = createVar("focusRingColor");
+const focusRingColor = createVar();
 const focusable = style({
   "@media": {
     "(prefers-reduced-motion: no-preference)": {
@@ -30,12 +30,15 @@ const focusable = style({
       cursor: "auto"
     }
   }
-}, "focusable");
-const clickable = style([focusable, {
-  ":active": {
-    transform: "scale(0.975)"
+});
+const clickable = style([
+  focusable,
+  {
+    ":active": {
+      transform: "scale(0.975)"
+    }
   }
-}], "clickable");
+]);
 endFileScope();
 export {
   clickable,

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

@@ -0,0 +1,35 @@
+"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/themes/momotaro/components/index.d.ts

@@ -0,0 +1,2 @@
+import { ThemeComponentsStyles } from '../../../lib/theme/makeComponentTheme';
+export declare const components: ThemeComponentsStyles;

package/dist/themes/momotaro/components/index.js

@@ -0,0 +1,35 @@
+import { button } from "./button.css.js";
+import { checkbox } from "./checkbox.css.js";
+import { dialog } from "./dialog.css.js";
+import { divider } from "./divider.css.js";
+import { input } from "./input.css.js";
+import { label } from "./label.css.js";
+import { link } from "./link.css.js";
+import { popover } from "./popover.css.js";
+import { progress } from "./progress.css.js";
+import { radio } from "./radio.css.js";
+import { select } from "./select.css.js";
+import { slider } from "./slider.css.js";
+import { spinner } from "./spinner.css.js";
+import { switchTheme } from "./switch.css.js";
+import { tooltip } from "./tooltip.css.js";
+const components = {
+  button,
+  checkbox,
+  dialog,
+  divider,
+  input,
+  label,
+  link,
+  popover,
+  progress,
+  radio,
+  select,
+  slider,
+  spinner,
+  switch: switchTheme,
+  tooltip
+};
+export {
+  components
+};

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

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

package/dist/themes/momotaro/components/input.css.d.ts

@@ -0,0 +1 @@
+export declare const input: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').InputTheme> | undefined;

package/dist/themes/momotaro/components/input.css.js

@@ -0,0 +1,48 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
+setFileScope("src/themes/momotaro/components/input.css.ts", "@blockle/blocks");
+const input = makeComponentTheme("input", {
+  input: style([
+    atoms({
+      color: "text",
+      padding: "large",
+      border: "none",
+      borderRadius: "small"
+    }),
+    {
+      outline: "none",
+      background: "transparent",
+      "::placeholder": {
+        color: vars.color.textLight
+      },
+      ":disabled": {}
+    }
+  ]),
+  container: style([
+    {
+      minHeight: 56,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `box-shadow ${vars.transition.fast}`
+        }
+      },
+      ":focus-within": {
+        outline: "2px solid transparent",
+        outlineOffset: "2px",
+        boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
+      }
+    },
+    atoms({
+      backgroundColor: "white",
+      borderRadius: "medium",
+      boxShadow: "medium"
+    })
+  ])
+});
+endFileScope();
+export {
+  input
+};

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

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

package/dist/themes/momotaro/components/label.css.d.ts

@@ -0,0 +1 @@
+export declare const label: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').LabelTheme> | undefined;

package/dist/{styles/themes/momotaro/components/label.css.mjs → themes/momotaro/components/label.css.js}

@@ -1,28 +1,28 @@
 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";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
 setFileScope("src/themes/momotaro/components/label.css.ts", "@blockle/blocks");
 const label = makeComponentTheme("label", {
-  base: style({}, "label_base"),
+  base: style({}),
   variants: {
     size: {
       small: style({
         fontSize: vars.fontSize.xsmall
-      }, "label_variants_size_small"),
+      }),
       medium: style({
         fontSize: vars.fontSize.small
-      }, "label_variants_size_medium"),
+      }),
       large: style({
         fontSize: vars.fontSize.medium
-      }, "label_variants_size_large")
+      })
     },
     required: style({
       ":after": {
         content: '"*"',
         marginLeft: vars.space.xsmall
       }
-    }, "label_variants_required")
+    })
   },
   defaultVariants: {
     size: "large"

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
+const helpers_css = require("./helpers.css.cjs");
+const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/link.css.ts", "@blockle/blocks");
+const link = makeComponentTheme.makeComponentTheme("link", {
+  base: css.style([
+    {
+      outline: "none",
+      border: "none",
+      textDecoration: "none",
+      background: "transparent",
+      borderRadius: 1,
+      ":hover": {
+        textDecoration: "underline"
+      },
+      ":focus-visible": {
+        textDecoration: "underline"
+      },
+      cursor: "pointer"
+      // selectors: {
+      //   '&[target="_blank"]::after': {
+      //     content: '"\\2197"',
+      //     marginLeft: 4,
+      //   },
+      // },
+    },
+    helpers_css.focusable
+  ]),
+  variants: {
+    variant: {
+      inherit: css.style({
+        color: "inherit",
+        fontWeight: "inherit"
+      }),
+      primary: sprinkles_css.atoms({
+        color: "primary",
+        fontWeight: "medium"
+      }),
+      secondary: sprinkles_css.atoms({
+        color: "secondary",
+        fontWeight: "medium"
+      })
+    },
+    underline: css.style({
+      textDecoration: "underline"
+    })
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+});
+fileScope.endFileScope();
+exports.link = link;

package/dist/themes/momotaro/components/link.css.d.ts

@@ -0,0 +1 @@
+export declare const link: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').LinkTheme> | undefined;

package/dist/{styles/themes/momotaro/components/link.css.mjs → themes/momotaro/components/link.css.js}

@@ -1,36 +1,39 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 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";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { focusable } from "./helpers.css.js";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
 setFileScope("src/themes/momotaro/components/link.css.ts", "@blockle/blocks");
 const link = makeComponentTheme("link", {
-  base: style([{
-    outline: "none",
-    border: "none",
-    textDecoration: "none",
-    background: "transparent",
-    borderRadius: 1,
-    ":hover": {
-      textDecoration: "underline"
-    },
-    ":focus-visible": {
-      textDecoration: "underline"
+  base: style([
+    {
+      outline: "none",
+      border: "none",
+      textDecoration: "none",
+      background: "transparent",
+      borderRadius: 1,
+      ":hover": {
+        textDecoration: "underline"
+      },
+      ":focus-visible": {
+        textDecoration: "underline"
+      },
+      cursor: "pointer"
+      // selectors: {
+      //   '&[target="_blank"]::after': {
+      //     content: '"\\2197"',
+      //     marginLeft: 4,
+      //   },
+      // },
     },
-    cursor: "pointer"
-    // selectors: {
-    //   '&[target="_blank"]::after': {
-    //     content: '"\\2197"',
-    //     marginLeft: 4,
-    //   },
-    // },
-  }, focusable], "link_base"),
+    focusable
+  ]),
   variants: {
     variant: {
       inherit: style({
         color: "inherit",
         fontWeight: "inherit"
-      }, "link_variants_variant_inherit"),
+      }),
       primary: atoms({
         color: "primary",
         fontWeight: "medium"
@@ -42,7 +45,7 @@ const link = makeComponentTheme("link", {
     },
     underline: style({
       textDecoration: "underline"
-    }, "link_variants_underline")
+    })
   },
   defaultVariants: {
     variant: "primary"

package/dist/{styles/themes → themes}/momotaro/components/popover.css.cjs

@@ -1,10 +1,11 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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");
+const style = require("../../../lib/css/style/style.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
 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({
+const popover = makeComponentTheme.makeComponentTheme("popover", {
+  base: style.style({
     backgroundColor: "white",
     borderRadius: "small",
     boxShadow: "medium",

package/dist/themes/momotaro/components/popover.css.d.ts

@@ -0,0 +1 @@
+export declare const popover: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').PopoverTheme> | undefined;

package/dist/{styles/themes/momotaro/components/popover.css.mjs → themes/momotaro/components/popover.css.js}

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "../../../lib/css/style/style.mjs";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { style } from "../../../lib/css/style/style.js";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
 setFileScope("src/themes/momotaro/components/popover.css.ts", "@blockle/blocks");
 const popover = makeComponentTheme("popover", {
   base: style({

package/dist/{styles/themes → themes}/momotaro/components/progress.css.cjs

@@ -1,9 +1,10 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
+const vars_css = require("../../../lib/theme/vars.css.cjs");
+const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/progress.css.ts", "@blockle/blocks");
 const indeterminateAnimation = css.keyframes({
   "0%": {
@@ -12,17 +13,20 @@ const indeterminateAnimation = css.keyframes({
   "100%": {
     transform: "translateX(100%)"
   }
-}, "indeterminateAnimation");
-const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("progress", {
-  base: css.style([{
-    height: 8
-  }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
-    inlineSize: "full",
-    borderRadius: "small",
-    backgroundColor: "textLight",
-    color: "primary",
-    overflow: "hidden"
-  })], "progress_base"),
+});
+const progress = makeComponentTheme.makeComponentTheme("progress", {
+  base: css.style([
+    {
+      height: 8
+    },
+    sprinkles_css.atoms({
+      inlineSize: "full",
+      borderRadius: "small",
+      backgroundColor: "textLight",
+      color: "primary",
+      overflow: "hidden"
+    })
+  ]),
   bar: css.style({
     borderRadius: "inherit",
     "@media": {
@@ -30,7 +34,7 @@ const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("pro
         transition: "transform 180ms ease-out"
       }
     }
-  }, "progress_bar"),
+  }),
   variants: {
     indeterminate: css.style({
       "@media": {
@@ -40,15 +44,15 @@ const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("pro
           45deg,
           transparent,
           transparent 20px,
-          ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 20px,
-          ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 40px
+          ${vars_css.vars.color.primaryDark} 20px,
+          ${vars_css.vars.color.primaryDark} 40px
         )`
         },
         "(prefers-reduced-motion: no-preference)": {
           animation: `${indeterminateAnimation} 3s ease-in-out infinite`
         }
       }
-    }, "progress_variants_indeterminate")
+    })
   }
 });
 fileScope.endFileScope();

package/dist/themes/momotaro/components/progress.css.d.ts

@@ -0,0 +1 @@
+export declare const progress: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').ProgressTheme> | undefined;

package/dist/{styles/themes/momotaro/components/progress.css.mjs → themes/momotaro/components/progress.css.js}

@@ -1,8 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, keyframes } 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";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
 setFileScope("src/themes/momotaro/components/progress.css.ts", "@blockle/blocks");
 const indeterminateAnimation = keyframes({
   "0%": {
@@ -11,17 +11,20 @@ const indeterminateAnimation = keyframes({
   "100%": {
     transform: "translateX(100%)"
   }
-}, "indeterminateAnimation");
+});
 const progress = makeComponentTheme("progress", {
-  base: style([{
-    height: 8
-  }, atoms({
-    inlineSize: "full",
-    borderRadius: "small",
-    backgroundColor: "textLight",
-    color: "primary",
-    overflow: "hidden"
-  })], "progress_base"),
+  base: style([
+    {
+      height: 8
+    },
+    atoms({
+      inlineSize: "full",
+      borderRadius: "small",
+      backgroundColor: "textLight",
+      color: "primary",
+      overflow: "hidden"
+    })
+  ]),
   bar: style({
     borderRadius: "inherit",
     "@media": {
@@ -29,7 +32,7 @@ const progress = makeComponentTheme("progress", {
         transition: "transform 180ms ease-out"
       }
     }
-  }, "progress_bar"),
+  }),
   variants: {
     indeterminate: style({
       "@media": {
@@ -47,7 +50,7 @@ const progress = makeComponentTheme("progress", {
           animation: `${indeterminateAnimation} 3s ease-in-out infinite`
         }
       }
-    }, "progress_variants_indeterminate")
+    })
   }
 });
 endFileScope();