@blockle/blocks 0.20.0-alpha1.0 → 1.0.0

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

@@ -1,64 +0,0 @@
-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 { focusable } from "./helpers.css.js";
-import { bounceOut } from "./transitions.js";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
-setFileScope("src/themes/momotaro/components/checkbox.css.ts", "@blockle/blocks");
-const checkbox = makeComponentTheme("checkbox", {
-  base: style([
-    {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      inlineSize: 24,
-      blockSize: 24,
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: `background-color ${vars.transition.normal}, box-shadow ${vars.transition.fast}`
-        }
-      },
-      selectors: {
-        "&:hover:not(:has(input:disabled))": {
-          backgroundColor: vars.color.primaryDark
-        },
-        "&:has(input:checked)": {
-          backgroundColor: vars.color.primary
-        }
-      }
-    },
-    atoms({
-      backgroundColor: "primaryLight",
-      borderRadius: "small"
-    }),
-    focusable
-  ]),
-  icon: style({
-    inlineSize: "1rem",
-    blockSize: "1rem",
-    color: "white",
-    transform: "scale(0)",
-    selectors: {
-      "input:checked ~ &": {
-        transform: "scale(1)"
-      }
-    },
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `transform ${vars.transition.normal} ${bounceOut}`
-      }
-    }
-  }),
-  label: atoms({
-    display: "flex",
-    flexDirection: "row",
-    padding: "xsmall",
-    gap: "medium",
-    cursor: "pointer"
-  })
-});
-endFileScope();
-export {
-  checkbox
-};

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

@@ -1,82 +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 makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
-const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
-const dialog = makeComponentTheme.makeComponentTheme("dialog", {
-  dialog: css.style([
-    sprinkles_css.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/themes/momotaro/components/dialog.css.d.ts

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

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

@@ -1,82 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
-setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
-const dialog = makeComponentTheme("dialog", {
-  dialog: style([
-    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: style({
-        width: "400px",
-        maxWidth: "min(400px, 90%)"
-      }),
-      medium: style({
-        width: "600px",
-        maxWidth: "min(600px, 90%)"
-      }),
-      large: style({
-        width: "800px",
-        maxWidth: "min(800px, 90%)"
-      })
-    }
-  },
-  defaultVariants: {
-    size: "small"
-  }
-});
-endFileScope();
-export {
-  dialog
-};

package/dist/themes/momotaro/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 css = require("@vanilla-extract/css");
-const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
-const divider = makeComponentTheme.makeComponentTheme("divider", {
-  base: css.style({
-    blockSize: 1
-  }),
-  defaultVariants: {
-    color: "textLight"
-  }
-});
-fileScope.endFileScope();
-exports.divider = divider;

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

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

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

@@ -1,16 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
-setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
-const divider = makeComponentTheme("divider", {
-  base: style({
-    blockSize: 1
-  }),
-  defaultVariants: {
-    color: "textLight"
-  }
-});
-endFileScope();
-export {
-  divider
-};

package/dist/themes/momotaro/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 css = require("@vanilla-extract/css");
-const vars_css = require("../../../lib/theme/vars.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts", "@blockle/blocks");
-const focusRingColor = css.createVar();
-const focusable = css.style({
-  "@media": {
-    "(prefers-reduced-motion: no-preference)": {
-      transition: `box-shadow ${vars_css.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: vars_css.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/themes/momotaro/components/helpers.css.d.ts

@@ -1,8 +0,0 @@
-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/themes/momotaro/components/helpers.css.js

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

package/dist/themes/momotaro/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/themes/momotaro/components/index.d.ts

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

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

@@ -1,35 +0,0 @@
-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

@@ -1,48 +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 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

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

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

@@ -1,48 +0,0 @@
-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

@@ -1,34 +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 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

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

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

@@ -1,34 +0,0 @@
-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";
-setFileScope("src/themes/momotaro/components/label.css.ts", "@blockle/blocks");
-const label = makeComponentTheme("label", {
-  base: style({}),
-  variants: {
-    size: {
-      small: style({
-        fontSize: vars.fontSize.xsmall
-      }),
-      medium: style({
-        fontSize: vars.fontSize.small
-      }),
-      large: style({
-        fontSize: vars.fontSize.medium
-      })
-    },
-    required: style({
-      ":after": {
-        content: '"*"',
-        marginLeft: vars.space.xsmall
-      }
-    })
-  },
-  defaultVariants: {
-    size: "large"
-  }
-});
-endFileScope();
-export {
-  label
-};