@blockle/blocks-react 3.1.0 → 3.2.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/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/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/typography/Heading/Heading.d.ts

@@ -1,10 +1,11 @@
 import { HTMLElementProps, MarginAtoms, PaddingAtoms, TextAtoms } from '@blockle/blocks-core';
 import { TextColor } from '../textColor.js';
+import { TextOverflowProps } from '../textOverflow.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> & Omit<TextAtoms, 'color'> & MarginAtoms & PaddingAtoms;
+} & TextOverflowProps & 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":"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"}
+{"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;AAChE,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,oBAAoB,CAAC;AAG5B,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,iBAAiB,GACnB,gBAAgB,CAAC,kBAAkB,CAAC,GACpC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GACxB,WAAW,GACX,YAAY,CAAC;AAEf,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA8B1C,CAAC"}

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

@@ -3,11 +3,14 @@ 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 { textOverflowClassName } from "../textOverflow.js";
 import { heading } from "./heading.css.js";
 const Heading = ({
   className,
   color,
   level = 1,
+  lineClamp,
+  truncate,
   children,
   ...restProps
 }) => {
@@ -20,7 +23,12 @@ const Heading = ({
     Box,
     {
       asChild: true,
-      className: classnames(heading, themeClassName, className),
+      className: classnames(
+        heading,
+        themeClassName,
+        textOverflowClassName("Heading", { lineClamp, truncate }),
+        className
+      ),
       color,
       ...restProps,
       children: /* @__PURE__ */ jsx(Tag, { children })

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

@@ -1,6 +1,7 @@
 import { HTMLElementProps, MarginAtoms, PaddingAtoms, TextAtoms } from '@blockle/blocks-core';
 import { default as React } from 'react';
 import { TextColor } from '../textColor.js';
+import { TextOverflowProps } from '../textOverflow.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;
@@ -9,7 +10,7 @@ export type TextProps<Tag extends Tags = 'span'> = {
     tag?: Tag;
     /** 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;
+} & TextOverflowProps & Omit<HTMLElementProps<HTMLSpanElement>, 'children' | 'ref'> & Omit<TextAtoms, 'color'> & MarginAtoms & PaddingAtoms;
+export declare const Text: <T extends Tags = "span">({ asChild, children, className, color, lineClamp, ref, tag, truncate, ...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":"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"}
+{"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;AAChE,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,oBAAoB,CAAC;AAG5B,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,iBAAiB,GACnB,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,GAC3D,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GACxB,WAAW,GACX,YAAY,CAAC;AAEf,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,sFAU3C,SAAS,CAAC,CAAC,CAAC,4CA2Bd,CAAC"}

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

@@ -3,14 +3,17 @@ 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 { textOverflowClassName } from "../textOverflow.js";
 import { text } from "./text.css.js";
 const Text = ({
   asChild,
   children,
   className,
   color,
+  lineClamp,
   ref,
   tag,
+  truncate,
   ...restProps
 }) => {
   const Component = tag ?? "span";
@@ -22,7 +25,12 @@ const Text = ({
     Box,
     {
       asChild: true,
-      className: classnames(text, themeClassName, className),
+      className: classnames(
+        text,
+        themeClassName,
+        textOverflowClassName("Text", { lineClamp, truncate }),
+        className
+      ),
       color,
       ...restProps,
       children: asChild ? children : (

package/dist/components/typography/textOverflow.css.d.ts

@@ -0,0 +1,3 @@
+export declare const lineClamp: Record<1 | 2 | 3 | 4 | 5, string>;
+export declare const truncate: string;
+//# sourceMappingURL=textOverflow.css.d.ts.map

package/dist/components/typography/textOverflow.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textOverflow.css.d.ts","sourceRoot":"","sources":["../../../src/components/typography/textOverflow.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,mCAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,QASnB,CAAC"}