@blockle/blocks 0.14.3 → 0.15.0

package/dist/styles/components/form/Slider/Slider.cjs

@@ -3,6 +3,43 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const styles_components_form_Slider_slider_css_cjs = require("./slider.css.cjs");
+function useControlledValue({
+  defaultValue,
+  value,
+  onChange,
+  transformValue
+}) {
+  const [internValue, setInternValue] = react.useState(defaultValue);
+  const currentValue = (onChange ? value : internValue) ?? defaultValue;
+  const setValue = react.useCallback(
+    function setValue2(value2) {
+      const nextValue = transformValue ? transformValue(value2) : value2;
+      if (onChange) {
+        onChange(nextValue);
+      } else {
+        setInternValue(nextValue);
+      }
+    },
+    [onChange, transformValue]
+  );
+  if (process.env.NODE_ENV !== "production") {
+    react.useEffect(() => {
+      if (onChange && value === void 0) {
+        console.error("Slider is in controlled mode but no value is provided");
+      }
+    }, []);
+  }
+  return [currentValue, setValue];
+}
+function roundToPrecision(value, precision) {
+  const factor = 10 ** precision;
+  return Math.round(value * factor) / factor;
+}
+function getBoundValue(newValue, min, max, step) {
+  let value = Math.round(newValue / step) * step;
+  value = Math.max(min, Math.min(max, value));
+  return value;
+}
 function getProgress(event, rect) {
   const { clientX, clientY } = event;
   const { width, height, left, top } = rect;
@@ -44,11 +81,6 @@ function usePointerProgress({ container, orientation, onChange }) {
     };
   }, [container, onChange, orientation]);
 }
-function getBoundValue(newValue, min, max, step) {
-  let value = Math.round(newValue / step) * step;
-  value = Math.max(min, Math.min(max, value));
-  return value;
-}
 const Slider = ({
   min = 0,
   max = 100,
@@ -60,26 +92,24 @@ const Slider = ({
   name,
   size,
   colorScheme,
+  disabled,
+  precision = 2,
   ...restProps
 }) => {
-  const [internValue, setInternValue] = react.useState(
-    getBoundValue(value ?? defaultValue, min, max, step)
-  );
-  const baseClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { base: true, variants: { size, colorScheme } });
+  const baseClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", {
+    base: true,
+    variants: { size, colorScheme, disabled }
+  });
   const trackClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { track: true }, false);
   const filledTrackClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { filledTrack: true }, false);
   const thumbClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { thumb: true }, false);
   const containerRef = react.useRef(null);
-  react.useEffect(() => {
-    if (value !== void 0) {
-      setInternValue(getBoundValue(value, min, max, step));
-    }
-  }, [value, min, max, step]);
-  react.useEffect(() => {
-    if (onChange && internValue !== value) {
-      onChange(internValue);
-    }
-  }, [internValue, onChange, value]);
+  const [currentValue, setValue] = useControlledValue({
+    defaultValue,
+    value,
+    onChange,
+    transformValue: (value2) => roundToPrecision(getBoundValue(value2, min, max, step), precision)
+  });
   usePointerProgress({
     container: containerRef,
     orientation,
@@ -87,29 +117,32 @@ const Slider = ({
       if (orientation === "vertical") {
         progress = 1 - progress;
       }
-      setInternValue(getBoundValue(max * progress, min, max, step));
+      setValue(max * progress);
     }
   });
   const onKeyDown = react.useCallback(
     (event) => {
+      if (event.key === "Tab") {
+        return;
+      }
       event.preventDefault();
       event.stopPropagation();
       const specialKey = ["PageUp", "PageDown"];
       const stepModifier = event.shiftKey || specialKey.includes(event.key) ? (max - min) / 10 : step;
       if (event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "PageDown") {
-        return setInternValue((value2) => getBoundValue(value2 - stepModifier, min, max, step));
+        return setValue(currentValue - stepModifier);
       }
       if (event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "PageUp") {
-        return setInternValue((value2) => getBoundValue(value2 + stepModifier, min, max, step));
+        return setValue(currentValue + stepModifier);
       }
       if (event.key === "Home") {
-        return setInternValue(min);
+        return setValue(min);
       }
       if (event.key === "End") {
-        return setInternValue(max);
+        return setValue(max);
       }
     },
-    [max, min, step]
+    [max, min, step, setValue, currentValue]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -126,28 +159,28 @@ const Slider = ({
           {
             className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.filledTrack, filledTrackClass),
             style: {
-              inlineSize: `${internValue / max * 100}%`
+              inlineSize: `${currentValue / max * 100}%`
             }
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          "button",
           {
+            type: "button",
             className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.thumb, thumbClass),
-            tabIndex: 0,
             role: "slider",
             "aria-valuemin": min,
             "aria-valuemax": max,
-            "aria-valuenow": internValue,
+            "aria-valuenow": currentValue,
             "aria-orientation": orientation,
             style: {
-              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${internValue / max * 100}%`
+              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${currentValue / max * 100}%`
             },
             onKeyDown,
             ...restProps
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: internValue })
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", disabled, name, value: currentValue })
       ]
     }
   );

package/dist/styles/components/form/Slider/Slider.mjs

@@ -1,7 +1,44 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useEffect, useState, useRef, useCallback } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
 import { containerVertical, container, track, filledTrack, thumb } from "./slider.css.mjs";
+function useControlledValue({
+  defaultValue,
+  value,
+  onChange,
+  transformValue
+}) {
+  const [internValue, setInternValue] = useState(defaultValue);
+  const currentValue = (onChange ? value : internValue) ?? defaultValue;
+  const setValue = useCallback(
+    function setValue2(value2) {
+      const nextValue = transformValue ? transformValue(value2) : value2;
+      if (onChange) {
+        onChange(nextValue);
+      } else {
+        setInternValue(nextValue);
+      }
+    },
+    [onChange, transformValue]
+  );
+  if (process.env.NODE_ENV !== "production") {
+    useEffect(() => {
+      if (onChange && value === void 0) {
+        console.error("Slider is in controlled mode but no value is provided");
+      }
+    }, []);
+  }
+  return [currentValue, setValue];
+}
+function roundToPrecision(value, precision) {
+  const factor = 10 ** precision;
+  return Math.round(value * factor) / factor;
+}
+function getBoundValue(newValue, min, max, step) {
+  let value = Math.round(newValue / step) * step;
+  value = Math.max(min, Math.min(max, value));
+  return value;
+}
 function getProgress(event, rect) {
   const { clientX, clientY } = event;
   const { width, height, left, top } = rect;
@@ -43,11 +80,6 @@ function usePointerProgress({ container: container2, orientation, onChange }) {
     };
   }, [container2, onChange, orientation]);
 }
-function getBoundValue(newValue, min, max, step) {
-  let value = Math.round(newValue / step) * step;
-  value = Math.max(min, Math.min(max, value));
-  return value;
-}
 const Slider = ({
   min = 0,
   max = 100,
@@ -59,26 +91,24 @@ const Slider = ({
   name,
   size,
   colorScheme,
+  disabled,
+  precision = 2,
   ...restProps
 }) => {
-  const [internValue, setInternValue] = useState(
-    getBoundValue(value ?? defaultValue, min, max, step)
-  );
-  const baseClass = useComponentStyles("slider", { base: true, variants: { size, colorScheme } });
+  const baseClass = useComponentStyles("slider", {
+    base: true,
+    variants: { size, colorScheme, disabled }
+  });
   const trackClass = useComponentStyles("slider", { track: true }, false);
   const filledTrackClass = useComponentStyles("slider", { filledTrack: true }, false);
   const thumbClass = useComponentStyles("slider", { thumb: true }, false);
   const containerRef = useRef(null);
-  useEffect(() => {
-    if (value !== void 0) {
-      setInternValue(getBoundValue(value, min, max, step));
-    }
-  }, [value, min, max, step]);
-  useEffect(() => {
-    if (onChange && internValue !== value) {
-      onChange(internValue);
-    }
-  }, [internValue, onChange, value]);
+  const [currentValue, setValue] = useControlledValue({
+    defaultValue,
+    value,
+    onChange,
+    transformValue: (value2) => roundToPrecision(getBoundValue(value2, min, max, step), precision)
+  });
   usePointerProgress({
     container: containerRef,
     orientation,
@@ -86,29 +116,32 @@ const Slider = ({
       if (orientation === "vertical") {
         progress = 1 - progress;
       }
-      setInternValue(getBoundValue(max * progress, min, max, step));
+      setValue(max * progress);
     }
   });
   const onKeyDown = useCallback(
     (event) => {
+      if (event.key === "Tab") {
+        return;
+      }
       event.preventDefault();
       event.stopPropagation();
       const specialKey = ["PageUp", "PageDown"];
       const stepModifier = event.shiftKey || specialKey.includes(event.key) ? (max - min) / 10 : step;
       if (event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "PageDown") {
-        return setInternValue((value2) => getBoundValue(value2 - stepModifier, min, max, step));
+        return setValue(currentValue - stepModifier);
       }
       if (event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "PageUp") {
-        return setInternValue((value2) => getBoundValue(value2 + stepModifier, min, max, step));
+        return setValue(currentValue + stepModifier);
       }
       if (event.key === "Home") {
-        return setInternValue(min);
+        return setValue(min);
       }
       if (event.key === "End") {
-        return setInternValue(max);
+        return setValue(max);
       }
     },
-    [max, min, step]
+    [max, min, step, setValue, currentValue]
   );
   return /* @__PURE__ */ jsxs(
     "div",
@@ -125,28 +158,28 @@ const Slider = ({
           {
             className: classnames(filledTrack, filledTrackClass),
             style: {
-              inlineSize: `${internValue / max * 100}%`
+              inlineSize: `${currentValue / max * 100}%`
             }
           }
         ) }),
         /* @__PURE__ */ jsx(
-          "div",
+          "button",
           {
+            type: "button",
             className: classnames(thumb, thumbClass),
-            tabIndex: 0,
             role: "slider",
             "aria-valuemin": min,
             "aria-valuemax": max,
-            "aria-valuenow": internValue,
+            "aria-valuenow": currentValue,
             "aria-orientation": orientation,
             style: {
-              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${internValue / max * 100}%`
+              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${currentValue / max * 100}%`
             },
             onKeyDown,
             ...restProps
           }
         ),
-        /* @__PURE__ */ jsx("input", { type: "hidden", name, value: internValue })
+        /* @__PURE__ */ jsx("input", { type: "hidden", disabled, name, value: currentValue })
       ]
     }
   );

package/dist/styles/components/form/Slider/slider.css.cjs

@@ -57,6 +57,7 @@ const thumb = css.style({
       insetBlockStart: "50%",
       transform: "translate(-50%, -50%)",
       touchAction: "none",
+      border: "none",
       selectors: {
         [`${containerVertical} &`]: {
           transform: "translate(-50%, 50%)"

package/dist/styles/components/form/Slider/slider.css.mjs

@@ -56,6 +56,7 @@ const thumb = style({
       insetBlockStart: "50%",
       transform: "translate(-50%, -50%)",
       touchAction: "none",
+      border: "none",
       selectors: {
         [`${containerVertical} &`]: {
           transform: "translate(-50%, 50%)"

package/dist/styles/lib/css/utils/cssUtils.cjs

@@ -0,0 +1,5 @@
+"use strict";
+function rem(value) {
+  return `${value / 16}rem`;
+}
+exports.rem = rem;

package/dist/styles/lib/css/utils/cssUtils.mjs

@@ -0,0 +1,6 @@
+function rem(value) {
+  return `${value / 16}rem`;
+}
+export {
+  rem
+};

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

@@ -22,10 +22,18 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
     selectors: {
       "&[open]": {
         transform: "translate(0, 0)",
-        opacity: 1
+        opacity: 1,
+        // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
+        "@starting-style": {
+          transform: "translate(0, -120px)",
+          opacity: 0
+        }
       },
       "&[open]::backdrop": {
-        opacity: 1
+        opacity: 1,
+        "@starting-style": {
+          opacity: 0
+        }
       }
     },
     // Apply the animation only if the user has not requested reduced motion
@@ -37,19 +45,11 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
         transitionBehavior: "allow-discrete",
         transitionProperty: "opacity, transform, overlay, display",
         transitionDuration: "240ms, 160ms, 240ms, 240ms",
-        // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
-        "@starting-style": {
-          transform: "translate(0, -120px)",
-          opacity: 0
-        },
         "::backdrop": {
           opacity: 0,
           transitionBehavior: "allow-discrete",
           transitionProperty: "opacity, overlay, display",
-          transitionDuration: "160ms, 240ms, 240ms",
-          "@starting-style": {
-            opacity: 0
-          }
+          transitionDuration: "160ms, 240ms, 240ms"
         }
       }
     }

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

@@ -21,10 +21,18 @@ const dialog = makeComponentTheme("dialog", {
     selectors: {
       "&[open]": {
         transform: "translate(0, 0)",
-        opacity: 1
+        opacity: 1,
+        // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
+        "@starting-style": {
+          transform: "translate(0, -120px)",
+          opacity: 0
+        }
       },
       "&[open]::backdrop": {
-        opacity: 1
+        opacity: 1,
+        "@starting-style": {
+          opacity: 0
+        }
       }
     },
     // Apply the animation only if the user has not requested reduced motion
@@ -36,19 +44,11 @@ const dialog = makeComponentTheme("dialog", {
         transitionBehavior: "allow-discrete",
         transitionProperty: "opacity, transform, overlay, display",
         transitionDuration: "240ms, 160ms, 240ms, 240ms",
-        // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
-        "@starting-style": {
-          transform: "translate(0, -120px)",
-          opacity: 0
-        },
         "::backdrop": {
           opacity: 0,
           transitionBehavior: "allow-discrete",
           transitionProperty: "opacity, overlay, display",
-          transitionDuration: "160ms, 240ms, 240ms",
-          "@starting-style": {
-            opacity: 0
-          }
+          transitionDuration: "160ms, 240ms, 240ms"
         }
       }
     }

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

@@ -9,6 +9,7 @@ fileScope.setFileScope("src/themes/momotaro/components/slider.css.ts", "@blockle
 const trackBackground = css.createVar("trackBackground");
 const filledTrackBackground = css.createVar("filledTrackBackground");
 const thumbBackground = css.createVar("thumbBackground");
+const thumbActive = css.createVar("thumbActive");
 const slider = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("slider", {
   base: styles_lib_css_style_style_cjs.style({
     blockSize: "20px"
@@ -25,7 +26,22 @@ const slider = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("slide
     backgroundColor: thumbBackground,
     borderRadius: "50%",
     height: "16px",
-    width: "16px"
+    width: "16px",
+    boxShadow: `0 0 0 0px color-mix(in srgb,  ${styles_lib_theme_vars_css_cjs.vars.color.primaryLight}, transparent 0%)`,
+    vars: {
+      [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${styles_lib_theme_vars_css_cjs.vars.color.primaryLight}, transparent 20%)`
+    },
+    ":hover": {
+      boxShadow: thumbActive
+    },
+    ":focus-visible": {
+      boxShadow: thumbActive
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "box-shadow 0.2s"
+      }
+    }
   }, styles_themes_momotaro_components_helpers_css_cjs.focusable]),
   variants: {
     size: {
@@ -54,7 +70,15 @@ const slider = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("slide
           [thumbBackground]: styles_lib_theme_vars_css_cjs.vars.color.secondary
         }
       })
-    }
+    },
+    disabled: styles_lib_css_style_style_cjs.style({
+      pointerEvents: "none",
+      vars: {
+        [trackBackground]: "#c0c0c0",
+        [filledTrackBackground]: "#ccc",
+        [thumbBackground]: "#c0c0c0"
+      }
+    })
   },
   defaultVariants: {
     size: "medium",

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

@@ -8,6 +8,7 @@ setFileScope("src/themes/momotaro/components/slider.css.ts", "@blockle/blocks");
 const trackBackground = createVar("trackBackground");
 const filledTrackBackground = createVar("filledTrackBackground");
 const thumbBackground = createVar("thumbBackground");
+const thumbActive = createVar("thumbActive");
 const slider = makeComponentTheme("slider", {
   base: style({
     blockSize: "20px"
@@ -24,7 +25,22 @@ const slider = makeComponentTheme("slider", {
     backgroundColor: thumbBackground,
     borderRadius: "50%",
     height: "16px",
-    width: "16px"
+    width: "16px",
+    boxShadow: `0 0 0 0px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 0%)`,
+    vars: {
+      [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 20%)`
+    },
+    ":hover": {
+      boxShadow: thumbActive
+    },
+    ":focus-visible": {
+      boxShadow: thumbActive
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "box-shadow 0.2s"
+      }
+    }
   }, focusable]),
   variants: {
     size: {
@@ -53,7 +69,15 @@ const slider = makeComponentTheme("slider", {
           [thumbBackground]: vars.color.secondary
         }
       })
-    }
+    },
+    disabled: style({
+      pointerEvents: "none",
+      vars: {
+        [trackBackground]: "#c0c0c0",
+        [filledTrackBackground]: "#ccc",
+        [thumbBackground]: "#c0c0c0"
+      }
+    })
   },
   defaultVariants: {
     size: "medium",

package/dist/styles/themes/momotaro/tokens.css.cjs

@@ -1,5 +1,6 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_css_utils_cssUtils_cjs = require("../../lib/css/utils/cssUtils.cjs");
 fileScope.setFileScope("src/themes/momotaro/tokens.css.ts", "@blockle/blocks");
 const tokens = {
   border: {
@@ -60,11 +61,11 @@ const tokens = {
       secondary: '"Rubik", sans-serif'
     },
     fontSize: {
-      xsmall: "12px",
-      small: "14px",
-      medium: "16px",
-      large: "20px",
-      xlarge: "24px"
+      xsmall: styles_lib_css_utils_cssUtils_cjs.rem(12),
+      small: styles_lib_css_utils_cssUtils_cjs.rem(14),
+      medium: styles_lib_css_utils_cssUtils_cjs.rem(16),
+      large: styles_lib_css_utils_cssUtils_cjs.rem(20),
+      xlarge: styles_lib_css_utils_cssUtils_cjs.rem(24)
     },
     fontWeight: {
       regular: 400,
@@ -72,11 +73,11 @@ const tokens = {
       strong: 700
     },
     lineHeight: {
-      xsmall: "1rem",
-      small: "1.25rem",
-      medium: "1.5rem",
-      large: "1.75rem",
-      xlarge: "2rem"
+      xsmall: styles_lib_css_utils_cssUtils_cjs.rem(16),
+      small: styles_lib_css_utils_cssUtils_cjs.rem(20),
+      medium: styles_lib_css_utils_cssUtils_cjs.rem(24),
+      large: styles_lib_css_utils_cssUtils_cjs.rem(28),
+      xlarge: styles_lib_css_utils_cssUtils_cjs.rem(32)
     }
   }
 };

package/dist/styles/themes/momotaro/tokens.css.mjs

@@ -1,4 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { rem } from "../../lib/css/utils/cssUtils.mjs";
 setFileScope("src/themes/momotaro/tokens.css.ts", "@blockle/blocks");
 const tokens = {
   border: {
@@ -59,11 +60,11 @@ const tokens = {
       secondary: '"Rubik", sans-serif'
     },
     fontSize: {
-      xsmall: "12px",
-      small: "14px",
-      medium: "16px",
-      large: "20px",
-      xlarge: "24px"
+      xsmall: rem(12),
+      small: rem(14),
+      medium: rem(16),
+      large: rem(20),
+      xlarge: rem(24)
     },
     fontWeight: {
       regular: 400,
@@ -71,11 +72,11 @@ const tokens = {
       strong: 700
     },
     lineHeight: {
-      xsmall: "1rem",
-      small: "1.25rem",
-      medium: "1.5rem",
-      large: "1.75rem",
-      xlarge: "2rem"
+      xsmall: rem(16),
+      small: rem(20),
+      medium: rem(24),
+      large: rem(28),
+      xlarge: rem(32)
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.14.3",
+  "version": "0.15.0",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",