@youcan/celeste 0.6.96 → 0.6.98

package/dist/esm/chunks/badge.js

@@ -0,0 +1,52 @@
+import { t as clsx } from "./clsx.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+//#region src/components/badge/badge.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "aria-disabled"];
+var _hoisted_2 = {
+	key: 0,
+	class: "dot i-celeste-dot"
+};
+var _hoisted_3 = {
+	key: 2,
+	class: "celeste-badge-label"
+};
+//#endregion
+//#region src/components/badge/badge.vue
+var badge_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "badge",
+	props: {
+		size: { default: "md" },
+		variant: { default: "fill" },
+		type: { default: "basic" },
+		state: {},
+		disabled: { type: Boolean },
+		icon: {},
+		label: {},
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(clsx)("celeste-badge", `celeste-badge-${_ctx.size}`, `celeste-badge-${_ctx.type}`, `celeste-badge-${_ctx.state}`, `celeste-badge-${_ctx.variant}`, _ctx.disabled && "celeste-badge-disabled", props.class)),
+				"aria-label": _ctx.label,
+				"aria-disabled": _ctx.disabled || void 0,
+				role: "badge"
+			}, [
+				_ctx.type === "dot" ? (openBlock(), createElementBlock("i", _hoisted_2)) : createCommentVNode("", true),
+				_ctx.type === "leading-icon" ? (openBlock(), createElementBlock("i", {
+					key: 1,
+					class: normalizeClass(_ctx.icon)
+				}, null, 2)) : createCommentVNode("", true),
+				_ctx.label ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+				_ctx.type === "trailing-icon" ? (openBlock(), createElementBlock("i", {
+					key: 3,
+					class: normalizeClass(_ctx.icon)
+				}, null, 2)) : createCommentVNode("", true)
+			], 10, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-2b19ee1e"]]);
+//#endregion
+export { badge_default as t };

package/dist/esm/chunks/button.js

@@ -0,0 +1,36 @@
+import { D as O } from "./dist.js";
+import { t as clsx } from "./clsx.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+//#endregion
+//#region src/components/button/button.vue
+var button_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "button",
+	props: {
+		class: {},
+		size: { default: "md" },
+		intent: { default: "primary" },
+		variant: { default: "fill" },
+		asChild: { type: Boolean },
+		as: { default: "button" }
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(O), {
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				class: normalizeClass(unref(clsx)("celeste-button", `celeste-button-intent-${_ctx.intent}`, `celeste-button-size-${_ctx.size}`, `celeste-button-variant-${_ctx.variant}`, props.class))
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-6c1800fd"]]);
+//#endregion
+export { button_default as t };

package/dist/esm/chunks/checkbox-card.js

@@ -0,0 +1,94 @@
+import { D as O, U as Vh } from "./dist.js";
+import { t as clsx } from "./clsx.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { useDelegatedProps } from "../use-delegated-props.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/checkbox/checkbox-card.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "celeste-checkbox-card-content" };
+var _hoisted_2 = { role: "presentation" };
+var _hoisted_3 = {
+	role: "presentation",
+	class: "celeste-checkbox-card-row"
+};
+//#endregion
+//#region src/components/checkbox/checkbox-card.vue
+var checkbox_card_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "checkbox-card",
+	props: {
+		for: {},
+		asChild: { type: Boolean },
+		as: {},
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const delegatedProps = useDelegatedProps(props, "class");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Vh), mergeProps(unref(delegatedProps), {
+				"aria-required": _ctx.required,
+				"aria-disabled": _ctx.disabled,
+				class: unref(clsx)("celeste-checkbox-card", props.class, { "celeste-checkbox-card-disabled": _ctx.disabled })
+			}), {
+				default: withCtx(() => [
+					_ctx.$slots.image || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						role: "presentation",
+						class: normalizeClass(["celeste-checkbox-card-preview", [_ctx.$slots.image ? "celeste-checkbox-card-preview-image" : "celeste-checkbox-card-preview-icon"]])
+					}, [_ctx.$slots.image ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[0] || (_cache[0] = createElementVNode("i", {
+						class: "celeste-checkbox-card-preview-fallback",
+						"i-celeste-image-circle-fill": ""
+					}, null, -1)), renderSlot(_ctx.$slots, "image", { class: "i-celeste-image-circle-fill?bg" }, void 0, true)], 64)) : _ctx.$slots.icon ? renderSlot(_ctx.$slots, "icon", { key: 1 }, void 0, true) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [
+						createVNode(unref(O), {
+							as: "span",
+							class: "celeste-checkbox-card-label"
+						}, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, void 0, true)]),
+							_: 3
+						}),
+						_ctx.$slots.sublabel ? (openBlock(), createBlock(unref(O), {
+							key: 0,
+							as: "span",
+							class: "celeste-checkbox-card-sublabel"
+						}, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "sublabel", {}, void 0, true)]),
+							_: 3
+						})) : createCommentVNode("", true),
+						_ctx.$slots.badge ? (openBlock(), createBlock(unref(O), {
+							key: 1,
+							"as-child": "",
+							class: "celeste-checkbox-card-badge"
+						}, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "badge", { disabled: _ctx.disabled }, void 0, true)]),
+							_: 3
+						})) : createCommentVNode("", true)
+					])]), _ctx.$slots.description ? (openBlock(), createBlock(unref(O), {
+						key: 0,
+						as: "span",
+						class: "celeste-checkbox-card-description"
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "description", {}, void 0, true)]),
+						_: 3
+					})) : createCommentVNode("", true)]),
+					createVNode(unref(O), {
+						disabled: _ctx.disabled,
+						"as-child": "",
+						class: "celeste-checkbox-card-checkbox"
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+						_: 3
+					}, 8, ["disabled"])
+				]),
+				_: 3
+			}, 16, [
+				"aria-required",
+				"aria-disabled",
+				"class"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-8acdbba9"]]);
+//#endregion
+export { checkbox_card_default as t };

package/dist/esm/chunks/checkbox-label.js

@@ -0,0 +1,88 @@
+import { D as O, U as Vh } from "./dist.js";
+import { t as clsx } from "./clsx.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { useDelegatedProps } from "../use-delegated-props.js";
+import { createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/checkbox/checkbox-label.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { role: "presentation" };
+var _hoisted_2 = {
+	role: "presentation",
+	class: "celeste-checkbox-label-row"
+};
+var _hoisted_3 = {
+	role: "presentation",
+	class: "celeste-checkbox-label-content"
+};
+//#endregion
+//#region src/components/checkbox/checkbox-label.vue
+var checkbox_label_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "checkbox-label",
+	props: {
+		for: {},
+		asChild: { type: Boolean },
+		as: {},
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const delegatedProps = useDelegatedProps(props, "class");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Vh), mergeProps(unref(delegatedProps), {
+				"aria-required": _ctx.required,
+				"aria-disabcled": _ctx.disabled,
+				class: unref(clsx)("celeste-checkbox-label", props.class)
+			}), {
+				default: withCtx(() => [createVNode(unref(O), {
+					"as-child": "",
+					class: "celeste-checkbox-label-checkbox"
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+					_: 3
+				}), createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", null, [createVNode(unref(O), {
+					as: "span",
+					class: "celeste-checkbox-label-label"
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, void 0, true)]),
+					_: 3
+				}), _ctx.$slots.sublabel ? (openBlock(), createBlock(unref(O), {
+					key: 0,
+					as: "span",
+					class: "celeste-checkbox-label-sublabel"
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "sublabel", {}, void 0, true)]),
+					_: 3
+				})) : createCommentVNode("", true)]), _ctx.$slots.badge ? (openBlock(), createBlock(unref(O), {
+					key: 0,
+					"as-child": "",
+					class: "celeste-checkbox-label-badge"
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "badge", {}, void 0, true)]),
+					_: 3
+				})) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_3, [_ctx.$slots.description ? (openBlock(), createBlock(unref(O), {
+					key: 0,
+					as: "span",
+					class: "celeste-checkbox-label-description"
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "description", {}, void 0, true)]),
+					_: 3
+				})) : createCommentVNode("", true), _ctx.$slots.linkButton ? (openBlock(), createBlock(unref(O), {
+					key: 1,
+					"as-child": "",
+					class: "celeste-checkbox-label-link-button"
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "linkButton", {}, void 0, true)]),
+					_: 3
+				})) : createCommentVNode("", true)])])]),
+				_: 3
+			}, 16, [
+				"aria-required",
+				"aria-disabcled",
+				"class"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-75e9816c"]]);
+//#endregion
+export { checkbox_label_default as t };

package/dist/esm/chunks/checkbox.js

@@ -0,0 +1,35 @@
+import { I as Se, K as Wv, xt as jv } from "./dist.js";
+import { t as clsx } from "./clsx.js";
+import { useDelegatedProps } from "../use-delegated-props.js";
+import { createBlock, createVNode, defineComponent, mergeProps, openBlock, unref, withCtx } from "vue";
+//#endregion
+//#region src/components/checkbox/checkbox.vue
+var checkbox_default = /* @__PURE__ */ defineComponent({
+	__name: "checkbox",
+	props: {
+		defaultChecked: { type: Boolean },
+		checked: { type: [Boolean, String] },
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		name: {},
+		value: {},
+		id: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: {}
+	},
+	emits: ["update:checked"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const forwarded = Se(useDelegatedProps(props, "class"), emits);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Wv), mergeProps(unref(forwarded), { class: unref(clsx)("celeste-checkbox", props.class) }), {
+				default: withCtx(() => [createVNode(unref(jv), { class: "celeste-checkbox-indicator" })]),
+				_: 1
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { checkbox_default as t };

package/dist/esm/chunks/clsx.js

@@ -0,0 +1,16 @@
+//#region ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+	var t, f, n = "";
+	if ("string" == typeof e || "number" == typeof e) n += e;
+	else if ("object" == typeof e) if (Array.isArray(e)) {
+		var o = e.length;
+		for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+	} else for (f in e) e[f] && (n && (n += " "), n += f);
+	return n;
+}
+function clsx() {
+	for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+	return n;
+}
+//#endregion
+export { clsx as t };

package/dist/esm/chunks/collapsible-content.js

@@ -0,0 +1,25 @@
+import { $ as Zi } from "./dist.js";
+import { t as clsx } from "./clsx.js";
+import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#endregion
+//#region src/components/collapsible/collapsible-content.vue
+var collapsible_content_default = /* @__PURE__ */ defineComponent({
+	__name: "collapsible-content",
+	props: {
+		class: {},
+		forceMount: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Zi), mergeProps(props, { class: unref(clsx)("celeste-collapsible-content", props.class) }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { collapsible_content_default as t };

package/dist/esm/chunks/collapsible-trigger.js

@@ -0,0 +1,22 @@
+import { X as Yi } from "./dist.js";
+import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#endregion
+//#region src/components/collapsible/collapsible-trigger.vue
+var collapsible_trigger_default = /* @__PURE__ */ defineComponent({
+	__name: "collapsible-trigger",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Yi), normalizeProps(guardReactiveProps(props)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { collapsible_trigger_default as t };

package/dist/esm/chunks/collapsible.js

@@ -0,0 +1,26 @@
+import { I as Se, Mt as qi } from "./dist.js";
+import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#endregion
+//#region src/components/collapsible/collapsible.vue
+var collapsible_default = /* @__PURE__ */ defineComponent({
+	__name: "collapsible",
+	props: {
+		defaultOpen: { type: Boolean },
+		open: { type: Boolean },
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	emits: ["update:open"],
+	setup(__props, { emit: __emit }) {
+		const forwarded = Se(__props, __emit);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(qi), normalizeProps(guardReactiveProps(unref(forwarded))), {
+				default: withCtx(({ open }) => [renderSlot(_ctx.$slots, "default", { open })]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { collapsible_default as t };

package/dist/esm/chunks/color-area.js

@@ -0,0 +1,166 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { useUserPageSelection } from "../use-user-select.js";
+import { clamp, getAbsolutePosition, getPageXYFromEvent, resolveArrowDirection } from "../color.js";
+import { n as defineColorModel, t as ColorPickerEmits } from "./use-color-model.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onUnmounted, openBlock, ref, useCssVars, useTemplateRef, watch } from "vue";
+//#endregion
+//#region src/components/color-picker/color-area.vue
+var color_area_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "color-area",
+	props: {
+		hue: {},
+		modelValue: {}
+	},
+	emits: ["change"].concat(ColorPickerEmits),
+	setup(__props, { emit: __emit }) {
+		useCssVars((_ctx) => ({ "57f9eb60": colorAreaBg.value }));
+		const props = __props;
+		const emit = __emit;
+		const { preventPageUserSelect, allowPageUserSelect } = useUserPageSelection();
+		const pointerRef = ref(0);
+		const tinyColorRef = defineColorModel(props, emit);
+		const containerRef = useTemplateRef("color-area");
+		const hsv = computed(() => {
+			return tinyColorRef.value.toHsv();
+		});
+		const hue = computed(() => {
+			return props.hue ?? hsv.value.h;
+		});
+		const colorAreaBg = computed(() => {
+			return `hsl(${hue.value}, 100%, 50%)`;
+		});
+		const colorAreaThumbBg = computed(() => {
+			const { r, g, b } = tinyColorRef.value.toRgb();
+			return `rgb(${r}, ${g}, ${b})`;
+		});
+		const pointerTop = computed(() => {
+			return `${-(hsv.value.v * 100) + 1 + 100}%`;
+		});
+		const pointerLeft = computed(() => {
+			if (hsv.value.v <= .01) return `${pointerRef.value * 100}%`;
+			return `${hsv.value.s * 100}%`;
+		});
+		watch(() => props.hue, (newHue, oldHue) => {
+			if (newHue !== oldHue) {
+				const { s, v, a } = hsv.value;
+				onChange({
+					h: newHue,
+					s: s * 100,
+					v: v * 100,
+					a
+				});
+			}
+		});
+		function handleChange(e, skip = false) {
+			e.preventDefault();
+			const container = containerRef.value;
+			if (!container) return;
+			const containerWidth = container.clientWidth;
+			const containerHeight = container.clientHeight;
+			const { x: xOffset, y: yOffset } = getAbsolutePosition(container);
+			const { x: pageX, y: pageY } = getPageXYFromEvent(e);
+			const left = clamp(pageX - xOffset, 0, containerWidth);
+			const top = clamp(pageY - yOffset, 0, containerHeight);
+			const saturation = left / containerWidth;
+			const brightness = clamp(1 - top / containerHeight, 0, 1);
+			pointerRef.value = saturation;
+			let s = Math.round(saturation * 100);
+			let v = Math.round(brightness * 100);
+			if (s === 1) s = .01;
+			if (v === 1) v = .01;
+			onChange({
+				h: hue.value,
+				s,
+				v,
+				a: hsv.value.a
+			});
+		}
+		function onChange(newColor) {
+			tinyColorRef.value = newColor;
+		}
+		function handleMouseDown() {
+			preventPageUserSelect();
+			window.addEventListener("mousemove", handleChange);
+			window.addEventListener("mouseup", handleChange);
+			window.addEventListener("mouseup", handleMouseUp);
+		}
+		function handleMouseUp() {
+			allowPageUserSelect();
+			unbindEventListeners();
+		}
+		function unbindEventListeners() {
+			window.removeEventListener("mousemove", handleChange);
+			window.removeEventListener("mouseup", handleChange);
+			window.removeEventListener("mouseup", handleMouseUp);
+		}
+		function handleKeyDown(e) {
+			const direction = resolveArrowDirection(e);
+			if (!direction) return;
+			e.preventDefault();
+			switch (direction) {
+				case "left": {
+					const newSaturation = hsv.value.s - .01;
+					onChange({
+						...hsv.value,
+						s: newSaturation >= 0 ? newSaturation : 0
+					});
+					break;
+				}
+				case "right": {
+					const newSaturation = hsv.value.s + .01;
+					onChange({
+						...hsv.value,
+						s: newSaturation > 1 ? 1 : newSaturation
+					});
+					break;
+				}
+				case "up": {
+					const newBrightness = hsv.value.v + .01;
+					onChange({
+						...hsv.value,
+						v: newBrightness > 1 ? 1 : newBrightness
+					});
+					break;
+				}
+				case "down": {
+					const newBrightness = hsv.value.v - .01;
+					onChange({
+						...hsv.value,
+						v: newBrightness < 0 ? 0 : newBrightness
+					});
+					break;
+				}
+			}
+		}
+		onUnmounted(() => {
+			unbindEventListeners();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "color-area",
+				class: "celeste-color-area",
+				role: "application",
+				"aria-label": "Saturation and brightness picker",
+				onMousedown: handleMouseDown,
+				onTouchmovePassive: handleChange,
+				onTouchstartPassive: handleChange
+			}, [createElementVNode("div", {
+				class: "celeste-color-thumb",
+				style: normalizeStyle({
+					top: pointerTop.value,
+					left: pointerLeft.value,
+					background: colorAreaThumbBg.value
+				}),
+				role: "slider",
+				tabindex: "0",
+				"aria-valuemin": "0",
+				"aria-valuemax": "1",
+				"aria-label": "press arrow to change saturation or brightness",
+				"aria-valuenow": "?",
+				onKeydown: handleKeyDown
+			}, null, 36)], 544);
+		};
+	}
+}), [["__scopeId", "data-v-ee238a27"]]);
+//#endregion
+export { color_area_default as t };