@tcn/ui 0.2.0 → 0.3.1

package/dist/showcase.css

@@ -0,0 +1 @@
+._showcase_57a1682{border:1px solid var(--docs-border-color, #e5e7eb);background-color:var(--docs-card-bg, #fff);border-radius:8px;overflow:hidden;height:fit-content}._toolbar_944adb6{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}._header_7789d59{min-height:48px;background-color:var(--docs-header-bg, #fafafa)}._title_034d539{font-size:14px;font-weight:600;color:var(--docs-text-color, #1f2937);margin:0!important}._subtitle_2478529{background-color:var(--docs-header-bg, #fafafa);flex-grow:1}._documentation_1ba3d31{color:var(--docs-text-muted, #6b7280);padding:0 16px}._description_4ed9c28{font-size:12px;color:var(--docs-text-muted, #6b7280)}._content_2c42bfd{min-height:200px;background-color:red;width:100%;border:none!important;box-shadow:none!important;margin:0!important;border-radius:0!important}._content_2c42bfd .docs-story{min-height:200px!important}

package/dist/stacks/box/box.js

@@ -1,6 +1,6 @@
 import { jsxs as h, jsx as a } from "react/jsx-runtime";
-import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import O, { useRef as oo } from "react";
 import { useForkRef as ro } from "../../utils/hooks/use_fork_ref.js";
@@ -15,18 +15,18 @@ import { clsx as mo } from "clsx";
 import { isCustomSizeProp as y } from "../utils/isCustomSizeProp.js";
 import { removeUndefinedProperties as no } from "../utils/remove_undefined_properties.js";
 import { s as k } from "../../stack.module-CBV1f12Z.js";
-const _o = O.forwardRef(function({
+const Yo = O.forwardRef(function({
   style: v,
   className: P,
-  as: H = "div",
-  children: V,
+  as: _ = "div",
+  children: H,
   width: r = "default",
-  minWidth: b,
-  maxWidth: j,
+  minWidth: V,
+  maxWidth: b,
   height: t = "default",
-  minHeight: w,
-  maxHeight: Y,
-  zIndex: _,
+  minHeight: j,
+  maxHeight: w,
+  zIndex: Y,
   padding: A,
   paddingInline: B,
   paddingBlock: C,
@@ -47,22 +47,22 @@ const _o = O.forwardRef(function({
   enableResizeOnLeft: c = !1,
   enableResizeOnRight: p = !1,
   onWidthResize: e,
-  onHeightResize: d,
+  onHeightResize: i,
   onWidthResizeEnd: f,
   onHeightResizeEnd: u,
   horizontalHandleProps: x,
-  verticalHandleProps: i,
+  verticalHandleProps: d,
   ...X
 }, Z) {
-  const $ = H, o = oo(null), L = ro(Z, o), R = l || n || c || p, T = m || s, z = R, E = T, g = z && r === "flex", S = E && t === "flex", F = !g && !S && (r === "flex" || t === "flex");
+  const $ = _, o = oo(null), L = ro(Z, o), R = l || n || c || p, T = m || s, z = R, E = T, g = z && r === "flex", S = E && t === "flex", F = !g && !S && (r === "flex" || t === "flex");
   g && (r = "100%", console.warn("You cannot have a resizable box and flex simultaneously")), S && (t = "auto", console.warn("You cannot have a resizable box and flex simultaneously"));
   const W = {
     width: y(r) ? void 0 : r,
-    minWidth: b,
-    maxWidth: j,
+    minWidth: V,
+    maxWidth: b,
     height: y(t) ? void 0 : t,
-    minHeight: w,
-    maxHeight: Y,
+    minHeight: j,
+    maxHeight: w,
     padding: A,
     paddingInline: B,
     paddingBlock: C,
@@ -76,7 +76,7 @@ const _o = O.forwardRef(function({
     overflow: K,
     overflowX: M,
     overflowY: Q,
-    zIndex: _
+    zIndex: Y
   };
   return /* @__PURE__ */ h(
     $,
@@ -103,11 +103,11 @@ const _o = O.forwardRef(function({
       ),
       ...X,
       children: [
-        V,
+        H,
         s && /* @__PURE__ */ a(
           lo,
           {
-            onHeightResize: d,
+            onHeightResize: i,
             onHeightResizeEnd: u,
             targetRef: o,
             handleProps: x
@@ -116,10 +116,10 @@ const _o = O.forwardRef(function({
         m && /* @__PURE__ */ a(
           eo,
           {
-            onHeightResize: d,
+            onHeightResize: i,
             onHeightResizeEnd: u,
             targetRef: o,
-            handleProps: i
+            handleProps: d
           }
         ),
         n && /* @__PURE__ */ a(
@@ -146,7 +146,7 @@ const _o = O.forwardRef(function({
             onWidthResize: e,
             onWidthResizeEnd: f,
             targetRef: o,
-            handleProps: i
+            handleProps: d
           }
         ),
         p && /* @__PURE__ */ a(
@@ -155,7 +155,7 @@ const _o = O.forwardRef(function({
             onWidthResize: e,
             onWidthResizeEnd: f,
             targetRef: o,
-            handleProps: i
+            handleProps: d
           }
         )
       ]
@@ -163,6 +163,6 @@ const _o = O.forwardRef(function({
   );
 });
 export {
-  _o as Box
+  Yo as Box
 };
 //# sourceMappingURL=box.js.map

package/dist/stacks/h_collapsible_box.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import t, { useLayoutEffect as p } from "react";
-import "../utils/focus_redirect.js";
 import "../utils/click_away_listener.js";
+import "../utils/focus_redirect.js";
 import "../utils/scroll_away_listener.js";
 import { useForkRef as d } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";
@@ -9,7 +9,7 @@ import { clsx as u } from "clsx";
 import { Box as R } from "./box/box.js";
 import { s as z } from "../collapsible_box.module-BiS98xXA.js";
 import { useIsCollapsed as x } from "./utils/use_is_collapsed.js";
-const F = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e }, a) {
+const j = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e }, a) {
   const s = t.useRef(null), n = d(a, s), [c, r] = t.useState(!1);
   p(() => {
     s.current?.style.setProperty("--collapsible-size", i);
@@ -35,6 +35,6 @@ const F = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e
   );
 });
 export {
-  F as HCollapsibleBox
+  j as HCollapsibleBox
 };
 //# sourceMappingURL=h_collapsible_box.js.map

package/dist/stacks/h_stack.js

@@ -1,10 +1,10 @@
-import { jsx as K } from "react/jsx-runtime";
-import { clsx as L } from "clsx";
-import M from "react";
-import { removeUndefinedProperties as O } from "./utils/remove_undefined_properties.js";
-import { s as Q } from "../stack.module-CBV1f12Z.js";
+import { jsx as J } from "react/jsx-runtime";
+import { clsx as K } from "clsx";
+import L from "react";
+import { removeUndefinedProperties as M } from "./utils/remove_undefined_properties.js";
+import { s as O } from "../stack.module-CBV1f12Z.js";
 import { isCustomSizeProp as r } from "./utils/isCustomSizeProp.js";
-const tt = M.forwardRef(function({
+const tt = L.forwardRef(function({
   as: s = "div",
   children: i,
   style: n,
@@ -15,10 +15,10 @@ const tt = M.forwardRef(function({
   allowFlow: c,
   width: t = "default",
   minWidth: p,
-  maxWidth: h,
+  maxWidth: u,
   height: a = "default",
-  growWeight: k,
-  shrinkWeight: u,
+  growWeight: h,
+  shrinkWeight: k,
   minHeight: g,
   maxHeight: v,
   padding: y,
@@ -30,29 +30,29 @@ const tt = M.forwardRef(function({
   paddingBottom: P,
   margin: R,
   marginBlock: W,
-  marginInline: j,
-  marginInlineStart: z,
-  marginInlineEnd: A,
-  marginTop: C,
-  marginBottom: N,
-  zIndex: U,
+  marginInline: _,
+  marginInlineStart: j,
+  marginInlineEnd: z,
+  marginTop: A,
+  marginBottom: C,
+  zIndex: N,
   overflowX: o,
   overflowY: e,
-  gap: b,
-  rowGap: q,
-  columnGap: D,
-  ...E
-}, F) {
-  const G = s, I = {
+  gap: U,
+  rowGap: b,
+  columnGap: q,
+  ...D
+}, E) {
+  const F = s, G = {
     minWidth: p,
     width: r(t) ? void 0 : t,
-    maxWidth: h,
+    maxWidth: u,
     minHeight: g,
     height: r(a) ? void 0 : a,
     maxHeight: v,
-    flexGrow: k,
-    flexShrink: u,
-    zIndex: U,
+    flexGrow: h,
+    flexShrink: k,
+    zIndex: N,
     overflowX: o,
     overflowY: e,
     padding: y,
@@ -64,24 +64,24 @@ const tt = M.forwardRef(function({
     paddingBottom: P,
     margin: R,
     marginBlock: W,
-    marginInline: j,
-    marginInlineStart: z,
-    marginInlineEnd: A,
-    marginTop: C,
-    marginBottom: N,
-    gap: b,
-    rowGap: q,
-    columnGap: D
-  }, J = {
-    ...O(I),
+    marginInline: _,
+    marginInlineStart: j,
+    marginInlineEnd: z,
+    marginTop: A,
+    marginBottom: C,
+    gap: U,
+    rowGap: b,
+    columnGap: q
+  }, I = {
+    ...M(G),
     ...n
   };
-  return /* @__PURE__ */ K(
-    G,
+  return /* @__PURE__ */ J(
+    F,
     {
-      ref: F,
-      className: L(Q["h-stack"], l, "h-stack", "stack"),
-      style: J,
+      ref: E,
+      className: K(O["h-stack"], l, "h-stack", "stack"),
+      style: I,
       "data-inline": !!f,
       "data-allow-flow": !!c,
       "data-v-alignment": m,
@@ -90,7 +90,7 @@ const tt = M.forwardRef(function({
       "data-width": t,
       "data-overflow-x": o,
       "data-overflow-y": e,
-      ...E,
+      ...D,
       children: i
     }
   );

package/dist/stacks/spacer.js

@@ -1,17 +1,17 @@
-import { jsx as m } from "react/jsx-runtime";
-import { clsx as p } from "clsx";
-import d from "react";
-const g = d.forwardRef(function({
-  width: o = "auto",
-  height: t = "auto",
+import { jsx as d } from "react/jsx-runtime";
+import { clsx as m } from "clsx";
+import p from "react";
+const g = p.forwardRef(function({
+  width: t = "auto",
+  height: o = "auto",
   fullHeight: n = !1,
-  fullWidth: r = !1,
-  fillSpaceWeight: a = 1,
+  fullWidth: a = !1,
+  fillSpaceWeight: r = 1,
   style: s,
   className: f
 }, c) {
-  const l = o === "auto" && t === "auto" ? a : void 0, e = r ? "100%" : o, i = n ? "100%" : t;
-  return /* @__PURE__ */ m(
+  const l = t === "auto" && o === "auto" ? r : void 0, e = a ? "100%" : t, i = n ? "100%" : o;
+  return /* @__PURE__ */ d(
     "div",
     {
       ref: c,
@@ -27,7 +27,7 @@ const g = d.forwardRef(function({
         zIndex: 1,
         flex: l
       },
-      className: p("spacer", f)
+      className: m("spacer", f)
     }
   );
 });

package/dist/stacks/story_components/circle.js

@@ -1,25 +1,25 @@
-import { jsx as s } from "react/jsx-runtime";
-import f from "react";
+import { jsx as f } from "react/jsx-runtime";
+import s from "react";
 import { ZStack as m } from "../z_stack.js";
-import { clsx as n } from "clsx";
-import '../../circle.css';const a = "_circle_2f733a0", p = { circle: a }, w = f.forwardRef(function({ color: r = "#90d9c7", size: c = "150px", style: t, className: o, ...e }, i) {
-  const l = {
+import { clsx as a } from "clsx";
+import '../../circle.css';const n = "_circle_2f733a0", p = { circle: n }, y = s.forwardRef(function({ color: r = "#90d9c7", size: c = "150px", style: t, className: o, ...e }, l) {
+  const i = {
     ...t,
     "--color": r
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ f(
     m,
     {
-      ref: i,
-      style: l,
+      ref: l,
+      style: i,
       width: c,
       height: c,
-      className: n(o, p.circle),
+      className: a(o, p.circle),
       ...e
     }
   );
 });
 export {
-  w as Circle
+  y as Circle
 };
 //# sourceMappingURL=circle.js.map

package/dist/stacks/story_components/picture_placeholder.js

@@ -1,18 +1,18 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import m from "react";
 import { clsx as s } from "clsx";
 import '../../picture_placeholder.css';const i = "_picture-placeholder_ec357fb", p = { "picture-placeholder": i }, f = m.forwardRef(function({
-  color: e = "currentColor",
+  color: r = "currentColor",
   size: c = "150px",
   style: l,
-  className: o,
-  ...t
+  className: t,
+  ...o
 }, h) {
   const v = {
     ...l,
-    "--color": e
+    "--color": r
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "svg",
     {
       ref: h,
@@ -20,10 +20,10 @@ import '../../picture_placeholder.css';const i = "_picture-placeholder_ec357fb",
       height: c,
       viewBox: "0 0 16 16",
       xmlns: "http://www.w3.org/2000/svg",
-      className: s(o, p["picture-placeholder"]),
+      className: s(t, p["picture-placeholder"]),
       style: v,
-      ...t,
-      children: /* @__PURE__ */ r(
+      ...o,
+      children: /* @__PURE__ */ e(
         "path",
         {
           d: "m 4 1 c -1.644531 0 -3 1.355469 -3 3 v 1 h 1 v -1 c 0 -1.109375 0.890625 -2 2 -2 h 1 v -1 z m 2 0 v 1 h 4 v -1 z m 5 0 v 1 h 1 c 1.109375 0 2 0.890625 2 2 v 1 h 1 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -5 4 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 s 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m -5 1 v 4 h 1 v -4 z m 13 0 v 4 h 1 v -4 z m -4.5 2 l -2 2 l -1.5 -1 l -2 2 v 0.5 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.035156 0.5 -0.5 v -1 z m -8.5 3 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -1 h -1 c -1.109375 0 -2 -0.890625 -2 -2 v -1 z m 13 0 v 1 c 0 1.109375 -0.890625 2 -2 2 h -1 v 1 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 3 v 1 h 4 v -1 z m 0 0",

package/dist/stacks/story_components/rect.js

@@ -1,8 +1,8 @@
-import { jsx as n } from "react/jsx-runtime";
-import a from "react";
-import { Box as l } from "../box/box.js";
+import { jsx as a } from "react/jsx-runtime";
+import l from "react";
+import { Box as n } from "../box/box.js";
 import { clsx as i } from "clsx";
-import '../../rect.css';const p = "_rect_60482cd", x = { rect: p }, j = a.forwardRef(function({
+import '../../rect.css';const p = "_rect_60482cd", d = { rect: p }, j = l.forwardRef(function({
   color: t = "#acdef0",
   style: o,
   className: r,
@@ -14,12 +14,12 @@ import '../../rect.css';const p = "_rect_60482cd", x = { rect: p }, j = a.forwar
     ...o,
     "--color": t
   };
-  return /* @__PURE__ */ n(
-    l,
+  return /* @__PURE__ */ a(
+    n,
     {
       ref: f,
       style: m,
-      className: i(r, x.rect),
+      className: i(r, d.rect),
       width: c,
       height: e,
       ...s

package/dist/stacks/story_components/style_box.js

@@ -1,12 +1,12 @@
 import { jsx as p } from "react/jsx-runtime";
 import s from "react";
 import { Box as i } from "../box/box.js";
-import { extractStyleProps as n } from "../utils/extract_style_props.js";
-const B = s.forwardRef(function({ className: o, children: r, ...t }, e) {
-  const [m, f] = n(t);
+import { extractStyleProps as l } from "../utils/extract_style_props.js";
+const d = s.forwardRef(function({ className: o, children: r, ...t }, e) {
+  const [m, f] = l(t);
   return /* @__PURE__ */ p(i, { ref: e, className: o, style: m, ...f, children: r });
 });
 export {
-  B as StyleBox
+  d as StyleBox
 };
 //# sourceMappingURL=style_box.js.map

package/dist/stacks/utils/use_is_collapsed.js

@@ -1,18 +1,18 @@
 import d, { useLayoutEffect as l } from "react";
-function c(a, s) {
-  const [i, n] = d.useState(!a);
+function c(r, s) {
+  const [i, n] = d.useState(!r);
   return l(() => {
     const t = s.current;
     if (!t) return;
-    const o = () => {
+    const a = () => {
       const { isCollapsed: e } = t.dataset;
       e === "false" && n(!1);
-    }, r = () => {
+    }, o = () => {
       const { isCollapsed: e } = t.dataset;
       e === "true" && n(!0);
     };
-    return t.addEventListener("transitionstart", o), t.addEventListener("transitionend", r), () => {
-      t.removeEventListener("transitionstart", o), t.removeEventListener("transitionend", r);
+    return t.addEventListener("transitionstart", a), t.addEventListener("transitionend", o), () => {
+      t.removeEventListener("transitionstart", a), t.removeEventListener("transitionend", o);
     };
   }, [s]), i;
 }

package/dist/stacks/v_collapsible_box.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import t, { useLayoutEffect as p } from "react";
-import "../utils/focus_redirect.js";
 import "../utils/click_away_listener.js";
+import "../utils/focus_redirect.js";
 import "../utils/scroll_away_listener.js";
 import { useForkRef as u } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";
@@ -9,7 +9,7 @@ import { clsx as d } from "clsx";
 import { Box as R } from "./box/box.js";
 import { s as x } from "../collapsible_box.module-BiS98xXA.js";
 import { useIsCollapsed as z } from "./utils/use_is_collapsed.js";
-const v = t.forwardRef(function({ open: l = !1, defaultHeight: i = "400px", ...e }, a) {
+const j = t.forwardRef(function({ open: l = !1, defaultHeight: i = "400px", ...e }, a) {
   const s = t.useRef(null), n = u(a, s), [c, r] = t.useState(!1);
   p(() => {
     s.current?.style.setProperty("--collapsible-size", i);
@@ -35,6 +35,6 @@ const v = t.forwardRef(function({ open: l = !1, defaultHeight: i = "400px", ...e
   );
 });
 export {
-  v as VCollapsibleBox
+  j as VCollapsibleBox
 };
 //# sourceMappingURL=v_collapsible_box.js.map

package/dist/stacks/v_stack.js

@@ -1,12 +1,12 @@
-import { jsx as J } from "react/jsx-runtime";
-import { clsx as K } from "clsx";
-import L from "react";
-import { removeUndefinedProperties as M } from "./utils/remove_undefined_properties.js";
-import { s as O } from "../stack.module-CBV1f12Z.js";
+import { jsx as I } from "react/jsx-runtime";
+import { clsx as J } from "clsx";
+import K from "react";
+import { removeUndefinedProperties as L } from "./utils/remove_undefined_properties.js";
+import { s as M } from "../stack.module-CBV1f12Z.js";
 import { isCustomSizeProp as s } from "./utils/isCustomSizeProp.js";
-const tt = L.forwardRef(function({
-  as: i = "div",
-  children: l,
+const tt = K.forwardRef(function({
+  as: l = "div",
+  children: i,
   style: d,
   className: n,
   hAlign: f = "center",
@@ -15,9 +15,9 @@ const tt = L.forwardRef(function({
   allowFlow: c,
   width: a = "default",
   minWidth: p,
-  maxWidth: v,
+  maxWidth: u,
   height: o = "default",
-  minHeight: u,
+  minHeight: v,
   maxHeight: k,
   growWeight: x,
   shrinkWeight: y,
@@ -30,30 +30,30 @@ const tt = L.forwardRef(function({
   paddingBottom: R,
   margin: V,
   marginBlock: W,
-  marginInline: j,
-  marginInlineStart: z,
-  marginInlineEnd: A,
-  marginTop: C,
-  marginBottom: N,
-  zIndex: U,
+  marginInline: _,
+  marginInlineStart: j,
+  marginInlineEnd: z,
+  marginTop: A,
+  marginBottom: C,
+  zIndex: N,
   overflowY: e,
   overflowX: r,
-  gap: b,
-  rowGap: q,
-  columnGap: D,
-  ...E
-}, F) {
-  const G = i, H = {
+  gap: U,
+  rowGap: b,
+  columnGap: q,
+  ...D
+}, E) {
+  const F = l, G = {
     display: t == null ? void 0 : t ? "inline-flex" : "flex",
     minWidth: p,
     width: s(a) ? void 0 : a,
-    maxWidth: v,
-    minHeight: u,
+    maxWidth: u,
+    minHeight: v,
     height: s(o) ? void 0 : o,
     maxHeight: k,
     flexGrow: x,
     flexShrink: y,
-    zIndex: U,
+    zIndex: N,
     overflowX: r,
     overflowY: e,
     padding: g,
@@ -65,24 +65,24 @@ const tt = L.forwardRef(function({
     paddingBottom: R,
     margin: V,
     marginBlock: W,
-    marginInline: j,
-    marginInlineStart: z,
-    marginInlineEnd: A,
-    marginTop: C,
-    marginBottom: N,
-    gap: b,
-    rowGap: q,
-    columnGap: D
-  }, I = {
-    ...M(H),
+    marginInline: _,
+    marginInlineStart: j,
+    marginInlineEnd: z,
+    marginTop: A,
+    marginBottom: C,
+    gap: U,
+    rowGap: b,
+    columnGap: q
+  }, H = {
+    ...L(G),
     ...d
   };
-  return /* @__PURE__ */ J(
-    G,
+  return /* @__PURE__ */ I(
+    F,
     {
-      ref: F,
-      className: K(O["v-stack"], n, "v-stack", "stack"),
-      style: I,
+      ref: E,
+      className: J(M["v-stack"], n, "v-stack", "stack"),
+      style: H,
       "data-inline": !!t,
       "data-allow-flow": !!c,
       "data-v-alignment": m,
@@ -91,8 +91,8 @@ const tt = L.forwardRef(function({
       "data-width": a,
       "data-overflow-y": e,
       "data-overflow-x": r,
-      ...E,
-      children: l
+      ...D,
+      children: i
     }
   );
 });