@trebired/frontend 14.15.0 → 15.0.0

package/dist/styles/utils/base.scss

@@ -225,7 +225,18 @@ a {
   text-decoration: none;
 }
 
-:where(a, button, [role="button"], [role="tab"], .btn, .text-link, .popover-item):active:not(:disabled):not([aria-disabled="true"]) {
+:where(
+  a,
+  button,
+  [role="button"],
+  [role="tab"],
+  #{ns.class("btn")},
+
+  #{ns.class("text-link")},
+
+  #{ns.class("popover-item")}
+
+):active:not(:disabled):not([aria-disabled="true"]) {
   filter: var(#{ns.css-var("interaction-active-filter")}, none);
 }
 
@@ -247,7 +258,7 @@ i {
   font-weight: 100 !important;
 }
 
-.icon-glyph {
+#{ns.class("icon-glyph")} {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
@@ -256,7 +267,7 @@ i {
   vertical-align: middle;
 }
 
-.icon-glyph > svg {
+#{ns.class("icon-glyph")} > svg {
   display: block;
   width: 1em;
   height: 1em;
@@ -272,35 +283,36 @@ ul {
   list-style-type: none;
 }
 
-.is-hidden,
+#{ns.class("is-hidden")},
+
 [hidden] {
   display: none !important;
 }
 
-.hide-mobile {
+#{ns.class("hide-mobile")} {
   @media (max-width: 768px) {
     display: none !important;
   }
 }
 
-.display-block {
+#{ns.class("display-block")} {
   display: block;
 }
 
-.overflow-hidden {
+#{ns.class("overflow-hidden")} {
   overflow: hidden;
 }
 
-.overflow-x-auto {
+#{ns.class("overflow-x-auto")} {
   overflow-x: auto !important;
 }
 
-.scroll {
+#{ns.class("scroll")} {
   overflow: auto;
   min-height: 0;
 }
 
-.scroll-min {
+#{ns.class("scroll-min")} {
   #{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);
@@ -333,31 +345,31 @@ ul {
   }
 }
 
-.inline-row {
+#{ns.class("inline-row")} {
   display: flex;
   align-items: center;
   width: 100%;
   min-width: 0;
   gap: var(#{ns.css-var("gap-sm")});
 
-  &.fit-content {
+  &#{ns.class("fit-content")} {
     width: fit-content;
     max-width: 100%;
   }
 
-  &.wrap {
+  &#{ns.class("wrap")} {
     flex-wrap: wrap;
   }
 
-  &.top {
+  &#{ns.class("top")} {
     align-items: flex-start;
   }
 
-  &.bottom {
+  &#{ns.class("bottom")} {
     align-items: flex-end;
   }
 
-  &.apart {
+  &#{ns.class("apart")} {
     justify-content: space-between;
 
     > * {
@@ -365,12 +377,12 @@ ul {
     }
   }
 
-  &.between {
+  &#{ns.class("between")} {
     justify-content: space-between;
   }
 
-  &.scroll-x {
-    @extend .scroll-min;
+  &#{ns.class("scroll-x")} {
+    @extend #{ns.class("scroll-min")};
 
     flex-wrap: nowrap;
     overflow-x: auto;
@@ -380,21 +392,21 @@ ul {
       flex: 0 0 auto;
     }
 
-    > :where(.input, input, textarea, select, [data-dropdown]) {
+    > :where(#{ns.class("input")}, input, textarea, select, [data-dropdown]) {
       width: var(--inline-row-scroll-field-width, 18rem);
       min-width: var(--inline-row-scroll-field-width, 18rem);
     }
   }
 
-  > .right {
+  > #{ns.class("right")} {
     margin-left: auto;
   }
 
-  > .left {
+  > #{ns.class("left")} {
     margin-right: auto;
   }
 
-  > .center {
+  > #{ns.class("center")} {
     margin-right: auto;
     margin-left: auto;
   }

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

@@ -1,79 +1,79 @@
 @use "@trebired/bundler/namespace" as ns;
-.align-center {
+#{ns.class("align-center")} {
   align-items: center;
 }
 
-.justify-between {
+#{ns.class("justify-between")} {
   justify-content: space-between;
 }
 
-.column {
+#{ns.class("column")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
 
-  &.center {
+  &#{ns.class("center")} {
     justify-content: center;
     text-align: center;
   }
 }
 
-.grid {
+#{ns.class("grid")} {
   display: grid;
   grid-template-columns: var(#{ns.css-var("grid-template-columns")}, minmax(0, 1fr) minmax(0, 1fr));
   align-items: start;
   gap: var(#{ns.css-var("gap-md")});
 
-  &.auto-sm {
+  &#{ns.class("auto-sm")} {
     grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
   }
 
-  &.auto-md {
+  &#{ns.class("auto-md")} {
     grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
   }
 
-  &.auto-lg {
+  &#{ns.class("auto-lg")} {
     grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
   }
 
-  &.stretch {
+  &#{ns.class("stretch")} {
     align-items: stretch;
   }
 
-  &.cols-2 {
+  &#{ns.class("cols-2")} {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  &.cols-3 {
+  &#{ns.class("cols-3")} {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  &.cols-4 {
+  &#{ns.class("cols-4")} {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   @media (max-width: 900px) {
     grid-template-columns: 1fr;
 
-    &.cols-3,
-    &.cols-4 {
+    &#{ns.class("cols-3")},
+    &#{ns.class("cols-4")} {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
   @media (max-width: 560px) {
-    &.cols-2 {
+    &#{ns.class("cols-2")} {
       grid-template-columns: 1fr;
     }
 
-    &.cols-3,
-    &.cols-4 {
+    &#{ns.class("cols-3")},
+    &#{ns.class("cols-4")} {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
   @media (max-width: 560px) {
-    &.stack-mobile {
+    &#{ns.class("stack-mobile")} {
       grid-template-columns: 1fr;
     }
   }

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

@@ -1,120 +1,120 @@
 @use "@trebired/bundler/namespace" as ns;
-.gap-xs2 {
+#{ns.class("gap-xs2")} {
   gap: var(#{ns.css-var("gap-xs2")});
 }
 
-.gap-xs {
+#{ns.class("gap-xs")} {
   gap: var(#{ns.css-var("gap-xs")});
 }
 
-.gap-sm {
+#{ns.class("gap-sm")} {
   gap: var(#{ns.css-var("gap-sm")});
 }
 
-.gap-md {
+#{ns.class("gap-md")} {
   gap: var(#{ns.css-var("gap-md")});
 }
 
-.gap-lg {
+#{ns.class("gap-lg")} {
   gap: var(#{ns.css-var("gap-lg")});
 }
 
-.mt-xs {
+#{ns.class("mt-xs")} {
   margin-top: var(#{ns.css-var("gap-xs")});
 }
 
-.mt-xs2 {
+#{ns.class("mt-xs2")} {
   margin-top: var(#{ns.css-var("gap-xs2")});
 }
 
-.mt-sm {
+#{ns.class("mt-sm")} {
   margin-top: var(#{ns.css-var("gap-sm")});
 }
 
-.mt-md {
+#{ns.class("mt-md")} {
   margin-top: var(#{ns.css-var("gap-md")});
 }
 
-.mt-lg {
+#{ns.class("mt-lg")} {
   margin-top: var(#{ns.css-var("gap-lg")});
 }
 
-.mb-xs {
+#{ns.class("mb-xs")} {
   margin-bottom: var(#{ns.css-var("gap-xs")});
 }
 
-.mb-xs2 {
+#{ns.class("mb-xs2")} {
   margin-bottom: var(#{ns.css-var("gap-xs2")});
 }
 
-.mb-sm {
+#{ns.class("mb-sm")} {
   margin-bottom: var(#{ns.css-var("gap-sm")});
 }
 
-.mb-md {
+#{ns.class("mb-md")} {
   margin-bottom: var(#{ns.css-var("gap-md")});
 }
 
-.mb-lg {
+#{ns.class("mb-lg")} {
   margin-bottom: var(#{ns.css-var("gap-lg")});
 }
 
-.padding-xs2 {
+#{ns.class("padding-xs2")} {
   padding: var(#{ns.css-var("gap-xs2")});
 }
 
-.padding-xs {
+#{ns.class("padding-xs")} {
   padding: var(#{ns.css-var("gap-xs")});
 }
 
-.padding-sm {
+#{ns.class("padding-sm")} {
   padding: var(#{ns.css-var("gap-sm")});
 }
 
-.padding-md {
+#{ns.class("padding-md")} {
   padding: var(#{ns.css-var("gap-md")});
 }
 
-.padding-lg {
+#{ns.class("padding-lg")} {
   padding: var(#{ns.css-var("gap-lg")});
 }
 
-.padding-block-sm {
+#{ns.class("padding-block-sm")} {
   padding-block: var(#{ns.css-var("gap-sm")});
 }
 
-.padding-block-md {
+#{ns.class("padding-block-md")} {
   padding-block: var(#{ns.css-var("gap-md")});
 }
 
-.padding-block-lg {
+#{ns.class("padding-block-lg")} {
   padding-block: var(#{ns.css-var("gap-lg")});
 }
 
-.padding-top-md {
+#{ns.class("padding-top-md")} {
   padding-top: var(#{ns.css-var("gap-md")});
 }
 
-.padding-top-lg {
+#{ns.class("padding-top-lg")} {
   padding-top: var(#{ns.css-var("gap-lg")});
 }
 
-.padding-bottom-md {
+#{ns.class("padding-bottom-md")} {
   padding-bottom: var(#{ns.css-var("gap-md")});
 }
 
-.padding-bottom-lg {
+#{ns.class("padding-bottom-lg")} {
   padding-bottom: var(#{ns.css-var("gap-lg")});
 }
 
-.width-full {
+#{ns.class("width-full")} {
   width: 100%;
 }
 
-.radius-md {
+#{ns.class("radius-md")} {
   border-radius: var(#{ns.css-var("radius")}, 0);
 }
 
-.radius-sm {
+#{ns.class("radius-sm")} {
   border-radius: var(#{ns.css-var("radius-sm")}, 0);
 }

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

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

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

@@ -1,55 +1,56 @@
 @use "@trebired/bundler/namespace" as ns;
-.width-max {
+#{ns.class("width-max")} {
   width: 100% !important;
   max-width: 100% !important;
 }
 
-.width-fit {
+#{ns.class("width-fit")} {
   width: fit-content !important;
   max-width: 100% !important;
 }
 
-.text-muted {
+#{ns.class("text-muted")} {
   color: var(#{ns.css-var("text-muted")}, #000);
 }
 
-.text-xs {
+#{ns.class("text-xs")} {
   font-size: 12px;
 }
 
-.text-sm,
-.text-small {
+#{ns.class("text-sm")},
+
+#{ns.class("text-small")} {
   font-size: 14px;
 }
 
-.text-md {
+#{ns.class("text-md")} {
   font-size: 16px;
 }
 
-.text-lg {
+#{ns.class("text-lg")} {
   font-size: 20px;
 }
 
-.text-break {
+#{ns.class("text-break")} {
   min-width: 0;
   max-width: 100%;
   overflow-wrap: anywhere;
   word-break: break-word;
 }
 
-.truncate-1 {
+#{ns.class("truncate-1")} {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.no-select {
+#{ns.class("no-select")} {
   -webkit-user-select: none;
   user-select: none;
 }
 
-.text-outline {
+#{ns.class("text-outline")} {
   color: var(#{ns.css-var("typography-outline-fill")}, var(#{ns.css-var("page")}, #fff));
   -webkit-text-stroke:
   var(#{ns.css-var("typography-outline-width")}, 2px)
@@ -57,11 +58,11 @@
   paint-order: stroke fill;
 }
 
-.list-plain {
+#{ns.class("list-plain")} {
   padding-inline-start: 0;
   list-style: none;
 }
 
-.text-center {
+#{ns.class("text-center")} {
   text-align: center;
 }

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

@@ -1,5 +1,5 @@
 @use "@trebired/bundler/namespace" as ns;
-.text-break-word {
+#{ns.class("text-break-word")} {
   min-width: 0;
   max-width: 100%;
   white-space: normal;
@@ -8,53 +8,55 @@
   hyphens: auto;
 }
 
-.font-italic {
+#{ns.class("font-italic")} {
   font-style: italic;
 }
 
-.font-mono {
+#{ns.class("font-mono")} {
   font-family:
   ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
   "Courier New", monospace;
   word-break: break-all;
 }
 
-.font-bold {
+#{ns.class("font-bold")} {
   font-weight: bold;
 }
 
-.label {
+#{ns.class("label")} {
   color: var(#{ns.css-var("text-muted")}, #000);
   font-size: 14px;
 }
 
-.bg-canvas {
+#{ns.class("bg-canvas")} {
   background: var(#{ns.css-var("canvas-bg")}, var(--dot-grid)) !important;
 }
 
-.pre-wrap {
+#{ns.class("pre-wrap")} {
   white-space: pre-wrap !important;
 }
 
-.bg-transparent {
+#{ns.class("bg-transparent")} {
   background-color: transparent;
 }
 
-.cursor-pointer {
+#{ns.class("cursor-pointer")} {
   cursor: pointer;
 }
 
-.cursor-auto {
+#{ns.class("cursor-auto")} {
   cursor: auto;
 }
 
-.cursor-disabled,
-.disabled,
+#{ns.class("cursor-disabled")},
+
+#{ns.class("disabled")},
+
 [disabled] {
   cursor: not-allowed;
 }
 
-.label-caps {
+#{ns.class("label-caps")} {
   color: var(#{ns.css-var("typography-label-caps-color")}, var(#{ns.css-var("text-muted")}, #000));
   font-size: var(#{ns.css-var("typography-label-caps-font-size")}, 0.72rem);
   font-weight: var(#{ns.css-var("typography-label-caps-font-weight")}, 600);

package/dist/surface/components/index.js

@@ -107,7 +107,7 @@ function CanvasPanel(props) {
 function CanvasPanelHeader(props) {
     if (!props.title && !props.subtitle && !props.actions && !props.fullscreenId)
         return null;
-    return (_jsxs("div", { className: classNames(frontendElementClass("canvas-panel", "header"), "card"), children: [_jsxs("div", { className: frontendElementClass("canvas-panel", "titles"), children: [props.title ? _jsx("span", { className: frontendElementClass("canvas-panel", "title"), children: props.title }) : null, props.subtitle ? _jsx("span", { className: frontendElementClass("canvas-panel", "subtitle"), 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] })] }));
+    return (_jsxs("div", { className: classNames(frontendElementClass("canvas-panel", "header"), frontendClassName("card")), children: [_jsxs("div", { className: frontendElementClass("canvas-panel", "titles"), children: [props.title ? _jsx("span", { className: frontendElementClass("canvas-panel", "title"), children: props.title }) : null, props.subtitle ? _jsx("span", { className: frontendElementClass("canvas-panel", "subtitle"), 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 { AccentRule, ActionRow, BrandCanvas, Button, CanvasPanel, Card, CardBody, CardFooter, CardHeader, FrameAction, FrameCaption, Frame, FrameCover, FrameScrim, HairlineCell, HairlinePanel, IconTile, PageBand, Tag, };
 //# sourceMappingURL=index.js.map