@blockle/blocks 0.8.6 → 0.8.8

package/README.md

@@ -1,13 +1,11 @@
-# @blockle/blocks
+# @blockle/blocks design system
 
-TODO: Fix ts and add fix script: "release": "yarn ts && yarn test && yarn build && changeset publish"
-
-Blocks design system
+Design system for react with vanilla-extract.
 
 ## Installation
 
 ```bash
-npm install @blockle/blocks
+yarn add @blockle/blocks
 ```
 
 ## Setup
@@ -16,15 +14,13 @@ npm install @blockle/blocks
 import React from 'react';
 
 import '@blockle/blocks/reset.css';
-import { ThemeProvider } from '@blockle/blocks';
+import { BlocksProvider } from '@blockle/blocks';
 import { momotaro } from '@blockle/blocks/themes/momotaro';
 
-// const Link = makeLinkComponent(...)
-
 const App = () => (
-  <ThemeProvider theme={theme} spritePath="/public/" linkComponent={Link}>
-    ...
-  </ThemeProvider>
+  <BlocksProvider theme={momotaro}>
+    <div>Your app here</div>
+  </BlocksProvider>
 );
 ```
 
@@ -34,7 +30,7 @@ const App = () => (
 import React from 'react';
 import { Button } from '@blockle/blocks';
 
-const App = () => <Button>Click me</Button>;
+const App = () => <Button variant="ghost">Click me</Button>;
 ```
 
 ## Theming
@@ -42,9 +38,11 @@ const App = () => <Button>Click me</Button>;
 yourTheme.css.ts
 
 ```jsx
-import { makeTokens, makeComponentTheme, makeTheme } from "@blockle/blocks";
+import { ThemeTokens, makeComponentTheme, makeTheme, style } from "@blockle/blocks";
 
-const tokens = makeTokens({ ... });
+const tokens: ThemeTokens = {
+  // ...
+};
 
 const button = makeComponentTheme('button', {
   base: style({
@@ -58,12 +56,15 @@ const button = makeComponentTheme('button', {
       ...
     })
   },
+  compoundVariants: [],
+  defaultVariants: {
+    variant: 'primary',
+  },
 });
 
-const theme = makeTheme({
+export const theme = makeTheme({
+  name: 'Theme name',
   tokens,
-  components: {
-    button
-  }
+  components,
 });
 ```

package/dist/index.cjs

@@ -16,6 +16,7 @@ const styles_components_Divider_divider_css_cjs = require("./styles/components/D
 const styles_components_Heading_heading_css_cjs = require("./styles/components/Heading/heading.css.cjs");
 const styles_components_Input_input_css_cjs = require("./styles/components/Input/input.css.cjs");
 const styles_components_Radio_radio_css_cjs = require("./styles/components/Radio/radio.css.cjs");
+const styles_components_Switch_switch_css_cjs = require("./styles/components/Switch/switch.css.cjs");
 const styles_components_Text_text_css_cjs = require("./styles/components/Text/text.css.cjs");
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
@@ -529,7 +530,7 @@ const Dialog = ({
     if (!hasAnimationDuration(dialogRef.current)) {
       hide();
     }
-  }, [open]);
+  }, [hide, open]);
   if (!visible) {
     return null;
   }
@@ -660,7 +661,7 @@ const Progress = react.forwardRef(function Progress2({ value, max = 100, classNa
   const containerClassName = useComponentStyles(
     "progress",
     {
-      container: true
+      base: true
     },
     false
   );
@@ -734,6 +735,61 @@ const Stack = ({
     }
   );
 };
+const Switch = react.forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
+  const [isChecked, setIsChecked] = react.useState(defaultChecked || checked || false);
+  const baseClassName = useComponentStyles("switch", { base: true });
+  const sliderClassName = useComponentStyles("switch", { slider: true });
+  react.useEffect(() => {
+    if (checked !== void 0) {
+      setIsChecked(checked);
+    }
+  }, [checked]);
+  const toggle = react.useCallback(() => {
+    setIsChecked((checked2) => {
+      const newValue = !checked2;
+      if (onChange) {
+        onChange(newValue);
+      }
+      return newValue;
+    });
+  }, [onChange]);
+  const onChangeHandler = react.useCallback(
+    (event) => {
+      setIsChecked(event.target.checked);
+      if (onChange) {
+        onChange(event.target.checked);
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classnames(className, styles_components_Switch_switch_css_cjs.container, baseClassName),
+      "data-checked": isChecked,
+      onClick: (event) => {
+        if (event.target.tagName === "INPUT") {
+          return;
+        }
+        toggle();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: styles_components_Switch_switch_css_cjs.input,
+            checked: isChecked,
+            onChange: onChangeHandler,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: sliderClassName, "data-checked": isChecked })
+      ]
+    }
+  ) });
+});
 const Text = react.forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, asChild: true, className: classnames(styles_components_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
 });
@@ -760,6 +816,7 @@ exports.Radio = Radio;
 exports.Slot = Slot;
 exports.Spinner = Spinner;
 exports.Stack = Stack;
+exports.Switch = Switch;
 exports.Text = Text;
 exports.classnames = classnames;
 exports.createSlottable = createSlottable;

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars } from './momotaro.chunk.js';

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
 import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/theme/vars.css.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createContext, forwardRef, Children, isValidElement, cloneElement, useContext, useEffect, useLayoutEffect, useRef, useState, useCallback, useId } from "react";
 import { buttonReset } from "./styles/components/Button/Button.css.mjs";
 import { container, input, icon } from "./styles/components/Checkbox/checkbox.css.mjs";
@@ -16,6 +16,7 @@ import { divider } from "./styles/components/Divider/divider.css.mjs";
 import { heading } from "./styles/components/Heading/heading.css.mjs";
 import { input as input$1 } from "./styles/components/Input/input.css.mjs";
 import { container as container$1, input as input$2, icon as icon$1 } from "./styles/components/Radio/radio.css.mjs";
+import { container as container$2, input as input$3 } from "./styles/components/Switch/switch.css.mjs";
 import { text } from "./styles/components/Text/text.css.mjs";
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
@@ -529,7 +530,7 @@ const Dialog = ({
     if (!hasAnimationDuration(dialogRef.current)) {
       hide();
     }
-  }, [open]);
+  }, [hide, open]);
   if (!visible) {
     return null;
   }
@@ -660,7 +661,7 @@ const Progress = forwardRef(function Progress2({ value, max = 100, className, ..
   const containerClassName = useComponentStyles(
     "progress",
     {
-      container: true
+      base: true
     },
     false
   );
@@ -734,6 +735,61 @@ const Stack = ({
     }
   );
 };
+const Switch = forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
+  const [isChecked, setIsChecked] = useState(defaultChecked || checked || false);
+  const baseClassName = useComponentStyles("switch", { base: true });
+  const sliderClassName = useComponentStyles("switch", { slider: true });
+  useEffect(() => {
+    if (checked !== void 0) {
+      setIsChecked(checked);
+    }
+  }, [checked]);
+  const toggle = useCallback(() => {
+    setIsChecked((checked2) => {
+      const newValue = !checked2;
+      if (onChange) {
+        onChange(newValue);
+      }
+      return newValue;
+    });
+  }, [onChange]);
+  const onChangeHandler = useCallback(
+    (event) => {
+      setIsChecked(event.target.checked);
+      if (onChange) {
+        onChange(event.target.checked);
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classnames(className, container$2, baseClassName),
+      "data-checked": isChecked,
+      onClick: (event) => {
+        if (event.target.tagName === "INPUT") {
+          return;
+        }
+        toggle();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: input$3,
+            checked: isChecked,
+            onChange: onChangeHandler,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: sliderClassName, "data-checked": isChecked })
+      ]
+    }
+  ) });
+});
 const Text = forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
   return /* @__PURE__ */ jsx(Box, { ref, asChild: true, className: classnames(text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsx(Tag, { children }) });
 });
@@ -755,6 +811,7 @@ export {
   Slot,
   Spinner,
   Stack,
+  Switch,
   Text,
   atoms,
   breakpointQuery,

package/dist/momotaro.chunk.d.ts

@@ -7,6 +7,7 @@ declare const atoms: ((props: {
     readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
     readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
     readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
+    readonly borderWidth?: ("small" | "medium" | "large") | undefined;
     readonly border?: "none" | undefined;
     readonly bottom?: 0 | undefined;
     readonly boxShadow?: ("small" | "medium" | "large") | undefined;
@@ -231,7 +232,7 @@ declare const atoms: ((props: {
         wide?: "center" | "flex-start" | "flex-end" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
 }) => string) & {
-    properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
+    properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };
 
 declare const breakpoints: {
@@ -363,23 +364,28 @@ type LabelTheme = {
     };
 };
 type ProgressTheme = {
-    container: string;
+    base: string;
     bar: string;
     variants: {
         indeterminate: boolean;
     };
 };
+type SwitchTheme = {
+    base: string;
+    slider: string;
+};
 type ComponentThemes = {
     button: ButtonTheme;
-    link: LinkTheme;
-    spinner: SpinnerTheme;
-    divider: DividerTheme;
+    checkbox: CheckboxTheme;
     dialog: DialogTheme;
+    divider: DividerTheme;
     input: InputTheme;
-    checkbox: CheckboxTheme;
-    radio: RadioTheme;
     label: LabelTheme;
+    link: LinkTheme;
     progress: ProgressTheme;
+    radio: RadioTheme;
+    spinner: SpinnerTheme;
+    switch: SwitchTheme;
 };
 /**
  * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
@@ -586,6 +592,7 @@ declare const Box: react.ForwardRefExoticComponent<{
     readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
     readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
     readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
+    readonly borderWidth?: ("small" | "medium" | "large") | undefined;
     readonly border?: "none" | undefined;
     readonly bottom?: 0 | undefined;
     readonly boxShadow?: ("small" | "medium" | "large") | undefined;
@@ -997,6 +1004,13 @@ type StackProps = {
 } & MarginAtoms & PaddingAtoms;
 declare const Stack: React.FC<StackProps>;
 
+type SwitchProps = {
+    onChange?: (value: boolean) => void;
+} & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
+declare const Switch: react.ForwardRefExoticComponent<{
+    onChange?: ((value: boolean) => void) | undefined;
+} & Omit<HTMLElementProps<HTMLInputElement>, "onChange"> & react.RefAttributes<HTMLInputElement>>;
+
 type TextProps = {
     children: React.ReactNode;
     tag?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup' | 'label';
@@ -1045,4 +1059,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
 
 declare const momotaro: Theme;
 
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars };
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars };

package/dist/styles/components/Dialog/dialog.css.cjs

@@ -14,7 +14,8 @@ const backdrop = css.style({
       height: "100%",
       left: 0,
       top: 0,
-      overflow: "hidden"
+      overflow: "hidden",
+      zIndex: 1e3
     }
   }
 }, "backdrop");

package/dist/styles/components/Dialog/dialog.css.mjs

@@ -13,7 +13,8 @@ const backdrop = style({
       height: "100%",
       left: 0,
       top: 0,
-      overflow: "hidden"
+      overflow: "hidden",
+      zIndex: 1e3
     }
   }
 }, "backdrop");

package/dist/styles/components/Switch/switch.css.cjs

@@ -0,0 +1,26 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/Switch/switch.css.ts?used", "blocks");
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      userSelect: "none",
+      position: "relative"
+    }
+  }
+}, "container");
+const input = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      opacity: 0,
+      maxHeight: 0,
+      maxWidth: 0
+    }
+  }
+}, "input");
+fileScope.endFileScope();
+exports.container = container;
+exports.input = input;

package/dist/styles/components/Switch/switch.css.mjs

@@ -0,0 +1,27 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/Switch/switch.css.ts?used", "blocks");
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      cursor: "pointer",
+      userSelect: "none",
+      position: "relative"
+    }
+  }
+}, "container");
+const input = style({
+  "@layer": {
+    [blocksLayer]: {
+      opacity: 0,
+      maxHeight: 0,
+      maxWidth: 0
+    }
+  }
+}, "input");
+endFileScope();
+export {
+  container,
+  input
+};

package/dist/styles/lib/css/atoms/atomicProperties.cjs

@@ -5,6 +5,7 @@ const unresponsiveProperties = {
   backgroundColor: colorWithCurrentColor,
   borderColor: colorWithCurrentColor,
   borderRadius: styles_lib_theme_vars_css_cjs.vars.borderRadius,
+  borderWidth: styles_lib_theme_vars_css_cjs.vars.borderWidth,
   border: ["none"],
   bottom: [0],
   boxShadow: styles_lib_theme_vars_css_cjs.vars.shadow,

package/dist/styles/lib/css/atoms/atomicProperties.mjs

@@ -4,6 +4,7 @@ const unresponsiveProperties = {
   backgroundColor: colorWithCurrentColor,
   borderColor: colorWithCurrentColor,
   borderRadius: vars.borderRadius,
+  borderWidth: vars.borderWidth,
   border: ["none"],
   bottom: [0],
   boxShadow: vars.shadow,

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

@@ -6,7 +6,8 @@ const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/make
 const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
 const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
-const primaryColor = css.createVar("primaryColor");
+const intentColor = css.createVar("intentColor");
+const hoverBackgroundColor = css.createVar("hoverBackgroundColor");
 const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("button", {
   base: styles_lib_css_style_style_cjs.style([{
     display: "inline-flex",
@@ -15,40 +16,30 @@ const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("butto
     borderRadius: "medium",
     fontWeight: "medium",
     // Space between `startSlot | children | endSlot`
-    gap: "small"
+    gap: "small",
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: hoverBackgroundColor
+      }
+    }
   }, styles_themes_momotaro_components_helpers_css_cjs.clickable]),
   variants: {
     variant: {
       solid: styles_lib_css_style_style_cjs.style({
         color: styles_lib_theme_vars_css_cjs.vars.color.white,
-        backgroundColor: primaryColor,
-        border: "none",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
-          }
-        }
+        backgroundColor: intentColor,
+        border: "none"
       }),
       outline: styles_lib_css_style_style_cjs.style({
-        color: primaryColor,
-        borderWidth: styles_lib_theme_vars_css_cjs.vars.borderWidth.small,
+        color: intentColor,
+        borderWidth: "small",
         borderStyle: "solid",
-        borderColor: primaryColor,
-        background: "transparent",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryLight
-          }
-        }
+        borderColor: intentColor,
+        background: "transparent"
       }),
       ghost: styles_lib_css_style_style_cjs.style({
-        color: primaryColor,
-        background: "transparent",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryLight
-          }
-        }
+        color: intentColor,
+        background: "transparent"
       })
     },
     size: {
@@ -68,39 +59,40 @@ const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("butto
     intent: {
       neutral: styles_lib_css_style_style_cjs.style({
         vars: {
-          [primaryColor]: styles_lib_theme_vars_css_cjs.vars.color.primary
+          [intentColor]: styles_lib_theme_vars_css_cjs.vars.color.primary,
+          [hoverBackgroundColor]: styles_lib_theme_vars_css_cjs.vars.color.primaryLight
         }
       }),
       danger: styles_lib_css_style_style_cjs.style({
         vars: {
-          [primaryColor]: styles_lib_theme_vars_css_cjs.vars.color.danger
+          [intentColor]: styles_lib_theme_vars_css_cjs.vars.color.danger,
+          [hoverBackgroundColor]: "#fff8f7",
+          [styles_themes_momotaro_components_helpers_css_cjs.focusRingColor]: styles_lib_theme_vars_css_cjs.vars.color.danger
         }
       })
     }
   },
-  // compoundVariants: [
-  //   {
-  //     variants: {
-  //       intent: 'danger',
-  //       variant: 'ghost',
-  //       loading: true,
-  //     },
-  //     style: style({
-  //       color: vars.color.danger,
-  //       fontSize: vars.fontSize.small,
-  //       background: 'red',
-  //     }),
-  //   },
-  //   {
-  //     variants: {
-  //       variant: 'solid',
-  //       size: 'large',
-  //     },
-  //     style: style({
-  //       transform: 'scale(2)',
-  //     }),
-  //   },
-  // ],
+  compoundVariants: [{
+    variants: {
+      variant: "solid",
+      intent: "neutral"
+    },
+    style: styles_lib_css_style_style_cjs.style({
+      vars: {
+        [hoverBackgroundColor]: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
+      }
+    })
+  }, {
+    variants: {
+      variant: "solid",
+      intent: "danger"
+    },
+    style: styles_lib_css_style_style_cjs.style({
+      vars: {
+        [hoverBackgroundColor]: "#f9b1a9"
+      }
+    })
+  }],
   defaultVariants: {
     size: "small",
     variant: "solid",

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

@@ -3,9 +3,10 @@ import { createVar } from "@vanilla-extract/css";
 import { style } from "../../../lib/css/style/style.mjs";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { vars } from "../../../lib/theme/vars.css.mjs";
-import { clickable } from "./helpers.css.mjs";
+import { clickable, focusRingColor } from "./helpers.css.mjs";
 setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
-const primaryColor = createVar("primaryColor");
+const intentColor = createVar("intentColor");
+const hoverBackgroundColor = createVar("hoverBackgroundColor");
 const button = makeComponentTheme("button", {
   base: style([{
     display: "inline-flex",
@@ -14,40 +15,30 @@ const button = makeComponentTheme("button", {
     borderRadius: "medium",
     fontWeight: "medium",
     // Space between `startSlot | children | endSlot`
-    gap: "small"
+    gap: "small",
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: hoverBackgroundColor
+      }
+    }
   }, clickable]),
   variants: {
     variant: {
       solid: style({
         color: vars.color.white,
-        backgroundColor: primaryColor,
-        border: "none",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: vars.color.primaryDark
-          }
-        }
+        backgroundColor: intentColor,
+        border: "none"
       }),
       outline: style({
-        color: primaryColor,
-        borderWidth: vars.borderWidth.small,
+        color: intentColor,
+        borderWidth: "small",
         borderStyle: "solid",
-        borderColor: primaryColor,
-        background: "transparent",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: vars.color.primaryLight
-          }
-        }
+        borderColor: intentColor,
+        background: "transparent"
       }),
       ghost: style({
-        color: primaryColor,
-        background: "transparent",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: vars.color.primaryLight
-          }
-        }
+        color: intentColor,
+        background: "transparent"
       })
     },
     size: {
@@ -67,39 +58,40 @@ const button = makeComponentTheme("button", {
     intent: {
       neutral: style({
         vars: {
-          [primaryColor]: vars.color.primary
+          [intentColor]: vars.color.primary,
+          [hoverBackgroundColor]: vars.color.primaryLight
         }
       }),
       danger: style({
         vars: {
-          [primaryColor]: vars.color.danger
+          [intentColor]: vars.color.danger,
+          [hoverBackgroundColor]: "#fff8f7",
+          [focusRingColor]: vars.color.danger
         }
       })
     }
   },
-  // compoundVariants: [
-  //   {
-  //     variants: {
-  //       intent: 'danger',
-  //       variant: 'ghost',
-  //       loading: true,
-  //     },
-  //     style: style({
-  //       color: vars.color.danger,
-  //       fontSize: vars.fontSize.small,
-  //       background: 'red',
-  //     }),
-  //   },
-  //   {
-  //     variants: {
-  //       variant: 'solid',
-  //       size: 'large',
-  //     },
-  //     style: style({
-  //       transform: 'scale(2)',
-  //     }),
-  //   },
-  // ],
+  compoundVariants: [{
+    variants: {
+      variant: "solid",
+      intent: "neutral"
+    },
+    style: style({
+      vars: {
+        [hoverBackgroundColor]: vars.color.primaryDark
+      }
+    })
+  }, {
+    variants: {
+      variant: "solid",
+      intent: "danger"
+    },
+    style: style({
+      vars: {
+        [hoverBackgroundColor]: "#f9b1a9"
+      }
+    })
+  }],
   defaultVariants: {
     size: "small",
     variant: "solid",

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

@@ -3,11 +3,12 @@ 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");
 fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts?used", "blocks");
+const focusRingColor = css.createVar("focusRingColor");
 const focusable = css.style({
   ":focus-visible": {
     outline: "2px solid transparent",
     outlineOffset: "2px",
-    boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow,
+    boxShadow: `0 0 1px 2px ${css.fallbackVar(focusRingColor, "#AF8EFF")}`,
     transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
     transitionProperty: "box-shadow"
   },
@@ -32,9 +33,10 @@ const focusable = css.style({
 }, "focusable");
 const clickable = css.style([focusable, {
   ":active": {
-    transform: "scale(0.98)"
+    transform: "scale(0.975)"
   }
 }], "clickable");
 fileScope.endFileScope();
 exports.clickable = clickable;
+exports.focusRingColor = focusRingColor;
 exports.focusable = focusable;

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

@@ -1,12 +1,13 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
+import { createVar, style, fallbackVar } from "@vanilla-extract/css";
 import { vars } from "../../../lib/theme/vars.css.mjs";
 setFileScope("src/themes/momotaro/components/helpers.css.ts?used", "blocks");
+const focusRingColor = createVar("focusRingColor");
 const focusable = style({
   ":focus-visible": {
     outline: "2px solid transparent",
     outlineOffset: "2px",
-    boxShadow: vars.focus.boxShadow,
+    boxShadow: `0 0 1px 2px ${fallbackVar(focusRingColor, "#AF8EFF")}`,
     transitionDuration: vars.transition.fast,
     transitionProperty: "box-shadow"
   },
@@ -31,11 +32,12 @@ const focusable = style({
 }, "focusable");
 const clickable = style([focusable, {
   ":active": {
-    transform: "scale(0.98)"
+    transform: "scale(0.975)"
   }
 }], "clickable");
 endFileScope();
 export {
   clickable,
+  focusRingColor,
   focusable
 };

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

@@ -9,6 +9,7 @@ const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs")
 const styles_themes_momotaro_components_progress_css_cjs = require("./progress.css.cjs");
 const styles_themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
 const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
+const styles_themes_momotaro_components_switch_css_cjs = require("./switch.css.cjs");
 const components = {
   button: styles_themes_momotaro_components_button_css_cjs.button,
   checkbox: styles_themes_momotaro_components_checkbox_css_cjs.checkbox,
@@ -19,6 +20,7 @@ const components = {
   link: styles_themes_momotaro_components_link_css_cjs.link,
   progress: styles_themes_momotaro_components_progress_css_cjs.progress,
   radio: styles_themes_momotaro_components_radio_css_cjs.radio,
-  spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner
+  spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
+  switch: styles_themes_momotaro_components_switch_css_cjs.switchTheme
 };
 exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -8,6 +8,7 @@ import { link } from "./link.css.mjs";
 import { progress } from "./progress.css.mjs";
 import { radio } from "./radio.css.mjs";
 import { spinner } from "./spinner.css.mjs";
+import { switchTheme } from "./switch.css.mjs";
 const components = {
   button,
   checkbox,
@@ -18,7 +19,8 @@ const components = {
   link,
   progress,
   radio,
-  spinner
+  spinner,
+  switch: switchTheme
 };
 export {
   components

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

@@ -2,6 +2,7 @@
 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");
 fileScope.setFileScope("src/themes/momotaro/components/progress.css.ts?used", "blocks");
 const indeterminateAnimation = css.keyframes({
@@ -13,15 +14,15 @@ const indeterminateAnimation = css.keyframes({
   }
 }, "indeterminateAnimation");
 const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("progress", {
-  container: css.style([{
-    height: 6
+  base: css.style([{
+    height: 8
   }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     width: "full",
     borderRadius: "small",
     backgroundColor: "textLight",
     color: "primary",
     overflow: "hidden"
-  })], "progress_container"),
+  })], "progress_base"),
   bar: css.style({
     borderRadius: "inherit",
     "@media": {
@@ -32,10 +33,19 @@ const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("pro
   }, "progress_bar"),
   variants: {
     indeterminate: css.style({
-      animation: `${indeterminateAnimation} 10s ease-in-out infinite`,
       "@media": {
+        // For reduce motion we show a striped pattern instead of animating
+        "(prefers-reduced-motion: reduce)": {
+          backgroundImage: `repeating-linear-gradient(
+            45deg,
+            transparent,
+            transparent 20px,
+            ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 20px,
+            ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 40px
+          )`
+        },
         "(prefers-reduced-motion: no-preference)": {
-          animationDuration: "3s"
+          animation: `${indeterminateAnimation} 3s ease-in-out infinite`
         }
       }
     }, "progress_variants_indeterminate")

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

@@ -1,6 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { keyframes, style } 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";
 setFileScope("src/themes/momotaro/components/progress.css.ts?used", "blocks");
 const indeterminateAnimation = keyframes({
@@ -12,15 +13,15 @@ const indeterminateAnimation = keyframes({
   }
 }, "indeterminateAnimation");
 const progress = makeComponentTheme("progress", {
-  container: style([{
-    height: 6
+  base: style([{
+    height: 8
   }, atoms({
     width: "full",
     borderRadius: "small",
     backgroundColor: "textLight",
     color: "primary",
     overflow: "hidden"
-  })], "progress_container"),
+  })], "progress_base"),
   bar: style({
     borderRadius: "inherit",
     "@media": {
@@ -31,10 +32,19 @@ const progress = makeComponentTheme("progress", {
   }, "progress_bar"),
   variants: {
     indeterminate: style({
-      animation: `${indeterminateAnimation} 10s ease-in-out infinite`,
       "@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)": {
-          animationDuration: "3s"
+          animation: `${indeterminateAnimation} 3s ease-in-out infinite`
         }
       }
     }, "progress_variants_indeterminate")

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

@@ -0,0 +1,58 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+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 styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/switch.css.ts?used", "blocks");
+const activeScaleFactor = css.createVar("activeScaleFactor");
+const switchTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("switch", {
+  base: styles_lib_css_style_style_cjs.style([{
+    width: 52,
+    height: 32,
+    borderRadius: "xlarge",
+    backgroundColor: "textLight",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "background-color 120ms linear"
+      }
+    },
+    selectors: {
+      '&[data-checked="true"]': {
+        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.secondary
+      }
+    },
+    // Scale the switch when it's `:active`
+    vars: {
+      [activeScaleFactor]: "1"
+    },
+    ":active": {
+      vars: {
+        [activeScaleFactor]: "0.96"
+      }
+    }
+  }, styles_themes_momotaro_components_helpers_css_cjs.focusable]),
+  slider: styles_lib_css_style_style_cjs.style({
+    width: 24,
+    height: 24,
+    top: 4,
+    left: 4,
+    transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
+    position: "absolute",
+    backgroundColor: "white",
+    borderRadius: "xlarge",
+    selectors: {
+      '&[data-checked="true"]': {
+        transform: `translateX(20px) scale(${activeScaleFactor})`
+      }
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "transform 120ms ease-out"
+      }
+    }
+  })
+});
+fileScope.endFileScope();
+exports.switchTheme = switchTheme;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -60,26 +60,27 @@
     "@changesets/cli": "^2.26.2",
     "@crackle/cli": "^0.12.4",
     "@crackle/core": "^0.28.0",
-    "@storybook/addon-a11y": "^7.5.2",
+    "@storybook/addon-a11y": "^7.5.3",
     "@storybook/addon-coverage": "^0.0.9",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/blocks": "^7.5.2",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.5.2",
-    "@storybook/react-vite": "^7.5.2",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.1.0",
     "@types/react": "^18.2.34",
     "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "@vanilla-extract/vite-plugin": "^3.8.2",
     "@vitest/coverage-v8": "^0.34.6",
+    "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-prettier": "^5.0.1",
@@ -90,7 +91,7 @@
     "jsdom": "^22.1.0",
     "prettier": "^3.0.3",
     "prop-types": "^15.8.1",
-    "storybook": "^7.5.2",
+    "storybook": "^7.5.3",
     "typescript": "^5.2.2",
     "vitest": "^0.34.6"
   },