@youcan/celeste 0.6.102 → 0.7.0

package/src/components/sheet/sheet-close.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from 'radix-vue';
+import type { DialogCloseProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { DialogClose } from 'radix-vue';
+import { DialogClose } from 'reka-ui';
 
-const props = defineProps<SheetCloseProps>();
-</script>
-
-<script lang="ts">
 export interface SheetCloseProps extends DialogCloseProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<SheetCloseProps>();
 </script>
 
 <template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import clsx from 'clsx';
@@ -9,9 +9,14 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 import CompactButton from '@/components/button/compact-button.vue';
 
+export interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class'];
+  side?: 'top' | 'bottom' | 'left' | 'right';
+}
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -26,13 +31,6 @@ const delegated = reactiveOmit(props, 'class', 'side');
 const forwarded = useForwardPropsEmits(delegated, emits);
 </script>
 
-<script lang="ts">
-export interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes['class'];
-  side?: 'top' | 'bottom' | 'left' | 'right';
-}
-</script>
-
 <template>
   <DialogPortal>
     <DialogOverlay class="celeste-sheet-overlay" />

package/src/components/sheet/sheet-description.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from 'radix-vue';
+import type { DialogDescriptionProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import clsx from 'clsx';
-import { DialogDescription } from 'radix-vue';
+import { DialogDescription } from 'reka-ui';
 
-const props = defineProps<SheetDescriptionProps>();
-
-const delegated = reactiveOmit(props, 'class');
-</script>
-
-<script lang="ts">
 export interface SheetDescriptionProps extends DialogDescriptionProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<SheetDescriptionProps>();
+
+const delegated = reactiveOmit(props, 'class');
 </script>
 
 <template>

package/src/components/sheet/sheet-footer.vue

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

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

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

package/src/components/sheet/sheet-title.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from 'radix-vue';
+import type { DialogTitleProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import clsx from 'clsx';
-import { DialogTitle } from 'radix-vue';
+import { DialogTitle } from 'reka-ui';
 
-const props = defineProps<SheetTitleProps>();
-
-const delegatedProps = reactiveOmit(props, 'class');
-</script>
-
-<script lang="ts">
 export interface SheetTitleProps extends DialogTitleProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = defineProps<SheetTitleProps>();
+
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>

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

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from 'radix-vue';
-import { DialogTrigger } from 'radix-vue';
+import type { DialogTriggerProps } from 'reka-ui';
+import { DialogTrigger } from 'reka-ui';
 
-const props = defineProps<SheetTriggerProps>();
-</script>
-
-<script lang="ts">
 export interface SheetTriggerProps extends DialogTriggerProps {}
+
+const props = defineProps<SheetTriggerProps>();
 </script>
 
 <template>

package/src/components/sheet/sheet.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue';
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();

package/src/components/sidebar/sidebar-element.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
-const props = withDefaults(defineProps<SidebarElementProps>(), {
-  as: 'div',
-});
-</script>
-
-<script lang="ts">
 export interface SidebarElementProps extends PrimitiveProps {
   class?: HTMLAttributes['class'];
 }
+
+const props = withDefaults(defineProps<SidebarElementProps>(), {
+  as: 'div',
+});
 </script>
 
 <template>

package/src/components/sidebar/sidebar-footer.vue

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

package/src/components/sidebar/sidebar-group-label.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 const props = defineProps<PrimitiveProps & {
   class?: HTMLAttributes['class'];

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

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

package/src/components/sidebar/sidebar-menu-action.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
-const props = withDefaults(defineProps<SidebarMenuActionProps>(), {
-  as: 'button',
-});
-</script>
-
-<script lang="ts">
 export interface SidebarMenuActionProps extends PrimitiveProps {
   showOnHover?: boolean;
   class?: HTMLAttributes['class'];
 }
+
+const props = withDefaults(defineProps<SidebarMenuActionProps>(), {
+  as: 'button',
+});
 </script>
 
 <template>

package/src/components/sidebar/sidebar-menu-badge.vue

@@ -3,14 +3,6 @@ import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import Badge from '@/components/badge/badge.vue';
 
-const props = withDefaults(defineProps<SidebarMenuBadgeProps>(), {
-  variant: 'lighter',
-  state: 'faded',
-  size: 'sm',
-});
-</script>
-
-<script lang="ts">
 export interface SidebarMenuBadgeProps {
   class?: HTMLAttributes['class'];
   variant?: 'fill' | 'light' | 'lighter' | 'stroke';
@@ -18,6 +10,12 @@ export interface SidebarMenuBadgeProps {
   size?: 'sm' | 'md';
   label?: string;
 }
+
+const props = withDefaults(defineProps<SidebarMenuBadgeProps>(), {
+  variant: 'lighter',
+  state: 'faded',
+  size: 'sm',
+});
 </script>
 
 <template>

package/src/components/sidebar/sidebar-menu-button.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 defineOptions({
   inheritAttrs: false,

package/src/components/sidebar/sidebar-menu-sub-button.vue

@@ -1,22 +1,20 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
-const props = withDefaults(defineProps<SidebarMenuSubButtonProps>(), {
-  as: 'a',
-  size: 'md',
-  isActive: false,
-});
-</script>
-
-<script lang="ts">
 export interface SidebarMenuSubButtonProps extends PrimitiveProps {
   size?: 'sm' | 'md';
   isActive?: boolean;
   class?: HTMLAttributes['class'];
 }
+
+const props = withDefaults(defineProps<SidebarMenuSubButtonProps>(), {
+  as: 'a',
+  size: 'md',
+  isActive: false,
+});
 </script>
 
 <template>

package/src/components/sidebar/sidebar-separator.vue

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

package/src/components/sidebar/sidebar.vue

@@ -4,6 +4,12 @@ import clsx from 'clsx';
 import { Sheet, SheetContent } from '@/components/sheet';
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from '@/composables/use-sidebar';
 
+export interface SidebarProps {
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offcanvas' | 'icon' | 'none';
+  class?: HTMLAttributes['class'];
+}
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -16,14 +22,6 @@ const props = withDefaults(defineProps<SidebarProps>(), {
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 </script>
 
-<script lang="ts">
-export interface SidebarProps {
-  variant?: 'sidebar' | 'floating' | 'inset';
-  collapsible?: 'offcanvas' | 'icon' | 'none';
-  class?: HTMLAttributes['class'];
-}
-</script>
-
 <template>
   <Sheet
     v-if="isMobile"

package/src/components/slider/slider.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { SliderRange, SliderRoot, type SliderRootEmits, type SliderRootProps, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue';
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<Omit<SliderRootProps, 'orientation'> & { class?: HTMLAttributes['class'] }>();

package/src/components/sonner/sonner-alert.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Alert, type AlertProps } from '../alert';
+import type { AlertProps } from '../alert';
+import { Alert } from '../alert';
 
 export interface SonnerAlertProps extends /* @vue-ignore */ Partial<AlertProps> {
   title: string;

package/src/components/sonner/sonner.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { Toaster, type ToasterProps } from 'vue-sonner';
+import type { ToasterProps } from 'vue-sonner';
+import { Toaster } from 'vue-sonner';
 
-const props = defineProps<SonnerProps>();
-</script>
-
-<script lang="ts">
 export interface SonnerProps extends ToasterProps {}
+
+const props = defineProps<SonnerProps>();
 </script>
 
 <template>

package/src/components/switch/stories/switch.stories.ts

@@ -12,7 +12,7 @@ type Story = StoryObj<typeof Switch>;
 
 export const Default: Story = {
   args: {
-    defaultChecked: true,
+    defaultValue: true,
   },
 
   render: args => ({
@@ -53,7 +53,7 @@ export const WithLabel: Story = {
     template: `
       <div style="display: grid; gap: 1em;">
         <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
-          <Switch v-bind="args" :default-checked="true" />
+          <Switch v-bind="args" :default-value="true" />
           SMS Verification
         </label>
         <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
@@ -65,7 +65,7 @@ export const WithLabel: Story = {
           Disabled
         </label>
         <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
-          <Switch v-bind="args" :default-checked="true" disabled />
+          <Switch v-bind="args" :default-value="true" disabled />
           Disabled but default checked
         </label>
       </div>

package/src/components/switch/switch.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { SwitchRoot, type SwitchRootEmits, type SwitchRootProps, SwitchThumb, useForwardPropsEmits } from 'radix-vue';
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>();

package/src/components/tab-menu/tab-menu-content.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { TabsContent, type TabsContentProps } from 'radix-vue';
+import { TabsContent } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>();

package/src/components/tab-menu/tab-menu-item.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue';
+import { TabsTrigger, useForwardProps } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>();

package/src/components/tab-menu/tab-menu-list.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { TabsListProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { TabsList, type TabsListProps } from 'radix-vue';
+import { TabsList } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>();

package/src/components/tab-menu/tab-menu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from 'radix-vue';
-import { TabsRoot, useForwardPropsEmits } from 'radix-vue';
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<TabsRootProps>();
 const emits = defineEmits<TabsRootEmits>();

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

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

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

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

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

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

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

@@ -4,6 +4,11 @@ import clsx from 'clsx';
 import { TableCell, TableRow } from '@/components/table';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
+export interface TableEmptyProps {
+  colspan?: number;
+  class?: HTMLAttributes['class'];
+}
+
 const props = withDefaults(
   defineProps<TableEmptyProps>(),
   { colspan: 1 },
@@ -12,13 +17,6 @@ const props = withDefaults(
 const delegated = useDelegatedProps(props, 'class');
 </script>
 
-<script lang="ts">
-export interface TableEmptyProps {
-  colspan?: number;
-  class?: HTMLAttributes['class'];
-}
-</script>
-
 <template>
   <TableRow>
     <TableCell v-bind="delegated" :class="clsx('celeste-table-empty', props.class)">

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

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

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

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

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>