@jinaan/uikit 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/dialog.tsx

@@ -83,6 +83,7 @@ function resolveOrigin(content: HTMLElement): DialogOriginRect | null {
 const DIALOG_CLOSE_MS = 250;
 const DialogClosingContext = createContext(false);
 const DialogRequestCloseContext = createContext<() => void>(() => {});
+const InDialogContext = createContext(false);
 
 /** Dialog root; owns the delayed close so the fly-out can finish. */
 export function Dialog({
@@ -158,13 +159,15 @@ export function Dialog({
   return (
     <DialogRequestCloseContext.Provider value={() => handleOpenChange(false)}>
       <DialogClosingContext.Provider value={closing}>
-        <DialogPrimitive.Root
-          open={open}
-          onOpenChange={handleOpenChange}
-          {...props}
-        >
-          {children}
-        </DialogPrimitive.Root>
+        <InDialogContext.Provider value={true}>
+          <DialogPrimitive.Root
+            open={open}
+            onOpenChange={handleOpenChange}
+            {...props}
+          >
+            {children}
+          </DialogPrimitive.Root>
+        </InDialogContext.Provider>
       </DialogClosingContext.Provider>
     </DialogRequestCloseContext.Provider>
   );
@@ -393,26 +396,45 @@ export function DialogFooter({
   );
 }
 
+/**
+ * Dialog heading. Standalone-safe: outside a `Dialog` root it renders a plain
+ * heading with the same classes (Radix's Title requires a dialog context).
+ */
 export const DialogTitle = forwardRef<
   ElementRef<typeof DialogPrimitive.Title>,
   ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn("text-base font-semibold text-fg", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const Comp = useContext(InDialogContext)
+    ? DialogPrimitive.Title
+    : "h2";
+  return (
+    <Comp
+      ref={ref}
+      className={cn("text-base font-semibold text-fg", className)}
+      {...props}
+    />
+  );
+});
 DialogTitle.displayName = "DialogTitle";
 
+/**
+ * Dialog body copy. Standalone-safe: outside a `Dialog` root it renders a
+ * plain paragraph with the same classes (Radix's Description requires a
+ * dialog context).
+ */
 export const DialogDescription = forwardRef<
   ElementRef<typeof DialogPrimitive.Description>,
   ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const Comp = useContext(InDialogContext)
+    ? DialogPrimitive.Description
+    : "p";
+  return (
+    <Comp
+      ref={ref}
+      className={cn("text-sm text-muted", className)}
+      {...props}
+    />
+  );
+});
 DialogDescription.displayName = "DialogDescription";