@sigx/daisyui 0.1.6

package/dist/layout-0aaJX4B2.js

@@ -0,0 +1,554 @@
+import { a as resolveRadius, i as resolveBackground, n as directionClasses, o as resolveSize, r as justifyClasses, s as resolveSpacing, t as alignClasses } from "./styles-DFkMxi90.js";
+import { component, compound } from "sigx";
+import { jsx, jsxs } from "sigx/jsx-runtime";
+const Hero = compound(component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["hero"];
+		if (props.minHeight) classes.push(`min-h-[${props.minHeight}]`);
+		else classes.push("min-h-96");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	const getStyle = () => {
+		if (props.bgImage) return { backgroundImage: `url(${props.bgImage})` };
+		return {};
+	};
+	return () => /* @__PURE__ */ jsxs("div", {
+		class: getClasses(),
+		style: getStyle(),
+		children: [props.overlay && /* @__PURE__ */ jsx("div", {
+			class: "hero-overlay bg-opacity-60",
+			children: slots.overlay?.()
+		}), slots.default?.()]
+	});
+}), { Content: component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["hero-content", "text-center"];
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: /* @__PURE__ */ jsx("div", {
+			class: "max-w-md",
+			children: slots.default?.()
+		})
+	});
+}) });
+const Join = compound(component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["join"];
+		if (props.vertical) classes.push("join-vertical");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+}), { Item: component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["join-item"];
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+}) });
+var chatBubbleColorClasses = {
+	primary: "chat-bubble-primary",
+	secondary: "chat-bubble-secondary",
+	accent: "chat-bubble-accent",
+	info: "chat-bubble-info",
+	success: "chat-bubble-success",
+	warning: "chat-bubble-warning",
+	error: "chat-bubble-error"
+};
+const Chat = compound(component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["chat"];
+		if (props.start) classes.push("chat-start");
+		else if (props.end) classes.push("chat-end");
+		else classes.push("chat-start");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+}), {
+	Image: component(({ props }) => {
+		const getClasses = () => {
+			const classes = ["chat-image", "avatar"];
+			if (props.class) classes.push(props.class);
+			return classes.join(" ");
+		};
+		return () => /* @__PURE__ */ jsx("div", {
+			class: getClasses(),
+			children: /* @__PURE__ */ jsx("div", {
+				class: "w-10 rounded-full",
+				children: /* @__PURE__ */ jsx("img", {
+					src: props.src,
+					alt: props.alt ?? "Avatar"
+				})
+			})
+		});
+	}),
+	Header: component(({ props, slots }) => {
+		const getClasses = () => {
+			const classes = ["chat-header"];
+			if (props.class) classes.push(props.class);
+			return classes.join(" ");
+		};
+		return () => /* @__PURE__ */ jsxs("div", {
+			class: getClasses(),
+			children: [slots.default?.() ?? props.name, props.time && /* @__PURE__ */ jsx("time", {
+				class: "text-xs opacity-50 ml-1",
+				children: props.time
+			})]
+		});
+	}),
+	Bubble: component(({ props, slots }) => {
+		const getClasses = () => {
+			const classes = ["chat-bubble"];
+			if (props.color) classes.push(chatBubbleColorClasses[props.color]);
+			if (props.class) classes.push(props.class);
+			return classes.join(" ");
+		};
+		return () => /* @__PURE__ */ jsx("div", {
+			class: getClasses(),
+			children: slots.default?.()
+		});
+	}),
+	Footer: component(({ props, slots }) => {
+		const getClasses = () => {
+			const classes = ["chat-footer", "opacity-50"];
+			if (props.class) classes.push(props.class);
+			return classes.join(" ");
+		};
+		return () => /* @__PURE__ */ jsx("div", {
+			class: getClasses(),
+			children: slots.default?.()
+		});
+	})
+});
+const Carousel = compound(component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["carousel", "rounded-box"];
+		if (props.center) classes.push("carousel-center");
+		if (props.vertical) classes.push("carousel-vertical");
+		if (props.fullWidth) classes.push("w-full");
+		if (props.snap === "start") classes.push("carousel-start");
+		if (props.snap === "end") classes.push("carousel-end");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.() ?? props.items?.map((item) => /* @__PURE__ */ jsx("div", {
+			id: item.id,
+			class: "carousel-item",
+			children: item.content()
+		}))
+	});
+}), { Item: component(({ props, slots, emit }) => {
+	const getClasses = () => {
+		const classes = ["carousel-item"];
+		if (props.fullWidth) classes.push("w-full");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		id: props.id,
+		class: getClasses(),
+		onClick: (e) => emit("click", e),
+		children: slots.default?.()
+	});
+}) });
+var sizeClasses = {
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg",
+	xl: "max-w-xl",
+	"2xl": "max-w-2xl",
+	full: "max-w-full"
+};
+const Container = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = [];
+		classes.push(sizeClasses[props.size ?? "2xl"]);
+		if (props.center !== false) classes.push("mx-auto");
+		if (props.padding !== false) classes.push("px-4 py-6");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+});
+const Card = compound(component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["card"];
+		classes.push(props.bgColor ?? "bg-base-100");
+		if (props.shadow === true || props.shadow === void 0) classes.push("shadow-xl");
+		else if (props.shadow === "sm") classes.push("shadow-sm");
+		else if (props.shadow === "md") classes.push("shadow-md");
+		else if (props.shadow === "lg") classes.push("shadow-lg");
+		if (props.variant === "compact") classes.push("card-compact");
+		if (props.variant === "side") classes.push("card-side");
+		if (props.bordered) classes.push("card-bordered");
+		if (props.glass) classes.push("glass");
+		if (props.imageFull) classes.push("image-full");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+}), {
+	Body: component(({ props, slots }) => {
+		const getClasses = () => {
+			const classes = ["card-body"];
+			if (props.center) classes.push("items-center", "text-center");
+			if (props.class) classes.push(props.class);
+			return classes.join(" ");
+		};
+		return () => /* @__PURE__ */ jsx("div", {
+			class: getClasses(),
+			children: slots.default?.()
+		});
+	}),
+	Title: component(({ props, slots }) => {
+		const getClasses = () => {
+			const classes = ["card-title"];
+			if (props.class) classes.push(props.class);
+			return classes.join(" ");
+		};
+		return () => /* @__PURE__ */ jsx("h2", {
+			class: getClasses(),
+			children: slots.default?.()
+		});
+	}),
+	Actions: component(({ props, slots }) => {
+		const getClasses = () => {
+			const classes = ["card-actions"];
+			if (props.justify === "start") classes.push("justify-start");
+			else if (props.justify === "center") classes.push("justify-center");
+			else classes.push("justify-end");
+			if (props.class) classes.push(props.class);
+			return classes.join(" ");
+		};
+		return () => /* @__PURE__ */ jsx("div", {
+			class: getClasses(),
+			children: slots.default?.()
+		});
+	}),
+	Image: component(({ props }) => {
+		return () => /* @__PURE__ */ jsx("figure", {
+			class: props.class,
+			children: /* @__PURE__ */ jsx("img", {
+				src: props.src,
+				alt: props.alt ?? ""
+			})
+		});
+	})
+});
+const Stack = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["stack"];
+		if (props.direction === "top") classes.push("stack-top");
+		else if (props.direction === "start") classes.push("stack-start");
+		else if (props.direction === "end") classes.push("stack-end");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+});
+const Flex = component(({ props, slots }) => {
+	const getClassesAndStyles = () => {
+		const classes = [props.inline ? "inline-flex" : "flex"];
+		const styles = {};
+		classes.push(directionClasses[props.direction ?? "row"]);
+		classes.push(...resolveSpacing(props.gap, "gap"));
+		if (props.align) classes.push(alignClasses[props.align]);
+		if (props.justify) classes.push(justifyClasses[props.justify]);
+		if (props.wrap) classes.push("flex-wrap");
+		classes.push(...resolveSpacing(props.padding, "p"));
+		classes.push(...resolveSpacing(props.margin, "m"));
+		const sizeProps = [
+			{
+				value: props.width,
+				prefix: "w"
+			},
+			{
+				value: props.height,
+				prefix: "h"
+			},
+			{
+				value: props.minWidth,
+				prefix: "min-w"
+			},
+			{
+				value: props.minHeight,
+				prefix: "min-h"
+			},
+			{
+				value: props.maxWidth,
+				prefix: "max-w"
+			},
+			{
+				value: props.maxHeight,
+				prefix: "max-h"
+			}
+		];
+		for (const { value, prefix } of sizeProps) {
+			const result = resolveSize(value, prefix);
+			if (result.class) classes.push(result.class);
+			if (result.style) styles[result.style.property] = result.style.value;
+		}
+		const radiusClass = resolveRadius(props.rounded);
+		if (radiusClass) classes.push(radiusClass);
+		classes.push(...resolveBackground(props.background));
+		if (props.grow) classes.push("flex-grow");
+		if (props.shrink) classes.push("flex-shrink");
+		if (props.class) classes.push(props.class);
+		return {
+			className: classes.join(" "),
+			style: Object.keys(styles).length > 0 ? styles : void 0
+		};
+	};
+	return () => {
+		const { className, style } = getClassesAndStyles();
+		return /* @__PURE__ */ jsx("div", {
+			class: className,
+			style,
+			children: slots.default?.()
+		});
+	};
+});
+const Row = component(({ props, slots }) => {
+	return () => /* @__PURE__ */ jsx(Flex, {
+		direction: props.reverse ? "row-reverse" : "row",
+		gap: props.gap,
+		align: props.align,
+		justify: props.justify,
+		wrap: props.wrap,
+		inline: props.inline,
+		padding: props.padding,
+		margin: props.margin,
+		width: props.width,
+		height: props.height,
+		minWidth: props.minWidth,
+		minHeight: props.minHeight,
+		maxWidth: props.maxWidth,
+		maxHeight: props.maxHeight,
+		rounded: props.rounded,
+		background: props.background,
+		grow: props.grow,
+		shrink: props.shrink,
+		class: props.class,
+		children: slots.default?.()
+	});
+});
+const Col = component(({ props, slots }) => {
+	return () => /* @__PURE__ */ jsx(Flex, {
+		direction: props.reverse ? "col-reverse" : "col",
+		gap: props.gap,
+		align: props.align,
+		justify: props.justify,
+		wrap: props.wrap,
+		inline: props.inline,
+		padding: props.padding,
+		margin: props.margin,
+		width: props.width,
+		height: props.height,
+		minWidth: props.minWidth,
+		minHeight: props.minHeight,
+		maxWidth: props.maxWidth,
+		maxHeight: props.maxHeight,
+		rounded: props.rounded,
+		background: props.background,
+		grow: props.grow,
+		shrink: props.shrink,
+		class: props.class,
+		children: slots.default?.()
+	});
+});
+const Divider = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["divider"];
+		if (props.vertical) classes.push("divider-horizontal");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+});
+const Footer = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = [
+			"footer",
+			"footer-center",
+			"p-10",
+			"bg-base-200",
+			"text-base-content"
+		];
+		if (props.center) classes.push("items-center");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("footer", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+});
+var linkColorClasses = {
+	primary: "link-primary",
+	secondary: "link-secondary",
+	accent: "link-accent",
+	neutral: "link-neutral",
+	info: "link-info",
+	success: "link-success",
+	warning: "link-warning",
+	error: "link-error"
+};
+const Link = component(({ props, slots, emit }) => {
+	const getClasses = () => {
+		const classes = ["link"];
+		if (props.color) classes.push(linkColorClasses[props.color]);
+		if (props.hover) classes.push("link-hover");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("a", {
+		href: props.href,
+		class: getClasses(),
+		onClick: (e) => emit("click", e),
+		children: slots.default?.()
+	});
+});
+const Artboard = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["artboard", "artboard-demo"];
+		if (props.size) classes.push(`phone-${props.size}`);
+		else classes.push("phone-1");
+		if (props.horizontal) classes.push("horizontal");
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+});
+var MockupBrowser = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = [
+			"mockup-browser",
+			"border",
+			"border-base-300"
+		];
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsxs("div", {
+		class: getClasses(),
+		children: [/* @__PURE__ */ jsx("div", {
+			class: "mockup-browser-toolbar",
+			children: /* @__PURE__ */ jsx("div", {
+				class: "input border border-base-300",
+				children: props.url ?? "https://example.com"
+			})
+		}), slots.default?.()]
+	});
+});
+var MockupCode = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["mockup-code"];
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.() ?? props.lines?.map((line) => /* @__PURE__ */ jsx("pre", {
+			"data-prefix": line.prefix ?? "",
+			children: /* @__PURE__ */ jsx("code", {
+				class: line.color ? `text-${line.color}` : "",
+				children: line.text
+			})
+		}))
+	});
+});
+var MockupPhone = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["mockup-phone"];
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsxs("div", {
+		class: getClasses(),
+		children: [/* @__PURE__ */ jsx("div", { class: "camera" }), /* @__PURE__ */ jsx("div", {
+			class: "display",
+			children: /* @__PURE__ */ jsx("div", {
+				class: "artboard artboard-demo phone-1",
+				children: slots.default?.()
+			})
+		})]
+	});
+});
+var MockupWindow = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = [
+			"mockup-window",
+			"border",
+			"border-base-300"
+		];
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: /* @__PURE__ */ jsx("div", {
+			class: "flex justify-center px-4 py-16 bg-base-200",
+			children: slots.default?.()
+		})
+	});
+});
+const Mockup = {
+	Browser: MockupBrowser,
+	Code: MockupCode,
+	Phone: MockupPhone,
+	Window: MockupWindow
+};
+const Mask = component(({ props, slots }) => {
+	const getClasses = () => {
+		const classes = ["mask"];
+		if (props.shape) classes.push(`mask-${props.shape}`);
+		if (props.class) classes.push(props.class);
+		return classes.join(" ");
+	};
+	return () => /* @__PURE__ */ jsx("div", {
+		class: getClasses(),
+		children: slots.default?.()
+	});
+});
+const HeroContent = Hero.Content;
+const JoinItem = Join.Item;
+const ChatImage = Chat.Image;
+const ChatHeader = Chat.Header;
+const ChatBubble = Chat.Bubble;
+const ChatFooter = Chat.Footer;
+const CarouselItem = Carousel.Item;
+export { Container as C, Hero as D, Join as E, Card as S, Chat as T, Divider as _, ChatImage as a, Row as b, Mask as c, MockupBrowser as d, MockupCode as f, Footer as g, Link as h, ChatHeader as i, Artboard as l, MockupWindow as m, ChatBubble as n, HeroContent as o, MockupPhone as p, ChatFooter as r, JoinItem as s, CarouselItem as t, Mockup as u, Col as v, Carousel as w, Stack as x, Flex as y };
+
+//# sourceMappingURL=layout-0aaJX4B2.js.map