@tcn/ui 0.8.0 → 0.9.0

package/dist/utility_strip.css

@@ -0,0 +1 @@
+@layer tcn-system{:where(._utility-strip_23b31df){height:100%;min-width:0}}

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.0",
+  "version": "0.9.0",
   "type": "module",
   "description": "",
   "author": "TCN",

package/src/actions/index.ts

@@ -17,3 +17,4 @@ export {
   SingleSelectGroup,
   type SingleSelectGroupProps,
 } from './button/select_group/single_select_group.js';
+export { Toggle, type ToggleProps } from './toggle/toggle.js';

package/src/layouts/__stories__/composed.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { VStack } from '../../stacks/v_stack.js';
+import { SBNestedScaffold, SBContent, SBNestedRail } from './utils.js';
+
+import styles from './composed_stories.module.css';
+import clsx from 'clsx';
+import { Body } from '../body/body.js';
+
+const meta: Meta = {
+  title: 'Layouts/Composed',
+  component: () => <></>,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Examples of nested layout compositions.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const SBContainer = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <VStack height="100vh" width="100%" padding="16px" className={styles.sbContainer}>
+      {children}
+    </VStack>
+  );
+};
+
+export const Baseline: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedScaffold depth={1}>
+        <SBNestedRail depth={2}>
+          <SBContent />
+          <SBContent />
+          <SBContent />
+        </SBNestedRail>
+      </SBNestedScaffold>
+    </SBContainer>
+  ),
+};
+
+export const ScaffoldWithBody: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedScaffold depth={1}>
+        <SBContent />
+        <SBContent />
+        <SBContent />
+      </SBNestedScaffold>
+    </SBContainer>
+  ),
+};
+
+export const ScaffoldWithMain: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedScaffold depth={1}>
+        <SBNestedRail depth={2} side={false} utilityStrip={false} scaffold={false}>
+          <SBContent />
+          <SBContent />
+          <SBContent />
+        </SBNestedRail>
+      </SBNestedScaffold>
+    </SBContainer>
+  ),
+};
+
+export const RailWithMain: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedRail depth={1} scaffold={false}>
+        <SBContent />
+        <SBContent />
+        <SBContent />
+      </SBNestedRail>
+    </SBContainer>
+  ),
+};
+
+export const RailWithBody: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedRail depth={1} scaffold={false}>
+        <Body className={clsx(styles.body, styles.secondary)}>
+          Body
+          <SBContent />
+          <SBContent />
+          <SBContent />
+        </Body>
+      </SBNestedRail>
+    </SBContainer>
+  ),
+};
+
+export const WithColumns: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedScaffold depth={1} utilityBar={false} body={false} footer={false}>
+        <SBNestedRail depth={2} scaffold={false}>
+          <SBContent />
+          <SBContent />
+          <SBContent />
+        </SBNestedRail>
+      </SBNestedScaffold>
+    </SBContainer>
+  ),
+};

package/src/layouts/__stories__/composed_stories.module.css

@@ -0,0 +1,142 @@
+/* Pastel Color Palette */
+.sb-container {
+  /* Forest (5) - Greens & teals */
+  --pastel-forest-bg: #e8f5e9;
+  --pastel-forest-1: #a5d6a7;
+  --pastel-forest-2: #81c784;
+  --pastel-forest-3: #66bb6a;
+  --pastel-forest-4: #4caf50;
+
+  /* Sunset (5) - Warm peaches, corals & yellows */
+  --pastel-sunset-bg: #fff7e3;
+  --pastel-sunset-1: #f5c6a0;
+  --pastel-sunset-2: #eba985;
+  --pastel-sunset-3: #e08f6a;
+  --pastel-sunset-4: #d47550;
+
+  /* Berry (5) - Purples, lavenders & pinks */
+  --pastel-berry-bg: #f5eafa;
+  --pastel-berry-1: #e8d5f2;
+  --pastel-berry-2: #d4b8e8;
+  --pastel-berry-3: #c9a7e0;
+  --pastel-berry-4: #b78ed4;
+
+  color: white;
+}
+
+.secondary {
+  padding: 8px 16px;
+}
+
+.primary {
+  padding: 8px;
+  &[data-depth="1"] {
+    --bg: var(--pastel-sunset-bg);
+    --bg-1: var(--pastel-sunset-1);
+    --bg-2: var(--pastel-sunset-2);
+    --bg-3: var(--pastel-sunset-3);
+    --bg-4: var(--pastel-sunset-4);
+  }
+
+  &[data-depth="2"] {
+    --bg: var(--pastel-berry-bg);
+    --bg-1: var(--pastel-berry-1);
+    --bg-2: var(--pastel-berry-2);
+    --bg-3: var(--pastel-berry-3);
+    --bg-4: var(--pastel-berry-4);
+  }
+
+  &[data-depth="3"] {
+    --bg: var(--pastel-forest-bg);
+    --bg-1: var(--pastel-forest-1);
+    --bg-2: var(--pastel-forest-2);
+    --bg-3: var(--pastel-forest-3);
+    --bg-4: var(--pastel-forest-4);
+  }
+}
+
+/* Vertical Layouts */
+
+.scaffold,
+.rail {
+  background: var(--bg);
+}
+
+.header {
+  background: var(--bg-1);
+}
+
+.utilityBar {
+  background: var(--bg-2);
+}
+
+.footer {
+  background: var(--bg-3);
+}
+
+.body {
+  background: var(--bg-4);
+  gap: 8px;
+}
+
+/* Horizontal Layouts */
+.utilityStrip {
+  background: var(--bg-1);
+  gap: 8px;
+}
+
+.side {
+  background: var(--bg-2);
+}
+
+.main {
+  background: var(--bg-3);
+  gap: 8px;
+}
+
+.content {
+  background: rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.action-box {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(0, 0, 0, 0.25);
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.floating-label {
+  height: 0;
+  z-index: 2;
+  overflow: visible;
+  color: var(--font-color);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.floating-label-chip {
+  padding: 4px;
+  border-radius: 4px;
+  /* 100% bg at top → 75% opacity of bg at bottom so overlapping content shows through */
+  background: linear-gradient(
+    to bottom,
+    var(--bg) 0%,
+    color-mix(in srgb, var(--bg) 75%, transparent) 100%
+  );
+  color: var(--font-color);
+}
+
+.vertical-label {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}