@authdog/react-elements 0.0.38 → 0.0.40

package/src/components/ui/dropdown-menu.tsx

@@ -1,20 +1,22 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-import type { ComponentType } from "react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import type { ComponentType } from "react";
 
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
 
-const CheckIcon = Check as ComponentType<React.SVGProps<SVGSVGElement>>
-const CircleIcon = Circle as ComponentType<React.SVGProps<SVGSVGElement>>
-const ChevronRightIcon = ChevronRight as ComponentType<React.SVGProps<SVGSVGElement>>
+const CheckIcon = Check as ComponentType<React.SVGProps<SVGSVGElement>>;
+const CircleIcon = Circle as ComponentType<React.SVGProps<SVGSVGElement>>;
+const ChevronRightIcon = ChevronRight as ComponentType<
+  React.SVGProps<SVGSVGElement>
+>;
 
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuPortal({
@@ -22,7 +24,7 @@ function DropdownMenuPortal({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return (
     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+  );
 }
 
 function DropdownMenuTrigger({
@@ -33,7 +35,7 @@ function DropdownMenuTrigger({
       data-slot="dropdown-menu-trigger"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuContent({
@@ -48,12 +50,12 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
+          className,
         )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  )
+  );
 }
 
 function DropdownMenuGroup({
@@ -61,7 +63,7 @@ function DropdownMenuGroup({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
   return (
     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+  );
 }
 
 function DropdownMenuItem({
@@ -70,8 +72,8 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -80,11 +82,11 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({
@@ -98,7 +100,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       checked={checked}
       {...props}
@@ -110,7 +112,7 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function DropdownMenuRadioGroup({
@@ -121,7 +123,7 @@ function DropdownMenuRadioGroup({
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuRadioItem({
@@ -134,7 +136,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -145,7 +147,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function DropdownMenuLabel({
@@ -153,7 +155,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Label
@@ -161,11 +163,11 @@ function DropdownMenuLabel({
       data-inset={inset}
       className={cn(
         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSeparator({
@@ -178,7 +180,7 @@ function DropdownMenuSeparator({
       className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuShortcut({
@@ -190,17 +192,17 @@ function DropdownMenuShortcut({
       data-slot="dropdown-menu-shortcut"
       className={cn(
         "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSub({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -209,7 +211,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
@@ -217,14 +219,14 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function DropdownMenuSubContent({
@@ -236,11 +238,11 @@ function DropdownMenuSubContent({
       data-slot="dropdown-menu-sub-content"
       className={cn(
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -259,4 +261,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};

package/src/components/ui/input.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@authdog/react-elements/lib/utils"
+import { cn } from "@authdog/react-elements/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -11,11 +11,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };

package/src/components/ui/label.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
 
-import { cn } from "@authdog/react-elements/lib/utils"
+import { cn } from "@authdog/react-elements/lib/utils";
 
 function Label({
   className,
@@ -14,11 +14,11 @@ function Label({
       data-slot="label"
       className={cn(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };

package/src/components/ui/separator.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@authdog/react-elements/lib/utils"
+import { cn } from "@authdog/react-elements/lib/utils";
 
 function Separator({
   className,
@@ -18,11 +18,11 @@ function Separator({
       orientation={orientation}
       className={cn(
         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Separator }
+export { Separator };

package/src/components/ui/sheet.tsx

@@ -1,34 +1,34 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-import type { ComponentType } from "react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import type { ComponentType } from "react";
 
-import { cn } from "@authdog/react-elements/lib/utils"
+import { cn } from "@authdog/react-elements/lib/utils";
 
-const XIcon = X as ComponentType<React.SVGProps<SVGSVGElement>>
+const XIcon = X as ComponentType<React.SVGProps<SVGSVGElement>>;
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 function SheetTrigger({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
 function SheetClose({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
 function SheetPortal({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({
@@ -40,11 +40,11 @@ function SheetOverlay({
       data-slot="sheet-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SheetContent({
@@ -53,7 +53,7 @@ function SheetContent({
   side = "right",
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
+  side?: "top" | "right" | "bottom" | "left";
 }) {
   return (
     <SheetPortal>
@@ -70,7 +70,7 @@ function SheetContent({
             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className
+          className,
         )}
         {...props}
       >
@@ -81,7 +81,7 @@ function SheetContent({
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>
     </SheetPortal>
-  )
+  );
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -91,7 +91,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-1.5 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -101,7 +101,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetTitle({
@@ -114,7 +114,7 @@ function SheetTitle({
       className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetDescription({
@@ -127,7 +127,7 @@ function SheetDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -139,4 +139,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};

package/src/index.ts

@@ -1,7 +1,7 @@
-export {Button} from "./components/ui/button";
+export { Button } from "./components/ui/button";
 export { ClientOnly } from "./components/core/client-only";
-export {Navbar} from "./components/core/navbar";
-export {UserProfile} from "./components/core/user-profile";
-export {UserDropdown} from "./components/core/user-dropdown";
-export {PlaceholderAlert} from "./components/core/placeholder-alert";
-export {TOTPValidator} from "./components/flow/totp-validator";
+export { Navbar } from "./components/core/navbar";
+export { UserProfile } from "./components/core/user-profile";
+export { UserDropdown } from "./components/core/user-dropdown";
+export { PlaceholderAlert } from "./components/core/placeholder-alert";
+export { TOTPValidator } from "./components/flow/totp-validator";

package/src/main.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-import './global.css';
+import React from "react";
+import "./global.css";
 
 // This is the main entry point for Ladle
 export default function Main({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-screen bg-background text-foreground">
-      {children}
-    </div>
+    <div className="min-h-screen bg-background text-foreground">{children}</div>
   );
-} 
+}

package/src/preview.tsx

@@ -1,11 +1,7 @@
-import React from 'react';
-import './global.css';
+import React from "react";
+import "./global.css";
 
 // This is the preview component for Ladle
 export default function Preview({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="ladle-main">
-      {children}
-    </div>
-  );
-} 
+  return <div className="ladle-main">{children}</div>;
+}

package/src/stories/Button._stories.tsx

@@ -1,24 +1,28 @@
-import type { Story } from '@ladle/react';
-import { Button } from '../components/ui/button';
+import type { Story } from "@ladle/react";
+import { Button } from "../components/ui/button";
 import "../global.css";
 
 export const Default: Story = () => <Button>Click me</Button>;
-Default.storyName = 'Default Button';
+Default.storyName = "Default Button";
 
 export const Primary: Story = () => <Button variant="default">Primary</Button>;
-Primary.storyName = 'Primary Button';
+Primary.storyName = "Primary Button";
 
-export const Secondary: Story = () => <Button variant="secondary">Secondary</Button>;
-Secondary.storyName = 'Secondary Button';
+export const Secondary: Story = () => (
+  <Button variant="secondary">Secondary</Button>
+);
+Secondary.storyName = "Secondary Button";
 
-export const Destructive: Story = () => <Button variant="destructive">Delete</Button>;
-Destructive.storyName = 'Destructive Button';
+export const Destructive: Story = () => (
+  <Button variant="destructive">Delete</Button>
+);
+Destructive.storyName = "Destructive Button";
 
 export const Outline: Story = () => <Button variant="outline">Outline</Button>;
-Outline.storyName = 'Outline Button';
+Outline.storyName = "Outline Button";
 
 export const Ghost: Story = () => <Button variant="ghost">Ghost</Button>;
-Ghost.storyName = 'Ghost Button';
+Ghost.storyName = "Ghost Button";
 
 export const Link: Story = () => <Button variant="link">Link</Button>;
-Link.storyName = 'Link Button'; 
+Link.storyName = "Link Button";

package/src/stories/LoginForm.stories.tsx

@@ -1,10 +1,10 @@
 // import { useState, useEffect } from "react"
-import type { Story } from "@ladle/react"
-import { LoginForm } from "../components/flow/login"
-import "../global.css"
+import type { Story } from "@ladle/react";
+import { LoginForm } from "../components/flow/login";
+import "../global.css";
 
-export const Default: Story = () => <LoginForm />
-Default.storyName = "Default Login Form"
+export const Default: Story = () => <LoginForm />;
+Default.storyName = "Default Login Form";
 
 // export const Loading: Story = () => {
 //   const [isLoading, setIsLoading] = useState(true)
@@ -26,4 +26,4 @@ Default.storyName = "Default Login Form"
 //   const [email, setEmail] = useState("user@example.com")
 //   return <LoginForm />
 // }
-// WithPrefilledEmail.storyName = "With Pre-filled Email" 
+// WithPrefilledEmail.storyName = "With Pre-filled Email"

package/src/stories/Navbar._stories.tsx

@@ -1,28 +1,66 @@
-import type { Story } from '@ladle/react';
-import { Navbar } from "../components/core/navbar"
-import { Button } from "../components/ui/button"
-import "../global.css"
+import type { Story } from "@ladle/react";
+import { Navbar } from "../components/core/navbar";
+import { Button } from "../components/ui/button";
+import "../global.css";
 
 export const Default: Story = () => <Navbar logoText="Authdog" />;
-Default.storyName = 'Default Navbar';
+Default.storyName = "Default Navbar";
 
-export const CustomNavigation: Story = () => <Navbar
+export const CustomNavigation: Story = () => (
+  <Navbar
     logoText="Authdog"
-    items={[{ title: "Home", href: "/" }, { title: "Features", href: "/features" }, { title: "Pricing", href: "/pricing" }, { title: "Contact", href: "/contact" }]}
-    
-/>;
+    items={[
+      { title: "Home", href: "/" },
+      { title: "Features", href: "/features" },
+      { title: "Pricing", href: "/pricing" },
+      { title: "Contact", href: "/contact" },
+    ]}
+  />
+);
 
+CustomNavigation.storyName = "Custom Navigation";
 
-CustomNavigation.storyName = 'Custom Navigation';
-
-export const CustomUser: Story = () => <Navbar logoText="Authdog" user={{ name: "Jane Smith", email: "jane@Authdog.com", image: "https://github.com/shadcn.png" }} />;
-CustomUser.storyName = 'Custom User';
+export const CustomUser: Story = () => (
+  <Navbar
+    logoText="Authdog"
+    user={{
+      name: "Jane Smith",
+      email: "jane@Authdog.com",
+      image: "https://github.com/shadcn.png",
+    }}
+  />
+);
+CustomUser.storyName = "Custom User";
 
-export const WithChildren: Story = () => <Navbar logoText="Authdog" children={<Button variant="outline" size="sm">Get Started</Button>} />;
-WithChildren.storyName = 'With Children';
+export const WithChildren: Story = () => (
+  <Navbar
+    logoText="Authdog"
+    children={
+      <Button variant="outline" size="sm">
+        Get Started
+      </Button>
+    }
+  />
+);
+WithChildren.storyName = "With Children";
 
-export const CustomStyling: Story = () => <Navbar logoText="Authdog" className="bg-gradient-to-r from-blue-500 to-purple-500 text-white" />;
-CustomStyling.storyName = 'Custom Styling';
+export const CustomStyling: Story = () => (
+  <Navbar
+    logoText="Authdog"
+    className="bg-gradient-to-r from-blue-500 to-purple-500 text-white"
+  />
+);
+CustomStyling.storyName = "Custom Styling";
 
-export const WithDisabledItems: Story = () => <Navbar logoText="Authdog" items={[{ title: "Dashboard", href: "/dashboard" }, { title: "Projects", href: "/projects" }, { title: "Team", href: "/team", disabled: true }, { title: "Reports", href: "/reports", disabled: true }]} />;
-WithDisabledItems.storyName = 'With Disabled Items'; 
+export const WithDisabledItems: Story = () => (
+  <Navbar
+    logoText="Authdog"
+    items={[
+      { title: "Dashboard", href: "/dashboard" },
+      { title: "Projects", href: "/projects" },
+      { title: "Team", href: "/team", disabled: true },
+      { title: "Reports", href: "/reports", disabled: true },
+    ]}
+  />
+);
+WithDisabledItems.storyName = "With Disabled Items";

package/src/stories/PlaceholderAlert._stories.tsx

@@ -1,13 +1,13 @@
-import type { Story } from '@ladle/react';
-import { PlaceholderAlert } from "../components/core/placeholder-alert"
-import "../global.css"
+import type { Story } from "@ladle/react";
+import { PlaceholderAlert } from "../components/core/placeholder-alert";
+import "../global.css";
 
 export const Default: Story = () => <PlaceholderAlert />;
-Default.storyName = 'Default Placeholder Alert';
+Default.storyName = "Default Placeholder Alert";
 export const CustomTitleAndDescription: Story = () => (
-  <PlaceholderAlert 
-    title="Custom Alert Title" 
-    description="This is a custom description for the placeholder alert." 
+  <PlaceholderAlert
+    title="Custom Alert Title"
+    description="This is a custom description for the placeholder alert."
   />
 );
-CustomTitleAndDescription.storyName = 'Custom Title and Description';
+CustomTitleAndDescription.storyName = "Custom Title and Description";