@nikala-ui/core 0.9.11 → 0.10.0

package/src/registry/components/ui/context-menu.tsx

@@ -0,0 +1,192 @@
+import { splitProps, type Component, type JSX, type ValidComponent } from "solid-js";
+import * as ContextMenuPrimitive from "@kobalte/core/context-menu";
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import { createClickOutside } from "@nikala-ui/hooks";
+import { ScrollArea } from "./scroll-area";
+import { Separator } from "./separator";
+import { Kbd } from "./kbd";
+import { cn } from "@/lib/cn";
+
+export type ContextMenuRootProps = ContextMenuPrimitive.ContextMenuRootProps;
+
+export const ContextMenu: Component<ContextMenuRootProps> = (props) => {
+  return <ContextMenuPrimitive.Root {...props} />;
+};
+
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+export const ContextMenuGroup = ContextMenuPrimitive.Group;
+export const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+export type ContextMenuSubTriggerProps<T extends ValidComponent = "div"> =
+  ContextMenuPrimitive.ContextMenuSubTriggerProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+    inset?: boolean;
+  };
+
+export const ContextMenuSubTrigger = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ContextMenuSubTriggerProps<T>>
+) => {
+  const [local, rest] = splitProps(props as ContextMenuSubTriggerProps, ["class", "children", "inset"]);
+
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      class={cn(
+        "flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground text-foreground",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      {local.children}
+      <svg class="ml-auto h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </ContextMenuPrimitive.SubTrigger>
+  );
+};
+
+export type ContextMenuSubContentProps<T extends ValidComponent = "div"> =
+  ContextMenuPrimitive.ContextMenuSubContentProps<T> & {
+    class?: string;
+  };
+
+export const ContextMenuSubContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ContextMenuSubContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as ContextMenuSubContentProps, ["class"]);
+
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.SubContent
+        class={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md transition-all animate-in fade-in-80 slide-in-from-top-1",
+          local.class
+        )}
+        {...(rest as any)}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+};
+
+export type ContextMenuContentProps<T extends ValidComponent = "div"> =
+  ContextMenuPrimitive.ContextMenuContentProps<T> & {
+    class?: string;
+    ref?: (el: HTMLElement) => void;
+    children?: JSX.Element;
+  };
+
+export const ContextMenuContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ContextMenuContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as ContextMenuContentProps, ["class", "ref", "children"]);
+  let menuRef: HTMLElement | undefined;
+
+  createClickOutside({
+    target: () => menuRef,
+    onInteractOutside: () => {
+      // Automatic portal dismiss on outside click
+    },
+  });
+
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        ref={(el) => {
+          menuRef = el;
+          if (typeof local.ref === "function") local.ref(el);
+        }}
+        class={cn(
+          "z-50 min-w-[8rem] rounded-md border border-border bg-popover text-popover-foreground shadow-md transition-all animate-in fade-in-80 slide-in-from-top-1 max-h-72 flex flex-col",
+          local.class
+        )}
+        {...(rest as any)}
+      >
+        <ScrollArea class="max-h-72 w-full rounded-[inherit]">
+          <div class="p-1">
+            {local.children}
+          </div>
+        </ScrollArea>
+      </ContextMenuPrimitive.Content>
+    </ContextMenuPrimitive.Portal>
+  );
+};
+
+export type ContextMenuItemProps<T extends ValidComponent = "div"> =
+  ContextMenuPrimitive.ContextMenuItemProps<T> & {
+    class?: string;
+    inset?: boolean;
+  };
+
+export const ContextMenuItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ContextMenuItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as ContextMenuItemProps, ["class", "inset"]);
+
+  return (
+    <ContextMenuPrimitive.Item
+      class={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-foreground",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type ContextMenuCheckboxItemProps<T extends ValidComponent = "div"> =
+  ContextMenuPrimitive.ContextMenuCheckboxItemProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+    checked?: boolean;
+  };
+
+export const ContextMenuCheckboxItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, ContextMenuCheckboxItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as ContextMenuCheckboxItemProps, ["class", "children", "checked"]);
+
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      checked={local.checked}
+      class={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-foreground",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+          </svg>
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {local.children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+};
+
+export interface ContextMenuShortcutProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const ContextMenuShortcut: Component<ContextMenuShortcutProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <span class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)} {...rest}>
+      <Kbd size="sm">{local.children}</Kbd>
+    </span>
+  );
+};
+
+export interface ContextMenuSeparatorProps {
+  class?: string;
+}
+
+export const ContextMenuSeparator: Component<ContextMenuSeparatorProps> = (props) => {
+  return <Separator class={cn("-mx-1 my-1 h-px bg-border", props.class)} />;
+};

package/src/registry/components/ui/dialog.tsx

@@ -1,28 +1,30 @@
 import { splitProps, type Component, type JSX, type ValidComponent, Show } from "solid-js";
 import * as DialogPrimitive from "@kobalte/core/dialog";
 import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import { ScrollArea } from "./scroll-area";
 import { cn } from "@/lib/cn";
 
 export type DialogRootProps = DialogPrimitive.DialogRootProps;
 
 /**
- * Root Dialog component managing modal open state.
+ * Root Dialog container managing state and context.
  */
 export const Dialog: Component<DialogRootProps> = (props) => {
   return <DialogPrimitive.Root {...props} />;
 };
 
 export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogClose = DialogPrimitive.CloseButton;
 
 export type DialogOverlayProps<T extends ValidComponent = "div"> =
   DialogPrimitive.DialogOverlayProps<T> & {
-    /** Whether to apply background blur effect (default: true) */
+    /** Whether to apply background backdrop blur (default: true) */
     blur?: boolean;
     class?: string;
   };
 
 /**
- * Backdrop overlay wrapper with optional backdrop blur styling.
+ * Darkened background overlay behind open dialog.
  */
 export const DialogOverlay = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, DialogOverlayProps<T>>
@@ -32,8 +34,8 @@ export const DialogOverlay = <T extends ValidComponent = "div">(
   return (
     <DialogPrimitive.Overlay
       class={cn(
-        "fixed inset-0 z-50 bg-black/80 data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
-        local.blur !== false && "backdrop-blur-sm",
+        "fixed inset-0 z-50 transition-all duration-200 data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
+        local.blur !== false ? "bg-black/80 backdrop-blur-sm" : "bg-black/80",
         local.class
       )}
       {...(rest as any)}
@@ -95,14 +97,18 @@ export const DialogContent = <T extends ValidComponent = "div">(
         onPointerDownOutside={handlePointerDownOutside}
         onInteractOutside={handleInteractOutside}
         class={cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-popover p-6 shadow-lg duration-200 data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg text-card-foreground",
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-popover shadow-lg duration-200 data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg text-card-foreground overflow-hidden max-h-[80vh]",
           local.class
         )}
         {...(rest as any)}
       >
-        {local.children}
+        <ScrollArea class="max-h-[80vh] w-full">
+          <div class="p-6 space-y-4">
+            {local.children}
+          </div>
+        </ScrollArea>
         <Show when={local.showCloseButton !== false}>
-          <DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-expanded:bg-accent data-expanded:text-muted-foreground cursor-pointer">
+          <DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-expanded:bg-accent data-expanded:text-muted-foreground cursor-pointer z-50">
             <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
@@ -118,9 +124,6 @@ export interface DialogHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
   class?: string;
 }
 
-/**
- * Dialog top header container.
- */
 export const DialogHeader: Component<DialogHeaderProps> = (props) => {
   const [local, rest] = splitProps(props, ["class"]);
 
@@ -136,60 +139,52 @@ export interface DialogFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
   class?: string;
 }
 
-/**
- * Dialog bottom action buttons area.
- */
 export const DialogFooter: Component<DialogFooterProps> = (props) => {
   const [local, rest] = splitProps(props, ["class"]);
 
   return (
     <div
-      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", local.class)}
+      class={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pt-4",
+        local.class
+      )}
       {...rest}
     />
   );
 };
 
-export type DialogTitleProps<T extends ValidComponent = "h2"> =
-  DialogPrimitive.DialogTitleProps<T> & {
-    class?: string;
-  };
+export interface DialogTitleProps {
+  class?: string;
+  children?: JSX.Element;
+}
 
-/**
- * Dialog title heading.
- */
-export const DialogTitle = <T extends ValidComponent = "h2">(
-  props: PolymorphicProps<T, DialogTitleProps<T>>
-) => {
-  const [local, rest] = splitProps(props as DialogTitleProps, ["class"]);
+export const DialogTitle: Component<DialogTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
 
   return (
     <DialogPrimitive.Title
       class={cn("text-lg font-semibold leading-none tracking-tight text-foreground", local.class)}
-      {...(rest as any)}
-    />
+      {...rest}
+    >
+      {local.children}
+    </DialogPrimitive.Title>
   );
 };
 
-export type DialogDescriptionProps<T extends ValidComponent = "p"> =
-  DialogPrimitive.DialogDescriptionProps<T> & {
-    class?: string;
-  };
+export interface DialogDescriptionProps {
+  class?: string;
+  children?: JSX.Element;
+}
 
-/**
- * Dialog subtitle or description text.
- */
-export const DialogDescription = <T extends ValidComponent = "p">(
-  props: PolymorphicProps<T, DialogDescriptionProps<T>>
-) => {
-  const [local, rest] = splitProps(props as DialogDescriptionProps, ["class"]);
+export const DialogDescription: Component<DialogDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
 
   return (
     <DialogPrimitive.Description
       class={cn("text-sm text-muted-foreground", local.class)}
-      {...(rest as any)}
-    />
+      {...rest}
+    >
+      {local.children}
+    </DialogPrimitive.Description>
   );
-};
-
-export const DialogClose = DialogPrimitive.CloseButton;
+};

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

@@ -2,6 +2,7 @@ import { splitProps, type Component, type JSX, type ValidComponent } from "solid
 import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu";
 import type { PolymorphicProps } from "@kobalte/core/polymorphic";
 import { createClickOutside } from "@nikala-ui/hooks";
+import { ScrollArea } from "./scroll-area";
 import { cn } from "@/lib/cn";
 
 export type DropdownMenuRootProps = Omit<
@@ -87,12 +88,13 @@ export const DropdownMenuSubContent = <T extends ValidComponent = "div">(
 export type DropdownMenuContentProps<T extends ValidComponent = "div"> =
   DropdownMenuPrimitive.DropdownMenuContentProps<T> & {
     class?: string;
+    children?: JSX.Element;
   };
 
 export const DropdownMenuContent = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, DropdownMenuContentProps<T>>
 ) => {
-  const [local, rest] = splitProps(props as DropdownMenuContentProps, ["class"]);
+  const [local, rest] = splitProps(props as DropdownMenuContentProps, ["class", "children"]);
   let contentRef: HTMLElement | undefined;
 
   createClickOutside({
@@ -111,12 +113,19 @@ export const DropdownMenuContent = <T extends ValidComponent = "div">(
           contentRef = el;
           if (typeof (props as any).ref === "function") (props as any).ref(el);
         }}
+        {...(rest as any)}
+        sideOffset={(rest as any).sideOffset ?? 8}
         class={cn(
-          "z-50 min-w-32 mt-1 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
+          "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md animate-in fade-in-80 max-h-72 flex flex-col mt-1",
           local.class
         )}
-        {...(rest as any)}
-      />
+      >
+        <ScrollArea class="max-h-72 w-full rounded-[inherit]">
+          <div class="p-1">
+            {local.children}
+          </div>
+        </ScrollArea>
+      </DropdownMenuPrimitive.Content>
     </DropdownMenuPrimitive.Portal>
   );
 };
@@ -125,25 +134,18 @@ export type DropdownMenuItemProps<T extends ValidComponent = "div"> =
   DropdownMenuPrimitive.DropdownMenuItemProps<T> & {
     class?: string;
     inset?: boolean;
-    variant?: "default" | "destructive";
   };
 
 export const DropdownMenuItem = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, DropdownMenuItemProps<T>>
 ) => {
-  const [local, rest] = splitProps(props as DropdownMenuItemProps, [
-    "class",
-    "inset",
-    "variant",
-  ]);
+  const [local, rest] = splitProps(props as DropdownMenuItemProps, ["class", "inset"]);
 
   return (
     <DropdownMenuPrimitive.Item
       class={cn(
-        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-foreground",
         local.inset && "pl-8",
-        local.variant === "destructive" &&
-        "text-destructive focus:bg-destructive/15 focus:text-destructive",
         local.class
       )}
       {...(rest as any)}
@@ -155,24 +157,26 @@ export type DropdownMenuCheckboxItemProps<T extends ValidComponent = "div"> =
   DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {
     class?: string;
     children?: JSX.Element;
+    checked?: boolean;
   };
 
 export const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>
 ) => {
-  const [local, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children"]);
+  const [local, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children", "checked"]);
 
   return (
     <DropdownMenuPrimitive.CheckboxItem
+      checked={local.checked}
       class={cn(
-        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-foreground",
         local.class
       )}
       {...(rest as any)}
     >
       <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <svg class="h-4 w-4 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
+          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
           </svg>
         </DropdownMenuPrimitive.ItemIndicator>
@@ -196,14 +200,16 @@ export const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
   return (
     <DropdownMenuPrimitive.RadioItem
       class={cn(
-        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-foreground",
         local.class
       )}
       {...(rest as any)}
     >
       <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <span class="h-2 w-2 rounded-full bg-current" />
+          <svg class="h-2 w-2 fill-current" viewBox="0 0 8 8">
+            <circle cx="4" cy="4" r="3" />
+          </svg>
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {local.children}
@@ -211,55 +217,44 @@ export const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
   );
 };
 
-export interface DropdownMenuLabelProps extends JSX.HTMLAttributes<HTMLDivElement> {
+export interface DropdownMenuLabelProps {
   class?: string;
   inset?: boolean;
+  children?: JSX.Element;
 }
 
 export const DropdownMenuLabel: Component<DropdownMenuLabelProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "inset"]);
+  const [local, rest] = splitProps(props, ["class", "inset", "children"]);
 
   return (
-    <div
-      class={cn(
-        "px-2 py-1.5 text-sm font-semibold text-foreground",
-        local.inset && "pl-8",
-        local.class
-      )}
+    <DropdownMenuPrimitive.GroupLabel
+      class={cn("px-2 py-1.5 text-sm font-semibold text-foreground", local.inset && "pl-8", local.class)}
       {...rest}
-    />
+    >
+      {local.children}
+    </DropdownMenuPrimitive.GroupLabel>
   );
 };
 
-export type DropdownMenuSeparatorProps<T extends ValidComponent = "hr"> =
-  DropdownMenuPrimitive.DropdownMenuSeparatorProps<T> & {
-    class?: string;
-  };
-
-export const DropdownMenuSeparator = <T extends ValidComponent = "hr">(
-  props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>
-) => {
-  const [local, rest] = splitProps(props as DropdownMenuSeparatorProps, ["class"]);
-
+export const DropdownMenuSeparator: Component<{ class?: string }> = (props) => {
   return (
     <DropdownMenuPrimitive.Separator
-      class={cn("-mx-1 my-1 h-px bg-border", local.class)}
-      {...(rest as any)}
+      class={cn("-mx-1 my-1 h-px bg-border", props.class)}
     />
   );
 };
 
-export interface DropdownMenuShortcutProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+export interface DropdownMenuShortcutProps {
   class?: string;
+  children?: JSX.Element;
 }
 
 export const DropdownMenuShortcut: Component<DropdownMenuShortcutProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class"]);
+  const [local, rest] = splitProps(props, ["class", "children"]);
 
   return (
-    <span
-      class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)}
-      {...rest}
-    />
+    <span class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)} {...rest}>
+      {local.children}
+    </span>
   );
 };

package/src/registry/components/ui/empty.tsx

@@ -0,0 +1,83 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface EmptyProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/** A centered layout for empty collections, search results, and initial states. */
+export const Empty: Component<EmptyProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn(
+        "flex min-h-64 w-full flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card/30 p-6 text-center",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyIconProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const EmptyIcon: Component<EmptyIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      aria-hidden="true"
+      class={cn(
+        "mb-4 flex size-12 items-center justify-center rounded-lg bg-muted text-muted-foreground [&_svg]:size-6",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+export const EmptyTitle: Component<EmptyTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <h3
+      class={cn("text-lg font-semibold tracking-tight text-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyDescriptionProps
+  extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const EmptyDescription: Component<EmptyDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <p
+      class={cn("mt-1 max-w-sm text-sm text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyActionProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const EmptyAction: Component<EmptyActionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div class={cn("mt-5 flex items-center gap-2", local.class)} {...rest} />
+  );
+};