@youcan/celeste 0.6.50 → 0.6.51

package/dist/celeste.css

@@ -1978,12 +1978,13 @@ to {
 .celeste-button-intent-error:not(:disabled).celeste-button-variant-ghost[data-v-ba4c26eb]:not(:disabled):focus:not(:disabled) {
   outline: none;
   box-shadow: var(--shadow-buttons-error-focus);
-}[data-v-25983c0a] {
+}[data-v-f7ba3446] {
   box-sizing: border-box;
 }
-.celeste-checkbox-card[data-v-25983c0a] {
+.celeste-checkbox-card[data-v-f7ba3446] {
   display: flex;
   align-items: flex-start;
+  justify-content: space-between;
   padding: var(--spacing-16);
   transition: all var(--animation-fast) ease-out;
   border: 1px solid var(--color-stroke-soft-200);
@@ -1994,21 +1995,21 @@ to {
   font: var(--paragraph-sm);
   gap: var(--spacing-14);
 }
-.celeste-checkbox-card[data-v-25983c0a]:not(.celeste-checkbox-card-disabled) {
+.celeste-checkbox-card[data-v-f7ba3446]:not(.celeste-checkbox-card-disabled) {
   cursor: pointer;
 }
-.celeste-checkbox-card[data-v-25983c0a]:has([data-state=checked]):not(.celeste-checkbox-card-disabled) {
+.celeste-checkbox-card[data-v-f7ba3446]:has([data-state=checked]):not(.celeste-checkbox-card-disabled) {
   border-color: var(--color-primary-base);
   box-shadow: none;
 }
-.celeste-checkbox-card[data-v-25983c0a]:hover:not(.celeste-checkbox-card-disabled), .celeste-checkbox-card[data-v-25983c0a]:focus-visible:not(.celeste-checkbox-card-disabled) {
+.celeste-checkbox-card[data-v-f7ba3446]:hover:not(.celeste-checkbox-card-disabled), .celeste-checkbox-card[data-v-f7ba3446]:focus-visible:not(.celeste-checkbox-card-disabled) {
   background-color: var(--color-bg-weak-50);
   box-shadow: none;
 }
-.celeste-checkbox-card[data-v-25983c0a]:hover:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])), .celeste-checkbox-card[data-v-25983c0a]:focus-visible:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])) {
+.celeste-checkbox-card[data-v-f7ba3446]:hover:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])), .celeste-checkbox-card[data-v-f7ba3446]:focus-visible:not(.celeste-checkbox-card-disabled):not(:has([data-state=checked])) {
   border-color: transparent;
 }
-.celeste-checkbox-card-preview[data-v-25983c0a] {
+.celeste-checkbox-card-preview[data-v-f7ba3446] {
   display: flex;
   position: relative;
   flex-shrink: 0;
@@ -2022,15 +2023,15 @@ to {
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-xs);
 }
-.celeste-checkbox-card-preview-icon i[data-v-25983c0a] {
+.celeste-checkbox-card-preview-icon i[data-v-f7ba3446] {
   width: 20px;
   height: 20px;
   color: var(--color-icon-sub-600);
 }
-.celeste-checkbox-card-preview-image[data-v-25983c0a] {
+.celeste-checkbox-card-preview-image[data-v-f7ba3446] {
   border: none;
 }
-.celeste-checkbox-card-preview-image i[data-v-25983c0a] {
+.celeste-checkbox-card-preview-image i[data-v-f7ba3446] {
   position: absolute;
   z-index: 0;
   top: 50%;
@@ -2040,21 +2041,21 @@ to {
   transform: translate(-50%, -50%);
   color: var(--color-icon-sub-600);
 }
-.celeste-checkbox-card-preview-image[data-v-25983c0a] img {
+.celeste-checkbox-card-preview-image[data-v-f7ba3446] img {
   z-index: 1000;
 }
-.celeste-checkbox-card-content[data-v-25983c0a] {
+.celeste-checkbox-card-content[data-v-f7ba3446] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
 }
-.celeste-checkbox-card-row[data-v-25983c0a] {
+.celeste-checkbox-card-row[data-v-f7ba3446] {
   display: flex;
   flex-shrink: 1;
   align-items: center;
   gap: var(--spacing-8);
 }
-.celeste-checkbox-card-label[data-v-25983c0a] {
+.celeste-checkbox-card-label[data-v-f7ba3446] {
   flex-shrink: 1;
   min-width: 0;
   overflow: hidden;
@@ -2063,7 +2064,7 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-checkbox-card-sublabel[data-v-25983c0a] {
+.celeste-checkbox-card-sublabel[data-v-f7ba3446] {
   flex-shrink: 1;
   min-width: 0;
   overflow: hidden;
@@ -2072,20 +2073,20 @@ to {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-checkbox-card-description[data-v-25983c0a] {
+.celeste-checkbox-card-description[data-v-f7ba3446] {
   color: var(--color-text-sub-600);
   font: var(--paragraph-xs);
 }
-.celeste-checkbox-card-disabled[data-v-25983c0a] {
+.celeste-checkbox-card-disabled[data-v-f7ba3446] {
   cursor: not-allowed;
 }
-.celeste-checkbox-card-disabled .celeste-checkbox-card-label[data-v-25983c0a] {
+.celeste-checkbox-card-disabled .celeste-checkbox-card-label[data-v-f7ba3446] {
   color: var(--color-text-sub-600);
 }
-.celeste-checkbox-card-disabled .celeste-checkbox-card-sublabel[data-v-25983c0a] {
+.celeste-checkbox-card-disabled .celeste-checkbox-card-sublabel[data-v-f7ba3446] {
   color: var(--color-text-soft-400);
 }
-.celeste-checkbox-card-disabled .celeste-checkbox-card-description[data-v-25983c0a] {
+.celeste-checkbox-card-disabled .celeste-checkbox-card-description[data-v-f7ba3446] {
   color: var(--color-text-soft-400);
 }.celeste-checkbox-label[data-v-ad0a5759] {
   display: flex;
@@ -3850,7 +3851,7 @@ to {
 .celeste-modal-header:has(.description)[data-type=error] .icon[data-v-9d299b40] {
   background: var(--color-state-error-lighter);
   color: var(--color-state-error-base);
-}[data-v-68656929] .celeste-popover-content-wrapper {
+}[data-v-521e5832] .celeste-popover-content-wrapper {
   z-index: 50;
   min-width: 200px;
   max-width: 400px;
@@ -3863,20 +3864,20 @@ to {
   box-shadow: var(--shadow-regular-md);
   scale: 0.95;
 }
-[data-v-68656929] .celeste-popover-content-wrapper[data-state=open] {
-  animation-name: open-68656929;
+[data-v-521e5832] .celeste-popover-content-wrapper[data-state=open] {
+  animation-name: open-521e5832;
 }
-[data-v-68656929] .celeste-popover-content-wrapper[data-state=closed] {
-  animation-name: close-68656929;
+[data-v-521e5832] .celeste-popover-content-wrapper[data-state=closed] {
+  animation-name: close-521e5832;
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-arrow {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-arrow {
   display: block;
   position: relative;
   width: 16px;
   height: 8px;
   overflow: hidden;
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-arrow::after {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-arrow::after {
   content: "";
   display: block;
   position: absolute;
@@ -3890,76 +3891,76 @@ to {
   background-color: var(--color-bg-white-0);
   rotate: 45deg;
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-close-button {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-close-button {
   position: absolute;
   z-index: 50;
   inset-inline-end: var(--spacing-16);
   inset-block-start: var(--spacing-16);
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-8);
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title,[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title,[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
   margin: var(--spacing-0);
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-title {
+  margin-block-end: var(--spacing-8);
   color: var(--color-text-strong-950);
   font: var(--label-md);
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-description {
   color: var(--color-text-sub-600);
   font: var(--paragraph-sm);
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon {
   box-sizing: border-box;
   margin-block-end: var(--spacing-16);
   border: 1px solid var(--color-stroke-soft-200);
   border-radius: 50%;
   color: var(--color-icon-sub-600);
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=sm] {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=sm] {
   width: 32px;
   height: 32px;
   padding: var(--spacing-6);
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=md] {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=md] {
   width: 40px;
   height: 40px;
   padding: var(--spacing-6);
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=lg] {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=lg] {
   width: 48px;
   height: 48px;
   padding: var(--spacing-12);
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xl] {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xl] {
   width: 56px;
   height: 56px;
   padding: var(--spacing-14);
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xxl] {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon[data-icon-size=xxl] {
   width: 64px;
   height: 64px;
   padding: var(--spacing-16);
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon i {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-content .celeste-popover-icon i {
   width: 100%;
   height: 100%;
 }
-[data-v-68656929] .celeste-popover-content-wrapper .celeste-popover-footer {
+[data-v-521e5832] .celeste-popover-content-wrapper .celeste-popover-footer {
   display: flex;
   padding: var(--spacing-16);
   border-block-start: 1px solid var(--color-stroke-soft-200);
 }
-@keyframes open-68656929 {
+@keyframes open-521e5832 {
 to {
     opacity: 1;
     scale: 1;
 }
 }
-@keyframes close-68656929 {
+@keyframes close-521e5832 {
 from {
     opacity: 1;
     scale: 1;

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-25983c0a"]]);
+const checkboxCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-f7ba3446"]]);
 module.exports = checkboxCard;

package/dist/cjs/popover-content.js

@@ -101,5 +101,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const PopoverContent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-68656929"]]);
+const PopoverContent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-521e5832"]]);
 module.exports = PopoverContent;

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-25983c0a"]]);
+const checkboxCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f7ba3446"]]);
 export {
   checkboxCard as default
 };

package/dist/es/popover-content.js

@@ -100,7 +100,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PopoverContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-68656929"]]);
+const PopoverContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-521e5832"]]);
 export {
   PopoverContent as default
 };

package/package.json

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

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

@@ -94,6 +94,7 @@ const delegatedProps = useDelegatedProps(props, 'class');
 .celeste-checkbox-card {
   display: flex;
   align-items: flex-start;
+  justify-content: space-between;
   padding: var(--spacing-16);
   transition: all var(--animation-fast) ease-out;
   border: 1px solid var(--color-stroke-soft-200);

package/src/components/popover/popover-content.vue

@@ -188,7 +188,6 @@ $icon-size-map: (
   .celeste-popover-content {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-8);
 
     .celeste-popover-title,
     .celeste-popover-description {
@@ -196,6 +195,7 @@ $icon-size-map: (
     }
 
     .celeste-popover-title {
+      margin-block-end: var(--spacing-8);
       color: var(--color-text-strong-950);
       font: var(--label-md);
     }

package/src/components/popover/stories/popover.stories.ts

@@ -1,4 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import TextInput from '@/components/text-input/text-input.vue';
+import {
+  PopoverClose,
+} from 'radix-vue';
 import Button from '../../button/button.vue';
 import PopoverContent from '../popover-content.vue';
 import PopoverTrigger from '../popover-trigger.vue';
@@ -354,3 +358,45 @@ export const Positioning: Story = {
     `,
   }),
 };
+
+export const CustomContent: Story = {
+  args: {},
+  render: args => ({
+    components: { Popover, PopoverContent, PopoverTrigger, Button, TextInput, PopoverClose },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Popover>
+        <PopoverTrigger>
+          <Button variant="stroke" intent="neutral">
+            Custom Form
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent :dismissible="false">
+          <div style="padding: var(--spacing-16)">
+            <h3 style="margin: var(--spacing-0) var(--spacing-0) var(--spacing-8); font: var(--title-h6-title)">
+              Subscribe to Newsletter
+            </h3>
+            <p style="margin: var(--spacing-0) var(--spacing-0) var(--spacing-8); font: var(--paragraph-sm); color: var(--color-text-sub-600);">
+              Get the latest updates delivered to your inbox.
+            </p>
+            <div style="display: flex; flex-direction: column; gap: var(--spacing-12);">
+              <TextInput placeholder="hey@email.com" type="email" size="sm" id="email" style="width: 100%; margin-block: var(--spacing-8);" />
+              <div style="display: flex; gap: var(--spacing-8);">
+                <Button variant="fill" intent="primary" style="flex: 1;">
+                  Subscribe
+                </Button>
+                <PopoverClose as="div">
+                  <Button variant="stroke" intent="neutral" style="flex: 1;">
+                    Maybe Later
+                  </Button>
+                </PopoverClose>
+              </div>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    `,
+  }),
+};