@blockle/blocks-react 3.0.1 → 3.2.0

package/dist/components/form/Switch/Switch.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { classnames } from "@blockle/blocks-core";
-import { useState, useEffect, useCallback } from "react";
+import { composeRefs, classnames } from "@blockle/blocks-core";
+import { useRef, useState } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { input, container } from "./switch.css.js";
 const Switch = ({
@@ -9,55 +9,45 @@ const Switch = ({
   className,
   defaultChecked,
   onChange,
+  ref,
   ...restProps
 }) => {
-  const [isChecked, setIsChecked] = useState(
-    defaultChecked || checked || false
+  const inputRef = useRef(null);
+  const [uncontrolledChecked, setUncontrolledChecked] = useState(
+    defaultChecked ?? false
   );
+  const isControlled = checked !== void 0;
+  const isChecked = isControlled ? checked : uncontrolledChecked;
   const baseClassName = useComponentStyles("switch", { root: true });
   const thumbClassName = useComponentStyles("switch", { thumb: true }, false);
-  useEffect(() => {
-    if (checked !== void 0) {
-      setIsChecked(checked);
+  const onChangeHandler = (event) => {
+    if (!isControlled) {
+      setUncontrolledChecked(event.target.checked);
     }
-  }, [checked]);
-  const toggle = useCallback(() => {
-    setIsChecked((checked2) => {
-      const newValue = !checked2;
-      if (onChange) {
-        onChange(newValue);
-      }
-      return newValue;
-    });
-  }, [onChange]);
-  const onChangeHandler = useCallback(
-    (event) => {
-      setIsChecked(event.target.checked);
-      if (onChange) {
-        onChange(event.target.checked);
-      }
-    },
-    [onChange]
-  );
+    onChange?.(event);
+  };
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: classnames(className, container, baseClassName),
       "data-checked": isChecked,
       onClick: (event) => {
-        if (event.target.tagName === "INPUT") {
+        if (event.target === inputRef.current) {
           return;
         }
-        toggle();
+        inputRef.current?.click();
       },
       children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             type: "checkbox",
+            role: "switch",
             className: input,
-            checked: isChecked,
+            checked,
+            defaultChecked,
             onChange: onChangeHandler,
+            ref: composeRefs(ref, inputRef),
             ...restProps
           }
         ),

package/dist/components/form/Switch/switch.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/switch.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAQhB,CAAC"}
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/switch.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QASpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAQhB,CAAC"}

package/dist/components/form/Switch/switch.css.js

@@ -5,6 +5,7 @@ setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks-react"
 const container = style({
   "@layer": {
     [layers.molecule]: {
+      flexShrink: 0,
       cursor: "pointer",
       userSelect: "none",
       position: "relative"

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

@@ -2,7 +2,6 @@ import { HTMLElementProps, OptionalLiteral } from '@blockle/blocks-core';
 export type TextInputProps = {
     inputClassName?: string;
     endSlot?: React.ReactNode;
-    name: string;
     startSlot?: React.ReactNode;
     type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
 } & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,cAAc,GAAG;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,eAAe,CACpB,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CACzD,CAAC;CAEH,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwC9C,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,cAAc,GAAG;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,eAAe,CACpB,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,CACzD,CAAC;CAEH,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsC9C,CAAC"}

package/dist/components/form/TextInput/TextInput.js

@@ -8,7 +8,6 @@ const TextInput = ({
   className,
   inputClassName,
   endSlot,
-  name,
   placeholder,
   startSlot,
   type = "text",
@@ -31,7 +30,6 @@ const TextInput = ({
         /* @__PURE__ */ jsx(
           "input",
           {
-            name,
             type,
             placeholder,
             className: classnames(input, inputStyles, inputClassName),

package/dist/components/form/Textarea/Textarea.css.d.ts

@@ -1,3 +1,5 @@
 export declare const textarea: string;
 export declare const fieldSizingEnabled: string;
+export declare const containerFill: string;
+export declare const textareaFill: string;
 //# sourceMappingURL=Textarea.css.d.ts.map

package/dist/components/form/Textarea/Textarea.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Textarea/Textarea.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,QASnB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAE7B,CAAC"}
+{"version":3,"file":"Textarea.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Textarea/Textarea.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,QASnB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAE7B,CAAC;AAEH,eAAO,MAAM,aAAa,QAMxB,CAAC;AAEH,eAAO,MAAM,YAAY,QAMvB,CAAC"}

package/dist/components/form/Textarea/Textarea.css.js

@@ -15,8 +15,24 @@ const textarea = style({
 const fieldSizingEnabled = style({
   fieldSizing: "content"
 });
+const containerFill = style({
+  "@layer": {
+    [layers.molecule]: {
+      blockSize: "100%"
+    }
+  }
+});
+const textareaFill = style({
+  "@layer": {
+    [layers.molecule]: {
+      minBlockSize: "100%"
+    }
+  }
+});
 endFileScope();
 export {
+  containerFill,
   fieldSizingEnabled,
-  textarea
+  textarea,
+  textareaFill
 };

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

@@ -11,6 +11,17 @@ export type TextareaProps = {
      * itself keeps growing inside it.
      */
     maxBlockSize?: string | number;
+    /**
+     * If true, the wrapper stretches to its parent's block size and the
+     * `<textarea>` is at least as tall as the wrapper. Combine with `grow` to
+     * give textareas side by side, such as in a `Grid`, equal heights.
+     *
+     * The heights match up to the container's maximum block size. Past it, the
+     * containers stay equal while the typed-in `<textarea>` scrolls inside its
+     * own; raise `maxBlockSize` to lift the limit. The parent needs a definite
+     * block size, such as a stretched grid cell.
+     */
+    fill?: boolean;
     /**
      * Props for the wrapper element. Accepts the same atoms as `Box`.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Textarea/Textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,KAAK,CAAC;CAE9E,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AAE1C,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2C5C,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Textarea/Textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,KAAK,CAAC;CAE9E,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AAE1C,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiD5C,CAAC"}

package/dist/components/form/Textarea/Textarea.js

@@ -3,12 +3,13 @@ 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 { textarea, fieldSizingEnabled } from "./Textarea.css.js";
+import { textarea, fieldSizingEnabled, textareaFill, containerFill } from "./Textarea.css.js";
 const Textarea = ({
   ref,
   value,
   grow,
   maxBlockSize,
+  fill,
   containerProps,
   ...restProps
 }) => {
@@ -27,7 +28,11 @@ const Textarea = ({
   return /* @__PURE__ */ jsx(
     Box,
     {
-      className: classnames(containerClassName, containerClassNameFromProps),
+      className: classnames(
+        containerClassName,
+        fill && containerFill,
+        containerClassNameFromProps
+      ),
       style: {
         maxHeight: grow ? maxBlockSize : void 0,
         ...containerStyleFromProps
@@ -41,6 +46,7 @@ const Textarea = ({
           className: classnames(
             textarea,
             grow && fieldSizingEnabled,
+            fill && textareaFill,
             inputClassName,
             className
           ),

package/dist/components/layout/Inline/Inline.d.ts

@@ -1,12 +1,20 @@
-import { AlignItemsMap, Atoms, JustifyContentMap } from '@blockle/blocks-core';
+import { AlignItemsMap, Atoms, HTMLElementProps, JustifyContentMap } from '@blockle/blocks-core';
 export type InlineProps = {
     alignX?: keyof JustifyContentMap;
     alignY?: keyof AlignItemsMap;
-    tag?: 'div' | 'ul' | 'ol' | 'nav';
+    /**
+     * Render the single child element instead of a `div`, with the layout
+     * classes and attributes merged onto it. A `ul` or `ol` child keeps its
+     * list markers unless `listStyle="none"` is passed. WebKit then no longer
+     * exposes the element as a list, so pass `role="list"` when list
+     * semantics matter.
+     */
+    asChild?: boolean;
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLElement>;
     gap: Atoms['gap'];
     style?: React.CSSProperties;
-} & Omit<Atoms, 'flexDirection' | 'gap'>;
+} & Omit<Atoms, 'flexDirection' | 'gap'> & Omit<HTMLElementProps<HTMLElement>, 'children' | 'ref'>;
 export declare const Inline: React.FC<InlineProps>;
 //# sourceMappingURL=Inline.d.ts.map

package/dist/components/layout/Inline/Inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,KAAK,EAEV,KAAK,iBAAiB,EAEvB,MAAM,sBAAsB,CAAC;AAI9B,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,iBAAiB,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,aAAa,CAAC;IAC7B,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,CAAC;AAEzC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuBxC,CAAC"}
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,KAAK,EAEV,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EAEvB,MAAM,sBAAsB,CAAC;AAI9B,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,iBAAiB,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,aAAa,CAAC;IAC7B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,GACtC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;AAE1D,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyBxC,CAAC"}

package/dist/components/layout/Inline/Inline.js

@@ -4,24 +4,26 @@ import { Box } from "../Box/Box.js";
 const Inline = ({
   alignX,
   alignY,
-  tag: Tag = "div",
+  asChild,
   children,
   display = "flex",
   gap,
+  ref,
   ...props
 }) => {
   return /* @__PURE__ */ jsx(
     Box,
     {
-      asChild: true,
+      asChild,
       display,
       gap,
       flexDirection: "row",
       justifyContent: alignX ? justifyContentMap[alignX] : void 0,
       alignItems: alignY ? alignItemsMap[alignY] : void 0,
       flexWrap: "wrap",
+      ref,
       ...props,
-      children: /* @__PURE__ */ jsx(Tag, { children })
+      children
     }
   );
 };

package/dist/components/layout/Stack/Stack.d.ts

@@ -1,16 +1,20 @@
-import { AlignItemsMap, Atoms } from '@blockle/blocks-core';
+import { AlignItemsMap, Atoms, HTMLElementProps, JustifyContentMap } from '@blockle/blocks-core';
 export type StackProps = {
     alignX?: keyof AlignItemsMap;
-    tag?: 'div' | 'section' | 'ul' | 'ol';
+    alignY?: keyof JustifyContentMap;
+    /**
+     * Render the single child element instead of a `div`, with the layout
+     * classes and attributes merged onto it. A `ul` or `ol` child keeps its
+     * list markers unless `listStyle="none"` is passed. WebKit then no longer
+     * exposes the element as a list, so pass `role="list"` when list
+     * semantics matter.
+     */
+    asChild?: boolean;
     children: React.ReactNode;
     className?: string;
+    ref?: React.Ref<HTMLElement>;
     gap: Atoms['gap'];
     style?: React.CSSProperties;
-    role?: React.AriaRole;
-    /**
-     * Start prop is only valid when tag="ol"
-     */
-    start?: number;
-} & Omit<Atoms, 'flexDirection' | 'gap'>;
+} & Omit<Atoms, 'flexDirection' | 'gap'> & Omit<HTMLElementProps<HTMLElement>, 'children' | 'ref'>;
 export declare const Stack: React.FC<StackProps>;
 //# sourceMappingURL=Stack.d.ts.map

package/dist/components/layout/Stack/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,KAAK,EAEX,MAAM,sBAAsB,CAAC;AAI9B,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,CAAC,EAAE,MAAM,aAAa,CAAC;IAC7B,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,CAAC;AAEzC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwBtC,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,KAAK,EAEV,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EAEvB,MAAM,sBAAsB,CAAC;AAI9B,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,CAAC,EAAE,MAAM,aAAa,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,iBAAiB,CAAC;IACjC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,GACtC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;AAE1D,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwBtC,CAAC"}

package/dist/components/layout/Stack/Stack.js

@@ -1,24 +1,28 @@
 import { jsx } from "react/jsx-runtime";
-import { alignItemsMap } from "@blockle/blocks-core";
+import { justifyContentMap, alignItemsMap } from "@blockle/blocks-core";
 import { Box } from "../Box/Box.js";
 const Stack = ({
-  tag: Tag = "div",
+  asChild,
   display = "flex",
   children,
   gap,
   alignX,
+  alignY,
+  ref,
   ...restProps
 }) => {
   return /* @__PURE__ */ jsx(
     Box,
     {
-      asChild: true,
+      asChild,
       display,
       gap,
       flexDirection: "column",
       alignItems: alignX ? alignItemsMap[alignX] : void 0,
+      justifyContent: alignY ? justifyContentMap[alignY] : void 0,
+      ref,
       ...restProps,
-      children: /* @__PURE__ */ jsx(Tag, { children })
+      children
     }
   );
 };

package/dist/components/navigation/Link/Link.d.ts

@@ -3,8 +3,8 @@ type LinkTheme = ComponentThemes['link'];
 export type LinkProps = {
     asChild?: boolean;
     children?: React.ReactNode;
+    intent?: LinkTheme['variants']['intent'];
     underline?: LinkTheme['variants']['underline'];
-    variant?: LinkTheme['variants']['variant'];
 } & HTMLElementProps<HTMLAnchorElement> & MarginAtoms;
 export declare const Link: React.FC<LinkProps>;
 export {};

package/dist/components/navigation/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAK9B,KAAK,SAAS,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC5C,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,GACrC,WAAW,CAAC;AAId,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAsBpC,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAK9B,KAAK,SAAS,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,CAAC;CAChD,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,GACrC,WAAW,CAAC;AAId,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAsBpC,CAAC"}

package/dist/components/navigation/Link/Link.js

@@ -8,13 +8,13 @@ const Link = ({
   asChild,
   children,
   className,
+  intent,
   underline,
-  variant,
   ...restProps
 }) => {
   const linkClassName = useComponentStyles("link", {
     root: true,
-    variants: { variant, underline }
+    variants: { intent, underline }
   });
   return /* @__PURE__ */ jsx(
     Template,

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

@@ -1,8 +1,11 @@
 import { ComponentThemes, HTMLElementProps } from '@blockle/blocks-core';
+import { RequestCloseReason } from '../requestCloseReason.js';
 type DialogTheme = ComponentThemes['dialog'];
 export type DialogProps = {
     open: boolean;
-    onRequestClose: () => void;
+    onRequestClose: (reason: RequestCloseReason) => void;
+    /** Runs on a close request, before the component prevents it and asks to close */
+    onCancel?: React.ReactEventHandler<HTMLDialogElement>;
     className?: string;
     size?: DialogTheme['variants']['size'];
     'aria-label'?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAY9B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6FxC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAInE,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,kFAAkF;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkDxC,CAAC"}

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

@@ -1,21 +1,21 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
-import { useRef, useState, useCallback } from "react";
-import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
+import { classnames, composeRefs } from "@blockle/blocks-core";
+import { useRef } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
-import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
-import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
-import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
-import { useRestoreFocus } from "../../../hooks/useRestoreFocus/useRestoreFocus.js";
+import { useModalDialog } from "../../../hooks/useModalDialog/useModalDialog.js";
+import { useModalOverlay, DialogContext } from "../useModalOverlay.js";
 import { dialog } from "./dialog.css.js";
-import { useNestedDialog, DialogContext } from "./dialogHelper.js";
 const Dialog = ({
   children,
   open,
   className,
   onRequestClose,
   size,
+  ref,
+  onKeyDown,
+  onKeyDownCapture,
+  onCancel,
   ...restProps
 }) => {
   const dialogRef = useRef(null);
@@ -23,55 +23,28 @@ const Dialog = ({
     dialog: true,
     variants: { size }
   });
-  const [enabled, setEnabled] = useState(true);
-  const [visible, setVisible] = useState(open);
-  useRestoreFocus(open);
-  const isNested = useNestedDialog(open);
-  usePreventBodyScroll(open && !isNested);
-  const onEscape = useCallback(
-    (event) => {
-      event.preventDefault();
-      onRequestClose();
-    },
-    [onRequestClose]
-  );
-  useKeyboard("Escape", onEscape, { enabled: open && enabled });
-  useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
-  useIsomorphicLayoutEffect(() => {
-    if (open && visible) {
-      if (!dialogRef.current || !dialogRef.current.showModal) {
-        return;
-      }
-      dialogRef.current.showModal();
-    } else if (open) {
-      setVisible(true);
-    } else {
-      if (!hasAnimationDuration(dialogRef.current)) {
-        setVisible(false);
-      }
-      if (dialogRef.current?.close) {
-        dialogRef.current.close();
-      }
-    }
-  }, [open, visible]);
-  const onAnimationEnd = useCallback(() => {
-    if (!open) {
-      setVisible(false);
-    }
-  }, [open]);
+  const { contextValue, closeRequestProps } = useModalOverlay(dialogRef, {
+    open,
+    onRequestClose,
+    onKeyDown,
+    onKeyDownCapture,
+    onCancel
+  });
+  const { visible, onAnimationEnd } = useModalDialog(dialogRef, open);
   if (!visible) {
     return null;
   }
   const dataOpen = typeof window === "undefined" && open ? true : void 0;
-  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "dialog",
     {
-      ref: dialogRef,
+      ref: composeRefs(ref, dialogRef),
       open: dataOpen,
       className: classnames(dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
       ...restProps,
+      ...closeRequestProps,
       children
     }
   ) });

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

@@ -1,9 +1,16 @@
-import { HTMLElementProps } from '@blockle/blocks-core';
+import { ComponentThemes, HTMLElementProps } from '@blockle/blocks-core';
+import { RequestCloseReason } from '../requestCloseReason.js';
 import * as styles from './drawer.css.js';
+type DrawerTheme = ComponentThemes['drawer'];
 export type DrawerProps = {
     open: boolean;
-    onRequestClose: () => void;
+    onRequestClose: (reason: RequestCloseReason) => void;
+    /** Runs on a close request, before the component prevents it and asks to close */
+    onCancel?: React.ReactEventHandler<HTMLDialogElement>;
+    className?: string;
     placement?: keyof typeof styles.placement;
+    size?: DrawerTheme['variants']['size'];
 } & HTMLElementProps<HTMLDialogElement>;
 export declare const Drawer: React.FC<DrawerProps>;
+export {};
 //# sourceMappingURL=Drawer.d.ts.map

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":"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"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAE1C,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,kFAAkF;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;IAC1C,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;CACxC,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyDxC,CAAC"}

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

@@ -1,78 +1,59 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
-import { useRef, useState, useCallback } from "react";
-import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
+import { classnames, composeRefs } from "@blockle/blocks-core";
+import { useRef } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
-import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
-import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
-import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
+import { useModalDialog } from "../../../hooks/useModalDialog/useModalDialog.js";
+import { useModalOverlay, DialogContext } from "../useModalOverlay.js";
 import { drawer, placement } from "./drawer.css.js";
 const Drawer = ({
   open,
   onRequestClose,
+  className,
   placement: placement$1 = "left",
+  size,
   children,
+  ref,
+  onKeyDown,
+  onKeyDownCapture,
+  onCancel,
   ...restProps
 }) => {
   const dialogRef = useRef(null);
-  const [visible, setVisible] = useState(open);
   const rootClassName = useComponentStyles("drawer", {
     root: true,
-    variants: { placement: placement$1 }
+    variants: { placement: placement$1, size }
   });
   const dataOpen = typeof window === "undefined" && open ? true : void 0;
-  usePreventBodyScroll(open);
-  useClickOutside(dialogRef, onRequestClose, { enabled: open });
-  const onEscape = useCallback(
-    (event) => {
-      event.preventDefault();
-      onRequestClose();
-    },
-    [onRequestClose]
-  );
-  useKeyboard("Escape", onEscape, { enabled: open });
-  useIsomorphicLayoutEffect(() => {
-    if (open && visible) {
-      if (!dialogRef.current || !dialogRef.current.showModal) {
-        return;
-      }
-      dialogRef.current.showModal();
-    } else if (open) {
-      setVisible(true);
-    } else {
-      if (!hasAnimationDuration(dialogRef.current)) {
-        setVisible(false);
-      }
-      if (dialogRef.current?.close) {
-        dialogRef.current.close();
-      }
-    }
-  }, [open, visible]);
-  const onAnimationEnd = useCallback(() => {
-    if (!open) {
-      setVisible(false);
-    }
-  }, [open]);
+  const { contextValue, closeRequestProps } = useModalOverlay(dialogRef, {
+    open,
+    onRequestClose,
+    onKeyDown,
+    onKeyDownCapture,
+    onCancel
+  });
+  const { visible, onAnimationEnd } = useModalDialog(dialogRef, open);
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "dialog",
     {
-      ref: dialogRef,
+      ref: composeRefs(ref, dialogRef),
       open: dataOpen,
       className: classnames(
         drawer,
         placement[placement$1],
-        rootClassName
+        rootClassName,
+        className
       ),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
       ...restProps,
+      ...closeRequestProps,
       children
     }
-  );
+  ) });
 };
 export {
   Drawer