@youcan/celeste 0.17.2 → 0.19.0

package/dist/cjs/chunks/ComboboxItem.cjs

@@ -194,3 +194,9 @@ Object.defineProperty(exports, "ComboboxItem_default", {
 		return ComboboxItem_default;
 	}
 });
+Object.defineProperty(exports, "injectListboxItemContext", {
+	enumerable: true,
+	get: function() {
+		return injectListboxItemContext;
+	}
+});

package/dist/cjs/chunks/alpha-slider.cjs

@@ -1,6 +1,6 @@
 const require_use_user_select = require("../use-user-select.cjs");
 const require_color = require("../color.cjs");
-const require_use_color_model = require("./use-color-model.cjs");
+const require_use_color_model = require("../use-color-model.cjs");
 let vue = require("vue");
 //#region src/components/color-picker/alpha-slider.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "celeste-color-slider" };

package/dist/cjs/chunks/color-area.cjs

@@ -1,7 +1,7 @@
 const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
 const require_use_user_select = require("../use-user-select.cjs");
 const require_color = require("../color.cjs");
-const require_use_color_model = require("./use-color-model.cjs");
+const require_use_color_model = require("../use-color-model.cjs");
 let vue = require("vue");
 //#region src/components/color-picker/color-area.vue?vue&type=script&setup=true&lang.ts
 var color_area_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({

package/dist/cjs/chunks/color-picker.cjs

@@ -9,21 +9,17 @@ require("./select-label.cjs");
 require("./select-separator.cjs");
 const require_select_value = require("./select-value.cjs");
 const require_button = require("./button.cjs");
-require("./compact-button.cjs");
-require("./fancy-button.cjs");
-require("./link-button.cjs");
-require("./social-button.cjs");
+require("./gradient-picker.cjs");
 const require_use_delegated_props = require("../use-delegated-props.cjs");
 const require_color = require("../color.cjs");
-const require_use_color_model = require("./use-color-model.cjs");
+const require_tinycolor = require("./tinycolor.cjs");
+const require_use_color_model = require("../use-color-model.cjs");
 const require_alpha_slider = require("./alpha-slider.cjs");
 const require_color_area = require("./color-area.cjs");
 const require_popover = require("./popover.cjs");
 require("./select-group.cjs");
 require("./select-icon.cjs");
 const require_select = require("./select.cjs");
-require("./text-input-affix.cjs");
-require("./text-input-button.cjs");
 const require_text_input = require("./text-input.cjs");
 const require_color_swatch = require("./color-swatch.cjs");
 const require_hue_slider = require("./hue-slider.cjs");
@@ -58,7 +54,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
-		(0, vue.useCssVars)((_ctx) => ({ "v19437362": _ctx.modelValue }));
+		(0, vue.useCssVars)((_ctx) => ({ "v6500f742": _ctx.modelValue }));
 		const props = __props;
 		const emit = __emit;
 		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "class");
@@ -100,7 +96,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 		function sipColor() {
 			if (!eyeDropper.value) return;
 			eyeDropper.value.open().then((result) => {
-				const newColor = require_use_color_model.tinycolor(result.sRGBHex);
+				const newColor = require_tinycolor.tinycolor(result.sRGBHex);
 				tinyColorRef.value = newColor;
 			}).catch((_) => {});
 		}
@@ -119,22 +115,21 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 			} else if (key === "a") currentValue = tinyColorRef.value.getAlpha() * 100;
 			return currentValue;
 		}
-		function validateInput(event) {
+		function nextInputValue(event) {
 			const input = event.target;
-			const inputEvent = event;
-			const newValue = require_color.truncColorValue(input.value) + (inputEvent.data ?? "");
-			if (!require_color.COLOR_NUMBER_VALIDATION_PATTERN.test(newValue)) event.preventDefault();
+			const { length } = input.value;
+			return input.value.slice(0, input.selectionStart ?? length) + (event.data ?? "") + input.value.slice(input.selectionEnd ?? length);
+		}
+		function validateInput(event) {
+			if (!require_color.COLOR_NUMBER_VALIDATION_PATTERN.test(nextInputValue(event).replace(/[%°]/g, "").trim())) event.preventDefault();
 		}
 		function validateHexInput(event) {
-			const input = event.target;
-			const inputEvent = event;
-			const newValue = input.value + (inputEvent.data ?? "");
-			if (!require_color.HEX_VALIDATION_PATTERN.test(newValue)) event.preventDefault();
+			if (!require_color.HEX_VALIDATION_PATTERN.test(nextInputValue(event))) event.preventDefault();
 		}
 		function inputChangeHex(event) {
 			const colorInput = event.target?.value;
 			if (!colorInput) return;
-			tinyColorRef.value = require_use_color_model.tinycolor(colorInput);
+			tinyColorRef.value = require_tinycolor.tinycolor(colorInput);
 		}
 		function inputChangeRGB(event, key) {
 			const value = Number(event.target?.value);
@@ -142,7 +137,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 				...rgb.value,
 				[key]: value
 			};
-			tinyColorRef.value = require_use_color_model.tinycolor(newRgb);
+			tinyColorRef.value = require_tinycolor.tinycolor(newRgb);
 		}
 		function inputChangeHSL(event, key) {
 			const HSLInput = event.target?.value;
@@ -177,20 +172,20 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 			const { min, max } = require_color.getColorConstraints(key);
 			const newValue = require_color.clamp(require_color.bumpColorValue(currentValue, direction), min, max);
 			if (key === "r" || key === "g" || key === "b") {
-				const newColor = require_use_color_model.tinycolor({
+				const newColor = require_tinycolor.tinycolor({
 					...rgb.value,
 					[key]: newValue
 				});
 				emit("update:modelValue", newColor.toString());
 			} else if (key === "h") {
 				if (currentColorFormat.value === "hsl") {
-					const newColor = require_use_color_model.tinycolor({
+					const newColor = require_tinycolor.tinycolor({
 						...tinyColorRef.value.toHsl(),
 						h: newValue
 					});
 					emit("update:modelValue", newColor.toString());
 				} else {
-					const newColor = require_use_color_model.tinycolor({
+					const newColor = require_tinycolor.tinycolor({
 						...tinyColorRef.value.toHsv(),
 						h: newValue
 					});
@@ -198,14 +193,14 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 				}
 			} else if (key === "s" || key === "l" || key === "v") {
 				if (currentColorFormat.value === "hsl") {
-					const newColor = require_use_color_model.tinycolor({
+					const newColor = require_tinycolor.tinycolor({
 						...tinyColorRef.value.toHsl(),
 						[key]: newValue / 100
 					});
 					emit("update:modelValue", newColor.toString());
 				} else {
 					const currentHsv = tinyColorRef.value.toHsv();
-					const newColor = require_use_color_model.tinycolor({
+					const newColor = require_tinycolor.tinycolor({
 						...currentHsv,
 						[key]: newValue / 100
 					});
@@ -476,7 +471,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 });
 //#endregion
 //#region src/components/color-picker/color-picker.vue
-var color_picker_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(color_picker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-94b97787"]]);
+var color_picker_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(color_picker_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d9442cfd"]]);
 //#endregion
 Object.defineProperty(exports, "color_picker_default", {
 	enumerable: true,

package/dist/cjs/chunks/color-swatch.cjs

@@ -1,6 +1,7 @@
 const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
 const require_color = require("../color.cjs");
-const require_use_color_model = require("./use-color-model.cjs");
+const require_tinycolor = require("./tinycolor.cjs");
+const require_use_color_model = require("../use-color-model.cjs");
 let vue = require("vue");
 //#region src/components/color-picker/color-swatch.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "celeste-color-swatch" };
@@ -29,10 +30,10 @@ var color_swatch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0,
 			return `0 0 0 2px var(--color-bg-white-0), 0 0 0 4px ${tinyColorRef.value.toRgbString()}`;
 		});
 		function handleSwatchColorClick(newColor) {
-			tinyColorRef.value = require_use_color_model.tinycolor(newColor);
+			tinyColorRef.value = require_tinycolor.tinycolor(newColor);
 		}
 		function isSwatchColorSelected(color) {
-			return tinyColorRef.value.toHex8String().toLocaleLowerCase() === require_use_color_model.tinycolor(color).toHex8String().toLocaleLowerCase();
+			return tinyColorRef.value.toHex8String().toLocaleLowerCase() === require_tinycolor.tinycolor(color).toHex8String().toLocaleLowerCase();
 		}
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.createElementVNode)("span", _hoisted_2, (0, vue.toDisplayString)(__props.label), 1), (0, vue.createElementVNode)("div", _hoisted_3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.swatch, (swatchColor) => {

package/dist/cjs/chunks/combobox-item.cjs

@@ -1,9 +1,66 @@
 const require_clsx = require("./clsx.cjs");
 const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
+const require_Primitive = require("./Primitive.cjs");
+const require_useForwardExpose = require("./useForwardExpose.cjs");
 const require_useForwardPropsEmits = require("./useForwardPropsEmits.cjs");
 const require_ComboboxItem = require("./ComboboxItem.cjs");
 const require_checkbox = require("./checkbox.cjs");
 let vue = require("vue");
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Listbox/ListboxItemIndicator.js
+var ListboxItemIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ListboxItemIndicator",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		require_useForwardExpose.useForwardExpose();
+		const itemContext = require_ComboboxItem.injectListboxItemContext();
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(itemContext).isSelected.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive.Primitive), (0, vue.mergeProps)({
+				key: 0,
+				"aria-hidden": "true"
+			}, props), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16)) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.5_vue@3.5.41_typescript@6.0.3_/node_modules/reka-ui/dist/Combobox/ComboboxItemIndicator.js
+var ComboboxItemIndicator_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ComboboxItemIndicator",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ListboxItemIndicator_default), (0, vue.normalizeProps)((0, vue.guardReactiveProps)(props)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
 //#region src/components/combobox/combobox-item.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-disabled"];
 var _hoisted_2 = { class: "celeste-dropdown-item-info" };
@@ -20,10 +77,6 @@ var _hoisted_6 = {
 	key: 2,
 	class: "celeste-dropdown-item-suffix"
 };
-var _hoisted_7 = {
-	key: 3,
-	class: "i-celeste-check-fill"
-};
 var combobox_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	__name: "combobox-item",
 	props: {
@@ -68,7 +121,7 @@ var combobox_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
 					tabindex: "0",
 					"aria-disabled": __props.disabled,
-					class: (0, vue.normalizeClass)((0, vue.unref)(require_clsx.clsx)(props.class, "celeste-dropdown-item", { "celeste-dropdown-item-disabled": __props.disabled }, { "celeste-dropdown-item-selected": __props.selected }, { "celeste-dropdown-item-focused": __props.focused }))
+					class: (0, vue.normalizeClass)((0, vue.unref)(require_clsx.clsx)(props.class, "celeste-dropdown-item", { "celeste-dropdown-item-disabled": __props.disabled }, { "celeste-dropdown-item-focused": __props.focused }))
 				}, [
 					__props.checkbox && __props.size === "sm" ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_checkbox.checkbox_default, {
 						key: 0,
@@ -84,7 +137,10 @@ var combobox_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 						innerHTML: __props.label
 					}, null, 8, _hoisted_3), __props.sublabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4, (0, vue.toDisplayString)(__props.sublabel), 1)) : (0, vue.createCommentVNode)("", true)], 2), __props.description && __props.size === "lg" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_5, (0, vue.toDisplayString)(__props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
 					_ctx.$slots.suffix ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6, [(0, vue.renderSlot)(_ctx.$slots, "suffix", {}, void 0, true)])) : (0, vue.createCommentVNode)("", true),
-					__props.selected ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("i", _hoisted_7)) : (0, vue.createCommentVNode)("", true)
+					(0, vue.createVNode)((0, vue.unref)(ComboboxItemIndicator_default), { "as-child": "" }, {
+						default: (0, vue.withCtx)(() => [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("i", { class: "celeste-dropdown-item-indicator i-celeste-check-line" }, null, -1)])]),
+						_: 1
+					})
 				], 10, _hoisted_1)]),
 				_: 3
 			}, 16, ["disabled"]);
@@ -93,7 +149,7 @@ var combobox_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 });
 //#endregion
 //#region src/components/combobox/combobox-item.vue
-var combobox_item_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_item_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a4dc028f"]]);
+var combobox_item_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_item_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-7b0de826"]]);
 //#endregion
 Object.defineProperty(exports, "combobox_item_default", {
 	enumerable: true,

package/dist/cjs/chunks/combobox-list.cjs

@@ -160,7 +160,7 @@ var combobox_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0
 });
 //#endregion
 //#region src/components/combobox/combobox-list.vue
-var combobox_list_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_list_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-63b3dde3"]]);
+var combobox_list_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_list_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d0001b47"]]);
 //#endregion
 Object.defineProperty(exports, "combobox_list_default", {
 	enumerable: true,

package/dist/cjs/chunks/combobox-trigger.cjs

@@ -101,7 +101,7 @@ var combobox_trigger_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 });
 //#endregion
 //#region src/components/combobox/combobox-trigger.vue
-var combobox_trigger_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_trigger_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c724299e"]]);
+var combobox_trigger_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_trigger_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-7924a538"]]);
 //#endregion
 Object.defineProperty(exports, "combobox_trigger_default", {
 	enumerable: true,

package/dist/cjs/chunks/combobox.cjs

@@ -1,13 +1,13 @@
 const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
 const require_badge = require("./badge.cjs");
 const require_useForwardPropsEmits = require("./useForwardPropsEmits.cjs");
+const require_combobox_item = require("./combobox-item.cjs");
 const require_combobox_anchor = require("./combobox-anchor.cjs");
 const require_combobox_empty = require("./combobox-empty.cjs");
 const require_combobox_list = require("./combobox-list.cjs");
 const require_combobox_trigger = require("./combobox-trigger.cjs");
 const require_combobox_group = require("./combobox-group.cjs");
 const require_combobox_input = require("./combobox-input.cjs");
-const require_combobox_item = require("./combobox-item.cjs");
 const require_combobox_root = require("./combobox-root.cjs");
 const require_combobox_separator = require("./combobox-separator.cjs");
 let vue = require("vue");
@@ -201,7 +201,7 @@ var combobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue
 });
 //#endregion
 //#region src/components/combobox/combobox.vue
-var combobox_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f1dfb246"]]);
+var combobox_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b1f5501b"]]);
 //#endregion
 Object.defineProperty(exports, "combobox_default", {
 	enumerable: true,

package/dist/cjs/chunks/components.cjs

@@ -7,6 +7,7 @@ const require_status_badge = require("./status-badge.cjs");
 const require_tooltip_content = require("./tooltip-content.cjs");
 const require_collapsible_content = require("./collapsible-content.cjs");
 const require_collapsible_trigger = require("./collapsible-trigger.cjs");
+const require_combobox_item = require("./combobox-item.cjs");
 const require_combobox_anchor = require("./combobox-anchor.cjs");
 const require_combobox_empty = require("./combobox-empty.cjs");
 const require_combobox_list = require("./combobox-list.cjs");
@@ -58,7 +59,7 @@ const require_compact_button = require("./compact-button.cjs");
 const require_fancy_button = require("./fancy-button.cjs");
 const require_link_button = require("./link-button.cjs");
 const require_social_button = require("./social-button.cjs");
-const require_color_picker = require("./color-picker.cjs");
+const require_gradient_picker = require("./gradient-picker.cjs");
 const require_bar_chart = require("./bar-chart.cjs");
 const require_chart_legend = require("./chart-legend.cjs");
 const require_chart_plot = require("./chart-plot.cjs");
@@ -73,14 +74,17 @@ const require_popover = require("./popover.cjs");
 const require_select_group = require("./select-group.cjs");
 const require_select_icon = require("./select-icon.cjs");
 const require_select = require("./select.cjs");
+const require_color_picker = require("./color-picker.cjs");
 const require_text_input_affix = require("./text-input-affix.cjs");
 const require_text_input_button = require("./text-input-button.cjs");
 const require_text_input = require("./text-input.cjs");
 const require_color_swatch = require("./color-swatch.cjs");
+const require_tooltip_provider = require("./tooltip-provider.cjs");
+const require_tooltip_root = require("./tooltip-root.cjs");
+const require_tooltip = require("./tooltip.cjs");
 const require_hue_slider = require("./hue-slider.cjs");
 const require_combobox_group = require("./combobox-group.cjs");
 const require_combobox_input = require("./combobox-input.cjs");
-const require_combobox_item = require("./combobox-item.cjs");
 const require_combobox_root = require("./combobox-root.cjs");
 const require_combobox_separator = require("./combobox-separator.cjs");
 const require_combobox = require("./combobox.cjs");
@@ -112,9 +116,6 @@ const require_digit_input = require("./digit-input.cjs");
 const require_dropdown_menu = require("./dropdown-menu.cjs");
 const require_file_upload_area = require("./file-upload-area.cjs");
 const require_hint_text = require("./hint-text.cjs");
-const require_tooltip_provider = require("./tooltip-provider.cjs");
-const require_tooltip_root = require("./tooltip-root.cjs");
-const require_tooltip = require("./tooltip.cjs");
 const require_label = require("./label2.cjs");
 const require_mochi = require("./mochi.cjs");
 const require_pagination = require("./pagination.cjs");
@@ -255,6 +256,7 @@ var components_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
 	DropdownMenuTrigger: () => require_dropdown_menu_trigger.dropdown_menu_trigger_default,
 	FancyButton: () => require_fancy_button.fancy_button_default,
 	FileUploadArea: () => require_file_upload_area.file_upload_area_default,
+	GradientPicker: () => require_gradient_picker.gradient_picker_default,
 	HintText: () => require_hint_text.hint_text_default,
 	HueSlider: () => require_hue_slider.hue_slider_default,
 	Label: () => require_label.label_default,