@tcn/ui 0.8.1 → 0.9.0

package/dist/typography/subheadline/subheadline.js

@@ -1,36 +1,39 @@
-import { jsx as g } from "react/jsx-runtime";
+import { jsx as b } from "react/jsx-runtime";
+import g from "react";
 import { clsx as p } from "clsx";
-import { s as u } from "../../subheadline.module-C-v7zMkQ.js";
-function j({
-  size: n = "md",
-  emphasis: l = "normal",
-  hierarchy: o = "primary",
-  color: e,
-  children: s,
-  className: t,
-  style: i = {},
-  padStart: r,
-  padEnd: d,
-  padBottom: f,
-  padTop: m,
-  pad: h,
-  selectable: c = !0
-}) {
-  let a;
-  return n === "lg" ? a = "h3" : n === "md" ? a = "h4" : a = "h5", h && (i.padding = h), r && (i.paddingInlineStart = r), d && (i.paddingInlineEnd = d), m && (i.paddingTop = m), f && (i.paddingBottom = f), e && (i.color = e), /* @__PURE__ */ g(
-    a,
-    {
-      "data-hierarchy": o,
-      "data-emphasis": l,
-      "data-selectable": c,
-      className: p(u.subheadline, t, "tcn-subheadline"),
-      style: i,
-      "data-size": n,
-      children: s
-    }
-  );
-}
+import '../../subheadline.css';const _ = "_subheadline_ae8bc38", x = { subheadline: _ }, w = g.forwardRef(
+  function({
+    size: a = "md",
+    emphasis: o = "normal",
+    hierarchy: h = "primary",
+    color: n,
+    children: m,
+    className: s,
+    style: i = {},
+    padStart: d,
+    padEnd: r,
+    padBottom: f,
+    padTop: t,
+    pad: l,
+    selectable: c = !0
+  }, u) {
+    let e;
+    return a === "lg" ? e = "h3" : a === "md" ? e = "h4" : e = "h5", l && (i.padding = l), d && (i.paddingInlineStart = d), r && (i.paddingInlineEnd = r), t && (i.paddingTop = t), f && (i.paddingBottom = f), n && (i.color = n), /* @__PURE__ */ b(
+      e,
+      {
+        ref: u,
+        "data-hierarchy": h,
+        "data-emphasis": o,
+        "data-selectable": c,
+        className: p(x.subheadline, s, "tcn-subheadline"),
+        style: i,
+        "data-size": a,
+        children: m
+      }
+    );
+  }
+);
 export {
-  j as Subheadline
+  w as Subheadline
 };
 //# sourceMappingURL=subheadline.js.map

package/dist/typography/subheadline/subheadline.js.map

@@ -1 +1 @@
-{"version":3,"file":"subheadline.js","sources":["../../../src/typography/subheadline/subheadline.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './subheadline.module.css';\n\nexport interface SubheadlineOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type SubheadlineProps = WithDetailedHTMLProps<\n  SubheadlineOwnProps,\n  'h3' | 'h4' | 'h5'\n>;\n\nexport function Subheadline({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: SubheadlineProps) {\n  let As: React.ElementType;\n\n  if (size === 'lg') {\n    As = 'h3';\n  } else if (size === 'md') {\n    As = 'h4';\n  } else {\n    As = 'h5';\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['subheadline'], className, 'tcn-subheadline')}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Subheadline","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","As","jsx","clsx","styles"],"mappings":";;;AAyBO,SAASA,EAAY;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAqB;AACnB,MAAIC;AAEJ,SAAIb,MAAS,OACXa,IAAK,OACIb,MAAS,OAClBa,IAAK,OAELA,IAAK,MAGHF,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAW;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWG,EAAKC,EAAO,aAAgBX,GAAW,iBAAiB;AAAA,MACnE,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"subheadline.js","sources":["../../../src/typography/subheadline/subheadline.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './subheadline.module.css';\n\nexport interface SubheadlineOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type SubheadlineProps = WithDetailedHTMLProps<\n  SubheadlineOwnProps,\n  'h3' | 'h4' | 'h5'\n>;\n\nexport const Subheadline = React.forwardRef<HTMLHeadingElement, SubheadlineProps>(\n  function Subheadline(\n    {\n      size = 'md',\n      emphasis = 'normal',\n      hierarchy = 'primary',\n      color,\n      children,\n      className,\n      style = {},\n      padStart,\n      padEnd,\n      padBottom,\n      padTop,\n      pad,\n      selectable = true,\n    }: SubheadlineProps,\n    ref\n  ) {\n    let As: React.ElementType;\n\n    if (size === 'lg') {\n      As = 'h3';\n    } else if (size === 'md') {\n      As = 'h4';\n    } else {\n      As = 'h5';\n    }\n\n    if (pad) {\n      style.padding = pad;\n    }\n\n    if (padStart) {\n      style.paddingInlineStart = padStart;\n    }\n\n    if (padEnd) {\n      style.paddingInlineEnd = padEnd;\n    }\n\n    if (padTop) {\n      style.paddingTop = padTop;\n    }\n\n    if (padBottom) {\n      style.paddingBottom = padBottom;\n    }\n\n    if (color) {\n      style.color = color;\n    }\n\n    return (\n      <As\n        ref={ref}\n        data-hierarchy={hierarchy}\n        data-emphasis={emphasis}\n        data-selectable={selectable}\n        className={clsx(styles['subheadline'], className, 'tcn-subheadline')}\n        style={style}\n        data-size={size}\n      >\n        {children}\n      </As>\n    );\n  }\n);\n"],"names":["Subheadline","React","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","ref","As","jsx","clsx","styles"],"mappings":";;;0DAyBaA,IAAcC,EAAM;AAAA,EAC/B,SACE;AAAA,IACE,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ,CAAA;AAAA,IACR,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,KAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,EAAA,GAEfC,GACA;AACA,QAAIC;AAEJ,WAAId,MAAS,OACXc,IAAK,OACId,MAAS,OAClBc,IAAK,OAELA,IAAK,MAGHH,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAY;AAAA,MAACD;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,kBAAgBX;AAAA,QAChB,iBAAeD;AAAA,QACf,mBAAiBW;AAAA,QACjB,WAAWI,EAAKC,EAAO,aAAgBZ,GAAW,iBAAiB;AAAA,QACnE,OAAAC;AAAA,QACA,aAAWN;AAAA,QAEV,UAAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/utils/dnd/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/utils/dnd/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAShD,eAAO,MAAM,oBAAoB,wCAA6C,CAAC;AAE/E,wBAAgB,gBAAgB,IAAI,aAAa,CAWhD"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/utils/dnd/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAUhD,eAAO,MAAM,oBAAoB,wCAA6C,CAAC;AAE/E,wBAAgB,gBAAgB,IAAI,aAAa,CAWhD"}

package/dist/utils/dnd/context.js

@@ -1,20 +1,22 @@
-import { createContext as t, useContext as r } from "react";
-const n = {
+import { createContext as n, useContext as o } from "react";
+const t = {
   registerHandle: () => {
   },
   unregisterHandle: () => {
   },
   isDragging: !1,
-  position: { x: 0, y: 0 }
-}, o = t(n);
+  position: { x: 0, y: 0 },
+  setPosition: () => {
+  }
+}, r = n(t);
 function i() {
-  const e = r(o);
-  return e === n && console.warn(
+  const e = o(r);
+  return e === t && console.warn(
     "useDragContainer: No DragContainerContext found. Handles may will not register or trigger drag events."
   ), e;
 }
 export {
-  o as DragContainerContext,
+  r as DragContainerContext,
   i as useDragContainer
 };
 //# sourceMappingURL=context.js.map

package/dist/utils/dnd/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../../src/utils/dnd/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { DragContainer } from './types.js';\n\nconst defaultValue: DragContainer = {\n  registerHandle: () => {},\n  unregisterHandle: () => {},\n  isDragging: false,\n  position: { x: 0, y: 0 },\n};\n\nexport const DragContainerContext = createContext<DragContainer>(defaultValue);\n\nexport function useDragContainer(): DragContainer {\n  const context = useContext(DragContainerContext);\n\n  if (context === defaultValue) {\n    // biome-ignore lint/suspicious/noConsole: Let devs know if they're not using the context correctly\n    console.warn(\n      'useDragContainer: No DragContainerContext found. Handles may will not register or trigger drag events.'\n    );\n  }\n\n  return context;\n}\n"],"names":["defaultValue","DragContainerContext","createContext","useDragContainer","context","useContext"],"mappings":";AAGA,MAAMA,IAA8B;AAAA,EAClC,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,YAAY;AAAA,EACZ,UAAU,EAAE,GAAG,GAAG,GAAG,EAAA;AACvB,GAEaC,IAAuBC,EAA6BF,CAAY;AAEtE,SAASG,IAAkC;AAChD,QAAMC,IAAUC,EAAWJ,CAAoB;AAE/C,SAAIG,MAAYJ,KAEd,QAAQ;AAAA,IACN;AAAA,EAAA,GAIGI;AACT;"}
+{"version":3,"file":"context.js","sources":["../../../src/utils/dnd/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { DragContainer } from './types.js';\n\nconst defaultValue: DragContainer = {\n  registerHandle: () => {},\n  unregisterHandle: () => {},\n  isDragging: false,\n  position: { x: 0, y: 0 },\n  setPosition: () => {},\n};\n\nexport const DragContainerContext = createContext<DragContainer>(defaultValue);\n\nexport function useDragContainer(): DragContainer {\n  const context = useContext(DragContainerContext);\n\n  if (context === defaultValue) {\n    // biome-ignore lint/suspicious/noConsole: Let devs know if they're not using the context correctly\n    console.warn(\n      'useDragContainer: No DragContainerContext found. Handles may will not register or trigger drag events.'\n    );\n  }\n\n  return context;\n}\n"],"names":["defaultValue","DragContainerContext","createContext","useDragContainer","context","useContext"],"mappings":";AAGA,MAAMA,IAA8B;AAAA,EAClC,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,YAAY;AAAA,EACZ,UAAU,EAAE,GAAG,GAAG,GAAG,EAAA;AAAA,EACrB,aAAa,MAAM;AAAA,EAAC;AACtB,GAEaC,IAAuBC,EAA6BF,CAAY;AAEtE,SAASG,IAAkC;AAChD,QAAMC,IAAUC,EAAWJ,CAAoB;AAE/C,SAAIG,MAAYJ,KAEd,QAAQ;AAAA,IACN;AAAA,EAAA,GAIGI;AACT;"}

package/dist/utils/dnd/hooks/use_drag_container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_drag_container.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,uBAAuB;IACtC,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,uBAAuB,GAAG,aAAa,CAgCpF"}
+{"version":3,"file":"use_drag_container.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,uBAAuB;IACtC,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,uBAAuB,GAAG,aAAa,CAiDpF"}

package/dist/utils/dnd/hooks/use_drag_container.js

@@ -1,28 +1,42 @@
-import { useState as n, useRef as b, useCallback as o } from "react";
+import { useState as s, useRef as b, useCallback as o } from "react";
 import { useDraggable as k } from "./use_draggable.js";
-function m(l) {
-  const [c, a] = n([]), r = b(l.initialPosition ?? { x: 0, y: 0 }), [s, g] = n(r.current), [u, i] = n(!1);
+function m(g) {
+  const [u, a] = s([]), n = b(g.initialPosition ?? { x: 0, y: 0 }), [i, c] = s(n.current), [f, l] = s(!1);
   k({
-    handles: c,
+    handles: u,
     startDragCallback: () => {
-      i(!0);
+      l(!0);
     },
-    dragCallback: (e, t) => {
-      g({
-        x: r.current.x + e,
-        y: r.current.y + t
+    dragCallback: (t, e) => {
+      c({
+        x: n.current.x + t,
+        y: n.current.y + e
       });
     },
     endDragCallback: () => {
-      i(!1), r.current = s;
+      l(!1), n.current = i;
     }
   });
-  const f = o((e) => {
-    a((t) => [...t, e]);
-  }, []), d = o((e) => {
-    a((t) => t.filter((D) => D !== e));
+  const d = o(
+    (t) => {
+      c((e) => {
+        const r = typeof t == "function" ? t(e) : t;
+        return n.current = r, r;
+      });
+    },
+    []
+  ), p = o((t) => {
+    a((e) => [...e, t]);
+  }, []), D = o((t) => {
+    a((e) => e.filter((r) => r !== t));
   }, []);
-  return { registerHandle: f, unregisterHandle: d, position: s, isDragging: u };
+  return {
+    registerHandle: p,
+    unregisterHandle: D,
+    position: i,
+    isDragging: f,
+    setPosition: d
+  };
 }
 export {
   m as useMakeDragContainer

package/dist/utils/dnd/hooks/use_drag_container.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_drag_container.js","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useDraggable } from './use_draggable.js';\nimport type { Position } from '../../index.js';\nimport type { DragContainer } from '../types.js';\n\nexport interface UseDragContainerOptions {\n  initialPosition?: Position;\n}\n\nexport function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {\n  const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);\n  const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });\n  const [position, setPosition] = useState(positionRef.current);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useDraggable({\n    handles: handles,\n    startDragCallback: () => {\n      setIsDragging(true);\n    },\n    dragCallback: (deltaX, deltaY) => {\n      setPosition({\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      });\n    },\n    endDragCallback: () => {\n      setIsDragging(false);\n      positionRef.current = position;\n    },\n  });\n\n  const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => [...prev, handle]);\n  }, []);\n\n  const unregisterHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => prev.filter(h => h !== handle));\n  }, []);\n\n  return { registerHandle, unregisterHandle, position, isDragging };\n}\n"],"names":["useMakeDragContainer","options","handles","setHandles","useState","positionRef","useRef","position","setPosition","isDragging","setIsDragging","useDraggable","deltaX","deltaY","registerHandle","useCallback","handle","prev","unregisterHandle","h"],"mappings":";;AASO,SAASA,EAAqBC,GAAiD;AACpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAyC,CAAA,CAAE,GACnEC,IAAcC,EAAiBL,EAAQ,mBAAmB,EAAE,GAAG,GAAG,GAAG,GAAG,GACxE,CAACM,GAAUC,CAAW,IAAIJ,EAASC,EAAY,OAAO,GACtD,CAACI,GAAYC,CAAa,IAAIN,EAAS,EAAK;AAElD,EAAAO,EAAa;AAAA,IACX,SAAAT;AAAA,IACA,mBAAmB,MAAM;AACvB,MAAAQ,EAAc,EAAI;AAAA,IACpB;AAAA,IACA,cAAc,CAACE,GAAQC,MAAW;AAChC,MAAAL,EAAY;AAAA,QACV,GAAGH,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,CAC5B;AAAA,IACH;AAAA,IACA,iBAAiB,MAAM;AACrB,MAAAH,EAAc,EAAK,GACnBL,EAAY,UAAUE;AAAA,IACxB;AAAA,EAAA,CACD;AAED,QAAMO,IAAiBC,EAAY,CAACC,MAAyC;AAC3E,IAAAb,EAAW,CAAAc,MAAQ,CAAC,GAAGA,GAAMD,CAAM,CAAC;AAAA,EACtC,GAAG,CAAA,CAAE,GAECE,IAAmBH,EAAY,CAACC,MAAyC;AAC7E,IAAAb,EAAW,OAAQc,EAAK,OAAO,CAAAE,MAAKA,MAAMH,CAAM,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,gBAAAF,GAAgB,kBAAAI,GAAkB,UAAAX,GAAU,YAAAE,EAAA;AACvD;"}
+{"version":3,"file":"use_drag_container.js","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useDraggable } from './use_draggable.js';\nimport type { Position } from '../../index.js';\nimport type { DragContainer } from '../types.js';\n\nexport interface UseDragContainerOptions {\n  initialPosition?: Position;\n}\n\nexport function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {\n  const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);\n  const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });\n  const [position, setPosition] = useState(positionRef.current);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useDraggable({\n    handles: handles,\n    startDragCallback: () => {\n      setIsDragging(true);\n    },\n    dragCallback: (deltaX, deltaY) => {\n      setPosition({\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      });\n    },\n    endDragCallback: () => {\n      setIsDragging(false);\n      positionRef.current = position;\n    },\n  });\n\n  const setPositionState = useCallback(\n    (value: Position | ((prev: Position) => Position)) => {\n      setPosition(prev => {\n        const next = typeof value === 'function' ? value(prev) : value;\n        positionRef.current = next;\n        return next;\n      });\n    },\n    []\n  );\n\n  const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => [...prev, handle]);\n  }, []);\n\n  const unregisterHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => prev.filter(h => h !== handle));\n  }, []);\n\n  return {\n    registerHandle,\n    unregisterHandle,\n    position,\n    isDragging,\n    setPosition: setPositionState,\n  };\n}\n"],"names":["useMakeDragContainer","options","handles","setHandles","useState","positionRef","useRef","position","setPosition","isDragging","setIsDragging","useDraggable","deltaX","deltaY","setPositionState","useCallback","value","prev","next","registerHandle","handle","unregisterHandle","h"],"mappings":";;AASO,SAASA,EAAqBC,GAAiD;AACpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAyC,CAAA,CAAE,GACnEC,IAAcC,EAAiBL,EAAQ,mBAAmB,EAAE,GAAG,GAAG,GAAG,GAAG,GACxE,CAACM,GAAUC,CAAW,IAAIJ,EAASC,EAAY,OAAO,GACtD,CAACI,GAAYC,CAAa,IAAIN,EAAS,EAAK;AAElD,EAAAO,EAAa;AAAA,IACX,SAAAT;AAAA,IACA,mBAAmB,MAAM;AACvB,MAAAQ,EAAc,EAAI;AAAA,IACpB;AAAA,IACA,cAAc,CAACE,GAAQC,MAAW;AAChC,MAAAL,EAAY;AAAA,QACV,GAAGH,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,CAC5B;AAAA,IACH;AAAA,IACA,iBAAiB,MAAM;AACrB,MAAAH,EAAc,EAAK,GACnBL,EAAY,UAAUE;AAAA,IACxB;AAAA,EAAA,CACD;AAED,QAAMO,IAAmBC;AAAA,IACvB,CAACC,MAAqD;AACpD,MAAAR,EAAY,CAAAS,MAAQ;AAClB,cAAMC,IAAO,OAAOF,KAAU,aAAaA,EAAMC,CAAI,IAAID;AACzD,eAAAX,EAAY,UAAUa,GACfA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAA;AAAA,EAAC,GAGGC,IAAiBJ,EAAY,CAACK,MAAyC;AAC3E,IAAAjB,EAAW,CAAAc,MAAQ,CAAC,GAAGA,GAAMG,CAAM,CAAC;AAAA,EACtC,GAAG,CAAA,CAAE,GAECC,IAAmBN,EAAY,CAACK,MAAyC;AAC7E,IAAAjB,EAAW,OAAQc,EAAK,OAAO,CAAAK,MAAKA,MAAMF,CAAM,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL,gBAAAD;AAAA,IACA,kBAAAE;AAAA,IACA,UAAAd;AAAA,IACA,YAAAE;AAAA,IACA,aAAaK;AAAA,EAAA;AAEjB;"}

package/dist/utils/dnd/types.d.ts

@@ -1,10 +1,9 @@
+import { Position } from '../types/dimensions.js';
 export interface DragContainer {
     registerHandle: (handle: React.RefObject<HTMLElement>) => void;
     unregisterHandle: (handle: React.RefObject<HTMLElement>) => void;
     isDragging: boolean;
-    position: {
-        x: number;
-        y: number;
-    };
+    position: Position;
+    setPosition: (value: Position | ((prev: Position) => Position)) => void;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/utils/dnd/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/dnd/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,gBAAgB,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACjE,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/dnd/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvD,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,gBAAgB,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACjE,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,QAAQ,CAAC,KAAK,IAAI,CAAC;CACzE"}

package/dist/utils/hooks/use_media_query.d.ts

@@ -1,9 +1,6 @@
-/**
- * Custom hook that returns a boolean indicating if the current viewport
- * matches the given media query.
- *
- * @param query - The media query to match against (e.g. "(min-width: 768px)")
- * @returns boolean indicating if the media query matches
- */
-export declare function useMediaQuery(query: string): boolean;
+export interface ViewportSize {
+    width: number;
+    height: number;
+}
+export declare function useMediaQuery(): ViewportSize;
 //# sourceMappingURL=use_media_query.d.ts.map

package/dist/utils/hooks/use_media_query.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_media_query.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use_media_query.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAsBpD"}
+{"version":3,"file":"use_media_query.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use_media_query.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,aAAa,IAAI,YAAY,CAY5C"}

package/dist/utils/hooks/use_media_query.js

@@ -1,14 +1,13 @@
-import s from "react";
-function d(t) {
-  const [c, a] = s.useState(!1);
-  return s.useEffect(() => {
-    const e = window.matchMedia(t);
-    a(e.matches);
-    const n = (r) => {
-      a(r.matches);
-    };
-    return e.addEventListener("change", n), () => e.removeEventListener("change", n);
-  }, [t]), c;
+import { useState as i, useLayoutEffect as u } from "react";
+import { useResizeObserver as n } from "./use_resize_observer.js";
+function d() {
+  const [o, s] = i({ width: 0, height: 0 }), t = n((e, r) => {
+    s({ width: e, height: r });
+  });
+  return u(() => {
+    const e = document.body;
+    t(e);
+  }, [t]), o;
 }
 export {
   d as useMediaQuery

package/dist/utils/hooks/use_media_query.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_media_query.js","sources":["../../../src/utils/hooks/use_media_query.ts"],"sourcesContent":["import React from 'react';\n\n/**\n * Custom hook that returns a boolean indicating if the current viewport\n * matches the given media query.\n *\n * @param query - The media query to match against (e.g. \"(min-width: 768px)\")\n * @returns boolean indicating if the media query matches\n */\nexport function useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = React.useState(false);\n\n  React.useEffect(() => {\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Create event listener\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Add the listener\n    mediaQuery.addEventListener('change', handler);\n\n    // Clean up\n    return () => mediaQuery.removeEventListener('change', handler);\n  }, [query]);\n\n  return matches;\n}\n"],"names":["useMediaQuery","query","matches","setMatches","React","mediaQuery","handler","event"],"mappings":";AASO,SAASA,EAAcC,GAAwB;AACpD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAAS,EAAK;AAElDA,SAAAA,EAAM,UAAU,MAAM;AACpB,UAAMC,IAAa,OAAO,WAAWJ,CAAK;AAG1C,IAAAE,EAAWE,EAAW,OAAO;AAG7B,UAAMC,IAAU,CAACC,MAA+B;AAC9C,MAAAJ,EAAWI,EAAM,OAAO;AAAA,IAC1B;AAGA,WAAAF,EAAW,iBAAiB,UAAUC,CAAO,GAGtC,MAAMD,EAAW,oBAAoB,UAAUC,CAAO;AAAA,EAC/D,GAAG,CAACL,CAAK,CAAC,GAEHC;AACT;"}
+{"version":3,"file":"use_media_query.js","sources":["../../../src/utils/hooks/use_media_query.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\nimport { useResizeObserver } from './use_resize_observer.js';\n\nexport interface ViewportSize {\n  width: number;\n  height: number;\n}\n\nexport function useMediaQuery(): ViewportSize {\n  const [size, setSize] = useState<ViewportSize>({ width: 0, height: 0 });\n  const resizeRef = useResizeObserver((width, height) => {\n    setSize({ width, height });\n  });\n\n  useLayoutEffect(() => {\n    const body = document.body;\n    resizeRef(body);\n  }, [resizeRef]);\n\n  return size;\n}\n"],"names":["useMediaQuery","size","setSize","useState","resizeRef","useResizeObserver","width","height","useLayoutEffect","body"],"mappings":";;AAQO,SAASA,IAA8B;AAC5C,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAuB,EAAE,OAAO,GAAG,QAAQ,GAAG,GAChEC,IAAYC,EAAkB,CAACC,GAAOC,MAAW;AACrD,IAAAL,EAAQ,EAAE,OAAAI,GAAO,QAAAC,GAAQ;AAAA,EAC3B,CAAC;AAED,SAAAC,EAAgB,MAAM;AACpB,UAAMC,IAAO,SAAS;AACtB,IAAAL,EAAUK,CAAI;AAAA,EAChB,GAAG,CAACL,CAAS,CAAC,GAEPH;AACT;"}

package/dist/utils/index.d.ts

@@ -4,8 +4,8 @@ export * from './scroll_away_listener.js';
 export * from './dnd/hooks/use_draggable.js';
 export * from './hooks/make_context_hook.js';
 export * from './hooks/use_fork_ref.js';
-export * from './hooks/use_media_query.js';
 export * from './hooks/use_resize_observer.js';
+export * from './hooks/use_media_query.js';
 export * from './default_value.js';
 export * from './calendar/calendar_date.js';
 export * from './calendar/calendar_dates_generator.js';
@@ -14,7 +14,6 @@ export * from './calendar/get_months_of_year.js';
 export * from './calendar/month.js';
 export * from './types/dimensions.js';
 export * from './types/variations.js';
-export * from './responsive/responsive_renderer.js';
 export * from './dnd/draggable/draggable.js';
 export * from './dnd/handle.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC;AAEpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,qCAAqC,CAAC;AAEpD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC;AAEpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC"}

package/dist/utils/index.js

@@ -1,37 +1,35 @@
 import { ClickAwayListener as o, isEventWithinElement as t } from "./click_away_listener.js";
 import { FocusRedirect as a } from "./focus_redirect.js";
-import { ScrollAwayListener as p } from "./scroll_away_listener.js";
+import { ScrollAwayListener as x } from "./scroll_away_listener.js";
 import { useDraggable as s } from "./dnd/hooks/use_draggable.js";
 import { makeContextHook as i } from "./hooks/make_context_hook.js";
 import { useForkRef as l } from "./hooks/use_fork_ref.js";
-import { useMediaQuery as d } from "./hooks/use_media_query.js";
-import { TriggerConfig as D, useResizeObserver as R } from "./hooks/use_resize_observer.js";
-import { defaultValue as y } from "./default_value.js";
-import { CalendarDatesGenerator as b } from "./calendar/calendar_dates_generator.js";
-import { getDaysOfWeek as v } from "./calendar/get_days_of_week.js";
-import { getMonthsOfYear as O } from "./calendar/get_months_of_year.js";
+import { TriggerConfig as d, useResizeObserver as k } from "./hooks/use_resize_observer.js";
+import { useMediaQuery as c } from "./hooks/use_media_query.js";
+import { defaultValue as C } from "./default_value.js";
+import { CalendarDatesGenerator as h } from "./calendar/calendar_dates_generator.js";
+import { getDaysOfWeek as O } from "./calendar/get_days_of_week.js";
+import { getMonthsOfYear as v } from "./calendar/get_months_of_year.js";
 import { Month as A } from "./calendar/month.js";
-import { ResponsiveRenderer as F } from "./responsive/responsive_renderer.js";
-import { Draggable as L } from "./dnd/draggable/draggable.js";
-import { DragHandle as z } from "./dnd/handle.js";
+import { Draggable as F } from "./dnd/draggable/draggable.js";
+import { DragHandle as L } from "./dnd/handle.js";
 export {
-  b as CalendarDatesGenerator,
+  h as CalendarDatesGenerator,
   o as ClickAwayListener,
-  z as DragHandle,
-  L as Draggable,
+  L as DragHandle,
+  F as Draggable,
   a as FocusRedirect,
   A as Month,
-  F as ResponsiveRenderer,
-  p as ScrollAwayListener,
-  D as TriggerConfig,
-  y as defaultValue,
-  v as getDaysOfWeek,
-  O as getMonthsOfYear,
+  x as ScrollAwayListener,
+  d as TriggerConfig,
+  C as defaultValue,
+  O as getDaysOfWeek,
+  v as getMonthsOfYear,
   t as isEventWithinElement,
   i as makeContextHook,
   s as useDraggable,
   l as useForkRef,
-  d as useMediaQuery,
-  R as useResizeObserver
+  c as useMediaQuery,
+  k as useResizeObserver
 };
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "type": "module",
   "description": "",
   "author": "TCN",

package/src/layouts/index.ts

@@ -15,6 +15,8 @@ export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';
 export { Row } from './row/row.js';
 export { Section } from './section/section.js';
 export { Heading, type HeadingOwnProps } from './section/heading.js';
+export { Responsive, type ResponsiveProps } from './responsive/responsive.js';
+export { Breakpoint, type BreakpointProps } from './responsive/breakpoint.js';
 
 export { TTable, THead, TBody, TFoot, TR, TH, TD } from './table/table.js';
 

package/src/layouts/responsive/breakpoint.tsx

@@ -0,0 +1,29 @@
+export interface BreakpointProps {
+  from?: number | string;
+  to?: number | string;
+  children: React.ReactNode;
+}
+
+export interface InternalBreakpointProps extends BreakpointProps {
+  width: number;
+}
+
+function toNumber(value: number | string) {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  return parseFloat(value);
+}
+
+export function Breakpoint(_: BreakpointProps) {
+  return null;
+}
+
+export function InternalBreakpoint(props: InternalBreakpointProps) {
+  const from = toNumber(props.from ?? 0);
+  const to = toNumber(props.to ?? Infinity);
+  const isWithinRange = props.width >= from && props.width < to;
+
+  return isWithinRange ? props.children : null;
+}

package/src/layouts/responsive/responsive.stories.tsx

@@ -0,0 +1,37 @@
+import { HStack } from '../../stacks/h_stack.js';
+import { Breakpoint } from './breakpoint.js';
+import { Responsive } from './responsive.js';
+
+export default {
+  title: 'Layouts/Responsive',
+  component: Responsive,
+  tags: ['autodocs'],
+};
+
+export function Container() {
+  return (
+    <HStack width="100%" hAlign="center">
+      <Responsive>
+        <Breakpoint to={200}>Small</Breakpoint>
+        <Breakpoint from={200} to={800}>
+          Medium
+        </Breakpoint>
+        <Breakpoint from={800}>Large</Breakpoint>
+      </Responsive>
+    </HStack>
+  );
+}
+
+export function Viewport() {
+  return (
+    <HStack width="100%" hAlign="center">
+      <Responsive on="viewport">
+        <Breakpoint to={200}>Small</Breakpoint>
+        <Breakpoint from={200} to={800}>
+          Medium
+        </Breakpoint>
+        <Breakpoint from={800}>Large</Breakpoint>
+      </Responsive>
+    </HStack>
+  );
+}

package/src/layouts/responsive/responsive.tsx

@@ -0,0 +1,18 @@
+import type { BreakpointProps } from './breakpoint.js';
+import { ResponsiveContainer } from './responsive_container.js';
+import { ResponsiveViewport } from './responsive_viewport.js';
+
+export interface ResponsiveProps {
+  on?: 'viewport' | 'container';
+  children?: React.ReactElement<BreakpointProps>[] | React.ReactElement<BreakpointProps>;
+}
+
+export function Responsive(props: ResponsiveProps) {
+  const { on = 'container', children } = props;
+
+  if (on === 'viewport') {
+    return <ResponsiveViewport>{children}</ResponsiveViewport>;
+  }
+
+  return <ResponsiveContainer>{children}</ResponsiveContainer>;
+}

package/src/layouts/responsive/responsive_container.tsx

@@ -0,0 +1,51 @@
+import React, { useLayoutEffect, useState } from 'react';
+import { useForkRef } from '../../utils/hooks/use_fork_ref.js';
+import { useResizeObserver } from '../../utils/hooks/use_resize_observer.js';
+import { InternalBreakpoint, BreakpointProps } from './breakpoint.js';
+
+export interface ResponsiveContainerProps {
+  children?: React.ReactElement<BreakpointProps>[] | React.ReactElement<BreakpointProps>;
+}
+
+export function ResponsiveContainer(props: ResponsiveContainerProps) {
+  const [parent, setParent] = useState<Element | null>(null);
+  const [width, setWidth] = useState(0);
+
+  const resizeRef = useResizeObserver(width => {
+    setWidth(width);
+  });
+
+  const forkedRef = useForkRef((element: any) => {
+    if (element == null || element.parentElement == null) {
+      return;
+    }
+    resizeRef(element.parentElement);
+    setParent(element.parentElement);
+  });
+
+  const hiddenChild = (
+    <div
+      ref={forkedRef}
+      style={{
+        display: 'none',
+      }}
+    ></div>
+  );
+
+  const internalBreakpoints = React.Children.toArray(props.children).map((child: any) => {
+    return <InternalBreakpoint key={child.key} {...child.props} width={width} />;
+  });
+
+  useLayoutEffect(() => {
+    return () => {
+      setParent(null);
+    };
+  }, []);
+
+  return (
+    <>
+      {parent == null ? hiddenChild : null}
+      {internalBreakpoints}
+    </>
+  );
+}

package/src/layouts/responsive/responsive_viewport.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { InternalBreakpoint, BreakpointProps } from './breakpoint.js';
+import { useMediaQuery } from '../../utils/hooks/use_media_query.js';
+
+export interface ResponsiveViewportProps {
+  children?: React.ReactElement<BreakpointProps>[] | React.ReactElement<BreakpointProps>;
+}
+
+export function ResponsiveViewport(props: ResponsiveViewportProps) {
+  const { width } = useMediaQuery();
+
+  const internalBreakpoints = React.Children.toArray(props.children).map((child: any) => {
+    return <InternalBreakpoint key={child.key} {...child.props} width={width} />;
+  });
+
+  return <>{internalBreakpoints}</>;
+}

package/src/typography/body_text/body_text.tsx

@@ -20,22 +20,25 @@ export interface BodyTextOwnProps {
 
 export type BodyTextProps = WithDetailedHTMLProps<BodyTextOwnProps, 'div'>;
 
-export function BodyText({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-  breakWords = false,
-}: BodyTextProps) {
+export const BodyText = React.forwardRef<HTMLDivElement, BodyTextProps>(function (
+  {
+    size = 'md',
+    emphasis = 'normal',
+    hierarchy = 'primary',
+    color,
+    children,
+    className,
+    style = {},
+    padStart,
+    padEnd,
+    padBottom,
+    padTop,
+    pad,
+    selectable = true,
+    breakWords = false,
+  }: BodyTextProps,
+  ref
+) {
   if (pad) {
     style.padding = pad;
   }
@@ -62,6 +65,7 @@ export function BodyText({
 
   return (
     <div
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
@@ -73,4 +77,4 @@ export function BodyText({
       {children}
     </div>
   );
-}
+});