poseui 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { GenerateOptions } from "@unocss/core";
+
 //#region src/index.d.ts
 interface StandardSchemaV1<Input = unknown, Output = Input> {
   readonly "~standard": StandardSchemaV1.Props<Input, Output>;
@@ -39,13 +41,13 @@ declare class PoseValidationError extends Error {
   constructor(issues: ReadonlyArray<StandardSchemaV1.Issue>);
 }
 type Dyn<TProps, T> = T | ((props: TProps) => T);
-type ChildValue = string | number | PoseElement<any, any> | Array<string | number | PoseElement<any, any>>;
+type ChildValue = string | number | undefined | null | PoseElement<any, any> | Array<string | number | PoseElement<any, any> | undefined | null>;
 type Child<TProps> = ChildValue | ((props: TProps) => ChildValue);
 type RenderReturn<TSchema extends StandardSchemaV1 | undefined> = TSchema extends StandardSchemaV1 ? ReturnType<TSchema["~standard"]["validate"]> extends Promise<any> ? Promise<string> : string : string;
-type CallArgs<TProps extends Record<string, unknown>> = [keyof TProps] extends [never] ? [] | [TProps] : [TProps];
+type CallArgs<TProps extends Record<string, unknown>, TSchema> = TSchema extends StandardSchemaV1 ? [TProps?] : [keyof TProps] extends [never] ? [TProps?] : [TProps];
 type ClassEntry<TProps> = string | ((props: TProps) => string);
 interface PoseElement<TProps extends Record<string, unknown>, TSchema extends StandardSchemaV1 | undefined = undefined> {
-  (...args: CallArgs<TProps>): RenderReturn<TSchema>;
+  (...args: CallArgs<TProps, TSchema>): RenderReturn<TSchema>;
   readonly classes: ReadonlyArray<ClassEntry<TProps>>;
   /**
    * Bind a Standard Schema (Zod, Valibot, ArkType, …).
@@ -780,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.
    */
@@ -806,11 +808,13 @@ 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' })
    */
-  render(...args: CallArgs<TProps>): Promise<{
+  render(props?: CallArgs<TProps, TSchema>[0], opts?: {
+    generatorOptions?: Partial<GenerateOptions<false>>;
+  }): Promise<{
     html: string;
     css: string;
   }>;

package/dist/index.js

@@ -31,11 +31,11 @@ function resolveClasses(classes, props) {
 }
 function renderChild(child, props) {
 	if (typeof child === "function") return renderChild(child(props), props);
-	if (Array.isArray(child)) return child.map((c) => renderChild(c, props)).join("");
+	if (Array.isArray(child)) return child.filter((c) => c != null).map((c) => renderChild(c, props)).join("");
 	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,27 +465,37 @@ 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]);
-	el.render = async (...args) => {
-		const html = render(...args);
+	el.render = async (props, opts) => {
+		const html = render(props);
 		const resolvedHtml = html instanceof Promise ? await html : html;
-		const { css } = await (await getGenerator()).generate(resolvedHtml, { preflights: false });
+		const { css } = await (await getGenerator()).generate(resolvedHtml, opts?.generatorOptions);
 		return {
 			html: resolvedHtml,
 			css
@@ -497,7 +508,7 @@ function createBuilder(state) {
 	});
 	return el;
 }
-let _generator = null;
+let _generator = void 0;
 async function getGenerator() {
 	if (_generator) return _generator;
 	const { createGenerator } = await import("@unocss/core");

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "poseui",
-  "version": "0.0.1",
+  "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"