@homebound/beam 3.0.0-alpha.10 → 3.0.0-alpha.11

package/dist/index.d.cts

@@ -10,6 +10,7 @@ export { DateRange } from 'react-day-picker';
 import { MenuTriggerState } from 'react-stately';
 import { FieldState, ListFieldState, ObjectState } from '@homebound/form-state';
 import { NumberFieldAria } from '@react-aria/numberfield';
+export { RuntimeStyle } from '@homebound/truss/runtime';
 
 /** Given a type X, and the user's proposed type T, only allow keys in X and nothing else. */
 type Only<X, T> = X & Record<Exclude<keyof T, keyof X>, never>;
@@ -35,6 +36,7 @@ type Opts<T> = {
     enabled: boolean;
     selector: string | undefined;
     elseApplied: boolean;
+    runtimeError: string | undefined;
 };
 declare class CssBuilder<T extends Properties> {
     private opts;
@@ -4085,7 +4087,7 @@ declare class CssBuilder<T extends Properties> {
         name?: string;
         lt?: number;
         gt?: number;
-    }): this;
+    }): CssBuilder<T>;
     /** Apply styles within a pseudo-element (e.g. `"::placeholder"`, `"::selection"`). */
     element(_pseudoElement: string): CssBuilder<T>;
     get ifPrint(): CssBuilder<T>;
@@ -4111,9 +4113,12 @@ declare class CssBuilder<T extends Properties> {
     className(className: string): CssBuilder<T>;
     /** Convert a style hash into `{ className, style }` props for manual spreading into non-`css=` contexts. */
     props(styles: Properties): Record<string, unknown>;
+    /** Tagged template literal for raw CSS in .css.ts files; passes through the string as-is. */
+    raw(strings: TemplateStringsArray, ...values: unknown[]): string;
     private get rules();
     private get enabled();
     private get selector();
+    private unsupportedRuntime;
     private newCss;
 }
 /** Converts `inc` into pixels value with a `px` suffix. */

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { DateRange } from 'react-day-picker';
 import { MenuTriggerState } from 'react-stately';
 import { FieldState, ListFieldState, ObjectState } from '@homebound/form-state';
 import { NumberFieldAria } from '@react-aria/numberfield';
+export { RuntimeStyle } from '@homebound/truss/runtime';
 
 /** Given a type X, and the user's proposed type T, only allow keys in X and nothing else. */
 type Only<X, T> = X & Record<Exclude<keyof T, keyof X>, never>;
@@ -35,6 +36,7 @@ type Opts<T> = {
     enabled: boolean;
     selector: string | undefined;
     elseApplied: boolean;
+    runtimeError: string | undefined;
 };
 declare class CssBuilder<T extends Properties> {
     private opts;
@@ -4085,7 +4087,7 @@ declare class CssBuilder<T extends Properties> {
         name?: string;
         lt?: number;
         gt?: number;
-    }): this;
+    }): CssBuilder<T>;
     /** Apply styles within a pseudo-element (e.g. `"::placeholder"`, `"::selection"`). */
     element(_pseudoElement: string): CssBuilder<T>;
     get ifPrint(): CssBuilder<T>;
@@ -4111,9 +4113,12 @@ declare class CssBuilder<T extends Properties> {
     className(className: string): CssBuilder<T>;
     /** Convert a style hash into `{ className, style }` props for manual spreading into non-`css=` contexts. */
     props(styles: Properties): Record<string, unknown>;
+    /** Tagged template literal for raw CSS in .css.ts files; passes through the string as-is. */
+    raw(strings: TemplateStringsArray, ...values: unknown[]): string;
     private get rules();
     private get enabled();
     private get selector();
+    private unsupportedRuntime;
     private newCss;
 }
 /** Converts `inc` into pixels value with a `px` suffix. */

package/dist/index.js

@@ -21,6 +21,7 @@ import {
 
 // src/Css.ts
 import { trussProps } from "@homebound/truss/runtime";
+import { RuntimeStyle } from "@homebound/truss/runtime";
 var CssBuilder = class _CssBuilder {
   constructor(opts) {
     this.opts = opts;
@@ -3768,6 +3769,12 @@ var CssBuilder = class _CssBuilder {
   }
   // aliases
   get $() {
+    if (this.opts.runtimeError) {
+      throw new Error(this.opts.runtimeError);
+    }
+    if (this.selector !== void 0) {
+      throw new Error("Selector-based Css helpers cannot be used in RuntimeStyle css expressions.");
+    }
     return this.rules;
   }
   get onHover() {
@@ -3796,11 +3803,11 @@ var CssBuilder = class _CssBuilder {
   }
   /** Marks this element as a default hover marker (for ancestor pseudo selectors). */
   get marker() {
-    return this;
+    return this.unsupportedRuntime("marker cannot be used in RuntimeStyle css expressions.");
   }
   /** Marks this element with a user-defined marker. */
   markerOf(_marker) {
-    return this;
+    return this.unsupportedRuntime("markerOf() cannot be used in RuntimeStyle css expressions.");
   }
   /** Creates a marker token for use with markerOf() and when(). */
   newMarker() {
@@ -3810,14 +3817,14 @@ var CssBuilder = class _CssBuilder {
     return this[key];
   }
   when(_selectorOrMarker, _relationship, _pseudo) {
-    return this;
+    return this.unsupportedRuntime("when() cannot be used in RuntimeStyle css expressions.");
   }
   ifContainer(_props) {
-    return this;
+    return this.unsupportedRuntime("ifContainer() cannot be used in RuntimeStyle css expressions.");
   }
   /** Apply styles within a pseudo-element (e.g. `"::placeholder"`, `"::selection"`). */
   element(_pseudoElement) {
-    return this;
+    return this.unsupportedRuntime("element() cannot be used in RuntimeStyle css expressions.");
   }
   get ifPrint() {
     return this.newCss({ selector: "@media print" });
@@ -3847,7 +3854,7 @@ var CssBuilder = class _CssBuilder {
     if (typeof condOrMediaQuery === "boolean") {
       return new _CssBuilder({ ...this.opts, enabled: condOrMediaQuery, elseApplied: false });
     }
-    return this.newCss({ selector: condOrMediaQuery, elseApplied: false });
+    return this.unsupportedRuntime("if(mediaQuery) cannot be used in RuntimeStyle css expressions.");
   }
   get else() {
     if (this.selector !== void 0) {
@@ -3876,12 +3883,16 @@ var CssBuilder = class _CssBuilder {
   /** Marker for the build-time transform to append a raw className. */
   className(className) {
     void className;
-    return this;
+    return this.unsupportedRuntime("className() cannot be used in RuntimeStyle css expressions.");
   }
   /** Convert a style hash into `{ className, style }` props for manual spreading into non-`css=` contexts. */
   props(styles) {
     return trussProps(styles);
   }
+  /** Tagged template literal for raw CSS in .css.ts files; passes through the string as-is. */
+  raw(strings, ...values) {
+    return String.raw(strings, ...values);
+  }
   get rules() {
     return this.opts.rules;
   }
@@ -3891,6 +3902,9 @@ var CssBuilder = class _CssBuilder {
   get selector() {
     return this.opts.selector;
   }
+  unsupportedRuntime(message) {
+    return this.newCss({ runtimeError: message });
+  }
   newCss(opts) {
     return new _CssBuilder({ ...this.opts, ...opts });
   }
@@ -3986,7 +4000,13 @@ var Palette = /* @__PURE__ */ ((Palette4) => {
   return Palette4;
 })(Palette || {});
 var marker = /* @__PURE__ */ Symbol.for("truss-default-marker");
-var Css = new CssBuilder({ rules: {}, enabled: true, selector: void 0, elseApplied: false });
+var Css = new CssBuilder({
+  rules: {},
+  enabled: true,
+  selector: void 0,
+  elseApplied: false,
+  runtimeError: void 0
+});
 var Breakpoints = /* @__PURE__ */ ((Breakpoints2) => {
   Breakpoints2["print"] = "@media print";
   Breakpoints2["sm"] = "@media screen and (max-width: 599px)";
@@ -21469,6 +21489,7 @@ export {
   RightPaneProvider,
   RightSidebar,
   Row,
+  RuntimeStyle,
   ScrollShadows,
   ScrollableContent,
   ScrollableParent,