@youcan/celeste 0.6.43 → 0.6.45

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-7b08df2f"]]);
+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/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 checkboxCard = require("./checkbox-card.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");
@@ -89,6 +90,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   Badge: badge,
   Button: button,
   Checkbox: checkbox_vue_vue_type_style_index_0_lang._sfc_main,
+  CheckboxCard: checkboxCard,
   CheckboxLabel: checkboxLabel,
   Combobox: combobox,
   ComboboxAnchor: comboboxAnchor_vue_vue_type_script_setup_true_lang._sfc_main,
@@ -230,6 +232,7 @@ exports.CompactButton = compactButton;
 exports.FancyButton = fancyButton;
 exports.LinkButton = linkButton;
 exports.SocialButton = socialButton;
+exports.CheckboxCard = checkboxCard;
 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;

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

@@ -0,0 +1,34 @@
+import { LabelProps } from 'radix-vue';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = LabelProps & {
+    required?: boolean;
+    disabled?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        image?(_: {
+            class: string;
+        }): any;
+        icon?(_: {}): any;
+        label?(_: {}): any;
+        sublabel?(_: {}): any;
+        badge?(_: {
+            disabled: boolean | undefined;
+        }): any;
+        description?(_: {}): any;
+        default?(_: {}): 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/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/checkbox/index.d.ts

@@ -1,3 +1,5 @@
+export * from './checkbox-card';
+export { default as CheckboxCard } from './checkbox-card';
 export * from './checkbox-label';
 export { default as CheckboxLabel } from './checkbox-label';
 export * from './checkbox';

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-7b08df2f"]]);
+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/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 checkboxCard from "./checkbox-card.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";
@@ -87,6 +88,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   Badge,
   Button,
   Checkbox: _sfc_main,
+  CheckboxCard: checkboxCard,
   CheckboxLabel: checkboxLabel,
   Combobox: combobox,
   ComboboxAnchor: _sfc_main$1,
@@ -227,6 +229,7 @@ export {
   COLOR_NUMBER_VALIDATION_PATTERN,
   Celeste,
   _sfc_main as Checkbox,
+  checkboxCard as CheckboxCard,
   checkboxLabel as CheckboxLabel,
   combobox as Combobox,
   _sfc_main$1 as ComboboxAnchor,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.43",
+  "version": "0.6.45",
   "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.43",
-    "@youcan/celeste-tokens": "0.6.43"
+    "@youcan/celeste-icons": "0.6.45",
+    "@youcan/celeste-tokens": "0.6.45"
   },
   "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-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);
+}
+
+.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);
+  }
+}
+</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'];
 }>();

package/src/components/checkbox/checkbox.vue

@@ -29,6 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
   display: flex;
   position: relative;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: var(--checkbox-size);

package/src/components/checkbox/index.ts

@@ -1,3 +1,6 @@
+export * from './checkbox-card.vue';
+export { default as CheckboxCard } from './checkbox-card.vue';
+
 export * from './checkbox-label.vue';
 export { default as CheckboxLabel } from './checkbox-label.vue';