@trebired/frontend 7.1.17 → 8.0.0

package/dist/styles/tokens.scss

@@ -1,3 +1,4 @@
+@use "@trebired/bundler/namespace" as ns;
 :root {
   --border-width: 1px;
   --outline-width: 2px;
@@ -36,41 +37,42 @@
   --z-modal: var(--z-index-md, 1010);
   --z-floating-ui: var(--z-index-lg, 1020);
   --z-tooltip: var(--z-index-xl, 1100);
-  --tbf-radius: var(--radius-md, 0);
-  --tbf-radius-sm: var(--radius-sm, 0);
-  --tbf-border-width: var(--border-width, 1px);
-  --tbf-border: var(--border-surface-1, #000);
-  --tbf-page: var(--background-page, var(--tbf-surface, #fff));
-  --tbf-surface: var(--surface-1, var(--background-surface-1, #fff));
-  --tbf-surface-muted: var(--surface-2, var(--background-surface-2, #fff));
-  --tbf-text: var(--text-color, #000);
-  --tbf-text-muted: var(--text-color-muted, var(--tbf-text, #000));
-  --tbf-focus: var(--focus-color, #000);
-  --tbf-shadow: var(--shadow-overlay-lg, 0 0 0 1px #000);
-  --tbf-overlay: color-mix(in srgb, var(--tbf-text) 48%, transparent);
-  --tbf-transition-fast: var(--transition-2, 180ms);
-  --tbf-transition-normal: var(--transition-3, 240ms);
-  --tbf-gap-xs2: var(--space-xs2, 4px);
-  --tbf-gap-xs: var(--space-xs, 8px);
-  --tbf-gap-sm: var(--space-sm, 12px);
-  --tbf-gap-md: var(--space-md, 24px);
-  --tbf-gap-lg: var(--space-lg, 40px);
-  --tbf-canvas-bg: var(--dot-grid);
-  --tbf-z-layer: var(--z-layer-root, 1000);
-  --tbf-z-bottom-bar: var(--z-bottom-bar, 900);
-  --tbf-z-header: var(--z-header-primary, 920);
-  --tbf-z-secondary-header: var(--z-header-secondary, 910);
-  --tbf-z-sidebar: var(--z-index-xs, 900);
-  --tbf-z-fullscreen: var(--z-fullscreen, var(--z-index-sm, 1000));
-  --tbf-z-modal: var(--z-modal, var(--z-index-md, 1010));
-  --tbf-z-floating-ui: var(--z-floating-ui, var(--z-index-lg, 1020));
-  --tbf-z-tooltip: var(--z-tooltip, var(--z-index-xl, 1100));
-  --tbf-z-progress: var(--z-progress, 99999);
-  --tbf-z-confetti: var(--z-confetti, 99998);
+  #{ns.css-var("radius")}: var(--radius-md, 0);
+  #{ns.css-var("radius-sm")}: var(--radius-sm, 0);
+  #{ns.css-var("border-width")}: var(--border-width, 1px);
+  #{ns.css-var("border")}: var(--border-surface-1, #000);
+  #{ns.css-var("page")}: var(--background-page, var(#{ns.css-var("surface")}, #fff));
+  #{ns.css-var("surface")}: var(--surface-1, var(--background-surface-1, #fff));
+  #{ns.css-var("surface-muted")}: var(--surface-2, var(--background-surface-2, #fff));
+  #{ns.css-var("text")}: var(--text-color, #000);
+  #{ns.css-var("text-muted")}: var(--text-color-muted, var(#{ns.css-var("text")}, #000));
+  #{ns.css-var("focus")}: var(--focus-color, #000);
+  #{ns.css-var("shadow")}: var(--shadow-overlay-lg, 0 0 0 1px #000);
+  #{ns.css-var("overlay")}: color-mix(in srgb, var(#{ns.css-var("text")}) 48%, transparent);
+  #{ns.css-var("transition-fast")}: var(--transition-2, 180ms);
+  #{ns.css-var("transition-normal")}: var(--transition-3, 240ms);
+  #{ns.css-var("gap-xs2")}: var(--space-xs2, 4px);
+  #{ns.css-var("gap-xs")}: var(--space-xs, 8px);
+  #{ns.css-var("gap-sm")}: var(--space-sm, 12px);
+  #{ns.css-var("gap-md")}: var(--space-md, 24px);
+  #{ns.css-var("gap-lg")}: var(--space-lg, 40px);
+  #{ns.css-var("canvas-bg")}: var(--dot-grid);
+  #{ns.css-var("z-layer")}: var(--z-layer-root, 1000);
+  #{ns.css-var("z-bottom-bar")}: var(--z-bottom-bar, 900);
+  #{ns.css-var("z-header")}: var(--z-header-primary, 920);
+  #{ns.css-var("z-secondary-header")}: var(--z-header-secondary, 910);
+  #{ns.css-var("z-sidebar")}: var(--z-index-xs, 900);
+  #{ns.css-var("z-fullscreen")}: var(--z-fullscreen, var(--z-index-sm, 1000));
+  #{ns.css-var("z-modal")}: var(--z-modal, var(--z-index-md, 1010));
+  #{ns.css-var("z-floating-ui")}: var(--z-floating-ui, var(--z-index-lg, 1020));
+  #{ns.css-var("z-tooltip")}: var(--z-tooltip, var(--z-index-xl, 1100));
+  #{ns.css-var("z-progress")}: var(--z-progress, 99999);
+  #{ns.css-var("z-confetti")}: var(--z-confetti, 99998);
 }
 
-:root[data-tbf-theme="light"],
-body[data-tbf-theme="light"] {
+:root#{ns.data("theme", "light")},
+
+body#{ns.data("theme", "light")} {
   --dot-grid:
   var(--dot-grid-base)
   radial-gradient(var(--dot-grid-dot) 2px, transparent 0) -5px -5px / 30px 30px;

package/dist/styles/utils/alignment.scss

@@ -1,10 +1,11 @@
-$tbf-hor-alignments: (
+@use "@trebired/bundler/namespace" as ns;
+$frontend-hor-alignments: (
   left: flex-start,
   center: center,
   right: flex-end,
 );
 
-@each $name, $value in $tbf-hor-alignments {
+@each $name, $value in $frontend-hor-alignments {
   .hor-#{$name} {
     justify-content: $value;
 
@@ -56,19 +57,19 @@ $tbf-hor-alignments: (
 }
 
 .ver-xs {
-  margin-top: var(--tbf-gap-xs2);
+  margin-top: var(#{ns.css-var("gap-xs2")});
 }
 
 .ver-sm {
-  margin-top: var(--tbf-gap-xs);
+  margin-top: var(#{ns.css-var("gap-xs")});
 }
 
 .ver-md {
-  margin-top: var(--tbf-gap-sm);
+  margin-top: var(#{ns.css-var("gap-sm")});
 }
 
 .ver-lg {
-  margin-top: var(--tbf-gap-md);
+  margin-top: var(#{ns.css-var("gap-md")});
 }
 
 .no-stretch {

package/dist/styles/utils/base.scss

@@ -1,5 +1,7 @@
-.tbf-root,
-[data-tbf-layout-document],
+@use "@trebired/bundler/namespace" as ns;
+#{ns.class("root")},
+
+#{ns.data("layout-document")},
 html,
 body {
   min-width: 0;
@@ -18,9 +20,10 @@ body {
 }
 
 html,
-.tbf-root,
-[data-tbf-layout-document] {
-  font-family: var(--tbf-font-sans, "Inter", sans-serif);
+#{ns.class("root")},
+
+#{ns.data("layout-document")} {
+  font-family: var(#{ns.css-var("font-sans")}, "Inter", sans-serif);
 }
 
 button,
@@ -29,7 +32,7 @@ optgroup,
 select,
 textarea {
   font: inherit;
-  font-family: var(--tbf-font-sans, "Inter", sans-serif);
+  font-family: var(#{ns.css-var("font-sans")}, "Inter", sans-serif);
 }
 
 html,
@@ -38,8 +41,8 @@ body {
   padding: 0;
   scroll-behavior: smooth;
   overscroll-behavior-y: none;
-  color: var(--tbf-text, #000);
-  background-color: var(--background-page, var(--tbf-surface, #fff));
+  color: var(#{ns.css-var("text")}, #000);
+  background-color: var(--background-page, var(#{ns.css-var("surface")}, #fff));
   transition:
   background-color 0.3s ease,
   border-color 0.3s ease,
@@ -59,8 +62,8 @@ body {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
-  font-family: var(--tbf-font-sans, "Inter", sans-serif);
-  line-height: var(--tbf-body-line-height, var(--lh-sm, 1.4));
+  font-family: var(#{ns.css-var("font-sans")}, "Inter", sans-serif);
+  line-height: var(#{ns.css-var("body-line-height")}, var(--lh-sm, 1.4));
 }
 
 body::after {
@@ -69,20 +72,20 @@ body::after {
   top: 0;
   right: var(--viewport-scrollbar-gap-inline-end, 0px);
   bottom: 0;
-  width: var(--tbf-border-width, 1px);
-  background: var(--tbf-border, #000);
+  width: var(#{ns.css-var("border-width")}, 1px);
+  background: var(#{ns.css-var("border")}, #000);
   pointer-events: none;
   z-index: var(--z-scrollbar-gutter-border, 925);
 }
 
 body[data-mobile-sidebar-open="true"],
-body[data-tbf-sidebar-open="true"] {
+body#{ns.data("sidebar-open", "true")} {
   overflow: hidden;
 }
 
 ::selection {
-  color: var(--tbf-selection-text, var(--text-color, #fff));
-  background-color: var(--tbf-selection-bg, color-mix(in srgb, var(--tbf-focus, currentColor) 50%, transparent)) !important;
+  color: var(#{ns.css-var("selection-text")}, var(--text-color, #fff));
+  background-color: var(#{ns.css-var("selection-bg")}, color-mix(in srgb, var(#{ns.css-var("focus")}, currentColor) 50%, transparent)) !important;
 }
 
 h1,
@@ -92,8 +95,8 @@ h4,
 h5,
 h6 {
   margin: 0 !important;
-  font-family: var(--tbf-font-sans, "Inter", sans-serif);
-  font-weight: var(--tbf-heading-font-weight, 500) !important;
+  font-family: var(#{ns.css-var("font-sans")}, "Inter", sans-serif);
+  font-weight: var(#{ns.css-var("heading-font-weight")}, 500) !important;
   cursor: default;
 }
 
@@ -157,18 +160,18 @@ span {
 
 hr {
   width: 100%;
-  height: var(--tbf-border-width, 1px);
+  height: var(#{ns.css-var("border-width")}, 1px);
   border: 0;
-  background-color: var(--tbf-border, #000);
+  background-color: var(#{ns.css-var("border")}, #000);
 }
 
 a {
-  color: var(--tbf-link-color, var(--tbf-text, #000));
+  color: var(#{ns.css-var("link-color")}, var(#{ns.css-var("text")}, #000));
   text-decoration: none;
 }
 
 :where(a, button, [role="button"], [role="tab"], .btn, .text-link, .popover-item):active:not(:disabled):not([aria-disabled="true"]) {
-  filter: var(--tbf-interaction-active-filter, none);
+  filter: var(#{ns.css-var("interaction-active-filter")}, none);
 }
 
 img {
@@ -241,29 +244,29 @@ ul {
 }
 
 .scroll-min {
-  --tbf-scroll-min-size: 6px;
-  --tbf-scroll-min-track: var(--scroll-track, #fff);
-  --tbf-scroll-min-thumb: var(--scroll-thumb, #000);
-  --tbf-scroll-min-thumb-hover: var(--scroll-thumb-hover, var(--tbf-scroll-min-thumb));
+  #{ns.css-var("scroll-min-size")}: 6px;
+  #{ns.css-var("scroll-min-track")}: var(--scroll-track, #fff);
+  #{ns.css-var("scroll-min-thumb")}: var(--scroll-thumb, #000);
+  #{ns.css-var("scroll-min-thumb-hover")}: var(--scroll-thumb-hover, var(#{ns.css-var("scroll-min-thumb")}));
   --scroll-min-horizontal-gap: 6px;
-  --scroll-min-size: var(--tbf-scroll-min-size);
+  --scroll-min-size: var(#{ns.css-var("scroll-min-size")});
 
   &::-webkit-scrollbar {
-    width: var(--tbf-scroll-min-size);
-    height: var(--tbf-scroll-min-size);
+    width: var(#{ns.css-var("scroll-min-size")});
+    height: var(#{ns.css-var("scroll-min-size")});
   }
 
   &::-webkit-scrollbar-track {
-    background-color: var(--tbf-scroll-min-track);
+    background-color: var(#{ns.css-var("scroll-min-track")});
   }
 
   &::-webkit-scrollbar-thumb {
-    border-radius: var(--tbf-radius, 0);
-    background-color: var(--tbf-scroll-min-thumb);
+    border-radius: var(#{ns.css-var("radius")}, 0);
+    background-color: var(#{ns.css-var("scroll-min-thumb")});
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--tbf-scroll-min-thumb-hover);
+    background-color: var(#{ns.css-var("scroll-min-thumb-hover")});
   }
 
   &[data-scroll-overflow-x="true"] {
@@ -278,7 +281,7 @@ ul {
   align-items: center;
   width: 100%;
   min-width: 0;
-  gap: var(--tbf-gap-sm);
+  gap: var(#{ns.css-var("gap-sm")});
 
   &.fit-content {
     width: fit-content;

package/dist/styles/utils/layout-grid.scss

@@ -1,3 +1,4 @@
+@use "@trebired/bundler/namespace" as ns;
 .align-center {
   align-items: center;
 }
@@ -19,9 +20,9 @@
 
 .grid {
   display: grid;
-  grid-template-columns: var(--tbf-grid-template-columns, minmax(0, 1fr) minmax(0, 1fr));
+  grid-template-columns: var(#{ns.css-var("grid-template-columns")}, minmax(0, 1fr) minmax(0, 1fr));
   align-items: start;
-  gap: var(--tbf-gap-md);
+  gap: var(#{ns.css-var("gap-md")});
 
   &.auto-sm {
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

package/dist/styles/utils/spacing/block.scss

@@ -1,59 +1,60 @@
+@use "@trebired/bundler/namespace" as ns;
 .gap-xs2 {
-  gap: var(--tbf-gap-xs2);
+  gap: var(#{ns.css-var("gap-xs2")});
 }
 
 .gap-xs {
-  gap: var(--tbf-gap-xs);
+  gap: var(#{ns.css-var("gap-xs")});
 }
 
 .gap-sm {
-  gap: var(--tbf-gap-sm);
+  gap: var(#{ns.css-var("gap-sm")});
 }
 
 .gap-md {
-  gap: var(--tbf-gap-md);
+  gap: var(#{ns.css-var("gap-md")});
 }
 
 .gap-lg {
-  gap: var(--tbf-gap-lg);
+  gap: var(#{ns.css-var("gap-lg")});
 }
 
 .mt-xs {
-  margin-top: var(--tbf-gap-xs);
+  margin-top: var(#{ns.css-var("gap-xs")});
 }
 
 .mt-xs2 {
-  margin-top: var(--tbf-gap-xs2);
+  margin-top: var(#{ns.css-var("gap-xs2")});
 }
 
 .mt-sm {
-  margin-top: var(--tbf-gap-sm);
+  margin-top: var(#{ns.css-var("gap-sm")});
 }
 
 .mt-md {
-  margin-top: var(--tbf-gap-md);
+  margin-top: var(#{ns.css-var("gap-md")});
 }
 
 .mt-lg {
-  margin-top: var(--tbf-gap-lg);
+  margin-top: var(#{ns.css-var("gap-lg")});
 }
 
 .mb-xs {
-  margin-bottom: var(--tbf-gap-xs);
+  margin-bottom: var(#{ns.css-var("gap-xs")});
 }
 
 .mb-xs2 {
-  margin-bottom: var(--tbf-gap-xs2);
+  margin-bottom: var(#{ns.css-var("gap-xs2")});
 }
 
 .mb-sm {
-  margin-bottom: var(--tbf-gap-sm);
+  margin-bottom: var(#{ns.css-var("gap-sm")});
 }
 
 .mb-md {
-  margin-bottom: var(--tbf-gap-md);
+  margin-bottom: var(#{ns.css-var("gap-md")});
 }
 
 .mb-lg {
-  margin-bottom: var(--tbf-gap-lg);
+  margin-bottom: var(#{ns.css-var("gap-lg")});
 }

package/dist/styles/utils/spacing/inline.scss

@@ -1,45 +1,46 @@
+@use "@trebired/bundler/namespace" as ns;
 .ml-xs {
-  margin-left: var(--tbf-gap-xs);
+  margin-left: var(#{ns.css-var("gap-xs")});
 }
 
 .ml-xs2 {
-  margin-left: var(--tbf-gap-xs2);
+  margin-left: var(#{ns.css-var("gap-xs2")});
 }
 
 .ml-sm {
-  margin-left: var(--tbf-gap-sm);
+  margin-left: var(#{ns.css-var("gap-sm")});
 }
 
 .ml-md {
-  margin-left: var(--tbf-gap-md);
+  margin-left: var(#{ns.css-var("gap-md")});
 }
 
 .ml-lg {
-  margin-left: var(--tbf-gap-lg);
+  margin-left: var(#{ns.css-var("gap-lg")});
 }
 
 .mr-xs {
-  margin-right: var(--tbf-gap-xs);
+  margin-right: var(#{ns.css-var("gap-xs")});
 }
 
 .mr-xs2 {
-  margin-right: var(--tbf-gap-xs2);
+  margin-right: var(#{ns.css-var("gap-xs2")});
 }
 
 .mr-sm {
-  margin-right: var(--tbf-gap-sm);
+  margin-right: var(#{ns.css-var("gap-sm")});
 }
 
 .mr-md {
-  margin-right: var(--tbf-gap-md);
+  margin-right: var(#{ns.css-var("gap-md")});
 }
 
 .mr-lg {
-  margin-right: var(--tbf-gap-lg);
+  margin-right: var(#{ns.css-var("gap-lg")});
 }
 
 .border {
-  border: var(--tbf-border-width) solid var(--tbf-border);
+  border: var(#{ns.css-var("border-width")}) solid var(#{ns.css-var("border")});
 }
 
 .border-0 {
@@ -47,25 +48,25 @@
 }
 
 .border-top {
-  border-top: var(--tbf-border-width) solid var(--tbf-border);
+  border-top: var(#{ns.css-var("border-width")}) solid var(#{ns.css-var("border")});
 }
 
 .border-bottom {
-  border-bottom: var(--tbf-border-width) solid var(--tbf-border);
+  border-bottom: var(#{ns.css-var("border-width")}) solid var(#{ns.css-var("border")});
 }
 
 .border-left {
-  border-left: var(--tbf-border-width) solid var(--tbf-border);
+  border-left: var(#{ns.css-var("border-width")}) solid var(#{ns.css-var("border")});
 }
 
 .border-right {
-  border-right: var(--tbf-border-width) solid var(--tbf-border);
+  border-right: var(#{ns.css-var("border-width")}) solid var(#{ns.css-var("border")});
 }
 
 .border-block {
-  border-block: var(--tbf-border-width) solid var(--tbf-border);
+  border-block: var(#{ns.css-var("border-width")}) solid var(#{ns.css-var("border")});
 }
 
 .border-inline {
-  border-inline: var(--tbf-border-width) solid var(--tbf-border);
+  border-inline: var(#{ns.css-var("border-width")}) solid var(#{ns.css-var("border")});
 }

package/dist/styles/utils/text/core.scss

@@ -1,3 +1,4 @@
+@use "@trebired/bundler/namespace" as ns;
 .width-max {
   width: 100% !important;
   max-width: 100% !important;
@@ -9,7 +10,7 @@
 }
 
 .text-muted {
-  color: var(--tbf-text-muted, #000);
+  color: var(#{ns.css-var("text-muted")}, #000);
 }
 
 .text-xs {

package/dist/styles/utils/text/extra.scss

@@ -1,3 +1,4 @@
+@use "@trebired/bundler/namespace" as ns;
 .text-break-word {
   min-width: 0;
   max-width: 100%;
@@ -23,12 +24,12 @@
 }
 
 .label {
-  color: var(--tbf-text-muted, #000);
+  color: var(#{ns.css-var("text-muted")}, #000);
   font-size: 14px;
 }
 
 .bg-canvas {
-  background: var(--tbf-canvas-bg, var(--dot-grid)) !important;
+  background: var(#{ns.css-var("canvas-bg")}, var(--dot-grid)) !important;
 }
 
 .pre-wrap {

package/dist/surface/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/surface/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjF,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,KAAK,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,KAAK,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACvD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,+BAOjC;AAED,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,+BAY7B;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGxD;AAED,iBAAS,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGtD;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGxD;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAS3C;AAmBD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;AACvE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/surface/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAGjF,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,KAAK,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,KAAK,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACvD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,+BAOjC;AAED,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,+BAY7B;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGxD;AAED,iBAAS,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGtD;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGxD;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAS3C;AAmBD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;AACvE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC"}

package/dist/surface/components/index.js

@@ -2,35 +2,36 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../components/index.js";
 import { FullscreenCloseButton, FullscreenOpenButton, FullscreenTarget } from "../../fullscreen/components/index.js";
 import { surfaceClass } from "../index.js";
+import { frontendClassName, frontendDataAttrs, frontendElementClass } from "../../namespace/index.js";
 function Button(props) {
     const { children, className, size, tone, type = "button", ...rest } = props;
-    return (_jsx("button", { ...rest, className: classNames(surfaceClass("tbf-button", { size, tone }), className), type: type, children: children }));
+    return (_jsx("button", { ...rest, className: classNames(surfaceClass(frontendClassName("button"), { size, tone }), className), type: type, children: children }));
 }
 function Card(props) {
     const { children, className, interactive, tone, ...rest } = props;
-    return (_jsx("div", { ...rest, className: classNames(surfaceClass("tbf-card", { tone }), className), "data-tbf-card": "", "data-tbf-interactive": interactive ? "true" : undefined, children: children }));
+    return (_jsx("div", { ...rest, className: classNames(surfaceClass(frontendClassName("card"), { tone }), className), ...frontendDataAttrs({ "card": "" }), ...frontendDataAttrs({ "interactive": interactive ? "true" : undefined }), children: children }));
 }
 function CardHeader(props) {
     const { children, className, ...rest } = props;
-    return _jsx("div", { ...rest, className: classNames("tbf-card__header", className), children: children });
+    return _jsx("div", { ...rest, className: classNames(frontendElementClass("card", "header"), className), children: children });
 }
 function CardBody(props) {
     const { children, className, ...rest } = props;
-    return _jsx("div", { ...rest, className: classNames("tbf-card__body", className), children: children });
+    return _jsx("div", { ...rest, className: classNames(frontendElementClass("card", "body"), className), children: children });
 }
 function CardFooter(props) {
     const { children, className, ...rest } = props;
-    return _jsx("div", { ...rest, className: classNames("tbf-card__footer", className), children: children });
+    return _jsx("div", { ...rest, className: classNames(frontendElementClass("card", "footer"), className), children: children });
 }
 function CanvasPanel(props) {
     const { actions, children, className, fullscreenId, subtitle, title, ...rest } = props;
-    const body = (_jsxs("div", { ...rest, className: classNames("tbf-canvas-panel", className), "data-tbf-canvas-panel": "", children: [_jsx(CanvasPanelHeader, { actions: actions, fullscreenId: fullscreenId, subtitle: subtitle, title: title }), _jsx("div", { className: "tbf-canvas-panel__body", children: children })] }));
+    const body = (_jsxs("div", { ...rest, className: classNames(frontendClassName("canvas-panel"), className), ...frontendDataAttrs({ "canvas-panel": "" }), children: [_jsx(CanvasPanelHeader, { actions: actions, fullscreenId: fullscreenId, subtitle: subtitle, title: title }), _jsx("div", { className: frontendElementClass("canvas-panel", "body"), children: children })] }));
     return fullscreenId ? _jsx(FullscreenTarget, { fullscreenId: fullscreenId, children: body }) : body;
 }
 function CanvasPanelHeader(props) {
     if (!props.title && !props.subtitle && !props.actions && !props.fullscreenId)
         return null;
-    return (_jsxs("div", { className: "tbf-canvas-panel__header", children: [_jsxs("div", { className: "tbf-canvas-panel__titles", children: [props.title ? _jsx("strong", { children: props.title }) : null, props.subtitle ? _jsx("span", { children: props.subtitle }) : null] }), _jsxs("div", { className: "tbf-canvas-panel__actions", children: [props.actions, props.fullscreenId ? _jsx(FullscreenOpenButton, { fullscreenId: props.fullscreenId, children: "Open" }) : null, props.fullscreenId ? _jsx(FullscreenCloseButton, { fullscreenId: props.fullscreenId, children: "Close" }) : null] })] }));
+    return (_jsxs("div", { className: frontendElementClass("canvas-panel", "header"), children: [_jsxs("div", { className: frontendElementClass("canvas-panel", "titles"), children: [props.title ? _jsx("strong", { children: props.title }) : null, props.subtitle ? _jsx("span", { children: props.subtitle }) : null] }), _jsxs("div", { className: frontendElementClass("canvas-panel", "actions"), children: [props.actions, props.fullscreenId ? _jsx(FullscreenOpenButton, { fullscreenId: props.fullscreenId, children: "Open" }) : null, props.fullscreenId ? _jsx(FullscreenCloseButton, { fullscreenId: props.fullscreenId, children: "Close" }) : null] })] }));
 }
 export { Button, CanvasPanel, Card, CardBody, CardFooter, CardHeader };
 //# sourceMappingURL=index.js.map

package/dist/surface/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/surface/components/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/surface/components/index.tsx"],"names":[],"mappings":"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"}