@youcan/celeste 0.18.0 → 0.19.0

package/dist/cjs/gradient.cjs

@@ -0,0 +1,71 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/utils/gradient.ts
+var DIRECTIONS = {
+	"to top": 0,
+	"to top right": 45,
+	"to right top": 45,
+	"to right": 90,
+	"to bottom right": 135,
+	"to right bottom": 135,
+	"to bottom": 180,
+	"to bottom left": 225,
+	"to left bottom": 225,
+	"to left": 270,
+	"to top left": 315,
+	"to left top": 315
+};
+var UNITS = {
+	deg: 1,
+	grad: .9,
+	rad: 180 / Math.PI,
+	turn: 360
+};
+function splitTopLevel(value) {
+	const parts = [];
+	let depth = 0;
+	let current = "";
+	for (const char of value) {
+		depth += char === "(" ? 1 : char === ")" ? -1 : 0;
+		if (char === "," && depth === 0) {
+			parts.push(current.trim());
+			current = "";
+			continue;
+		}
+		current += char;
+	}
+	return [...parts, current.trim()].filter(Boolean);
+}
+function parseGradient(value) {
+	const match = /^\s*(linear|radial)-gradient\(([\s\S]*)\)\s*$/i.exec(value ?? "");
+	if (!match) return null;
+	const parts = splitTopLevel(match[2]);
+	const head = parts[0]?.toLowerCase() ?? "";
+	let angle = 180;
+	const unit = /^(-?(?:\d+(?:\.\d+)?|\.\d+))(deg|grad|rad|turn)$/.exec(head);
+	const shape = /circle|ellipse|closest|farthest|^at /.test(head) ? parts[0] : void 0;
+	if (unit || shape || head.startsWith("to ")) {
+		parts.shift();
+		angle = unit ? Math.round((Number(unit[1]) * UNITS[unit[2]] % 360 + 360) % 360) : DIRECTIONS[head] ?? angle;
+	}
+	const stops = parts.map((part, index) => {
+		const position = /\s(-?\d+(?:\.\d+)?)%$/.exec(part)?.[1];
+		return {
+			color: (position === void 0 ? part : part.slice(0, part.lastIndexOf(" "))).trim(),
+			position: position === void 0 ? Math.round(index / Math.max(parts.length - 1, 1) * 100) : Number(position)
+		};
+	});
+	const type = match[1].toLowerCase();
+	return stops.length > 1 ? {
+		type,
+		angle,
+		...type === "radial" && shape && { shape },
+		stops
+	} : null;
+}
+function stringifyGradient({ type, angle, shape, stops }) {
+	const list = [...stops].sort((a, b) => a.position - b.position).map((stop) => `${stop.color} ${stop.position}%`).join(", ");
+	return type === "linear" ? `linear-gradient(${angle}deg, ${list})` : `radial-gradient(${shape ? `${shape}, ` : ""}${list})`;
+}
+//#endregion
+exports.parseGradient = parseGradient;
+exports.stringifyGradient = stringifyGradient;

package/dist/cjs/index.cjs

@@ -61,7 +61,7 @@ const require_compact_button = require("./chunks/compact-button.cjs");
 const require_fancy_button = require("./chunks/fancy-button.cjs");
 const require_link_button = require("./chunks/link-button.cjs");
 const require_social_button = require("./chunks/social-button.cjs");
-const require_color_picker = require("./chunks/color-picker.cjs");
+const require_gradient_picker = require("./chunks/gradient-picker.cjs");
 const require_use_delegated_props = require("./use-delegated-props.cjs");
 const require_use_direction = require("./use-direction.cjs");
 const require_bar_chart = require("./chunks/bar-chart.cjs");
@@ -82,10 +82,15 @@ const require_popover = require("./chunks/popover.cjs");
 const require_select_group = require("./chunks/select-group.cjs");
 const require_select_icon = require("./chunks/select-icon.cjs");
 const require_select = require("./chunks/select.cjs");
+const require_color_picker = require("./chunks/color-picker.cjs");
 const require_text_input_affix = require("./chunks/text-input-affix.cjs");
 const require_text_input_button = require("./chunks/text-input-button.cjs");
 const require_text_input = require("./chunks/text-input.cjs");
 const require_color_swatch = require("./chunks/color-swatch.cjs");
+const require_gradient = require("./gradient.cjs");
+const require_tooltip_provider = require("./chunks/tooltip-provider.cjs");
+const require_tooltip_root = require("./chunks/tooltip-root.cjs");
+const require_tooltip = require("./chunks/tooltip.cjs");
 const require_hue_slider = require("./chunks/hue-slider.cjs");
 const require_combobox_group = require("./chunks/combobox-group.cjs");
 const require_combobox_input = require("./chunks/combobox-input.cjs");
@@ -120,9 +125,6 @@ const require_digit_input = require("./chunks/digit-input.cjs");
 const require_dropdown_menu = require("./chunks/dropdown-menu.cjs");
 const require_file_upload_area = require("./chunks/file-upload-area.cjs");
 const require_hint_text = require("./chunks/hint-text.cjs");
-const require_tooltip_provider = require("./chunks/tooltip-provider.cjs");
-const require_tooltip_root = require("./chunks/tooltip-root.cjs");
-const require_tooltip = require("./chunks/tooltip.cjs");
 const require_label = require("./chunks/label2.cjs");
 const require_mochi = require("./chunks/mochi.cjs");
 const require_pagination = require("./chunks/pagination.cjs");
@@ -313,6 +315,7 @@ exports.DropdownMenuSubTrigger = require_dropdown_menu_sub_trigger.dropdown_menu
 exports.DropdownMenuTrigger = require_dropdown_menu_trigger.dropdown_menu_trigger_default;
 exports.FancyButton = require_fancy_button.fancy_button_default;
 exports.FileUploadArea = require_file_upload_area.file_upload_area_default;
+exports.GradientPicker = require_gradient_picker.gradient_picker_default;
 exports.HEX_VALIDATION_PATTERN = require_color.HEX_VALIDATION_PATTERN;
 exports.HintText = require_hint_text.hint_text_default;
 exports.HueSlider = require_hue_slider.hue_slider_default;
@@ -432,8 +435,10 @@ exports.getFractionDigit = require_color.getFractionDigit;
 exports.getPageXYFromEvent = require_color.getPageXYFromEvent;
 exports.getScrollXY = require_color.getScrollXY;
 exports.niceTicks = require_chart.niceTicks;
+exports.parseGradient = require_gradient.parseGradient;
 exports.provideSidebarContext = require_use_sidebar.provideSidebarContext;
 exports.resolveArrowDirection = require_color.resolveArrowDirection;
+exports.stringifyGradient = require_gradient.stringifyGradient;
 exports.toast = toast;
 exports.truncColorValue = require_color.truncColorValue;
 exports.uid = require_crypto.uid;

package/dist/cjs/use-color-model.cjs

@@ -1,4 +1,28 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_use_color_model = require("./chunks/use-color-model.cjs");
-exports.ColorPickerEmits = require_use_color_model.ColorPickerEmits;
-exports.defineColorModel = require_use_color_model.defineColorModel;
+const require_tinycolor = require("./chunks/tinycolor.cjs");
+let vue = require("vue");
+//#region src/components/color-picker/composable/use-color-model.ts
+var ColorPickerEmits = ["update:modelValue"];
+function defineColorModel(props, emit) {
+	let originalFormat;
+	return (0, vue.computed)({
+		get: () => {
+			const colorInput = props.modelValue;
+			const value = require_tinycolor.tinycolor(colorInput);
+			originalFormat = value.getFormat();
+			return value;
+		},
+		set: (newValue) => {
+			const newTinyColor = require_tinycolor.tinycolor(newValue);
+			if (require_tinycolor.tinycolor.equals(newTinyColor, props.modelValue)) return;
+			emit("update:modelValue", transformToOriginalInputFormat(newTinyColor, originalFormat));
+		}
+	});
+}
+function transformToOriginalInputFormat(color, originalFormat) {
+	if (originalFormat === "hex" && color.getAlpha() < 1) return color.toString("hex8");
+	return color.toString(originalFormat);
+}
+//#endregion
+exports.ColorPickerEmits = ColorPickerEmits;
+exports.defineColorModel = defineColorModel;

package/dist/components/color-picker/gradient-picker.d.ts

@@ -0,0 +1,51 @@
+export interface GradientPickerProps {
+    modelValue?: string;
+    placeholder?: string;
+    emptyHint?: string;
+    noneLabel?: string;
+    linearLabel?: string;
+    radialLabel?: string;
+    angleLabel?: string;
+    colorStopLabel?: string;
+    addStopLabel?: string;
+    removeStopLabel?: string;
+    positionLabel?: string;
+    opacityLabel?: string;
+    hueLabel?: string;
+    areaLabel?: string;
+    eyedropperLabel?: string;
+    usedLabel?: string;
+    removeLabel?: string;
+    presets?: string[];
+    swatches?: string[];
+}
+export interface GradientPickerEmits {
+    'update:modelValue': [value: string];
+}
+declare const __VLS_export: import('vue').DefineComponent<GradientPickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<GradientPickerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    placeholder: string;
+    modelValue: string;
+    swatches: string[];
+    emptyHint: string;
+    noneLabel: string;
+    linearLabel: string;
+    radialLabel: string;
+    angleLabel: string;
+    colorStopLabel: string;
+    addStopLabel: string;
+    removeStopLabel: string;
+    positionLabel: string;
+    opacityLabel: string;
+    hueLabel: string;
+    areaLabel: string;
+    eyedropperLabel: string;
+    usedLabel: string;
+    removeLabel: string;
+    presets: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/color-picker/index.d.ts

@@ -6,5 +6,7 @@ export * from './color-picker';
 export { default as ColorPicker } from './color-picker';
 export * from './color-swatch';
 export { default as ColorSwatch } from './color-swatch';
+export * from './gradient-picker';
+export { default as GradientPicker } from './gradient-picker';
 export * from './hue-slider';
 export { default as HueSlider } from './hue-slider';

package/dist/es/chunks/alpha-slider.js

@@ -1,6 +1,6 @@
 import { useUserPageSelection } from "../use-user-select.js";
 import { getAbsolutePosition, getPageXYFromEvent, resolveArrowDirection } from "../color.js";
-import { n as defineColorModel } from "./use-color-model.js";
+import { defineColorModel } from "../use-color-model.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onUnmounted, openBlock, useTemplateRef } from "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/es/chunks/color-area.js

@@ -1,7 +1,7 @@
 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 { ColorPickerEmits, defineColorModel } from "../use-color-model.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onUnmounted, openBlock, ref, useCssVars, useTemplateRef, watch } from "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__*/ defineComponent({

package/dist/es/chunks/color-picker.js

@@ -9,21 +9,17 @@ import "./select-label.js";
 import "./select-separator.js";
 import { t as select_value_default } from "./select-value.js";
 import { t as button_default } from "./button.js";
-import "./compact-button.js";
-import "./fancy-button.js";
-import "./link-button.js";
-import "./social-button.js";
+import "./gradient-picker.js";
 import { useDelegatedProps } from "../use-delegated-props.js";
 import { COLOR_NUMBER_VALIDATION_PATTERN, HEX_VALIDATION_PATTERN, bumpColorValue, clamp, getColorConstraints, resolveArrowDirection, truncColorValue } from "../color.js";
-import { n as defineColorModel, r as tinycolor } from "./use-color-model.js";
+import { t as tinycolor } from "./tinycolor.js";
+import { defineColorModel } from "../use-color-model.js";
 import { t as alpha_slider_default } from "./alpha-slider.js";
 import { t as color_area_default } from "./color-area.js";
 import { t as popover_default } from "./popover.js";
 import "./select-group.js";
 import "./select-icon.js";
 import { t as select_default } from "./select.js";
-import "./text-input-affix.js";
-import "./text-input-button.js";
 import { t as text_input_default } from "./text-input.js";
 import { t as color_swatch_default } from "./color-swatch.js";
 import { t as hue_slider_default } from "./hue-slider.js";
@@ -60,7 +56,7 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
-		useCssVars((_ctx) => ({ "v19437362": _ctx.modelValue }));
+		useCssVars((_ctx) => ({ "v6500f742": _ctx.modelValue }));
 		const props = __props;
 		const emit = __emit;
 		const delegatedProps = useDelegatedProps(props, "class");
@@ -121,17 +117,16 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			} 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 = truncColorValue(input.value) + (inputEvent.data ?? "");
-			if (!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 (!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 (!HEX_VALIDATION_PATTERN.test(newValue)) event.preventDefault();
+			if (!HEX_VALIDATION_PATTERN.test(nextInputValue(event))) event.preventDefault();
 		}
 		function inputChangeHex(event) {
 			const colorInput = event.target?.value;
@@ -475,6 +470,6 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			});
 		};
 	}
-}), [["__scopeId", "data-v-94b97787"]]);
+}), [["__scopeId", "data-v-d9442cfd"]]);
 //#endregion
 export { color_picker_default as t };

package/dist/es/chunks/color-swatch.js

@@ -1,6 +1,7 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { DEFAULT_SWATCH } from "../color.js";
-import { n as defineColorModel, r as tinycolor } from "./use-color-model.js";
+import { t as tinycolor } from "./tinycolor.js";
+import { defineColorModel } from "../use-color-model.js";
 import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, normalizeStyle, openBlock, renderList, toDisplayString, useCssVars, withKeys } from "vue";
 //#region src/components/color-picker/color-swatch.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "celeste-color-swatch" };

package/dist/es/chunks/components.js

@@ -59,7 +59,7 @@ import { t as compact_button_default } from "./compact-button.js";
 import { t as fancy_button_default } from "./fancy-button.js";
 import { t as link_button_default } from "./link-button.js";
 import { t as social_button_default } from "./social-button.js";
-import { t as color_picker_default } from "./color-picker.js";
+import { t as gradient_picker_default } from "./gradient-picker.js";
 import { t as bar_chart_default } from "./bar-chart.js";
 import { t as chart_legend_default } from "./chart-legend.js";
 import { t as chart_plot_default } from "./chart-plot.js";
@@ -74,10 +74,14 @@ import { t as popover_default } from "./popover.js";
 import { t as select_group_default } from "./select-group.js";
 import { t as select_icon_default } from "./select-icon.js";
 import { t as select_default } from "./select.js";
+import { t as color_picker_default } from "./color-picker.js";
 import { t as text_input_affix_default } from "./text-input-affix.js";
 import { t as text_input_button_default } from "./text-input-button.js";
 import { t as text_input_default } from "./text-input.js";
 import { t as color_swatch_default } from "./color-swatch.js";
+import { t as tooltip_provider_default } from "./tooltip-provider.js";
+import { t as tooltip_root_default } from "./tooltip-root.js";
+import { t as tooltip_default } from "./tooltip.js";
 import { t as hue_slider_default } from "./hue-slider.js";
 import { t as combobox_group_default } from "./combobox-group.js";
 import { t as combobox_input_default } from "./combobox-input.js";
@@ -112,9 +116,6 @@ import { t as digit_input_default } from "./digit-input.js";
 import { t as dropdown_menu_default } from "./dropdown-menu.js";
 import { t as file_upload_area_default } from "./file-upload-area.js";
 import { t as hint_text_default } from "./hint-text.js";
-import { t as tooltip_provider_default } from "./tooltip-provider.js";
-import { t as tooltip_root_default } from "./tooltip-root.js";
-import { t as tooltip_default } from "./tooltip.js";
 import { t as label_default } from "./label2.js";
 import { t as mochi_default } from "./mochi.js";
 import { t as pagination_default } from "./pagination.js";
@@ -255,6 +256,7 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	DropdownMenuTrigger: () => dropdown_menu_trigger_default,
 	FancyButton: () => fancy_button_default,
 	FileUploadArea: () => file_upload_area_default,
+	GradientPicker: () => gradient_picker_default,
 	HintText: () => hint_text_default,
 	HueSlider: () => hue_slider_default,
 	Label: () => label_default,