poseui 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -46,6 +46,9 @@ 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>, TSchema> = TSchema extends StandardSchemaV1 ? [TProps?] : [keyof TProps] extends [never] ? [TProps?] : [TProps];
 type ClassEntry<TProps> = string | ((props: TProps) => string);
+/** null means the attribute is omitted from the rendered output */
+type AttrValue = string | null;
+type AttrRecord<TProps> = Record<string, Dyn<TProps, AttrValue>>;
 interface PoseElement<TProps extends Record<string, unknown>, TSchema extends StandardSchemaV1 | undefined = undefined> {
   (...args: CallArgs<TProps, TSchema>): RenderReturn<TSchema>;
   readonly classes: ReadonlyArray<ClassEntry<TProps>>;
@@ -782,22 +785,40 @@ 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.
    */
   when(pred: (props: TProps) => boolean, apply: (b: PoseElement<TProps, undefined>) => PoseElement<TProps, any>): PoseElement<TProps, TSchema>;
   when<K extends keyof TProps>(key: K, cases: Partial<Record<TProps[K] & PropertyKey, (b: PoseElement<TProps, undefined>) => PoseElement<TProps, any>>>): PoseElement<TProps, TSchema>;
+  /**
+   * Set a single HTML attribute. Value can be static or derived from props.
+   * Pass `null` to omit the attribute.
+   *
+   * @example
+   * pose.as('a').attr('href', ({ url }) => url).attr('target', '_blank')
+   */
+  attr(name: string, value: Dyn<TProps, AttrValue>): PoseElement<TProps, TSchema>;
+  /**
+   * Set multiple HTML attributes at once. Each value can be static or a
+   * `(props) => string | null` function. `null` omits the attribute.
+   *
+   * @example
+   * pose.as('input').attrs({ type: 'text', name: ({ field }) => field, required: ({ req }) => req ? '' : null })
+   * // or with a props function for multi-field logic:
+   * pose.as('a').attrs(({ url, external }) => ({ href: url, target: external ? '_blank' : null }))
+   */
+  attrs(record: AttrRecord<TProps> | ((props: TProps) => Record<string, AttrValue>)): PoseElement<TProps, TSchema>;
   /**
    * Append any raw Tailwind class — static or derived from props.
    * @example
@@ -808,7 +829,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' })
    */
@@ -825,4 +846,4 @@ interface Pose {
 declare const pose: Pose;
 declare const div: PoseElement<Record<never, never>, undefined>;
 //#endregion
-export { Child, ChildValue, Dyn, Pose, PoseElement, PoseValidationError, StandardSchemaV1, pose as default, div };
+export { AttrRecord, AttrValue, Child, ChildValue, Dyn, Pose, PoseElement, PoseValidationError, StandardSchemaV1, pose as default, div };

package/dist/index.js

@@ -29,26 +29,47 @@ function arbitrary(value) {
 function resolveClasses(classes, props) {
 	return classes.map((c) => typeof c === "function" ? c(props) : c).filter(Boolean).join(" ");
 }
+function renderAttrPair(name, value) {
+	if (value === null) return "";
+	return value === "" ? name : `${name}="${value}"`;
+}
+function resolveAttrs(attrs, props) {
+	const parts = [];
+	for (const entry of attrs) if (entry[0] === "single") {
+		const [, name, value] = entry;
+		const rendered = renderAttrPair(name, typeof value === "function" ? value(props) : value);
+		if (rendered) parts.push(rendered);
+	} else {
+		const [, fn] = entry;
+		for (const [name, value] of Object.entries(fn(props))) {
+			const rendered = renderAttrPair(name, value);
+			if (rendered) parts.push(rendered);
+		}
+	}
+	return parts.join(" ");
+}
 function renderChild(child, props) {
 	if (typeof child === "function") return renderChild(child(props), props);
 	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",
 		classes: [],
+		attrs: [],
 		children: [],
 		schema: void 0
 	});
 }
 function createBuilder(state) {
-	function derive(extraClasses = [], extraChildren = []) {
+	function derive(extraClasses = [], extraChildren = [], extraAttrs = []) {
 		return createBuilder({
 			...state,
 			classes: [...state.classes, ...extraClasses],
+			attrs: [...state.attrs, ...extraAttrs],
 			children: [...state.children, ...extraChildren]
 		});
 	}
@@ -64,9 +85,11 @@ function createBuilder(state) {
 	}
 	function buildHtml(resolvedProps) {
 		const classStr = resolveClasses(state.classes, resolvedProps);
+		const attrsStr = resolveAttrs(state.attrs, resolvedProps);
 		const childrenStr = state.children.map((c) => renderChild(c, resolvedProps)).join("");
 		const classAttr = classStr ? ` class="${classStr}"` : "";
-		return `<${state.tag}${classAttr}>${childrenStr}</${state.tag}>`;
+		const attrsAttr = attrsStr ? ` ${attrsStr}` : "";
+		return `<${state.tag}${classAttr}${attrsAttr}>${childrenStr}</${state.tag}>`;
 	}
 	function render(...args) {
 		const props = args[0] ?? {};
@@ -76,6 +99,7 @@ function createBuilder(state) {
 		return buildHtml(result);
 	}
 	render.__pose = true;
+	render.__state = state;
 	const el = render;
 	Object.defineProperty(el, "classes", {
 		get: () => state.classes,
@@ -84,6 +108,7 @@ function createBuilder(state) {
 	el.input = (schema) => createBuilder({
 		tag: state.tag,
 		classes: state.classes,
+		attrs: state.attrs,
 		children: state.children,
 		schema
 	});
@@ -464,22 +489,45 @@ 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.attr = (name, value) => derive([], [], [[
+		"single",
+		name,
+		value
+	]]);
+	el.attrs = (recordOrFn) => {
+		if (typeof recordOrFn === "function") return derive([], [], [["record", recordOrFn]]);
+		return derive([], [], Object.entries(recordOrFn).map(([name, value]) => [
+			"single",
+			name,
+			value
+		]));
+	};
 	el.cls = (value) => typeof value === "function" ? derive([value]) : derive([value]);
 	el.render = async (props, opts) => {
 		const html = render(props);
@@ -493,6 +541,7 @@ function createBuilder(state) {
 	el.child = (value) => createBuilder({
 		...state,
 		classes: [...state.classes],
+		attrs: [...state.attrs],
 		children: [...state.children, value]
 	});
 	return el;
@@ -509,6 +558,7 @@ const pose = { as(tag) {
 	return createBuilder({
 		tag,
 		classes: [],
+		attrs: [],
 		children: [],
 		schema: void 0
 	});

package/package.json

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