@tcn/ui 0.16.0 → 0.18.0

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/dist/utils/listeners/click_away_listener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"click_away_listener.d.ts","sourceRoot":"","sources":["../../../src/utils/listeners/click_away_listener.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,SAAS,CAAC;IACrD,UAAU,CAAC,EAAE,cAAc,GAAG,YAAY,CAAC;IAC3C,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IAE/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;CACnC;AAWD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,UAAU,GAAG,UAAU,EAC9B,IAAI,EAAE,WAAW,GAAG,IAAI,EACxB,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,WAsBzB;AAED,eAAO,MAAM,iBAAiB,4FA0E7B,CAAC"}

package/dist/utils/{click_away_listener.js → listeners/click_away_listener.js}

@@ -1,5 +1,5 @@
 import d, { useRef as p, useCallback as L, useEffect as W } from "react";
-import { useForkRef as T } from "./hooks/use_fork_ref.js";
+import { useForkRef as T } from "../hooks/use_fork_ref.js";
 const C = {
   onClick: "click",
   onMouseDown: "mousedown",

package/dist/utils/listeners/click_away_listener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"click_away_listener.js","sources":["../../../src/utils/listeners/click_away_listener.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef } from 'react';\nimport { useForkRef } from '../hooks/use_fork_ref.js';\nexport interface ClickAwayListenerProps {\n  children: React.ReactElement;\n  onClickAway: (event: React.MouseEvent | React.TouchEvent) => void;\n  mouseEvent?: 'onMouseUp' | 'onMouseDown' | 'onClick';\n  touchEvent?: 'onTouchStart' | 'onTouchEnd';\n  isException?: (target: HTMLElement) => boolean;\n  // An array of refs that wont trigger the click away listener\n  refs?: React.RefObject<Element>[];\n}\nconst eventMap = {\n  onClick: 'click',\n  onMouseDown: 'mousedown',\n  onMouseUp: 'mouseup',\n};\nconst touchMap = {\n  onTouchStart: 'touchstart',\n  onTouchEnd: 'touchend',\n};\n\nexport function isEventWithinElement(\n  event: MouseEvent | TouchEvent,\n  node: HTMLElement | null,\n  activated: boolean,\n  refs: (Element | null)[]\n) {\n  if (!activated) {\n    return true;\n  }\n\n  let isWithinElement: boolean;\n\n  if (event.composedPath) {\n    isWithinElement =\n      [node, ...refs].find((ref: any) => {\n        return event.composedPath().indexOf(ref) > -1;\n      }) !== undefined;\n  } else {\n    isWithinElement =\n      !document.documentElement.contains(event.target as any) ||\n      [node, ...refs].find((ref: any) => {\n        return ref?.contains(event.target);\n      }) !== undefined;\n  }\n\n  return isWithinElement;\n}\n\nexport const ClickAwayListener = React.forwardRef<HTMLElement, ClickAwayListenerProps>(\n  function ClickAwayListener(\n    { children, mouseEvent, touchEvent, onClickAway, refs = [], isException },\n    ref\n  ) {\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const startedActionWithinElementRef = useRef<boolean>(true);\n    const DOMMouseEvent = eventMap[mouseEvent || 'onClick'];\n    const DOMTouchEvent = touchMap[touchEvent || 'onTouchEnd'];\n    const newRef = useForkRef(ref, nodeRef, (children as any).ref);\n    const activatedRef = React.useRef(false);\n\n    React.useEffect(() => {\n      // Ensure that this component is not \"activated\" synchronously.\n      // https://github.com/facebook/react/issues/20074\n      window.setTimeout(() => {\n        activatedRef.current = true;\n      }, 0);\n      return () => {\n        activatedRef.current = false;\n      };\n    }, []);\n\n    const trackAction = useCallback(\n      (event: any) => {\n        startedActionWithinElementRef.current = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n      },\n      [refs]\n    );\n\n    const eventHandler = useCallback(\n      (event: any) => {\n        const startedFromWithinElement = startedActionWithinElementRef.current;\n        const isWithinElement = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n\n        if (\n          !isWithinElement &&\n          !startedFromWithinElement &&\n          (!isException || !isException(event.target))\n        ) {\n          onClickAway(event);\n        }\n      },\n      [onClickAway, refs, isException]\n    );\n\n    useEffect(() => {\n      document.addEventListener('mousedown', trackAction);\n      document.addEventListener('touchstart', trackAction);\n      document.addEventListener(DOMMouseEvent, eventHandler);\n      document.addEventListener(DOMTouchEvent, eventHandler);\n      return () => {\n        document.removeEventListener('mousedown', trackAction);\n        document.removeEventListener('touchstart', trackAction);\n        document.removeEventListener(DOMMouseEvent, eventHandler);\n        document.removeEventListener(DOMTouchEvent, eventHandler);\n      };\n    }, [DOMTouchEvent, DOMMouseEvent, eventHandler, trackAction]);\n\n    return React.cloneElement(children, {\n      ...children.props,\n      ref: newRef,\n    });\n  }\n);\n"],"names":["eventMap","touchMap","isEventWithinElement","event","node","activated","refs","isWithinElement","ref","ClickAwayListener","React","children","mouseEvent","touchEvent","onClickAway","isException","nodeRef","useRef","startedActionWithinElementRef","DOMMouseEvent","DOMTouchEvent","newRef","useForkRef","activatedRef","trackAction","useCallback","r","eventHandler","startedFromWithinElement","useEffect"],"mappings":";;AAWA,MAAMA,IAAW;AAAA,EACf,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AACb,GACMC,IAAW;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AACd;AAEO,SAASC,EACdC,GACAC,GACAC,GACAC,GACA;AACA,MAAI,CAACD;AACH,WAAO;AAGT,MAAIE;AAEJ,SAAIJ,EAAM,eACRI,IACE,CAACH,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbL,EAAM,aAAA,EAAe,QAAQK,CAAG,IAAI,EAC5C,MAAM,SAETD,IACE,CAAC,SAAS,gBAAgB,SAASJ,EAAM,MAAa,KACtD,CAACC,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbA,GAAK,SAASL,EAAM,MAAM,CAClC,MAAM,QAGJI;AACT;AAEO,MAAME,IAAoBC,EAAM;AAAA,EACrC,SACE,EAAE,UAAAC,GAAU,YAAAC,GAAY,YAAAC,GAAY,aAAAC,GAAa,MAAAR,IAAO,CAAA,GAAI,aAAAS,EAAA,GAC5DP,GACA;AACA,UAAMQ,IAAUC,EAA2B,IAAI,GACzCC,IAAgCD,EAAgB,EAAI,GACpDE,IAAgBnB,EAASY,KAAc,SAAS,GAChDQ,IAAgBnB,EAASY,KAAc,YAAY,GACnDQ,IAASC,EAAWd,GAAKQ,GAAUL,EAAiB,GAAG,GACvDY,IAAeb,EAAM,OAAO,EAAK;AAEvCA,IAAAA,EAAM,UAAU,OAGd,OAAO,WAAW,MAAM;AACtB,MAAAa,EAAa,UAAU;AAAA,IACzB,GAAG,CAAC,GACG,MAAM;AACX,MAAAA,EAAa,UAAU;AAAA,IACzB,IACC,CAAA,CAAE;AAEL,UAAMC,IAAcC;AAAA,MAClB,CAACtB,MAAe;AACd,QAAAe,EAA8B,UAAUhB;AAAA,UACtCC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA;AAAA,MAE3B;AAAA,MACA,CAACpB,CAAI;AAAA,IAAA,GAGDqB,IAAeF;AAAA,MACnB,CAACtB,MAAe;AACd,cAAMyB,IAA2BV,EAA8B;AAQ/D,QACE,CARsBhB;AAAA,UACtBC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA,KAKvB,CAACE,MACA,CAACb,KAAe,CAACA,EAAYZ,EAAM,MAAM,MAE1CW,EAAYX,CAAK;AAAA,MAErB;AAAA,MACA,CAACW,GAAaR,GAAMS,CAAW;AAAA,IAAA;AAGjC,WAAAc,EAAU,OACR,SAAS,iBAAiB,aAAaL,CAAW,GAClD,SAAS,iBAAiB,cAAcA,CAAW,GACnD,SAAS,iBAAiBL,GAAeQ,CAAY,GACrD,SAAS,iBAAiBP,GAAeO,CAAY,GAC9C,MAAM;AACX,eAAS,oBAAoB,aAAaH,CAAW,GACrD,SAAS,oBAAoB,cAAcA,CAAW,GACtD,SAAS,oBAAoBL,GAAeQ,CAAY,GACxD,SAAS,oBAAoBP,GAAeO,CAAY;AAAA,IAC1D,IACC,CAACP,GAAeD,GAAeQ,GAAcH,CAAW,CAAC,GAErDd,EAAM,aAAaC,GAAU;AAAA,MAClC,GAAGA,EAAS;AAAA,MACZ,KAAKU;AAAA,IAAA,CACN;AAAA,EACH;AACF;"}

package/dist/utils/listeners/focus_redirect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus_redirect.d.ts","sourceRoot":"","sources":["../../../src/utils/listeners/focus_redirect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,2FAmBxB,CAAC"}

package/dist/utils/listeners/focus_redirect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus_redirect.js","sources":["../../../src/utils/listeners/focus_redirect.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface FocusRedirectProps {\n  onRedirect: () => void;\n}\n\nexport const FocusRedirect = React.forwardRef(function FocusRedirect(\n  { onRedirect }: FocusRedirectProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  return (\n    <div\n      ref={ref}\n      tabIndex={0}\n      onFocus={onRedirect}\n      style={{\n        padding: 0,\n        margin: 0,\n        width: 0,\n        height: 0,\n        opacity: 0,\n        position: 'relative',\n      }}\n    ></div>\n  );\n});\n"],"names":["FocusRedirect","React","onRedirect","ref","jsx"],"mappings":";;AAMO,MAAMA,IAAgBC,EAAM,WAAW,SAC5C,EAAE,YAAAC,EAAA,GACFC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,UAAU;AAAA,MACV,SAASD;AAAA,MACT,OAAO;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -0,0 +1,4 @@
+export * from './click_away_listener.js';
+export * from './focus_redirect.js';
+export * from './scroll_away_listener.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/listeners/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}

package/dist/utils/listeners/index.js

@@ -0,0 +1,10 @@
+import { ClickAwayListener as t, isEventWithinElement as o } from "./click_away_listener.js";
+import { FocusRedirect as n } from "./focus_redirect.js";
+import { ScrollAwayListener as l } from "./scroll_away_listener.js";
+export {
+  t as ClickAwayListener,
+  n as FocusRedirect,
+  l as ScrollAwayListener,
+  o as isEventWithinElement
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/listeners/index.js.map

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

package/dist/utils/listeners/mouse_leave_region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mouse_leave_region.d.ts","sourceRoot":"","sources":["../../../src/utils/listeners/mouse_leave_region.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC;IAC7E,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,YAAY,EAAE,WAAW,EACzB,MAAU,GACX,EAAE,qBAAqB,QAyBvB"}

package/dist/utils/listeners/mouse_leave_region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mouse_leave_region.js","sources":["../../../src/utils/listeners/mouse_leave_region.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nexport interface MouseLeaveRegionProps {\n  elementsRefs: (React.RefObject<Element> | React.MutableRefObject<Element>)[];\n  onMouseLeave: () => void;\n  buffer?: number;\n}\n\nexport function MouseLeaveRegion({\n  onMouseLeave,\n  elementsRefs: elementRefs,\n  buffer = 8,\n}: MouseLeaveRegionProps) {\n  useEffect(() => {\n    const update = (event: MouseEvent) => {\n      const intersects = elementRefs.some(ref => {\n        const element = ref.current;\n        if (element != null) {\n          const rect = element.getBoundingClientRect();\n          const overlapLeft = Math.max(event.clientX - buffer, rect.left);\n          const overlapRight = Math.min(event.clientX + buffer, rect.right);\n          const overlapTop = Math.max(event.clientY - buffer, rect.top);\n          const overlapBottom = Math.min(event.clientY + buffer, rect.bottom);\n          return overlapLeft <= overlapRight && overlapTop <= overlapBottom;\n        }\n        return false;\n      });\n      if (!intersects) {\n        onMouseLeave();\n      }\n    };\n    window.addEventListener('mousemove', update);\n    return () => {\n      window.removeEventListener('mousemove', update);\n    };\n  }, [onMouseLeave, elementRefs, buffer]);\n  return null;\n}\n"],"names":["MouseLeaveRegion","onMouseLeave","elementRefs","buffer","useEffect","update","event","ref","element","rect","overlapLeft","overlapRight","overlapTop","overlapBottom"],"mappings":";AAQO,SAASA,EAAiB;AAAA,EAC/B,cAAAC;AAAA,EACA,cAAcC;AAAA,EACd,QAAAC,IAAS;AACX,GAA0B;AACxB,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAS,CAACC,MAAsB;AAapC,MAZmBJ,EAAY,KAAK,CAAAK,MAAO;AACzC,cAAMC,IAAUD,EAAI;AACpB,YAAIC,KAAW,MAAM;AACnB,gBAAMC,IAAOD,EAAQ,sBAAA,GACfE,IAAc,KAAK,IAAIJ,EAAM,UAAUH,GAAQM,EAAK,IAAI,GACxDE,IAAe,KAAK,IAAIL,EAAM,UAAUH,GAAQM,EAAK,KAAK,GAC1DG,IAAa,KAAK,IAAIN,EAAM,UAAUH,GAAQM,EAAK,GAAG,GACtDI,IAAgB,KAAK,IAAIP,EAAM,UAAUH,GAAQM,EAAK,MAAM;AAClE,iBAAOC,KAAeC,KAAgBC,KAAcC;AAAA,QACtD;AACA,eAAO;AAAA,MACT,CAAC,KAECZ,EAAA;AAAA,IAEJ;AACA,kBAAO,iBAAiB,aAAaI,CAAM,GACpC,MAAM;AACX,aAAO,oBAAoB,aAAaA,CAAM;AAAA,IAChD;AAAA,EACF,GAAG,CAACJ,GAAcC,GAAaC,CAAM,CAAC,GAC/B;AACT;"}

package/dist/utils/listeners/scroll_away_listener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll_away_listener.d.ts","sourceRoot":"","sources":["../../../src/utils/listeners/scroll_away_listener.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IAC/C,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,6FAoC9B,CAAC"}

package/dist/utils/{scroll_away_listener.js → listeners/scroll_away_listener.js}

@@ -1,5 +1,5 @@
 import u, { useRef as m, useEffect as a } from "react";
-import { useForkRef as d } from "./hooks/use_fork_ref.js";
+import { useForkRef as d } from "../hooks/use_fork_ref.js";
 const L = u.forwardRef(
   function({ children: r, onScrollAway: c, isException: o }, f) {
     const n = m(null), l = d(f, n, r.ref);

package/dist/utils/listeners/scroll_away_listener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll_away_listener.js","sources":["../../../src/utils/listeners/scroll_away_listener.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { useForkRef } from '../hooks/use_fork_ref.js';\nexport interface ScrollAwayListenerProps {\n  children: React.ReactElement;\n  isException?: (target: HTMLElement) => boolean;\n  onScrollAway: () => void;\n}\n\n/**\n * This can be used for things that need to disappear when the user scrolls somewhere other\n * than the place this component surrounds.\n *\n * Mainly this will be used for tooltips and popovers. It should be used with caution and\n * correctly. If too many things are listening for other things scrolling it can become\n * quite inefficient. Within the Popover it doesn't add it to the JSX until the popover is\n * visible. That way the scroll away isn't alway listening to scroll events on the\n * document.\n */\nexport const ScrollAwayListener = React.forwardRef<HTMLElement, ScrollAwayListenerProps>(\n  function ScrollAwayListener(\n    { children, onScrollAway, isException }: ScrollAwayListenerProps,\n    ref\n  ) {\n    const nodeRef = useRef<any>(null);\n    const newRef = useForkRef(ref, nodeRef, (children as any).ref);\n    useEffect(() => {\n      const onScroll = (event: any) => {\n        let insideDOM: boolean;\n        if (isException && isException(event.target)) {\n          insideDOM = true;\n        } else if (event.composedPath) {\n          insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;\n        } else {\n          insideDOM =\n            !document.documentElement.contains(event.target) ||\n            nodeRef.current.contains(event.target);\n        }\n\n        if (!insideDOM) {\n          onScrollAway();\n          document.removeEventListener('scroll', onScroll, true);\n          event.preventDefault();\n        }\n      };\n      document.addEventListener('scroll', onScroll, true);\n      return () => {\n        document.removeEventListener('scroll', onScroll, true);\n      };\n    }, [onScrollAway, isException]);\n    return React.cloneElement(children, {\n      ...children.props,\n      ref: newRef,\n    });\n  }\n);\n"],"names":["ScrollAwayListener","React","children","onScrollAway","isException","ref","nodeRef","useRef","newRef","useForkRef","useEffect","onScroll","event","insideDOM"],"mappings":";;AAkBO,MAAMA,IAAqBC,EAAM;AAAA,EACtC,SACE,EAAE,UAAAC,GAAU,cAAAC,GAAc,aAAAC,EAAA,GAC1BC,GACA;AACA,UAAMC,IAAUC,EAAY,IAAI,GAC1BC,IAASC,EAAWJ,GAAKC,GAAUJ,EAAiB,GAAG;AAC7D,WAAAQ,EAAU,MAAM;AACd,YAAMC,IAAW,CAACC,MAAe;AAC/B,YAAIC;AACJ,QAAIT,KAAeA,EAAYQ,EAAM,MAAM,IACzCC,IAAY,KACHD,EAAM,eACfC,IAAYD,EAAM,aAAA,EAAe,QAAQN,EAAQ,OAAO,IAAI,KAE5DO,IACE,CAAC,SAAS,gBAAgB,SAASD,EAAM,MAAM,KAC/CN,EAAQ,QAAQ,SAASM,EAAM,MAAM,GAGpCC,MACHV,EAAA,GACA,SAAS,oBAAoB,UAAUQ,GAAU,EAAI,GACrDC,EAAM,eAAA;AAAA,MAEV;AACA,sBAAS,iBAAiB,UAAUD,GAAU,EAAI,GAC3C,MAAM;AACX,iBAAS,oBAAoB,UAAUA,GAAU,EAAI;AAAA,MACvD;AAAA,IACF,GAAG,CAACR,GAAcC,CAAW,CAAC,GACvBH,EAAM,aAAaC,GAAU;AAAA,MAClC,GAAGA,EAAS;AAAA,MACZ,KAAKM;AAAA,IAAA,CACN;AAAA,EACH;AACF;"}

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

@@ -0,0 +1,2 @@
+export * from './variations.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/system/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/utils/system/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

package/dist/utils/system/index.js.map

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

package/dist/utils/system/variations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variations.d.ts","sourceRoot":"","sources":["../../../src/utils/system/variations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,YAAY,CAAC"}

package/dist/utils/system/variations.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=variations.js.map

package/dist/utils/system/variations.js.map

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

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

@@ -0,0 +1,3 @@
+export type HorizontalSide = 'start' | 'end';
+export type VerticalSide = 'top' | 'bottom';
+//# sourceMappingURL=sides.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sides.d.ts","sourceRoot":"","sources":["../../../src/utils/types/sides.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -41,12 +41,6 @@
       "import": "./dist/actions/index.js",
       "default": "./dist/actions/index.js"
     },
-    "./dnd": {
-      "@bc-monorepo/source": "./src/dnd/index.ts",
-      "types": "./dist/dnd/index.d.ts",
-      "import": "./dist/dnd/index.js",
-      "default": "./dist/dnd/index.js"
-    },
     "./feedback": {
       "@bc-monorepo/source": "./src/feedback/index.ts",
       "types": "./dist/feedback/index.d.ts",
@@ -143,8 +137,8 @@
     "libphonenumber-js": "^1.12.38",
     "react-color": "^2.19.3",
     "react-phone-number-input": "^3.4.16",
-    "@tcn/state": "1.3.3",
-    "@tcn/icons": "2.3.0"
+    "@tcn/icons": "2.4.0",
+    "@tcn/state": "1.3.3"
   },
   "scripts": {
     "build": "vite build",

package/src/actions/button/__stories__/button_group.stories.tsx

@@ -4,7 +4,6 @@ import { Spacer } from '../../../stacks/spacer.js';
 import React from 'react';
 import { Button } from '../button/button.js';
 import { ButtonGroup } from '../button_group/button_group.js';
-import { SlimButton } from '../slim_button/slim_button.js';
 import { PlusIcon } from '@tcn/icons/plus_icon.js';
 import { SearchIcon } from '@tcn/icons/search_icon.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
@@ -110,41 +109,41 @@ export function PrimaryCustomColor() {
   );
 }
 
-export function SlimButtonGroup() {
+export function UtilityButtonGroup() {
   return (
     <VStack gap="12px">
       <ButtonGroup hierarchy="tertiary">
-        <SlimButton>
+        <Button utility>
           <CrossIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <SearchIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <PlusIcon />
-        </SlimButton>
+        </Button>
       </ButtonGroup>
       <ButtonGroup hierarchy="secondary">
-        <SlimButton>
+        <Button utility>
           <CrossIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <SearchIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <PlusIcon />
-        </SlimButton>
+        </Button>
       </ButtonGroup>
       <ButtonGroup hierarchy="primary">
-        <SlimButton>
+        <Button utility>
           <CrossIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <SearchIcon />
-        </SlimButton>
-        <SlimButton>
+        </Button>
+        <Button utility>
           <PlusIcon />
-        </SlimButton>
+        </Button>
       </ButtonGroup>
     </VStack>
   );
@@ -153,12 +152,12 @@ export function SlimButtonGroup() {
 export function MixedTesting() {
   return (
     <ButtonGroup hierarchy="primary">
-      <SlimButton>
+      <Button utility>
         <SearchIcon />
-      </SlimButton>
-      <SlimButton>
+      </Button>
+      <Button utility>
         <PlusIcon />
-      </SlimButton>
+      </Button>
       <Button>
         Third
         <Spacer width="4px" />

package/src/actions/index.ts

@@ -7,6 +7,5 @@ export {
   ButtonGroup,
   type ButtonGroupProps,
 } from './button/button_group/button_group.js';
-export { SlimButton } from './button/slim_button/slim_button.js';
 export { Button, type ButtonProps } from './button/button/button.js';
 export { Toggle, type ToggleProps } from './toggle/toggle.js';

package/src/form/field/field.stories.tsx

@@ -24,7 +24,7 @@ export default {
 
 export function Baseline() {
   return (
-    <FieldSet minWidth="200px" padding="8px" gap="8px" maxWidth="600px">
+    <FieldSet minWidth="200px" maxWidth="600px">
       <Field label="Default" id="field-1">
         <Input />
       </Field>
@@ -94,7 +94,7 @@ export function ResponsiveDemo() {
         <strong>Vertical layout (VField):</strong> Screens 800px or narrower
       </BodyText>
 
-      <FieldSet minWidth="200px" padding="8px" gap="8px" maxWidth="900px">
+      <FieldSet minWidth="200px" maxWidth="900px">
         <Field
           label="Email Address"
           description="Enter your primary email address"

package/src/form/field/h_field/h_field.stories.tsx

@@ -23,7 +23,7 @@ export default {
 
 export function Baseline() {
   return (
-    <FieldSet maxWidth="600px" minWidth="300px" padding="8px" gap="8px">
+    <FieldSet maxWidth="600px" minWidth="300px">
       <HField label="Default" id="field-1">
         <Input />
       </HField>

package/src/form/field/v_field/v_field.stories.tsx

@@ -23,7 +23,7 @@ export default {
 
 export function Baseline() {
   return (
-    <FieldSet maxWidth="350px" minWidth="150px" padding="8px" gap="8px">
+    <FieldSet maxWidth="350px" minWidth="150px">
       <VField label="Default" id="field-1">
         <Input />
       </VField>

package/src/form/field_set/field_set.module.css

@@ -1,19 +1,5 @@
 @layer tcn-system {
   :where(.field-set) {
     position: relative;
-    border-radius: 4px;
-  }
-
-  :where(.field-set) {
-    gap: 4px;
-  }
-
-  :where(.field-set > .field-set-body) {
-    background: #ffffff; /* tcn neutral white */
-    width: 100%;
-    max-width: 100%;
-    border-radius: 4px;
-    gap: 8px;
-    padding: 8px;
   }
 }

package/src/form/field_set/field_set.stories.tsx

@@ -1,6 +1,10 @@
 import { Divider } from '../../layouts/divider/divider.js';
+import { BodyText } from '../../typography/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { VStack } from '../../stacks/v_stack.js';
 import React, { useState } from 'react';
 import { FieldSet } from './field_set.js';
+import { Legend } from './legend.js';
 import {
   Input,
   MaskInput,
@@ -8,11 +12,13 @@ import {
   Multiselect,
   PhoneNumberInput,
   Select,
+  Switch,
   Textarea,
   UnitInput,
   Option,
 } from '../../inputs/index.js';
 import { HField } from '../field/h_field/h_field.js';
+import { Field } from '../field/field.js';
 
 export default {
   title: 'Form/Field Set',
@@ -34,7 +40,8 @@ export function Baseline() {
   );
 
   return (
-    <FieldSet maxWidth="600px" minWidth="300px" legend="Fieldset" gap="8px" padding="8px">
+    <FieldSet maxWidth="600px" minWidth="300px">
+      <Legend>Fieldset</Legend>
       <HField label="Input" id="field-1">
         <Input />
       </HField>
@@ -109,3 +116,96 @@ export function Baseline() {
     </FieldSet>
   );
 }
+
+export function Composition() {
+  return (
+    <FieldSet maxWidth="600px" minWidth="300px">
+      <Legend>Personal Information</Legend>
+      <HField label="Name" id="comp-field-1">
+        <Input />
+      </HField>
+      <HField label="Email" id="comp-field-2">
+        <Input />
+      </HField>
+    </FieldSet>
+  );
+}
+
+export function Disabled() {
+  return (
+    <FieldSet maxWidth="600px" minWidth="300px" disabled>
+      <Legend>Locked Section</Legend>
+      <HField label="Name" id="disabled-field-1">
+        <Input />
+      </HField>
+      <HField label="Email" id="disabled-field-2">
+        <Input placeholder="Field in disabled FieldSet..." />
+      </HField>
+    </FieldSet>
+  );
+}
+
+const HOLIDAYS = [
+  { name: "New Year's Day", date: 'January 1, 2026', day: 'Thursday' },
+  { name: 'Martin Luther King Jr. Day', date: 'January 19, 2026', day: 'Monday' },
+  { name: "Presidents' Day", date: 'February 16, 2026', day: 'Monday' },
+  { name: 'Memorial Day', date: 'May 25, 2026', day: 'Monday' },
+  { name: 'Independence Day', date: 'July 4, 2026', day: 'Saturday' },
+  { name: 'Labor Day', date: 'September 7, 2026', day: 'Monday' },
+  { name: 'Columbus Day', date: 'October 12, 2026', day: 'Monday' },
+  { name: 'Veterans Day', date: 'November 11, 2026', day: 'Wednesday' },
+  { name: 'Thanksgiving Day', date: 'November 26, 2026', day: 'Thursday' },
+  { name: 'Christmas Day', date: 'December 25, 2026', day: 'Friday' },
+];
+
+export function CustomLegend() {
+  const [year, setYear] = useState('2026');
+  const [markAll, setMarkAll] = useState(false);
+  const [enabled, setEnabled] = useState<Record<string, boolean>>({});
+
+  return (
+    <FieldSet maxWidth="400px" minWidth="300px">
+      <Legend>
+        {/* TODO: https://git.tcncloud.net/blackcat-ui/blackcat/-/issues/321 — Replace VStack + hardcoded gap with a semantic container
+            (e.g. Rows) that has thematic context for direction shifts in smaller layouts */}
+        <VStack gap="8px" hAlign="start">
+          <HStack width="100%" hAlign="start">
+            <BodyText size="lg">Suggested Federal Holidays</BodyText>
+          </HStack>
+          <BodyText emphasis="faint">
+            Based on your selected timezone, the following U.S. federal holidays occur in{' '}
+            {year}. Enable the toggle to mark a holiday as a non-working day.
+          </BodyText>
+          <Field label="Year" id="holiday-year">
+            <Select value={year} onChange={setYear}>
+              <Option value="2025" label="2025">
+                2025
+              </Option>
+              <Option value="2026" label="2026">
+                2026
+              </Option>
+              <Option value="2027" label="2027">
+                2027
+              </Option>
+            </Select>
+          </Field>
+          <HField label="Mark all holidays as non-working days" id="holiday-mark-all">
+            <Switch checked={markAll} onChange={setMarkAll} />
+          </HField>
+        </VStack>
+      </Legend>
+      {HOLIDAYS.map(holiday => (
+        <HField
+          key={holiday.name}
+          label={`${holiday.name} - ${holiday.date} (${holiday.day})`}
+          id={`holiday-${holiday.name.toLowerCase().replace(/\s+/g, '-')}`}
+        >
+          <Switch
+            checked={markAll || !!enabled[holiday.name]}
+            onChange={value => setEnabled(prev => ({ ...prev, [holiday.name]: value }))}
+          />
+        </HField>
+      ))}
+    </FieldSet>
+  );
+}

package/src/form/field_set/field_set.tsx

@@ -1,67 +1,53 @@
-import { BodyText } from '../../typography/index.js';
-import { HStack } from '../../stacks/h_stack.js';
-import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
 import type { VStackProps } from '../../stacks/v_stack.js';
 import { clsx } from 'clsx';
-import React, { useMemo } from 'react';
+import React, { type FieldsetHTMLAttributes } from 'react';
+import { LabelledByContext } from '../../utils/hooks/labelled_by_context.js';
+import { useLabelledById } from '../../utils/hooks/labelled_by_context.js';
 import styles from './field_set.module.css';
 
-let fieldsetIdCount = 0;
-
-export type FieldSetProps = VStackProps<HTMLFieldSetElement> & {
-  legend?: string;
-  startAdornments?: React.ReactNode;
-  endAdornments?: React.ReactNode;
+export type FieldSetOwnProps = {
+  disabled?: boolean;
+  name?: string;
 };
 
-export const FieldSet = React.forwardRef(function FieldSet(
-  {
-    legend,
-    startAdornments,
-    endAdornments,
-    className,
-    children,
-    ...props
-  }: FieldSetProps,
-  ref: React.Ref<HTMLFieldSetElement>
-) {
-  const id = useMemo(() => {
-    return fieldsetIdCount++;
-  }, []);
+export type FieldSetProps = VStackProps<HTMLFieldSetElement> &
+  FieldSetOwnProps &
+  FieldsetHTMLAttributes<HTMLFieldSetElement>;
 
-  const labelId = `field-set-${id}`;
+export const FieldSet = React.forwardRef<HTMLFieldSetElement, FieldSetProps>(
+  function FieldSet(
+    {
+      className,
+      id,
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...props
+    }: FieldSetProps,
+    ref
+  ) {
+    const { labelId } = useLabelledById(id, ariaLabelledBy);
 
-  return (
-    <VStack
-      as="fieldset"
-      aria-labelledby={labelId}
-      ref={ref}
-      className={clsx(styles['field-set'], className, 'tcn-field-set')}
-      {...props}
-    >
-      {legend && (
-        <HStack
-          id={labelId}
-          className={clsx('tcn-legend', 'tcn-field-set-legend')}
-          hAlign="start"
-          height={props.height}
+    return (
+      <LabelledByContext.Provider value={{ labelId }}>
+        <VStack
+          as="fieldset"
+          aria-labelledby={labelId}
+          ref={ref}
+          id={id}
+          data-is-disabled={props.disabled ? 'true' : 'false'}
+          className={clsx(styles['field-set'], className, 'tcn-field-set')}
+          {...props}
         >
-          {startAdornments}
-          {startAdornments && <Spacer width="8px" />}
-          <BodyText className="tcn-field-set-legend-text" size="lg">
-            {legend}
-          </BodyText>
-          {endAdornments && <Spacer />}
-          {endAdornments}
-        </HStack>
-      )}
-      <VStack
-        className={clsx('tcn-field-set-body', styles['tcn-field-set-body'])}
-        {...props}
-      >
-        {children}
-      </VStack>
-    </VStack>
-  );
-});
+          {/* TODO: may want to ensure Legend is rendered before rest of children.
+        Search over children if a match is found for legend would pop it off the children array
+        and manually render it in the correct slot. 
+        Before doing this however, may want to build Slot and Slottable util to generalize the problem/solution for re-useability. 
+        */}
+          {children}
+          <fieldset disabled></fieldset>
+        </VStack>
+      </LabelledByContext.Provider>
+    );
+  }
+);

package/src/form/field_set/legend.tsx

@@ -0,0 +1,44 @@
+import { clsx } from 'clsx';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+import { BodyText } from '../../typography/index.js';
+import { useLabelledBy } from '../../utils/hooks/labelled_by_context.js';
+import styles from './field_set.module.css';
+
+export interface LegendOwnProps extends HStackProps {
+  id?: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Composable legend for FieldSet. Renders as a div (HStack) with
+ * aria-labelledby wiring handled automatically via context.
+ *
+ * String children are automatically wrapped in BodyText with the
+ * `tcn-field-set-legend-text` class for consistent theme styling.
+ * Non-string children (e.g. icons, custom typography) render as-is.
+ *
+ * If a custom `id` is provided, it takes precedence over the context value.
+ * When overriding `id`, also provide a matching `aria-labelledby` to the
+ * parent FieldSet so the association remains correct.
+ */
+export const Legend = ({ id, children, className, ...props }: LegendOwnProps) => {
+  const ctx = useLabelledBy();
+  const resolvedId = id ?? ctx?.labelId;
+
+  return (
+    <HStack
+      id={resolvedId}
+      className={clsx(className, styles.legend, 'tcn-legend', 'tcn-field-set-legend')}
+      {...props}
+    >
+      {typeof children === 'string' ? (
+        <BodyText className="tcn-field-set-legend-text" size="lg">
+          {children}
+        </BodyText>
+      ) : (
+        children
+      )}
+    </HStack>
+  );
+};

package/src/form/index.ts

@@ -46,5 +46,10 @@ export {
   type OptionsFieldState,
   type OptionsFieldOptions,
 } from './field_presenters/options_field_presenter.js';
-export { FieldSet, type FieldSetProps } from './field_set/field_set.js';
+export {
+  FieldSet,
+  type FieldSetProps,
+  type FieldSetOwnProps,
+} from './field_set/field_set.js';
+export { Legend, type LegendOwnProps } from './field_set/legend.js';
 export { FormField } from './form_field.js';