@youcan/celeste 0.6.42 → 0.6.43

package/dist/celeste.css

@@ -684,7 +684,7 @@ to {
 }
 .celeste-textarea-wrapper .celeste-textarea[data-v-76864cee]:disabled::placeholder {
   color: var(--color-text-disabled-300);
-}.celeste-tag[data-v-0011e3b8] {
+}.celeste-tag[data-v-368b7ec0] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -698,23 +698,23 @@ to {
   font: var(--label-xs);
   gap: var(--spacing-4);
 }
-.celeste-tag[data-tag-variant=stroke][data-v-0011e3b8]:not([aria-disabled=true]) {
+.celeste-tag[data-tag-variant=stroke][data-v-368b7ec0]:not([aria-disabled=true]) {
   border-color: var(--color-stroke-soft-200);
   background-color: var(--color-bg-white-0);
 }
-.celeste-tag[data-tag-variant=stroke][data-v-0011e3b8]:not([aria-disabled=true]):hover {
+.celeste-tag[data-tag-variant=stroke][data-v-368b7ec0]:not([aria-disabled=true]):hover {
   border-color: transparent;
   background-color: var(--color-bg-weak-50);
 }
-.celeste-tag[data-tag-variant=gray][data-v-0011e3b8]:not([aria-disabled=true]) {
+.celeste-tag[data-tag-variant=gray][data-v-368b7ec0]:not([aria-disabled=true]) {
   border-color: transparent;
   background-color: var(--color-bg-weak-50);
 }
-.celeste-tag[data-tag-variant=gray][data-v-0011e3b8]:not([aria-disabled=true]):hover {
+.celeste-tag[data-tag-variant=gray][data-v-368b7ec0]:not([aria-disabled=true]):hover {
   border-color: var(--color-stroke-soft-200);
   background-color: var(--color-bg-white-0);
 }
-.celeste-tag .celeste-tag-dismiss-button[data-v-0011e3b8] {
+.celeste-tag .celeste-tag-dismiss-button[data-v-368b7ec0] {
   --size: 16px;
   display: flex;
   align-items: center;
@@ -728,24 +728,24 @@ to {
   background-color: transparent;
   cursor: pointer;
 }
-.celeste-tag .celeste-tag-dismiss-button i[data-v-0011e3b8] {
+.celeste-tag .celeste-tag-dismiss-button i[data-v-368b7ec0] {
   transition: background-color var(--animation-fast) ease-out;
   background-color: var(--color-icon-soft-400);
 }
-.celeste-tag .celeste-tag-dismiss-button[data-v-0011e3b8]:disabled {
+.celeste-tag .celeste-tag-dismiss-button[data-v-368b7ec0]:disabled {
   cursor: auto;
 }
-.celeste-tag .celeste-tag-dismiss-button:disabled i[data-v-0011e3b8] {
+.celeste-tag .celeste-tag-dismiss-button:disabled i[data-v-368b7ec0] {
   background-color: var(--color-icon-disabled-300);
 }
-.celeste-tag .celeste-tag-dismiss-button[data-v-0011e3b8]:focus:not([aria-disabled=true]) {
+.celeste-tag .celeste-tag-dismiss-button[data-v-368b7ec0]:focus:not([aria-disabled=true]) {
   outline: none;
   box-shadow: var(--shadow-buttons-important-focus);
 }
-.celeste-tag .celeste-tag-dismiss-button:not(:disabled):hover i[data-v-0011e3b8] {
+.celeste-tag .celeste-tag-dismiss-button:not(:disabled):hover i[data-v-368b7ec0] {
   background-color: var(--color-icon-sub-600);
 }
-.celeste-tag[aria-disabled=true][data-v-0011e3b8] {
+.celeste-tag[aria-disabled=true][data-v-368b7ec0] {
   background-color: var(--color-bg-weak-50);
   color: var(--color-text-disabled-300);
 }

package/dist/cjs/tag.js

@@ -1,39 +1,46 @@
 "use strict";
 const Mo = require("vue");
 const clsx = require("./chunks/clsx.js");
+const index = require("./chunks/index.js");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _hoisted_1 = ["data-tag-variant", "aria-disabled"];
-const _hoisted_2 = ["disabled"];
+const _hoisted_1 = ["disabled"];
 const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
   __name: "tag",
   props: {
     variant: { default: "stroke" },
     class: {},
     dismissable: { type: Boolean, default: false },
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { default: "div" }
   },
   emits: ["dismiss"],
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createElementBlock("div", {
+      return Mo.openBlock(), Mo.createBlock(Mo.unref(index.O), {
+        as: _ctx.as,
+        "as-child": _ctx.asChild,
         class: Mo.normalizeClass(Mo.unref(clsx.clsx)("celeste-tag", props.class)),
         "data-tag-variant": _ctx.variant,
         "aria-disabled": _ctx.disabled
-      }, [
-        Mo.renderSlot(_ctx.$slots, "default", {}, void 0, true),
-        _ctx.dismissable ? (Mo.openBlock(), Mo.createElementBlock("button", {
-          key: 0,
-          disabled: _ctx.disabled,
-          class: "celeste-tag-dismiss-button",
-          "aria-label": "dismiss",
-          onClick: _cache[0] || (_cache[0] = Mo.withModifiers(($event) => _ctx.$emit("dismiss"), ["prevent", "stop"]))
-        }, _cache[1] || (_cache[1] = [
-          Mo.createElementVNode("i", { class: "i-celeste-close-line" }, null, -1)
-        ]), 8, _hoisted_2)) : Mo.createCommentVNode("", true)
-      ], 10, _hoisted_1);
+      }, {
+        default: Mo.withCtx(() => [
+          Mo.renderSlot(_ctx.$slots, "default", {}, void 0, true),
+          _ctx.dismissable ? (Mo.openBlock(), Mo.createElementBlock("button", {
+            key: 0,
+            disabled: _ctx.disabled,
+            class: "celeste-tag-dismiss-button",
+            "aria-label": "dismiss",
+            onClick: _cache[0] || (_cache[0] = Mo.withModifiers(($event) => _ctx.$emit("dismiss"), ["prevent", "stop"]))
+          }, _cache[1] || (_cache[1] = [
+            Mo.createElementVNode("i", { class: "i-celeste-close-line" }, null, -1)
+          ]), 8, _hoisted_1)) : Mo.createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["as", "as-child", "class", "data-tag-variant", "aria-disabled"]);
     };
   }
 });
-const tag = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-0011e3b8"]]);
+const tag = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-368b7ec0"]]);
 module.exports = tag;

package/dist/components/tag/tag.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'vue';
-export interface TagProps {
+import { PrimitiveProps } from 'radix-vue';
+export interface TagProps extends PrimitiveProps {
     variant?: 'stroke' | 'gray';
     class?: HTMLAttributes['class'];
     dismissable?: boolean;
@@ -15,7 +16,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Ta
 }>, {
     variant: "stroke" | "gray";
     dismissable: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>, {
+    as: import('radix-vue').AsTag | import('vue').Component;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/es/tag.js

@@ -1,40 +1,47 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot, withModifiers, createElementVNode, createCommentVNode } from "vue";
+import { defineComponent, openBlock, createBlock, unref, normalizeClass, withCtx, renderSlot, createElementBlock, withModifiers, createElementVNode, createCommentVNode } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
+import { g as O } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _hoisted_1 = ["data-tag-variant", "aria-disabled"];
-const _hoisted_2 = ["disabled"];
+const _hoisted_1 = ["disabled"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tag",
   props: {
     variant: { default: "stroke" },
     class: {},
     dismissable: { type: Boolean, default: false },
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { default: "div" }
   },
   emits: ["dismiss"],
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
+      return openBlock(), createBlock(unref(O), {
+        as: _ctx.as,
+        "as-child": _ctx.asChild,
         class: normalizeClass(unref(clsx)("celeste-tag", props.class)),
         "data-tag-variant": _ctx.variant,
         "aria-disabled": _ctx.disabled
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true),
-        _ctx.dismissable ? (openBlock(), createElementBlock("button", {
-          key: 0,
-          disabled: _ctx.disabled,
-          class: "celeste-tag-dismiss-button",
-          "aria-label": "dismiss",
-          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("dismiss"), ["prevent", "stop"]))
-        }, _cache[1] || (_cache[1] = [
-          createElementVNode("i", { class: "i-celeste-close-line" }, null, -1)
-        ]), 8, _hoisted_2)) : createCommentVNode("", true)
-      ], 10, _hoisted_1);
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true),
+          _ctx.dismissable ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            disabled: _ctx.disabled,
+            class: "celeste-tag-dismiss-button",
+            "aria-label": "dismiss",
+            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("dismiss"), ["prevent", "stop"]))
+          }, _cache[1] || (_cache[1] = [
+            createElementVNode("i", { class: "i-celeste-close-line" }, null, -1)
+          ]), 8, _hoisted_1)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["as", "as-child", "class", "data-tag-variant", "aria-disabled"]);
     };
   }
 });
-const tag = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0011e3b8"]]);
+const tag = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-368b7ec0"]]);
 export {
   tag as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.42",
+  "version": "0.6.43",
   "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.42",
-    "@youcan/celeste-tokens": "0.6.42"
+    "@youcan/celeste-icons": "0.6.43",
+    "@youcan/celeste-tokens": "0.6.43"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

package/src/components/tag/tag.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
 
 const props = withDefaults(defineProps<TagProps>(), {
   variant: 'stroke',
   dismissable: false,
+  as: 'div',
 });
 
 defineEmits<TagEmits>();
 </script>
 
 <script lang="ts">
-export interface TagProps {
+export interface TagProps extends PrimitiveProps {
   variant?: 'stroke' | 'gray';
   class?: HTMLAttributes['class'];
   dismissable?: boolean;
@@ -24,7 +26,9 @@ export interface TagEmits {
 </script>
 
 <template>
-  <div
+  <Primitive
+    :as
+    :as-child
     :class="clsx('celeste-tag', props.class)"
     :data-tag-variant="variant"
     :aria-disabled="disabled"
@@ -39,7 +43,7 @@ export interface TagEmits {
     >
       <i class="i-celeste-close-line" />
     </button>
-  </div>
+  </Primitive>
 </template>
 
 <style scoped lang="scss">