fix(sidebar): prevent overflow in SidebarSeparator with horizontal orientation

Updated SidebarSeparator component to use
`data-[orientation=horizontal]:w-auto` instead of `w-auto` to prevent
overflow issues caused by underlying Separator classes.

The change makes the width override more specific, only applying to
horizontal separators, which prevents conflicts with other Separator
styling.

Author: edouard-andrei

apps/v4/registry/new-york-v4/ui/sidebar/SidebarSeparator.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
   <Separator
     data-slot="sidebar-separator"
     data-sidebar="separator"
-    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
+    :class="cn('bg-sidebar-border mx-2 data-[orientation=horizontal]:w-auto', props.class)"
   >
     <slot />
   </Separator>

apps/www/src/public/r/styles/default/sidebar.json

@@ -154,7 +154,7 @@
     },
     {
       "path": "ui/sidebar/SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 data-[orientation=horizontal]:w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -213,4 +213,4 @@
       "sidebar-ring": "217.2 91.2% 59.8%"
     }
   }
-}
+}

apps/www/src/public/r/styles/new-york-v4/sidebar.json

@@ -154,7 +154,7 @@
     },
     {
       "path": "ui/sidebar/SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <Separator\n    data-slot=\"sidebar-separator\"\n    data-sidebar=\"separator\"\n    :class=\"cn('bg-sidebar-border mx-2 w-auto', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <Separator\n    data-slot=\"sidebar-separator\"\n    data-sidebar=\"separator\"\n    :class=\"cn('bg-sidebar-border mx-2 data-[orientation=horizontal]:w-auto', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -213,4 +213,4 @@
       "sidebar-ring": "217.2 91.2% 59.8%"
     }
   }
-}
+}

apps/www/src/public/r/styles/new-york/sidebar.json

@@ -154,7 +154,7 @@
     },
     {
       "path": "ui/sidebar/SidebarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <Separator\n    data-sidebar=\"separator\"\n    :class=\"cn('mx-2 data-[orientation=horizontal]:w-auto bg-sidebar-border', props.class)\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
       "type": "registry:ui",
       "target": ""
     },
@@ -213,4 +213,4 @@
       "sidebar-ring": "217.2 91.2% 59.8%"
     }
   }
-}
+}

apps/www/src/registry/default/ui/sidebar/SidebarSeparator.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 <template>
   <Separator
     data-sidebar="separator"
-    :class="cn('mx-2 w-auto bg-sidebar-border', props.class)"
+    :class="cn('mx-2 data-[orientation=horizontal]:w-auto bg-sidebar-border', props.class)"
   >
     <slot />
   </Separator>

apps/www/src/registry/new-york/ui/sidebar/SidebarSeparator.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 <template>
   <Separator
     data-sidebar="separator"
-    :class="cn('mx-2 w-auto bg-sidebar-border', props.class)"
+    :class="cn('mx-2 data-[orientation=horizontal]:w-auto bg-sidebar-border', props.class)"
   >
     <slot />
   </Separator>