@youcan/celeste 0.6.44 → 0.6.45

package/dist/celeste.css

@@ -1903,6 +1903,115 @@ to {
 .celeste-cbutton-white[data-v-c062bacd] {
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-xs);
+}[data-v-7b08df2f] {
+  box-sizing: border-box;
+}
+.celeste-checkbox-card[data-v-7b08df2f] {
+  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);
+}
+.celeste-checkbox-card[data-v-7b08df2f]:not(.celeste-checkbox-card-disabled) {
+  cursor: pointer;
+}
+.celeste-checkbox-card[data-v-7b08df2f]:has([data-state=checked]):not(.celeste-checkbox-card-disabled) {
+  border-color: var(--color-primary-base);
+  box-shadow: none;
+}
+.celeste-checkbox-card[data-v-7b08df2f]:hover:not(.celeste-checkbox-card-disabled), .celeste-checkbox-card[data-v-7b08df2f]:focus-visible:not(.celeste-checkbox-card-disabled) {
+  background-color: var(--color-bg-weak-50);
+  box-shadow: none;
+}
+.celeste-checkbox-card[data-v-7b08df2f]:hover:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])), .celeste-checkbox-card[data-v-7b08df2f]:focus-visible:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])) {
+  border-color: transparent;
+}
+.celeste-checkbox-card-preview[data-v-7b08df2f] {
+  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[data-v-7b08df2f] {
+  border: none;
+}
+.celeste-checkbox-card-preview-image i[data-v-7b08df2f] {
+  position: absolute;
+  z-index: 0;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  transform: translate(-50%, -50%);
+  color: var(--color-icon-sub-600);
+}
+.celeste-checkbox-card-preview-image[data-v-7b08df2f] img {
+  z-index: 1000;
+}
+.celeste-checkbox-card-preview-icon i[data-v-7b08df2f] {
+  width: 20px;
+  height: 20px;
+  color: var(--color-icon-sub-600);
+}
+.celeste-checkbox-card-content[data-v-7b08df2f] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+.celeste-checkbox-card-row[data-v-7b08df2f] {
+  display: flex;
+  flex-shrink: 1;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+.celeste-checkbox-card-label[data-v-7b08df2f] {
+  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[data-v-7b08df2f] {
+  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[data-v-7b08df2f] {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+.celeste-checkbox-card-disabled[data-v-7b08df2f] {
+  cursor: not-allowed;
+}
+.celeste-checkbox-card-disabled .celeste-checkbox-card-label[data-v-7b08df2f] {
+  color: var(--color-text-sub-600);
+}
+.celeste-checkbox-card-disabled .celeste-checkbox-card-sublabel[data-v-7b08df2f] {
+  color: var(--color-text-soft-400);
+}
+.celeste-checkbox-card-disabled .celeste-checkbox-card-description[data-v-7b08df2f] {
+  color: var(--color-text-soft-400);
 }.celeste-checkbox-label[data-v-ad0a5759] {
   display: flex;
   color: var(--color-text-strong-950);
@@ -4346,115 +4455,6 @@ to {
 }
 [data-v-5d801c64] .celeste-color-slider .slider-track .celeste-color-thumb {
   top: calc(var(--track-height) / 2);
-}[data-v-29119673] {
-  box-sizing: border-box;
-}
-.celeste-checkbox-card[data-v-29119673] {
-  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);
-}
-.celeste-checkbox-card[data-v-29119673]:not(.celeste-checkbox-card-disabled) {
-  cursor: pointer;
-}
-.celeste-checkbox-card[data-v-29119673]:has([data-state=checked]):not(.celeste-checkbox-card-disabled) {
-  border-color: var(--color-primary-base);
-  box-shadow: none;
-}
-.celeste-checkbox-card[data-v-29119673]:hover:not(.celeste-checkbox-card-disabled), .celeste-checkbox-card[data-v-29119673]:focus-visible:not(.celeste-checkbox-card-disabled) {
-  background-color: var(--color-bg-weak-50);
-  box-shadow: none;
-}
-.celeste-checkbox-card[data-v-29119673]:hover:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])), .celeste-checkbox-card[data-v-29119673]:focus-visible:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])) {
-  border-color: transparent;
-}
-.celeste-checkbox-card-disabled[data-v-29119673] {
-  cursor: not-allowed;
-}
-.celeste-checkbox-card-disabled .celeste-checkbox-card-label[data-v-29119673] {
-  color: var(--color-text-sub-600);
-}
-.celeste-checkbox-card-disabled .celeste-checkbox-card-sublabel[data-v-29119673] {
-  color: var(--color-text-soft-400);
-}
-.celeste-checkbox-card-disabled .celeste-checkbox-card-description[data-v-29119673] {
-  color: var(--color-text-soft-400);
-}
-.celeste-checkbox-card-preview[data-v-29119673] {
-  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[data-v-29119673] {
-  border: none;
-}
-.celeste-checkbox-card-preview-image i[data-v-29119673] {
-  position: absolute;
-  z-index: 0;
-  top: 50%;
-  left: 50%;
-  width: 20px;
-  height: 20px;
-  transform: translate(-50%, -50%);
-  color: var(--color-icon-sub-600);
-}
-.celeste-checkbox-card-preview-image[data-v-29119673] img {
-  z-index: 1000;
-}
-.celeste-checkbox-card-preview-icon i[data-v-29119673] {
-  width: 20px;
-  height: 20px;
-  color: var(--color-icon-sub-600);
-}
-.celeste-checkbox-card-content[data-v-29119673] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-}
-.celeste-checkbox-card-row[data-v-29119673] {
-  display: flex;
-  flex-shrink: 1;
-  align-items: center;
-  gap: var(--spacing-8);
-}
-.celeste-checkbox-card-label[data-v-29119673] {
-  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[data-v-29119673] {
-  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[data-v-29119673] {
-  color: var(--color-text-sub-600);
-  font: var(--paragraph-xs);
 }.celeste-rich-editor[data-v-dbc85b1a] {
   position: relative;
   border: 1px solid var(--color-stroke-soft-200);

package/dist/cjs/checkbox-card.js

@@ -106,5 +106,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const checkboxCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-29119673"]]);
+const checkboxCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-7b08df2f"]]);
 module.exports = checkboxCard;

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/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

@@ -105,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const checkboxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-29119673"]]);
+const checkboxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7b08df2f"]]);
 export {
   checkboxCard 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.44",
+  "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.44",
-    "@youcan/celeste-tokens": "0.6.44"
+    "@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

@@ -124,22 +124,6 @@ const delegatedProps = useDelegatedProps(props, 'class');
   }
 }
 
-.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;
@@ -219,4 +203,20 @@ const delegatedProps = useDelegatedProps(props, 'class');
   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/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';