@youcan/celeste 0.6.28 → 0.6.30

package/dist/celeste.css

@@ -1642,6 +1642,34 @@ to {
 .celeste-cbutton-white[data-v-c062bacd] {
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-xs);
+}.celeste-checkbox-label[data-v-cddafe7b] {
+  display: flex;
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  gap: var(--spacing-8);
+}
+[data-v-cddafe7b] .celeste-checkbox-label-checkbox {
+  margin-top: var(--spacing-2);
+}
+.celeste-checkbox-label-row[data-v-cddafe7b] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+.celeste-checkbox-label-sublabel[data-v-cddafe7b] {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+.celeste-checkbox-label-content[data-v-cddafe7b] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: var(--spacing-4);
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+.celeste-checkbox-label-link-button[data-v-cddafe7b] {
+  margin-top: var(--spacing-10);
 }.celeste-dropdown-empty-list[data-v-450bfb63] {
   display: flex;
   align-items: center;

package/dist/cjs/checkbox-label.js

@@ -0,0 +1,112 @@
+"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 = { role: "presentation" };
+const _hoisted_2 = {
+  role: "presentation",
+  class: "celeste-checkbox-label-row"
+};
+const _hoisted_3 = {
+  role: "presentation",
+  class: "celeste-checkbox-label-content"
+};
+const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
+  __name: "checkbox-label",
+  props: {
+    for: {},
+    asChild: { type: Boolean },
+    as: {},
+    sublabel: {},
+    information: {},
+    required: { type: Boolean },
+    description: {},
+    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-disabcled": _ctx.disabled,
+        class: Mo.unref(clsx.clsx)("celeste-checkbox-label", props.class)
+      }), {
+        default: Mo.withCtx(() => [
+          Mo.createVNode(Mo.unref(index.O), {
+            "as-child": "",
+            class: "celeste-checkbox-label-checkbox"
+          }, {
+            default: Mo.withCtx(() => [
+              Mo.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 3
+          }),
+          Mo.createElementVNode("div", _hoisted_1, [
+            Mo.createElementVNode("div", _hoisted_2, [
+              Mo.createElementVNode("div", null, [
+                Mo.createVNode(Mo.unref(index.O), {
+                  as: "span",
+                  class: "celeste-checkbox-label-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-label-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: 0,
+                "as-child": "",
+                class: "celeste-checkbox-label-badge"
+              }, {
+                default: Mo.withCtx(() => [
+                  Mo.renderSlot(_ctx.$slots, "badge", {}, void 0, true)
+                ]),
+                _: 3
+              })) : Mo.createCommentVNode("", true)
+            ]),
+            Mo.createElementVNode("div", _hoisted_3, [
+              _ctx.$slots.description ? (Mo.openBlock(), Mo.createBlock(Mo.unref(index.O), {
+                key: 0,
+                as: "span",
+                class: "celeste-checkbox-label-description"
+              }, {
+                default: Mo.withCtx(() => [
+                  Mo.renderSlot(_ctx.$slots, "description", {}, void 0, true)
+                ]),
+                _: 3
+              })) : Mo.createCommentVNode("", true),
+              _ctx.$slots.linkButton ? (Mo.openBlock(), Mo.createBlock(Mo.unref(index.O), {
+                key: 1,
+                "as-child": "",
+                class: "celeste-checkbox-label-link-button"
+              }, {
+                default: Mo.withCtx(() => [
+                  Mo.renderSlot(_ctx.$slots, "linkButton", {}, void 0, true)
+                ]),
+                _: 3
+              })) : Mo.createCommentVNode("", true)
+            ])
+          ])
+        ]),
+        _: 3
+      }, 16, ["aria-required", "aria-disabcled", "class"]);
+    };
+  }
+});
+const checkboxLabel = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-cddafe7b"]]);
+module.exports = checkboxLabel;

package/dist/cjs/index.js

@@ -8,6 +8,7 @@ const compactButton = require("./compact-button.js");
 const fancyButton = require("./fancy-button.js");
 const linkButton = require("./link-button.js");
 const socialButton = require("./social-button.js");
+const checkboxLabel = require("./checkbox-label.js");
 const checkbox_vue_vue_type_style_index_0_lang = require("./chunks/checkbox.vue_vue_type_style_index_0_lang.js");
 const comboboxAnchor_vue_vue_type_script_setup_true_lang = require("./chunks/combobox-anchor.js");
 const comboboxEmpty = require("./combobox-empty.js");
@@ -74,6 +75,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   Badge: badge,
   Button: button,
   Checkbox: checkbox_vue_vue_type_style_index_0_lang._sfc_main,
+  CheckboxLabel: checkboxLabel,
   Combobox: combobox,
   ComboboxAnchor: comboboxAnchor_vue_vue_type_script_setup_true_lang._sfc_main,
   ComboboxEmpty: comboboxEmpty,
@@ -154,6 +156,7 @@ exports.CompactButton = compactButton;
 exports.FancyButton = fancyButton;
 exports.LinkButton = linkButton;
 exports.SocialButton = socialButton;
+exports.CheckboxLabel = checkboxLabel;
 exports.Checkbox = checkbox_vue_vue_type_style_index_0_lang._sfc_main;
 exports.ComboboxAnchor = comboboxAnchor_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.ComboboxEmpty = comboboxEmpty;

package/dist/components/checkbox/checkbox-label.d.ts

@@ -0,0 +1,32 @@
+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'];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        label?(_: {}): any;
+        sublabel?(_: {}): any;
+        badge?(_: {}): any;
+        description?(_: {}): any;
+        linkButton?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/checkbox/index.d.ts

@@ -1,2 +1,4 @@
+export * from './checkbox-label';
+export { default as CheckboxLabel } from './checkbox-label';
 export * from './checkbox';
 export { default as Checkbox } from './checkbox';

package/dist/es/checkbox-label.js

@@ -0,0 +1,113 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, createElementVNode, createCommentVNode } from "vue";
+import { useDelegatedProps } from "./use-delegated-props.js";
+import { c as clsx } from "./chunks/clsx.js";
+import { B as Oh, f as O } from "./chunks/index.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = { role: "presentation" };
+const _hoisted_2 = {
+  role: "presentation",
+  class: "celeste-checkbox-label-row"
+};
+const _hoisted_3 = {
+  role: "presentation",
+  class: "celeste-checkbox-label-content"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "checkbox-label",
+  props: {
+    for: {},
+    asChild: { type: Boolean },
+    as: {},
+    sublabel: {},
+    information: {},
+    required: { type: Boolean },
+    description: {},
+    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-disabcled": _ctx.disabled,
+        class: unref(clsx)("celeste-checkbox-label", props.class)
+      }), {
+        default: withCtx(() => [
+          createVNode(unref(O), {
+            "as-child": "",
+            class: "celeste-checkbox-label-checkbox"
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 3
+          }),
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", null, [
+                createVNode(unref(O), {
+                  as: "span",
+                  class: "celeste-checkbox-label-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-label-sublabel"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "sublabel", {}, void 0, true)
+                  ]),
+                  _: 3
+                })) : createCommentVNode("", true)
+              ]),
+              _ctx.$slots.badge ? (openBlock(), createBlock(unref(O), {
+                key: 0,
+                "as-child": "",
+                class: "celeste-checkbox-label-badge"
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "badge", {}, void 0, true)
+                ]),
+                _: 3
+              })) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_3, [
+              _ctx.$slots.description ? (openBlock(), createBlock(unref(O), {
+                key: 0,
+                as: "span",
+                class: "celeste-checkbox-label-description"
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "description", {}, void 0, true)
+                ]),
+                _: 3
+              })) : createCommentVNode("", true),
+              _ctx.$slots.linkButton ? (openBlock(), createBlock(unref(O), {
+                key: 1,
+                "as-child": "",
+                class: "celeste-checkbox-label-link-button"
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "linkButton", {}, void 0, true)
+                ]),
+                _: 3
+              })) : createCommentVNode("", true)
+            ])
+          ])
+        ]),
+        _: 3
+      }, 16, ["aria-required", "aria-disabcled", "class"]);
+    };
+  }
+});
+const checkboxLabel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cddafe7b"]]);
+export {
+  checkboxLabel as default
+};

package/dist/es/chunks/index.js

@@ -8975,36 +8975,36 @@ const av = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  sh as $,
+  rh as $,
   At as A,
-  qv as B,
+  Oh as B,
   Ch as C,
-  Wv as D,
-  Qv as E,
+  qv as D,
+  Wv as E,
   Fy as F,
   Gy as G,
-  nm as H,
-  Hv as I,
+  Qv as H,
+  nm as I,
   Jv as J,
   Kv as K,
-  tm as L,
+  Hv as L,
   My as M,
   Ny as N,
   Oy as O,
-  fh as P,
+  tm as P,
   Qf as Q,
-  ch as R,
-  hh as S,
-  ph as T,
+  fh as R,
+  ch as S,
+  hh as T,
   Uv as U,
   Vy as V,
   Wy as W,
   Xv as X,
   Yv as Y,
   Zv as Z,
-  rh as _,
+  ph as _,
   Gl as a,
-  Oh as a0,
+  sh as a0,
   Dv as a1,
   Eu as a2,
   xu as a3,

package/dist/es/combobox-group.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createTextVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { B as qv, Y as Yv } from "./chunks/index.js";
+import { D as qv, Y as Yv } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "combobox-group",

package/dist/es/combobox-input.js

@@ -1,6 +1,6 @@
 import { defineComponent, mergeModels, useModel, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createElementVNode } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { D as Wv } from "./chunks/index.js";
+import { E as Wv } from "./chunks/index.js";
 import TextInput from "./text-input.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/es/combobox-item.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, normalizeClass, createCommentVNode, createElementBlock, renderSlot, toDisplayString } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, E as Qv } from "./chunks/index.js";
+import { x as xe, H as Qv } from "./chunks/index.js";
 import { _ as _sfc_main$1 } from "./chunks/checkbox.vue_vue_type_style_index_0_lang.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["aria-disabled"];

package/dist/es/combobox-list.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, H as nm, X as Xv, J as Jv } from "./chunks/index.js";
+import { x as xe, I as nm, X as Xv, J as Jv } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "combobox-list",

package/dist/es/combobox-root.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { x as xe, I as Hv } from "./chunks/index.js";
+import { x as xe, L as Hv } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "combobox-root",

package/dist/es/combobox-separator.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { L as tm } from "./chunks/index.js";
+import { P as tm } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "combobox-separator",

package/dist/es/command-group.js

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createTextVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
-import { B as qv, Y as Yv } from "./chunks/index.js";
+import { D as qv, Y as Yv } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "command-group",

package/dist/es/command-input.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, createVNode, unref, mergeProps } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { A as At, D as Wv } from "./chunks/index.js";
+import { A as At, E as Wv } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
   class: "celeste-command-input",

package/dist/es/command-item.js

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { x as xe, E as Qv } from "./chunks/index.js";
+import { x as xe, H as Qv } from "./chunks/index.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "command-item",
   props: {

package/dist/es/command-root.js

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { x as xe, I as Hv } from "./chunks/index.js";
+import { x as xe, L as Hv } from "./chunks/index.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "command-root",
   props: {

package/dist/es/command-separator.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { L as tm } from "./chunks/index.js";
+import { P as tm } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "command-separator",

package/dist/es/dropdown-menu-group.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { P as fh } from "./chunks/index.js";
+import { R as fh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu-group",

package/dist/es/dropdown-menu-item.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, renderSlot, toDisplayString, createElementBlock, createCommentVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { A as At, R as ch } from "./chunks/index.js";
+import { A as At, S as ch } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "celeste-dropdown-menu-item-prefix" };
 const _hoisted_2 = { class: "celeste-dropdown-menu-item-body" };

package/dist/es/dropdown-menu-label.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { A as At, S as hh } from "./chunks/index.js";
+import { A as At, T as hh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu-label",

package/dist/es/dropdown-menu-separator.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { T as ph } from "./chunks/index.js";
+import { _ as ph } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu-separator",

package/dist/es/dropdown-menu-trigger.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { A as At, _ as rh } from "./chunks/index.js";
+import { A as At, $ as rh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu-trigger",

package/dist/es/dropdown-menu.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
-import { $ as sh } from "./chunks/index.js";
+import { a0 as sh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu",

package/dist/es/dropdown.js

@@ -1,6 +1,6 @@
 import { defineComponent, mergeModels, useModel, ref, computed, watch, openBlock, createElementBlock, withKeys, createVNode, unref, withCtx, normalizeClass, createElementVNode, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, toDisplayString, createBlock, createSlots, Fragment, renderList } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { I as Hv, j as jv, U as Uv, X as Xv, J as Jv, L as tm, Z as Zv, B as qv, E as Qv } from "./chunks/index.js";
+import { L as Hv, j as jv, U as Uv, X as Xv, J as Jv, P as tm, Z as Zv, D as qv, H as Qv } from "./chunks/index.js";
 import Badge from "./badge.js";
 import TextInput from "./text-input.js";
 import DropdownItem from "./dropdown-item.js";

package/dist/es/index.js

@@ -6,6 +6,7 @@ import CompactButton from "./compact-button.js";
 import fancyButton from "./fancy-button.js";
 import linkButton from "./link-button.js";
 import socialButton from "./social-button.js";
+import checkboxLabel from "./checkbox-label.js";
 import { _ as _sfc_main } from "./chunks/checkbox.vue_vue_type_style_index_0_lang.js";
 import { _ as _sfc_main$1 } from "./chunks/combobox-anchor.js";
 import ComboboxEmpty from "./combobox-empty.js";
@@ -72,6 +73,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   Badge,
   Button,
   Checkbox: _sfc_main,
+  CheckboxLabel: checkboxLabel,
   Combobox: combobox,
   ComboboxAnchor: _sfc_main$1,
   ComboboxEmpty,
@@ -150,6 +152,7 @@ export {
   Button,
   Celeste,
   _sfc_main as Checkbox,
+  checkboxLabel as CheckboxLabel,
   combobox as Combobox,
   _sfc_main$1 as ComboboxAnchor,
   ComboboxEmpty,

package/dist/es/label.js

@@ -2,7 +2,7 @@ import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, re
 import Tooltip from "./tooltip.js";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { a0 as Oh } from "./chunks/index.js";
+import { B as Oh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
   key: 0,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.28",
+  "version": "0.6.30",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -32,8 +32,8 @@
     "clsx": "^2.1.1",
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
-    "@youcan/celeste-icons": "0.6.28",
-    "@youcan/celeste-tokens": "0.6.28"
+    "@youcan/celeste-icons": "0.6.30",
+    "@youcan/celeste-tokens": "0.6.30"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

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

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+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'];
+}>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :aria-required="required"
+    :aria-disabcled="disabled"
+    :class="clsx('celeste-checkbox-label', props.class)"
+  >
+
+    <Primitive as-child class="celeste-checkbox-label-checkbox">
+      <slot />
+    </Primitive>
+
+    <div role="presentation">
+      <div role="presentation" class="celeste-checkbox-label-row">
+        <div>
+          <Primitive as="span" class="celeste-checkbox-label-label">
+            <slot name="label" />
+          </Primitive>
+
+          <Primitive
+            v-if="$slots.sublabel"
+            as="span"
+            class="celeste-checkbox-label-sublabel"
+          >
+            <slot name="sublabel" />
+          </Primitive>
+        </div>
+
+        <Primitive
+          v-if="$slots.badge"
+          as-child
+          class="celeste-checkbox-label-badge"
+        >
+          <slot name="badge" />
+        </Primitive>
+      </div>
+
+      <div role="presentation" class="celeste-checkbox-label-content">
+        <Primitive
+          v-if="$slots.description"
+          as="span"
+          class="celeste-checkbox-label-description"
+        >
+          <slot name="description" />
+        </Primitive>
+
+        <Primitive
+          v-if="$slots.linkButton"
+          as-child
+          class="celeste-checkbox-label-link-button"
+        >
+          <slot name="linkButton" />
+        </Primitive>
+      </div>
+    </div>
+  </Label>
+</template>
+
+<style scoped lang="scss">
+.celeste-checkbox-label {
+  display: flex;
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  gap: var(--spacing-8);
+}
+
+:deep(.celeste-checkbox-label-checkbox) {
+  margin-top: var(--spacing-2);
+}
+
+.celeste-checkbox-label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.celeste-checkbox-label-sublabel {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+
+.celeste-checkbox-label-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: var(--spacing-4);
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+
+.celeste-checkbox-label-link-button {
+  margin-top: var(--spacing-10);
+}
+</style>

package/src/components/checkbox/index.ts

@@ -1,2 +1,5 @@
+export * from './checkbox-label.vue';
+export { default as CheckboxLabel } from './checkbox-label.vue';
+
 export * from './checkbox.vue';
 export { default as Checkbox } from './checkbox.vue';

package/src/components/checkbox/stories/checkbox.stories.ts

@@ -1,4 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Badge from '@/components/badge/badge.vue';
+import LinkButton from '@/components/button/link-button.vue';
+import CheckboxLabel from '../checkbox-label.vue';
 import Checkbox from '../checkbox.vue';
 
 const meta: Meta<typeof Checkbox> = {
@@ -67,34 +70,48 @@ export const Disabled: Story = {
   }),
 };
 
-export const WithLabel: Story = {
-  args: {
-  },
+export const WithCheckboxLabel: Story = {
+  args: {},
 
   render: args => ({
-    components: { Checkbox },
+    components: { Checkbox, CheckboxLabel, Badge, LinkButton },
     setup() {
       return { args };
     },
     template: `
       <div style="display: flex; justify-content: center;">
-        <div style="display: grid; gap: 1em;">
-          <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
+        <div style="max-width: 400px;">
+          <CheckboxLabel>
             <Checkbox v-bind="args" />
-            SMS Verification
-          </label>
-          <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
-            <Checkbox v-bind="args" />
-            Authenticator App
-          </label>
-          <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
-            <Checkbox v-bind="args" disabled />
-            Disabled
-          </label>
-         <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
-            <Checkbox v-bind="args" checked disabled />
-            Disabled but default checked
-          </label>
+
+            <template #label>
+              Label
+            </template>
+
+            <template #badge>
+              <Badge 
+                label="NEW" 
+                state="information" 
+                variant="light" 
+                size="sm" 
+              />
+            </template>
+            <template #sublabel>
+                (Sublabel)
+            </template>
+            <template #description>
+                Insert the checkbox description here.
+            </template>
+            <template #linkButton>
+              <LinkButton 
+                href="#" 
+                intent="primary" 
+                size="sm"
+              >
+                Learn More
+              </LinkButton>
+            </template>
+          </CheckboxLabel>
         </div>
       </div>
     `,