@youcan/celeste 0.6.54 → 0.6.56

package/dist/cjs/chunks/index2.js

@@ -1,5 +1,12 @@
 "use strict";
 const Mo = require("vue");
+function tryOnScopeDispose(fn) {
+  if (Mo.getCurrentScope()) {
+    Mo.onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
 function toReactive(objectRef) {
   if (!Mo.isRef(objectRef))
     return Mo.reactive(objectRef);
@@ -40,5 +47,26 @@ function reactiveOmit(obj, ...keys) {
   const predicate = flatKeys[0];
   return reactiveComputed(() => typeof predicate === "function" ? Object.fromEntries(Object.entries(Mo.toRefs(obj)).filter(([k, v]) => !predicate(Mo.toValue(v), k))) : Object.fromEntries(Object.entries(Mo.toRefs(obj)).filter((e) => !flatKeys.includes(e[0]))));
 }
+const isClient = typeof window !== "undefined" && typeof document !== "undefined";
 typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+const toString = Object.prototype.toString;
+const isObject = (val) => toString.call(val) === "[object Object]";
+function toArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+function watchImmediate(source, cb, options) {
+  return Mo.watch(
+    source,
+    cb,
+    {
+      ...options,
+      immediate: true
+    }
+  );
+}
+exports.isClient = isClient;
+exports.isObject = isObject;
 exports.reactiveOmit = reactiveOmit;
+exports.toArray = toArray;
+exports.tryOnScopeDispose = tryOnScopeDispose;
+exports.watchImmediate = watchImmediate;

package/dist/cjs/color-picker.js

@@ -41,12 +41,13 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     label: { default: "Pick Color" },
     class: {},
     formats: { default: () => ["hex", "rgb", "hsl", "hsb"] },
-    defaultFormat: {}
+    defaultFormat: {},
+    colorSwatchLabel: { default: "Recommended Colors" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     Mo.useCssVars((_ctx) => ({
-      "88e786d6": _ctx.modelValue
+      "6559ad05": _ctx.modelValue
     }));
     const props = __props;
     const emit = __emit;
@@ -497,8 +498,9 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
                     key: 1,
                     modelValue: Mo.unref(tinyColorRef),
                     "onUpdate:modelValue": _cache[52] || (_cache[52] = ($event) => Mo.isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
+                    label: _ctx.colorSwatchLabel,
                     hue: hueRef.value
-                  }, null, 8, ["modelValue", "hue"]))
+                  }, null, 8, ["modelValue", "label", "hue"]))
                 ])
               ], 16)
             ]),
@@ -510,5 +512,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const colorPicker = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-5d801c64"]]);
+const colorPicker = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-8814818c"]]);
 module.exports = colorPicker;

package/dist/cjs/color-swatch.js

@@ -11,14 +11,14 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
   __name: "color-swatch",
   props: {
     modelValue: {},
-    label: { default: "Recommended Colors" },
+    label: {},
     swatch: { default: () => color.DEFAULT_SWATCH },
     defaultColor: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     Mo.useCssVars((_ctx) => ({
-      "0829b6e2": activeSwatchColorBg.value
+      "608e7b2a": activeSwatchColorBg.value
     }));
     const props = __props;
     const emit = __emit;
@@ -55,5 +55,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const ColorSwatch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-095c22f0"]]);
+const ColorSwatch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-e0b25a98"]]);
 module.exports = ColorSwatch;

package/dist/cjs/file-upload-area.js

@@ -0,0 +1,280 @@
+"use strict";
+const Mo = require("vue");
+const button = require("./button.js");
+const index = require("./chunks/index2.js");
+const clsx = require("./chunks/clsx.js");
+const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
+const defaultWindow = index.isClient ? window : void 0;
+function unrefElement(elRef) {
+  var _a;
+  const plain = Mo.toValue(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+function useEventListener(...args) {
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, options) => {
+    el.addEventListener(event, listener, options);
+    return () => el.removeEventListener(event, listener, options);
+  };
+  const firstParamTargets = Mo.computed(() => {
+    const test = index.toArray(Mo.toValue(args[0])).filter((e) => e != null);
+    return test.every((e) => typeof e !== "string") ? test : void 0;
+  });
+  const stopWatch = index.watchImmediate(
+    () => {
+      var _a, _b;
+      return [
+        (_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
+        index.toArray(Mo.toValue(firstParamTargets.value ? args[1] : args[0])),
+        index.toArray(Mo.unref(firstParamTargets.value ? args[2] : args[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        Mo.toValue(firstParamTargets.value ? args[3] : args[2])
+      ];
+    },
+    ([raw_targets, raw_events, raw_listeners, raw_options]) => {
+      cleanup();
+      if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
+        return;
+      const optionsClone = index.isObject(raw_options) ? { ...raw_options } : raw_options;
+      cleanups.push(
+        ...raw_targets.flatMap(
+          (el) => raw_events.flatMap(
+            (event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  );
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  index.tryOnScopeDispose(cleanup);
+  return stop;
+}
+function useDropZone(target, options = {}) {
+  var _a, _b;
+  const isOverDropZone = Mo.shallowRef(false);
+  const files = Mo.shallowRef(null);
+  let counter = 0;
+  let isValid = true;
+  if (index.isClient) {
+    const _options = typeof options === "function" ? { onDrop: options } : options;
+    const multiple = (_a = _options.multiple) != null ? _a : true;
+    const preventDefaultForUnhandled = (_b = _options.preventDefaultForUnhandled) != null ? _b : false;
+    const getFiles = (event) => {
+      var _a2, _b2;
+      const list = Array.from((_b2 = (_a2 = event.dataTransfer) == null ? void 0 : _a2.files) != null ? _b2 : []);
+      return list.length === 0 ? null : multiple ? list : [list[0]];
+    };
+    const checkDataTypes = (types) => {
+      const dataTypes = Mo.unref(_options.dataTypes);
+      if (typeof dataTypes === "function")
+        return dataTypes(types);
+      if (!(dataTypes == null ? void 0 : dataTypes.length))
+        return true;
+      if (types.length === 0)
+        return false;
+      return types.every(
+        (type) => dataTypes.some((allowedType) => type.includes(allowedType))
+      );
+    };
+    const checkValidity = (items) => {
+      const types = Array.from(items != null ? items : []).map((item) => item.type);
+      const dataTypesValid = checkDataTypes(types);
+      const multipleFilesValid = multiple || items.length <= 1;
+      return dataTypesValid && multipleFilesValid;
+    };
+    const isSafari = () => /^(?:(?!chrome|android).)*safari/i.test(navigator.userAgent) && !("chrome" in window);
+    const handleDragEvent = (event, eventType) => {
+      var _a2, _b2, _c, _d, _e, _f;
+      const dataTransferItemList = (_a2 = event.dataTransfer) == null ? void 0 : _a2.items;
+      isValid = (_b2 = dataTransferItemList && checkValidity(dataTransferItemList)) != null ? _b2 : false;
+      if (preventDefaultForUnhandled) {
+        event.preventDefault();
+      }
+      if (!isSafari() && !isValid) {
+        if (event.dataTransfer) {
+          event.dataTransfer.dropEffect = "none";
+        }
+        return;
+      }
+      event.preventDefault();
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "copy";
+      }
+      const currentFiles = getFiles(event);
+      switch (eventType) {
+        case "enter":
+          counter += 1;
+          isOverDropZone.value = true;
+          (_c = _options.onEnter) == null ? void 0 : _c.call(_options, null, event);
+          break;
+        case "over":
+          (_d = _options.onOver) == null ? void 0 : _d.call(_options, null, event);
+          break;
+        case "leave":
+          counter -= 1;
+          if (counter === 0)
+            isOverDropZone.value = false;
+          (_e = _options.onLeave) == null ? void 0 : _e.call(_options, null, event);
+          break;
+        case "drop":
+          counter = 0;
+          isOverDropZone.value = false;
+          if (isValid) {
+            files.value = currentFiles;
+            (_f = _options.onDrop) == null ? void 0 : _f.call(_options, currentFiles, event);
+          }
+          break;
+      }
+    };
+    useEventListener(target, "dragenter", (event) => handleDragEvent(event, "enter"));
+    useEventListener(target, "dragover", (event) => handleDragEvent(event, "over"));
+    useEventListener(target, "dragleave", (event) => handleDragEvent(event, "leave"));
+    useEventListener(target, "drop", (event) => handleDragEvent(event, "drop"));
+  }
+  return {
+    files,
+    isOverDropZone
+  };
+}
+const _hoisted_1 = ["data-over-drop-zone"];
+const _hoisted_2 = { class: "celeste-file-upload-area-content" };
+const _hoisted_3 = { class: "celeste-file-upload-area-label" };
+const _hoisted_4 = {
+  key: 0,
+  class: "celeste-file-upload-area-description"
+};
+const _hoisted_5 = ["multiple", "accept"];
+const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
+  __name: "file-upload-area",
+  props: /* @__PURE__ */ Mo.mergeModels({
+    label: { default: "Choose a file or drag & drop it here." },
+    description: { default: "JPEG, PNG, PDF, and MP4 formats, up to 50 MB." },
+    labelOnDrop: { default: "Drop file to upload" },
+    triggerLabel: { default: "Browse Files" },
+    maxSize: { default: 2e3 },
+    maxFiles: { default: 5 },
+    multiple: { type: Boolean, default: false },
+    icon: { default: "i-celeste-upload-cloud-2-line" },
+    accept: {},
+    onTriggerClick: {},
+    class: {}
+  }, {
+    "modelValue": { default: [] },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ Mo.mergeModels(["error"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const files = Mo.useModel(__props, "modelValue");
+    const dropZoneRef = Mo.useTemplateRef("dropZoneRef");
+    const { isOverDropZone } = useDropZone(dropZoneRef, { onDrop });
+    function handleUpload(e) {
+      const input = e.target;
+      const newFiles = Array.from(input.files ?? []);
+      const filesToProcess = newFiles.slice(0, props.maxFiles);
+      const rejectedFiles = newFiles.slice(props.maxFiles);
+      if (rejectedFiles.length > 0) {
+        emit("error", {
+          message: "Files exceeded upload limit",
+          type: "count",
+          files: rejectedFiles
+        });
+      }
+      const validFiles = filesToProcess.filter(isValidFile);
+      files.value = [...validFiles];
+    }
+    function onDrop(droppedFiles) {
+      if (!(droppedFiles == null ? void 0 : droppedFiles.length))
+        return;
+      const filesToProcess = droppedFiles.slice(0, props.maxFiles);
+      const rejectedFiles = droppedFiles.slice(props.maxFiles);
+      if (rejectedFiles.length > 0) {
+        emit("error", {
+          message: "Files exceeded upload limit",
+          type: "count",
+          files: rejectedFiles
+        });
+      }
+      const validFiles = filesToProcess.filter(isValidFile);
+      files.value = [...validFiles];
+    }
+    function isValidFile(file) {
+      var _a;
+      const maxBytes = props.maxSize * 1024;
+      if (file.size > maxBytes) {
+        emit("error", {
+          message: `File too large: ${file.name}`,
+          type: "size",
+          files: [file]
+        });
+        return false;
+      }
+      const acceptableTypes = ((_a = props.accept) == null ? void 0 : _a.split(",")) ?? [];
+      if (acceptableTypes.length > 0 && !acceptableTypes.includes(file.type)) {
+        emit("error", {
+          message: "Unsupported type",
+          type: "type",
+          files: [file]
+        });
+        return false;
+      }
+      return true;
+    }
+    function handleTriggerClick(e) {
+      if (props.onTriggerClick) {
+        e.preventDefault();
+        props.onTriggerClick();
+      }
+    }
+    return (_ctx, _cache) => {
+      return Mo.openBlock(), Mo.createElementBlock("label", {
+        ref_key: "dropZoneRef",
+        ref: dropZoneRef,
+        class: Mo.normalizeClass(Mo.unref(clsx.clsx)(
+          "celeste-file-upload-area",
+          props.class
+        )),
+        "data-over-drop-zone": Mo.unref(isOverDropZone)
+      }, [
+        Mo.createElementVNode("i", {
+          class: Mo.normalizeClass(_ctx.icon)
+        }, null, 2),
+        Mo.createElementVNode("div", _hoisted_2, [
+          Mo.createElementVNode("span", _hoisted_3, Mo.toDisplayString(Mo.unref(isOverDropZone) ? _ctx.labelOnDrop : _ctx.label), 1),
+          !Mo.unref(isOverDropZone) ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_4, Mo.toDisplayString(_ctx.description), 1)) : Mo.createCommentVNode("", true)
+        ]),
+        !Mo.unref(isOverDropZone) ? (Mo.openBlock(), Mo.createBlock(button, {
+          key: 0,
+          "as-child": "",
+          intent: "neutral",
+          variant: "stroke",
+          size: "xs",
+          class: "celeste-file-upload-area-trigger",
+          onClick: handleTriggerClick
+        }, {
+          default: Mo.withCtx(() => [
+            Mo.createElementVNode("span", null, Mo.toDisplayString(_ctx.triggerLabel), 1)
+          ]),
+          _: 1
+        })) : Mo.createCommentVNode("", true),
+        Mo.createElementVNode("input", Mo.mergeProps(_ctx.$attrs, {
+          type: "file",
+          multiple: _ctx.multiple,
+          accept: _ctx.accept,
+          onChange: handleUpload
+        }), null, 16, _hoisted_5)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+const fileUploadArea = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-6e8a873e"]]);
+module.exports = fileUploadArea;

package/dist/cjs/index.js

@@ -31,9 +31,6 @@ const counterInput_vue_vue_type_style_index_0_lang = require("./chunks/counter-i
 const digitInputGroup = require("./digit-input-group.js");
 const digitInputSlot = require("./digit-input-slot.js");
 const digitInput = require("./digit-input.js");
-const contextMenuItem = require("./context-menu-item.js");
-const dropdownItem = require("./dropdown-item.js");
-const dropdown = require("./dropdown.js");
 const dropdownMenuContent = require("./dropdown-menu-content.js");
 const dropdownMenuGroup = require("./dropdown-menu-group.js");
 const dropdownMenuItem = require("./dropdown-menu-item.js");
@@ -44,6 +41,7 @@ const dropdownMenuSubTrigger = require("./dropdown-menu-sub-trigger.js");
 const dropdownMenuSub_vue_vue_type_script_setup_true_lang = require("./chunks/dropdown-menu-sub.js");
 const dropdownMenuTrigger = require("./dropdown-menu-trigger.js");
 const dropdownMenu = require("./dropdown-menu.js");
+const fileUploadArea = require("./file-upload-area.js");
 const hintText = require("./hint-text.js");
 const label = require("./label.js");
 const modalBody = require("./modal-body.js");
@@ -116,13 +114,10 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   ComboboxTrigger: comboboxTrigger,
   CompactButton: compactButton,
   ContentDivider: contentDivider_vue_vue_type_style_index_0_lang._sfc_main,
-  ContextMenuItem: contextMenuItem,
   CounterInput: counterInput_vue_vue_type_style_index_0_lang._sfc_main,
   DigitInput: digitInput,
   DigitInputGroup: digitInputGroup,
   DigitInputSlot: digitInputSlot,
-  Dropdown: dropdown,
-  DropdownItem: dropdownItem,
   DropdownMenu: dropdownMenu,
   DropdownMenuContent: dropdownMenuContent,
   DropdownMenuGroup: dropdownMenuGroup,
@@ -134,6 +129,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   DropdownMenuSubTrigger: dropdownMenuSubTrigger,
   DropdownMenuTrigger: dropdownMenuTrigger,
   FancyButton: fancyButton,
+  FileUploadArea: fileUploadArea,
   HintText: hintText,
   HueSlider: hueSlider,
   Label: label,
@@ -271,9 +267,6 @@ exports.CounterInput = counterInput_vue_vue_type_style_index_0_lang._sfc_main;
 exports.DigitInputGroup = digitInputGroup;
 exports.DigitInputSlot = digitInputSlot;
 exports.DigitInput = digitInput;
-exports.ContextMenuItem = contextMenuItem;
-exports.DropdownItem = dropdownItem;
-exports.Dropdown = dropdown;
 exports.DropdownMenuContent = dropdownMenuContent;
 exports.DropdownMenuGroup = dropdownMenuGroup;
 exports.DropdownMenuItem = dropdownMenuItem;
@@ -284,6 +277,7 @@ exports.DropdownMenuSubTrigger = dropdownMenuSubTrigger;
 exports.DropdownMenuSub = dropdownMenuSub_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.DropdownMenuTrigger = dropdownMenuTrigger;
 exports.DropdownMenu = dropdownMenu;
+exports.FileUploadArea = fileUploadArea;
 exports.HintText = hintText;
 exports.Label = label;
 exports.ModalBody = modalBody;

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

@@ -7,6 +7,7 @@ export interface ColorPickerProps {
     class?: HTMLAttributes['class'];
     formats?: ColorFormat[];
     defaultFormat?: ColorFormat;
+    colorSwatchLabel?: string;
 }
 export interface ColorPickerEmits {
     'update:modelValue': [value: string];
@@ -36,6 +37,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Co
     label: string;
     modelValue: string | tinycolor.ColorInput;
     formats: ColorFormat[];
+    colorSwatchLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
     swatches?(_: {}): any;
 }>;

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

@@ -1,7 +1,7 @@
 import { default as tinycolor } from 'tinycolor2';
 export interface ColorSwatchProps {
     modelValue: tinycolor.Instance;
-    label?: string;
+    label: string;
     swatch?: string[];
     defaultColor?: string;
 }
@@ -13,7 +13,6 @@ declare const _default: import('vue').DefineComponent<ColorSwatchProps, {}, {},
 }, string, import('vue').PublicProps, Readonly<ColorSwatchProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    label: string;
     swatch: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/file-upload/file-upload-area.d.ts

@@ -0,0 +1,43 @@
+import { InputHTMLAttributes } from 'vue';
+export interface FileUploadAreaProps {
+    label?: string;
+    description?: string;
+    labelOnDrop?: string;
+    triggerLabel?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    multiple?: boolean;
+    icon?: string;
+    accept?: InputHTMLAttributes['accept'];
+    onTriggerClick?: () => void;
+    class?: InputHTMLAttributes['class'];
+}
+export interface FileError {
+    message: string;
+    type: 'size' | 'type' | 'count';
+    files: File[];
+}
+export interface FileUploadAreaEmit {
+    error: [error: FileError];
+}
+declare const _default: import('vue').DefineComponent<{
+    modelValue?: File[];
+} & FileUploadAreaProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (error: FileError) => any;
+    "update:modelValue": (value: File[]) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue?: File[];
+} & FileUploadAreaProps> & Readonly<{
+    onError?: ((error: FileError) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+}>, {
+    label: string;
+    description: string;
+    icon: string;
+    multiple: boolean;
+    labelOnDrop: string;
+    triggerLabel: string;
+    maxSize: number;
+    maxFiles: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
+export default _default;

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+export * from './file-upload-area';
+export { default as FileUploadArea } from './file-upload-area';

package/dist/components/index.d.ts

@@ -7,8 +7,8 @@ export * from './combobox';
 export * from './content-divider';
 export * from './counter-input';
 export * from './digit-input';
-export * from './dropdown';
 export * from './dropdown-menu';
+export * from './file-upload';
 export * from './hint-text';
 export * from './label';
 export * from './modal';

package/dist/es/chunks/index2.js

@@ -1,4 +1,11 @@
-import { computed, toRefs, toValue, isRef, reactive, unref } from "vue";
+import { computed, toRefs, toValue, getCurrentScope, onScopeDispose, isRef, reactive, unref, watch } from "vue";
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
 function toReactive(objectRef) {
   if (!isRef(objectRef))
     return reactive(objectRef);
@@ -39,7 +46,28 @@ function reactiveOmit(obj, ...keys) {
   const predicate = flatKeys[0];
   return reactiveComputed(() => typeof predicate === "function" ? Object.fromEntries(Object.entries(toRefs(obj)).filter(([k, v]) => !predicate(toValue(v), k))) : Object.fromEntries(Object.entries(toRefs(obj)).filter((e) => !flatKeys.includes(e[0]))));
 }
+const isClient = typeof window !== "undefined" && typeof document !== "undefined";
 typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+const toString = Object.prototype.toString;
+const isObject = (val) => toString.call(val) === "[object Object]";
+function toArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+function watchImmediate(source, cb, options) {
+  return watch(
+    source,
+    cb,
+    {
+      ...options,
+      immediate: true
+    }
+  );
+}
 export {
-  reactiveOmit as r
+  tryOnScopeDispose as a,
+  isObject as b,
+  isClient as i,
+  reactiveOmit as r,
+  toArray as t,
+  watchImmediate as w
 };

package/dist/es/color-picker.js

@@ -40,12 +40,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     label: { default: "Pick Color" },
     class: {},
     formats: { default: () => ["hex", "rgb", "hsl", "hsb"] },
-    defaultFormat: {}
+    defaultFormat: {},
+    colorSwatchLabel: { default: "Recommended Colors" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "88e786d6": _ctx.modelValue
+      "6559ad05": _ctx.modelValue
     }));
     const props = __props;
     const emit = __emit;
@@ -496,8 +497,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     key: 1,
                     modelValue: unref(tinyColorRef),
                     "onUpdate:modelValue": _cache[52] || (_cache[52] = ($event) => isRef(tinyColorRef) ? tinyColorRef.value = $event : null),
+                    label: _ctx.colorSwatchLabel,
                     hue: hueRef.value
-                  }, null, 8, ["modelValue", "hue"]))
+                  }, null, 8, ["modelValue", "label", "hue"]))
                 ])
               ], 16)
             ]),
@@ -509,7 +511,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const colorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5d801c64"]]);
+const colorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8814818c"]]);
 export {
   colorPicker as default
 };

package/dist/es/color-swatch.js

@@ -10,14 +10,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "color-swatch",
   props: {
     modelValue: {},
-    label: { default: "Recommended Colors" },
+    label: {},
     swatch: { default: () => DEFAULT_SWATCH },
     defaultColor: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "0829b6e2": activeSwatchColorBg.value
+      "608e7b2a": activeSwatchColorBg.value
     }));
     const props = __props;
     const emit = __emit;
@@ -54,7 +54,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-095c22f0"]]);
+const ColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e0b25a98"]]);
 export {
   ColorSwatch as default
 };