@youcan/celeste 0.6.102 → 0.7.0

package/dist/es/index.js

@@ -4,6 +4,51 @@ import { t as sonner_alert_default } from "./chunks/sonner-alert.js";
 import { t as badge_default } from "./chunks/badge.js";
 import { t as status_badge_default } from "./chunks/status-badge.js";
 import { n as sidebar_separator_default, t as components_exports } from "./chunks/components.js";
+import { t as tooltip_content_default } from "./chunks/tooltip-content.js";
+import { t as counter_input_default } from "./chunks/counter-input.js";
+import { t as collapsible_content_default } from "./chunks/collapsible-content.js";
+import { t as collapsible_trigger_default } from "./chunks/collapsible-trigger.js";
+import { t as combobox_anchor_default } from "./chunks/combobox-anchor.js";
+import { t as combobox_empty_default } from "./chunks/combobox-empty.js";
+import { t as combobox_list_default } from "./chunks/combobox-list.js";
+import { t as combobox_trigger_default } from "./chunks/combobox-trigger.js";
+import { t as checkbox_default } from "./chunks/checkbox.js";
+import { t as slider_default } from "./chunks/slider.js";
+import { t as dropdown_menu_item_default } from "./chunks/dropdown-menu-item.js";
+import { t as dropdown_menu_content_default } from "./chunks/dropdown-menu-content.js";
+import { t as dropdown_menu_label_default } from "./chunks/dropdown-menu-label.js";
+import { t as dropdown_menu_separator_default } from "./chunks/dropdown-menu-separator.js";
+import { t as dropdown_menu_sub_content_default } from "./chunks/dropdown-menu-sub-content.js";
+import { t as dropdown_menu_sub_trigger_default } from "./chunks/dropdown-menu-sub-trigger.js";
+import { t as popover_content_default } from "./chunks/popover-content.js";
+import { t as popover_trigger_default } from "./chunks/popover-trigger.js";
+import { t as dropdown_menu_group_default } from "./chunks/dropdown-menu-group.js";
+import { t as dropdown_menu_sub_default } from "./chunks/dropdown-menu-sub.js";
+import { t as dropdown_menu_trigger_default } from "./chunks/dropdown-menu-trigger.js";
+import { t as pagination_ellipsis_default } from "./chunks/pagination-ellipsis.js";
+import { t as pagination_first_default } from "./chunks/pagination-first.js";
+import { t as pagination_last_default } from "./chunks/pagination-last.js";
+import { t as pagination_content_default } from "./chunks/pagination-content.js";
+import { t as pagination_item_default } from "./chunks/pagination-item.js";
+import { t as pagination_next_default } from "./chunks/pagination-next.js";
+import { t as pagination_previous_default } from "./chunks/pagination-previous.js";
+import { t as digit_input_slot_default } from "./chunks/digit-input-slot.js";
+import { t as radio_group_item_default } from "./chunks/radio-group-item.js";
+import "./chunks/scroll-bar.js";
+import { t as scroll_area_default } from "./chunks/scroll-area.js";
+import { t as select_content_default } from "./chunks/select-content.js";
+import { t as select_trigger_default } from "./chunks/select-trigger.js";
+import { t as select_item_default } from "./chunks/select-item.js";
+import { t as select_label_default } from "./chunks/select-label.js";
+import { t as select_separator_default } from "./chunks/select-separator.js";
+import { t as select_value_default } from "./chunks/select-value.js";
+import { t as content_divider_default } from "./chunks/content-divider.js";
+import { t as switch_default } from "./chunks/switch.js";
+import { t as tab_menu_content_default } from "./chunks/tab-menu-content.js";
+import { t as tab_menu_list_default } from "./chunks/tab-menu-list.js";
+import { t as tab_menu_item_default } from "./chunks/tab-menu-item.js";
+import { t as segmented_control_item_default } from "./chunks/segmented-control-item.js";
+import { t as tooltip_trigger_default } from "./chunks/tooltip-trigger.js";
 import { t as button_default } from "./chunks/button.js";
 import { t as compact_button_default } from "./chunks/compact-button.js";
 import { t as fancy_button_default } from "./chunks/fancy-button.js";
@@ -13,63 +58,34 @@ import { t as color_picker_default } from "./chunks/color-picker.js";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { t as checkbox_card_default } from "./chunks/checkbox-card.js";
 import { t as checkbox_label_default } from "./chunks/checkbox-label.js";
-import { t as checkbox_default } from "./chunks/checkbox.js";
-import { t as collapsible_content_default } from "./chunks/collapsible-content.js";
-import { t as collapsible_trigger_default } from "./chunks/collapsible-trigger.js";
 import { t as collapsible_default } from "./chunks/collapsible.js";
 import { COLOR_NUMBER_VALIDATION_PATTERN, DEFAULT_SWATCH, HEX_VALIDATION_PATTERN, bumpColorValue, clamp, getAbsolutePosition, getColorConstraints, getFractionDigit, getPageXYFromEvent, getScrollXY, resolveArrowDirection, truncColorValue } from "./color.js";
 import { t as alpha_slider_default } from "./chunks/alpha-slider.js";
 import { t as color_area_default } from "./chunks/color-area.js";
-import { t as popover_content_default } from "./chunks/popover-content.js";
-import { t as popover_trigger_default } from "./chunks/popover-trigger.js";
 import { t as popover_default } from "./chunks/popover.js";
-import { t as select_content_default } from "./chunks/select-content.js";
 import { t as select_group_default } from "./chunks/select-group.js";
 import { t as select_icon_default } from "./chunks/select-icon.js";
-import { t as select_item_default } from "./chunks/select-item.js";
-import { t as select_label_default } from "./chunks/select-label.js";
-import { t as select_separator_default } from "./chunks/select-separator.js";
-import { t as select_trigger_default } from "./chunks/select-trigger.js";
-import { t as select_value_default } from "./chunks/select-value.js";
 import { t as select_default } from "./chunks/select.js";
 import { t as text_input_affix_default } from "./chunks/text-input-affix.js";
 import { t as text_input_button_default } from "./chunks/text-input-button.js";
 import { t as text_input_default } from "./chunks/text-input.js";
 import { t as color_swatch_default } from "./chunks/color-swatch.js";
 import { t as hue_slider_default } from "./chunks/hue-slider.js";
-import { t as combobox_anchor_default } from "./chunks/combobox-anchor.js";
-import { t as combobox_empty_default } from "./chunks/combobox-empty.js";
 import { t as combobox_group_default } from "./chunks/combobox-group.js";
 import { t as combobox_input_default } from "./chunks/combobox-input.js";
 import { t as combobox_item_default } from "./chunks/combobox-item.js";
-import { t as combobox_list_default } from "./chunks/combobox-list.js";
 import { t as combobox_root_default } from "./chunks/combobox-root.js";
 import { t as combobox_separator_default } from "./chunks/combobox-separator.js";
-import { t as combobox_trigger_default } from "./chunks/combobox-trigger.js";
 import { t as combobox_default } from "./chunks/combobox.js";
-import { t as content_divider_default } from "./chunks/content-divider.js";
-import { t as counter_input_default } from "./chunks/counter-input.js";
 import { t as digit_input_group_default } from "./chunks/digit-input-group.js";
-import { t as digit_input_slot_default } from "./chunks/digit-input-slot.js";
 import { t as digit_input_default } from "./chunks/digit-input.js";
-import { t as dropdown_menu_content_default } from "./chunks/dropdown-menu-content.js";
-import { t as dropdown_menu_group_default } from "./chunks/dropdown-menu-group.js";
-import { t as dropdown_menu_item_default } from "./chunks/dropdown-menu-item.js";
-import { t as dropdown_menu_label_default } from "./chunks/dropdown-menu-label.js";
-import { t as dropdown_menu_separator_default } from "./chunks/dropdown-menu-separator.js";
-import { t as dropdown_menu_sub_content_default } from "./chunks/dropdown-menu-sub-content.js";
-import { t as dropdown_menu_sub_trigger_default } from "./chunks/dropdown-menu-sub-trigger.js";
-import { t as dropdown_menu_sub_default } from "./chunks/dropdown-menu-sub.js";
-import { t as dropdown_menu_trigger_default } from "./chunks/dropdown-menu-trigger.js";
 import { t as dropdown_menu_default } from "./chunks/dropdown-menu.js";
 import { t as file_upload_area_default } from "./chunks/file-upload-area.js";
 import { t as hint_text_default } from "./chunks/hint-text.js";
-import { t as tooltip_content_default } from "./chunks/tooltip-content.js";
 import { t as tooltip_provider_default } from "./chunks/tooltip-provider.js";
 import { t as tooltip_root_default } from "./chunks/tooltip-root.js";
-import { t as tooltip_trigger_default } from "./chunks/tooltip-trigger.js";
 import { t as tooltip_default } from "./chunks/tooltip.js";
-import { t as label_default } from "./chunks/label.js";
+import { t as label_default } from "./chunks/label2.js";
 import { t as modal_body_default } from "./chunks/modal-body.js";
 import { t as modal_close_default } from "./chunks/modal-close.js";
 import { t as modal_content_default } from "./chunks/modal-content.js";
@@ -77,26 +93,14 @@ import { t as modal_footer_default } from "./chunks/modal-footer.js";
 import { t as modal_header_default } from "./chunks/modal-header.js";
 import { t as modal_trigger_default } from "./chunks/modal-trigger.js";
 import { t as modal_default } from "./chunks/modal.js";
-import { t as pagination_content_default } from "./chunks/pagination-content.js";
-import { t as pagination_ellipsis_default } from "./chunks/pagination-ellipsis.js";
-import { t as pagination_first_default } from "./chunks/pagination-first.js";
-import { t as pagination_item_default } from "./chunks/pagination-item.js";
-import { t as pagination_last_default } from "./chunks/pagination-last.js";
-import { t as pagination_next_default } from "./chunks/pagination-next.js";
-import { t as pagination_previous_default } from "./chunks/pagination-previous.js";
 import { t as pagination_default } from "./chunks/pagination.js";
 import { t as progress_bar_default } from "./chunks/progress-bar.js";
 import { t as progress_circle_default } from "./chunks/progress-circle.js";
 import { t as radio_group_card_default } from "./chunks/radio-group-card.js";
-import { t as radio_group_item_default } from "./chunks/radio-group-item.js";
 import { t as radio_group_label_default } from "./chunks/radio-group-label.js";
 import { t as radio_group_default } from "./chunks/radio-group.js";
 import { t as rich_editor_default } from "./chunks/rich-editor.js";
-import { t as switch_default } from "./chunks/switch.js";
 import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, provideSidebarContext, useSidebar } from "./use-sidebar.js";
-import "./chunks/scroll-bar.js";
-import { t as scroll_area_default } from "./chunks/scroll-area.js";
-import { t as segmented_control_item_default } from "./chunks/segmented-control-item.js";
 import { t as segmented_control_default } from "./chunks/segmented-control.js";
 import { t as sheet_close_default } from "./chunks/sheet-close.js";
 import { t as sheet_content_default } from "./chunks/sheet-content.js";
@@ -124,11 +128,7 @@ import { t as sidebar_menu_sub_default } from "./chunks/sidebar-menu-sub.js";
 import { t as sidebar_menu_default } from "./chunks/sidebar-menu.js";
 import { t as sidebar_provider_default } from "./chunks/sidebar-provider.js";
 import { t as sidebar_trigger_default } from "./chunks/sidebar-trigger.js";
-import { t as slider_default } from "./chunks/slider.js";
 import { n as toast$2, t as sonner_default } from "./chunks/sonner.js";
-import { t as tab_menu_content_default } from "./chunks/tab-menu-content.js";
-import { t as tab_menu_item_default } from "./chunks/tab-menu-item.js";
-import { t as tab_menu_list_default } from "./chunks/tab-menu-list.js";
 import { t as tab_menu_default } from "./chunks/tab-menu.js";
 import { t as table_body_default } from "./chunks/table-body.js";
 import { t as table_caption_default } from "./chunks/table-caption.js";

package/dist/es/label.js

@@ -1,2 +1,2 @@
-import { t as label_default } from "./chunks/label.js";
+import { t as label_default } from "./chunks/label2.js";
 export { label_default as default };

package/dist/es/use-sidebar.js

@@ -1,4 +1,4 @@
-import { Rt as te } from "./chunks/dist.js";
+import { t as createContext } from "./chunks/createContext.js";
 //#region src/composables/use-sidebar.ts
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
@@ -6,6 +6,6 @@ var SIDEBAR_WIDTH = "17rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "52px";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var [useSidebar, provideSidebarContext] = te("Sidebar");
+var [useSidebar, provideSidebarContext] = createContext("Sidebar");
 //#endregion
 export { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, provideSidebarContext, useSidebar };

package/dist/utils/sonner.d.ts

@@ -1,5 +1,5 @@
-import { SonnerAlertProps } from '../components/sonner/sonner-alert';
 import { ExternalToast } from 'vue-sonner';
+import { SonnerAlertProps } from '../components/sonner/sonner-alert';
 export interface ToastOptions extends ExternalToast {
     state?: SonnerAlertProps['state'];
     variant?: SonnerAlertProps['variant'];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.102",
+  "version": "0.7.0",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -45,39 +45,39 @@
     "@tiptap/vue-3": "^3.11.0",
     "@vueuse/core": "^13.9.0",
     "clsx": "^2.1.1",
-    "radix-vue": "^1.9.17",
+    "reka-ui": "^2.10.1",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-icons": "0.6.102",
-    "@youcan/celeste-tokens": "0.6.102"
+    "@youcan/celeste-icons": "0.7.0",
+    "@youcan/celeste-tokens": "0.7.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
-    "@storybook/addon-docs": "^10.1.10",
-    "@storybook/addon-onboarding": "^10.1.10",
-    "@storybook/vue3-vite": "^10.1.10",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-onboarding": "^10.4.6",
+    "@storybook/vue3-vite": "^10.4.6",
     "@tanstack/vue-table": "^8.21.3",
     "@tsconfig/node20": "^20.1.8",
     "@types/jsdom": "^21.1.7",
     "@types/tinycolor2": "^1.4.6",
     "@typescript-eslint/typescript-estree": "^8.59.3",
     "@typescript-eslint/utils": "^8.59.3",
-    "@unocss/reset": "^66.5.9",
+    "@unocss/reset": "^66.7.4",
     "@vitejs/plugin-vue": "^6.0.6",
     "@vue/compiler-core": "^3.5.24",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.22",
     "chromatic": "^11.29.0",
-    "eslint-plugin-storybook": "^10.1.10",
+    "eslint-plugin-storybook": "^10.4.6",
     "glob": "^11.1.0",
     "jsdom": "^25.0.1",
     "postcss": "^8.5.6",
     "postcss-nesting": "^13.0.2",
     "rimraf": "^6.1.2",
     "sass": "^1.94.2",
-    "storybook": "^10.1.10",
-    "unocss": "^66.5.9",
+    "storybook": "^10.4.6",
+    "unocss": "^66.7.4",
     "vite": "^8.0.13",
     "vite-plugin-dts": "^5.0.0",
     "vitest": "^4.1.6",

package/src/components/alert/alert.vue

@@ -3,6 +3,14 @@ import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import { uid } from '@/utils/crypto';
 
+export interface AlertProps {
+  class?: HTMLAttributes['class'];
+  size?: 'xs' | 'sm' | 'lg';
+  variant?: 'fill' | 'light' | 'lighter' | 'stroke';
+  state?: 'information' | 'success' | 'warning' | 'error' | 'feature';
+  dismissable?: boolean;
+}
+
 const props = withDefaults(
   defineProps<AlertProps>(),
   { size: 'xs', variant: 'fill', state: 'information', dismissable: false },
@@ -22,16 +30,6 @@ const ICON_MAP: Record<NonNullable<AlertProps['state']>, string> = {
 };
 </script>
 
-<script lang="ts">
-export interface AlertProps {
-  class?: HTMLAttributes['class'];
-  size?: 'xs' | 'sm' | 'lg';
-  variant?: 'fill' | 'light' | 'lighter' | 'stroke';
-  state?: 'information' | 'success' | 'warning' | 'error' | 'feature';
-  dismissable?: boolean;
-}
-</script>
-
 <template>
   <div
     :aria-labelledby="labelledby"

package/src/components/badge/badge.vue

@@ -2,15 +2,6 @@
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 
-const props = withDefaults(defineProps<BadgeProps>(), {
-  size: 'md',
-  color: 'faded',
-  variant: 'fill',
-  type: 'basic',
-});
-</script>
-
-<script lang="ts">
 export interface BadgeProps {
   size?: 'sm' | 'md';
   variant?: 'fill' | 'light' | 'lighter' | 'stroke';
@@ -21,6 +12,13 @@ export interface BadgeProps {
   label?: string;
   class?: HTMLAttributes['class'];
 }
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  size: 'md',
+  color: 'faded',
+  variant: 'fill',
+  type: 'basic',
+});
 </script>
 
 <template>

package/src/components/badge/status-badge.vue

@@ -1,6 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+
+export interface StatusBadgeProps {
+  variant?: 'stroke' | 'light';
+  dotted?: boolean;
+  state?: 'success' | 'warning' | 'error' | 'faded';
+  label: string;
+  class?: HTMLAttributes['class'];
+}
 
 const props = withDefaults(defineProps<StatusBadgeProps>(), {
   size: 'md',
@@ -18,16 +27,6 @@ const ICON_MAP: Record<NonNullable<StatusBadgeProps['state']>, string> = {
 const icon = computed(() => ICON_MAP[props.state]);
 </script>
 
-<script lang="ts">
-export interface StatusBadgeProps {
-  variant?: 'stroke' | 'light';
-  dotted?: boolean;
-  state?: 'success' | 'warning' | 'error' | 'faded';
-  label: string;
-  class?: HTMLAttributes['class'];
-}
-</script>
-
 <template>
   <div
     :class="clsx(

package/src/components/button/button.vue

@@ -1,23 +1,22 @@
 <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<ButtonProps>(), {
-  size: 'md',
-  variant: 'fill',
-  intent: 'primary',
-  as: 'button',
-});
-</script>
-
-<script lang="ts">
 export interface ButtonProps extends PrimitiveProps {
   class?: HTMLAttributes['class'];
   size?: 'xxs' | 'xs' | 'sm' | 'md';
   intent?: 'primary' | 'neutral' | 'error';
   variant?: 'fill' | 'stroke' | 'lighter' | 'ghost';
 }
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  size: 'md',
+  variant: 'fill',
+  intent: 'primary',
+  as: 'button',
+});
 </script>
 
 <template>

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

@@ -1,16 +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<CompactButtonProps>(), {
-  size: 'lg',
-  as: 'button',
-  variant: 'stroke',
-});
-</script>
-
-<script lang="ts">
 export interface CompactButtonProps extends PrimitiveProps {
   class?: HTMLAttributes['class'];
   icon: string;
@@ -18,6 +11,12 @@ export interface CompactButtonProps extends PrimitiveProps {
   rounded?: boolean;
   variant?: 'stroke' | 'white' | 'ghost';
 }
+
+const props = withDefaults(defineProps<CompactButtonProps>(), {
+  size: 'lg',
+  as: 'button',
+  variant: 'stroke',
+});
 </script>
 
 <template>

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

@@ -1,21 +1,20 @@
 <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<FancyButtonProps>(), {
-  size: 'md',
-  intent: 'primary',
-  as: 'button',
-});
-</script>
-
-<script lang="ts">
 export interface FancyButtonProps extends PrimitiveProps {
   class?: HTMLAttributes['class'];
   size?: 'xs' | 'sm' | 'md';
   intent?: 'primary' | 'neutral' | 'error' | 'basic';
 }
+
+const props = withDefaults(defineProps<FancyButtonProps>(), {
+  size: 'md',
+  intent: 'primary',
+  as: 'button',
+});
 </script>
 
 <template>
@@ -85,8 +84,8 @@ $intent-map: (
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  transition-property: --celeste-fbutton-bg-start, --celeste-fbutton-bg-end, background-color, color, border-color,
-    box-shadow;
+  transition-property:
+    --celeste-fbutton-bg-start, --celeste-fbutton-bg-end, background-color, color, border-color, box-shadow;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
   border: none;

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

@@ -1,16 +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<LinkButtonProps>(), {
-  size: 'md',
-  intent: 'primary',
-  as: 'a',
-});
-</script>
-
-<script lang="ts">
 export interface LinkButtonProps extends PrimitiveProps {
   class?: HTMLAttributes['class'];
   size?: 'sm' | 'md';
@@ -18,6 +11,12 @@ export interface LinkButtonProps extends PrimitiveProps {
   underline?: boolean;
   disabled?: boolean;
 }
+
+const props = withDefaults(defineProps<LinkButtonProps>(), {
+  size: 'md',
+  intent: 'primary',
+  as: 'a',
+});
 </script>
 
 <template>

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

@@ -1,19 +1,17 @@
 <script setup lang="ts">
 import clsx from 'clsx';
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
-const props = withDefaults(defineProps<SocialButtonProps>(), {
-  variant: 'stroke',
-});
-</script>
-
-<script lang="ts">
 export interface SocialButtonProps {
   brand: 'apple' | 'twitter' | 'google' | 'facebook' | 'linkedin' | 'github';
   variant?: 'fill' | 'stroke';
   class?: string;
   label?: string;
 }
+
+const props = withDefaults(defineProps<SocialButtonProps>(), {
+  variant: 'stroke',
+});
 </script>
 
 <template>

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { LabelProps } from 'radix-vue';
+import type { LabelProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Label, Primitive } from 'radix-vue';
+import { Label, Primitive } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<LabelProps & {

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { LabelProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { Label, type LabelProps, Primitive } from 'radix-vue';
+import { Label, Primitive } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<LabelProps & {

package/src/components/checkbox/checkbox.vue

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

package/src/components/checkbox/stories/checkbox.stories.ts

@@ -15,7 +15,7 @@ type Story = StoryObj<typeof Checkbox>;
 
 export const Default: Story = {
   args: {
-    defaultChecked: true,
+    defaultValue: true,
   },
 
   render: args => ({
@@ -33,8 +33,7 @@ export const Default: Story = {
 
 export const Indeterminate: Story = {
   args: {
-    defaultChecked: true,
-    checked: 'indeterminate',
+    defaultValue: 'indeterminate',
   },
 
   render: args => ({
@@ -63,8 +62,8 @@ export const Disabled: Story = {
     template: `
       <div style="display: flex; gap: 1em;">
         <Checkbox v-bind="args" />
-        <Checkbox v-bind="args" checked />
-        <Checkbox v-bind="args" checked="indeterminate" />
+        <Checkbox v-bind="args" :model-value="true" />
+        <Checkbox v-bind="args" model-value="indeterminate" />
       </div>
     `,
   }),

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

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

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

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

package/src/components/collapsible/collapsible.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue';
-import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue';
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui';
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui';
+
+export interface CollapsibleProps extends CollapsibleRootProps {}
 
 const props = defineProps<CollapsibleProps>();
 const emits = defineEmits<CollapsibleRootEmits>();
@@ -8,10 +10,6 @@ const emits = defineEmits<CollapsibleRootEmits>();
 const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
-<script lang="ts">
-export interface CollapsibleProps extends CollapsibleRootProps {}
-</script>
-
 <template>
   <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
     <slot :open="open" />