@blockle/blocks 0.20.0-alpha1.0 → 1.0.0

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

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

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

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

@@ -1,57 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-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"
-      },
-      cursor: "pointer"
-      // selectors: {
-      //   '&[target="_blank"]::after': {
-      //     content: '"\\2197"',
-      //     marginLeft: 4,
-      //   },
-      // },
-    },
-    focusable
-  ]),
-  variants: {
-    variant: {
-      inherit: style({
-        color: "inherit",
-        fontWeight: "inherit"
-      }),
-      primary: atoms({
-        color: "primary",
-        fontWeight: "medium"
-      }),
-      secondary: atoms({
-        color: "secondary",
-        fontWeight: "medium"
-      })
-    },
-    underline: style({
-      textDecoration: "underline"
-    })
-  },
-  defaultVariants: {
-    variant: "primary"
-  }
-});
-endFileScope();
-export {
-  link
-};

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

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-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 = makeComponentTheme.makeComponentTheme("popover", {
-  base: style.style({
-    backgroundColor: "white",
-    borderRadius: "small",
-    boxShadow: "medium",
-    padding: "medium",
-    margin: "small",
-    // Space between the popover and the anchor element
-    width: "max-content",
-    selectors: {
-      "&[data-open]": {
-        transform: "scale(1)",
-        opacity: 1
-      }
-    },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transform: "scale(0.95)",
-        transition: "opacity 80ms linear, transform 80ms",
-        opacity: 0
-      }
-    }
-  })
-});
-fileScope.endFileScope();
-exports.popover = popover;

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

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

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

@@ -1,33 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-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({
-    backgroundColor: "white",
-    borderRadius: "small",
-    boxShadow: "medium",
-    padding: "medium",
-    margin: "small",
-    // Space between the popover and the anchor element
-    width: "max-content",
-    selectors: {
-      "&[data-open]": {
-        transform: "scale(1)",
-        opacity: 1
-      }
-    },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transform: "scale(0.95)",
-        transition: "opacity 80ms linear, transform 80ms",
-        opacity: 0
-      }
-    }
-  })
-});
-endFileScope();
-export {
-  popover
-};

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

@@ -1,59 +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/progress.css.ts", "@blockle/blocks");
-const indeterminateAnimation = css.keyframes({
-  "0%": {
-    transform: "translateX(-100%)"
-  },
-  "100%": {
-    transform: "translateX(100%)"
-  }
-});
-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": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: "transform 180ms ease-out"
-      }
-    }
-  }),
-  variants: {
-    indeterminate: css.style({
-      "@media": {
-        // For reduce motion we show a striped pattern instead of animating
-        "(prefers-reduced-motion: reduce)": {
-          backgroundImage: `repeating-linear-gradient(
-          45deg,
-          transparent,
-          transparent 20px,
-          ${vars_css.vars.color.primaryDark} 20px,
-          ${vars_css.vars.color.primaryDark} 40px
-        )`
-        },
-        "(prefers-reduced-motion: no-preference)": {
-          animation: `${indeterminateAnimation} 3s ease-in-out infinite`
-        }
-      }
-    })
-  }
-});
-fileScope.endFileScope();
-exports.progress = progress;

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

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

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

@@ -1,59 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, keyframes } 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/progress.css.ts", "@blockle/blocks");
-const indeterminateAnimation = keyframes({
-  "0%": {
-    transform: "translateX(-100%)"
-  },
-  "100%": {
-    transform: "translateX(100%)"
-  }
-});
-const progress = makeComponentTheme("progress", {
-  base: style([
-    {
-      height: 8
-    },
-    atoms({
-      inlineSize: "full",
-      borderRadius: "small",
-      backgroundColor: "textLight",
-      color: "primary",
-      overflow: "hidden"
-    })
-  ]),
-  bar: style({
-    borderRadius: "inherit",
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: "transform 180ms ease-out"
-      }
-    }
-  }),
-  variants: {
-    indeterminate: style({
-      "@media": {
-        // For reduce motion we show a striped pattern instead of animating
-        "(prefers-reduced-motion: reduce)": {
-          backgroundImage: `repeating-linear-gradient(
-          45deg,
-          transparent,
-          transparent 20px,
-          ${vars.color.primaryDark} 20px,
-          ${vars.color.primaryDark} 40px
-        )`
-        },
-        "(prefers-reduced-motion: no-preference)": {
-          animation: `${indeterminateAnimation} 3s ease-in-out infinite`
-        }
-      }
-    })
-  }
-});
-endFileScope();
-export {
-  progress
-};

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

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

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

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

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

@@ -1,65 +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/radio.css.ts", "@blockle/blocks");
-const radio = makeComponentTheme("radio", {
-  base: style([
-    {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      inlineSize: 24,
-      blockSize: 24,
-      borderRadius: 12,
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: `background-color ${vars.transition.fast}, box-shadow ${vars.transition.fast}`
-        }
-      },
-      ":hover": {
-        backgroundColor: vars.color.primaryDark
-      },
-      selectors: {
-        "&:has(input:checked):not(:hover)": {
-          backgroundColor: vars.color.primary
-        }
-      }
-    },
-    atoms({
-      backgroundColor: "primaryLight"
-    }),
-    focusable
-  ]),
-  icon: style({
-    height: 12,
-    width: 12,
-    backgroundColor: "white",
-    borderRadius: "8px",
-    transform: "scale(0)",
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `transform ${vars.transition.normal} ${bounceOut}`
-      }
-    },
-    selectors: {
-      "input:checked ~ &": {
-        transform: "scale(1)"
-      }
-    }
-  }),
-  label: atoms({
-    display: "flex",
-    flexDirection: "row",
-    padding: "xsmall",
-    gap: "medium",
-    cursor: "pointer"
-  })
-});
-endFileScope();
-export {
-  radio
-};

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

@@ -1,48 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const style = require("../../../lib/css/style/style.cjs");
-const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
-const vars_css = require("../../../lib/theme/vars.css.cjs");
-const helpers_css = require("./helpers.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/select.css.ts", "@blockle/blocks");
-const select = makeComponentTheme.makeComponentTheme("select", {
-  select: style.style([
-    {
-      color: "text",
-      padding: "large",
-      border: "none",
-      outline: "none",
-      backgroundColor: "white",
-      borderRadius: "medium",
-      boxShadow: "medium",
-      minHeight: 56,
-      transitionDuration: vars_css.vars.transition.fast,
-      transitionProperty: "box-shadow",
-      ":focus-within": {
-        outline: "2px solid transparent",
-        outlineOffset: "2px",
-        boxShadow: `${vars_css.vars.shadow.small}, ${vars_css.vars.focus.boxShadow}`
-      }
-    },
-    helpers_css.focusable
-  ]),
-  variants: {
-    variant: {
-      outline: style.style({
-        borderWidth: "small",
-        borderStyle: "solid",
-        borderColor: "primary"
-      }),
-      solid: style.style({})
-    }
-  },
-  icon: style.style({
-    paddingInline: "large"
-  }),
-  defaultVariants: {
-    variant: "solid"
-  }
-});
-fileScope.endFileScope();
-exports.select = select;

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

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

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

@@ -1,48 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "../../../lib/css/style/style.js";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
-import { vars } from "../../../lib/theme/vars.css.js";
-import { focusable } from "./helpers.css.js";
-setFileScope("src/themes/momotaro/components/select.css.ts", "@blockle/blocks");
-const select = makeComponentTheme("select", {
-  select: style([
-    {
-      color: "text",
-      padding: "large",
-      border: "none",
-      outline: "none",
-      backgroundColor: "white",
-      borderRadius: "medium",
-      boxShadow: "medium",
-      minHeight: 56,
-      transitionDuration: vars.transition.fast,
-      transitionProperty: "box-shadow",
-      ":focus-within": {
-        outline: "2px solid transparent",
-        outlineOffset: "2px",
-        boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
-      }
-    },
-    focusable
-  ]),
-  variants: {
-    variant: {
-      outline: style({
-        borderWidth: "small",
-        borderStyle: "solid",
-        borderColor: "primary"
-      }),
-      solid: style({})
-    }
-  },
-  icon: style({
-    paddingInline: "large"
-  }),
-  defaultVariants: {
-    variant: "solid"
-  }
-});
-endFileScope();
-export {
-  select
-};

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

@@ -1,93 +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 style = require("../../../lib/css/style/style.cjs");
-const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
-const vars_css = require("../../../lib/theme/vars.css.cjs");
-const helpers_css = require("./helpers.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/slider.css.ts", "@blockle/blocks");
-const trackBackground = css.createVar();
-const filledTrackBackground = css.createVar();
-const thumbBackground = css.createVar();
-const thumbActive = css.createVar();
-const slider = makeComponentTheme.makeComponentTheme("slider", {
-  base: style.style({
-    blockSize: "20px"
-  }),
-  track: style.style({
-    blockSize: "4px",
-    backgroundColor: trackBackground,
-    borderRadius: "small"
-  }),
-  filledTrack: style.style({
-    backgroundColor: filledTrackBackground
-  }),
-  thumb: style.style([
-    {
-      backgroundColor: thumbBackground,
-      borderRadius: "50%",
-      height: "16px",
-      width: "16px",
-      boxShadow: `0 0 0 0px color-mix(in srgb,  ${vars_css.vars.color.primaryLight}, transparent 0%)`,
-      vars: {
-        [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${vars_css.vars.color.primaryLight}, transparent 20%)`
-      },
-      ":hover": {
-        boxShadow: thumbActive
-      },
-      ":focus-visible": {
-        boxShadow: thumbActive
-      },
-      "@media": {
-        "(prefers-reduced-motion: no-preference)": {
-          transition: "box-shadow 0.2s"
-        }
-      }
-    },
-    helpers_css.focusable
-  ]),
-  variants: {
-    size: {
-      small: style.style({
-        inlineSize: "100px"
-      }),
-      medium: style.style({
-        inlineSize: "200px"
-      }),
-      large: style.style({
-        inlineSize: "300px"
-      })
-    },
-    colorScheme: {
-      primary: style.style({
-        vars: {
-          [trackBackground]: vars_css.vars.color.primaryLight,
-          [filledTrackBackground]: vars_css.vars.color.primary,
-          [thumbBackground]: vars_css.vars.color.primary
-        }
-      }),
-      secondary: style.style({
-        vars: {
-          [trackBackground]: vars_css.vars.color.primaryLight,
-          [filledTrackBackground]: vars_css.vars.color.secondary,
-          [thumbBackground]: vars_css.vars.color.secondary
-        }
-      })
-    },
-    disabled: style.style({
-      pointerEvents: "none",
-      vars: {
-        [trackBackground]: "#c0c0c0",
-        [filledTrackBackground]: "#ccc",
-        [thumbBackground]: "#c0c0c0"
-      }
-    })
-  },
-  defaultVariants: {
-    size: "medium",
-    colorScheme: "primary"
-  }
-});
-fileScope.endFileScope();
-exports.slider = slider;

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

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