@tcn/ui 0.1.1 → 0.2.0

package/dist/themes/themes/ergo/ergo_theme.js

@@ -445,6 +445,16 @@ legend {
 }
 
 /* ===== SURFACES ===== */
+.tcn-draggable[data-is-draggable="true"] {
+  .tcn-drag-handle {
+    cursor: move;
+  }
+}
+
+.tcn-frame[data-is-veil="true"] {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
 .tcn-list {
   gap: var(--gap-medium);
   .tcn-item {
@@ -518,6 +528,65 @@ legend {
   }
 }
 
+/* WINDOW: */
+.tcn-window {
+  --v-inset: var(--padding-large);
+  background-color: var(--background-color-primary);
+  border-radius: var(--shape-radius-medium);
+  /* TODO: This should be a variable */
+  border: 1px solid rgba(170, 170, 170, 1);
+  overflow: hidden;
+
+  :where(.tcn-typography) {
+    color: inherit;
+  }
+
+  :where(.tcn-header) {
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
+    min-height: 40px;
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+
+    :where(.tcn-divider) {
+      padding: 4px 0;
+      :where(.tcn-divider-line) {
+        width: 1.5px;
+        min-height: 18px;
+        height: auto;
+      }
+    }
+  }
+
+  :where(.tcn-utility-bar) {
+    min-height: 32px;
+    border-bottom: 1px solid var(--foreground-color-primary);
+    padding: 0 var(--v-inset);
+
+    :where(.tcn-button) {
+      padding: 0;
+      min-width: 18px;
+      min-height: 18px;
+    }
+  }
+
+  :where(.tcn-body) {
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-footer) {
+    gap: var(--gap-medium);
+    min-height: 40px;
+    border-top: 1px solid var(--foreground-color-primary);
+    padding: 0 var(--v-inset);
+  }
+}
+
 /* PANEL */
 .tcn-panel {
   --v-inset: var(--padding-large);

package/dist/themes/themes/ergo/ergo_theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */\\nhtml,\\nbody,\\ndiv,\\nspan,\\napplet,\\nobject,\\niframe,\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\np,\\nblockquote,\\npre,\\na,\\nabbr,\\nacronym,\\naddress,\\nbig,\\ncite,\\ncode,\\ndel,\\ndfn,\\nem,\\nimg,\\nins,\\nkbd,\\nq,\\ns,\\nsamp,\\nsmall,\\nstrike,\\nstrong,\\nsub,\\nsup,\\ntt,\\nvar,\\nb,\\nu,\\ni,\\ncenter,\\ndl,\\ndt,\\ndd,\\nol,\\nul,\\nli,\\nfieldset,\\nform,\\nlabel,\\nlegend,\\ntable,\\ncaption,\\ntbody,\\ntfoot,\\nthead,\\ntr,\\nth,\\ntd,\\narticle,\\naside,\\ncanvas,\\ndetails,\\nembed,\\nfigure,\\nfigcaption,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\noutput,\\nruby,\\nsection,\\nsummary,\\ntime,\\nmark,\\naudio,\\nvideo {\\n  margin: 0;\\n  padding: 0;\\n  border: 0;\\n  font-size: 100%;\\n  font: inherit;\\n  vertical-align: baseline;\\n}\\n/* HTML5 display-role reset for older browsers */\\narticle,\\naside,\\ndetails,\\nfigcaption,\\nfigure,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\nsection {\\n  display: block;\\n}\\nbody {\\n  line-height: 1;\\n}\\nol,\\nul {\\n  list-style: none;\\n}\\nblockquote,\\nq {\\n  quotes: none;\\n}\\nblockquote:before,\\nblockquote:after,\\nq:before,\\nq:after {\\n  content: \\\"\\\";\\n  content: none;\\n}\\ntable {\\n  border-collapse: collapse;\\n  border-spacing: 0;\\n}\\n\\nlegend {\\n  all: unset;\\n  display: block;\\n  margin: 0;\\n  padding: 0;\\n  font: inherit;\\n  color: inherit;\\n}\\n\\n/* ===== CSS VARIABLES ===== */\\n:root {\\n  --scalar: 1;\\n  --gap-small: 4px;\\n  --gap-medium: 8px;\\n  --gap-large: 16px;\\n\\n  --padding-small: 4px;\\n  --padding-medium: 8px;\\n  --padding-large: 16px;\\n\\n  --status-color-disabled: #7f7f7f;\\n  --status-color-info: #008cff;\\n  --status-color-warning: #ffff00;\\n  --status-color-positive: #00ff00;\\n  --status-color-error: #ff0000;\\n\\n  --async-color-initial: #c0c0c0;\\n  --async-color-pending: #008cff;\\n  --async-color-success: #00ff00;\\n  --async-color-failed: #ff0000;\\n\\n  --primary-color-faint: #c0c0c0;\\n  --primary-color: #008cff;\\n  --primary-color-strong: #008cff;\\n\\n  --secondary-color-faint: #c0c0c0;\\n  --secondary-color: #008cff;\\n  --secondary-color-strong: #008cff;\\n\\n  --tertiary-color-faint: #c0c0c0;\\n  --tertiary-color: #008cff;\\n  --tertiary-color-strong: #008cff;\\n\\n  --quaternary-color-faint: #c0c0c0;\\n  --quaternary-color: #008cff;\\n  --quaternary-color-strong: #008cff;\\n\\n  --font-color: #395578;\\n  --font-family: \\\"Lato\\\", sans-serif;\\n  --font-size: 12px;\\n\\n  --background-color-primary: #ffffff;\\n  --background-color-secondary: #ffffff;\\n  --background-color-tertiary: #ffffff;\\n  --background-color-quaternary: #ffffff;\\n\\n  --foreground-color-primary: #aaa;\\n  --foreground-color-secondary: #222222;\\n  --foreground-color-tertiary: #222222;\\n  --foreground-color-quaternary: #222222;\\n\\n  --material-disabled: #d3d3d3;\\n  --material-secondary-dark: 197 29.1% 40.4%;\\n  --material-tan: 33, 22%, 84%;\\n\\n  --shape-radius-small: 2px;\\n  --shape-radius-medium: 4px;\\n  --shape-radius-large: 8px;\\n\\n  --accent-color: #cd6b2c;\\n\\n  --action: 23, 65%, 49%;\\n  --on-action: 0, 0%, 100%;\\n  --material: 0, 0%, 100%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n* {\\n  position: relative;\\n  box-sizing: border-box;\\n}\\n/* ===== Actions ===== */\\n\\n.tcn-interactive {\\n  cursor: pointer;\\n  user-select: none;\\n  transition:\\n    transform 0.1s,\\n    background 0.1s,\\n    color 0.1s;\\n\\n  --act: hsl(var(--action));\\n  --on-act: hsl(var(--on-action));\\n  /* Could use hsl here if we made three color variables for each of the hsl values */\\n  --act-down: color-mix(in srgb, var(--act), black 8%);\\n  --act-raised: color-mix(in srgb, var(--act), white 8%);\\n  --act-faint: hsla(var(--action), 0.2);\\n  --on-mat: hsl(var(--on-material));\\n  --on-mat-faint: hsla(var(--on-material), 0.2);\\n  --mat: hsl(var(--material));\\n  --mat-down: color-mix(in srgb, var(--mat), black 8%);\\n  --mat-raised: color-mix(in srgb, var(--mat), white 8%);\\n}\\n\\n.tcn-interactive[data-is-disabled=\\\"true\\\"] {\\n  pointer-events: none;\\n  cursor: not-allowed;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"] {\\n  background: var(--act);\\n  color: var(--on-act);\\n  border: 1px solid var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:focus-visible {\\n  outline: 2px dashed var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n  background: var(--material-disabled);\\n  color: white;\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:hover {\\n  background: var(--act-raised);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:active {\\n  background: var(--act-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:hover {\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid transparent;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:hover {\\n  text-decoration: underline;\\n  text-decoration-color: var(--on-mat);\\n  text-decoration-thickness: 1px;\\n  text-underline-offset: 4px;\\n  color: var(--on-mat);\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n/* Button */\\n.tcn-button {\\n  border-radius: 4px;\\n}\\n\\n.tcn-button[data-size=\\\"sm\\\"] {\\n  padding: 0px 8px;\\n  min-height: 22px;\\n}\\n\\n.tcn-button[data-size=\\\"md\\\"] {\\n  padding: 0px 12px;\\n  min-height: 26px;\\n}\\n\\n.tcn-button[data-size=\\\"lg\\\"] {\\n  padding: 0px 16px;\\n  min-height: 32px;\\n}\\n\\n.tcn-button:hover {\\n  transform: translateY(-1px);\\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-button:active {\\n  transform: translateY(1px);\\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-slim-button {\\n  height: auto;\\n  width: auto;\\n  padding: 0;\\n}\\n\\n.tcn-slim-button[data-size=\\\"sm\\\"] {\\n  min-height: 12px;\\n  min-width: 12px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 10px;\\n    min-width: 10px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"md\\\"] {\\n  min-height: 18px;\\n  min-width: 18px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 14px;\\n    min-width: 14px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"lg\\\"] {\\n  min-height: 24px;\\n  min-width: 24px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 20px;\\n    min-width: 20px;\\n  }\\n}\\n\\n/* ===== Materials ===== */\\n\\n/* White on Gray */\\n.material-status-disabled {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 0%, 49.8%;\\n  --material: 0, 0%, 49.8%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Vivid Blue */\\n.material-status-info {\\n  --action: 0, 0%, 100%;\\n  --on-action: 207, 100%, 50%;\\n  --material: 207, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* Navy on Yellow */\\n.material-status-warning {\\n  --action: 213, 35.6%, 34.7%;\\n  --on-action: 60, 100%, 50%;\\n  --material: 60, 100%, 50%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n/* White on Red  */\\n.material-status-error {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 100%, 50%;\\n  --material: 0, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* Navy on Light Grey */\\n.material-async-initial {\\n  --action: 213, 35.6%, 34.7%;\\n  --on-action: 0, 0%, 75.3%;\\n  --material: 0, 0%, 75.3%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n/* White on Loading Blue */\\n.material-async-pending {\\n  --action: 0, 0%, 100%;\\n  --on-action: 207, 100%, 50%;\\n  --material: 207, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Vivid Green */\\n.material-async-success {\\n  --action: 0, 0%, 100%;\\n  --on-action: 120, 100%, 50%;\\n  --material: 120, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Red */\\n.material-async-failed {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 100%, 50%;\\n  --material: 0, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n.material {\\n  background-color: hsl(var(--material));\\n  color: hsl(var(--on-material));\\n}\\n\\n/* ===== SURFACES ===== */\\n.tcn-list {\\n  gap: var(--gap-medium);\\n  .tcn-item {\\n    height: 24px;\\n    padding: 0px var(--padding-medium);\\n    border-radius: var(--shape-radius-medium);\\n  }\\n}\\n\\n.tcn-veil {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n/* TODO: FIX Borders on modal header and footer -- when there are multiple header/footers */\\n/* MODAL: */\\n.tcn-modal {\\n  --v-inset: var(--padding-large);\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  /* TODO: This should be a variable */\\n  border: 1px solid rgba(170, 170, 170, 1);\\n  overflow: hidden;\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n\\n    :where(.tcn-divider) {\\n      padding: 4px 0;\\n      :where(.tcn-divider-line) {\\n        width: 1.5px;\\n        min-height: 18px;\\n        height: auto;\\n      }\\n    }\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: 32px;\\n    border-bottom: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n\\n    :where(.tcn-button) {\\n      padding: 0;\\n      min-width: 18px;\\n      min-height: 18px;\\n    }\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: 40px;\\n    border-top: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n  }\\n}\\n\\n/* PANEL */\\n.tcn-panel {\\n  --v-inset: var(--padding-large);\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  overflow: hidden;\\n\\n  :where(.tcn-header) {\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n\\n    :where(.tcn-title) {\\n      font-weight: 700;\\n    }\\n\\n    :where(.tcn-divider) {\\n      padding: 4px 0;\\n      :where(.tcn-divider-line) {\\n        width: 1.5px;\\n        min-height: 18px;\\n        height: auto;\\n      }\\n    }\\n  }\\n\\n  /* Border appears on body only when it follows header or utility-bar */\\n  :where(.tcn-header) + :where(.tcn-body),\\n  :where(.tcn-utility-bar) + :where(.tcn-body) {\\n    border-top: 1px solid var(--foreground-color-primary);\\n  }\\n\\n  /* Border appears on footer only when it follows body */\\n  :where(.tcn-body) + :where(.tcn-footer) {\\n    border-top: 1px solid var(--foreground-color-primary);\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: 32px;\\n    padding: 0 var(--v-inset);\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n  }\\n}\\n\\n/* Card */\\n.tcn-card {\\n  padding: 0;\\n  gap: 0px;\\n  border: 1px solid var(--foreground-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  overflow: hidden;\\n  :where(.tcn-header) {\\n    /* TODO: Color header */\\n    min-height: 32px;\\n  }\\n  :where(.tcn-body) {\\n    padding: var(--padding-medium) var(--v-inset);\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}
+{"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */\\nhtml,\\nbody,\\ndiv,\\nspan,\\napplet,\\nobject,\\niframe,\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\np,\\nblockquote,\\npre,\\na,\\nabbr,\\nacronym,\\naddress,\\nbig,\\ncite,\\ncode,\\ndel,\\ndfn,\\nem,\\nimg,\\nins,\\nkbd,\\nq,\\ns,\\nsamp,\\nsmall,\\nstrike,\\nstrong,\\nsub,\\nsup,\\ntt,\\nvar,\\nb,\\nu,\\ni,\\ncenter,\\ndl,\\ndt,\\ndd,\\nol,\\nul,\\nli,\\nfieldset,\\nform,\\nlabel,\\nlegend,\\ntable,\\ncaption,\\ntbody,\\ntfoot,\\nthead,\\ntr,\\nth,\\ntd,\\narticle,\\naside,\\ncanvas,\\ndetails,\\nembed,\\nfigure,\\nfigcaption,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\noutput,\\nruby,\\nsection,\\nsummary,\\ntime,\\nmark,\\naudio,\\nvideo {\\n  margin: 0;\\n  padding: 0;\\n  border: 0;\\n  font-size: 100%;\\n  font: inherit;\\n  vertical-align: baseline;\\n}\\n/* HTML5 display-role reset for older browsers */\\narticle,\\naside,\\ndetails,\\nfigcaption,\\nfigure,\\nfooter,\\nheader,\\nhgroup,\\nmenu,\\nnav,\\nsection {\\n  display: block;\\n}\\nbody {\\n  line-height: 1;\\n}\\nol,\\nul {\\n  list-style: none;\\n}\\nblockquote,\\nq {\\n  quotes: none;\\n}\\nblockquote:before,\\nblockquote:after,\\nq:before,\\nq:after {\\n  content: \\\"\\\";\\n  content: none;\\n}\\ntable {\\n  border-collapse: collapse;\\n  border-spacing: 0;\\n}\\n\\nlegend {\\n  all: unset;\\n  display: block;\\n  margin: 0;\\n  padding: 0;\\n  font: inherit;\\n  color: inherit;\\n}\\n\\n/* ===== CSS VARIABLES ===== */\\n:root {\\n  --scalar: 1;\\n  --gap-small: 4px;\\n  --gap-medium: 8px;\\n  --gap-large: 16px;\\n\\n  --padding-small: 4px;\\n  --padding-medium: 8px;\\n  --padding-large: 16px;\\n\\n  --status-color-disabled: #7f7f7f;\\n  --status-color-info: #008cff;\\n  --status-color-warning: #ffff00;\\n  --status-color-positive: #00ff00;\\n  --status-color-error: #ff0000;\\n\\n  --async-color-initial: #c0c0c0;\\n  --async-color-pending: #008cff;\\n  --async-color-success: #00ff00;\\n  --async-color-failed: #ff0000;\\n\\n  --primary-color-faint: #c0c0c0;\\n  --primary-color: #008cff;\\n  --primary-color-strong: #008cff;\\n\\n  --secondary-color-faint: #c0c0c0;\\n  --secondary-color: #008cff;\\n  --secondary-color-strong: #008cff;\\n\\n  --tertiary-color-faint: #c0c0c0;\\n  --tertiary-color: #008cff;\\n  --tertiary-color-strong: #008cff;\\n\\n  --quaternary-color-faint: #c0c0c0;\\n  --quaternary-color: #008cff;\\n  --quaternary-color-strong: #008cff;\\n\\n  --font-color: #395578;\\n  --font-family: \\\"Lato\\\", sans-serif;\\n  --font-size: 12px;\\n\\n  --background-color-primary: #ffffff;\\n  --background-color-secondary: #ffffff;\\n  --background-color-tertiary: #ffffff;\\n  --background-color-quaternary: #ffffff;\\n\\n  --foreground-color-primary: #aaa;\\n  --foreground-color-secondary: #222222;\\n  --foreground-color-tertiary: #222222;\\n  --foreground-color-quaternary: #222222;\\n\\n  --material-disabled: #d3d3d3;\\n  --material-secondary-dark: 197 29.1% 40.4%;\\n  --material-tan: 33, 22%, 84%;\\n\\n  --shape-radius-small: 2px;\\n  --shape-radius-medium: 4px;\\n  --shape-radius-large: 8px;\\n\\n  --accent-color: #cd6b2c;\\n\\n  --action: 23, 65%, 49%;\\n  --on-action: 0, 0%, 100%;\\n  --material: 0, 0%, 100%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n* {\\n  position: relative;\\n  box-sizing: border-box;\\n}\\n/* ===== Actions ===== */\\n\\n.tcn-interactive {\\n  cursor: pointer;\\n  user-select: none;\\n  transition:\\n    transform 0.1s,\\n    background 0.1s,\\n    color 0.1s;\\n\\n  --act: hsl(var(--action));\\n  --on-act: hsl(var(--on-action));\\n  /* Could use hsl here if we made three color variables for each of the hsl values */\\n  --act-down: color-mix(in srgb, var(--act), black 8%);\\n  --act-raised: color-mix(in srgb, var(--act), white 8%);\\n  --act-faint: hsla(var(--action), 0.2);\\n  --on-mat: hsl(var(--on-material));\\n  --on-mat-faint: hsla(var(--on-material), 0.2);\\n  --mat: hsl(var(--material));\\n  --mat-down: color-mix(in srgb, var(--mat), black 8%);\\n  --mat-raised: color-mix(in srgb, var(--mat), white 8%);\\n}\\n\\n.tcn-interactive[data-is-disabled=\\\"true\\\"] {\\n  pointer-events: none;\\n  cursor: not-allowed;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"] {\\n  background: var(--act);\\n  color: var(--on-act);\\n  border: 1px solid var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:focus-visible {\\n  outline: 2px dashed var(--act);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n  background: var(--material-disabled);\\n  color: white;\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:hover {\\n  background: var(--act-raised);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"primary\\\"]:active {\\n  background: var(--act-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n  border: 1px solid var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:hover {\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"secondary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"] {\\n  background: transparent;\\n  color: var(--on-mat);\\n  border: 1px solid transparent;\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:focus-visible {\\n  outline: 2px dashed var(--on-mat);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n  color: var(--material-disabled);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:hover {\\n  text-decoration: underline;\\n  text-decoration-color: var(--on-mat);\\n  text-decoration-thickness: 1px;\\n  text-underline-offset: 4px;\\n  color: var(--on-mat);\\n  background: var(--on-mat-faint);\\n}\\n\\n.tcn-interactive[data-hierarchy=\\\"tertiary\\\"]:active {\\n  background: var(--mat-down);\\n}\\n\\n/* Button */\\n.tcn-button {\\n  border-radius: 4px;\\n}\\n\\n.tcn-button[data-size=\\\"sm\\\"] {\\n  padding: 0px 8px;\\n  min-height: 22px;\\n}\\n\\n.tcn-button[data-size=\\\"md\\\"] {\\n  padding: 0px 12px;\\n  min-height: 26px;\\n}\\n\\n.tcn-button[data-size=\\\"lg\\\"] {\\n  padding: 0px 16px;\\n  min-height: 32px;\\n}\\n\\n.tcn-button:hover {\\n  transform: translateY(-1px);\\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-button:active {\\n  transform: translateY(1px);\\n  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);\\n}\\n\\n.tcn-slim-button {\\n  height: auto;\\n  width: auto;\\n  padding: 0;\\n}\\n\\n.tcn-slim-button[data-size=\\\"sm\\\"] {\\n  min-height: 12px;\\n  min-width: 12px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 10px;\\n    min-width: 10px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"md\\\"] {\\n  min-height: 18px;\\n  min-width: 18px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 14px;\\n    min-width: 14px;\\n  }\\n}\\n\\n.tcn-slim-button[data-size=\\\"lg\\\"] {\\n  min-height: 24px;\\n  min-width: 24px;\\n  padding: 0;\\n  .tcn-icon {\\n    min-height: 20px;\\n    min-width: 20px;\\n  }\\n}\\n\\n/* ===== Materials ===== */\\n\\n/* White on Gray */\\n.material-status-disabled {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 0%, 49.8%;\\n  --material: 0, 0%, 49.8%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Vivid Blue */\\n.material-status-info {\\n  --action: 0, 0%, 100%;\\n  --on-action: 207, 100%, 50%;\\n  --material: 207, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* Navy on Yellow */\\n.material-status-warning {\\n  --action: 213, 35.6%, 34.7%;\\n  --on-action: 60, 100%, 50%;\\n  --material: 60, 100%, 50%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n/* White on Red  */\\n.material-status-error {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 100%, 50%;\\n  --material: 0, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* Navy on Light Grey */\\n.material-async-initial {\\n  --action: 213, 35.6%, 34.7%;\\n  --on-action: 0, 0%, 75.3%;\\n  --material: 0, 0%, 75.3%;\\n  --on-material: 213, 35.6%, 34.7%;\\n}\\n\\n/* White on Loading Blue */\\n.material-async-pending {\\n  --action: 0, 0%, 100%;\\n  --on-action: 207, 100%, 50%;\\n  --material: 207, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Vivid Green */\\n.material-async-success {\\n  --action: 0, 0%, 100%;\\n  --on-action: 120, 100%, 50%;\\n  --material: 120, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n/* White on Red */\\n.material-async-failed {\\n  --action: 0, 0%, 100%;\\n  --on-action: 0, 100%, 50%;\\n  --material: 0, 100%, 50%;\\n  --on-material: 0, 0%, 100%;\\n}\\n\\n.material {\\n  background-color: hsl(var(--material));\\n  color: hsl(var(--on-material));\\n}\\n\\n/* ===== SURFACES ===== */\\n.tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n  .tcn-drag-handle {\\n    cursor: move;\\n  }\\n}\\n\\n.tcn-frame[data-is-veil=\\\"true\\\"] {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n.tcn-list {\\n  gap: var(--gap-medium);\\n  .tcn-item {\\n    height: 24px;\\n    padding: 0px var(--padding-medium);\\n    border-radius: var(--shape-radius-medium);\\n  }\\n}\\n\\n.tcn-veil {\\n  background-color: rgba(0, 0, 0, 0.5);\\n}\\n\\n/* TODO: FIX Borders on modal header and footer -- when there are multiple header/footers */\\n/* MODAL: */\\n.tcn-modal {\\n  --v-inset: var(--padding-large);\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  /* TODO: This should be a variable */\\n  border: 1px solid rgba(170, 170, 170, 1);\\n  overflow: hidden;\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n\\n    :where(.tcn-divider) {\\n      padding: 4px 0;\\n      :where(.tcn-divider-line) {\\n        width: 1.5px;\\n        min-height: 18px;\\n        height: auto;\\n      }\\n    }\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: 32px;\\n    border-bottom: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n\\n    :where(.tcn-button) {\\n      padding: 0;\\n      min-width: 18px;\\n      min-height: 18px;\\n    }\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: 40px;\\n    border-top: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n  }\\n}\\n\\n/* WINDOW: */\\n.tcn-window {\\n  --v-inset: var(--padding-large);\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  /* TODO: This should be a variable */\\n  border: 1px solid rgba(170, 170, 170, 1);\\n  overflow: hidden;\\n\\n  :where(.tcn-typography) {\\n    color: inherit;\\n  }\\n\\n  :where(.tcn-header) {\\n    --material: var(--material-secondary-dark);\\n    --on-material: 0, 0%, 100%;\\n    --action: var(--material-tan);\\n    --on-action: 0, 0%, 100%;\\n    background-color: hsl(var(--material));\\n    color: hsl(var(--on-material));\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n\\n    :where(.tcn-divider) {\\n      padding: 4px 0;\\n      :where(.tcn-divider-line) {\\n        width: 1.5px;\\n        min-height: 18px;\\n        height: auto;\\n      }\\n    }\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: 32px;\\n    border-bottom: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n\\n    :where(.tcn-button) {\\n      padding: 0;\\n      min-width: 18px;\\n      min-height: 18px;\\n    }\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: 40px;\\n    border-top: 1px solid var(--foreground-color-primary);\\n    padding: 0 var(--v-inset);\\n  }\\n}\\n\\n/* PANEL */\\n.tcn-panel {\\n  --v-inset: var(--padding-large);\\n  background-color: var(--background-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  overflow: hidden;\\n\\n  :where(.tcn-header) {\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n\\n    :where(.tcn-title) {\\n      font-weight: 700;\\n    }\\n\\n    :where(.tcn-divider) {\\n      padding: 4px 0;\\n      :where(.tcn-divider-line) {\\n        width: 1.5px;\\n        min-height: 18px;\\n        height: auto;\\n      }\\n    }\\n  }\\n\\n  /* Border appears on body only when it follows header or utility-bar */\\n  :where(.tcn-header) + :where(.tcn-body),\\n  :where(.tcn-utility-bar) + :where(.tcn-body) {\\n    border-top: 1px solid var(--foreground-color-primary);\\n  }\\n\\n  /* Border appears on footer only when it follows body */\\n  :where(.tcn-body) + :where(.tcn-footer) {\\n    border-top: 1px solid var(--foreground-color-primary);\\n  }\\n\\n  :where(.tcn-utility-bar) {\\n    min-height: 32px;\\n    padding: 0 var(--v-inset);\\n  }\\n\\n  :where(.tcn-body) {\\n    padding: 0 var(--v-inset);\\n    gap: var(--gap-medium);\\n  }\\n\\n  :where(.tcn-footer) {\\n    gap: var(--gap-medium);\\n    min-height: 40px;\\n    padding: 0 var(--v-inset);\\n  }\\n}\\n\\n/* Card */\\n.tcn-card {\\n  padding: 0;\\n  gap: 0px;\\n  border: 1px solid var(--foreground-color-primary);\\n  border-radius: var(--shape-radius-medium);\\n  overflow: hidden;\\n  :where(.tcn-header) {\\n    /* TODO: Color header */\\n    min-height: 32px;\\n  }\\n  :where(.tcn-body) {\\n    padding: var(--padding-medium) var(--v-inset);\\n  }\\n}\\n\"","import css from './ergo_theme.css?raw';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}

package/dist/typography/title/title.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 export interface TitleOwnProps {
@@ -15,5 +16,5 @@ export interface TitleOwnProps {
     as?: string;
 }
 export type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;
-export declare function Title({ size, emphasis, hierarchy, color, children, className, style, padStart, padEnd, padBottom, padTop, pad, selectable, as, }: TitleProps): import("react/jsx-runtime").JSX.Element;
+export declare const Title: React.ForwardRefExoticComponent<Omit<TitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 //# sourceMappingURL=title.d.ts.map

package/dist/typography/title/title.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../src/typography/title/title.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAGtE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAElF,wBAAgB,KAAK,CAAC,EACpB,IAAW,EACX,QAAmB,EACnB,SAAqB,EACrB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAU,EACV,QAAQ,EACR,MAAM,EACN,SAAS,EACT,MAAM,EACN,GAAG,EACH,UAAiB,EACjB,EAAE,GACH,EAAE,UAAU,2CAiDZ"}
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../src/typography/title/title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAGtE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAElF,eAAO,MAAM,KAAK,oGAoEhB,CAAC"}

package/dist/typography/title/title.js

@@ -1,37 +1,38 @@
-import { jsx as s } from "react/jsx-runtime";
-import { clsx as u } from "clsx";
-import { s as x } from "../../title.module-B16de2jd.js";
-function A({
-  size: a = "md",
-  emphasis: o = "normal",
-  hierarchy: p = "primary",
-  color: n,
-  children: c,
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { clsx as b } from "clsx";
+import '../../title.css';const I = "_title_64bd0fd", T = { title: I }, N = x(function({
+  size: n = "md",
+  emphasis: m = "normal",
+  hierarchy: c = "primary",
+  color: e,
+  children: p,
   className: g,
   style: i = {},
   padStart: r,
-  padEnd: e,
+  padEnd: a,
   padBottom: f,
   padTop: l,
-  pad: m,
+  pad: d,
   selectable: h = !0,
-  as: d
-}) {
-  let t = d;
-  return d == null && (a === "lg" ? t = "h1" : a === "md" ? t = "h2" : t = "h3"), m && (i.padding = m), r && (i.paddingInlineStart = r), e && (i.paddingInlineEnd = e), l && (i.paddingTop = l), f && (i.paddingBottom = f), n && (i.color = n), /* @__PURE__ */ s(
+  as: o
+}, s) {
+  let t = o;
+  return o == null && (n === "lg" ? t = "h1" : n === "md" ? t = "h2" : t = "h3"), d && (i.padding = d), r && (i.paddingInlineStart = r), a && (i.paddingInlineEnd = a), l && (i.paddingTop = l), f && (i.paddingBottom = f), e && (i.color = e), /* @__PURE__ */ u(
     t,
     {
-      "data-hierarchy": p,
-      "data-emphasis": o,
+      ref: s,
+      "data-hierarchy": c,
+      "data-emphasis": m,
       "data-selectable": h,
-      className: u(x.title, "title", "tcn-typography", "tcn-title", g),
+      className: b(T.title, "title", "tcn-typography", "tcn-title", g),
       style: i,
-      "data-size": a,
-      children: c
+      "data-size": n,
+      children: p
     }
   );
-}
+});
 export {
-  A as Title
+  N as Title
 };
 //# sourceMappingURL=title.js.map

package/dist/typography/title/title.js.map

@@ -1 +1 @@
-{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport function Title({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n  as,\n}: TitleProps) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['title'], 'title', 'tcn-typography', 'tcn-title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Title","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","As","jsx","clsx","styles"],"mappings":";;;AAuBO,SAASA,EAAM;AAAA,EACpB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,IAAAC;AACF,GAAe;AACb,MAAIC,IAAwBD;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXc,IAAK,OACId,MAAS,OAClBc,IAAK,OAELA,IAAK,OAILH,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAY;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWI,EAAKC,EAAO,OAAU,SAAS,kBAAkB,aAAaZ,CAAS;AAAA,MAClF,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(\n  {\n    size = 'md',\n    emphasis = 'normal',\n    hierarchy = 'primary',\n    color,\n    children,\n    className,\n    style = {},\n    padStart,\n    padEnd,\n    padBottom,\n    padTop,\n    pad,\n    selectable = true,\n    as,\n  },\n  ref\n) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      ref={ref}\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['title'], 'title', 'tcn-typography', 'tcn-title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["Title","forwardRef","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","ref","As","jsx","clsx","styles"],"mappings":";;;8CAuBaA,IAAQC,EAA2C,SAC9D;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,IAAAC;AACF,GACAC,GACA;AACA,MAAIC,IAAwBF;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXe,IAAK,OACIf,MAAS,OAClBe,IAAK,OAELA,IAAK,OAILJ,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAa;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWK,EAAKC,EAAO,OAAU,SAAS,kBAAkB,aAAab,CAAS;AAAA,MAClF,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -0,0 +1,4 @@
+import { DragContainer } from './types.js';
+export declare const DragContainerContext: import('react').Context<DragContainer>;
+export declare function useDragContainer(): DragContainer;
+//# sourceMappingURL=context.d.ts.map

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

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

package/dist/utils/dnd/context.js

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

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

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

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface DraggableProps {
+    children: React.ReactElement;
+    draggable?: boolean;
+}
+export declare const Draggable: React.FC<DraggableProps>;
+//# sourceMappingURL=draggable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/draggable/draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4B9C,CAAC"}

package/dist/utils/dnd/draggable/draggable.js

@@ -0,0 +1,27 @@
+import { jsx as s } from "react/jsx-runtime";
+import i, { useMemo as n } from "react";
+import { DragContainerContext as g } from "../context.js";
+import l from "clsx";
+import { useMakeDragContainer as p } from "../hooks/use_drag_container.js";
+import '../../../draggable.css';const c = "_draggable_db40376", m = { draggable: c }, y = ({
+  children: a,
+  draggable: t = !0
+}) => {
+  const o = p({}), r = n(
+    () => ({
+      "--position-x": `${o.position.x}px`,
+      "--position-y": `${o.position.y}px`
+    }),
+    [o.position]
+  ), e = i.cloneElement(a, {
+    className: l("tcn-draggable", m.draggable, a.props.className),
+    style: { ...r, ...a.props.style },
+    "data-is-dragging": o.isDragging,
+    "data-is-draggable": t
+  });
+  return /* @__PURE__ */ s(g.Provider, { value: o, children: e });
+};
+export {
+  y as Draggable
+};
+//# sourceMappingURL=draggable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.js","sources":["../../../../src/utils/dnd/draggable/draggable.tsx"],"sourcesContent":["import React, { useMemo, type CSSProperties } from 'react';\n\nimport { DragContainerContext } from '../context.js';\nimport clsx from 'clsx';\nimport { useMakeDragContainer } from '../hooks/use_drag_container.js';\n\nimport styles from './draggable.module.css';\n\nexport interface DraggableProps {\n  children: React.ReactElement;\n  draggable?: boolean;\n}\n\nexport const Draggable: React.FC<DraggableProps> = ({\n  children,\n  draggable: isDraggable = true,\n}) => {\n  const context = useMakeDragContainer({});\n\n  const cssVariables = useMemo(\n    () =>\n      ({\n        '--position-x': `${context.position.x}px`,\n        '--position-y': `${context.position.y}px`,\n      }) as CSSProperties,\n\n    [context.position]\n  );\n\n  const clonedChildren = React.cloneElement(children, {\n    className: clsx('tcn-draggable', styles.draggable, children.props.className),\n    style: { ...cssVariables, ...children.props.style },\n    'data-is-dragging': context.isDragging,\n    'data-is-draggable': isDraggable,\n  });\n\n  return (\n    <DragContainerContext.Provider value={context}>\n      {clonedChildren}\n    </DragContainerContext.Provider>\n  );\n};\n"],"names":["Draggable","children","isDraggable","context","useMakeDragContainer","cssVariables","useMemo","clonedChildren","React","clsx","styles","DragContainerContext"],"mappings":";;;;;sDAaaA,IAAsC,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,WAAWC,IAAc;AAC3B,MAAM;AACJ,QAAMC,IAAUC,EAAqB,EAAE,GAEjCC,IAAeC;AAAA,IACnB,OACG;AAAA,MACC,gBAAgB,GAAGH,EAAQ,SAAS,CAAC;AAAA,MACrC,gBAAgB,GAAGA,EAAQ,SAAS,CAAC;AAAA,IAAA;AAAA,IAGzC,CAACA,EAAQ,QAAQ;AAAA,EAAA,GAGbI,IAAiBC,EAAM,aAAaP,GAAU;AAAA,IAClD,WAAWQ,EAAK,iBAAiBC,EAAO,WAAWT,EAAS,MAAM,SAAS;AAAA,IAC3E,OAAO,EAAE,GAAGI,GAAc,GAAGJ,EAAS,MAAM,MAAA;AAAA,IAC5C,oBAAoBE,EAAQ;AAAA,IAC5B,qBAAqBD;AAAA,EAAA,CACtB;AAED,2BACGS,EAAqB,UAArB,EAA8B,OAAOR,GACnC,UAAAI,GACH;AAEJ;"}

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface DragHandleProps {
+    children: React.ReactElement;
+}
+export declare const DragHandle: React.FC<DragHandleProps>;
+//# sourceMappingURL=handle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../src/utils/dnd/handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsBhD,CAAC"}

package/dist/utils/dnd/handle.js

@@ -0,0 +1,22 @@
+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);
+  u(() => {
+    if (r.current != null)
+      return t(r), () => {
+        r.current != null && n(r);
+      };
+  }, [t, n]);
+  const o = m(r, e.props.ref);
+  return s.cloneElement(e, {
+    className: a("tcn-drag-handle", e.props.className),
+    ref: o
+  });
+};
+export {
+  d as DragHandle
+};
+//# sourceMappingURL=handle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"handle.js","sources":["../../../src/utils/dnd/handle.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useDragContainer } from './context.js';\nimport { useForkRef } from '../hooks/use_fork_ref.js';\n\nexport interface DragHandleProps {\n  children: React.ReactElement;\n}\n\nexport const DragHandle: React.FC<DragHandleProps> = ({ children }) => {\n  const { registerHandle, unregisterHandle } = useDragContainer();\n  const ref = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (ref.current == null) {\n      return;\n    }\n    registerHandle(ref);\n    return () => {\n      if (ref.current == null) {\n        return;\n      }\n      unregisterHandle(ref);\n    };\n  }, [registerHandle, unregisterHandle]);\n\n  const mergedRef = useForkRef(ref, children.props.ref);\n  return React.cloneElement(children, {\n    className: clsx('tcn-drag-handle', children.props.className),\n    ref: mergedRef,\n  });\n};\n"],"names":["DragHandle","children","registerHandle","unregisterHandle","useDragContainer","ref","useRef","useEffect","mergedRef","useForkRef","React","clsx"],"mappings":";;;;AASO,MAAMA,IAAwC,CAAC,EAAE,UAAAC,QAAe;AACrE,QAAM,EAAE,gBAAAC,GAAgB,kBAAAC,EAAA,IAAqBC,EAAA,GACvCC,IAAMC,EAA2B,IAAI;AAE3C,EAAAC,EAAU,MAAM;AACd,QAAIF,EAAI,WAAW;AAGnB,aAAAH,EAAeG,CAAG,GACX,MAAM;AACX,QAAIA,EAAI,WAAW,QAGnBF,EAAiBE,CAAG;AAAA,MACtB;AAAA,EACF,GAAG,CAACH,GAAgBC,CAAgB,CAAC;AAErC,QAAMK,IAAYC,EAAWJ,GAAKJ,EAAS,MAAM,GAAG;AACpD,SAAOS,EAAM,aAAaT,GAAU;AAAA,IAClC,WAAWU,EAAK,mBAAmBV,EAAS,MAAM,SAAS;AAAA,IAC3D,KAAKO;AAAA,EAAA,CACN;AACH;"}

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

@@ -0,0 +1,7 @@
+import { Position } from '../../index.js';
+import { DragContainer } from '../types.js';
+export interface UseDragContainerOptions {
+    initialPosition?: Position;
+}
+export declare function useMakeDragContainer(options: UseDragContainerOptions): DragContainer;
+//# sourceMappingURL=use_drag_container.d.ts.map

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

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

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

@@ -0,0 +1,30 @@
+import { useState as n, 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);
+  k({
+    handles: c,
+    startDragCallback: () => {
+      i(!0);
+    },
+    dragCallback: (e, t) => {
+      g({
+        x: r.current.x + e,
+        y: r.current.y + t
+      });
+    },
+    endDragCallback: () => {
+      i(!1), r.current = s;
+    }
+  });
+  const f = o((e) => {
+    a((t) => [...t, e]);
+  }, []), d = o((e) => {
+    a((t) => t.filter((D) => D !== e));
+  }, []);
+  return { registerHandle: f, unregisterHandle: d, position: s, isDragging: u };
+}
+export {
+  m as useMakeDragContainer
+};
+//# sourceMappingURL=use_drag_container.js.map

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

@@ -0,0 +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;"}

package/dist/utils/{hooks → dnd/hooks}/use_draggable.d.ts

@@ -1,8 +1,8 @@
-interface DraggableOptions {
+export interface UseDraggableOptions {
     startDragCallback: (startX: number, startY: number) => void;
     dragCallback: (deltaX: number, deltaY: number, startX: number, startY: number) => void;
     endDragCallback: (deltaX: number, deltaY: number, startX: number, startY: number) => void;
+    handles?: React.RefObject<HTMLElement>[] | React.RefObject<HTMLElement>;
 }
-export declare function useDraggable(options: DraggableOptions): import('react').MutableRefObject<HTMLElement | null>;
-export {};
+export declare function useDraggable(options: UseDraggableOptions): void;
 //# sourceMappingURL=use_draggable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use_draggable.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/hooks/use_draggable.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvF,eAAe,EAAE,CACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,KACX,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CACzE;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,QAiExD"}

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

@@ -0,0 +1,41 @@
+import { useRef as s, useEffect as f } from "react";
+function g(t) {
+  const m = s(t.startDragCallback);
+  m.current = t.startDragCallback;
+  const i = s(t.dragCallback);
+  i.current = t.dragCallback;
+  const v = s(t.endDragCallback);
+  v.current = t.endDragCallback, f(() => {
+    const r = t.handles;
+    if (r === void 0) return;
+    let n = 0, a = 0;
+    function d(e) {
+      const l = e.clientX - n, u = e.clientY - a;
+      i.current(l, u, n, a);
+    }
+    function o(e) {
+      const l = e.clientX !== void 0 ? e.clientX - n : 0, u = e.clientY !== void 0 ? e.clientY - a : 0;
+      v.current(l, u, n, a), document.body.removeEventListener("mousemove", d), document.body.removeEventListener("mouseup", o), document.body.removeEventListener("mouseleave", o);
+    }
+    function c(e) {
+      n = e.clientX, a = e.clientY, m.current(n, a), document.body.addEventListener("mousemove", d), document.body.addEventListener("mouseup", o), document.body.addEventListener("mouseleave", o);
+    }
+    if (Array.isArray(r))
+      for (const e of r)
+        e?.current?.addEventListener("mousedown", c);
+    else
+      r?.current?.addEventListener("mousedown", c);
+    return () => {
+      if (Array.isArray(r))
+        for (const e of r)
+          e?.current?.removeEventListener("mousedown", c);
+      else
+        r?.current?.removeEventListener("mousedown", c);
+      document.body.removeEventListener("mousemove", d), document.body.removeEventListener("mouseup", o), document.body.removeEventListener("mouseleave", o);
+    };
+  }, [t.handles]);
+}
+export {
+  g as useDraggable
+};
+//# sourceMappingURL=use_draggable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use_draggable.js","sources":["../../../../src/utils/dnd/hooks/use_draggable.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport interface UseDraggableOptions {\n  startDragCallback: (startX: number, startY: number) => void;\n  dragCallback: (deltaX: number, deltaY: number, startX: number, startY: number) => void;\n  endDragCallback: (\n    deltaX: number,\n    deltaY: number,\n    startX: number,\n    startY: number\n  ) => void;\n  handles?: React.RefObject<HTMLElement>[] | React.RefObject<HTMLElement>;\n}\n\nexport function useDraggable(options: UseDraggableOptions) {\n  const startDragCallbackRef = useRef(options.startDragCallback);\n  startDragCallbackRef.current = options.startDragCallback;\n  const dragCallbackRef = useRef(options.dragCallback);\n  dragCallbackRef.current = options.dragCallback;\n  const endDragCallbackRef = useRef(options.endDragCallback);\n  endDragCallbackRef.current = options.endDragCallback;\n\n  useEffect(() => {\n    const handles = options.handles;\n    if (handles === undefined) return;\n    let startX = 0;\n    let startY = 0;\n\n    function drag(event: MouseEvent) {\n      const deltaX = event.clientX - startX;\n      const deltaY = event.clientY - startY;\n\n      dragCallbackRef.current(deltaX, deltaY, startX, startY);\n    }\n\n    function endDrag(event: MouseEvent) {\n      const deltaX = event.clientX !== undefined ? event.clientX - startX : 0;\n      const deltaY = event.clientY !== undefined ? event.clientY - startY : 0;\n      endDragCallbackRef.current(deltaX, deltaY, startX, startY);\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseleave', endDrag);\n    }\n\n    function startDrag(event: MouseEvent) {\n      startX = event.clientX;\n      startY = event.clientY;\n\n      startDragCallbackRef.current(startX, startY);\n\n      document.body.addEventListener('mousemove', drag);\n      document.body.addEventListener('mouseup', endDrag);\n      document.body.addEventListener('mouseleave', endDrag);\n    }\n\n    if (Array.isArray(handles)) {\n      for (const element of handles) {\n        if (element != null) {\n          element.current?.addEventListener('mousedown', startDrag);\n        }\n      }\n    } else {\n      handles?.current?.addEventListener('mousedown', startDrag);\n    }\n    return () => {\n      if (Array.isArray(handles)) {\n        for (const element of handles) {\n          if (element != null) {\n            element.current?.removeEventListener('mousedown', startDrag);\n          }\n        }\n      } else {\n        handles?.current?.removeEventListener('mousedown', startDrag);\n      }\n      document.body.removeEventListener('mousemove', drag);\n      document.body.removeEventListener('mouseup', endDrag);\n      document.body.removeEventListener('mouseleave', endDrag);\n    };\n  }, [options.handles]);\n}\n"],"names":["useDraggable","options","startDragCallbackRef","useRef","dragCallbackRef","endDragCallbackRef","useEffect","handles","startX","startY","drag","event","deltaX","deltaY","endDrag","startDrag","element"],"mappings":";AAcO,SAASA,EAAaC,GAA8B;AACzD,QAAMC,IAAuBC,EAAOF,EAAQ,iBAAiB;AAC7D,EAAAC,EAAqB,UAAUD,EAAQ;AACvC,QAAMG,IAAkBD,EAAOF,EAAQ,YAAY;AACnD,EAAAG,EAAgB,UAAUH,EAAQ;AAClC,QAAMI,IAAqBF,EAAOF,EAAQ,eAAe;AACzD,EAAAI,EAAmB,UAAUJ,EAAQ,iBAErCK,EAAU,MAAM;AACd,UAAMC,IAAUN,EAAQ;AACxB,QAAIM,MAAY,OAAW;AAC3B,QAAIC,IAAS,GACTC,IAAS;AAEb,aAASC,EAAKC,GAAmB;AAC/B,YAAMC,IAASD,EAAM,UAAUH,GACzBK,IAASF,EAAM,UAAUF;AAE/B,MAAAL,EAAgB,QAAQQ,GAAQC,GAAQL,GAAQC,CAAM;AAAA,IACxD;AAEA,aAASK,EAAQH,GAAmB;AAClC,YAAMC,IAASD,EAAM,YAAY,SAAYA,EAAM,UAAUH,IAAS,GAChEK,IAASF,EAAM,YAAY,SAAYA,EAAM,UAAUF,IAAS;AACtE,MAAAJ,EAAmB,QAAQO,GAAQC,GAAQL,GAAQC,CAAM,GACzD,SAAS,KAAK,oBAAoB,aAAaC,CAAI,GACnD,SAAS,KAAK,oBAAoB,WAAWI,CAAO,GACpD,SAAS,KAAK,oBAAoB,cAAcA,CAAO;AAAA,IACzD;AAEA,aAASC,EAAUJ,GAAmB;AACpC,MAAAH,IAASG,EAAM,SACfF,IAASE,EAAM,SAEfT,EAAqB,QAAQM,GAAQC,CAAM,GAE3C,SAAS,KAAK,iBAAiB,aAAaC,CAAI,GAChD,SAAS,KAAK,iBAAiB,WAAWI,CAAO,GACjD,SAAS,KAAK,iBAAiB,cAAcA,CAAO;AAAA,IACtD;AAEA,QAAI,MAAM,QAAQP,CAAO;AACvB,iBAAWS,KAAWT;AACpB,QACES,GAAQ,SAAS,iBAAiB,aAAaD,CAAS;AAAA;AAI5D,MAAAR,GAAS,SAAS,iBAAiB,aAAaQ,CAAS;AAE3D,WAAO,MAAM;AACX,UAAI,MAAM,QAAQR,CAAO;AACvB,mBAAWS,KAAWT;AACpB,UACES,GAAQ,SAAS,oBAAoB,aAAaD,CAAS;AAAA;AAI/D,QAAAR,GAAS,SAAS,oBAAoB,aAAaQ,CAAS;AAE9D,eAAS,KAAK,oBAAoB,aAAaL,CAAI,GACnD,SAAS,KAAK,oBAAoB,WAAWI,CAAO,GACpD,SAAS,KAAK,oBAAoB,cAAcA,CAAO;AAAA,IACzD;AAAA,EACF,GAAG,CAACb,EAAQ,OAAO,CAAC;AACtB;"}

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

@@ -0,0 +1,10 @@
+export interface DragContainer {
+    registerHandle: (handle: React.RefObject<HTMLElement>) => void;
+    unregisterHandle: (handle: React.RefObject<HTMLElement>) => void;
+    isDragging: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/dist/utils/dnd/types.js

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

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

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

package/dist/utils/index.d.ts

@@ -2,7 +2,7 @@ export * from './focus_redirect.js';
 export * from './click_away_listener.js';
 export * from './scroll_away_listener.js';
 export * from './hooks/make_context_hook.js';
-export * from './hooks/use_draggable.js';
+export * from './dnd/hooks/use_draggable.js';
 export * from './hooks/use_fork_ref.js';
 export * from './hooks/use_media_query.js';
 export * from './hooks/use_resize_observer.js';

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,0BAA0B,CAAC;AACzC,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,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"}

package/dist/utils/index.js

@@ -2,7 +2,7 @@ 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 "./hooks/use_draggable.js";
+import { useDraggable as i } from "./dnd/hooks/use_draggable.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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -41,6 +41,12 @@
       "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",
@@ -128,8 +134,8 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "react-color": "^2.19.3",
-    "@tcn/icons": "2.1.1",
-    "@tcn/state": "1.0.1"
+    "@tcn/state": "1.0.1",
+    "@tcn/icons": "2.1.1"
   },
   "scripts": {
     "build": "vite build",