@tcn/ui 0.2.0 → 0.3.1

package/dist/tokens/bubble/bubble.js

@@ -3,24 +3,24 @@ import { clsx as s } from "clsx";
 import u from "react";
 import { theme as f } from "../../themes/theme_variables.js";
 import "../../themes/stylesheets/reset.js";
-import { HStack as p } from "../../stacks/h_stack.js";
-import '../../bubble.css';const d = "_bubble_d3b757e", h = { bubble: d }, R = u.forwardRef(function({
+import { HStack as d } from "../../stacks/h_stack.js";
+import '../../bubble.css';const p = "_bubble_d3b757e", h = { bubble: p }, B = u.forwardRef(function({
   children: e,
   className: t,
   style: o,
   backgroundColor: b = f.accentColor,
-  textColor: r = "#fff",
-  size: l = "md",
+  textColor: l = "#fff",
+  size: r = "md",
   elevate: a = !1,
   ...c
 }, i) {
   const n = {
-    "--bubble-text-color": r,
+    "--bubble-text-color": l,
     "--bubble-color": b,
     ...o
   };
   return /* @__PURE__ */ m(
-    p,
+    d,
     {
       inline: !0,
       className: s(h.bubble, "bubble", t),
@@ -30,7 +30,7 @@ import '../../bubble.css';const d = "_bubble_d3b757e", h = { bubble: d }, R = u.
       style: n,
       hAlign: "center",
       vAlign: "center",
-      "data-size": l,
+      "data-size": r,
       "data-elevate": a,
       padding: "4px",
       ...c,
@@ -39,6 +39,6 @@ import '../../bubble.css';const d = "_bubble_d3b757e", h = { bubble: d }, R = u.
   );
 });
 export {
-  R as Bubble
+  B as Bubble
 };
 //# sourceMappingURL=bubble.js.map

package/dist/tokens/chip/chip.js

@@ -2,9 +2,9 @@ import { jsx as m } from "react/jsx-runtime";
 import { HStack as n } from "../../stacks/h_stack.js";
 import { clsx as f } from "clsx";
 import h from "react";
-import { theme as s } from "../../themes/theme_variables.js";
+import { theme as l } from "../../themes/theme_variables.js";
 import "../../themes/stylesheets/reset.js";
-import '../../chip.css';const l = "_chip_35f6f0b", a = { chip: l }, R = h.forwardRef(function({ children: t, style: o, className: i, color: r = s.accentColor, ...c }, e) {
+import '../../chip.css';const s = "_chip_35f6f0b", a = { chip: s }, w = h.forwardRef(function({ children: t, style: o, className: i, color: r = l.accentColor, ...c }, e) {
   const p = {
     "--chip-color": r,
     ...o
@@ -25,6 +25,6 @@ import '../../chip.css';const l = "_chip_35f6f0b", a = { chip: l }, R = h.forwar
   );
 });
 export {
-  R as Chip
+  w as Chip
 };
 //# sourceMappingURL=chip.js.map

package/dist/tooltip.css

@@ -1 +1 @@
-._tooltip_e324d7e{background-color:var(--background-color-primary)}
+._tooltip_b8c58d5{background-color:var(--background-color-primary)}

package/dist/utility_bar.css

@@ -1 +1 @@
-._utility-bar_3a92315{width:100%;min-height:0;border-bottom:1px solid rgb(221,221,221);padding:var(--padding-medium);gap:var(--gap-medium)}
+._utility-bar_3a92315{width:100%;min-height:0}

package/dist/utils/click_away_listener.d.ts

@@ -7,5 +7,6 @@ export interface ClickAwayListenerProps {
     isException?: (target: HTMLElement) => boolean;
     refs?: React.RefObject<Element>[];
 }
+export declare function isEventWithinElement(event: MouseEvent | TouchEvent, node: HTMLElement | null, activated: boolean, refs: (Element | null)[]): boolean;
 export declare const ClickAwayListener: React.ForwardRefExoticComponent<ClickAwayListenerProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=click_away_listener.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"click_away_listener.d.ts","sourceRoot":"","sources":["../../src/utils/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;AAuCD,eAAO,MAAM,iBAAiB,4FA0E7B,CAAC"}
+{"version":3,"file":"click_away_listener.d.ts","sourceRoot":"","sources":["../../src/utils/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

@@ -1,4 +1,4 @@
-import m, { useRef as p, useCallback as L, useEffect as W } from "react";
+import d, { useRef as p, useCallback as L, useEffect as W } from "react";
 import { useForkRef as T } from "./hooks/use_fork_ref.js";
 const C = {
   onClick: "click",
@@ -8,16 +8,16 @@ const C = {
   onTouchStart: "touchstart",
   onTouchEnd: "touchend"
 };
-function w(o, t, d, s) {
-  if (!d)
+function w(o, t, m, s) {
+  if (!m)
     return !0;
   let n;
   return o.composedPath ? n = [t, ...s].find((e) => o.composedPath().indexOf(e) > -1) !== void 0 : n = !document.documentElement.contains(o.target) || [t, ...s].find((e) => e?.contains(o.target)) !== void 0, n;
 }
-const F = m.forwardRef(
-  function({ children: t, mouseEvent: d, touchEvent: s, onClickAway: n, refs: e = [], isException: a }, R) {
-    const f = p(null), v = p(!0), E = C[d || "onClick"], l = g[s || "onTouchEnd"], k = T(R, f, t.ref), i = m.useRef(!1);
-    m.useEffect(() => (window.setTimeout(() => {
+const F = d.forwardRef(
+  function({ children: t, mouseEvent: m, touchEvent: s, onClickAway: n, refs: e = [], isException: a }, R) {
+    const f = p(null), v = p(!0), l = C[m || "onClick"], E = g[s || "onTouchEnd"], k = T(R, f, t.ref), i = d.useRef(!1);
+    d.useEffect(() => (window.setTimeout(() => {
       i.current = !0;
     }, 0), () => {
       i.current = !1;
@@ -44,15 +44,16 @@ const F = m.forwardRef(
       },
       [n, e, a]
     );
-    return W(() => (document.addEventListener("mousedown", r), document.addEventListener("touchstart", r), document.addEventListener(E, c), document.addEventListener(l, c), () => {
-      document.removeEventListener("mousedown", r), document.removeEventListener("touchstart", r), document.removeEventListener(E, c), document.removeEventListener(l, c);
-    }), [l, E, c, r]), m.cloneElement(t, {
+    return W(() => (document.addEventListener("mousedown", r), document.addEventListener("touchstart", r), document.addEventListener(l, c), document.addEventListener(E, c), () => {
+      document.removeEventListener("mousedown", r), document.removeEventListener("touchstart", r), document.removeEventListener(l, c), document.removeEventListener(E, c);
+    }), [E, l, c, r]), d.cloneElement(t, {
       ...t.props,
       ref: k
     });
   }
 );
 export {
-  F as ClickAwayListener
+  F as ClickAwayListener,
+  w as isEventWithinElement
 };
 //# sourceMappingURL=click_away_listener.js.map

package/dist/utils/click_away_listener.js.map

@@ -1 +1 @@
-{"version":3,"file":"click_away_listener.js","sources":["../../src/utils/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\nfunction 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;AAEA,SAASC,EACPC,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;AAEvC,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;"}
+{"version":3,"file":"click_away_listener.js","sources":["../../src/utils/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/dnd/draggable/draggable.js

@@ -7,19 +7,19 @@ import '../../../draggable.css';const c = "_draggable_db40376", m = { draggable:
   children: a,
   draggable: t = !0
 }) => {
-  const o = p({}), r = n(
+  const o = p({}), e = n(
     () => ({
       "--position-x": `${o.position.x}px`,
       "--position-y": `${o.position.y}px`
     }),
     [o.position]
-  ), e = i.cloneElement(a, {
+  ), r = i.cloneElement(a, {
     className: l("tcn-draggable", m.draggable, a.props.className),
-    style: { ...r, ...a.props.style },
+    style: { ...e, ...a.props.style },
     "data-is-dragging": o.isDragging,
     "data-is-draggable": t
   });
-  return /* @__PURE__ */ s(g.Provider, { value: o, children: e });
+  return /* @__PURE__ */ s(g.Provider, { value: o, children: r });
 };
 export {
   y as Draggable

package/dist/utils/dnd/handle.js

@@ -2,17 +2,17 @@ import s, { useRef as f, useEffect as u } from "react";
 import a from "clsx";
 import { useDragContainer as l } from "./context.js";
 import { useForkRef as m } from "../hooks/use_fork_ref.js";
-const d = ({ children: e }) => {
-  const { registerHandle: t, unregisterHandle: n } = l(), r = f(null);
+const d = ({ children: r }) => {
+  const { registerHandle: t, unregisterHandle: n } = l(), e = f(null);
   u(() => {
-    if (r.current != null)
-      return t(r), () => {
-        r.current != null && n(r);
+    if (e.current != null)
+      return t(e), () => {
+        e.current != null && n(e);
       };
   }, [t, n]);
-  const o = m(r, e.props.ref);
-  return s.cloneElement(e, {
-    className: a("tcn-drag-handle", e.props.className),
+  const o = m(e, r.props.ref);
+  return s.cloneElement(r, {
+    className: a("tcn-drag-handle", r.props.className),
     ref: o
   });
 };

package/dist/utils/focus_redirect.js

@@ -1,7 +1,7 @@
-import { jsx as i } from "react/jsx-runtime";
-import e from "react";
-const d = e.forwardRef(function({ onRedirect: t }, o) {
-  return /* @__PURE__ */ i(
+import { jsx as e } from "react/jsx-runtime";
+import i from "react";
+const n = i.forwardRef(function({ onRedirect: t }, o) {
+  return /* @__PURE__ */ e(
     "div",
     {
       ref: o,
@@ -19,6 +19,6 @@ const d = e.forwardRef(function({ onRedirect: t }, o) {
   );
 });
 export {
-  d as FocusRedirect
+  n as FocusRedirect
 };
 //# sourceMappingURL=focus_redirect.js.map

package/dist/utils/hooks/make_context_hook.js

@@ -1,9 +1,9 @@
 import r from "react";
-const i = (e, t) => () => {
-  const o = r.useContext(e);
-  if (o === void 0)
+const i = (o, t) => () => {
+  const e = r.useContext(o);
+  if (e === void 0)
     throw t ? new Error(`Context ${t} was accessed outside of a context provider!`) : new Error("Context must be used within a Context Provider!");
-  return o;
+  return e;
 };
 export {
   i as makeContextHook

package/dist/utils/hooks/use_media_query.js

@@ -1,5 +1,5 @@
 import s from "react";
-function h(t) {
+function d(t) {
   const [c, a] = s.useState(!1);
   return s.useEffect(() => {
     const e = window.matchMedia(t);
@@ -11,6 +11,6 @@ function h(t) {
   }, [t]), c;
 }
 export {
-  h as useMediaQuery
+  d as useMediaQuery
 };
 //# sourceMappingURL=use_media_query.js.map

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;AAElD,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 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;"}

package/dist/utils/index.d.ts

@@ -1,17 +1,18 @@
-export * from './focus_redirect.js';
 export * from './click_away_listener.js';
+export * from './focus_redirect.js';
 export * from './scroll_away_listener.js';
-export * from './hooks/make_context_hook.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 './default_value.js';
 export * from './calendar/calendar_date.js';
 export * from './calendar/calendar_dates_generator.js';
-export * from './calendar/month.js';
-export * from './calendar/get_months_of_year.js';
 export * from './calendar/get_days_of_week.js';
-export * from './types/variations.js';
+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';
 //# 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,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,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,qBAAqB,CAAC;AACpC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAE/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,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,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"}

package/dist/utils/index.js

@@ -1,30 +1,33 @@
-import { FocusRedirect as o } from "./focus_redirect.js";
-import { ClickAwayListener as f } from "./click_away_listener.js";
-import { ScrollAwayListener as m } from "./scroll_away_listener.js";
-import { makeContextHook as p } from "./hooks/make_context_hook.js";
-import { useDraggable as i } from "./dnd/hooks/use_draggable.js";
+import { ClickAwayListener as o, isEventWithinElement as t } from "./click_away_listener.js";
+import { FocusRedirect as m } from "./focus_redirect.js";
+import { ScrollAwayListener as s } from "./scroll_away_listener.js";
+import { useDraggable as a } from "./dnd/hooks/use_draggable.js";
+import { makeContextHook as i } from "./hooks/make_context_hook.js";
 import { useForkRef as u } from "./hooks/use_fork_ref.js";
-import { useMediaQuery as l } from "./hooks/use_media_query.js";
-import { TriggerConfig as c, useResizeObserver as d } from "./hooks/use_resize_observer.js";
+import { useMediaQuery as d } from "./hooks/use_media_query.js";
+import { TriggerConfig as R, useResizeObserver as c } from "./hooks/use_resize_observer.js";
 import { defaultValue as C } from "./default_value.js";
-import { CalendarDatesGenerator as M } from "./calendar/calendar_dates_generator.js";
-import { Month as R } from "./calendar/month.js";
-import { getMonthsOfYear as h } from "./calendar/get_months_of_year.js";
-import { getDaysOfWeek as A } from "./calendar/get_days_of_week.js";
+import { CalendarDatesGenerator as v } from "./calendar/calendar_dates_generator.js";
+import { getDaysOfWeek as M } from "./calendar/get_days_of_week.js";
+import { getMonthsOfYear as b } from "./calendar/get_months_of_year.js";
+import { Month as A } from "./calendar/month.js";
+import { ResponsiveRenderer as F } from "./responsive/responsive_renderer.js";
 export {
-  M as CalendarDatesGenerator,
-  f as ClickAwayListener,
-  o as FocusRedirect,
-  R as Month,
-  m as ScrollAwayListener,
-  c as TriggerConfig,
+  v as CalendarDatesGenerator,
+  o as ClickAwayListener,
+  m as FocusRedirect,
+  A as Month,
+  F as ResponsiveRenderer,
+  s as ScrollAwayListener,
+  R as TriggerConfig,
   C as defaultValue,
-  A as getDaysOfWeek,
-  h as getMonthsOfYear,
-  p as makeContextHook,
-  i as useDraggable,
+  M as getDaysOfWeek,
+  b as getMonthsOfYear,
+  t as isEventWithinElement,
+  i as makeContextHook,
+  a as useDraggable,
   u as useForkRef,
-  l as useMediaQuery,
-  d as useResizeObserver
+  d as useMediaQuery,
+  c 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/dist/utils/mouse_leave_region.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface MouseLeaveRegionProps {
+    elementsRefs: (React.RefObject<Element> | React.MutableRefObject<Element>)[];
+    onMouseLeave: () => void;
+    buffer?: number;
+}
+export declare function MouseLeaveRegion({ onMouseLeave, elementsRefs: elementRefs, buffer, }: MouseLeaveRegionProps): null;
+//# sourceMappingURL=mouse_leave_region.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mouse_leave_region.d.ts","sourceRoot":"","sources":["../../src/utils/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/mouse_leave_region.js

@@ -0,0 +1,26 @@
+import { useEffect as u } from "react";
+function v({
+  onMouseLeave: o,
+  elementsRefs: i,
+  buffer: t = 8
+}) {
+  return u(() => {
+    const r = (e) => {
+      i.some((c) => {
+        const s = c.current;
+        if (s != null) {
+          const n = s.getBoundingClientRect(), l = Math.max(e.clientX - t, n.left), m = Math.min(e.clientX + t, n.right), a = Math.max(e.clientY - t, n.top), p = Math.min(e.clientY + t, n.bottom);
+          return l <= m && a <= p;
+        }
+        return !1;
+      }) || o();
+    };
+    return window.addEventListener("mousemove", r), () => {
+      window.removeEventListener("mousemove", r);
+    };
+  }, [o, i, t]), null;
+}
+export {
+  v as MouseLeaveRegion
+};
+//# sourceMappingURL=mouse_leave_region.js.map

package/dist/utils/mouse_leave_region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mouse_leave_region.js","sources":["../../src/utils/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/types/dimensions.d.ts

@@ -6,7 +6,17 @@ export interface Dimensions {
     width: number;
     height: number;
 }
-export interface Rect {
+export interface Rectangle {
+    dimensions: Dimensions;
+    position: Position;
+}
+export interface RectCorners {
+    topLeft: Position;
+    topRight: Position;
+    bottomLeft: Position;
+    bottomRight: Position;
+}
+export interface RectEdges {
     top: number;
     right: number;
     bottom: number;

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

@@ -1 +1 @@
-{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../src/utils/types/dimensions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,IAAI;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd"}
+{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../src/utils/types/dimensions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,QAAQ,CAAC;IACrB,WAAW,EAAE,QAAQ,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -134,8 +134,8 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "react-color": "^2.19.3",
-    "@tcn/state": "1.0.1",
-    "@tcn/icons": "2.1.1"
+    "@tcn/icons": "2.2.0",
+    "@tcn/state": "1.1.0"
   },
   "scripts": {
     "build": "vite build",

package/src/actions/__docs__/actions.mdx

@@ -0,0 +1,131 @@
+import { Canvas, Meta, Markdown } from '@storybook/addon-docs/blocks';
+import * as ActionStories from './actions.stories';
+import { Showcase, Section } from './components/showcase';
+import { Gallery } from './components/gallery';
+
+<Meta title="Catalog/Actions" of={ActionStories} />
+
+# Actions
+
+Interactive elements that trigger operations or set configuration for application tooling.
+
+## Button
+
+Relaxed, text based actions for high level page decisions (Cancel, Save, etc.)
+
+<Gallery minColumnWidth="350px">
+
+<Showcase
+  title="Hierarchy"
+  description="Visually indicates the importance of an action and its relationship to other actions. A primary action should be limited to one per surface."
+  of={ActionStories.HierarchyShowcase}
+  width="380px"
+/>
+
+<Showcase
+  title="Size"
+  description="Used to customize the size of actions in relation to one another on a surface. Use sparingly, do not use as a replacement for hierarchy."
+  of={ActionStories.SizeShowcase}
+  width="320px"
+/>
+
+<Showcase
+  title="Disabled"
+  description="Prevents interaction and reduces visual prominence."
+  of={ActionStories.DisabledShowcase}
+  width="420px"
+/>
+
+<Showcase
+  title="With Icons"
+  description="Icons can be added to buttons with the use of Icon and Spacer components."
+  of={ActionStories.IconShowcase}
+  width="300px"
+/>
+
+<Showcase
+  title="Severity"
+  description="Visual indication of the severity of consequential, one-time actions."
+  of={ActionStories.SeverityShowcase}
+  width="300px"
+>
+  <Markdown>
+    {`
+**🚧 This concept is being actively developed.**
+
+Severity gives users a clear, visual indication of the impact and importance of an action. 
+
+Should be the primary exception of color variance in actions and generally replacing the need for using custom colors.
+
+Use sparingly for consequential, one-time actions such as:
+
+- Deleting an entity permanently - **dangerous**
+- Discarding the UIs current state or unsaved changes when leaving the page - **cautious**
+- Prompting a user to pick a preferred option out of multiple otherwise valid options - **suggested**
+- Client confirmation for important migration - **encouraged**
+`}
+  </Markdown>
+</Showcase>
+
+<Showcase
+  title="Custom Colors"
+  description="
+  Override accent color for heavily brand or product specific actions. 
+  Use sparingly, should be avoided to create cohesion and consistency between UIs."
+  of={ActionStories.ColorShowcase}
+  width="420px"
+/>
+
+<Showcase
+  title="Full Width"
+  description="Fill container width for mobile or prominent CTAs."
+  of={ActionStories.FullWidth}
+  width="340px"
+/>
+
+</Gallery>
+
+
+
+## Utility
+
+Compact, icon-based actions.  Used as re-usable tooling for item rows, utility bars, or supplemental behavior on elements (Close Panel, Copy Entity, ect)
+
+<Gallery>
+
+<Showcase
+  title="Hierarchy"
+  description="Visually indicates the importance of an action and its relationship to other actions. A primary action should be limited to one per surface."
+  of={ActionStories.SlimButtonHierarchy}
+  width="240px"
+/>
+
+<Showcase
+  title="Size"
+  description="Used to customize the size of actions in relation to one another on a surface. Use sparingly, do not use as a replacement for hierarchy."
+  of={ActionStories.SlimButtonSizes}
+  width="220px"
+/>
+
+<Showcase
+  title="Disabled"
+  description="Prevents interaction and reduces visual prominence."
+  of={ActionStories.SlimButtonDisabled}
+  width="240px"
+/>
+
+<Showcase
+  title="Severity"
+  description="Visual indication of the severity of consequential, one-time actions."
+  of={ActionStories.SlimButtonSeverity}
+  width="140px"
+/>
+
+<Showcase
+  title="Custom Colors"
+  description="Override accent color for heavily brand or product specific actions. Use sparingly, should be avoided to create cohesion and consistency between UIs."
+  of={ActionStories.SlimButtonColors}
+  width="140px"
+/>
+
+</Gallery>