@tcn/ui 0.8.1 → 0.10.0

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.10.0",
   "type": "module",
   "description": "",
   "author": "TCN",

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

@@ -3,8 +3,6 @@ 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',
@@ -45,59 +43,6 @@ export const Baseline: Story = {
   ),
 };
 
-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>

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LayoutStoryDecorator } from './utils/layout_theme_provider.js';
+import { SBLayoutContent } from './utils/content.js';
+import { Rail } from '../rail/rail.js';
+import { Side } from '../rail/side/side.js';
+import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
+import { Title } from '../../typography/index.js';
+import { HBody } from '../body/h_body.js';
+import { VBody } from '../body/v_body.js';
+import { Body } from '../body/body.js';
+
+const meta: Meta<typeof Rail> = {
+  title: 'Layouts/Rail',
+  component: Rail,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that lays out content in a horizontal hierarchy.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Rail>;
+
+export const Baseline: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Rail>
+        <UtilityStrip>
+          <Title>Utility Strip</Title>
+        </UtilityStrip>
+        <Body>Body fills available space </Body>
+        <Side width="200px">Side</Side>
+      </Rail>
+    </LayoutStoryDecorator>
+  ),
+};
+
+export const HorizontalContent: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Rail>
+        <UtilityStrip>
+          <Title>Utility Strip</Title>
+        </UtilityStrip>
+        <HBody>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </HBody>
+        <Side width="200px">Side</Side>
+      </Rail>
+    </LayoutStoryDecorator>
+  ),
+};
+
+export const VerticalContent: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Rail>
+        <UtilityStrip>
+          <Title>Utility Strip</Title>
+        </UtilityStrip>
+        <VBody>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </VBody>
+        <Side width="200px">Side</Side>
+      </Rail>
+    </LayoutStoryDecorator>
+  ),
+};

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

@@ -0,0 +1,90 @@
+import { Scaffold } from '../scaffold/scaffold.js';
+import { Header } from '../header/header.js';
+import { UtilityBar } from '../utility_bar/utility_bar.js';
+import { VBody } from '../body/v_body.js';
+import { Footer } from '../footer/footer.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LayoutStoryDecorator } from './utils/layout_theme_provider.js';
+import { SBLayoutContent } from './utils/content.js';
+import { HBody } from '../body/h_body.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { Body } from '../body/body.js';
+
+const meta: Meta<typeof Scaffold> = {
+  title: 'Layouts/Scaffold',
+  component: Scaffold,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A scaffold component that lays out content in a vertical hierarchy.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Scaffold>;
+
+export const Baseline: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Scaffold>
+        <Header>Header</Header>
+        <UtilityBar>Utility Bar</UtilityBar>
+        <Body>Body fills available space</Body>
+        <Footer>Footer</Footer>
+      </Scaffold>
+    </LayoutStoryDecorator>
+  ),
+};
+
+export const VerticalContent: Story = {
+  args: {
+    height: '100vh',
+  },
+  render: () => (
+    <LayoutStoryDecorator>
+      <Scaffold height="100vh">
+        <Header>Header</Header>
+        <UtilityBar>Utility Bar</UtilityBar>
+        <VBody>
+          <p>(V)Body</p>
+          <p>Fills available space</p>
+          <p>Scrolls vertically</p>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </VBody>
+        <Footer>Footer</Footer>
+      </Scaffold>
+    </LayoutStoryDecorator>
+  ),
+};
+
+export const HorizontalContent: Story = {
+  args: {
+    height: '100vh',
+  },
+  render: () => (
+    <LayoutStoryDecorator>
+      <Scaffold height="100vh">
+        <Header>Header</Header>
+        <UtilityBar>Utility Bar</UtilityBar>
+        <HBody>
+          <VStack minWidth="200px" hAlign="center">
+            <p>(H)Body</p>
+            <p>Fills available space</p>
+            <p>Scrolls horizontally</p>
+          </VStack>
+          <SBLayoutContent />
+          <SBLayoutContent />
+          <SBLayoutContent />
+        </HBody>
+        <Footer>Footer</Footer>
+      </Scaffold>
+    </LayoutStoryDecorator>
+  ),
+};

package/src/layouts/__stories__/utils/content.tsx

@@ -0,0 +1,27 @@
+import { Box } from '../../../stacks/index.js';
+import type { PropsWithChildren } from 'react';
+import type { BoxProps } from '../../../stacks/index.js';
+import { clsx } from 'clsx';
+
+export interface SBLayoutContentProps extends BoxProps {}
+
+export const SBLayoutContent: React.FC<PropsWithChildren<SBLayoutContentProps>> = ({
+  className,
+  children,
+  minHeight = '200px',
+  minWidth = '200px',
+  ...props
+}) => {
+  return (
+    <Box
+      minHeight={minHeight}
+      minWidth={minWidth}
+      className={clsx('sb-layout-content', className)}
+      {...props}
+    >
+      ↔ {minWidth}
+      <br />↕ {minHeight}
+      {children}
+    </Box>
+  );
+};

package/src/layouts/__stories__/utils/layout_theme.css

@@ -0,0 +1,88 @@
+/* A way to visualize layout components - since they are not themed until being used in a surface */
+.sb-layout-theme {
+  /* 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;
+
+  --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);
+  --bg-5: rgba(0, 0, 0, 0.25);
+
+  :where(.tcn-scaffold) {
+    background: var(--bg);
+  }
+
+  :where(.tcn-bar) {
+    min-height: 32px;
+  }
+
+  :where(.tcn-header) {
+    background: var(--bg-1);
+  }
+
+  :where(.tcn-utility-bar) {
+    background: var(--bg-2);
+  }
+
+  :where(.tcn-footer) {
+    background: var(--bg-3);
+  }
+
+  :where(.tcn-body) {
+    background: var(--bg-4);
+  }
+
+  :where(.tcn-rail) {
+    background: var(--bg);
+  }
+
+  :where(.tcn-utility-strip) {
+    background: var(--bg-1);
+    min-width: 32px;
+    padding: 8px;
+
+    :where(.tcn-title) {
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+  }
+
+  :where(.tcn-side) {
+    background: var(--bg-2);
+    min-width: 32px;
+  }
+
+  :where(.tcn-main) {
+    background: var(--bg-4);
+    gap: 8px;
+  }
+
+  :where(.sb-layout-content) {
+    background: var(--bg-5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* flex-grow: 1; */
+    height: 100%;
+  }
+}

package/src/layouts/__stories__/utils/layout_theme_provider.tsx

@@ -0,0 +1,11 @@
+import { Box } from '../../../stacks/index.js';
+
+import './layout_theme.css';
+
+export const LayoutStoryDecorator = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Box className="sb-layout-theme" height="100vh" width="100vw" minHeight="400px">
+      {children}
+    </Box>
+  );
+};

package/src/layouts/__stories__/utils.tsx

@@ -3,13 +3,13 @@ import clsx from 'clsx';
 
 import { Scaffold, type ScaffoldProps } from '../scaffold/scaffold.js';
 import { Header } from '../header/header.js';
-import { Body } from '../body/body.js';
 import { Footer } from '../footer/footer.js';
 import { UtilityBar } from '../utility_bar/utility_bar.js';
 
 import { Rail, type RailProps } from '../rail/rail.js';
 import { Side } from '../rail/side/side.js';
-import { Main } from '../rail/main/main.js';
+import { VBody } from '../body/v_body.js';
+import { HBody } from '../body/h_body.js';
 import { Box, Spacer } from '../../stacks/index.js';
 import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
 import { SearchIcon } from '@tcn/icons/search_icon.js';
@@ -101,10 +101,10 @@ export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
         </UtilityStrip>
       )}
       {main && (
-        <Main className={clsx(styles.main, styles.secondary)} width="200px">
-          {mainLabel && <>Main</>}
+        <HBody className={clsx(styles.main, styles.secondary)} width="200px">
+          {mainLabel && <>Body</>}
           {children}
-        </Main>
+        </HBody>
       )}
       {!main && children}
       {side && (
@@ -163,7 +163,7 @@ export const SBNestedScaffold: React.FC<PropsWithChildren<SBNestedScaffoldProps>
         </UtilityBar>
       )}
       {body && (
-        <Body className={clsx(styles.body, styles.secondary)}>Body {children}</Body>
+        <VBody className={clsx(styles.body, styles.secondary)}>Body {children}</VBody>
       )}
       {!body && children}
       {footer && (