poseui 0.0.2 → 0.0.3

package/dist/index.d.ts

@@ -782,17 +782,17 @@ interface PoseElement<TProps extends Record<string, unknown>, TSchema extends St
    * Apply styles conditionally — predicate form or value-switch form.
    *
    * Predicate form (apply when true):
-   * ```ts
+   * \`\`\`ts
    * .when(({ disabled }) => disabled, (b) => b.opacity(50).cursor_not_allowed())
-   * ```
+   * \`\`\`
    *
    * Value form (switch on a prop key):
-   * ```ts
+   * \`\`\`ts
    * .when("variant", {
    *   primary:   (b) => b.bg("indigo-600").text_color("white"),
    *   secondary: (b) => b.bg("slate-200").text_color("slate-900"),
    * })
-   * ```
+   * \`\`\`
    * Cases are Partial — unmatched values emit no classes.
    * Multiple .when() calls are independent and all evaluated at render time.
    */
@@ -808,7 +808,7 @@ interface PoseElement<TProps extends Record<string, unknown>, TSchema extends St
   child(fn: (props: TProps) => ChildValue): PoseElement<TProps, TSchema>;
   child(value: ChildValue): PoseElement<TProps, TSchema>;
   /**
-   * Render to `{ html, css }` using UnoCSS + presetWind4.
+   * Render to \`{ html, css }\` using UnoCSS + presetWind4.
    * @example
    * const { html, css } = await card.render({ name: 'Ada' })
    */

package/dist/index.js

@@ -35,7 +35,7 @@ function renderChild(child, props) {
 	if (child != null && typeof child === "object" && "__pose" in child) return child(props);
 	return child == null ? "" : String(child);
 }
-/** A tagless builder used inside .when() callbacks — only accumulates classes. */
+/** A tagless builder used inside .when() callbacks — only accumulates classes and children. */
 function createBlankBuilder() {
 	return createBuilder({
 		tag: "div",
@@ -76,6 +76,7 @@ function createBuilder(state) {
 		return buildHtml(result);
 	}
 	render.__pose = true;
+	render.__state = state;
 	const el = render;
 	Object.defineProperty(el, "classes", {
 		get: () => state.classes,
@@ -464,20 +465,30 @@ function createBuilder(state) {
 	el.stroke_w = (n) => dynCls(n, (v) => tw("stroke", v));
 	el.sr_only = () => cls("sr-only");
 	el.not_sr_only = () => cls("not-sr-only");
+	function applyBranch(getBranch) {
+		const classEntry = (props) => {
+			const branch = getBranch(props);
+			return branch ? resolveClasses(branch.classes, props) : "";
+		};
+		const childEntry = (props) => {
+			const branch = getBranch(props);
+			if (!branch) return null;
+			const branchState = branch.__state;
+			if (!branchState.children.length) return null;
+			return branchState.children.map((c) => typeof c === "function" ? c(props) : c);
+		};
+		return derive([classEntry], [childEntry]);
+	}
 	el.when = (...args) => {
 		if (typeof args[0] === "function") {
 			const [pred, apply] = args;
-			return derive([(props) => {
-				if (!pred(props)) return "";
-				return resolveClasses(apply(createBlankBuilder()).classes, props);
-			}]);
+			return applyBranch((props) => pred(props) ? apply(createBlankBuilder()) : null);
 		} else {
 			const [key, cases] = args;
-			return derive([(props) => {
+			return applyBranch((props) => {
 				const branch = cases[props[key]];
-				if (!branch) return "";
-				return resolveClasses(branch(createBlankBuilder()).classes, props);
-			}]);
+				return branch ? branch(createBlankBuilder()) : null;
+			});
 		}
 	};
 	el.cls = (value) => typeof value === "function" ? derive([value]) : derive([value]);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "poseui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Type-safe HTML templating engine on steroids",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/guarana-studio/poseui.git"
+    "url": "git+https://github.com/guarana-studio/pose.git"
   },
   "files": [
     "dist"