@youcan/celeste 0.6.101 → 0.7.0

package/src/components/table/table-header.vue

@@ -2,13 +2,11 @@
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 
-const props = defineProps<TableHeaderProps>();
-</script>
-
-<script lang="ts">
 export interface TableHeaderProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<TableHeaderProps>();
 </script>
 
 <template>

package/src/components/table/table-row.vue

@@ -2,17 +2,15 @@
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 
-const props = withDefaults(
-  defineProps<TableRowProps>(),
-  { hoverable: true },
-);
-</script>
-
-<script lang="ts">
 export interface TableRowProps {
   class?: HTMLAttributes['class'];
   hoverable?: boolean;
 }
+
+const props = withDefaults(
+  defineProps<TableRowProps>(),
+  { hoverable: true },
+);
 </script>
 
 <template>

package/src/components/table/table.vue

@@ -2,13 +2,11 @@
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 
-const props = defineProps<TableProps>();
-</script>
-
-<script lang="ts">
 export interface TableProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<TableProps>();
 </script>
 
 <template>

package/src/components/tag/tag.vue

@@ -1,18 +1,9 @@
 <script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
-const props = withDefaults(defineProps<TagProps>(), {
-  variant: 'stroke',
-  dismissable: false,
-  as: 'div',
-});
-
-defineEmits<TagEmits>();
-</script>
-
-<script lang="ts">
 export interface TagProps extends PrimitiveProps {
   variant?: 'stroke' | 'gray';
   class?: HTMLAttributes['class'];
@@ -23,6 +14,14 @@ export interface TagProps extends PrimitiveProps {
 export interface TagEmits {
   dismiss: [];
 }
+
+const props = withDefaults(defineProps<TagProps>(), {
+  variant: 'stroke',
+  dismissable: false,
+  as: 'div',
+});
+
+defineEmits<TagEmits>();
 </script>
 
 <template>

package/src/components/text-input/text-input-button.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import type { ButtonProps } from '@/components/button/button.vue';
 import clsx from 'clsx';
-import Button, { type ButtonProps } from '@/components/button/button.vue';
+import Button from '@/components/button/button.vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = withDefaults(
-  defineProps<Omit</* @vue-ignore */ButtonProps, 'type' | 'size' | 'variant'> & {
+  defineProps<Omit<ButtonProps, 'type' | 'size' | 'variant'> & {
     inline?: boolean;
   }>(),
   { inline: false },

package/src/components/text-input/text-input.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
+import type { InputHTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
-import { computed, type InputHTMLAttributes } from 'vue';
+import { Primitive } from 'reka-ui';
+import { computed } from 'vue';
 import { uid } from '@/utils/crypto';
 import TextInputButton from './text-input-button.vue';
 
+export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+  type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+  size?: 'xs' | 'sm' | 'md';
+  hasError?: boolean;
+}
+
 const props = withDefaults(defineProps<TextInputProps>(), {
   type: 'text',
   size: 'md',
@@ -24,14 +31,6 @@ function clearInput() {
 }
 </script>
 
-<script lang="ts">
-export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
-  type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
-  size?: 'xs' | 'sm' | 'md';
-  hasError?: boolean;
-}
-</script>
-
 <template>
   <label
     :for="id"

package/src/components/textarea/textarea.vue

@@ -2,6 +2,14 @@
 import type { TextareaHTMLAttributes } from 'vue';
 import clsx from 'clsx';
 
+export interface TextAreaProps {
+  class?: TextareaHTMLAttributes['class'];
+  placeholder?: string;
+  showCount?: boolean;
+  disabled?: boolean;
+  maxLength?: TextareaHTMLAttributes['maxlength'];
+}
+
 const props = withDefaults(defineProps<TextAreaProps>(), {
   disabled: false,
   placeholder: 'Placeholder',
@@ -11,16 +19,6 @@ const props = withDefaults(defineProps<TextAreaProps>(), {
 const modelValue = defineModel<string>();
 </script>
 
-<script lang="ts">
-export interface TextAreaProps {
-  class?: TextareaHTMLAttributes['class'];
-  placeholder: string;
-  showCount?: boolean;
-  disabled?: boolean;
-  maxLength?: TextareaHTMLAttributes['maxlength'];
-}
-</script>
-
 <template>
   <div
     :class="clsx(

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

@@ -1,10 +1,22 @@
 <script setup lang="ts">
+import type { TooltipContentProps as PrimitiveProps, TooltipContentEmits } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { type TooltipContentProps as PrimitiveProps, TooltipArrow, TooltipContent, type TooltipContentEmits, TooltipPortal, useForwardPropsEmits } from 'radix-vue';
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui';
 import CompactButton from '@/components/button/compact-button.vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
+export interface TooltipContentProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+  size?: 'xs' | 'sm' | 'md';
+  variant?: 'light' | 'dark';
+  icon?: string;
+  title?: string;
+  description?: string;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
+
 const props = withDefaults(
   defineProps<TooltipContentProps>(),
   {
@@ -24,19 +36,6 @@ function handleDismiss() {
 }
 </script>
 
-<script lang="ts">
-export interface TooltipContentProps extends PrimitiveProps {
-  class?: HTMLAttributes['class'];
-  size?: 'xs' | 'sm' | 'md';
-  variant?: 'light' | 'dark';
-  icon?: string;
-  title?: string;
-  description?: string;
-  dismissible?: boolean;
-  onDismiss?: () => void;
-}
-</script>
-
 <template>
   <TooltipPortal class="celeste-tooltip-portal">
     <TooltipContent
@@ -73,7 +72,7 @@ export interface TooltipContentProps extends PrimitiveProps {
   z-index: 50;
   align-items: flex-start;
   width: auto;
-  max-width: calc(var(--radix-tooltip-content-available-width) / 1.5);
+  max-width: calc(var(--reka-tooltip-content-available-width) / 1.5);
   height: auto;
   animation: var(--animation-fast) ease-out forwards;
   border: 1px solid transparent;

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

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { type TooltipProviderProps as PrimitiveProps, TooltipProvider } from 'radix-vue';
+import type { TooltipProviderProps as PrimitiveProps } from 'reka-ui';
+import { TooltipProvider } from 'reka-ui';
+
+export interface TooltipProviderProps extends PrimitiveProps {}
 
 const props = withDefaults(defineProps<TooltipProviderProps>(), {
   delayDuration: 0,
 });
 </script>
 
-<script lang="ts">
-export interface TooltipProviderProps extends PrimitiveProps {}
-</script>
-
 <template>
   <TooltipProvider v-bind="props">
     <slot />

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

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { type TooltipRootProps as PrimitiveProps, TooltipRoot, type TooltipRootEmits, useForwardPropsEmits } from 'radix-vue';
+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>();
 
@@ -12,10 +15,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 const open = ref(false);
 </script>
 
-<script lang="ts">
-export interface TooltipRootProps extends PrimitiveProps {}
-</script>
-
 <template>
   <TooltipRoot v-bind="forwarded" v-model:open="open">
     <slot />

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

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { type TooltipTriggerProps as PrimitiveProps, TooltipTrigger, useForwardProps } from 'radix-vue';
+import type { TooltipTriggerProps as PrimitiveProps } from 'reka-ui';
+import { TooltipTrigger, useForwardProps } from 'reka-ui';
+
+export interface TooltipTriggerProps extends PrimitiveProps {}
 
 const props = defineProps<TooltipTriggerProps>();
 
 const forwardedProps = useForwardProps(props);
 </script>
 
-<script lang="ts">
-export interface TooltipTriggerProps extends PrimitiveProps {}
-</script>
-
 <template>
   <TooltipTrigger v-bind="forwardedProps" as-child>
     <slot />

package/src/components/tooltip/tooltip.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
-import type { TooltipContentProps, TooltipRootEmits, TooltipRootProps } from 'radix-vue';
+import type { TooltipContentProps, TooltipRootEmits, TooltipRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 import { ref } from 'vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '.';
 
+export interface TooltipProps extends TooltipRootProps, TooltipContentProps {
+  class?: HTMLAttributes['class'];
+  size?: 'xs' | 'sm' | 'md';
+  variant?: 'light' | 'dark';
+  icon?: string;
+  title?: string;
+  description?: string;
+  dismissible?: boolean;
+}
+
 const props = withDefaults(defineProps<TooltipProps>(), {
   delayDuration: 0,
   sideOffset: 12,
@@ -25,18 +35,6 @@ function close() {
 }
 </script>
 
-<script lang="ts">
-export interface TooltipProps extends TooltipRootProps, TooltipContentProps {
-  class?: HTMLAttributes['class'];
-  size?: 'xs' | 'sm' | 'md';
-  variant?: 'light' | 'dark';
-  icon?: string;
-  title?: string;
-  description?: string;
-  dismissible?: boolean;
-}
-</script>
-
 <template>
   <TooltipProvider :delay-duration="delayDuration">
     <TooltipRoot

package/src/composables/use-delegated-props.ts

@@ -1,4 +1,5 @@
-import { computed, type ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
 
 export function useDelegatedProps<
   T extends Record<string, any>,

package/src/composables/use-sidebar.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from 'vue';
-import { createContext } from 'radix-vue';
+import { createContext } from 'reka-ui';
 
 export const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;

package/src/utils/sonner.ts

@@ -1,6 +1,7 @@
+import type { ExternalToast } from 'vue-sonner';
 import type { SonnerAlertProps } from '@/components/sonner/sonner-alert.vue';
 import { markRaw } from 'vue';
-import { type ExternalToast, toast as sonner } from 'vue-sonner';
+import { toast as sonner } from 'vue-sonner';
 import SonnerAlert from '@/components/sonner/sonner-alert.vue';
 
 export interface ToastOptions extends ExternalToast {