fix: 🐛 Fix broken Note UIs

components/ui/alert/Alert.vue

@@ -6,13 +6,14 @@ import { type AlertVariants, alertVariants } from ".";
 const props = defineProps<{
     class?: HTMLAttributes["class"];
     variant?: AlertVariants["variant"];
+    layout?: AlertVariants["layout"];
 }>();
 </script>
 
 <template>
   <div
     data-slot="alert"
-    :class="cn(alertVariants({ variant }), props.class)"
+    :class="cn(alertVariants({ variant, layout }), props.class)"
     role="alert"
   >
     <slot />

components/ui/alert/AlertDescription.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="alert-description"
-    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
+    :class="cn('text-muted-foreground text-sm [&_p]:leading-relaxed', props.class)"
   >
     <slot />
   </div>

components/ui/alert/AlertTitle.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="alert-title"
-    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
+    :class="cn('line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
   >
     <slot />
   </div>

components/ui/alert/index.ts

@@ -5,7 +5,7 @@ export { default as AlertDescription } from "./AlertDescription.vue";
 export { default as AlertTitle } from "./AlertTitle.vue";
 
 export const alertVariants = cva(
-    "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+    "relative w-full rounded-lg border px-4 py-3 grid text-sm [&>svg]:size-4 [&>svg]:text-current",
     {
         variants: {
             variant: {
@@ -13,9 +13,15 @@ export const alertVariants = cva(
                 destructive:
                     "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
             },
+            layout: {
+                default:
+                    "has-[>svg]:grid-cols-[1fr_auto] grid-rows-2 gap-x-3 gap-y-1 items-start",
+                button: "grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-0.5",
+            },
         },
         defaultVariants: {
             variant: "default",
+            layout: "default",
         },
     },
 );

components/ui/card/Card.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
     <div data-slot="card" :class="cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-md border py-6 shadow-sm',
         props.class,
     )
         ">

components/ui/dialog/DialogContent.vue

@@ -13,7 +13,10 @@ import { type HTMLAttributes, computed } from "vue";
 import DialogOverlay from "./DialogOverlay.vue";
 
 const props = defineProps<
-    DialogContentProps & { class?: HTMLAttributes["class"] }
+    DialogContentProps & {
+        class?: HTMLAttributes["class"];
+        hideClose?: boolean;
+    }
 >();
 const emits = defineEmits<DialogContentEmits>();
 
@@ -41,6 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       <slot />
 
       <DialogClose
+        v-if="!hideClose"
         class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
       >
         <X />

components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -32,7 +32,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     :data-inset="inset ? '' : undefined"
     :data-variant="variant"
     v-bind="forwardedProps"
-    :class="cn(`focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
+    :class="cn(`focus:bg-accent w-full focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
   >
     <slot />
   </DropdownMenuItem>