@youcan/celeste 0.6.53 → 0.6.55

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.53",
+  "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.53",
-    "@youcan/celeste-tokens": "0.6.53"
+    "@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';

package/src/components/file-upload/stories/file-upload-area.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Sonner from '@/components/sonner/sonner.vue';
+import { toast } from '@/utils/sonner';
+import { ref, watch } from 'vue';
+import FileUploadArea, { type FileError } from '../file-upload-area.vue';
+import 'vue-sonner/style.css';
+
+const meta: Meta<typeof FileUploadArea> = {
+  title: 'Components/File Upload',
+  component: FileUploadArea,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FileUploadArea>;
+
+export const Default: Story = {
+  args: {
+    multiple: true,
+  },
+
+  render: args => ({
+    components: { FileUploadArea },
+    setup() {
+      const files = ref([]);
+
+      watch(files, (newValue) => {
+        // eslint-disable-next-line no-console
+        console.log('v-model changed:', newValue);
+      });
+
+      function handleError(error: FileError): void {
+        console.error(error);
+      };
+
+      return { args, files, handleError };
+    },
+    template: `
+      <FileUploadArea v-bind="args" v-model="files" @error="handleError" />
+    `,
+  }),
+};
+
+export const CustomTriggerHandler: Story = {
+  args: {
+    multiple: true,
+  },
+
+  render: args => ({
+    components: { FileUploadArea, Sonner },
+    setup() {
+      const files = ref([]);
+
+      watch(files, (newValue) => {
+        // eslint-disable-next-line no-console
+        console.log('v-model changed:', newValue);
+      });
+
+      function handleTriggerClick(): void {
+        toast('Upload trigger clicked!');
+      };
+
+      function handleError(error: FileError): void {
+        console.error(error);
+      };
+
+      return { args, files, handleError, handleTriggerClick };
+    },
+    template: `
+    <div class="sonner-story-container">
+      <Sonner position="top-center" />
+      <FileUploadArea v-bind="args" v-model="files" @error="handleError" @triggerClick="handleTriggerClick" />
+    </div>
+    `,
+  }),
+};

package/src/components/index.ts

@@ -2,11 +2,11 @@ export * from './alert';
 export * from './badge';
 export * from './button';
 export * from './checkbox';
+export * from './color-picker';
 export * from './combobox';
 export * from './content-divider';
 export * from './counter-input';
 export * from './digit-input';
-export * from './dropdown';
 export * from './dropdown-menu';
 export * from './hint-text';
 export * from './label';

package/dist/cjs/context-menu-item.js

@@ -1,134 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const clsx = require("./chunks/clsx.js");
-const index = require("./chunks/index.js");
-const badge = require("./badge.js");
-const button = require("./button.js");
-const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _hoisted_1 = ["aria-disabled"];
-const _hoisted_2 = { class: "celeste-context-menu-item-info" };
-const _hoisted_3 = ["innerHTML"];
-const _hoisted_4 = {
-  key: 0,
-  class: "celeste-context-menu-item-sublabel"
-};
-const _hoisted_5 = {
-  key: 0,
-  class: "celeste-context-menu-item-description"
-};
-const _hoisted_6 = {
-  key: 2,
-  class: "celeste-context-menu-item-shortcut"
-};
-const _hoisted_7 = { class: "celeste-context-menu-item-switch" };
-const _hoisted_8 = { class: "celeste-context-menu-item-button" };
-const _hoisted_9 = {
-  key: 3,
-  class: "celeste-context-menu-item-suffix"
-};
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "context-menu-item",
-  props: /* @__PURE__ */ Mo.mergeModels({
-    size: { default: "sm" },
-    class: {},
-    label: {},
-    sublabel: {},
-    description: {},
-    disabled: { type: Boolean, default: false },
-    focused: { type: Boolean, default: false },
-    badgeProps: {},
-    shortcut: {},
-    toggle: { type: Boolean },
-    selected: { type: Boolean },
-    buttonProps: {},
-    rightIcon: {}
-  }, {
-    "selected": { type: Boolean },
-    "selectedModifiers": {}
-  }),
-  emits: ["update:selected"],
-  setup(__props) {
-    const props = __props;
-    const selectedModel = Mo.useModel(__props, "selected");
-    const mergedBadgeProps = Mo.computed(() => ({
-      ...props.badgeProps,
-      disabled: props.disabled
-    }));
-    const mergedButtonProps = Mo.computed(() => {
-      return props.buttonProps ? {
-        size: props.size === "sm" ? "xxs" : "xs",
-        variant: props.size === "sm" ? "ghost" : "lighter",
-        disabled: props.disabled,
-        ...props.buttonProps
-      } : null;
-    });
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createElementBlock("div", {
-        tabindex: "0",
-        "aria-disabled": _ctx.disabled,
-        class: Mo.normalizeClass(Mo.unref(clsx.clsx)(
-          "celeste-context-menu-item",
-          `celeste-context-menu-item-size-${_ctx.size}`,
-          { "celeste-context-menu-item-disabled": _ctx.disabled },
-          { "celeste-context-menu-item-selected": __props.selected },
-          { "celeste-context-menu-item-focused": _ctx.focused }
-        ))
-      }, [
-        _ctx.$slots.prefix ? (Mo.openBlock(), Mo.createElementBlock("div", {
-          key: 0,
-          class: Mo.normalizeClass(Mo.unref(clsx.clsx)(
-            "celeste-context-menu-item-prefix",
-            `celeste-context-menu-item-prefix-${_ctx.size}`
-          ))
-        }, [
-          Mo.renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
-        ], 2)) : Mo.createCommentVNode("", true),
-        Mo.createElementVNode("div", _hoisted_2, [
-          Mo.createElementVNode("div", {
-            class: Mo.normalizeClass(Mo.unref(clsx.clsx)(
-              "celeste-context-menu-item-header",
-              `celeste-context-menu-item-header-${_ctx.size}`
-            ))
-          }, [
-            Mo.createElementVNode("span", {
-              class: "celeste-context-menu-item-label",
-              innerHTML: _ctx.label
-            }, null, 8, _hoisted_3),
-            _ctx.sublabel ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_4, Mo.toDisplayString(_ctx.sublabel), 1)) : Mo.createCommentVNode("", true)
-          ], 2),
-          props.description && props.size === "lg" ? (Mo.openBlock(), Mo.createElementBlock("p", _hoisted_5, Mo.toDisplayString(_ctx.description), 1)) : Mo.createCommentVNode("", true)
-        ]),
-        mergedBadgeProps.value ? (Mo.openBlock(), Mo.createBlock(badge, Mo.mergeProps({ key: 1 }, mergedBadgeProps.value, { class: "celeste-context-menu-item-badge" }), null, 16)) : Mo.createCommentVNode("", true),
-        _ctx.shortcut ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_6, Mo.toDisplayString(_ctx.shortcut), 1)) : Mo.createCommentVNode("", true),
-        Mo.createElementVNode("span", _hoisted_7, [
-          Mo.createVNode(Mo.unref(index.mg), {
-            checked: selectedModel.value,
-            "onUpdate:checked": _cache[0] || (_cache[0] = ($event) => selectedModel.value = $event),
-            disabled: _ctx.disabled,
-            class: "celeste-switch-root"
-          }, {
-            default: Mo.withCtx(() => [
-              Mo.createVNode(Mo.unref(index.hg), { class: "celeste-switch-thumb" })
-            ]),
-            _: 1
-          }, 8, ["checked", "disabled"])
-        ]),
-        Mo.createElementVNode("span", _hoisted_8, [
-          mergedButtonProps.value ? (Mo.openBlock(), Mo.createBlock(button, Mo.normalizeProps(Mo.mergeProps({ key: 0 }, mergedButtonProps.value)), {
-            default: Mo.withCtx(() => [
-              Mo.renderSlot(_ctx.$slots, "button-label", {}, void 0, true)
-            ]),
-            _: 3
-          }, 16)) : Mo.createCommentVNode("", true)
-        ]),
-        _ctx.rightIcon ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_9, [
-          Mo.createElementVNode("i", {
-            class: Mo.normalizeClass(_ctx.rightIcon)
-          }, null, 2)
-        ])) : Mo.createCommentVNode("", true)
-      ], 10, _hoisted_1);
-    };
-  }
-});
-const contextMenuItem = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-3d94f388"]]);
-module.exports = contextMenuItem;

package/dist/cjs/dropdown-item.js

@@ -1,99 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const clsx = require("./chunks/clsx.js");
-const checkbox_vue_vue_type_style_index_0_lang = require("./chunks/checkbox.vue_vue_type_style_index_0_lang.js");
-const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _hoisted_1 = ["aria-disabled"];
-const _hoisted_2 = { class: "celeste-dropdown-item-info" };
-const _hoisted_3 = ["innerHTML"];
-const _hoisted_4 = {
-  key: 0,
-  class: "celeste-dropdown-item-sublabel"
-};
-const _hoisted_5 = {
-  key: 0,
-  class: "celeste-dropdown-item-description"
-};
-const _hoisted_6 = {
-  key: 2,
-  class: "celeste-dropdown-item-suffix"
-};
-const _hoisted_7 = {
-  key: 3,
-  class: "i-celeste-check-fill"
-};
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "dropdown-item",
-  props: {
-    class: {},
-    label: {},
-    size: { default: "sm" },
-    checkbox: { type: Boolean },
-    sublabel: {},
-    description: {},
-    selected: { type: [Boolean, String], default: false },
-    disabled: { type: Boolean, default: false },
-    focused: { type: Boolean, default: false }
-  },
-  emits: ["update:selected"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    function toggleSelection() {
-      if (!props.disabled && props.checkbox) {
-        emit("update:selected", !props.selected);
-      }
-    }
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createElementBlock("div", {
-        tabindex: "0",
-        "aria-disabled": _ctx.disabled,
-        class: Mo.normalizeClass(Mo.unref(clsx.clsx)(
-          "celeste-dropdown-item",
-          { "celeste-dropdown-item-disabled": _ctx.disabled },
-          { "celeste-dropdown-item-selected": _ctx.selected },
-          { "celeste-dropdown-item-focused": _ctx.focused }
-        )),
-        onKeydown: Mo.withKeys(toggleSelection, ["enter"]),
-        onClick: toggleSelection
-      }, [
-        _ctx.checkbox && _ctx.size === "sm" ? (Mo.openBlock(), Mo.createBlock(checkbox_vue_vue_type_style_index_0_lang._sfc_main, {
-          key: 0,
-          checked: _ctx.selected,
-          disabled: _ctx.disabled,
-          "onUpdate:checked": _cache[0] || (_cache[0] = (value) => _ctx.$emit("update:selected", value))
-        }, null, 8, ["checked", "disabled"])) : Mo.createCommentVNode("", true),
-        _ctx.$slots.prefix ? (Mo.openBlock(), Mo.createElementBlock("div", {
-          key: 1,
-          class: Mo.normalizeClass(Mo.unref(clsx.clsx)(
-            "celeste-dropdown-item-prefix",
-            `celeste-dropdown-item-prefix-${_ctx.size}`
-          ))
-        }, [
-          Mo.renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
-        ], 2)) : Mo.createCommentVNode("", true),
-        Mo.createElementVNode("div", _hoisted_2, [
-          Mo.createElementVNode("div", {
-            class: Mo.normalizeClass(Mo.unref(clsx.clsx)(
-              "celeste-dropdown-item-header",
-              `celeste-dropdown-item-header-${_ctx.size}`
-            ))
-          }, [
-            Mo.createElementVNode("span", {
-              class: "celeste-dropdown-item-label",
-              innerHTML: _ctx.label
-            }, null, 8, _hoisted_3),
-            _ctx.sublabel ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_4, Mo.toDisplayString(_ctx.sublabel), 1)) : Mo.createCommentVNode("", true)
-          ], 2),
-          props.description && props.size === "lg" ? (Mo.openBlock(), Mo.createElementBlock("p", _hoisted_5, Mo.toDisplayString(_ctx.description), 1)) : Mo.createCommentVNode("", true)
-        ]),
-        _ctx.$slots.suffix ? (Mo.openBlock(), Mo.createElementBlock("div", _hoisted_6, [
-          Mo.renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
-        ])) : Mo.createCommentVNode("", true),
-        _ctx.selected ? (Mo.openBlock(), Mo.createElementBlock("i", _hoisted_7)) : Mo.createCommentVNode("", true)
-      ], 42, _hoisted_1);
-    };
-  }
-});
-const DropdownItem = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a0a634ce"]]);
-module.exports = DropdownItem;