@youcan/celeste 0.6.54 → 0.6.55

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

@@ -0,0 +1,281 @@
+import { shallowRef, computed, toValue, unref, defineComponent, mergeModels, useModel, useTemplateRef, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, createBlock, withCtx, mergeProps } from "vue";
+import Button from "./button.js";
+import { i as isClient, t as toArray, w as watchImmediate, a as tryOnScopeDispose, b as isObject } from "./chunks/index2.js";
+import { c as clsx } from "./chunks/clsx.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const defaultWindow = isClient ? window : void 0;
+function unrefElement(elRef) {
+  var _a;
+  const plain = 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 = computed(() => {
+    const test = toArray(toValue(args[0])).filter((e) => e != null);
+    return test.every((e) => typeof e !== "string") ? test : void 0;
+  });
+  const stopWatch = watchImmediate(
+    () => {
+      var _a, _b;
+      return [
+        (_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
+        toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
+        toArray(unref(firstParamTargets.value ? args[2] : args[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        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 = 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();
+  };
+  tryOnScopeDispose(cleanup);
+  return stop;
+}
+function useDropZone(target, options = {}) {
+  var _a, _b;
+  const isOverDropZone = shallowRef(false);
+  const files = shallowRef(null);
+  let counter = 0;
+  let isValid = true;
+  if (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 = 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__ */ defineComponent({
+  __name: "file-upload-area",
+  props: /* @__PURE__ */ 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__ */ mergeModels(["error"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const files = useModel(__props, "modelValue");
+    const dropZoneRef = 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 openBlock(), createElementBlock("label", {
+        ref_key: "dropZoneRef",
+        ref: dropZoneRef,
+        class: normalizeClass(unref(clsx)(
+          "celeste-file-upload-area",
+          props.class
+        )),
+        "data-over-drop-zone": unref(isOverDropZone)
+      }, [
+        createElementVNode("i", {
+          class: normalizeClass(_ctx.icon)
+        }, null, 2),
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("span", _hoisted_3, toDisplayString(unref(isOverDropZone) ? _ctx.labelOnDrop : _ctx.label), 1),
+          !unref(isOverDropZone) ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
+        ]),
+        !unref(isOverDropZone) ? (openBlock(), createBlock(Button, {
+          key: 0,
+          "as-child": "",
+          intent: "neutral",
+          variant: "stroke",
+          size: "xs",
+          class: "celeste-file-upload-area-trigger",
+          onClick: handleTriggerClick
+        }, {
+          default: withCtx(() => [
+            createElementVNode("span", null, toDisplayString(_ctx.triggerLabel), 1)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        createElementVNode("input", mergeProps(_ctx.$attrs, {
+          type: "file",
+          multiple: _ctx.multiple,
+          accept: _ctx.accept,
+          onChange: handleUpload
+        }), null, 16, _hoisted_5)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+const fileUploadArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6e8a873e"]]);
+export {
+  fileUploadArea as default
+};

package/dist/es/index.js

@@ -29,9 +29,6 @@ import { _ as _sfc_main$4 } from "./chunks/counter-input.vue_vue_type_style_inde
 import digitInputGroup from "./digit-input-group.js";
 import digitInputSlot from "./digit-input-slot.js";
 import digitInput from "./digit-input.js";
-import contextMenuItem from "./context-menu-item.js";
-import DropdownItem from "./dropdown-item.js";
-import dropdown from "./dropdown.js";
 import dropdownMenuContent from "./dropdown-menu-content.js";
 import dropdownMenuGroup from "./dropdown-menu-group.js";
 import dropdownMenuItem from "./dropdown-menu-item.js";
@@ -114,13 +111,10 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   ComboboxTrigger,
   CompactButton,
   ContentDivider: _sfc_main$3,
-  ContextMenuItem: contextMenuItem,
   CounterInput: _sfc_main$4,
   DigitInput: digitInput,
   DigitInputGroup: digitInputGroup,
   DigitInputSlot: digitInputSlot,
-  Dropdown: dropdown,
-  DropdownItem,
   DropdownMenu: dropdownMenu,
   DropdownMenuContent: dropdownMenuContent,
   DropdownMenuGroup: dropdownMenuGroup,
@@ -263,14 +257,11 @@ export {
   ComboboxTrigger,
   CompactButton,
   _sfc_main$3 as ContentDivider,
-  contextMenuItem as ContextMenuItem,
   _sfc_main$4 as CounterInput,
   DEFAULT_SWATCH,
   digitInput as DigitInput,
   digitInputGroup as DigitInputGroup,
   digitInputSlot as DigitInputSlot,
-  dropdown as Dropdown,
-  DropdownItem,
   dropdownMenu as DropdownMenu,
   dropdownMenuContent as DropdownMenuContent,
   dropdownMenuGroup as DropdownMenuGroup,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.54",
+  "version": "0.6.55",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -44,15 +44,15 @@
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.2",
-    "@youcan/celeste-icons": "0.6.54",
-    "@youcan/celeste-tokens": "0.6.54"
+    "@youcan/celeste-icons": "0.6.55",
+    "@youcan/celeste-tokens": "0.6.55"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.0",
-    "@storybook/addon-docs": "^9.0.4",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-docs": "^9.1.10",
     "@storybook/addon-knobs": "^8.0.1",
-    "@storybook/addon-onboarding": "^9.0.4",
-    "@storybook/vue3-vite": "^9.0.4",
+    "@storybook/addon-onboarding": "^9.1.10",
+    "@storybook/vue3-vite": "^9.1.10",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/tinycolor2": "^1.4.6",
@@ -64,14 +64,14 @@
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
     "chromatic": "^11.22.1",
-    "eslint-plugin-storybook": "9.0.17",
+    "eslint-plugin-storybook": "9.1.10",
     "glob": "^11.0.3",
     "jsdom": "^25.0.1",
     "postcss": "^8.5.6",
     "postcss-nesting": "^13.0.2",
     "rimraf": "^6.0.1",
     "sass": "^1.83.1",
-    "storybook": "^9.0.17",
+    "storybook": "^9.1.10",
     "unocss": "^66.3.3",
     "vite": "^6.0.7",
     "vite-plugin-dts": "^4.4.0",

package/src/components/color-picker/color-picker.vue

@@ -17,6 +17,7 @@ const props = withDefaults(defineProps<ColorPickerProps>(), {
   modelValue: 'hsl(240, 100%, 50%)',
   formats: () => ['hex', 'rgb', 'hsl', 'hsb'],
   label: 'Pick Color',
+  colorSwatchLabel: 'Recommended Colors',
 });
 
 const emit = defineEmits<ColorPickerEmits>();
@@ -246,6 +247,7 @@ export interface ColorPickerProps {
   class?: HTMLAttributes['class'];
   formats?: ColorFormat[];
   defaultFormat?: ColorFormat;
+  colorSwatchLabel?: string;
 }
 
 export interface ColorPickerEmits {
@@ -489,6 +491,7 @@ declare global {
           <ColorSwatch
             v-else
             v-model="tinyColorRef"
+            :label="colorSwatchLabel"
             :hue="hueRef"
           />
         </div>
@@ -507,6 +510,7 @@ declare global {
     display: block;
     width: var(--color-tile-size);
     height: var(--color-tile-size);
+    border: 1px solid var(--color-bg-soft-200);
     border-radius: var(--radius-4);
     background-color: v-bind(modelValue);
   }

package/src/components/color-picker/color-swatch.vue

@@ -5,7 +5,6 @@ import { computed } from 'vue';
 import { defineColorModel } from './composable/use-color-model';
 
 const props = withDefaults(defineProps<ColorSwatchProps>(), {
-  label: 'Recommended Colors',
   swatch: () => DEFAULT_SWATCH,
 });
 const emit = defineEmits<ColorSwatchEmits>();
@@ -28,7 +27,7 @@ function isSwatchColorSelected(color: string) {
 <script lang="ts">
 export interface ColorSwatchProps {
   modelValue: tinycolor.Instance;
-  label?: string;
+  label: string;
   swatch?: string[];
   defaultColor?: string;
 }

package/src/components/file-upload/file-upload-area.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import Button from '@/components/button/button.vue';
+import { useDropZone } from '@vueuse/core';
+import clsx from 'clsx';
+import { type InputHTMLAttributes, useTemplateRef } from 'vue';
+
+const props = withDefaults(defineProps<FileUploadAreaProps>(), {
+  icon: 'i-celeste-upload-cloud-2-line',
+  label: 'Choose a file or drag & drop it here.',
+  description: 'JPEG, PNG, PDF, and MP4 formats, up to 50 MB.',
+  triggerLabel: 'Browse Files',
+  labelOnDrop: 'Drop file to upload',
+  multiple: false,
+  maxSize: 2000,
+  maxFiles: 5,
+});
+
+const emit = defineEmits<FileUploadAreaEmit>();
+
+const files = defineModel<File[]>({ default: [] });
+
+const dropZoneRef = useTemplateRef<HTMLElement>('dropZoneRef');
+const { isOverDropZone } = useDropZone(dropZoneRef, { onDrop });
+
+function handleUpload(e: Event) {
+  const input = e.target as HTMLInputElement;
+  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: File[] | null) {
+  if (!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: File): boolean {
+  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 = props.accept?.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: Event) {
+  if (props.onTriggerClick) {
+    e.preventDefault();
+    props.onTriggerClick();
+  }
+}
+</script>
+
+<script lang="ts">
+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];
+}
+</script>
+
+<template>
+  <label
+    ref="dropZoneRef"
+    :class="clsx(
+      'celeste-file-upload-area',
+      props.class,
+    )"
+    :data-over-drop-zone="isOverDropZone"
+  >
+    <i :class="icon" />
+    <div class="celeste-file-upload-area-content">
+      <span class="celeste-file-upload-area-label">
+        {{ isOverDropZone ? labelOnDrop : label }}
+      </span>
+      <span
+        v-if="!isOverDropZone"
+        class="celeste-file-upload-area-description"
+      >
+        {{ description }}
+      </span>
+    </div>
+    <Button
+      v-if="!isOverDropZone"
+      as-child
+      intent="neutral"
+      variant="stroke"
+      size="xs"
+      class="celeste-file-upload-area-trigger"
+      @click="handleTriggerClick"
+    >
+      <span>{{ triggerLabel }}</span>
+    </Button>
+    <input
+      v-bind="$attrs"
+      type="file"
+      :multiple="multiple"
+      :accept="accept"
+      @change="handleUpload"
+    >
+  </label>
+</template>
+
+<style scoped lang="scss">
+.celeste-file-upload-area {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 204px;
+  gap: calc(var(--spacing-10) * 2);
+  padding: calc(var(--spacing-16) * 2);
+  transition: background-color var(--animation-normal) ease-out;
+  border: 1px dashed var(--color-stroke-sub-300);
+  border-radius: var(--radius-12);
+  background-color: var(--color-bg-white-0);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-bg-weak-50);
+  }
+
+  & > i {
+    width: 24px;
+    height: 24px;
+    color: var(--color-icon-sub-600);
+  }
+
+  .celeste-file-upload-area-content {
+    display: grid;
+    gap: var(--spacing-6);
+    text-align: center;
+
+    .celeste-file-upload-area-label {
+      color: var(--color-text-strong-950);
+      font: var(--label-sm);
+    }
+
+    .celeste-file-upload-area-description {
+      color: var(--color-text-sub-600);
+      font: var(--label-xs);
+    }
+  }
+
+  .celeste-file-upload-area-trigger {
+    background-color: var(--color-bg-white-0) !important;
+
+    &:hover {
+      background-color: transparent !important;
+      box-shadow: none !important;
+    }
+  }
+
+  & > input[type='file'] {
+    position: absolute;
+    opacity: 0;
+    scale: 0;
+  }
+
+  &[data-over-drop-zone='true'] {
+    background-color: var(--color-bg-weak-50);
+  }
+}
+</style>

package/src/components/file-upload/index.ts

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