@blockle/blocks-react 2.8.1 → 3.0.1

package/dist/components/display/Icon/IconMask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconMask.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Icon/IconMask.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,SAAS,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACrC,GAAG,EAAE,MAAM,CAAC;CACb,GAAG,WAAW,GACb,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8B5C,CAAC"}
+{"version":3,"file":"IconMask.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Icon/IconMask.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,SAAS,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACrC,GAAG,EAAE,MAAM,CAAC;CACb,GAAG,WAAW,GACb,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8B5C,CAAC"}

package/dist/components/display/Icon/IconMask.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { getAtomsAndProps, classnames, atoms } from "@blockle/blocks-core";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";

package/dist/components/feedback/Skeleton/Skeleton.js

@@ -7,7 +7,7 @@ const Skeleton = ({
   circle = false,
   className,
   borderRadius = 1,
-  backgroundColor = "background-300",
+  backgroundColor = { light: "neutral-200", dark: "neutral-800" },
   style,
   ...restProps
 }) => {

package/dist/components/feedback/Toast/ToastContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,kDAA+C,CAAC"}
+{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastContext.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,kDAA+C,CAAC"}

package/dist/components/feedback/Toast/ToastContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from "react";
 const ToastContext = createContext(null);
 export {

package/dist/components/feedback/Toast/useToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/useToast.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,KAAK,EAAgB,MAAM,mBAAmB,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG;IAC3C,EAAE,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,QAAQ;uBAQT,UAAU;sBAYb,MAAM;CAad,CAAC"}
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/useToast.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAgB,MAAM,mBAAmB,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG;IAC3C,EAAE,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,QAAQ;uBAQT,UAAU;sBAYb,MAAM;CAad,CAAC"}

package/dist/components/feedback/Toast/useToast.js

@@ -1,3 +1,4 @@
+"use client";
 import { useContext, useCallback, useMemo } from "react";
 import { ToastContext } from "./ToastContext.js";
 const useToast = () => {

package/dist/components/form/NumericInput/NumericInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/NumericInput/NumericInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,cAAc,CAAC;AAEnB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2CpD,CAAC"}
+{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/NumericInput/NumericInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,cAAc,CAAC;AAEnB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2CpD,CAAC"}

package/dist/components/form/NumericInput/NumericInput.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { composeRefs } from "@blockle/blocks-core";
 import { useRef, useCallback } from "react";

package/dist/components/form/Slider/Slider.d.ts

@@ -14,7 +14,7 @@ export type SliderProps = {
     'aria-valuetext'?: string;
     'aria-label'?: string;
     size?: SliderTheme['variants']['size'];
-    colorScheme?: SliderTheme['variants']['colorScheme'];
+    intent?: SliderTheme['variants']['intent'];
     disabled?: boolean;
 };
 export declare const Slider: React.FC<SliderProps>;

package/dist/components/form/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsIxC,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsIxC,CAAC"}

package/dist/components/form/Slider/Slider.js

@@ -28,13 +28,13 @@ const Slider = ({
   value,
   name,
   size,
-  colorScheme,
+  intent,
   disabled,
   ...restProps
 }) => {
   const baseClass = useComponentStyles("slider", {
     root: true,
-    variants: { size, colorScheme, disabled }
+    variants: { size, intent, disabled }
   });
   const trackClass = useComponentStyles("slider", { track: true }, false);
   const filledTrackClass = useComponentStyles(

package/dist/components/form/Slider/usePointerProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePointerProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Slider/usePointerProgress.ts"],"names":[],"mappings":"AAEA,KAAK,sBAAsB,CAAC,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI;IAC3E,SAAS,EAAE,CAAC,CAAC;IACb,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,WAAW,CACzB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,OAAO,GACZ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAQxB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC7C,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,IAAI,CA6CvE"}
+{"version":3,"file":"usePointerProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Slider/usePointerProgress.ts"],"names":[],"mappings":"AAIA,KAAK,sBAAsB,CAAC,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI;IAC3E,SAAS,EAAE,CAAC,CAAC;IACb,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,WAAW,CACzB,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,OAAO,GACZ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAQxB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC7C,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,IAAI,CA6CvE"}

package/dist/components/form/Slider/usePointerProgress.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from "react";
 function getProgress(event, rect) {
   const { clientX, clientY } = event;

package/dist/components/overlay/Dialog/dialogHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogHelper.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Dialog/dialogHelper.tsx"],"names":[],"mappings":"AAEA,KAAK,kBAAkB,GAAG;IACxB,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,aAAa,yDAEzB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,OAAO,KAAG,OAgB/C,CAAC"}
+{"version":3,"file":"dialogHelper.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Dialog/dialogHelper.tsx"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,aAAa,yDAEzB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,OAAO,KAAG,OAgB/C,CAAC"}

package/dist/components/overlay/Dialog/dialogHelper.js

@@ -1,3 +1,4 @@
+"use client";
 import { useContext, useEffect, createContext } from "react";
 const DialogContext = createContext(
   void 0

package/dist/components/overlay/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAQ9B,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;CAC3C,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuFxC,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAQ9B,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;CAC3C,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuFxC,CAAC"}

package/dist/components/overlay/Drawer/Drawer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
 import { useRef, useState, useCallback } from "react";

package/dist/components/overlay/Tooltip/Tooltip.d.ts

@@ -6,7 +6,7 @@ export type TooltipProps = {
     position?: PopoverProps['position'];
     children: ReactElement;
     content: React.ReactNode;
-    colorScheme?: TooltipTheme['variants']['colorScheme'];
+    intent?: TooltipTheme['variants']['intent'];
 } & Omit<HTMLElementProps<HTMLDivElement>, 'ref' | 'children'>;
 export declare const Tooltip: React.FC<TooltipProps>;
 export {};

package/dist/components/overlay/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAY9B,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEnE,KAAK,YAAY,GAAG,KAAK,CAAC,YAAY,CAEpC,GAAG,EAEH,MAAM,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAC1C,CAAC;AAEF,KAAK,YAAY,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;CACvD,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,CAAC;AAE/D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA+E1C,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAY9B,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEnE,KAAK,YAAY,GAAG,KAAK,CAAC,YAAY,CAEpC,GAAG,EAEH,MAAM,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAC1C,CAAC;AAEF,KAAK,YAAY,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,CAAC;AAE/D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA+E1C,CAAC"}

package/dist/components/overlay/Tooltip/Tooltip.js

@@ -8,14 +8,14 @@ const Tooltip = ({
   position = "top",
   children,
   content,
-  colorScheme
+  intent
 }) => {
   const id = useId();
   const ref = useRef(null);
   const [open, setOpen] = useState(false);
   const tooltipClassName = useComponentStyles("tooltip", {
     root: true,
-    variants: { colorScheme }
+    variants: { intent }
   });
   useEffect(() => {
     const element = ref.current;

package/dist/components/providers/BlocksProvider/BlocksProvider.d.ts

@@ -1,7 +1,13 @@
-import { Theme } from '@blockle/blocks-core';
+import { ColorModeSetting, Theme } from '@blockle/blocks-core';
 export type BlocksProviderProps = {
     children: React.ReactNode;
     theme: Theme;
+    /**
+     * The Color mode of the whole page, written as `data-color-mode` on `<html>`.
+     * Only the outermost BlocksProvider uses it; a nested provider ignores it.
+     * @default 'system'
+     */
+    colorMode?: ColorModeSetting;
     className?: string;
     style?: React.CSSProperties;
     asChild?: boolean;

package/dist/components/providers/BlocksProvider/BlocksProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlocksProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/providers/BlocksProvider/BlocksProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAMrE,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2BxD,CAAC"}
+{"version":3,"file":"BlocksProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/providers/BlocksProvider/BlocksProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,gBAAgB,EAIrB,KAAK,KAAK,EACX,MAAM,sBAAsB,CAAC;AAO9B,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAuBF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+CxD,CAAC"}

package/dist/components/providers/BlocksProvider/BlocksProvider.js

@@ -1,21 +1,43 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { classnames, atoms } from "@blockle/blocks-core";
+import { defaultColorMode, classnames, atoms, colorModeAttribute } from "@blockle/blocks-core";
 import { createSlottable } from "@blockle/blocks-react-slot";
-import { useMemo } from "react";
+import { useContext, useEffect, useMemo } from "react";
+import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
 import { BlocksProviderContext } from "./context.js";
 const [Template, Slot] = createSlottable("div");
+function useColorModeAttribute(colorMode) {
+  useIsomorphicLayoutEffect(() => {
+    if (colorMode === null) {
+      return;
+    }
+    const element = document.documentElement;
+    element.setAttribute(colorModeAttribute, colorMode);
+    return () => {
+      element.removeAttribute(colorModeAttribute);
+    };
+  }, [colorMode]);
+}
 const BlocksProvider = ({
   children,
   theme,
+  colorMode,
   className,
   ...restProps
 }) => {
+  const parentContext = useContext(BlocksProviderContext);
+  const isOutermost = parentContext === null;
+  const activeColorMode = parentContext ? parentContext.colorMode : colorMode ?? defaultColorMode;
+  useColorModeAttribute(isOutermost ? activeColorMode : null);
+  const ignoresColorMode = !isOutermost && colorMode !== void 0;
+  useEffect(() => {
+  }, [ignoresColorMode]);
   const contextValue = useMemo(
     () => ({
-      theme
+      theme,
+      colorMode: activeColorMode
     }),
-    [theme]
+    [theme, activeColorMode]
   );
   return /* @__PURE__ */ jsx(BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsx(
     Template,

package/dist/components/providers/BlocksProvider/context.d.ts

@@ -1,6 +1,8 @@
-import { Theme } from '@blockle/blocks-core';
+import { ColorModeSetting, Theme } from '@blockle/blocks-core';
 export type BlocksProviderContextProps = {
     theme: Theme;
+    /** The outermost provider's colorMode, shared with nested providers. */
+    colorMode: ColorModeSetting;
 };
 export declare const BlocksProviderContext: import('react').Context<BlocksProviderContextProps | null>;
 //# sourceMappingURL=context.d.ts.map

package/dist/components/providers/BlocksProvider/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/providers/BlocksProvider/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAGlD,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,qBAAqB,4DACsB,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/providers/BlocksProvider/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAGpE,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,KAAK,CAAC;IACb,wEAAwE;IACxE,SAAS,EAAE,gBAAgB,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,4DACsB,CAAC"}

package/dist/components/providers/BlocksProvider/context.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from "react";
 const BlocksProviderContext = createContext(null);
 export {

package/dist/components/typography/Heading/Heading.d.ts

@@ -1,7 +1,10 @@
 import { HTMLElementProps, MarginAtoms, PaddingAtoms, TextAtoms } from '@blockle/blocks-core';
+import { TextColor } from '../textColor.js';
 export type HeadingProps = {
     className?: string;
+    /** A text Color role, which follows the Color mode, or a fixed Palette color. */
+    color?: TextColor;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-} & HTMLElementProps<HTMLHeadingElement> & TextAtoms & MarginAtoms & PaddingAtoms;
+} & HTMLElementProps<HTMLHeadingElement> & Omit<TextAtoms, 'color'> & MarginAtoms & PaddingAtoms;
 export declare const Heading: React.FC<HeadingProps>;
 //# sourceMappingURL=Heading.d.ts.map

package/dist/components/typography/Heading/Heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAK9B,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/B,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,GACtC,SAAS,GACT,WAAW,GACX,YAAY,CAAC;AAEf,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiB1C,CAAC"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,iBAAiB,CAAC;AAGhE,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/B,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,GACtC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GACxB,WAAW,GACX,YAAY,CAAC;AAEf,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuB1C,CAAC"}

package/dist/components/typography/Heading/Heading.js

@@ -1,19 +1,27 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Box } from "../../layout/Box/Box.js";
 import { heading } from "./heading.css.js";
 const Heading = ({
   className,
+  color,
   level = 1,
   children,
   ...restProps
 }) => {
+  const themeClassName = useComponentStyles("heading", {
+    root: true,
+    variants: { color }
+  });
   const Tag = `h${level}`;
   return /* @__PURE__ */ jsx(
     Box,
     {
       asChild: true,
-      className: classnames(heading, className),
+      className: classnames(heading, themeClassName, className),
+      color,
       ...restProps,
       children: /* @__PURE__ */ jsx(Tag, { children })
     }

package/dist/components/typography/Text/Text.d.ts

@@ -1,12 +1,15 @@
 import { HTMLElementProps, MarginAtoms, PaddingAtoms, TextAtoms } from '@blockle/blocks-core';
 import { default as React } from 'react';
+import { TextColor } from '../textColor.js';
 type Tags = 'cite' | 'code' | 'del' | 'em' | 'ins' | 'kbd' | 'label' | 'mark' | 'p' | 'q' | 's' | 'small' | 'span' | 'strong' | 'sub' | 'sup';
 export type TextProps<Tag extends Tags = 'span'> = {
     asChild?: boolean;
     children: React.ReactNode;
     ref?: React.Ref<HTMLElementTagNameMap[Tag]>;
     tag?: Tag;
-} & Omit<HTMLElementProps<HTMLSpanElement>, 'children' | 'ref'> & TextAtoms & MarginAtoms & PaddingAtoms;
-export declare const Text: <T extends Tags = "span">({ asChild, children, className, ref, tag, ...restProps }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
+    /** A text Color role, which follows the Color mode, or a fixed Palette color. */
+    color?: TextColor;
+} & Omit<HTMLElementProps<HTMLSpanElement>, 'children' | 'ref'> & Omit<TextAtoms, 'color'> & MarginAtoms & PaddingAtoms;
+export declare const Text: <T extends Tags = "span">({ asChild, children, className, color, ref, tag, ...restProps }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Text.d.ts.map

package/dist/components/typography/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,IAAI,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,IAAI,GACJ,KAAK,GACL,KAAK,GACL,OAAO,GACP,MAAM,GACN,GAAG,GACH,GAAG,GACH,GAAG,GACH,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AAEV,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,IAAI,GAAG,MAAM,IAAI;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAC7D,SAAS,GACT,WAAW,GACX,YAAY,CAAC;AAEf,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,0DAO3C,SAAS,CAAC,CAAC,CAAC,4CAad,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Text/Text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,iBAAiB,CAAC;AAGhE,KAAK,IAAI,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,IAAI,GACJ,KAAK,GACL,KAAK,GACL,OAAO,GACP,MAAM,GACN,GAAG,GACH,GAAG,GACH,GAAG,GACH,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AAEV,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,IAAI,GAAG,MAAM,IAAI;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAC7D,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GACxB,WAAW,GACX,YAAY,CAAC;AAEf,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,iEAQ3C,SAAS,CAAC,CAAC,CAAC,4CAsBd,CAAC"}

package/dist/components/typography/Text/Text.js

@@ -1,20 +1,36 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Box } from "../../layout/Box/Box.js";
 import { text } from "./text.css.js";
 const Text = ({
   asChild,
   children,
   className,
+  color,
   ref,
   tag,
   ...restProps
 }) => {
   const Component = tag ?? "span";
-  return /* @__PURE__ */ jsx(Box, { asChild: true, className: classnames(text, className), ...restProps, children: asChild ? children : (
-    // biome-ignore lint/suspicious/noExplicitAny: Safe to assert ref as React.RefObject<any>
-    /* @__PURE__ */ jsx(Component, { ref, children })
-  ) });
+  const themeClassName = useComponentStyles("text", {
+    root: true,
+    variants: { color }
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      className: classnames(text, themeClassName, className),
+      color,
+      ...restProps,
+      children: asChild ? children : (
+        // biome-ignore lint/suspicious/noExplicitAny: Safe to assert ref as React.RefObject<any>
+        /* @__PURE__ */ jsx(Component, { ref, children })
+      )
+    }
+  );
 };
 export {
   Text

package/dist/components/typography/textColor.d.ts

@@ -0,0 +1,12 @@
+import { Atoms, ComponentThemes } from '@blockle/blocks-core';
+export type TextColorRole = ComponentThemes['text']['variants']['color'];
+/**
+ * The `color` prop of Text and Heading: a Color role (`muted`), styled by the
+ * component theme and following the Color mode, or a Palette atom for Box.
+ *
+ * The prop goes to both the theme and Box, and each ignores values it doesn't
+ * know. Any color also suppresses the theme's default variant, so a Palette
+ * color is not overridden by `text.default`.
+ */
+export type TextColor = TextColorRole | Atoms['color'];
+//# sourceMappingURL=textColor.d.ts.map

package/dist/components/typography/textColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textColor.d.ts","sourceRoot":"","sources":["../../../src/components/typography/textColor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEnE,MAAM,MAAM,aAAa,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;AAEzE;;;;;;;GAOG;AACH,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC"}

package/dist/hooks/useClickOutside/useClickOutside.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useClickOutside/useClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,KAAK,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,gBAAgB,MAAM,IAAI,EAC1B,cAAoB,sBAA2B,KAC9C,IAuBF,CAAC"}
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useClickOutside/useClickOutside.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,KAAK,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,gBAAgB,MAAM,IAAI,EAC1B,cAAoB,sBAA2B,KAC9C,IAuBF,CAAC"}

package/dist/hooks/useClickOutside/useClickOutside.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from "react";
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
   useEffect(() => {

package/dist/hooks/useColorMode/useColorMode.d.ts

@@ -0,0 +1,13 @@
+import { ColorMode, ColorModeSetting } from '@blockle/blocks-core';
+export type UseColorModeResult = {
+    /** What the outermost BlocksProvider was given: `light`, `dark` or `system`. */
+    colorMode: ColorModeSetting;
+    /** The Color mode actually rendered. Under `system` it follows the OS. */
+    resolvedColorMode: ColorMode;
+};
+/**
+ * The page's Color mode, for JS-driven visuals (charts, canvas, maps) that need
+ * to know it. Saving the user's choice and toggling stay the app's job.
+ */
+export declare const useColorMode: () => UseColorModeResult;
+//# sourceMappingURL=useColorMode.d.ts.map

package/dist/hooks/useColorMode/useColorMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorMode.d.ts","sourceRoot":"","sources":["../../../src/hooks/useColorMode/useColorMode.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,gBAAgB,EAItB,MAAM,sBAAsB,CAAC;AAK9B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gFAAgF;IAChF,SAAS,EAAE,gBAAgB,CAAC;IAC5B,0EAA0E;IAC1E,iBAAiB,EAAE,SAAS,CAAC;CAC9B,CAAC;AAyBF;;;GAGG;AACH,eAAO,MAAM,YAAY,QAAO,kBAoB/B,CAAC"}

package/dist/hooks/useColorMode/useColorMode.js

@@ -0,0 +1,41 @@
+"use client";
+import { systemFallbackColorMode, systemColorModeQueries, resolveSystemColorMode } from "@blockle/blocks-core";
+import { useContext, useSyncExternalStore } from "react";
+import { BlocksProviderContext } from "../../components/providers/BlocksProvider/context.js";
+const getServerSnapshot = () => systemFallbackColorMode;
+const getSystemColorMode = () => resolveSystemColorMode((query) => window.matchMedia(query).matches);
+const subscribeToSystemColorMode = (onChange) => {
+  const lists = Object.values(systemColorModeQueries).map(
+    (query) => window.matchMedia(query)
+  );
+  for (const list of lists) {
+    list.addEventListener("change", onChange);
+  }
+  return () => {
+    for (const list of lists) {
+      list.removeEventListener("change", onChange);
+    }
+  };
+};
+const noopSubscribe = () => () => {
+};
+const useColorMode = () => {
+  const context = useContext(BlocksProviderContext);
+  if (!context) {
+    throw new Error("useColorMode must be called within a BlocksProvider");
+  }
+  const { colorMode } = context;
+  const isSystem = colorMode === "system";
+  const systemColorMode = useSyncExternalStore(
+    isSystem ? subscribeToSystemColorMode : noopSubscribe,
+    isSystem ? getSystemColorMode : getServerSnapshot,
+    getServerSnapshot
+  );
+  return {
+    colorMode,
+    resolvedColorMode: isSystem ? systemColorMode : colorMode
+  };
+};
+export {
+  useColorMode
+};

package/dist/hooks/useComponentStyles/useComponentStyleDefaultProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentStyleDefaultProps.d.ts","sourceRoot":"","sources":["../../../src/hooks/useComponentStyles/useComponentStyleDefaultProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAI9E,KAAK,6BAA6B,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC;AACrE,KAAK,UAAU,GAAG;KACf,CAAC,IAAI,MAAM,6BAA6B,GAAG,6BAA6B,CAAC,CAAC,CAAC,SAAS,UAAU,GAC3F,QAAQ,CACN,6BAA6B,CAAC,CAAC,CAAC,CACjC,CAAC,iBAAiB,CAAC,SAAS,UAAU,GACrC,6BAA6B,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,SAAS,SAAS,GACnE,KAAK,GACL,OAAO,CACL,6BAA6B,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACnD,SAAS,CACV,GACH,KAAK,GACP,KAAK;CACV,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,CAAC,SAAS,MAAM,qBAAqB,EAErC,MAAM,CAAC,kBAUR,CAAC"}
+{"version":3,"file":"useComponentStyleDefaultProps.d.ts","sourceRoot":"","sources":["../../../src/hooks/useComponentStyles/useComponentStyleDefaultProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAI9E,KAAK,6BAA6B,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC;AACrE,KAAK,UAAU,GAAG;KACf,CAAC,IAAI,MAAM,6BAA6B,GAAG,6BAA6B,CAAC,CAAC,CAAC,SAAS,UAAU,GAC3F,QAAQ,CACN,6BAA6B,CAAC,CAAC,CAAC,CACjC,CAAC,iBAAiB,CAAC,SAAS,UAAU,GACrC,6BAA6B,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,SAAS,SAAS,GACnE,KAAK,GACL,OAAO,CACL,6BAA6B,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACnD,SAAS,CACV,GACH,KAAK,GACP,KAAK;CACV,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,CAAC,SAAS,MAAM,qBAAqB,EAErC,MAAM,CAAC,kBAUR,CAAC"}

package/dist/hooks/useComponentStyles/useComponentStyleDefaultProps.js

@@ -1,3 +1,4 @@
+"use client";
 import { useTheme } from "../useTheme/useTheme.js";
 const useComponentStyleDefaultProps = (name) => {
   const { components } = useTheme();

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export { Tooltip, type TooltipProps, } from './components/overlay/Tooltip/Toolti
 export { BlocksProvider, type BlocksProviderProps, } from './components/providers/BlocksProvider/BlocksProvider.js';
 export { Heading, type HeadingProps, } from './components/typography/Heading/Heading.js';
 export { Text, type TextProps } from './components/typography/Text/Text.js';
+export { type UseColorModeResult, useColorMode, } from './hooks/useColorMode/useColorMode.js';
 export { useComponentStyleDefaultProps } from './hooks/useComponentStyles/useComponentStyleDefaultProps.js';
 export { useComponentStyles } from './hooks/useComponentStyles/useComponentStyles.js';
 export { useControlledValue } from './hooks/useControlledValue/useControlledValue.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -33,6 +33,7 @@ import { Tooltip } from "./components/overlay/Tooltip/Tooltip.js";
 import { BlocksProvider } from "./components/providers/BlocksProvider/BlocksProvider.js";
 import { Heading } from "./components/typography/Heading/Heading.js";
 import { Text } from "./components/typography/Text/Text.js";
+import { useColorMode } from "./hooks/useColorMode/useColorMode.js";
 import { useComponentStyleDefaultProps } from "./hooks/useComponentStyles/useComponentStyleDefaultProps.js";
 import { useComponentStyles } from "./hooks/useComponentStyles/useComponentStyles.js";
 import { useControlledValue } from "./hooks/useControlledValue/useControlledValue.js";
@@ -74,6 +75,7 @@ export {
   Tooltip,
   VisuallyHidden,
   createIconMask,
+  useColorMode,
   useComponentStyleDefaultProps,
   useComponentStyles,
   useControlledValue,

package/dist/testUtils/browser/contrast.d.ts

@@ -0,0 +1,4 @@
+/** Resolves a CSS `var(--x)` reference to a computed rgb() string. */
+export declare function resolve(cssVar: string, colorMode: 'light' | 'dark'): Promise<string>;
+export declare function contrast(a: string, b: string): number;
+//# sourceMappingURL=contrast.d.ts.map

package/dist/testUtils/browser/contrast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast.d.ts","sourceRoot":"","sources":["../../../src/testUtils/browser/contrast.tsx"],"names":[],"mappings":"AAEA,sEAAsE;AACtE,wBAAsB,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,MAAM,mBAYxE;AAeD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,UAM5C"}

package/dist/testUtils/browser/emulateColorScheme.d.ts

@@ -0,0 +1,7 @@
+export type EmulatedColorScheme = 'light' | 'dark';
+/**
+ * Emulates the OS preference (`prefers-color-scheme`) of the browser under test.
+ * Can be called repeatedly to switch mid-test. Chromium only.
+ */
+export declare function emulateColorScheme(scheme: EmulatedColorScheme): Promise<void>;
+//# sourceMappingURL=emulateColorScheme.d.ts.map

package/dist/testUtils/browser/emulateColorScheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emulateColorScheme.d.ts","sourceRoot":"","sources":["../../../src/testUtils/browser/emulateColorScheme.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD;;;GAGG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,mBAAmB,GAC1B,OAAO,CAAC,IAAI,CAAC,CAIf"}

package/dist/testUtils/browser/render.d.ts

@@ -0,0 +1,13 @@
+import { render as browserRender } from 'vitest-browser-react';
+import { BlocksProviderProps } from '../../components/providers/BlocksProvider/BlocksProvider.js';
+type RenderOptions = Parameters<typeof browserRender>[1] & {
+    /** Passed to the outermost BlocksProvider. Omit to use its default. */
+    colorMode?: BlocksProviderProps['colorMode'];
+};
+/**
+ * Renders the UI in a real browser, under BlocksProvider with the momotaro theme.
+ * Use for tests that need real computed styles.
+ */
+export declare const render: (ui: Parameters<typeof browserRender>[0], { colorMode, ...options }?: RenderOptions) => Promise<import('vitest-browser-react').RenderResult>;
+export {};
+//# sourceMappingURL=render.d.ts.map

package/dist/testUtils/browser/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/testUtils/browser/render.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,6DAA6D,CAAC;AAErE,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG;IACzD,uEAAuE;IACvE,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;CAC9C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,GACjB,IAAI,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,EACvC,4BAA2B,aAAkB,yDAU9C,CAAC"}

package/dist/testUtils/testTheme.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testTheme.css.d.ts","sourceRoot":"","sources":["../../src/testUtils/testTheme.css.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,YAAY,KAuGvB,CAAC"}
+{"version":3,"file":"testTheme.css.d.ts","sourceRoot":"","sources":["../../src/testUtils/testTheme.css.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,YAAY,KAuMvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-react",
-  "version": "2.8.1",
+  "version": "3.0.1",
   "description": "React hooks and components for Blockle",
   "type": "module",
   "exports": {
@@ -34,7 +34,7 @@
     "@vanilla-extract/css": "^1.18.0"
   },
   "peerDependencies": {
-    "@blockle/blocks-core": ">=2.0.x",
+    "@blockle/blocks-core": ">=3.0.x",
     "@blockle/blocks-react-slot": ">=1.2.x",
     "@vanilla-extract/css": "^1.18.0",
     "react": ">=19.1.0",