npm - @tulip-systems/core - Versions diffs - 0.6.1 → 0.8.0 - Mend

@tulip-systems/core 0.6.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (840) hide show

package/src/components/editor/lib/helpers.ts CHANGED Viewed

@@ -6,13 +6,14 @@ import Heading from "@tiptap/extension-heading";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import Italic from "@tiptap/extension-italic";
 import Link from "@tiptap/extension-link";
-import { BulletList, ListItem, ListKeymap, OrderedList } from "@tiptap/extension-list";
+import { BulletList, ListItem, OrderedList } from "@tiptap/extension-list";
 import Paragraph from "@tiptap/extension-paragraph";
 import Strike from "@tiptap/extension-strike";
 import Text from "@tiptap/extension-text";
 import Underline from "@tiptap/extension-underline";
-import { Dropcursor, Gapcursor, TrailingNode, UndoRedo } from "@tiptap/extensions";
-import { generateHTML, generateJSON } from "@tiptap/html";
+import { generateJSON } from "@tiptap/html";
+import { renderToHTMLString, renderToMarkdown } from "@tiptap/static-renderer";
+import { markdownParser } from "@/lib/utils/markdown";
 import type { EditorJSONContent } from "./types";
 const EXTENSIONS_FOR_GENERATION = [
@@ -31,23 +32,39 @@ const EXTENSIONS_FOR_GENERATION = [
   Link,
   Strike,
   Underline,
-  Dropcursor,
-  Gapcursor,
-  UndoRedo,
-  ListKeymap,
-  TrailingNode,
 ];
 /**
- * Convert text to editor content
+ * Convert HTML to editor content
  */
 export function convertHTMLToEditorContent(html: string): EditorJSONContent {
   return generateJSON(html, EXTENSIONS_FOR_GENERATION);
 }
 /**
- * Convert editor content to text
+ * Convert markdown to editor content
+ */
+export function convertMarkdownToEditorContent(markdown: string): EditorJSONContent {
+  const html = markdownParser.render(markdown);
+  return convertHTMLToEditorContent(html);
+}
+/**
+ * Convert editor content to HTML
  */
 export function convertEditorContentToHTML(content: EditorJSONContent): string {
-  return generateHTML(content, EXTENSIONS_FOR_GENERATION);
+  return renderToHTMLString({
+    content,
+    extensions: EXTENSIONS_FOR_GENERATION,
+  });
+}
+/**
+ * Convert editor content to markdown
+ */
+export function convertEditorContentToMarkdown(content: EditorJSONContent): string {
+  return renderToMarkdown({
+    content,
+    extensions: EXTENSIONS_FOR_GENERATION,
+  });
 }

package/src/components/emails/forget-password-email.tsx CHANGED Viewed

@@ -25,21 +25,21 @@ export function ForgetPasswordEmail({ resetPasswordHref }: ForgetPasswordEmailPr
       <Tailwind>
         <Body className="mx-auto my-auto bg-white px-2 font-sans">
-          <Container className="mx-auto my-[40px] max-w-[465px] rounded border border-solid border-[#eaeaea] p-[20px]">
+          <Container className="mx-auto my-[40px] max-w-[465px] rounded border border-[#eaeaea] border-solid p-[20px]">
             <Icons.logo className="w-8" />
             <Section className="my-[15px]">
-              <Heading className="mx-0 my-[20px] p-0 text-[24px] font-bold text-black">
+              <Heading className="mx-0 my-[20px] p-0 font-bold text-[24px] text-black">
                 Herstel uw wachtwoord
               </Heading>
-              <Text className="text-[14px] leading-[24px] text-black">
+              <Text className="text-[14px] text-black leading-[24px]">
                 Iemand heeft onlangs een wachtwoordwijziging voor uw account gevraagd. Als u dit
                 was, kunt u hier een nieuw wachtwoord instellen:
               </Text>
               <Button
-                className="rounded bg-[#000000] px-5 py-3 text-center text-[12px] font-semibold text-white no-underline"
+                className="rounded bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
                 href={resetPasswordHref}
               >
                 Reset password
@@ -47,12 +47,12 @@ export function ForgetPasswordEmail({ resetPasswordHref }: ForgetPasswordEmailPr
             </Section>
             <Section>
-              <Text className="text-[12px] leading-[20px] text-black">
+              <Text className="text-[12px] text-black leading-[20px]">
                 Als u uw wachtwoord niet wilt wijzigen of dit niet heeft gevraagd, negeer en
                 verwijder dit bericht gewoon en verwijdert u.
               </Text>
-              <Text className="text-[12px] leading-[20px] text-black">
+              <Text className="text-[12px] text-black leading-[20px]">
                 Stuur deze e-mail niet door om uw account veilig te houden.
               </Text>
             </Section>

package/src/components/entry.client.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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,
+};