@blockle/blocks 0.8.1 → 0.8.3

package/dist/index.cjs

@@ -352,6 +352,23 @@ const useFocusLock = ({ ref, active }) => {
     };
   }, [active]);
 };
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
+  react.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === key) {
+        callback();
+      }
+    }
+    document.addEventListener(type, handleKeyDown);
+    return () => {
+      document.removeEventListener(type, handleKeyDown);
+    };
+  }, [callback, enabled, key, type]);
+};
 const useLayer = () => {
   const layerRef = react.useRef();
   react.useEffect(
@@ -372,7 +389,6 @@ const useLayer = () => {
     return layerRef.current;
   };
 };
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
 const usePreventBodyScroll = (enabled = true) => {
   useIsomorphicLayoutEffect(() => {
     if (!enabled) {
@@ -394,6 +410,7 @@ const usePreventBodyScroll = (enabled = true) => {
       document.body.style.overflow = prevOverflow;
       document.body.style.overflowY = "";
       document.body.style.width = "";
+      document.body.style.top = "";
       document.documentElement.scrollTop = prevScrollTop;
     };
   }, [enabled]);
@@ -423,6 +440,13 @@ const useVisibilityState = (open) => {
   }, [open]);
   return [visible, hide];
 };
+function hasAnimationDuration(element) {
+  if (!element) {
+    return false;
+  }
+  const style = window.getComputedStyle(element);
+  return style.transitionDuration !== "0s" || style.animationDuration !== "0s";
+}
 const Portal = ({ children, container }) => {
   const context = useTheme();
   return reactDom.createPortal(
@@ -452,6 +476,9 @@ const Dialog = ({
   size,
   ...restProps
 }) => {
+  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
+  const dialogClassName = useComponentStyles("dialog", { dialog: true, variants: { size } });
+  const backdropRef = react.useRef(null);
   const dialogRef = react.useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
@@ -464,55 +491,63 @@ const Dialog = ({
     },
     [onRequestClose]
   );
-  const onAnimationEnd = react.useCallback((event) => {
-    if (event.animationName === styles_components_Dialog_dialog_css_cjs.backdropLeaveAnimation) {
-      event.stopPropagation();
-      hide();
-    }
-  }, []);
   useFocusLock({ ref: dialogRef, active: open && enabled });
   useRestoreFocus(open);
   const isNested = useNestedDialog(visible);
   usePreventBodyScroll(visible && !isNested);
-  react.useEffect(() => {
-    if (!open || !enabled) {
+  useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
+  useIsomorphicLayoutEffect(() => {
+    var _a, _b;
+    if (!open) {
+      (_a = backdropRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
       return;
     }
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onRequestClose();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
+    let timer = requestAnimationFrame(() => {
+      timer = requestAnimationFrame(() => {
+        var _a2, _b2;
+        (_a2 = backdropRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
+      });
+    });
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      cancelAnimationFrame(timer);
     };
-  }, [open, enabled]);
-  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
-  const dialogClassName = useComponentStyles("dialog", { base: true, variants: { size } });
+  }, [open, visible]);
+  const onAnimationEnd = react.useCallback(() => {
+    if (!open) {
+      hide();
+    }
+  }, [hide, open]);
+  react.useEffect(() => {
+    if (open) {
+      return;
+    }
+    if (!hasAnimationDuration(dialogRef.current)) {
+      hide();
+    }
+  }, [open]);
   if (!visible) {
     return null;
   }
+  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
-      className: classnames(styles_components_Dialog_dialog_css_cjs.backdrop, !open && styles_components_Dialog_dialog_css_cjs.backdropLeave, backdropClassName),
-      display: "flex",
-      placeItems: "center",
+      ref: backdropRef,
+      className: classnames(styles_components_Dialog_dialog_css_cjs.backdrop, backdropClassName),
+      "data-open": dataOpen,
       onClick: onBackdropClick,
       onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "dialog",
         {
           ref: dialogRef,
           "aria-modal": "true",
           open: true,
-          className: classnames(
-            styles_components_Dialog_dialog_css_cjs.dialog,
-            !open && styles_components_Dialog_dialog_css_cjs.dialogLeave,
-            dialogClassName,
-            className
-          ),
+          "data-open": dataOpen,
+          className: classnames(dialogClassName, className),
           ...restProps,
           children
         }
@@ -618,6 +653,44 @@ const Link = react.forwardRef(function Link2({ asChild, className, children, var
     }
   );
 });
+const Progress = react.forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles(
+    "progress",
+    {
+      container: true
+    },
+    false
+  );
+  const barClassName = useComponentStyles(
+    "progress",
+    { bar: true, variants: { indeterminate: value === void 0 } },
+    false
+  );
+  const progress = value === void 0 ? 0 : value / max * 100;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      ref,
+      className: classnames(containerClassName, className),
+      overflow: "hidden",
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      ...restProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Box,
+        {
+          className: classnames(barClassName),
+          backgroundColor: "currentColor",
+          width: "full",
+          height: "full",
+          style: { transform: value === void 0 ? void 0 : `translateX(-${100 - progress}%)` }
+        }
+      )
+    }
+  );
+});
 const Radio = react.forwardRef(function Checkbox3({ name, label, className, ...restProps }, ref) {
   const containerClassName = useComponentStyles("radio", { base: true }, false);
   const iconClassName = useComponentStyles("radio", { icon: true }, false);
@@ -678,6 +751,7 @@ exports.Input = Input;
 exports.Label = Label;
 exports.Link = Link;
 exports.Portal = Portal;
+exports.Progress = Progress;
 exports.Radio = Radio;
 exports.Slot = Slot;
 exports.Spinner = Spinner;
@@ -687,3 +761,6 @@ exports.classnames = classnames;
 exports.createSlottable = createSlottable;
 exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
 exports.useComponentStyles = useComponentStyles;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useKeyboard = useKeyboard;
+exports.usePreventBodyScroll = usePreventBodyScroll;

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, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, 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, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars } from './momotaro.chunk.js';

package/dist/index.mjs

@@ -6,10 +6,10 @@ 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 { createContext, forwardRef, Children, isValidElement, cloneElement, useContext, useEffect, useRef, useLayoutEffect, useState, useCallback, useId } from "react";
+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";
-import { backdropLeaveAnimation, backdropLeave, backdrop, dialogLeave, dialog } from "./styles/components/Dialog/dialog.css.mjs";
+import { backdrop } from "./styles/components/Dialog/dialog.css.mjs";
 import { createPortal } from "react-dom";
 import { divider } from "./styles/components/Divider/divider.css.mjs";
 import { heading } from "./styles/components/Heading/heading.css.mjs";
@@ -352,6 +352,23 @@ const useFocusLock = ({ ref, active }) => {
     };
   }, [active]);
 };
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === key) {
+        callback();
+      }
+    }
+    document.addEventListener(type, handleKeyDown);
+    return () => {
+      document.removeEventListener(type, handleKeyDown);
+    };
+  }, [callback, enabled, key, type]);
+};
 const useLayer = () => {
   const layerRef = useRef();
   useEffect(
@@ -372,7 +389,6 @@ const useLayer = () => {
     return layerRef.current;
   };
 };
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const usePreventBodyScroll = (enabled = true) => {
   useIsomorphicLayoutEffect(() => {
     if (!enabled) {
@@ -394,6 +410,7 @@ const usePreventBodyScroll = (enabled = true) => {
       document.body.style.overflow = prevOverflow;
       document.body.style.overflowY = "";
       document.body.style.width = "";
+      document.body.style.top = "";
       document.documentElement.scrollTop = prevScrollTop;
     };
   }, [enabled]);
@@ -423,6 +440,13 @@ const useVisibilityState = (open) => {
   }, [open]);
   return [visible, hide];
 };
+function hasAnimationDuration(element) {
+  if (!element) {
+    return false;
+  }
+  const style = window.getComputedStyle(element);
+  return style.transitionDuration !== "0s" || style.animationDuration !== "0s";
+}
 const Portal = ({ children, container: container2 }) => {
   const context = useTheme();
   return createPortal(
@@ -452,6 +476,9 @@ const Dialog = ({
   size,
   ...restProps
 }) => {
+  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
+  const dialogClassName = useComponentStyles("dialog", { dialog: true, variants: { size } });
+  const backdropRef = useRef(null);
   const dialogRef = useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
@@ -464,55 +491,63 @@ const Dialog = ({
     },
     [onRequestClose]
   );
-  const onAnimationEnd = useCallback((event) => {
-    if (event.animationName === backdropLeaveAnimation) {
-      event.stopPropagation();
-      hide();
-    }
-  }, []);
   useFocusLock({ ref: dialogRef, active: open && enabled });
   useRestoreFocus(open);
   const isNested = useNestedDialog(visible);
   usePreventBodyScroll(visible && !isNested);
-  useEffect(() => {
-    if (!open || !enabled) {
+  useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
+  useIsomorphicLayoutEffect(() => {
+    var _a, _b;
+    if (!open) {
+      (_a = backdropRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
       return;
     }
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onRequestClose();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
+    let timer = requestAnimationFrame(() => {
+      timer = requestAnimationFrame(() => {
+        var _a2, _b2;
+        (_a2 = backdropRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
+      });
+    });
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      cancelAnimationFrame(timer);
     };
-  }, [open, enabled]);
-  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
-  const dialogClassName = useComponentStyles("dialog", { base: true, variants: { size } });
+  }, [open, visible]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      hide();
+    }
+  }, [hide, open]);
+  useEffect(() => {
+    if (open) {
+      return;
+    }
+    if (!hasAnimationDuration(dialogRef.current)) {
+      hide();
+    }
+  }, [open]);
   if (!visible) {
     return null;
   }
+  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
   return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
     Box,
     {
-      className: classnames(backdrop, !open && backdropLeave, backdropClassName),
-      display: "flex",
-      placeItems: "center",
+      ref: backdropRef,
+      className: classnames(backdrop, backdropClassName),
+      "data-open": dataOpen,
       onClick: onBackdropClick,
       onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
       children: /* @__PURE__ */ jsx(
         "dialog",
         {
           ref: dialogRef,
           "aria-modal": "true",
           open: true,
-          className: classnames(
-            dialog,
-            !open && dialogLeave,
-            dialogClassName,
-            className
-          ),
+          "data-open": dataOpen,
+          className: classnames(dialogClassName, className),
           ...restProps,
           children
         }
@@ -618,6 +653,44 @@ const Link = forwardRef(function Link2({ asChild, className, children, variant,
     }
   );
 });
+const Progress = forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles(
+    "progress",
+    {
+      container: true
+    },
+    false
+  );
+  const barClassName = useComponentStyles(
+    "progress",
+    { bar: true, variants: { indeterminate: value === void 0 } },
+    false
+  );
+  const progress = value === void 0 ? 0 : value / max * 100;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      className: classnames(containerClassName, className),
+      overflow: "hidden",
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      ...restProps,
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: classnames(barClassName),
+          backgroundColor: "currentColor",
+          width: "full",
+          height: "full",
+          style: { transform: value === void 0 ? void 0 : `translateX(-${100 - progress}%)` }
+        }
+      )
+    }
+  );
+});
 const Radio = forwardRef(function Checkbox3({ name, label, className, ...restProps }, ref) {
   const containerClassName = useComponentStyles("radio", { base: true }, false);
   const iconClassName = useComponentStyles("radio", { icon: true }, false);
@@ -674,6 +747,7 @@ export {
   Label,
   Link,
   Portal,
+  Progress,
   Radio,
   Slot,
   Spinner,
@@ -687,5 +761,8 @@ export {
   makeTheme,
   useComponentStyleDefaultProps,
   useComponentStyles,
+  useIsomorphicLayoutEffect,
+  useKeyboard,
+  usePreventBodyScroll,
   vars
 };

package/dist/momotaro.chunk.d.ts

@@ -1,6 +1,6 @@
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 import * as react from 'react';
-import react__default from 'react';
+import react__default, { useEffect } from 'react';
 
 declare const atoms: ((props: {
     readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
@@ -316,8 +316,8 @@ type DividerTheme = {
     };
 };
 type DialogTheme = {
-    base: string;
     backdrop: string;
+    dialog: string;
     variants: {
         size: 'small' | 'medium' | 'large';
     };
@@ -351,6 +351,13 @@ type LabelTheme = {
         required: boolean;
     };
 };
+type ProgressTheme = {
+    container: string;
+    bar: string;
+    variants: {
+        indeterminate: boolean;
+    };
+};
 type ComponentThemes = {
     button: ButtonTheme;
     link: LinkTheme;
@@ -361,6 +368,7 @@ type ComponentThemes = {
     checkbox: CheckboxTheme;
     radio: RadioTheme;
     label: LabelTheme;
+    progress: ProgressTheme;
 };
 /**
  * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
@@ -931,6 +939,19 @@ type PortalProps = {
 };
 declare const Portal: React.FC<PortalProps>;
 
+type ProgressProps = {
+    /**
+     * The value of the progress bar, between 0 and 100.
+     * If undefined, the progress bar will be indeterminate.
+     */
+    value?: number;
+    max?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    'aria-labelledby'?: string;
+};
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLProgressElement>>;
+
 type RadioProps = {
     name: string;
     value: string;
@@ -968,7 +989,7 @@ declare const Stack: React.FC<StackProps>;
 
 type TextProps = {
     children: React.ReactNode;
-    tag?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup';
+    tag?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup' | 'label';
     asChild?: boolean;
 } & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
 declare const Text: React.FC<TextProps>;
@@ -996,9 +1017,22 @@ type Components = {
 };
 declare const useComponentStyleDefaultProps: <T extends keyof ComponentThemes>(name: T) => Components[T];
 
+/**
+ * useLayoutEffect is not avaible on server side use useEffect instead.
+ */
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+
+type UseKeyboardOptions = {
+    enabled?: boolean;
+    type?: 'keydown' | 'keyup';
+};
+declare const useKeyboard: (key: string, callback: () => void, { enabled, type }?: UseKeyboardOptions) => void;
+
+declare const usePreventBodyScroll: (enabled?: boolean) => void;
+
 type Args = null | undefined | boolean | string;
 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, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, 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, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars };

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

@@ -3,81 +3,20 @@ 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/Dialog/dialog.css.ts?used", "blocks");
-const backdropEnterAnimation = css.keyframes({
-  "0%": {
-    opacity: 0
-  },
-  "100%": {
-    opacity: 1
-  }
-}, "backdropEnterAnimation");
-const backdropLeaveAnimation = css.keyframes({
-  "0%": {
-    opacity: 1
-  },
-  "100%": {
-    opacity: 0
-  }
-}, "backdropLeaveAnimation");
-const dialogEnterAnimation = css.keyframes({
-  "0%": {
-    transform: "translateY(-34px)"
-  },
-  "100%": {
-    transform: "translateY(0)"
-  }
-}, "dialogEnterAnimation");
-const dialogLeaveAnimation = css.keyframes({
-  "0%": {
-    transform: "translateY(0)"
-  },
-  "100%": {
-    transform: "translateY(-34px)"
-  }
-}, "dialogLeaveAnimation");
 const backdrop = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
       contain: "layout",
+      display: "flex",
+      placeItems: "center",
       position: "fixed",
       width: "100%",
       height: "100%",
       left: 0,
       top: 0,
-      overflow: "hidden",
-      opacity: "0",
-      animationName: backdropEnterAnimation,
-      animationDuration: "100ms",
-      animationFillMode: "both"
+      overflow: "hidden"
     }
   }
 }, "backdrop");
-const backdropLeave = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      animationName: backdropLeaveAnimation
-    }
-  }
-}, "backdropLeave");
-const dialog = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      animationName: dialogEnterAnimation,
-      animationDuration: "160ms",
-      animationFillMode: "both"
-    }
-  }
-}, "dialog");
-const dialogLeave = css.style({
-  "@layer": {
-    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      animationName: dialogLeaveAnimation
-    }
-  }
-}, "dialogLeave");
 fileScope.endFileScope();
 exports.backdrop = backdrop;
-exports.backdropLeave = backdropLeave;
-exports.backdropLeaveAnimation = backdropLeaveAnimation;
-exports.dialog = dialog;
-exports.dialogLeave = dialogLeave;

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

@@ -1,84 +1,23 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { keyframes, style } from "@vanilla-extract/css";
+import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/Dialog/dialog.css.ts?used", "blocks");
-const backdropEnterAnimation = keyframes({
-  "0%": {
-    opacity: 0
-  },
-  "100%": {
-    opacity: 1
-  }
-}, "backdropEnterAnimation");
-const backdropLeaveAnimation = keyframes({
-  "0%": {
-    opacity: 1
-  },
-  "100%": {
-    opacity: 0
-  }
-}, "backdropLeaveAnimation");
-const dialogEnterAnimation = keyframes({
-  "0%": {
-    transform: "translateY(-34px)"
-  },
-  "100%": {
-    transform: "translateY(0)"
-  }
-}, "dialogEnterAnimation");
-const dialogLeaveAnimation = keyframes({
-  "0%": {
-    transform: "translateY(0)"
-  },
-  "100%": {
-    transform: "translateY(-34px)"
-  }
-}, "dialogLeaveAnimation");
 const backdrop = style({
   "@layer": {
     [blocksLayer]: {
       contain: "layout",
+      display: "flex",
+      placeItems: "center",
       position: "fixed",
       width: "100%",
       height: "100%",
       left: 0,
       top: 0,
-      overflow: "hidden",
-      opacity: "0",
-      animationName: backdropEnterAnimation,
-      animationDuration: "100ms",
-      animationFillMode: "both"
+      overflow: "hidden"
     }
   }
 }, "backdrop");
-const backdropLeave = style({
-  "@layer": {
-    [blocksLayer]: {
-      animationName: backdropLeaveAnimation
-    }
-  }
-}, "backdropLeave");
-const dialog = style({
-  "@layer": {
-    [blocksLayer]: {
-      animationName: dialogEnterAnimation,
-      animationDuration: "160ms",
-      animationFillMode: "both"
-    }
-  }
-}, "dialog");
-const dialogLeave = style({
-  "@layer": {
-    [blocksLayer]: {
-      animationName: dialogLeaveAnimation
-    }
-  }
-}, "dialogLeave");
 endFileScope();
 export {
-  backdrop,
-  backdropLeave,
-  backdropLeaveAnimation,
-  dialog,
-  dialogLeave
+  backdrop
 };

package/dist/styles/components/Input/input.css.cjs

@@ -6,7 +6,12 @@ fileScope.setFileScope("src/components/Input/input.css.ts?used", "blocks");
 const input = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      appearance: "none"
+      appearance: "none",
+      selectors: {
+        "&:-webkit-autofill": {
+          transitionDelay: "9999s"
+        }
+      }
     }
   }
 }, "input");

package/dist/styles/components/Input/input.css.mjs

@@ -5,7 +5,12 @@ setFileScope("src/components/Input/input.css.ts?used", "blocks");
 const input = style({
   "@layer": {
     [blocksLayer]: {
-      appearance: "none"
+      appearance: "none",
+      selectors: {
+        "&:-webkit-autofill": {
+          transitionDelay: "9999s"
+        }
+      }
     }
   }
 }, "input");

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

@@ -5,7 +5,7 @@ const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/make
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
 const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
-  base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+  dialog: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     display: "flex",
     flexDirection: "column",
     padding: "gutter",
@@ -14,10 +14,34 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
     borderRadius: "medium",
     boxShadow: "large"
   }), {
-    minWidth: "300px"
-  }], "dialog_base"),
+    minWidth: "300px",
+    selectors: {
+      "&[data-open]": {
+        transform: "scale(1)"
+      }
+    },
+    // Apply the animation only if the user has not requested reduced motion
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transform: "scale(0.9)",
+        transition: "transform 160ms"
+      }
+    }
+  }], "dialog_dialog"),
   backdrop: css.style({
-    backgroundColor: "rgba(0, 0, 0, 0.5)"
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    selectors: {
+      "&[data-open]": {
+        opacity: 1
+      }
+    },
+    // Apply the animation only if the user has not requested reduced motion
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        opacity: 0,
+        transition: "opacity 160ms"
+      }
+    }
   }, "dialog_backdrop"),
   variants: {
     size: {

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

@@ -4,7 +4,7 @@ import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
 const dialog = makeComponentTheme("dialog", {
-  base: style([atoms({
+  dialog: style([atoms({
     display: "flex",
     flexDirection: "column",
     padding: "gutter",
@@ -13,10 +13,34 @@ const dialog = makeComponentTheme("dialog", {
     borderRadius: "medium",
     boxShadow: "large"
   }), {
-    minWidth: "300px"
-  }], "dialog_base"),
+    minWidth: "300px",
+    selectors: {
+      "&[data-open]": {
+        transform: "scale(1)"
+      }
+    },
+    // Apply the animation only if the user has not requested reduced motion
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transform: "scale(0.9)",
+        transition: "transform 160ms"
+      }
+    }
+  }], "dialog_dialog"),
   backdrop: style({
-    backgroundColor: "rgba(0, 0, 0, 0.5)"
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    selectors: {
+      "&[data-open]": {
+        opacity: 1
+      }
+    },
+    // Apply the animation only if the user has not requested reduced motion
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        opacity: 0,
+        transition: "opacity 160ms"
+      }
+    }
   }, "dialog_backdrop"),
   variants: {
     size: {

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

@@ -6,17 +6,19 @@ const styles_themes_momotaro_components_divider_css_cjs = require("./divider.css
 const styles_themes_momotaro_components_input_css_cjs = require("./input.css.cjs");
 const styles_themes_momotaro_components_label_css_cjs = require("./label.css.cjs");
 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 components = {
   button: styles_themes_momotaro_components_button_css_cjs.button,
-  link: styles_themes_momotaro_components_link_css_cjs.link,
-  spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
-  divider: styles_themes_momotaro_components_divider_css_cjs.divider,
+  checkbox: styles_themes_momotaro_components_checkbox_css_cjs.checkbox,
   dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog,
+  divider: styles_themes_momotaro_components_divider_css_cjs.divider,
   input: styles_themes_momotaro_components_input_css_cjs.input,
-  checkbox: styles_themes_momotaro_components_checkbox_css_cjs.checkbox,
+  label: styles_themes_momotaro_components_label_css_cjs.label,
+  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,
-  label: styles_themes_momotaro_components_label_css_cjs.label
+  spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner
 };
 exports.components = components;

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

@@ -5,18 +5,20 @@ import { divider } from "./divider.css.mjs";
 import { input } from "./input.css.mjs";
 import { label } from "./label.css.mjs";
 import { link } from "./link.css.mjs";
+import { progress } from "./progress.css.mjs";
 import { radio } from "./radio.css.mjs";
 import { spinner } from "./spinner.css.mjs";
 const components = {
   button,
-  link,
-  spinner,
-  divider,
+  checkbox,
   dialog,
+  divider,
   input,
-  checkbox,
+  label,
+  link,
+  progress,
   radio,
-  label
+  spinner
 };
 export {
   components

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

@@ -32,8 +32,7 @@ const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input"
   }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     backgroundColor: "white",
     borderRadius: "medium",
-    boxShadow: "medium",
-    gap: "large"
+    boxShadow: "medium"
   })], "input_container")
 });
 fileScope.endFileScope();

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

@@ -31,8 +31,7 @@ const input = makeComponentTheme("input", {
   }, atoms({
     backgroundColor: "white",
     borderRadius: "medium",
-    boxShadow: "medium",
-    gap: "large"
+    boxShadow: "medium"
   })], "input_container")
 });
 endFileScope();

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

@@ -0,0 +1,45 @@
+"use strict";
+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_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({
+  "0%": {
+    transform: "translateX(-100%)"
+  },
+  "100%": {
+    transform: "translateX(100%)"
+  }
+}, "indeterminateAnimation");
+const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("progress", {
+  container: css.style([{
+    height: 6
+  }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    width: "full",
+    borderRadius: "small",
+    backgroundColor: "textLight",
+    color: "primary",
+    overflow: "hidden"
+  })], "progress_container"),
+  bar: css.style({
+    borderRadius: "inherit",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "transform 180ms ease-out"
+      }
+    }
+  }, "progress_bar"),
+  variants: {
+    indeterminate: css.style({
+      animation: `${indeterminateAnimation} 10s ease-in-out infinite`,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          animationDuration: "3s"
+        }
+      }
+    }, "progress_variants_indeterminate")
+  }
+});
+fileScope.endFileScope();
+exports.progress = progress;

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

@@ -0,0 +1,46 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { keyframes, style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+setFileScope("src/themes/momotaro/components/progress.css.ts?used", "blocks");
+const indeterminateAnimation = keyframes({
+  "0%": {
+    transform: "translateX(-100%)"
+  },
+  "100%": {
+    transform: "translateX(100%)"
+  }
+}, "indeterminateAnimation");
+const progress = makeComponentTheme("progress", {
+  container: style([{
+    height: 6
+  }, atoms({
+    width: "full",
+    borderRadius: "small",
+    backgroundColor: "textLight",
+    color: "primary",
+    overflow: "hidden"
+  })], "progress_container"),
+  bar: style({
+    borderRadius: "inherit",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "transform 180ms ease-out"
+      }
+    }
+  }, "progress_bar"),
+  variants: {
+    indeterminate: style({
+      animation: `${indeterminateAnimation} 10s ease-in-out infinite`,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          animationDuration: "3s"
+        }
+      }
+    }, "progress_variants_indeterminate")
+  }
+});
+endFileScope();
+export {
+  progress
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -50,7 +50,6 @@
     "string-width": "^4.2.2"
   },
   "dependencies": {
-    "@changesets/cli": "^2.26.2",
     "@vanilla-extract/css": "^1.13.0",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/sprinkles": "^1.6.1",
@@ -58,39 +57,40 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.26.2",
     "@crackle/cli": "^0.12.4",
     "@crackle/core": "^0.28.0",
-    "@storybook/addon-a11y": "^7.3.1",
+    "@storybook/addon-a11y": "^7.5.2",
     "@storybook/addon-coverage": "^0.0.9",
-    "@storybook/addon-essentials": "^7.3.1",
-    "@storybook/addon-interactions": "^7.3.1",
-    "@storybook/addon-links": "^7.3.1",
-    "@storybook/blocks": "^7.3.1",
-    "@storybook/jest": "^0.2.0",
-    "@storybook/react": "^7.3.1",
-    "@storybook/react-vite": "^7.3.1",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-interactions": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/react": "^7.5.2",
+    "@storybook/react-vite": "^7.5.2",
+    "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.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",
     "@vanilla-extract/vite-plugin": "^3.8.2",
     "@vitest/coverage-v8": "^0.34.6",
     "cross-env": "^7.0.3",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jest": "^27.4.2",
+    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-unicorn": "^48.0.1",
+    "eslint-plugin-unicorn": "^49.0.0",
     "jsdom": "^22.1.0",
     "prettier": "^3.0.3",
     "prop-types": "^15.8.1",
-    "storybook": "^7.3.1",
+    "storybook": "^7.5.2",
     "typescript": "^5.2.2",
     "vitest": "^0.34.6"
   },