refactor: rename and fix styling`

apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue

@@ -3,20 +3,24 @@ import type { HTMLAttributes } from 'vue'
 import Sheet from '@/lib/registry/default/ui/sheet/Sheet.vue'
 import SheetContent from '@/lib/registry/default/ui/sheet/SheetContent.vue'
 import { cn } from '@/lib/utils'
-import { injectSidebarContext, SIDEBAR_WIDTH_MOBILE } from './utils'
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   side?: 'left' | 'right'
   variant?: 'sidebar' | 'floating' | 'inset'
   collapsible?: 'offcanvas' | 'icon' | 'none'
   class?: HTMLAttributes['class']
-}>()
+}>(), {
+  side: 'left',
+  variant: 'sidebar',
+  collapsible: 'offcanvas',
+})
 
-const { isMobile, state, openMobile, setOpenMobile } = injectSidebarContext()
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 </script>
 
 <template>

apps/www/src/lib/registry/default/ui/sidebar/SidebarInset.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <button
+  <main
     :class="cn(
       'relative flex min-h-svh flex-1 flex-col bg-background',
       'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
@@ -16,5 +16,5 @@ const props = defineProps<{
     )"
   >
     <slot />
-  </button>
+  </main>
 </template>

apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButton.vue

@@ -4,7 +4,7 @@ import TooltipContent from '@/lib/registry/default/ui/tooltip/TooltipContent.vue
 import TooltipTrigger from '@/lib/registry/default/ui/tooltip/TooltipTrigger.vue'
 import { type Component, computed } from 'vue'
 import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
-import { injectSidebarContext } from './utils'
+import { useSidebar } from './utils'
 
 defineOptions({
   inheritAttrs: false,
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<SidebarMenuButtonProps & {
   size: 'default',
 })
 
-const { isMobile, state } = injectSidebarContext()
+const { isMobile, state } = useSidebar()
 
 const delegatedProps = computed(() => {
   const { tooltip, ...delegated } = props
@@ -27,11 +27,15 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <SidebarMenuButtonChild v-if="!tooltip" v-bind="delegatedProps" />
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
 
   <Tooltip v-else>
     <TooltipTrigger as-child>
-      <SidebarMenuButtonChild v-bind="delegatedProps" />
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
     </TooltipTrigger>
     <TooltipContent
       side="right"

apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButtonChild.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { sidebarMenuButtonVariants } from '.'
+import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
 
-export interface SidebarMenuButtonProps extends PrimitiveProps, VariantProps<typeof sidebarMenuButtonVariants> {
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  variant?: SidebarMenuButtonVariants['variant']
+  size?: SidebarMenuButtonVariants['size']
   isActive?: boolean
   class?: HTMLAttributes['class']
 }

apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSubButton.vue

@@ -10,12 +10,15 @@ const props = withDefaults(defineProps<PrimitiveProps & {
   class?: HTMLAttributes['class']
 }>(), {
   as: 'a',
+  size: 'md',
 })
 </script>
 
 <template>
   <Primitive
     data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
     :data-size="size"
     :data-active="isActive"
     :class="cn(

apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue

@@ -2,14 +2,17 @@
 import { cn } from '@/lib/utils'
 import { useEventListener, useVModel } from '@vueuse/core'
 import { TooltipProvider } from 'radix-vue'
-import { computed, type HTMLAttributes, ref } from 'vue'
+import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
 import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   defaultOpen?: boolean
   open?: boolean
   class?: HTMLAttributes['class']
-}>()
+}>(), {
+  defaultOpen: true,
+  open: undefined,
+})
 
 const emits = defineEmits<{
   'update:open': [open: boolean]
@@ -19,9 +22,9 @@ const isMobile = ref(false) // useIsMobile()
 const openMobile = ref(false)
 
 const open = useVModel(props, 'open', emits, {
-  defaultValue: props.defaultOpen,
+  defaultValue: props.defaultOpen ?? false,
   passive: (props.open === undefined) as false,
-})
+}) as Ref<boolean>
 
 function setOpen(value: boolean) {
   open.value = value // emits('update:open', value)

apps/www/src/lib/registry/default/ui/sidebar/SidebarRail.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { injectSidebarContext } from './utils'
+import { useSidebar } from './utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
 }>()
 
-const { toggleSidebar } = injectSidebarContext()
+const { toggleSidebar } = useSidebar()
 </script>
 
 <template>

apps/www/src/lib/registry/default/ui/sidebar/SidebarTrigger.vue

@@ -3,13 +3,13 @@ import type { HTMLAttributes } from 'vue'
 import Button from '@/lib/registry/default/ui/button/Button.vue'
 import { cn } from '@/lib/utils'
 import { PanelLeft } from 'lucide-vue-next'
-import { injectSidebarContext } from './utils'
+import { useSidebar } from './utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
 }>()
 
-const { toggleSidebar } = injectSidebarContext()
+const { toggleSidebar } = useSidebar()
 </script>
 
 <template>

apps/www/src/lib/registry/default/ui/sidebar/index.ts

@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Sidebar } from './Sidebar.vue'
 export { default as SidebarContent } from './SidebarContent.vue'
@@ -24,7 +24,7 @@ export { default as SidebarRail } from './SidebarRail.vue'
 export { default as SidebarSeparator } from './SidebarSeparator.vue'
 export { default as SidebarTrigger } from './SidebarTrigger.vue'
 
-export { injectSidebarContext } from './utils'
+export { useSidebar } from './utils'
 
 export const sidebarMenuButtonVariants = cva(
   'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
@@ -47,3 +47,5 @@ export const sidebarMenuButtonVariants = cva(
     },
   },
 )
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>

apps/www/src/lib/registry/default/ui/sidebar/utils.ts

@@ -8,7 +8,7 @@ export const SIDEBAR_WIDTH_MOBILE = '18rem'
 export const SIDEBAR_WIDTH_ICON = '3rem'
 export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 
-export const [injectSidebarContext, provideSidebarContext] = createContext<{
+export const [useSidebar, provideSidebarContext] = createContext<{
   state: ComputedRef<'expanded' | 'collapsed'>
   open: Ref<boolean>
   setOpen: (value: boolean) => void