@blockle/blocks-react 3.1.0 → 3.3.0

package/dist/components/form/IconButton/IconButton.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { getAtomsAndProps, classnames, atoms } from "@blockle/blocks-core";
+import { createSlottable } from "@blockle/blocks-react-slot";
+import { isValidElement, cloneElement } from "react";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { Spinner } from "../../feedback/Spinner/Spinner.js";
+import { buttonReset } from "../Button/Button.css.js";
+const [Template, Slot] = createSlottable("button");
+const IconButton = ({
+  asChild,
+  children,
+  className,
+  disabled,
+  intent,
+  label,
+  loading,
+  shape,
+  size,
+  type,
+  variant,
+  ...restProps
+}) => {
+  const iconButtonClassName = useComponentStyles("iconButton", {
+    root: true,
+    variants: {
+      variant,
+      intent,
+      size,
+      shape,
+      disabled,
+      loading
+    }
+  });
+  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
+  const spinner = /* @__PURE__ */ jsx(Spinner, { size });
+  let content = children;
+  if (loading) {
+    content = asChild && isValidElement(children) ? cloneElement(children, void 0, spinner) : spinner;
+  }
+  return /* @__PURE__ */ jsx(
+    Template,
+    {
+      asChild,
+      "aria-label": label,
+      disabled: disabled || loading,
+      className: classnames(
+        buttonReset,
+        iconButtonClassName,
+        atoms(atomsProps),
+        className
+      ),
+      type: asChild ? void 0 : type ?? "button",
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(Slot, { children: content })
+    }
+  );
+};
+export {
+  IconButton
+};

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

@@ -13,7 +13,7 @@ export type LabelProps = {
     required?: boolean;
     size?: LabelTheme['variants']['size'];
     cursor?: Atoms['cursor'];
-} & HTMLElementProps<HTMLLabelElement>;
+} & Omit<HTMLElementProps<HTMLLabelElement>, 'size'>;
 export declare const Label: React.FC<LabelProps>;
 export {};
 //# sourceMappingURL=Label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Label/Label.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAI9B,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC1B,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuBtC,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Label/Label.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAI9B,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC1B,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAErD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuBtC,CAAC"}

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

@@ -1,9 +1,19 @@
 import { TextInputProps } from '../TextInput/TextInput.js';
 export type NumericInputProps = {
+    /**
+     * Accessible name of the decrement button. Pass your own wording to translate it.
+     * @default 'Decrease'
+     */
+    decrementLabel?: string;
+    /**
+     * Accessible name of the increment button. Pass your own wording to translate it.
+     * @default 'Increase'
+     */
+    incrementLabel?: string;
     value?: number | string;
     min?: number;
     max?: number;
     step?: number;
-} & TextInputProps;
+} & Omit<TextInputProps, 'startSlot' | 'endSlot'>;
 export declare const NumericInput: React.FC<NumericInputProps>;
 //# sourceMappingURL=NumericInput.d.ts.map

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":"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"}
+{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/NumericInput/NumericInput.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,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,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,SAAS,CAAC,CAAC;AAOlD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgEpD,CAAC"}

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

@@ -1,42 +1,70 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { composeRefs } from "@blockle/blocks-core";
+import { classnames, composeRefs } from "@blockle/blocks-core";
 import { useRef, useCallback } from "react";
-import { Button } from "../Button/Button.js";
+import { PlusIcon, MinusIcon } from "../../../icons/icons.js";
+import { IconButton } from "../IconButton/IconButton.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { numericInput } from "./NumericInput.css.js";
-const NumericInput = (props) => {
+const shiftMultiplier = 10;
+const stepsFor = (event) => event.shiftKey ? shiftMultiplier : 1;
+const NumericInput = ({
+  decrementLabel = "Decrease",
+  incrementLabel = "Increase",
+  ...props
+}) => {
   const inputRef = useRef(null);
+  const { onKeyDown: consumerOnKeyDown } = props;
   const onDecrement = useCallback((event) => {
-    const size = event.shiftKey ? 10 : 1;
-    inputRef.current?.stepDown(size);
+    inputRef.current?.stepDown(stepsFor(event));
   }, []);
   const onIncrement = useCallback((event) => {
-    const stepSize = event.shiftKey ? 10 : 1;
-    inputRef.current?.stepUp(stepSize);
-  }, []);
-  const onKeyDown = useCallback((event) => {
-    if (!event.shiftKey) {
-      return;
-    }
-    if (event.key === "ArrowUp") {
-      event.preventDefault();
-      inputRef.current?.stepUp(10);
-    } else if (event.key === "ArrowDown") {
-      event.preventDefault();
-      inputRef.current?.stepDown(10);
-    }
+    inputRef.current?.stepUp(stepsFor(event));
   }, []);
+  const onKeyDown = useCallback(
+    (event) => {
+      consumerOnKeyDown?.(event);
+      if (event.defaultPrevented || !event.shiftKey) {
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        inputRef.current?.stepUp(stepsFor(event));
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        inputRef.current?.stepDown(stepsFor(event));
+      }
+    },
+    [consumerOnKeyDown]
+  );
   return /* @__PURE__ */ jsx(
     TextInput,
     {
+      ...props,
       ref: composeRefs(props.ref, inputRef),
-      inputClassName: numericInput,
+      inputClassName: classnames(numericInput, props.inputClassName),
       type: "number",
-      startSlot: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "small", onClick: onDecrement, children: "-" }),
-      endSlot: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "small", onClick: onIncrement, children: "+" }),
-      onKeyDown,
-      ...props
+      startSlot: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: decrementLabel,
+          variant: "ghost",
+          size: "small",
+          onClick: onDecrement,
+          children: /* @__PURE__ */ jsx(MinusIcon, {})
+        }
+      ),
+      endSlot: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: incrementLabel,
+          variant: "ghost",
+          size: "small",
+          onClick: onIncrement,
+          children: /* @__PURE__ */ jsx(PlusIcon, {})
+        }
+      ),
+      onKeyDown
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC9C,GAAG,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiCxC,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC9C,GAAG,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiCxC,CAAC"}

package/dist/components/form/Select/Select.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { ChevronDownIcon } from "../../../icons/icons.js";
 import { Box } from "../../layout/Box/Box.js";
 import { select, icon, wrapper } from "./select.css.js";
 const Select = ({
@@ -36,33 +37,11 @@ const Select = ({
         className: classnames(icon, iconClassName),
         role: "presentation",
         "aria-hidden": true,
-        children: /* @__PURE__ */ jsx(DefaultIcon, {})
+        children: /* @__PURE__ */ jsx(ChevronDownIcon, { style: { width: "1rem", height: "1rem" } })
       }
     )
   ] });
 };
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        role: "presentation",
-        viewBox: "0 0 24 24",
-        style: { width: "1rem", height: "1rem" },
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "currentColor",
-            fillRule: "evenodd",
-            d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
-            clipRule: "evenodd"
-          }
-        )
-      }
-    )
-  );
-};
 export {
   Select
 };

package/dist/components/form/Select/select.css.js

@@ -21,7 +21,7 @@ const icon = style({
   "@layer": {
     [layers.molecule]: {
       position: "absolute",
-      right: 0,
+      insetInlineEnd: 0,
       top: 0,
       bottom: 0,
       pointerEvents: "none",

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/navigation/Tabs/Tab.d.ts

@@ -0,0 +1,21 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+export type TabProps = {
+    /** In a `TabNav`: render the child element (a router link) as the tab's link */
+    asChild?: boolean;
+    children?: React.ReactNode;
+    /** In a `TabNav`: this tab is the current page. Sets `aria-current="page"` */
+    current?: boolean;
+    /** Content after the tab, such as a close `IconButton`; never inside the tab itself */
+    endSlot?: React.ReactNode;
+    ref?: React.Ref<HTMLAnchorElement & HTMLButtonElement>;
+    /** Content before the tab, such as a status dot or an Icon */
+    startSlot?: React.ReactNode;
+    /** In `Tabs`: matches the `value` of the TabPanel this tab shows. Required there. */
+    value?: string;
+} & Omit<HTMLElementProps<HTMLElement>, 'children' | 'ref' | 'type' | 'value'>;
+/**
+ * Inside `Tabs` a `button` with `role="tab"`; inside `TabNav` a link (`a`, or
+ * any element through `asChild`) that is `aria-current="page"` when `current`.
+ */
+export declare const Tab: React.FC<TabProps>;
+//# sourceMappingURL=Tab.d.ts.map

package/dist/components/navigation/Tabs/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Tabs/Tab.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AASzE,MAAM,MAAM,QAAQ,GAAG;IACrB,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uFAAuF;IACvF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACvD,8DAA8D;IAC9D,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAgK/E;;;GAGG;AACH,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAIlC,CAAC"}