@webflare/ui 0.0.0-stage → 0.1.0

package/dist/AlertRoot-B-M0xDFC.js

@@ -0,0 +1,274 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, useSlots } from "vue";
+import { sva } from "@webflare/ui/css";
+// src/components/Alert/styles.ts
+var alertStyles = sva({
+	slots: [
+		"root",
+		"icon",
+		"content",
+		"message",
+		"title",
+		"description",
+		"close"
+	],
+	base: {
+		root: {
+			display: "flex",
+			alignItems: "flex-start",
+			borderWidth: "1px",
+			borderStyle: "solid"
+		},
+		icon: {},
+		content: {
+			display: "flex",
+			flexDirection: "column",
+			flexGrow: 1,
+			minWidth: 0
+		},
+		message: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "2xs"
+		},
+		title: {
+			fontWeight: "700",
+			lineHeight: "1.25"
+		},
+		description: {
+			fontWeight: "500",
+			lineHeight: "1.5"
+		},
+		close: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			width: "lg",
+			height: "lg",
+			padding: 0,
+			border: "none",
+			background: "transparent",
+			cursor: "pointer",
+			color: "neutral.light",
+			borderRadius: "sm",
+			transition: "all 200ms",
+			_hover: {
+				color: "neutral",
+				bg: {
+					base: "black/17.5",
+					_dark: "white/17.5",
+					_osDark: "white/17.5"
+				}
+			},
+			_active: { bg: {
+				base: "black/25",
+				_dark: "white/25",
+				_osDark: "white/25"
+			} }
+		}
+	},
+	variants: {
+		variant: {
+			danger: {
+				root: {
+					bg: "danger.subtle/15",
+					borderColor: "danger.subtle/20"
+				},
+				icon: { color: "danger.subtle" },
+				title: { color: "danger.subtle" },
+				description: { color: "danger.subtle" }
+			},
+			success: {
+				root: {
+					bg: "success.subtle/15",
+					borderColor: "success.subtle/20"
+				},
+				icon: { color: "success.subtle" },
+				title: { color: "success.subtle" },
+				description: { color: "success.subtle" }
+			},
+			info: {
+				root: {
+					bg: "info.subtle/15",
+					borderColor: "info.subtle/20"
+				},
+				icon: { color: "info.subtle" },
+				title: { color: "info.subtle" },
+				description: { color: "info.subtle" }
+			},
+			warning: {
+				root: {
+					bg: "warning.subtle/15",
+					borderColor: "warning.subtle/20"
+				},
+				icon: { color: "warning.subtle" },
+				title: { color: "warning.subtle" },
+				description: { color: "warning.subtle" }
+			}
+		},
+		borderSize: {
+			md: { root: { borderRadius: "md" } },
+			lg: { root: { borderRadius: "lg" } },
+			xl: { root: { borderRadius: "2xl" } }
+		},
+		iconSize: {
+			md: {},
+			lg: { icon: { fontSize: "lg" } },
+			xl: { icon: { fontSize: "xl" } }
+		},
+		textSize: {
+			md: {
+				title: { fontSize: "md" },
+				description: { fontSize: "sm" }
+			},
+			lg: {
+				title: { fontSize: "lg" },
+				description: { fontSize: "md" }
+			}
+		},
+		spacing: {
+			md: {
+				root: {
+					gap: "sm",
+					padding: "md"
+				},
+				content: { gap: "sm" }
+			},
+			lg: {
+				root: {
+					gap: "lg",
+					padding: "xl"
+				},
+				content: { gap: "sm" }
+			}
+		}
+	},
+	defaultVariants: {
+		variant: "info",
+		textSize: "md",
+		borderSize: "md",
+		spacing: "md",
+		iconSize: "xl"
+	}
+});
+// src/components/Alert/AlertRoot.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role"];
+// src/components/Alert/AlertRoot.vue
+var AlertRoot_default = /* @__PURE__ */ defineComponent({
+	__name: "AlertRoot",
+	props: {
+		variant: { default: "info" },
+		spacing: { default: "lg" },
+		iconSize: { default: "xl" },
+		textSize: { default: "lg" },
+		borderSize: { default: "md" },
+		messages: { default: () => [] },
+		dismissible: { type: Boolean },
+		hideIcon: { type: Boolean },
+		role: {},
+		css: {}
+	},
+	emits: ["dismiss"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* @component AlertRoot
+		* @description A versatile alert component for displaying important messages to users.
+		* Supports multiple variants (danger, success, info, warning), dismissible functionality,
+		* and can display multiple messages with optional titles.
+		*
+		* @prop {'danger'|'success'|'info'|'warning'} [variant='info'] - The visual variant of the alert.
+		* @prop {AlertMessage[]} [messages=[]] - Array of message objects to display.
+		* @prop {boolean} [dismissible=false] - Whether the alert can be dismissed.
+		* @prop {boolean} [hideIcon=false] - When true, the alert renders without an icon and without the icon gap.
+		* @prop {'alert'|'status'} [role] - ARIA role. Defaults to 'alert' for danger/warning, 'status' for info/success.
+		* @prop {AlertCss} [css] - Style overrides per slot: root, icon, content, message, title, description, close. Wrap values in `css.raw()`.
+		*
+		* @slot icon - Override the default variant icon.
+		*
+		* @emits dismiss - Emitted when the close button is clicked.
+		*
+		* @example
+		* <AlertRoot
+		*   variant="danger"
+		*   :messages="[
+		*     { title: 'Error occurred', description: 'Please try again later.' },
+		*     { description: 'Check your network connection.' }
+		*   ]"
+		*   dismissible
+		*   @dismiss="handleDismiss"
+		* />
+		*
+		* @example
+		* <Alert.Root variant="success" :messages="[{ description: 'Saved successfully!' }]">
+		*   <template #icon>
+		*     <CustomIcon />
+		*   </template>
+		* </Alert.Root>
+		*
+		* <AlertRoot hide-icon :messages="[{ description: 'No icon.' }]" />
+		*/
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const variantIcons = {
+			danger: "circle-wavy-warning-bold",
+			success: "check-circle-bold",
+			info: "info-bold",
+			warning: "warning-bold"
+		};
+		const ariaRole = computed(() => {
+			if (props.role) return props.role;
+			return props.variant === "danger" || props.variant === "warning" ? "alert" : "status";
+		});
+		const shouldRender = computed(() => {
+			return props.messages.length > 0 || !props.hideIcon && !!slots.icon;
+		});
+		const styles = computed(() => alertStyles.raw({
+			variant: props.variant,
+			spacing: props.spacing,
+			borderSize: props.borderSize,
+			iconSize: props.iconSize,
+			textSize: props.textSize
+		}));
+		const handleDismiss = () => {
+			emit("dismiss");
+		};
+		return (_ctx, _cache) => {
+			return shouldRender.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(withCss)(styles.value.root, props.css?.root)),
+				role: ariaRole.value
+			}, [
+				!__props.hideIcon ? renderSlot(_ctx.$slots, "icon", {}, () => [createElementVNode("span", {
+					class: normalizeClass([
+						"icon",
+						`icon-${variantIcons[props.variant]}`,
+						unref(withCss)(styles.value.icon, props.css?.icon)
+					]),
+					"aria-hidden": "true"
+				}, null, 2)], void 0, 0) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(unref(withCss)(styles.value.content, props.css?.content)) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.messages, (message, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: `message-${index}`,
+						class: normalizeClass(unref(withCss)(styles.value.message, props.css?.message))
+					}, [message.title ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(withCss)(styles.value.title, props.css?.title))
+					}, toDisplayString(message.title), 3)) : createCommentVNode("", true), createElementVNode("p", { class: normalizeClass(unref(withCss)(styles.value.description, props.css?.description)) }, toDisplayString(message.description), 3)], 2);
+				}), 128))], 2),
+				__props.dismissible ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					type: "button",
+					class: normalizeClass(unref(withCss)(styles.value.close, props.css?.close)),
+					"aria-label": "Dismiss alert",
+					onClick: handleDismiss
+				}, [..._cache[0] || (_cache[0] = [createElementVNode("span", {
+					class: "icon icon-x-bold",
+					"aria-hidden": "true"
+				}, null, -1)])], 2)) : createCommentVNode("", true)
+			], 10, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+export { AlertRoot_default as t };

package/dist/AlertRoot-DRRwRAhA.cjs

@@ -0,0 +1,278 @@
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+// src/components/Alert/styles.ts
+var alertStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"root",
+		"icon",
+		"content",
+		"message",
+		"title",
+		"description",
+		"close"
+	],
+	base: {
+		root: {
+			display: "flex",
+			alignItems: "flex-start",
+			borderWidth: "1px",
+			borderStyle: "solid"
+		},
+		icon: {},
+		content: {
+			display: "flex",
+			flexDirection: "column",
+			flexGrow: 1,
+			minWidth: 0
+		},
+		message: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "2xs"
+		},
+		title: {
+			fontWeight: "700",
+			lineHeight: "1.25"
+		},
+		description: {
+			fontWeight: "500",
+			lineHeight: "1.5"
+		},
+		close: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			width: "lg",
+			height: "lg",
+			padding: 0,
+			border: "none",
+			background: "transparent",
+			cursor: "pointer",
+			color: "neutral.light",
+			borderRadius: "sm",
+			transition: "all 200ms",
+			_hover: {
+				color: "neutral",
+				bg: {
+					base: "black/17.5",
+					_dark: "white/17.5",
+					_osDark: "white/17.5"
+				}
+			},
+			_active: { bg: {
+				base: "black/25",
+				_dark: "white/25",
+				_osDark: "white/25"
+			} }
+		}
+	},
+	variants: {
+		variant: {
+			danger: {
+				root: {
+					bg: "danger.subtle/15",
+					borderColor: "danger.subtle/20"
+				},
+				icon: { color: "danger.subtle" },
+				title: { color: "danger.subtle" },
+				description: { color: "danger.subtle" }
+			},
+			success: {
+				root: {
+					bg: "success.subtle/15",
+					borderColor: "success.subtle/20"
+				},
+				icon: { color: "success.subtle" },
+				title: { color: "success.subtle" },
+				description: { color: "success.subtle" }
+			},
+			info: {
+				root: {
+					bg: "info.subtle/15",
+					borderColor: "info.subtle/20"
+				},
+				icon: { color: "info.subtle" },
+				title: { color: "info.subtle" },
+				description: { color: "info.subtle" }
+			},
+			warning: {
+				root: {
+					bg: "warning.subtle/15",
+					borderColor: "warning.subtle/20"
+				},
+				icon: { color: "warning.subtle" },
+				title: { color: "warning.subtle" },
+				description: { color: "warning.subtle" }
+			}
+		},
+		borderSize: {
+			md: { root: { borderRadius: "md" } },
+			lg: { root: { borderRadius: "lg" } },
+			xl: { root: { borderRadius: "2xl" } }
+		},
+		iconSize: {
+			md: {},
+			lg: { icon: { fontSize: "lg" } },
+			xl: { icon: { fontSize: "xl" } }
+		},
+		textSize: {
+			md: {
+				title: { fontSize: "md" },
+				description: { fontSize: "sm" }
+			},
+			lg: {
+				title: { fontSize: "lg" },
+				description: { fontSize: "md" }
+			}
+		},
+		spacing: {
+			md: {
+				root: {
+					gap: "sm",
+					padding: "md"
+				},
+				content: { gap: "sm" }
+			},
+			lg: {
+				root: {
+					gap: "lg",
+					padding: "xl"
+				},
+				content: { gap: "sm" }
+			}
+		}
+	},
+	defaultVariants: {
+		variant: "info",
+		textSize: "md",
+		borderSize: "md",
+		spacing: "md",
+		iconSize: "xl"
+	}
+});
+// src/components/Alert/AlertRoot.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role"];
+// src/components/Alert/AlertRoot.vue
+var AlertRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "AlertRoot",
+	props: {
+		variant: { default: "info" },
+		spacing: { default: "lg" },
+		iconSize: { default: "xl" },
+		textSize: { default: "lg" },
+		borderSize: { default: "md" },
+		messages: { default: () => [] },
+		dismissible: { type: Boolean },
+		hideIcon: { type: Boolean },
+		role: {},
+		css: {}
+	},
+	emits: ["dismiss"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* @component AlertRoot
+		* @description A versatile alert component for displaying important messages to users.
+		* Supports multiple variants (danger, success, info, warning), dismissible functionality,
+		* and can display multiple messages with optional titles.
+		*
+		* @prop {'danger'|'success'|'info'|'warning'} [variant='info'] - The visual variant of the alert.
+		* @prop {AlertMessage[]} [messages=[]] - Array of message objects to display.
+		* @prop {boolean} [dismissible=false] - Whether the alert can be dismissed.
+		* @prop {boolean} [hideIcon=false] - When true, the alert renders without an icon and without the icon gap.
+		* @prop {'alert'|'status'} [role] - ARIA role. Defaults to 'alert' for danger/warning, 'status' for info/success.
+		* @prop {AlertCss} [css] - Style overrides per slot: root, icon, content, message, title, description, close. Wrap values in `css.raw()`.
+		*
+		* @slot icon - Override the default variant icon.
+		*
+		* @emits dismiss - Emitted when the close button is clicked.
+		*
+		* @example
+		* <AlertRoot
+		*   variant="danger"
+		*   :messages="[
+		*     { title: 'Error occurred', description: 'Please try again later.' },
+		*     { description: 'Check your network connection.' }
+		*   ]"
+		*   dismissible
+		*   @dismiss="handleDismiss"
+		* />
+		*
+		* @example
+		* <Alert.Root variant="success" :messages="[{ description: 'Saved successfully!' }]">
+		*   <template #icon>
+		*     <CustomIcon />
+		*   </template>
+		* </Alert.Root>
+		*
+		* <AlertRoot hide-icon :messages="[{ description: 'No icon.' }]" />
+		*/
+		const props = __props;
+		const emit = __emit;
+		const slots = (0, vue.useSlots)();
+		const variantIcons = {
+			danger: "circle-wavy-warning-bold",
+			success: "check-circle-bold",
+			info: "info-bold",
+			warning: "warning-bold"
+		};
+		const ariaRole = (0, vue.computed)(() => {
+			if (props.role) return props.role;
+			return props.variant === "danger" || props.variant === "warning" ? "alert" : "status";
+		});
+		const shouldRender = (0, vue.computed)(() => {
+			return props.messages.length > 0 || !props.hideIcon && !!slots.icon;
+		});
+		const styles = (0, vue.computed)(() => alertStyles.raw({
+			variant: props.variant,
+			spacing: props.spacing,
+			borderSize: props.borderSize,
+			iconSize: props.iconSize,
+			textSize: props.textSize
+		}));
+		const handleDismiss = () => {
+			emit("dismiss");
+		};
+		return (_ctx, _cache) => {
+			return shouldRender.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.root, props.css?.root)),
+				role: ariaRole.value
+			}, [
+				!__props.hideIcon ? (0, vue.renderSlot)(_ctx.$slots, "icon", {}, () => [(0, vue.createElementVNode)("span", {
+					class: (0, vue.normalizeClass)([
+						"icon",
+						`icon-${variantIcons[props.variant]}`,
+						(0, vue.unref)(require_css.withCss)(styles.value.icon, props.css?.icon)
+					]),
+					"aria-hidden": "true"
+				}, null, 2)], void 0, 0) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.content, props.css?.content)) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.messages, (message, index) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: `message-${index}`,
+						class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.message, props.css?.message))
+					}, [message.title ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: 0,
+						class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.title, props.css?.title))
+					}, (0, vue.toDisplayString)(message.title), 3)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("p", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.description, props.css?.description)) }, (0, vue.toDisplayString)(message.description), 3)], 2);
+				}), 128))], 2),
+				__props.dismissible ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					key: 1,
+					type: "button",
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.close, props.css?.close)),
+					"aria-label": "Dismiss alert",
+					onClick: handleDismiss
+				}, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("span", {
+					class: "icon icon-x-bold",
+					"aria-hidden": "true"
+				}, null, -1)])], 2)) : (0, vue.createCommentVNode)("", true)
+			], 10, _hoisted_1)) : (0, vue.createCommentVNode)("", true);
+		};
+	}
+});
+Object.defineProperty(exports, "AlertRoot_default", {
+	enumerable: true,
+	get: function() {
+		return AlertRoot_default;
+	}
+});

package/dist/BadgeRoot-CzUSTR0W.cjs

@@ -0,0 +1,136 @@
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+// src/components/Badge/styles.ts
+var badgeStyles = (0, require("@webflare/ui/css").cva)({
+	base: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontWeight: "600",
+		lineHeight: "1.2",
+		borderRadius: "pill",
+		userSelect: "none",
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: "transparent",
+		transition: "all 300ms"
+	},
+	variants: {
+		color: {
+			default: {
+				backgroundColor: "neutral.subtle",
+				color: "neutral",
+				borderColor: "border"
+			},
+			primary: {
+				backgroundColor: "primary",
+				color: "grey.800",
+				borderColor: "primary"
+			},
+			success: {
+				backgroundColor: "success.subtle",
+				color: {
+					base: "success.text",
+					_dark: "white",
+					_osDark: "white"
+				},
+				borderColor: "success.subtle.light"
+			},
+			info: {
+				backgroundColor: "info.subtle",
+				color: {
+					base: "info.text",
+					_dark: "white",
+					_osDark: "white"
+				},
+				borderColor: "info.subtle.light"
+			},
+			danger: {
+				backgroundColor: "danger.subtle",
+				color: {
+					base: "danger.text",
+					_dark: "white",
+					_osDark: "white"
+				},
+				borderColor: "danger.subtle.light"
+			}
+		},
+		size: {
+			sm: {
+				fontSize: {
+					base: "xs",
+					lg: "sm"
+				},
+				gap: { base: "xs" },
+				paddingBlock: { base: "2xs" },
+				paddingInline: { base: "sm" }
+			},
+			md: {
+				fontSize: {
+					base: "sm",
+					lg: "md"
+				},
+				gap: {
+					base: "xs",
+					lg: "sm"
+				},
+				paddingBlock: {
+					base: "xs",
+					lg: "sm"
+				},
+				paddingInline: {
+					base: "md",
+					lg: "lg"
+				}
+			},
+			lg: {
+				fontSize: {
+					base: "md",
+					lg: "lg"
+				},
+				gap: {
+					base: "sm",
+					lg: "md"
+				},
+				paddingBlock: {
+					base: "sm",
+					lg: "md"
+				},
+				paddingInline: {
+					base: "lg",
+					lg: "xl"
+				}
+			}
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		size: "md"
+	}
+});
+// src/components/Badge/BadgeRoot.vue
+var BadgeRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "BadgeRoot",
+	props: {
+		label: {},
+		color: { default: "default" },
+		size: { default: "md" },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const badgeClass = (0, vue.computed)(() => require_css.withCss(badgeStyles.raw({
+			color: props.color ?? "default",
+			size: props.size
+		}), props.css?.root));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", { class: (0, vue.normalizeClass)(badgeClass.value) }, [(0, vue.renderSlot)(_ctx.$slots, "icon"), (0, vue.renderSlot)(_ctx.$slots, "label", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)])], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "BadgeRoot_default", {
+	enumerable: true,
+	get: function() {
+		return BadgeRoot_default;
+	}
+});