@youcan/celeste 0.6.60 → 0.6.62

package/dist/celeste.css

@@ -1277,7 +1277,7 @@ to {
   border-color: var(--color-stroke-soft-200);
   background-color: var(--color-bg-white-0);
   color: var(--color-state-faded-base);
-}.celeste-button[data-v-ba4c26eb] {
+}.celeste-button[data-v-6c1800fd] {
   display: inline-flex;
   box-sizing: border-box;
   align-items: center;
@@ -1292,217 +1292,229 @@ to {
   text-decoration: none;
   cursor: pointer;
 }
-.celeste-button[data-v-ba4c26eb]:disabled {
+.celeste-button[data-v-6c1800fd]:disabled {
   background-color: var(--color-bg-weak-50);
   color: var(--color-text-disabled-300);
   cursor: default;
 }
-.celeste-button[data-v-ba4c26eb] i {
+.celeste-button[data-v-6c1800fd] i {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
 }
-.celeste-button-size-xxs[data-v-ba4c26eb] {
+.celeste-button-size-xxs[data-v-6c1800fd] {
   gap: var(--spacing-4);
   height: 28px;
   padding: var(--spacing-4) var(--spacing-6);
   border-radius: var(--radius-8);
 }
-.celeste-button-size-xs[data-v-ba4c26eb] {
+.celeste-button-size-xxs[data-v-6c1800fd]:has(> :only-child:is(i)) {
+  padding: var(--spacing-4);
+}
+.celeste-button-size-xs[data-v-6c1800fd] {
   gap: var(--spacing-4);
   height: 32px;
   padding: var(--spacing-6) var(--spacing-8);
   border-radius: var(--radius-8);
 }
-.celeste-button-size-sm[data-v-ba4c26eb] {
+.celeste-button-size-xs[data-v-6c1800fd]:has(> :only-child:is(i)) {
+  padding: var(--spacing-6);
+}
+.celeste-button-size-sm[data-v-6c1800fd] {
   gap: var(--spacing-6);
   height: 36px;
   padding: var(--spacing-8) var(--spacing-10);
   border-radius: var(--radius-8);
 }
-.celeste-button-size-md[data-v-ba4c26eb] {
+.celeste-button-size-sm[data-v-6c1800fd]:has(> :only-child:is(i)) {
+  padding: var(--spacing-8);
+}
+.celeste-button-size-md[data-v-6c1800fd] {
   gap: var(--spacing-6);
   height: 40px;
   padding: var(--spacing-10) var(--spacing-12);
   border-radius: var(--radius-10);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-size-md[data-v-6c1800fd]:has(> :only-child:is(i)) {
+  padding: var(--spacing-10);
+}
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-primary-base);
   background-color: var(--color-primary-base);
   box-shadow: none;
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: var(--color-primary-darker);
   background-color: var(--color-primary-darker);
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-primary-focus);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-primary-base);
   background-color: transparent;
   box-shadow: none;
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-primary-alpha-10);
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-primary-focus);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-primary-alpha-10);
   box-shadow: none;
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: var(--color-primary-base);
   background-color: transparent;
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-primary-focus);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled) {
   border-color: transparent;
   background-color: transparent;
   box-shadow: none;
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-primary-alpha-10);
   color: var(--color-primary-base);
 }
-.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-primary:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-primary-focus);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-bg-strong-950);
   background-color: var(--color-bg-strong-950);
   box-shadow: none;
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-bg-surface-800);
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-bg-soft-200);
   background-color: transparent;
   box-shadow: var(--shadow-regular-xs);
   color: var(--color-text-sub-600);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-bg-weak-50);
   color: var(--color-text-strong-950);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-bg-weak-50);
   background-color: var(--color-bg-weak-50);
   box-shadow: none;
   color: var(--color-text-sub-600);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: var(--color-bg-soft-200);
   background-color: transparent;
   color: var(--color-text-strong-950);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled) {
   border-color: transparent;
   background-color: transparent;
   box-shadow: none;
   color: var(--color-text-sub-600);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-bg-weak-50);
   color: var(--color-text-strong-950);
 }
-.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-neutral:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-state-error-base);
   background-color: var(--color-state-error-base);
   box-shadow: none;
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: var(--color-red-700);
   background-color: var(--color-red-700);
   color: var(--color-text-white-0);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-fill[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-error-focus);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled) {
   border-color: var(--color-state-error-base);
   background-color: transparent;
   box-shadow: none;
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-red-alpha-10);
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-stroke[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-error-focus);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-red-alpha-10);
   box-shadow: none;
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: var(--color-state-error-base);
   background-color: transparent;
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-lighter[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-error-focus);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled) {
   border-color: transparent;
   background-color: transparent;
   box-shadow: none;
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):hover:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):hover:not(:disabled) {
   border-color: transparent;
   background-color: var(--color-red-alpha-10);
   color: var(--color-state-error-base);
 }
-.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
+.celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-6c1800fd]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-error-focus);
 }@property --celeste-fbutton-bg-start {
@@ -3470,7 +3482,7 @@ to {
   color: var(--color-icon-disabled-300);
 }[data-v-3405639f] {
   box-sizing: border-box;
-}.celeste-file-upload-area[data-v-6e8a873e] {
+}.celeste-file-upload-area[data-v-cfdea6ac] {
   display: flex;
   box-sizing: border-box;
   flex-direction: column;
@@ -3485,40 +3497,40 @@ to {
   background-color: var(--color-bg-white-0);
   cursor: pointer;
 }
-.celeste-file-upload-area[data-v-6e8a873e]:hover {
+.celeste-file-upload-area[data-v-cfdea6ac]:hover {
   background-color: var(--color-bg-weak-50);
 }
-.celeste-file-upload-area > i[data-v-6e8a873e] {
+.celeste-file-upload-area > i[data-v-cfdea6ac] {
   width: 24px;
   height: 24px;
   color: var(--color-icon-sub-600);
 }
-.celeste-file-upload-area .celeste-file-upload-area-content[data-v-6e8a873e] {
+.celeste-file-upload-area .celeste-file-upload-area-content[data-v-cfdea6ac] {
   display: grid;
   gap: var(--spacing-6);
   text-align: center;
 }
-.celeste-file-upload-area .celeste-file-upload-area-content .celeste-file-upload-area-label[data-v-6e8a873e] {
+.celeste-file-upload-area .celeste-file-upload-area-content .celeste-file-upload-area-label[data-v-cfdea6ac] {
   color: var(--color-text-strong-950);
   font: var(--label-sm);
 }
-.celeste-file-upload-area .celeste-file-upload-area-content .celeste-file-upload-area-description[data-v-6e8a873e] {
+.celeste-file-upload-area .celeste-file-upload-area-content .celeste-file-upload-area-description[data-v-cfdea6ac] {
   color: var(--color-text-sub-600);
   font: var(--label-xs);
 }
-.celeste-file-upload-area .celeste-file-upload-area-trigger[data-v-6e8a873e] {
+.celeste-file-upload-area .celeste-file-upload-area-trigger[data-v-cfdea6ac] {
   background-color: var(--color-bg-white-0) !important;
 }
-.celeste-file-upload-area .celeste-file-upload-area-trigger[data-v-6e8a873e]:hover {
+.celeste-file-upload-area .celeste-file-upload-area-trigger[data-v-cfdea6ac]:hover {
   background-color: transparent !important;
   box-shadow: none !important;
 }
-.celeste-file-upload-area > input[type=file][data-v-6e8a873e] {
+.celeste-file-upload-area > input[type=file][data-v-cfdea6ac] {
   position: absolute;
   opacity: 0;
   scale: 0;
 }
-.celeste-file-upload-area[data-over-drop-zone=true][data-v-6e8a873e] {
+.celeste-file-upload-area[data-over-drop-zone=true][data-v-cfdea6ac] {
   background-color: var(--color-bg-weak-50);
 }.celeste-hint-text[data-v-0fde56ef] {
   display: flex;

package/dist/cjs/button.js

@@ -36,5 +36,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const Button = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-ba4c26eb"]]);
+const Button = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-6c1800fd"]]);
 module.exports = Button;

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

@@ -5,14 +5,13 @@ const index = require("./chunks/index3.js");
 const clsx = require("./chunks/clsx.js");
 ;/* empty css                                                                         */
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-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 = {
+const _hoisted_1 = { class: "celeste-file-upload-area-content" };
+const _hoisted_2 = { class: "celeste-file-upload-area-label" };
+const _hoisted_3 = {
   key: 0,
   class: "celeste-file-upload-area-description"
 };
-const _hoisted_5 = ["multiple", "accept"];
+const _hoisted_4 = ["multiple", "accept"];
 const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
   __name: "file-upload-area",
   props: /* @__PURE__ */ Mo.mergeModels({
@@ -38,6 +37,9 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     const files = Mo.useModel(__props, "modelValue");
     const dropZoneRef = Mo.useTemplateRef("dropZoneRef");
     const { isOverDropZone } = index.useDropZone(dropZoneRef, { onDrop });
+    const uploadComponent = Mo.computed(() => {
+      return props.onTriggerClick ? "div" : "label";
+    });
     function handleUpload(e) {
       const input = e.target;
       const newFiles = Array.from(input.files ?? []);
@@ -97,45 +99,48 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createElementBlock("label", {
+      return Mo.openBlock(), Mo.createBlock(Mo.resolveDynamicComponent(uploadComponent.value), {
         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)
+        "data-over-drop-zone": Mo.unref(isOverDropZone),
+        onClick: handleTriggerClick
+      }, {
+        default: Mo.withCtx(() => [
+          Mo.createElementVNode("i", {
+            class: Mo.normalizeClass(_ctx.icon)
+          }, null, 2),
+          Mo.createElementVNode("div", _hoisted_1, [
+            Mo.createElementVNode("span", _hoisted_2, Mo.toDisplayString(Mo.unref(isOverDropZone) ? _ctx.labelOnDrop : _ctx.label), 1),
+            !Mo.unref(isOverDropZone) ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_3, Mo.toDisplayString(_ctx.description), 1)) : Mo.createCommentVNode("", true)
           ]),
-          _: 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);
+          !Mo.unref(isOverDropZone) ? (Mo.openBlock(), Mo.createBlock(button, {
+            key: 0,
+            "as-child": "",
+            intent: "neutral",
+            variant: "stroke",
+            size: "xs",
+            class: "celeste-file-upload-area-trigger"
+          }, {
+            default: Mo.withCtx(() => [
+              Mo.createElementVNode("span", null, Mo.toDisplayString(_ctx.triggerLabel), 1)
+            ]),
+            _: 1
+          })) : Mo.createCommentVNode("", true),
+          !_ctx.onTriggerClick ? (Mo.openBlock(), Mo.createElementBlock("input", Mo.mergeProps({ key: 1 }, _ctx.$attrs, {
+            type: "file",
+            multiple: _ctx.multiple,
+            accept: _ctx.accept,
+            onChange: handleUpload
+          }), null, 16, _hoisted_4)) : Mo.createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class", "data-over-drop-zone"]);
     };
   }
 });
-const fileUploadArea = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-6e8a873e"]]);
+const fileUploadArea = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-cfdea6ac"]]);
 module.exports = fileUploadArea;

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

@@ -39,5 +39,5 @@ declare const _default: import('vue').DefineComponent<{
     triggerLabel: string;
     maxSize: number;
     maxFiles: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/es/button.js

@@ -35,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ba4c26eb"]]);
+const Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6c1800fd"]]);
 export {
   Button as default
 };

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

@@ -1,17 +1,16 @@
-import { defineComponent, mergeModels, useModel, useTemplateRef, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, createCommentVNode, createBlock, withCtx, mergeProps } from "vue";
+import { defineComponent, mergeModels, useModel, useTemplateRef, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, mergeProps } from "vue";
 import Button from "./button.js";
 import { c as useDropZone } from "./chunks/index3.js";
 import { c as clsx } from "./chunks/clsx.js";
 /* empty css                                                                        */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-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 = {
+const _hoisted_1 = { class: "celeste-file-upload-area-content" };
+const _hoisted_2 = { class: "celeste-file-upload-area-label" };
+const _hoisted_3 = {
   key: 0,
   class: "celeste-file-upload-area-description"
 };
-const _hoisted_5 = ["multiple", "accept"];
+const _hoisted_4 = ["multiple", "accept"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "file-upload-area",
   props: /* @__PURE__ */ mergeModels({
@@ -37,6 +36,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const files = useModel(__props, "modelValue");
     const dropZoneRef = useTemplateRef("dropZoneRef");
     const { isOverDropZone } = useDropZone(dropZoneRef, { onDrop });
+    const uploadComponent = computed(() => {
+      return props.onTriggerClick ? "div" : "label";
+    });
     function handleUpload(e) {
       const input = e.target;
       const newFiles = Array.from(input.files ?? []);
@@ -96,47 +98,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", {
+      return openBlock(), createBlock(resolveDynamicComponent(uploadComponent.value), {
         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)
+        "data-over-drop-zone": unref(isOverDropZone),
+        onClick: handleTriggerClick
+      }, {
+        default: withCtx(() => [
+          createElementVNode("i", {
+            class: normalizeClass(_ctx.icon)
+          }, null, 2),
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("span", _hoisted_2, toDisplayString(unref(isOverDropZone) ? _ctx.labelOnDrop : _ctx.label), 1),
+            !unref(isOverDropZone) ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
           ]),
-          _: 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);
+          !unref(isOverDropZone) ? (openBlock(), createBlock(Button, {
+            key: 0,
+            "as-child": "",
+            intent: "neutral",
+            variant: "stroke",
+            size: "xs",
+            class: "celeste-file-upload-area-trigger"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", null, toDisplayString(_ctx.triggerLabel), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          !_ctx.onTriggerClick ? (openBlock(), createElementBlock("input", mergeProps({ key: 1 }, _ctx.$attrs, {
+            type: "file",
+            multiple: _ctx.multiple,
+            accept: _ctx.accept,
+            onChange: handleUpload
+          }), null, 16, _hoisted_4)) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class", "data-over-drop-zone"]);
     };
   }
 });
-const fileUploadArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6e8a873e"]]);
+const fileUploadArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cfdea6ac"]]);
 export {
   fileUploadArea as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.60",
+  "version": "0.6.62",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -44,8 +44,8 @@
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.2",
-    "@youcan/celeste-icons": "0.6.60",
-    "@youcan/celeste-tokens": "0.6.60"
+    "@youcan/celeste-icons": "0.6.62",
+    "@youcan/celeste-tokens": "0.6.62"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",

package/src/components/button/button.vue

@@ -38,6 +38,7 @@ export interface ButtonProps extends PrimitiveProps {
 
 <style lang="scss" scoped>
 @use 'sass:map';
+@use 'sass:list';
 
 $size-map: (
   'xxs': (
@@ -247,6 +248,10 @@ $hover-map: (
       height: map.get($v, height);
       padding: map.get($v, padding);
       border-radius: map.get($v, border-radius);
+
+      &:has(> :only-child:is(i)) {
+        padding: list.nth(map.get($v, padding), 1);
+      }
     }
   }
 

package/src/components/button/stories/button.stories.ts

@@ -29,3 +29,23 @@ export const Default: Story = {
     `,
   }),
 };
+
+export const IconOnly: Story = {
+  args: {
+    size: 'sm',
+    intent: 'neutral',
+    variant: 'stroke',
+  },
+
+  render: args => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Button v-bind="args">
+        <i class="i-celeste-translate"></i>
+      </Button>
+    `,
+  }),
+};

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

@@ -2,7 +2,7 @@
 import Button from '@/components/button/button.vue';
 import { useDropZone } from '@vueuse/core';
 import clsx from 'clsx';
-import { type InputHTMLAttributes, useTemplateRef } from 'vue';
+import { computed, type InputHTMLAttributes, useTemplateRef } from 'vue';
 
 const props = withDefaults(defineProps<FileUploadAreaProps>(), {
   icon: 'i-celeste-upload-cloud-2-line',
@@ -22,6 +22,10 @@ const files = defineModel<File[]>({ default: [] });
 const dropZoneRef = useTemplateRef<HTMLElement>('dropZoneRef');
 const { isOverDropZone } = useDropZone(dropZoneRef, { onDrop });
 
+const uploadComponent = computed(() => {
+  return props.onTriggerClick ? 'div' : 'label';
+});
+
 function handleUpload(e: Event) {
   const input = e.target as HTMLInputElement;
   const newFiles = Array.from(input.files ?? []);
@@ -124,13 +128,15 @@ export interface FileUploadAreaEmit {
 </script>
 
 <template>
-  <label
+  <component
+    :is="uploadComponent"
     ref="dropZoneRef"
     :class="clsx(
       'celeste-file-upload-area',
       props.class,
     )"
     :data-over-drop-zone="isOverDropZone"
+    @click="handleTriggerClick"
   >
     <i :class="icon" />
     <div class="celeste-file-upload-area-content">
@@ -151,18 +157,18 @@ export interface FileUploadAreaEmit {
       variant="stroke"
       size="xs"
       class="celeste-file-upload-area-trigger"
-      @click="handleTriggerClick"
     >
       <span>{{ triggerLabel }}</span>
     </Button>
     <input
+      v-if="!onTriggerClick"
       v-bind="$attrs"
       type="file"
       :multiple="multiple"
       :accept="accept"
       @change="handleUpload"
     >
-  </label>
+  </component>
 </template>
 
 <style scoped lang="scss">