@webflare/ui 0.0.0-stage → 0.1.1

package/dist/BadgeRoot-ffbcCd5B.js

@@ -0,0 +1,132 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { computed, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString } from "vue";
+import { cva } from "@webflare/ui/css";
+// src/components/Badge/styles.ts
+var badgeStyles = 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__ */ defineComponent({
+	__name: "BadgeRoot",
+	props: {
+		label: {},
+		color: { default: "default" },
+		size: { default: "md" },
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const badgeClass = computed(() => withCss(badgeStyles.raw({
+			color: props.color ?? "default",
+			size: props.size
+		}), props.css?.root));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(badgeClass.value) }, [renderSlot(_ctx.$slots, "icon"), renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 2);
+		};
+	}
+});
+export { BadgeRoot_default as t };

package/dist/Button-A9BiKfSl.js

@@ -0,0 +1,240 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeProps, normalizeClass, openBlock, resolveDynamicComponent, withCtx } from "vue";
+import { cva } from "@webflare/ui/css";
+// src/components/Button/styles.ts
+var buttonStyles = cva({
+	base: {
+		display: "inline flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontWeight: "600",
+		fontFamily: "inherit",
+		lineHeight: "1.5",
+		borderRadius: "lg",
+		borderStyle: "solid",
+		borderWidth: "1px",
+		userSelect: "none",
+		transition: "all 300ms",
+		cursor: "pointer",
+		_disabled: {
+			pointerEvents: "none",
+			opacity: "0.5"
+		}
+	},
+	variants: {
+		color: {
+			primary: {
+				backgroundColor: "primary",
+				color: "grey.800",
+				borderColor: "primary",
+				_hover: {
+					backgroundColor: "brand.500",
+					borderColor: "brand.500"
+				},
+				_active: {
+					backgroundColor: "brand.600",
+					borderColor: "brand.600"
+				}
+			},
+			secondary: {
+				"bg": {
+					base: "primary-pale",
+					_dark: "grey.800",
+					_osDark: "grey.800"
+				},
+				"borderColor": {
+					base: "primary-pale",
+					_dark: "grey.600",
+					_osDark: "grey.600"
+				},
+				"color": {
+					base: "grey.800",
+					_dark: "neutral",
+					_osDark: "neutral"
+				},
+				"& .btn-icon": { color: {
+					base: "grey.800",
+					_dark: "primary",
+					_osDark: "primary"
+				} },
+				"_hover": { backgroundColor: {
+					base: "brand.100",
+					_dark: "grey.700",
+					_osDark: "grey.700"
+				} },
+				"_active": {
+					backgroundColor: {
+						base: "brand.200",
+						_dark: "grey.950",
+						_osDark: "grey.950"
+					},
+					borderColor: {
+						base: "brand.200",
+						_dark: "grey.600",
+						_osDark: "grey.600"
+					}
+				}
+			},
+			transparent: {
+				"backgroundColor": "transparent",
+				"borderColor": "transparent",
+				"color": "neutral",
+				"& .btn-icon": { color: "primary" },
+				"& .btn-label": {
+					textDecoration: "underline",
+					textDecorationColor: {
+						base: "black/50",
+						_dark: "white/50",
+						_osDark: "white/50"
+					},
+					textDecorationThickness: "1px",
+					textUnderlineOffset: "25%"
+				},
+				"_hover": { backgroundColor: {
+					base: "primary-pale",
+					_dark: "grey.800",
+					_osDark: "grey.800"
+				} },
+				"_active": { backgroundColor: {
+					base: "brand.100",
+					_dark: "black",
+					_osDark: "black"
+				} }
+			}
+		},
+		size: {
+			sm: {
+				fontSize: "sm",
+				gap: "sm",
+				paddingBlock: "xs",
+				paddingInline: "lg"
+			},
+			md: {
+				"fontSize": "md",
+				"gap": "sm",
+				"paddingBlock": "sm",
+				"paddingInline": "lg",
+				"& .btn-icon": { fontSize: "lg" }
+			},
+			lg: {
+				fontSize: "lg",
+				gap: "md",
+				paddingBlock: "md",
+				paddingInline: "xl"
+			}
+		},
+		fullWidth: {
+			true: {
+				width: "100%",
+				boxSizing: "border-box"
+			},
+			false: {}
+		},
+		order: {
+			regular: {
+				"& .btn-icon": { order: "1" },
+				"& .btn-label": { order: "2" }
+			},
+			inverse: {
+				"& .btn-icon": { order: "2" },
+				"& .btn-label": { order: "1" }
+			}
+		}
+	},
+	defaultVariants: {
+		color: "secondary",
+		size: "md",
+		order: "regular",
+		fullWidth: false
+	}
+});
+// src/components/Button/Button.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+// src/components/Button/Button.vue
+var Button_default = /* @__PURE__ */ defineComponent({
+	name: "WfButton",
+	__name: "Button",
+	props: {
+		label: { default: null },
+		icon: { default: null },
+		to: { default: null },
+		type: { default: null },
+		color: { default: "secondary" },
+		size: { default: "md" },
+		fullWidth: { type: Boolean },
+		order: { default: "regular" },
+		external: { type: Boolean },
+		disabled: { type: Boolean },
+		css: {}
+	},
+	setup(__props) {
+		/**
+		* @component Button
+		* @description Renders a `<button>`, or an `<a>` when `to` is set.
+		*
+		* @prop {string|null} label - Button text, rendered as HTML. Sanitize untrusted strings before passing them.
+		* @prop {string|null} [icon] - Icon name, rendered as `icon icon-<name>`.
+		* @prop {string|null} [to] - Renders an anchor with this `href`.
+		* @prop {'button'|'submit'|'reset'|null} [type] - Button type. Defaults to `button`. Ignored for links.
+		* @prop {'secondary'|'primary'|'transparent'} [color='secondary'] - Color scheme.
+		* @prop {'sm'|'md'|'lg'} [size='md'] - Size.
+		* @prop {'regular'|'inverse'} [order='regular'] - Icon before or after the label.
+		* @prop {boolean} [fullWidth=false] - Stretch to the container width.
+		* @prop {boolean} [external=false] - For links: open in a new tab with `rel="noopener noreferrer"`.
+		* @prop {boolean} [disabled=false] - Disable the button. A disabled link loses its `href` and gets `aria-disabled`.
+		* @prop {ButtonCss} [css] - Style overrides (`root`). Wrap values in `css.raw()`.
+		*
+		* @example
+		* <Button label="Click me" />
+		* <Button label="Visit Site" to="https://example.com" external />
+		* <Button color="primary" size="lg" label="Large Primary Button" />
+		*/
+		const props = __props;
+		const isLink = computed(() => Boolean(props.to));
+		/** `title` is an attribute, so an HTML label is reduced to its text. */
+		const title = computed(() => props.label ? props.label.replace(/<[^>]*>/g, "").trim() : void 0);
+		const attrs = computed(() => {
+			if (!isLink.value) return {
+				type: props.type ?? "button",
+				disabled: props.disabled || void 0
+			};
+			if (props.disabled) return {
+				"role": "link",
+				"aria-disabled": "true"
+			};
+			return {
+				href: props.to,
+				target: props.external ? "_blank" : void 0,
+				rel: props.external ? "noopener noreferrer" : void 0
+			};
+		});
+		const buttonClass = computed(() => withCss(buttonStyles.raw({
+			color: props.color,
+			size: props.size,
+			order: props.order,
+			fullWidth: props.fullWidth
+		}), props.css?.root));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(isLink.value ? "a" : "button"), mergeProps({
+				class: ["btn", buttonClass.value],
+				title: title.value
+			}, attrs.value), {
+				default: withCtx(() => [props.icon ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass([
+						"btn-icon",
+						"icon",
+						`icon-${props.icon}`
+					]),
+					"aria-hidden": "true"
+				}, null, 2)) : createCommentVNode("", true), props.label ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: "btn-label",
+					innerHTML: props.label
+				}, null, 8, _hoisted_1)) : createCommentVNode("", true)]),
+				_: 1
+			}, 16, ["class", "title"]);
+		};
+	}
+});
+export { Button_default as t };

package/dist/Button-CwVAoJjO.cjs

@@ -0,0 +1,244 @@
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+// src/components/Button/styles.ts
+var buttonStyles = (0, require("@webflare/ui/css").cva)({
+	base: {
+		display: "inline flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontWeight: "600",
+		fontFamily: "inherit",
+		lineHeight: "1.5",
+		borderRadius: "lg",
+		borderStyle: "solid",
+		borderWidth: "1px",
+		userSelect: "none",
+		transition: "all 300ms",
+		cursor: "pointer",
+		_disabled: {
+			pointerEvents: "none",
+			opacity: "0.5"
+		}
+	},
+	variants: {
+		color: {
+			primary: {
+				backgroundColor: "primary",
+				color: "grey.800",
+				borderColor: "primary",
+				_hover: {
+					backgroundColor: "brand.500",
+					borderColor: "brand.500"
+				},
+				_active: {
+					backgroundColor: "brand.600",
+					borderColor: "brand.600"
+				}
+			},
+			secondary: {
+				"bg": {
+					base: "primary-pale",
+					_dark: "grey.800",
+					_osDark: "grey.800"
+				},
+				"borderColor": {
+					base: "primary-pale",
+					_dark: "grey.600",
+					_osDark: "grey.600"
+				},
+				"color": {
+					base: "grey.800",
+					_dark: "neutral",
+					_osDark: "neutral"
+				},
+				"& .btn-icon": { color: {
+					base: "grey.800",
+					_dark: "primary",
+					_osDark: "primary"
+				} },
+				"_hover": { backgroundColor: {
+					base: "brand.100",
+					_dark: "grey.700",
+					_osDark: "grey.700"
+				} },
+				"_active": {
+					backgroundColor: {
+						base: "brand.200",
+						_dark: "grey.950",
+						_osDark: "grey.950"
+					},
+					borderColor: {
+						base: "brand.200",
+						_dark: "grey.600",
+						_osDark: "grey.600"
+					}
+				}
+			},
+			transparent: {
+				"backgroundColor": "transparent",
+				"borderColor": "transparent",
+				"color": "neutral",
+				"& .btn-icon": { color: "primary" },
+				"& .btn-label": {
+					textDecoration: "underline",
+					textDecorationColor: {
+						base: "black/50",
+						_dark: "white/50",
+						_osDark: "white/50"
+					},
+					textDecorationThickness: "1px",
+					textUnderlineOffset: "25%"
+				},
+				"_hover": { backgroundColor: {
+					base: "primary-pale",
+					_dark: "grey.800",
+					_osDark: "grey.800"
+				} },
+				"_active": { backgroundColor: {
+					base: "brand.100",
+					_dark: "black",
+					_osDark: "black"
+				} }
+			}
+		},
+		size: {
+			sm: {
+				fontSize: "sm",
+				gap: "sm",
+				paddingBlock: "xs",
+				paddingInline: "lg"
+			},
+			md: {
+				"fontSize": "md",
+				"gap": "sm",
+				"paddingBlock": "sm",
+				"paddingInline": "lg",
+				"& .btn-icon": { fontSize: "lg" }
+			},
+			lg: {
+				fontSize: "lg",
+				gap: "md",
+				paddingBlock: "md",
+				paddingInline: "xl"
+			}
+		},
+		fullWidth: {
+			true: {
+				width: "100%",
+				boxSizing: "border-box"
+			},
+			false: {}
+		},
+		order: {
+			regular: {
+				"& .btn-icon": { order: "1" },
+				"& .btn-label": { order: "2" }
+			},
+			inverse: {
+				"& .btn-icon": { order: "2" },
+				"& .btn-label": { order: "1" }
+			}
+		}
+	},
+	defaultVariants: {
+		color: "secondary",
+		size: "md",
+		order: "regular",
+		fullWidth: false
+	}
+});
+// src/components/Button/Button.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+// src/components/Button/Button.vue
+var Button_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "WfButton",
+	__name: "Button",
+	props: {
+		label: { default: null },
+		icon: { default: null },
+		to: { default: null },
+		type: { default: null },
+		color: { default: "secondary" },
+		size: { default: "md" },
+		fullWidth: { type: Boolean },
+		order: { default: "regular" },
+		external: { type: Boolean },
+		disabled: { type: Boolean },
+		css: {}
+	},
+	setup(__props) {
+		/**
+		* @component Button
+		* @description Renders a `<button>`, or an `<a>` when `to` is set.
+		*
+		* @prop {string|null} label - Button text, rendered as HTML. Sanitize untrusted strings before passing them.
+		* @prop {string|null} [icon] - Icon name, rendered as `icon icon-<name>`.
+		* @prop {string|null} [to] - Renders an anchor with this `href`.
+		* @prop {'button'|'submit'|'reset'|null} [type] - Button type. Defaults to `button`. Ignored for links.
+		* @prop {'secondary'|'primary'|'transparent'} [color='secondary'] - Color scheme.
+		* @prop {'sm'|'md'|'lg'} [size='md'] - Size.
+		* @prop {'regular'|'inverse'} [order='regular'] - Icon before or after the label.
+		* @prop {boolean} [fullWidth=false] - Stretch to the container width.
+		* @prop {boolean} [external=false] - For links: open in a new tab with `rel="noopener noreferrer"`.
+		* @prop {boolean} [disabled=false] - Disable the button. A disabled link loses its `href` and gets `aria-disabled`.
+		* @prop {ButtonCss} [css] - Style overrides (`root`). Wrap values in `css.raw()`.
+		*
+		* @example
+		* <Button label="Click me" />
+		* <Button label="Visit Site" to="https://example.com" external />
+		* <Button color="primary" size="lg" label="Large Primary Button" />
+		*/
+		const props = __props;
+		const isLink = (0, vue.computed)(() => Boolean(props.to));
+		/** `title` is an attribute, so an HTML label is reduced to its text. */
+		const title = (0, vue.computed)(() => props.label ? props.label.replace(/<[^>]*>/g, "").trim() : void 0);
+		const attrs = (0, vue.computed)(() => {
+			if (!isLink.value) return {
+				type: props.type ?? "button",
+				disabled: props.disabled || void 0
+			};
+			if (props.disabled) return {
+				"role": "link",
+				"aria-disabled": "true"
+			};
+			return {
+				href: props.to,
+				target: props.external ? "_blank" : void 0,
+				rel: props.external ? "noopener noreferrer" : void 0
+			};
+		});
+		const buttonClass = (0, vue.computed)(() => require_css.withCss(buttonStyles.raw({
+			color: props.color,
+			size: props.size,
+			order: props.order,
+			fullWidth: props.fullWidth
+		}), props.css?.root));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(isLink.value ? "a" : "button"), (0, vue.mergeProps)({
+				class: ["btn", buttonClass.value],
+				title: title.value
+			}, attrs.value), {
+				default: (0, vue.withCtx)(() => [props.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 0,
+					class: (0, vue.normalizeClass)([
+						"btn-icon",
+						"icon",
+						`icon-${props.icon}`
+					]),
+					"aria-hidden": "true"
+				}, null, 2)) : (0, vue.createCommentVNode)("", true), props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					key: 1,
+					class: "btn-label",
+					innerHTML: props.label
+				}, null, 8, _hoisted_1)) : (0, vue.createCommentVNode)("", true)]),
+				_: 1
+			}, 16, ["class", "title"]);
+		};
+	}
+});
+Object.defineProperty(exports, "Button_default", {
+	enumerable: true,
+	get: function() {
+		return Button_default;
+	}
+});

package/dist/CardBody-BEbTLrA2.cjs

@@ -0,0 +1,21 @@
+const require_types = require("./types-cLDeFros.cjs");
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+// src/components/Card/CardBody.vue
+var CardBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "CardBody",
+	props: { css: {} },
+	setup(__props) {
+		const props = __props;
+		const styles = (0, vue.inject)(require_types.CardStylesKey, (0, vue.computed)(() => require_types.cardStyles.raw()));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).body, props.css?.root)) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "CardBody_default", {
+	enumerable: true,
+	get: function() {
+		return CardBody_default;
+	}
+});

package/dist/CardBody-DbSW-Ssx.js

@@ -0,0 +1,16 @@
+import { r as cardStyles, t as CardStylesKey } from "./types-CBApDh_h.js";
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { computed, createElementBlock, defineComponent, inject, normalizeClass, openBlock, renderSlot, unref } from "vue";
+// src/components/Card/CardBody.vue
+var CardBody_default = /* @__PURE__ */ defineComponent({
+	__name: "CardBody",
+	props: { css: {} },
+	setup(__props) {
+		const props = __props;
+		const styles = inject(CardStylesKey, computed(() => cardStyles.raw()));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(withCss)(unref(styles).body, props.css?.root)) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+export { CardBody_default as t };

package/dist/CardHeader-Cx1pE9No.cjs

@@ -0,0 +1,36 @@
+const require_types = require("./types-cLDeFros.cjs");
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+// src/components/Card/CardHeader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["innerHTML"];
+// src/components/Card/CardHeader.vue
+var CardHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "CardHeader",
+	props: {
+		title: {},
+		subtitle: {},
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = (0, vue.inject)(require_types.CardStylesKey, (0, vue.computed)(() => require_types.cardStyles.raw()));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("header", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).header, props.css?.root)) }, [(0, vue.renderSlot)(_ctx.$slots, "icon"), (0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).headerBody, props.css?.body)) }, [(0, vue.renderSlot)(_ctx.$slots, "title", {}, () => [__props.title ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).headerTitle, props.css?.title)),
+				innerHTML: __props.title
+			}, null, 10, _hoisted_1)) : (0, vue.createCommentVNode)("", true)]), (0, vue.renderSlot)(_ctx.$slots, "subtitle", {}, () => [__props.subtitle ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)((0, vue.unref)(styles).headerSubtitle, props.css?.subtitle)),
+				innerHTML: __props.subtitle
+			}, null, 10, _hoisted_2)) : (0, vue.createCommentVNode)("", true)])], 2)])], 2);
+		};
+	}
+});
+Object.defineProperty(exports, "CardHeader_default", {
+	enumerable: true,
+	get: function() {
+		return CardHeader_default;
+	}
+});