@tcn/ui 0.0.4 → 0.2.0

package/dist/tokens/bubble/bubble.js

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

package/dist/tokens/bubble/bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.js","sources":["../../../src/tokens/bubble/bubble.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport styles from './bubble.module.css';\nimport { theme } from '../../themes/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Size } from '../../utils/index.js';\n\nexport interface BubbleProps extends HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  backgroundColor?: string;\n  textColor?: string;\n  elevate?: boolean;\n  size?: Size;\n}\n\nexport const Bubble = React.forwardRef(function Bubble(\n  {\n    children,\n    className,\n    style: defaultStyle,\n    backgroundColor = theme.accentColor,\n    textColor = '#fff',\n    size = 'md',\n    elevate = false,\n    ...props\n  }: BubbleProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const style = {\n    '--bubble-text-color': textColor,\n    '--bubble-color': backgroundColor,\n    ...defaultStyle,\n  } as React.CSSProperties;\n\n  return (\n    <HStack\n      inline\n      className={clsx(styles.bubble, 'bubble', className)}\n      width=\"auto\"\n      height=\"auto\"\n      ref={ref}\n      style={style}\n      hAlign=\"center\"\n      vAlign=\"center\"\n      data-size={size}\n      data-elevate={elevate}\n      padding=\"4px\"\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Bubble","React","children","className","defaultStyle","backgroundColor","theme","textColor","size","elevate","props","ref","style","jsx","HStack","clsx","styles"],"mappings":";;;;;gDAeaA,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAOC;AAAA,EACP,iBAAAC,IAAkBC,EAAM;AAAA,EACxB,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAQ;AAAA,IACZ,uBAAuBL;AAAA,IACvB,kBAAkBF;AAAA,IAClB,GAAGD;AAAA,EAAA;AAGL,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,WAAWC,EAAKC,EAAO,QAAQ,UAAUb,CAAS;AAAA,MAClD,OAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAAQ;AAAA,MACA,OAAAC;AAAA,MACA,QAAO;AAAA,MACP,QAAO;AAAA,MACP,aAAWJ;AAAA,MACX,gBAAcC;AAAA,MACd,SAAQ;AAAA,MACP,GAAGC;AAAA,MAEH,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"bubble.js","sources":["../../../src/tokens/bubble/bubble.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport styles from './bubble.module.css';\nimport { theme } from '../../themes/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Size } from '../../utils/index.js';\n\nexport interface BubbleProps extends HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  backgroundColor?: string;\n  textColor?: string;\n  elevate?: boolean;\n  size?: Size;\n}\n\nexport const Bubble = React.forwardRef(function Bubble(\n  {\n    children,\n    className,\n    style: defaultStyle,\n    backgroundColor = theme.accentColor,\n    textColor = '#fff',\n    size = 'md',\n    elevate = false,\n    ...props\n  }: BubbleProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const style = {\n    '--bubble-text-color': textColor,\n    '--bubble-color': backgroundColor,\n    ...defaultStyle,\n  } as React.CSSProperties;\n\n  return (\n    <HStack\n      inline\n      className={clsx(styles.bubble, 'bubble', className)}\n      width=\"auto\"\n      height=\"auto\"\n      ref={ref}\n      style={style}\n      hAlign=\"center\"\n      vAlign=\"center\"\n      data-size={size}\n      data-elevate={elevate}\n      padding=\"4px\"\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Bubble","React","children","className","defaultStyle","backgroundColor","theme","textColor","size","elevate","props","ref","style","jsx","HStack","clsx","styles"],"mappings":";;;;;;gDAeaA,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAOC;AAAA,EACP,iBAAAC,IAAkBC,EAAM;AAAA,EACxB,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAQ;AAAA,IACZ,uBAAuBL;AAAA,IACvB,kBAAkBF;AAAA,IAClB,GAAGD;AAAA,EAAA;AAGL,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,WAAWC,EAAKC,EAAO,QAAQ,UAAUb,CAAS;AAAA,MAClD,OAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAAQ;AAAA,MACA,OAAAC;AAAA,MACA,QAAO;AAAA,MACP,QAAO;AAAA,MACP,aAAWJ;AAAA,MACX,gBAAcC;AAAA,MACd,SAAQ;AAAA,MACP,GAAGC;AAAA,MAEH,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/tokens/chip/chip.js

@@ -1,15 +1,16 @@
-import { jsx as p } from "react/jsx-runtime";
-import { HStack as m } from "../../stacks/h_stack.js";
+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 '../../chip.css';const l = "_chip_35f6f0b", a = { chip: l }, w = h.forwardRef(function({ children: t, style: o, className: i, color: r = s.accentColor, ...c }, e) {
-  const n = {
+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) {
+  const p = {
     "--chip-color": r,
     ...o
   };
-  return /* @__PURE__ */ p(
-    m,
+  return /* @__PURE__ */ m(
+    n,
     {
       ref: e,
       inline: !0,
@@ -17,13 +18,13 @@ import '../../chip.css';const l = "_chip_35f6f0b", a = { chip: l }, w = h.forwar
       height: "auto",
       vAlign: "center",
       className: f(a.chip, "chip", i),
-      style: n,
+      style: p,
       ...c,
       children: t
     }
   );
 });
 export {
-  w as Chip
+  R as Chip
 };
 //# sourceMappingURL=chip.js.map

package/dist/tokens/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../src/tokens/chip/chip.tsx"],"sourcesContent":["import { HStack, HStackProps } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './chip.module.css';\nimport { theme } from '../../themes/index.js';\n\nexport interface ChipProps extends HStackProps {\n  children?: React.ReactNode;\n  color?: string;\n  disabled?: boolean;\n}\n\nexport const Chip = React.forwardRef(function Chip(\n  { children, style, className, color = theme.accentColor, ...props }: ChipProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    '--chip-color': color,\n    ...style,\n  };\n\n  return (\n    <HStack\n      ref={ref}\n      inline\n      width=\"auto\"\n      height=\"auto\"\n      vAlign=\"center\"\n      className={clsx(styles.chip, 'chip', className)}\n      style={finalStyle}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Chip","React","children","style","className","color","theme","props","ref","finalStyle","jsx","HStack","clsx","styles"],"mappings":";;;;;4CAYaA,IAAOC,EAAM,WAAW,SACnC,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,OAAAC,IAAQC,EAAM,aAAa,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,gBAAgBJ;AAAA,IAChB,GAAGF;AAAA,EAAA;AAGL,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,QAAO;AAAA,MACP,WAAWI,EAAKC,EAAO,MAAM,QAAQT,CAAS;AAAA,MAC9C,OAAOK;AAAA,MACN,GAAGF;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"chip.js","sources":["../../../src/tokens/chip/chip.tsx"],"sourcesContent":["import { HStack, HStackProps } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './chip.module.css';\nimport { theme } from '../../themes/index.js';\n\nexport interface ChipProps extends HStackProps {\n  children?: React.ReactNode;\n  color?: string;\n  disabled?: boolean;\n}\n\nexport const Chip = React.forwardRef(function Chip(\n  { children, style, className, color = theme.accentColor, ...props }: ChipProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    '--chip-color': color,\n    ...style,\n  };\n\n  return (\n    <HStack\n      ref={ref}\n      inline\n      width=\"auto\"\n      height=\"auto\"\n      vAlign=\"center\"\n      className={clsx(styles.chip, 'chip', className)}\n      style={finalStyle}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Chip","React","children","style","className","color","theme","props","ref","finalStyle","jsx","HStack","clsx","styles"],"mappings":";;;;;;4CAYaA,IAAOC,EAAM,WAAW,SACnC,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,OAAAC,IAAQC,EAAM,aAAa,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,gBAAgBJ;AAAA,IAChB,GAAGF;AAAA,EAAA;AAGL,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,QAAO;AAAA,MACP,WAAWI,EAAKC,EAAO,MAAM,QAAQT,CAAS;AAAA,MAC9C,OAAOK;AAAA,MACN,GAAGF;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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",
+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: n,
-  children: g,
-  className: h,
+  color: e,
+  children: p,
+  className: g,
   style: i = {},
   padStart: r,
-  padEnd: e,
+  padEnd: a,
   padBottom: f,
   padTop: l,
-  pad: m,
-  selectable: p = !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(
+  pad: d,
+  selectable: h = !0,
+  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,
     {
+      ref: s,
       "data-hierarchy": c,
-      "data-emphasis": o,
-      "data-selectable": p,
-      className: u(x.title, "title", "tcn-title", h),
+      "data-emphasis": m,
+      "data-selectable": h,
+      className: b(T.title, "title", "tcn-typography", "tcn-title", g),
       style: i,
-      "data-size": a,
-      children: g
+      "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-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,aAAaZ,CAAS;AAAA,MAChE,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.0.4",
+  "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/state": "1.0.0",
-    "@tcn/icons": "2.1.0"
+    "@tcn/state": "1.0.1",
+    "@tcn/icons": "2.1.1"
   },
   "scripts": {
     "build": "vite build",

package/src/actions/button/base_button/base_button.tsx

@@ -27,7 +27,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
       style,
       color,
       hierarchy = 'secondary',
-      size = 'medium',
+      size = 'md',
       onTouchStart,
       onContextMenu,
       ...props
@@ -68,7 +68,12 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
         data-hierarchy={hierarchy}
         data-size={size}
         data-is-disabled={Boolean(props.disabled)}
-        className={clsx(styles['base-button'], 'base-button', className)}
+        className={clsx(
+          styles['base-button'],
+          'tcn-interactive',
+          'tcn-base-button',
+          className
+        )}
         style={finalStyle}
         onTouchStart={handleTouchStart}
         onContextMenu={handleContextMenu}