@youcan/celeste 0.23.0 → 0.24.1

package/src/components/button/fancy-button.vue

@@ -8,6 +8,8 @@ export interface FancyButtonProps extends PrimitiveProps {
   class?: HTMLAttributes['class'];
   size?: 'xs' | 'sm' | 'md';
   intent?: 'primary' | 'neutral' | 'error' | 'basic';
+  disabled?: boolean;
+  loading?: boolean;
 }
 
 const props = withDefaults(defineProps<FancyButtonProps>(), {
@@ -21,14 +23,21 @@ const props = withDefaults(defineProps<FancyButtonProps>(), {
   <Primitive
     :as
     :as-child
+    :disabled="disabled || loading || undefined"
+    :aria-busy="loading || undefined"
     :class="clsx(
       'celeste-fbutton',
       `celeste-fbutton-${intent}`,
       `celeste-fbutton-${size}`,
+      loading && !asChild && 'celeste-fbutton-loading',
       props.class,
     )"
   >
-    <slot />
+    <slot v-if="asChild" />
+    <template v-else>
+      <slot />
+      <i class="celeste-fbutton-spinner i-celeste-loader-5-line" />
+    </template>
   </Primitive>
 </template>
 
@@ -95,8 +104,9 @@ $intent-map: (
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
+  user-select: none;
 
-  &:disabled {
+  &:disabled:not(&-loading) {
     background-color: var(--color-bg-weak-50);
     color: var(--color-text-disabled-300);
     cursor: default;
@@ -122,7 +132,8 @@ $intent-map: (
   }
 
   @each $k, $v in $intent-map {
-    &-#{$k}:not(&-basic, :disabled) {
+    &-#{$k}:not(&-basic, :disabled:not(&-loading)) {
+      --celeste-fbutton-fg: #{if($k == 'neutral', var(--color-text-white-0), var(--color-static-white))};
       --celeste-fbutton-bg-start: rgb(255 255 255 / 16%);
       --celeste-fbutton-bg-end: rgb(255 255 255 / 0%);
 
@@ -130,7 +141,11 @@ $intent-map: (
         linear-gradient(180deg, var(--celeste-fbutton-bg-start) 0%, var(--celeste-fbutton-bg-end) 100%),
         #{map.get($v, bg)};
       box-shadow: var(--shadow-fancy-buttons-#{$k});
-      color: if($k == 'neutral', var(--color-text-white-0), var(--color-static-white));
+      color: var(--celeste-fbutton-fg);
+
+      &.celeste-fbutton-loading {
+        color: transparent;
+      }
 
       &::before {
         content: '';
@@ -161,9 +176,15 @@ $intent-map: (
   }
 
   &-basic {
+    --celeste-fbutton-fg: var(--color-text-sub-600);
+
     background: var(--color-bg-white-0);
     box-shadow: var(--shadow-fancy-buttons-stroke);
-    color: var(--color-text-sub-600);
+    color: var(--celeste-fbutton-fg);
+
+    &.celeste-fbutton-loading {
+      color: transparent;
+    }
 
     &:hover {
       background: var(--color-bg-weak-50);
@@ -178,4 +199,40 @@ $intent-map: (
     }
   }
 }
+
+.celeste-fbutton-loading {
+  pointer-events: none;
+}
+
+.celeste-fbutton-spinner {
+  position: absolute;
+  margin: auto;
+  transition-property: opacity, scale;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  animation: celeste-fbutton-spin 600ms linear infinite paused;
+  opacity: 0;
+  color: var(--celeste-fbutton-fg);
+  inset: 0;
+  scale: 0.9;
+}
+
+.celeste-fbutton-loading > .celeste-fbutton-spinner {
+  animation-play-state: running;
+  opacity: 1;
+  scale: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .celeste-fbutton-spinner {
+    animation-duration: 1200ms;
+    scale: 1;
+  }
+}
+
+@keyframes celeste-fbutton-spin {
+  100% {
+    rotate: 360deg;
+  }
+}
 </style>

package/src/components/button/social-button.vue

@@ -82,6 +82,7 @@ $brand-map: (
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
+  user-select: none;
   gap: var(--spacing-8);
 
   span {

package/src/components/button/stories/button.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
 import Button from '../button.vue';
 
 const meta: Meta<typeof Button> = {
@@ -49,3 +50,30 @@ export const IconOnly: Story = {
     `,
   }),
 };
+
+export const Loading: Story = {
+  args: {
+    size: 'md',
+    intent: 'primary',
+  },
+
+  render: args => ({
+    components: { Button },
+    setup() {
+      const loading = ref(false);
+
+      function save(): void {
+        loading.value = true;
+        setTimeout(() => loading.value = false, 3000);
+      }
+
+      return { args, loading, save };
+    },
+    template: `
+      <Button v-bind="args" :loading="loading" @click="save">
+        Save changes
+        <i class="i-celeste-check-line"></i>
+      </Button>
+    `,
+  }),
+};

package/src/components/button/stories/fancy-button.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
 import FancyButton from '../fancy-button.vue';
 
 const meta: Meta<typeof FancyButton> = {
@@ -29,3 +30,30 @@ export const Default: Story = {
     `,
   }),
 };
+
+export const Loading: Story = {
+  args: {
+    size: 'md',
+    intent: 'primary',
+  },
+
+  render: args => ({
+    components: { FancyButton },
+    setup() {
+      const loading = ref(false);
+
+      function save(): void {
+        loading.value = true;
+        setTimeout(() => loading.value = false, 3000);
+      }
+
+      return { args, loading, save };
+    },
+    template: `
+      <FancyButton v-bind="args" :loading="loading" @click="save">
+        Save changes
+        <i class="i-celeste-check-line"></i>
+      </FancyButton>
+    `,
+  }),
+};

package/src/components/color-picker/alpha-slider.vue

@@ -71,7 +71,7 @@ function handleChange(e: MouseEvent | TouchEvent, skip = false) {
   }
 
   if (alpha.value !== a) {
-    tinyColorRef.value = tinyColorRef.value.setAlpha(a).clone();
+    tinyColorRef.value = tinyColorRef.value.clone().setAlpha(a);
   }
 }
 
@@ -115,7 +115,7 @@ function handleKeydown(e: KeyboardEvent) {
     }
   }
   if (typeof newValue !== 'undefined') {
-    tinyColorRef.value = tinyColorRef.value.setAlpha(newValue).clone();
+    tinyColorRef.value = tinyColorRef.value.clone().setAlpha(newValue);
   }
 }
 

package/src/components/color-picker/color-picker.vue

@@ -235,7 +235,7 @@ function inputChangeAlpha(event: Event) {
     return;
   }
 
-  tinyColorRef.value = tinyColorRef.value.setAlpha(Math.max(0, Math.min(1, alphaValue)));
+  tinyColorRef.value = tinyColorRef.value.clone().setAlpha(Math.max(0, Math.min(1, alphaValue)));
 }
 
 function handleColorValueKeyDown(event: KeyboardEvent, key: ColorKey) {

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

@@ -88,7 +88,7 @@ function handleDismiss() {
   gap: var(--spacing-12);
   scale: 0.98;
 
-  &[data-state='delayed-open'] {
+  &[data-state$='open'] {
     animation-name: open;
   }
 

package/src/components/tooltip/tooltip-root.vue

@@ -1,22 +1,17 @@
 <script setup lang="ts">
 import type { TooltipRootProps as PrimitiveProps, TooltipRootEmits } from 'reka-ui';
 import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
-import { ref } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 export interface TooltipRootProps extends PrimitiveProps {}
 
 const props = defineProps<TooltipRootProps>();
 const emits = defineEmits<TooltipRootEmits>();
 
-const delegatedProps = useDelegatedProps(props, 'open');
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-
-const open = ref(false);
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <TooltipRoot v-bind="forwarded" v-model:open="open">
+  <TooltipRoot v-bind="forwarded">
     <slot />
   </TooltipRoot>
 </template>