@tulip-systems/core 0.6.1 → 0.7.0

package/src/components/entry.client.ts

@@ -29,22 +29,38 @@ export * from "./navigation/admin-sidebar-paths.client";
 /**
  * Components UI
  */
+export * from "./ui/accordion.client";
+export * from "./ui/alert-dialog.client";
+export * from "./ui/aspect-ratio.client";
 export * from "./ui/avatar.client";
+export * from "./ui/calendar.client";
+export * from "./ui/carousel.client";
 export * from "./ui/chart.client";
+export * from "./ui/checkbox.client";
 export * from "./ui/collapsible.client";
 export * from "./ui/color-picker.client";
 export * from "./ui/combobox.client";
 export * from "./ui/combobox-dropdown.client";
+export * from "./ui/command.client";
+export * from "./ui/context-menu.client";
 export * from "./ui/date-picker.client";
 export * from "./ui/dialog.client";
 export * from "./ui/drawer.client";
+export * from "./ui/dropdown-menu.client";
+export * from "./ui/field.client";
 export * from "./ui/form.client";
 export * from "./ui/hover-card.client";
+export * from "./ui/input-date-time.client";
+export * from "./ui/input-group.client";
+export * from "./ui/popover.client";
 export * from "./ui/progress.client";
 export * from "./ui/resizable.client";
 export * from "./ui/select.client";
 export * from "./ui/sheet.client";
 export * from "./ui/sidebar.client";
 export * from "./ui/sonner.client";
+export * from "./ui/switch.client";
+export * from "./ui/tabs.client";
+export * from "./ui/toggle.client";
 export * from "./ui/toggle-group.client";
 export * from "./ui/tooltip.client";

package/src/components/entry.ts

@@ -29,34 +29,26 @@ export * from "./lists/data-stack";
 /**
  * Components UI
  */
-export * from "./ui/accordion";
 export * from "./ui/alert";
-export * from "./ui/alert-dialog";
-export * from "./ui/aspect-ratio";
 export * from "./ui/badge";
 export * from "./ui/breadcrumb";
 export * from "./ui/button";
-export * from "./ui/calendar";
+export * from "./ui/button-group";
 export * from "./ui/card";
-export * from "./ui/carousel";
-export * from "./ui/checkbox";
-export * from "./ui/command";
-export * from "./ui/context-menu";
-export * from "./ui/dropdown-menu";
+export * from "./ui/empty";
 export * from "./ui/input";
 export * from "./ui/input-date";
-export * from "./ui/input-date-time";
 export * from "./ui/input-time";
+export * from "./ui/item";
+export * from "./ui/kbd";
 export * from "./ui/label";
+export * from "./ui/loader";
 export * from "./ui/navigation-menu";
 export * from "./ui/pagination";
-export * from "./ui/popover";
 export * from "./ui/radio-group";
 export * from "./ui/scroll-area";
 export * from "./ui/separator";
 export * from "./ui/skeleton";
 export * from "./ui/slider";
-export * from "./ui/switch";
-export * from "./ui/tabs";
+export * from "./ui/spinner";
 export * from "./ui/textarea";
-export * from "./ui/toggle";

package/src/components/header/back-button.client.tsx

@@ -8,7 +8,7 @@ import {
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+} from "@/components/ui/context-menu.client";
 import { cn } from "@/lib/utils/cn";
 
 export function HeaderTopbarBackButton({
@@ -25,7 +25,7 @@ export function HeaderTopbarBackButton({
           variant="ghost"
           onClick={() => router.back()}
           className={cn(
-            "text-muted-foreground hover:text-foreground w-content h-full rounded-none border-r p-0",
+            "h-full w-content rounded-none border-r border-r-border p-0 text-muted-foreground hover:text-foreground",
             className,
           )}
         >

package/src/components/header/bottom-bar.client.tsx

@@ -37,7 +37,7 @@ export function BottomBarLinks({ paths, className, ...props }: BottomBarLinksPro
   return (
     <ul
       {...props}
-      className={cn("px-content flex flex-row items-center gap-6 text-sm font-medium", className)}
+      className={cn("flex flex-row items-center gap-6 px-content font-medium text-sm", className)}
     >
       {paths.map(({ href, name, segment, permission }) => {
         const children = (
@@ -45,7 +45,7 @@ export function BottomBarLinks({ paths, className, ...props }: BottomBarLinksPro
             key={href}
             href={href}
             className={cn(
-              "text-muted-foreground hover:text-foreground w-fit text-nowrap break-keep transition-colors",
+              "w-fit text-nowrap break-keep text-muted-foreground transition-colors hover:text-foreground",
               currentSegment === segment && "text-primary",
             )}
           >

package/src/components/header/breadcrumbs.client.tsx

@@ -14,7 +14,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu.client";
 import { ScrollArea } from "@/components/ui/scroll-area";
 
 export type HeaderBreadcrumb = {

package/src/components/header/header.client.tsx

@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils/cn";
 
 export function Header({ children, className, ...props }: ComponentProps<"header">) {
   return (
-    <header className={cn("bg-sidebar sticky top-0 z-30 backdrop-blur-3xl", className)} {...props}>
+    <header className={cn("sticky top-0 z-30 bg-sidebar backdrop-blur-3xl", className)} {...props}>
       {children}
     </header>
   );

package/src/components/layouts/empty-page.tsx

@@ -27,7 +27,7 @@ export function EmptyPage({ className, children, ...props }: ComponentProps<"div
 
 export function EmptyPageTitle({ className, children, ...props }: ComponentProps<"h2">) {
   return (
-    <h2 className={cn("text-lg font-bold tracking-tight", className)} {...props}>
+    <h2 className={cn("font-bold text-lg tracking-tight", className)} {...props}>
       {children}
     </h2>
   );
@@ -35,7 +35,7 @@ export function EmptyPageTitle({ className, children, ...props }: ComponentProps
 
 export function EmptyPageDescription({ className, children, ...props }: ComponentProps<"p">) {
   return (
-    <p className={cn("text-muted-foreground max-w-[40ch] text-sm", className)} {...props}>
+    <p className={cn("max-w-[40ch] text-muted-foreground text-sm", className)} {...props}>
       {children}
     </p>
   );

package/src/components/layouts/error-page.tsx

@@ -10,7 +10,7 @@ export function ErrorPage({ className, children, ...props }: ComponentProps<"div
     <div
       {...props}
       className={cn(
-        "min-h-120 flex h-full w-full flex-col items-center justify-center gap-y-3 border border-dashed text-center",
+        "flex h-full min-h-120 w-full flex-col items-center justify-center gap-y-3 border border-dashed text-center",
         className,
       )}
     >
@@ -24,7 +24,7 @@ export function ErrorPage({ className, children, ...props }: ComponentProps<"div
  */
 export function ErrorPageCode({ className, children, ...props }: ComponentProps<"h2">) {
   return (
-    <h2 className={cn("text-9xl font-bold leading-none", className)} {...props}>
+    <h2 className={cn("font-bold text-9xl leading-none", className)} {...props}>
       {children}
     </h2>
   );
@@ -55,7 +55,7 @@ export function ErrorPageIcon({
  */
 export function ErrorPageDescription({ className, children, ...props }: ComponentProps<"p">) {
   return (
-    <p className={cn("text-2xl font-bold lg:text-3xl", className)} {...props}>
+    <p className={cn("font-bold text-2xl lg:text-3xl", className)} {...props}>
       {children}
     </p>
   );

package/src/components/layouts/providers.client.tsx

@@ -8,6 +8,7 @@ import type { PropsWithChildren } from "react";
 import { Toaster } from "@/components/ui/sonner.client";
 import { IndicatorContextProvider } from "@/lib/hooks/use-indicator";
 import { getQueryClient } from "@/modules/router/lib/query-client";
+import { TooltipProvider } from "../ui/tooltip.client";
 
 export function Providers({ children }: PropsWithChildren) {
   const queryClient = getQueryClient();
@@ -16,12 +17,14 @@ export function Providers({ children }: PropsWithChildren) {
     <QueryClientProvider client={queryClient}>
       <NuqsAdapter>
         <IndicatorContextProvider>
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            {children}
+          <TooltipProvider>
+            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+              {children}
 
-            <Toaster />
-            <ReactQueryDevtools />
-          </ThemeProvider>
+              <Toaster />
+              <ReactQueryDevtools />
+            </ThemeProvider>
+          </TooltipProvider>
         </IndicatorContextProvider>
       </NuqsAdapter>
     </QueryClientProvider>

package/src/components/layouts/root-loading.tsx

@@ -1,9 +1,9 @@
-import { Spinner } from "../ui/spinner";
+import { Loader } from "../ui/loader";
 
 export function RootLoading() {
   return (
     <div className="grid h-dvh w-full place-items-center">
-      <Spinner />
+      <Loader />
     </div>
   );
 }

package/src/components/layouts/tab-layout.tsx

@@ -3,7 +3,7 @@
 import type { Route } from "next";
 import { useRouter, useSelectedLayoutSegment } from "next/navigation";
 import { useState } from "react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs.client";
 import { Allowed } from "@/modules/auth/components/allowed.client";
 import type { Permission } from "@/modules/auth/lib/permissions";
 import { ListLayout } from "./list-layout";

package/src/components/lists/data-list.tsx

@@ -31,7 +31,7 @@ export type DataListTitleProps = React.HTMLAttributes<HTMLElement>;
 
 export function DataListTitle({ children, className, ...props }: DataListTitleProps) {
   return (
-    <dt {...props} className={cn("text-sm font-semibold leading-6", className)}>
+    <dt {...props} className={cn("font-semibold text-sm leading-6", className)}>
       {children}
     </dt>
   );

package/src/components/lists/data-stack.tsx

@@ -54,7 +54,7 @@ export type DataStackTitleProps = React.HTMLAttributes<HTMLElement>;
 
 export function DataStackTitle({ children, className, ...props }: DataStackTitleProps) {
   return (
-    <dt {...props} className={cn("text-sm font-medium leading-none", className)}>
+    <dt {...props} className={cn("font-medium text-sm leading-none", className)}>
       {children}
     </dt>
   );

package/src/components/navigation/admin-sidebar-header.client.tsx

@@ -24,7 +24,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu.client";
 import { cn } from "@/lib/utils/cn";
 import { useAuthClient } from "@/modules/auth/hooks/use-auth-client";
 import { useSession } from "@/modules/auth/hooks/use-session";
@@ -54,12 +54,12 @@ export function AdminSidebarHeader() {
                 />
                 <AvatarFallback>{sessionQuery.data?.user.name?.[0] ?? ""}</AvatarFallback>
               </Avatar>
-              <span className="text-md text-muted-foreground font-bold">
+              <span className="font-bold text-md text-muted-foreground">
                 {sessionQuery.data?.user.name}
               </span>
             </div>
 
-            <ChevronsUpDownIcon className="text-muted-foreground h-4 w-4" />
+            <ChevronsUpDownIcon className="h-4 w-4 text-muted-foreground" />
           </Button>
         </DropdownMenuTrigger>
 

package/src/components/navigation/admin-sidebar-skeleton.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from "react";
 import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { DropdownMenu, DropdownMenuTrigger } from "@/components/ui/dropdown-menu.client";
 import {
   SidebarHeader,
   SidebarMenu,

package/src/components/ui/accordion.client.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "@/lib/utils/cn";
+
+function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left font-medium text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div
+        className={cn(
+          "pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/ui/alert-dialog.client.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import type * as React from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils/cn";
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-[state=closed]:animate-out data-[state=open]:animate-in supports-backdrop-filter:backdrop-blur-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 outline-none ring-1 ring-foreground/10 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=open]:animate-in data-[size=default]:sm:max-w-sm",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-medium text-base sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-balance text-muted-foreground text-sm md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/ui/alert.tsx

@@ -1,16 +1,15 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
-
 import { cn } from "@/lib/utils/cn";
 
 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",
+  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "bg-card text-card-foreground",
         destructive:
-          "text-destructive-foreground [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/80",
+          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
       },
     },
     defaultVariants: {
@@ -38,7 +37,10 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-title"
-      className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className,
+      )}
       {...props}
     />
   );
@@ -49,7 +51,7 @@ function AlertDescription({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="alert-description"
       className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        "text-balance text-muted-foreground text-sm md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
         className,
       )}
       {...props}
@@ -57,4 +59,10 @@ function AlertDescription({ className, ...props }: React.ComponentProps<"div">)
   );
 }
 
-export { Alert, AlertDescription, AlertTitle };
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props} />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/components/ui/aspect-ratio.client.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
+
+function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };