@blockle/blocks 0.9.0 → 0.9.1

package/dist/styles/components/display/Divider/Divider.cjs

@@ -6,11 +6,11 @@ const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cj
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 const BlocksProviderContext = react.createContext(null);
 const useTheme = () => {
-  const theme = react.useContext(BlocksProviderContext);
-  if (!theme) {
+  const context = react.useContext(BlocksProviderContext);
+  if (!context) {
     throw new Error("useTheme must be used within a BlocksProvider");
   }
-  return theme;
+  return context.theme;
 };
 function useComponentStyles(name, props, useDefaultVariants = true) {
   const { components } = useTheme();

package/dist/styles/components/display/Divider/Divider.mjs

@@ -5,11 +5,11 @@ import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 const BlocksProviderContext = createContext(null);
 const useTheme = () => {
-  const theme = useContext(BlocksProviderContext);
-  if (!theme) {
+  const context = useContext(BlocksProviderContext);
+  if (!context) {
     throw new Error("useTheme must be used within a BlocksProvider");
   }
-  return theme;
+  return context.theme;
 };
 function useComponentStyles(name, props, useDefaultVariants = true) {
   const { components } = useTheme();

package/dist/styles/components/other/BlocksProvider/BlocksProvider.cjs

@@ -1,5 +1,6 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const BlocksProvider = ({
@@ -8,10 +9,29 @@ const BlocksProvider = ({
   className,
   ...restProps
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const ref = react.useRef(null);
+  const [ariaHidden, setAriaHidden] = react.useState(false);
+  const contextValue = react.useMemo(
+    () => ({
+      theme,
+      setAriaHidden
+    }),
+    [theme, setAriaHidden]
+  );
+  react.useEffect(() => {
+    var _a, _b;
+    if (ariaHidden) {
+      (_a = ref.current) == null ? void 0 : _a.setAttribute("inert", "");
+    } else {
+      (_b = ref.current) == null ? void 0 : _b.removeAttribute("inert");
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.BlocksProviderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       className: styles_components_display_Divider_Divider_cjs.classnames(theme.vars, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "primary" }), className),
+      "aria-hidden": ariaHidden,
       ...restProps,
       children
     }

package/dist/styles/components/other/BlocksProvider/BlocksProvider.mjs

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useEffect } from "react";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 import { BlocksProviderContext, classnames } from "../../display/Divider/Divider.mjs";
 const BlocksProvider = ({
@@ -7,10 +8,29 @@ const BlocksProvider = ({
   className,
   ...restProps
 }) => {
-  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(
+  const ref = useRef(null);
+  const [ariaHidden, setAriaHidden] = useState(false);
+  const contextValue = useMemo(
+    () => ({
+      theme,
+      setAriaHidden
+    }),
+    [theme, setAriaHidden]
+  );
+  useEffect(() => {
+    var _a, _b;
+    if (ariaHidden) {
+      (_a = ref.current) == null ? void 0 : _a.setAttribute("inert", "");
+    } else {
+      (_b = ref.current) == null ? void 0 : _b.removeAttribute("inert");
+    }
+  });
+  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
+      ref,
       className: classnames(theme.vars, atoms({ fontFamily: "primary" }), className),
+      "aria-hidden": ariaHidden,
       ...restProps,
       children
     }

package/dist/styles/components/overlay/Dialog/Dialog.cjs

@@ -118,6 +118,13 @@ const useRestoreFocus = (active) => {
     }
   }, [active]);
 };
+const useRootAriaHidden = (hidden) => {
+  const context = react.useContext(styles_components_display_Divider_Divider_cjs.BlocksProviderContext);
+  if (!context) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context.setAriaHidden(hidden);
+};
 const useVisibilityState = (open) => {
   const [visible, setVisible] = react.useState(open);
   const hide = react.useCallback(() => {
@@ -179,6 +186,7 @@ const Dialog = ({
   const isNested = useNestedDialog(visible);
   usePreventBodyScroll(visible && !isNested);
   useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
+  useRootAriaHidden(visible);
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
     if (!open) {
@@ -243,3 +251,4 @@ exports.Portal = Portal;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useKeyboard = useKeyboard;
 exports.usePreventBodyScroll = usePreventBodyScroll;
+exports.useRootAriaHidden = useRootAriaHidden;

package/dist/styles/components/overlay/Dialog/Dialog.mjs

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState, useCallback, createContext, useContext } from "react";
-import { useTheme, useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
+import { useEffect, useLayoutEffect, useRef, useContext, useState, useCallback, createContext } from "react";
+import { useTheme, BlocksProviderContext, useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
 import { backdrop } from "./dialog.css.mjs";
 import { createPortal } from "react-dom";
 import { BlocksProvider } from "../../other/BlocksProvider/BlocksProvider.mjs";
@@ -117,6 +117,13 @@ const useRestoreFocus = (active) => {
     }
   }, [active]);
 };
+const useRootAriaHidden = (hidden) => {
+  const context = useContext(BlocksProviderContext);
+  if (!context) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context.setAriaHidden(hidden);
+};
 const useVisibilityState = (open) => {
   const [visible, setVisible] = useState(open);
   const hide = useCallback(() => {
@@ -178,6 +185,7 @@ const Dialog = ({
   const isNested = useNestedDialog(visible);
   usePreventBodyScroll(visible && !isNested);
   useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
+  useRootAriaHidden(visible);
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
     if (!open) {
@@ -242,5 +250,6 @@ export {
   Portal,
   useIsomorphicLayoutEffect,
   useKeyboard,
-  usePreventBodyScroll
+  usePreventBodyScroll,
+  useRootAriaHidden
 };

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

@@ -14,7 +14,8 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
     borderRadius: "medium",
     boxShadow: "large"
   }), {
-    minInlineSize: "300px",
+    maxHeight: "90%",
+    minWidth: "300px",
     selectors: {
       "&[data-open]": {
         transform: "scale(1)"
@@ -46,16 +47,16 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
   variants: {
     size: {
       small: css.style({
-        inlineSize: "400px",
-        maxInlineSize: "min(400px, 90vw)"
+        width: "400px",
+        maxWidth: "min(400px, 90%)"
       }, "dialog_variants_size_small"),
       medium: css.style({
-        inlineSize: "600px",
-        maxInlineSize: "min(600px, 90vw)"
+        width: "600px",
+        maxWidth: "min(600px, 90%)"
       }, "dialog_variants_size_medium"),
       large: css.style({
-        inlineSize: "800px",
-        maxInlineSize: "min(800px, 90vw)"
+        width: "800px",
+        maxWidth: "min(800px, 90%)"
       }, "dialog_variants_size_large")
     }
   },

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

@@ -13,7 +13,8 @@ const dialog = makeComponentTheme("dialog", {
     borderRadius: "medium",
     boxShadow: "large"
   }), {
-    minInlineSize: "300px",
+    maxHeight: "90%",
+    minWidth: "300px",
     selectors: {
       "&[data-open]": {
         transform: "scale(1)"
@@ -45,16 +46,16 @@ const dialog = makeComponentTheme("dialog", {
   variants: {
     size: {
       small: style({
-        inlineSize: "400px",
-        maxInlineSize: "min(400px, 90vw)"
+        width: "400px",
+        maxWidth: "min(400px, 90%)"
       }, "dialog_variants_size_small"),
       medium: style({
-        inlineSize: "600px",
-        maxInlineSize: "min(600px, 90vw)"
+        width: "600px",
+        maxWidth: "min(600px, 90%)"
       }, "dialog_variants_size_medium"),
       large: style({
-        inlineSize: "800px",
-        maxInlineSize: "min(800px, 90vw)"
+        width: "800px",
+        maxWidth: "min(800px, 90%)"
       }, "dialog_variants_size_large")
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -69,16 +69,16 @@
     "@changesets/cli": "^2.27.1",
     "@crackle/cli": "^0.13.0",
     "@crackle/core": "^0.31.0",
-    "@storybook/addon-a11y": "^7.6.9",
+    "@storybook/addon-a11y": "^7.6.17",
     "@storybook/addon-coverage": "^1.0.0",
-    "@storybook/addon-essentials": "^7.6.9",
-    "@storybook/addon-interactions": "^7.6.9",
-    "@storybook/addon-links": "^7.6.9",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
     "@storybook/addons": "^7.6.17",
-    "@storybook/blocks": "^7.6.9",
+    "@storybook/blocks": "^7.6.17",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.6.9",
-    "@storybook/react-vite": "^7.6.9",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
@@ -101,7 +101,7 @@
     "jsdom": "^23.2.0",
     "prettier": "^3.2.4",
     "prop-types": "^15.8.1",
-    "storybook": "^7.6.9",
+    "storybook": "^7.6.17",
     "typescript": "^5.3.3",
     "vitest": "^1.2.1"
   },