@youcan/celeste 0.18.0 → 0.20.0

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/components.cjs

@@ -59,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");
@@ -74,10 +74,14 @@ 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");
@@ -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,