@sigx/lynx-daisyui 0.1.3 → 0.4.1

package/dist/index.js

@@ -1,552 +1,38 @@
-import { component as e, compound as t, signal as n } from "@sigx/lynx";
-import { jsx as r, jsxs as i } from "@sigx/lynx/jsx-runtime";
-//#region src/feedback/Loading.tsx
-var a = e(({ props: e }) => {
-	let t = () => {
-		let t = ["loading"];
-		return t.push(`loading-${e.type ?? "spinner"}`), e.size && t.push(`loading-${e.size}`), e.color && t.push(`text-${e.color}`), e.class && t.push(e.class), t.join(" ");
-	};
-	return () => /* @__PURE__ */ r("view", { class: t() });
-}), o = {
-	primary: "btn-primary",
-	secondary: "btn-secondary",
-	accent: "btn-accent",
-	info: "btn-info",
-	success: "btn-success",
-	warning: "btn-warning",
-	error: "btn-error",
-	ghost: "btn-ghost",
-	link: "btn-link",
-	neutral: "btn-neutral"
-}, s = {
-	xs: "btn-xs",
-	sm: "btn-sm",
-	md: "",
-	lg: "btn-lg",
-	xl: "btn-xl"
-}, c = e(({ props: e, slots: t, emit: n }) => {
-	let i = () => {
-		let t = ["btn"];
-		if (e.variant && t.push(o[e.variant]), e.size) {
-			let n = s[e.size];
-			n && t.push(n);
-		}
-		return e.outline && t.push("btn-outline"), e.soft && t.push("btn-soft"), e.wide && t.push("btn-wide"), e.loading && t.push("btn-loading"), e.block && t.push("btn-block"), e.circle && t.push("btn-circle"), e.square && t.push("btn-square"), e.active && t.push("btn-active"), e.disabled && t.push("btn-disabled"), e.class && t.push(e.class), t.join(" ");
-	};
-	return () => /* @__PURE__ */ r("view", {
-		class: i(),
-		bindtap: () => {
-			!e.disabled && !e.loading && n("press");
-		},
-		children: e.loading ? /* @__PURE__ */ r(a, {
-			type: "spinner",
-			size: "sm"
-		}) : t.default?.()
-	});
-}), l = t(e(({ props: e, slots: t }) => {
-	let n = () => {
-		let t = ["card"];
-		return e.bordered && t.push("card-bordered"), e.compact && t.push("card-compact"), e.shadow === !0 ? t.push("shadow-md") : e.shadow === "sm" ? t.push("shadow-sm") : e.shadow === "md" ? t.push("shadow-md") : e.shadow === "lg" ? t.push("shadow-lg") : e.shadow === void 0 && t.push("shadow-md"), e.class && t.push(e.class), t.join(" ");
-	};
-	return () => /* @__PURE__ */ r("view", {
-		class: n(),
-		children: t.default?.()
-	});
-}), {
-	Body: e(({ props: e, slots: t }) => () => /* @__PURE__ */ r("view", {
-		class: `card-body${e.class ? " " + e.class : ""}`,
-		children: t.default?.()
-	})),
-	Title: e(({ props: e, slots: t }) => () => /* @__PURE__ */ r("text", {
-		class: `card-title${e.class ? " " + e.class : ""}`,
-		children: t.default?.()
-	})),
-	Actions: e(({ props: e, slots: t }) => () => /* @__PURE__ */ r("view", {
-		class: `card-actions${e.class ? " " + e.class : ""}`,
-		children: t.default?.()
-	}))
-});
-//#endregion
-//#region src/shared/styles.ts
-function u(e, t) {
-	if (e === void 0) return {};
-	if (typeof e == "number") return {
-		[`${t}Top`]: e,
-		[`${t}Right`]: e,
-		[`${t}Bottom`]: e,
-		[`${t}Left`]: e
-	};
-	let n = {};
-	return e.top === void 0 ? e.y !== void 0 && (n[`${t}Top`] = e.y) : n[`${t}Top`] = e.top, e.bottom === void 0 ? e.y !== void 0 && (n[`${t}Bottom`] = e.y) : n[`${t}Bottom`] = e.bottom, e.right === void 0 ? e.x !== void 0 && (n[`${t}Right`] = e.x) : n[`${t}Right`] = e.right, e.left === void 0 ? e.x !== void 0 && (n[`${t}Left`] = e.x) : n[`${t}Left`] = e.left, n;
-}
-function d(e) {
-	let t = {};
-	return e.width !== void 0 && (t.width = e.width), e.height !== void 0 && (t.height = e.height), e.flex !== void 0 && (t.flex = e.flex), e.background !== void 0 && (t.backgroundColor = e.background), e.borderRadius !== void 0 && (t.borderRadius = e.borderRadius), Object.assign(t, u(e.padding, "padding")), Object.assign(t, u(e.margin, "margin")), t;
-}
-//#endregion
-//#region src/layout/Row.tsx
-var f = e(({ props: e, slots: t }) => {
-	let n = () => {
-		let t = {
-			display: "flex",
-			flexDirection: "row"
-		};
-		e.gap !== void 0 && (t.gap = e.gap), e.align && (t.alignItems = e.align), e.justify && (t.justifyContent = e.justify), e.wrap && (t.flexWrap = "wrap");
-		let n = d({
-			width: e.width,
-			height: e.height,
-			flex: e.flex,
-			background: e.background,
-			borderRadius: e.borderRadius,
-			padding: e.padding,
-			margin: e.margin
-		});
-		for (let e in n) t[e] = n[e];
-		return t;
-	};
-	return () => /* @__PURE__ */ r("view", {
-		class: e.class,
-		style: n(),
-		children: t.default?.()
-	});
-}), p = e(({ props: e, slots: t }) => {
-	let n = () => {
-		let t = {
-			display: "flex",
-			flexDirection: "column"
-		};
-		e.gap !== void 0 && (t.gap = e.gap), e.align && (t.alignItems = e.align), e.justify && (t.justifyContent = e.justify), e.wrap && (t.flexWrap = "wrap");
-		let n = d({
-			width: e.width,
-			height: e.height,
-			flex: e.flex,
-			background: e.background,
-			borderRadius: e.borderRadius,
-			padding: e.padding,
-			margin: e.margin
-		});
-		for (let e in n) t[e] = n[e];
-		return t;
-	};
-	return () => /* @__PURE__ */ r("view", {
-		class: e.class,
-		style: n(),
-		children: t.default?.()
-	});
-}), m = e(({ props: e, slots: t }) => {
-	let n = () => {
-		let t = {
-			display: "flex",
-			justifyContent: "center",
-			alignItems: "center"
-		}, n = d({
-			width: e.width,
-			height: e.height,
-			flex: e.flex,
-			background: e.background,
-			borderRadius: e.borderRadius
-		});
-		for (let e in n) t[e] = n[e];
-		return t;
-	};
-	return () => /* @__PURE__ */ r("view", {
-		class: e.class,
-		style: n(),
-		children: t.default?.()
-	});
-}), h = e(({ props: e }) => {
-	let t = () => e.size === void 0 ? { flex: 1 } : {
-		width: e.size,
-		height: e.size
-	};
-	return () => /* @__PURE__ */ r("view", {
-		class: e.class,
-		style: t()
-	});
-}), g = e(({ props: e, slots: t }) => {
-	let n = () => {
-		let t = {};
-		return e.height !== void 0 && (t.height = e.height), e.width !== void 0 && (t.width = e.width), e.flex !== void 0 && (t.flex = e.flex), t;
-	};
-	return () => {
-		let i = e.direction ?? "vertical";
-		return /* @__PURE__ */ r("scroll-view", {
-			class: e.class,
-			style: n(),
-			"scroll-orientation": i,
-			"scroll-y": i === "vertical" ? !0 : void 0,
-			"scroll-x": i === "horizontal" ? !0 : void 0,
-			"show-scrollbar": e.showScrollbar,
-			bounces: e.bounces,
-			children: t.default?.()
-		});
-	};
-}), _ = e(({ props: e }) => {
-	let t = () => {
-		let t = [e.vertical ? "divider-vertical" : "divider"];
-		return e.class && t.push(e.class), t.join(" ");
-	}, n = () => {
-		let t = {};
-		return e.color && (t.backgroundColor = e.color), e.margin !== void 0 && (e.vertical ? (t.marginLeft = e.margin, t.marginRight = e.margin) : (t.marginTop = e.margin, t.marginBottom = e.margin)), t;
-	};
-	return () => /* @__PURE__ */ r("view", {
-		class: t(),
-		style: n()
-	});
-}), v = {
-	xs: "input-xs",
-	sm: "input-sm",
-	md: "",
-	lg: "input-lg"
-}, y = e(({ props: e }) => {
-	let t = () => {
-		let t = ["input"];
-		if (e.variant === "bordered" && t.push("input-bordered"), e.variant === "ghost" && t.push("input-ghost"), e.color && t.push(`input-${e.color}`), e.size) {
-			let n = v[e.size];
-			n && t.push(n);
-		}
-		return e.class && t.push(e.class), t.join(" ");
-	};
-	return () => /* @__PURE__ */ r("input", {
-		class: t(),
-		placeholder: e.placeholder,
-		type: e.type ?? "text",
-		disabled: e.disabled,
-		model: e.model
-	});
-}), b = {
-	xs: 10,
-	sm: 16,
-	md: 20,
-	lg: 24
-}, x = e(({ props: e, emit: t }) => {
-	let n = () => {
-		let t = ["toggle"], n = e.size ?? "md";
-		return t.push(`toggle-${n}`), e.color && t.push(`toggle-${e.color}`), e.checked && t.push("toggle-checked"), e.disabled && t.push("toggle-disabled"), e.class && t.push(e.class), t.join(" ");
-	};
-	return () => {
-		let i = !!e.checked, a = e.size ?? "md", o = i ? b[a] : 0;
-		return /* @__PURE__ */ r("view", {
-			class: n(),
-			bindtap: () => {
-				e.disabled || t("change", !i);
-			},
-			children: /* @__PURE__ */ r("view", {
-				class: "toggle-thumb",
-				style: { transform: `translateX(${o}px)` }
-			})
-		});
-	};
-}), S = {
-	xs: 10,
-	sm: 12,
-	md: 14,
-	lg: 19
-}, C = e(({ props: e, emit: t }) => {
-	let n = () => {
-		let t = ["checkbox"], n = e.size ?? "md";
-		return n !== "md" && t.push(`checkbox-${n}`), e.color && t.push(`checkbox-${e.color}`), e.checked && t.push("checkbox-checked"), e.disabled && t.push("checkbox-disabled"), e.class && t.push(e.class), t.join(" ");
-	};
-	return () => {
-		let i = !!e.checked, a = e.size ?? "md";
-		return /* @__PURE__ */ r("view", {
-			class: n(),
-			bindtap: () => {
-				e.disabled || t("change", !i);
-			},
-			children: i ? /* @__PURE__ */ r("text", {
-				class: "checkbox-mark",
-				style: { fontSize: S[a] },
-				children: "✓"
-			}) : null
-		});
-	};
-}), w = e(({ props: e, emit: t }) => {
-	let a = n({ open: !1 }), o = () => {
-		let t = ["select"];
-		return e.variant === "bordered" && t.push("select-bordered"), e.variant === "ghost" && t.push("select-ghost"), e.color && t.push(`select-${e.color}`), e.size && t.push(`select-${e.size}`), e.class && t.push(e.class), t.join(" ");
-	}, s = () => {
-		let t = (e.options ?? []).find((t) => t.value === e.value);
-		return t ? t.label : e.placeholder ?? "Select...";
-	};
-	return () => /* @__PURE__ */ i("view", {
-		style: {
-			position: "relative",
-			opacity: e.disabled ? .5 : 1
-		},
-		children: [/* @__PURE__ */ i("view", {
-			class: o(),
-			bindtap: () => {
-				e.disabled || (a.open = !a.open);
-			},
-			children: [/* @__PURE__ */ r("text", { children: s() }), /* @__PURE__ */ r("view", {
-				style: { marginLeft: "auto" },
-				children: /* @__PURE__ */ r("text", { children: a.open ? "▲" : "▼" })
-			})]
-		}), a.open && !e.disabled && /* @__PURE__ */ r("view", {
-			class: "select-dropdown",
-			style: {
-				position: "absolute",
-				top: "100%",
-				left: 0,
-				right: 0,
-				zIndex: 10
-			},
-			children: (e.options ?? []).map((n) => /* @__PURE__ */ r("view", {
-				class: `select-option${n.value === e.value ? " select-option-active" : ""}`,
-				bindtap: () => {
-					t("change", n.value), a.open = !1;
-				},
-				children: /* @__PURE__ */ r("text", { children: n.label })
-			}))
-		})]
-	});
-}), T = e(({ props: e, emit: t }) => {
-	let n = () => {
-		let t = ["radio"];
-		return e.color && t.push(`radio-${e.color}`), e.size && t.push(`radio-${e.size}`), e.checked && t.push("radio-checked"), e.class && t.push(e.class), t.join(" ");
-	};
-	return () => /* @__PURE__ */ i("view", {
-		style: {
-			flexDirection: "row",
-			alignItems: "center",
-			gap: 8,
-			opacity: e.disabled ? .5 : 1
-		},
-		bindtap: () => {
-			!e.disabled && e.value != null && t("select", e.value);
-		},
-		children: [/* @__PURE__ */ r("view", {
-			class: n(),
-			children: e.checked && /* @__PURE__ */ r("view", { class: "radio-mark" })
-		}), e.label && /* @__PURE__ */ r("text", { children: e.label })]
-	});
-}), E = t(e(({ props: e, slots: t }) => () => /* @__PURE__ */ r("view", {
-	class: e.class ?? "",
-	style: { gap: 8 },
-	children: t.default?.()
-})), { Item: T }), D = {
-	xs: "textarea-xs",
-	sm: "textarea-sm",
-	md: "",
-	lg: "textarea-lg"
-}, O = e(({ props: e }) => {
-	let t = () => {
-		let t = ["textarea"];
-		if (e.variant === "bordered" && t.push("textarea-bordered"), e.variant === "ghost" && t.push("textarea-ghost"), e.color && t.push(`textarea-${e.color}`), e.size) {
-			let n = D[e.size];
-			n && t.push(n);
-		}
-		return e.class && t.push(e.class), t.join(" ");
-	}, n = () => (e.rows ?? 3) * 20 + 16;
-	return () => /* @__PURE__ */ r("textarea", {
-		class: t(),
-		placeholder: e.placeholder,
-		disabled: e.disabled,
-		model: e.model,
-		style: { height: n() }
-	});
-}), k = e(({ props: e, slots: t }) => () => /* @__PURE__ */ i("view", {
-	class: ["form-control", e.class].filter(Boolean).join(" "),
-	style: { gap: 4 },
-	children: [
-		e.label && /* @__PURE__ */ r("view", {
-			class: "label",
-			children: /* @__PURE__ */ r("text", {
-				class: "label-text",
-				children: e.required ? `${e.label} *` : e.label
-			})
-		}),
-		t.default?.(),
-		e.error && /* @__PURE__ */ r("view", {
-			class: "label",
-			children: /* @__PURE__ */ r("text", {
-				class: "label-text-error",
-				children: e.error
-			})
-		})
-	]
-})), A = e(({ props: e, slots: t }) => {
-	let n = () => {
-		let t = ["badge"];
-		return e.variant && t.push(`badge-${e.variant}`), e.size && t.push(`badge-${e.size}`), e.outline && t.push("badge-outline"), e.class && t.push(e.class), t.join(" ");
-	};
-	return () => /* @__PURE__ */ r("view", {
-		class: n(),
-		children: t.default?.()
-	});
-}), j = e(({ props: e, slots: t }) => {
-	let n = () => {
-		let t = ["alert"];
-		return e.variant && t.push(`alert-${e.variant}`), e.class && t.push(e.class), t.join(" ");
-	};
-	return () => /* @__PURE__ */ r("view", {
-		class: n(),
-		children: t.default?.()
-	});
-}), M = e(({ props: e }) => {
-	let t = () => {
-		let t = ["progress"];
-		return e.color && t.push(`progress-${e.color}`), e.class && t.push(e.class), t.join(" ");
-	};
-	return () => {
-		let n = e.max ?? 100, i = Math.min(Math.max((e.value ?? 0) / n, 0), 1) * 100;
-		return /* @__PURE__ */ r("view", {
-			class: t(),
-			children: /* @__PURE__ */ r("view", {
-				class: "progress-bar",
-				style: { width: `${i}%` }
-			})
-		});
-	};
-}), N = t(e(({ props: e, slots: t }) => () => e.open ? /* @__PURE__ */ r("view", {
-	class: "modal-overlay",
-	bindtap: () => {
-		e.onClose?.();
-	},
-	children: /* @__PURE__ */ r("view", {
-		class: `modal-box${e.class ? " " + e.class : ""}`,
-		bindtap: (e) => {
-			e?.stopPropagation?.();
-		},
-		children: t.default?.()
-	})
-}) : /* @__PURE__ */ r("view", { style: { display: "none" } })), {
-	Header: e(({ props: e, slots: t }) => () => /* @__PURE__ */ r("view", {
-		class: `modal-header${e.class ? " " + e.class : ""}`,
-		children: t.default?.()
-	})),
-	Body: e(({ props: e, slots: t }) => () => /* @__PURE__ */ r("view", {
-		class: `modal-body${e.class ? " " + e.class : ""}`,
-		children: t.default?.()
-	})),
-	Actions: e(({ props: e, slots: t }) => () => /* @__PURE__ */ r("view", {
-		class: `modal-action${e.class ? " " + e.class : ""}`,
-		children: t.default?.()
-	}))
-}), P = e(({ props: e }) => () => {
-	let t = {};
-	if (e.width != null && (t.width = e.width), e.height != null && (t.height = e.height), e.circle) {
-		let n = e.width ?? e.height ?? 48;
-		t.width = n, t.height = n, t.borderRadius = typeof n == "number" ? n / 2 : "50%";
-	}
-	return /* @__PURE__ */ r("view", {
-		class: `skeleton${e.class ? " " + e.class : ""}`,
-		style: t
-	});
-}), F = t(e(({ props: e, slots: t }) => () => /* @__PURE__ */ r("view", {
-	class: `steps${e.vertical ?? !1 ? " steps-vertical" : " steps-horizontal"}${e.class ? " " + e.class : ""}`,
-	children: t.default?.()
-})), { Step: e(({ props: e, slots: t }) => () => {
-	let n = e.color, a = n ? ` step-${n}` : "";
-	return /* @__PURE__ */ i("view", {
-		class: `step${a}${e.class ? " " + e.class : ""}`,
-		children: [/* @__PURE__ */ r("view", {
-			class: `step-indicator${a}`,
-			children: e.content ? /* @__PURE__ */ r("text", {
-				style: { fontSize: 14 },
-				children: e.content
-			}) : null
-		}), t.default?.()]
-	});
-}) }), I = t(e(({ props: e, slots: t }) => () => /* @__PURE__ */ r("view", {
-	class: `tabs${e.class ? " " + e.class : ""}`,
-	children: t.default?.()
-})), { Tab: e(({ props: e, slots: t }) => () => /* @__PURE__ */ i("view", {
-	class: `tab${e.active ?? !1 ? " tab-active" : ""}${e.class ? " " + e.class : ""}`,
-	bindtap: () => {
-		e.onPress?.();
-	},
-	children: [t.default?.(), e.label ? /* @__PURE__ */ r("text", { children: e.label }) : null]
-})) }), L = {
-	xs: 24,
-	sm: 32,
-	md: 48,
-	lg: 64,
-	xl: 96
-}, R = {
-	xs: 10,
-	sm: 12,
-	md: 18,
-	lg: 24,
-	xl: 36
-}, z = e(({ props: e }) => () => {
-	let t = e.size || "md", n = L[t], i = ["avatar"];
-	e.online && i.push("online"), e.offline && i.push("offline"), e.placeholder && !e.src && i.push("placeholder"), e.class && i.push(e.class);
-	let a = e.rounded, o = a === "full" || a === !0 ? n / 2 : 8, s = {
-		width: n,
-		height: n,
-		borderRadius: o,
-		overflow: "hidden",
-		alignItems: "center",
-		justifyContent: "center",
-		display: "flex"
-	};
-	return e.src ? /* @__PURE__ */ r("view", {
-		class: i.join(" "),
-		children: /* @__PURE__ */ r("view", {
-			style: s,
-			children: /* @__PURE__ */ r("image", {
-				src: e.src,
-				style: {
-					width: n,
-					height: n,
-					borderRadius: o
-				}
-			})
-		})
-	}) : /* @__PURE__ */ r("view", {
-		class: i.join(" "),
-		children: /* @__PURE__ */ r("view", {
-			class: "avatar-placeholder",
-			style: s,
-			children: /* @__PURE__ */ r("text", {
-				style: { fontSize: R[t] },
-				children: e.placeholder || "?"
-			})
-		})
-	});
-}), B = {
-	xs: "text-xs",
-	sm: "text-sm",
-	base: "text-base",
-	lg: "text-lg",
-	xl: "text-xl",
-	"2xl": "text-2xl",
-	"3xl": "text-3xl"
-}, V = {
-	light: "font-light",
-	normal: "font-normal",
-	medium: "font-medium",
-	semibold: "font-semibold",
-	bold: "font-bold"
-}, H = e(({ props: e, slots: t }) => {
-	let n = () => {
-		let t = [];
-		return e.size && t.push(B[e.size]), e.weight && t.push(V[e.weight]), e.color && t.push(`text-${e.color}`), e.class && t.push(e.class), t.join(" ");
-	};
-	return () => /* @__PURE__ */ r("text", {
-		class: n(),
-		children: t.default?.()
-	});
-}), U = {
-	1: "text-3xl font-bold",
-	2: "text-2xl font-bold",
-	3: "text-xl font-semibold",
-	4: "text-lg font-semibold",
-	5: "text-base font-semibold",
-	6: "text-sm font-semibold"
-}, W = e(({ props: e, slots: t }) => {
-	let n = () => {
-		let t = [U[e.level ?? 2], "text-base-content"];
-		return e.class && t.push(e.class), t.join(" ");
-	};
-	return () => /* @__PURE__ */ r("text", {
-		class: n(),
-		children: t.default?.()
-	});
-});
-//#endregion
-export { j as Alert, z as Avatar, A as Badge, c as Button, l as Card, m as Center, C as Checkbox, p as Col, _ as Divider, k as FormField, W as Heading, y as Input, a as Loading, N as Modal, M as Progress, E as Radio, f as Row, g as ScrollView, w as Select, P as Skeleton, h as Spacer, F as Steps, I as Tabs, H as Text, O as Textarea, x as Toggle };
-
-//# sourceMappingURL=index.js.map
+// Buttons
+export { Button } from './buttons/Button.js';
+// Layout
+export { Card } from './layout/Card.js';
+export { Row } from './layout/Row.js';
+export { Col } from './layout/Col.js';
+export { Center } from './layout/Center.js';
+export { Spacer } from './layout/Spacer.js';
+export { ScrollView } from './layout/ScrollView.js';
+export { Divider } from './layout/Divider.js';
+export { resolveDaisyColor } from './shared/styles.js';
+// Forms
+export { Input } from './forms/Input.js';
+export { Toggle } from './forms/Toggle.js';
+export { Checkbox } from './forms/Checkbox.js';
+export { Select } from './forms/Select.js';
+export { Radio } from './forms/Radio.js';
+export { Textarea } from './forms/Textarea.js';
+export { FormField } from './forms/FormField.js';
+// Feedback
+export { Badge } from './feedback/Badge.js';
+export { Alert } from './feedback/Alert.js';
+export { Loading } from './feedback/Loading.js';
+export { Progress } from './feedback/Progress.js';
+export { Modal } from './feedback/Modal.js';
+export { Skeleton } from './feedback/Skeleton.js';
+export { Steps } from './feedback/Steps.js';
+// Navigation
+export { Tabs } from './navigation/Tabs.js';
+export { NavTabBar } from './navigation/NavTabBar.js';
+export { NavHeader } from './navigation/NavHeader.js';
+// Theme
+export { ThemeProvider, useTheme } from './theme/ThemeProvider.js';
+// Data
+export { Avatar } from './data/Avatar.js';
+// Typography
+export { Text } from './typography/Text.js';
+export { Heading } from './typography/Heading.js';

package/dist/layout/Card.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component, compound } from '@sigx/lynx';
+const _Card = component(({ props, slots }) => {
+    const getClasses = () => {
+        const c = ['card'];
+        if (props.bordered)
+            c.push('card-bordered');
+        if (props.compact)
+            c.push('card-compact');
+        if (props.shadow === true)
+            c.push('shadow-md');
+        else if (props.shadow === 'sm')
+            c.push('shadow-sm');
+        else if (props.shadow === 'md')
+            c.push('shadow-md');
+        else if (props.shadow === 'lg')
+            c.push('shadow-lg');
+        else if (props.shadow === undefined)
+            c.push('shadow-md');
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    return () => _jsx("view", { class: getClasses(), children: slots.default?.() });
+});
+const CardBody = component(({ props, slots }) => {
+    return () => (_jsx("view", { class: `card-body${props.class ? ' ' + props.class : ''}`, children: slots.default?.() }));
+});
+const CardTitle = component(({ props, slots }) => {
+    return () => (_jsx("text", { class: `card-title${props.class ? ' ' + props.class : ''}`, children: slots.default?.() }));
+});
+const CardActions = component(({ props, slots }) => {
+    return () => (_jsx("view", { class: `card-actions${props.class ? ' ' + props.class : ''}`, children: slots.default?.() }));
+});
+export const Card = compound(_Card, {
+    Body: CardBody,
+    Title: CardTitle,
+    Actions: CardActions,
+});

package/dist/layout/Center.d.ts

@@ -1,5 +1,6 @@
 import { type Define } from '@sigx/lynx';
-export type CenterProps = Define.Prop<'width', number | string, false> & Define.Prop<'height', number | string, false> & Define.Prop<'flex', number, false> & Define.Prop<'background', string, false> & Define.Prop<'borderRadius', number, false> & Define.Prop<'class', string, false> & Define.Slot<'default'>;
+import { type BackgroundValue } from '../shared/styles.js';
+export type CenterProps = Define.Prop<'width', number | string, false> & Define.Prop<'height', number | string, false> & Define.Prop<'flex', number, false> & Define.Prop<'background', BackgroundValue, false> & Define.Prop<'borderRadius', number, false> & Define.Prop<'class', string, false> & Define.Slot<'default'>;
 export declare const Center: import("@sigx/runtime-core").ComponentFactory<CenterProps, void, {
     default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
 }>;

package/dist/layout/Center.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+import { resolveBoxStyle } from '../shared/styles.js';
+export const Center = component(({ props, slots }) => {
+    const getStyle = () => {
+        const style = {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+        };
+        const box = resolveBoxStyle({
+            width: props.width,
+            height: props.height,
+            flex: props.flex,
+            background: props.background,
+            borderRadius: props.borderRadius,
+        });
+        for (const key in box) {
+            style[key] = box[key];
+        }
+        return style;
+    };
+    return () => (_jsx("view", { class: props.class, style: getStyle(), children: slots.default?.() }));
+});

package/dist/layout/Col.d.ts

@@ -1,6 +1,6 @@
 import { type Define } from '@sigx/lynx';
-import { type SpacingValue } from '../shared/styles.js';
-export type ColProps = Define.Prop<'gap', number, false> & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false> & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false> & Define.Prop<'wrap', boolean, false> & Define.Prop<'padding', SpacingValue, false> & Define.Prop<'margin', SpacingValue, false> & Define.Prop<'width', number | string, false> & Define.Prop<'height', number | string, false> & Define.Prop<'flex', number, false> & Define.Prop<'background', string, false> & Define.Prop<'borderRadius', number, false> & Define.Prop<'class', string, false> & Define.Slot<'default'>;
+import { type SpacingValue, type BackgroundValue } from '../shared/styles.js';
+export type ColProps = Define.Prop<'gap', number, false> & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false> & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false> & Define.Prop<'wrap', boolean, false> & Define.Prop<'padding', SpacingValue, false> & Define.Prop<'margin', SpacingValue, false> & Define.Prop<'width', number | string, false> & Define.Prop<'height', number | string, false> & Define.Prop<'flex', number, false> & Define.Prop<'background', BackgroundValue, false> & Define.Prop<'borderRadius', number, false> & Define.Prop<'class', string, false> & Define.Slot<'default'>;
 export declare const Col: import("@sigx/runtime-core").ComponentFactory<ColProps, void, {
     default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
 }>;