@youcan/celeste 0.6.42 → 0.6.44

package/dist/cjs/checkbox-card.js

@@ -0,0 +1,110 @@
+"use strict";
+const Mo = require("vue");
+const useDelegatedProps = require("./use-delegated-props.js");
+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 = { class: "celeste-checkbox-card-content" };
+const _hoisted_2 = { role: "presentation" };
+const _hoisted_3 = {
+  role: "presentation",
+  class: "celeste-checkbox-card-row"
+};
+const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
+  __name: "checkbox-card",
+  props: {
+    for: {},
+    asChild: { type: Boolean },
+    as: {},
+    required: { type: Boolean },
+    disabled: { type: Boolean },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
+    return (_ctx, _cache) => {
+      return Mo.openBlock(), Mo.createBlock(Mo.unref(index.Oh), Mo.mergeProps(Mo.unref(delegatedProps), {
+        "aria-required": _ctx.required,
+        "aria-disabled": _ctx.disabled,
+        class: Mo.unref(clsx.clsx)("celeste-checkbox-card", props.class, {
+          "celeste-checkbox-card-disabled": _ctx.disabled
+        })
+      }), {
+        default: Mo.withCtx(() => [
+          _ctx.$slots.image || _ctx.$slots.icon ? (Mo.openBlock(), Mo.createElementBlock("div", {
+            key: 0,
+            role: "presentation",
+            class: Mo.normalizeClass(["celeste-checkbox-card-preview", [_ctx.$slots.image ? "celeste-checkbox-card-preview-image" : "celeste-checkbox-card-preview-icon"]])
+          }, [
+            _ctx.$slots.image ? (Mo.openBlock(), Mo.createElementBlock(Mo.Fragment, { key: 0 }, [
+              _cache[0] || (_cache[0] = Mo.createElementVNode("i", {
+                class: "celeste-checkbox-card-preview-fallback",
+                "i-celeste-image-circle-fill": ""
+              }, null, -1)),
+              Mo.renderSlot(_ctx.$slots, "image", { class: "i-celeste-image-circle-fill?bg" }, void 0, true)
+            ], 64)) : _ctx.$slots.icon ? Mo.renderSlot(_ctx.$slots, "icon", { key: 1 }, void 0, true) : Mo.createCommentVNode("", true)
+          ], 2)) : Mo.createCommentVNode("", true),
+          Mo.createElementVNode("div", _hoisted_1, [
+            Mo.createElementVNode("div", _hoisted_2, [
+              Mo.createElementVNode("div", _hoisted_3, [
+                Mo.createVNode(Mo.unref(index.O), {
+                  as: "span",
+                  class: "celeste-checkbox-card-label"
+                }, {
+                  default: Mo.withCtx(() => [
+                    Mo.renderSlot(_ctx.$slots, "label", {}, void 0, true)
+                  ]),
+                  _: 3
+                }),
+                _ctx.$slots.sublabel ? (Mo.openBlock(), Mo.createBlock(Mo.unref(index.O), {
+                  key: 0,
+                  as: "span",
+                  class: "celeste-checkbox-card-sublabel"
+                }, {
+                  default: Mo.withCtx(() => [
+                    Mo.renderSlot(_ctx.$slots, "sublabel", {}, void 0, true)
+                  ]),
+                  _: 3
+                })) : Mo.createCommentVNode("", true),
+                _ctx.$slots.badge ? (Mo.openBlock(), Mo.createBlock(Mo.unref(index.O), {
+                  key: 1,
+                  "as-child": "",
+                  class: "celeste-checkbox-card-badge"
+                }, {
+                  default: Mo.withCtx(() => [
+                    Mo.renderSlot(_ctx.$slots, "badge", { disabled: _ctx.disabled }, void 0, true)
+                  ]),
+                  _: 3
+                })) : Mo.createCommentVNode("", true)
+              ])
+            ]),
+            _ctx.$slots.description ? (Mo.openBlock(), Mo.createBlock(Mo.unref(index.O), {
+              key: 0,
+              as: "span",
+              class: "celeste-checkbox-card-description"
+            }, {
+              default: Mo.withCtx(() => [
+                Mo.renderSlot(_ctx.$slots, "description", {}, void 0, true)
+              ]),
+              _: 3
+            })) : Mo.createCommentVNode("", true)
+          ]),
+          Mo.createVNode(Mo.unref(index.O), {
+            disabled: _ctx.disabled,
+            "as-child": "",
+            class: "celeste-checkbox-card-checkbox"
+          }, {
+            default: Mo.withCtx(() => [
+              Mo.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["disabled"])
+        ]),
+        _: 3
+      }, 16, ["aria-required", "aria-disabled", "class"]);
+    };
+  }
+});
+const checkboxCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-29119673"]]);
+module.exports = checkboxCard;

package/dist/cjs/checkbox-label.js

@@ -19,10 +19,7 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     for: {},
     asChild: { type: Boolean },
     as: {},
-    sublabel: {},
-    information: {},
     required: { type: Boolean },
-    description: {},
     disabled: { type: Boolean },
     class: {}
   },
@@ -108,5 +105,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const checkboxLabel = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-cddafe7b"]]);
+const checkboxLabel = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-ad0a5759"]]);
 module.exports = checkboxLabel;

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/checkbox/checkbox-label.d.ts

@@ -1,10 +1,7 @@
 import { HTMLAttributes } from 'vue';
 import { LabelProps } from 'radix-vue';
 type __VLS_Props = LabelProps & {
-    sublabel?: string;
-    information?: string;
     required?: boolean;
-    description?: string;
     disabled?: boolean;
     class?: HTMLAttributes['class'];
 };

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/checkbox-card.js

@@ -0,0 +1,111 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, normalizeClass, Fragment, createElementVNode, renderSlot, createCommentVNode, createVNode } from "vue";
+import { useDelegatedProps } from "./use-delegated-props.js";
+import { c as clsx } from "./chunks/clsx.js";
+import { L as Oh, g as O } from "./chunks/index.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "celeste-checkbox-card-content" };
+const _hoisted_2 = { role: "presentation" };
+const _hoisted_3 = {
+  role: "presentation",
+  class: "celeste-checkbox-card-row"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "checkbox-card",
+  props: {
+    for: {},
+    asChild: { type: Boolean },
+    as: {},
+    required: { type: Boolean },
+    disabled: { type: Boolean },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = useDelegatedProps(props, "class");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Oh), mergeProps(unref(delegatedProps), {
+        "aria-required": _ctx.required,
+        "aria-disabled": _ctx.disabled,
+        class: unref(clsx)("celeste-checkbox-card", props.class, {
+          "celeste-checkbox-card-disabled": _ctx.disabled
+        })
+      }), {
+        default: withCtx(() => [
+          _ctx.$slots.image || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            role: "presentation",
+            class: normalizeClass(["celeste-checkbox-card-preview", [_ctx.$slots.image ? "celeste-checkbox-card-preview-image" : "celeste-checkbox-card-preview-icon"]])
+          }, [
+            _ctx.$slots.image ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              _cache[0] || (_cache[0] = createElementVNode("i", {
+                class: "celeste-checkbox-card-preview-fallback",
+                "i-celeste-image-circle-fill": ""
+              }, null, -1)),
+              renderSlot(_ctx.$slots, "image", { class: "i-celeste-image-circle-fill?bg" }, void 0, true)
+            ], 64)) : _ctx.$slots.icon ? renderSlot(_ctx.$slots, "icon", { key: 1 }, void 0, true) : createCommentVNode("", true)
+          ], 2)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, [
+                createVNode(unref(O), {
+                  as: "span",
+                  class: "celeste-checkbox-card-label"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "label", {}, void 0, true)
+                  ]),
+                  _: 3
+                }),
+                _ctx.$slots.sublabel ? (openBlock(), createBlock(unref(O), {
+                  key: 0,
+                  as: "span",
+                  class: "celeste-checkbox-card-sublabel"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "sublabel", {}, void 0, true)
+                  ]),
+                  _: 3
+                })) : createCommentVNode("", true),
+                _ctx.$slots.badge ? (openBlock(), createBlock(unref(O), {
+                  key: 1,
+                  "as-child": "",
+                  class: "celeste-checkbox-card-badge"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "badge", { disabled: _ctx.disabled }, void 0, true)
+                  ]),
+                  _: 3
+                })) : createCommentVNode("", true)
+              ])
+            ]),
+            _ctx.$slots.description ? (openBlock(), createBlock(unref(O), {
+              key: 0,
+              as: "span",
+              class: "celeste-checkbox-card-description"
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "description", {}, void 0, true)
+              ]),
+              _: 3
+            })) : createCommentVNode("", true)
+          ]),
+          createVNode(unref(O), {
+            disabled: _ctx.disabled,
+            "as-child": "",
+            class: "celeste-checkbox-card-checkbox"
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["disabled"])
+        ]),
+        _: 3
+      }, 16, ["aria-required", "aria-disabled", "class"]);
+    };
+  }
+});
+const checkboxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-29119673"]]);
+export {
+  checkboxCard as default
+};

package/dist/es/checkbox-label.js

@@ -18,10 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     for: {},
     asChild: { type: Boolean },
     as: {},
-    sublabel: {},
-    information: {},
     required: { type: Boolean },
-    description: {},
     disabled: { type: Boolean },
     class: {}
   },
@@ -107,7 +104,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const checkboxLabel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cddafe7b"]]);
+const checkboxLabel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ad0a5759"]]);
 export {
   checkboxLabel as 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.44",
   "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.44",
+    "@youcan/celeste-tokens": "0.6.44"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

package/src/components/checkbox/checkbox-card.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import type { LabelProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { Label, Primitive } from 'radix-vue';
+
+const props = defineProps<LabelProps & {
+  required?: boolean;
+  disabled?: boolean;
+  class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :aria-required="required"
+    :aria-disabled="disabled"
+    :class="
+      clsx('celeste-checkbox-card', props.class, {
+        'celeste-checkbox-card-disabled': disabled,
+      })
+    "
+  >
+
+    <div
+      v-if="$slots.image || $slots.icon"
+      role="presentation"
+      class="celeste-checkbox-card-preview"
+      :class="[$slots.image ? 'celeste-checkbox-card-preview-image' : 'celeste-checkbox-card-preview-icon']"
+    >
+      <template v-if="$slots.image">
+        <i class="celeste-checkbox-card-preview-fallback" i-celeste-image-circle-fill />
+        <slot class="i-celeste-image-circle-fill?bg" name="image" />
+      </template>
+
+      <template v-else-if="$slots.icon">
+        <slot name="icon" />
+      </template>
+    </div>
+
+    <div class="celeste-checkbox-card-content">
+      <div role="presentation">
+        <div role="presentation" class="celeste-checkbox-card-row">
+          <Primitive as="span" class="celeste-checkbox-card-label">
+            <slot name="label" />
+          </Primitive>
+
+          <Primitive
+            v-if="$slots.sublabel"
+            as="span"
+            class="celeste-checkbox-card-sublabel"
+          >
+            <slot name="sublabel" />
+          </Primitive>
+          <Primitive
+            v-if="$slots.badge"
+            as-child
+            class="celeste-checkbox-card-badge"
+          >
+            <slot :disabled="disabled" name="badge" />
+          </Primitive>
+        </div>
+      </div>
+
+      <Primitive
+        v-if="$slots.description"
+        as="span"
+        class="celeste-checkbox-card-description"
+      >
+        <slot name="description" />
+      </Primitive>
+    </div>
+
+    <Primitive
+      :disabled="disabled"
+      as-child
+      class="celeste-checkbox-card-checkbox"
+    >
+      <slot />
+    </Primitive>
+
+  </Label>
+</template>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+
+.celeste-checkbox-card {
+  display: flex;
+  align-items: flex-start;
+  padding: var(--spacing-16);
+  transition: all var(--animation-fast) ease-out;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-12);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  gap: var(--spacing-14);
+
+  &:not(.celeste-checkbox-card-disabled) {
+    cursor: pointer;
+  }
+
+  &:has([data-state='checked']):not(.celeste-checkbox-card-disabled) {
+    border-color: var(--color-primary-base);
+    box-shadow: none;
+  }
+
+  &:hover:not(.celeste-checkbox-card-disabled),
+  &:focus-visible:not(.celeste-checkbox-card-disabled) {
+    background-color: var(--color-bg-weak-50);
+    box-shadow: none;
+
+    &:not(:has([data-state='checked'])) {
+      border-color: transparent;
+    }
+  }
+}
+
+.celeste-checkbox-card-disabled {
+  cursor: not-allowed;
+
+  .celeste-checkbox-card-label {
+    color: var(--color-text-sub-600);
+  }
+
+  .celeste-checkbox-card-sublabel {
+    color: var(--color-text-soft-400);
+  }
+
+  .celeste-checkbox-card-description {
+    color: var(--color-text-soft-400);
+  }
+}
+
+.celeste-checkbox-card-preview {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+}
+
+.celeste-checkbox-card-preview-image {
+  border: none;
+
+  i {
+    position: absolute;
+    z-index: 0;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    transform: translate(-50%, -50%);
+    color: var(--color-icon-sub-600);
+  }
+
+  :deep(img) {
+    z-index: 1000;
+  }
+}
+
+.celeste-checkbox-card-preview-icon {
+  i {
+    width: 20px;
+    height: 20px;
+    color: var(--color-icon-sub-600);
+  }
+}
+
+.celeste-checkbox-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.celeste-checkbox-card-row {
+  display: flex;
+  flex-shrink: 1;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.celeste-checkbox-card-label {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-strong-950);
+  font: var(--label-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.celeste-checkbox-card-sublabel {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.celeste-checkbox-card-description {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+</style>

package/src/components/checkbox/checkbox-label.vue

@@ -5,10 +5,7 @@ import clsx from 'clsx';
 import { Label, type LabelProps, Primitive } from 'radix-vue';
 
 const props = defineProps<LabelProps & {
-  sublabel?: string;
-  information?: string;
   required?: boolean;
-  description?: string;
   disabled?: boolean;
   class?: HTMLAttributes['class'];
 }>();