@djangocfg/ui-core 2.1.106 → 2.1.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.106",
+  "version": "2.1.108",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -122,7 +122,7 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.106",
+    "@djangocfg/typescript-config": "^2.1.108",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/button-group.tsx

@@ -47,7 +47,7 @@ function ButtonGroupText({
 }: React.ComponentProps<"div"> & {
   asChild?: boolean
 }) {
-  const Comp = asChild ? Slot : "div"
+  const Comp: React.ElementType = asChild ? Slot : "div"
 
   return (
     <Comp

package/src/components/index.ts

@@ -47,6 +47,7 @@ export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 export { Popover, PopoverContent, PopoverTrigger } from './popover';
 export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from './sheet';
 export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription } from './drawer';
+export { ResponsiveSheet, ResponsiveSheetContent, ResponsiveSheetHeader, ResponsiveSheetTitle, ResponsiveSheetDescription, ResponsiveSheetFooter } from './responsive-sheet';
 export { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 

package/src/components/item.tsx

@@ -62,7 +62,7 @@ function Item({
   ...props
 }: React.ComponentProps<"div"> &
   VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
+  const Comp: React.ElementType = asChild ? Slot : "div"
   return (
     <Comp
       data-slot="item"

package/src/components/responsive-sheet.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+/**
+ * Responsive Sheet
+ *
+ * Dialog on desktop, Drawer (pull-down) on mobile.
+ * Automatically switches based on screen width using useIsMobile hook.
+ */
+
+import * as React from 'react';
+
+import { useIsMobile } from '../hooks/useMobile';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './dialog';
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from './drawer';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────────
+
+const ResponsiveSheetContext = React.createContext<{ isMobile: boolean }>({
+  isMobile: false,
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Root
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ResponsiveSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+function ResponsiveSheet({ open, onOpenChange, children }: ResponsiveSheetProps) {
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return (
+      <ResponsiveSheetContext.Provider value={{ isMobile: true }}>
+        <Drawer open={open} onOpenChange={onOpenChange}>
+          {children}
+        </Drawer>
+      </ResponsiveSheetContext.Provider>
+    );
+  }
+
+  return (
+    <ResponsiveSheetContext.Provider value={{ isMobile: false }}>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        {children}
+      </Dialog>
+    </ResponsiveSheetContext.Provider>
+  );
+}
+ResponsiveSheet.displayName = "ResponsiveSheet"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Content
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ResponsiveSheetContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+function ResponsiveSheetContent({ children, className }: ResponsiveSheetContentProps) {
+  const { isMobile } = React.useContext(ResponsiveSheetContext);
+
+  if (isMobile) {
+    return <DrawerContent className={className}>{children}</DrawerContent>;
+  }
+
+  return <DialogContent className={className}>{children}</DialogContent>;
+}
+ResponsiveSheetContent.displayName = "ResponsiveSheetContent"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Header
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ResponsiveSheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function ResponsiveSheetHeader({ className, ...props }: ResponsiveSheetHeaderProps) {
+  const { isMobile } = React.useContext(ResponsiveSheetContext);
+
+  if (isMobile) {
+    return <DrawerHeader className={className} {...props} />;
+  }
+
+  return <DialogHeader className={className} {...props} />;
+}
+ResponsiveSheetHeader.displayName = "ResponsiveSheetHeader"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Title
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ResponsiveSheetTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+
+function ResponsiveSheetTitle({ className, ...props }: ResponsiveSheetTitleProps) {
+  const { isMobile } = React.useContext(ResponsiveSheetContext);
+
+  if (isMobile) {
+    return <DrawerTitle className={className} {...props} />;
+  }
+
+  return <DialogTitle className={className} {...props} />;
+}
+ResponsiveSheetTitle.displayName = "ResponsiveSheetTitle"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Description
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ResponsiveSheetDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+function ResponsiveSheetDescription({ className, ...props }: ResponsiveSheetDescriptionProps) {
+  const { isMobile } = React.useContext(ResponsiveSheetContext);
+
+  if (isMobile) {
+    return <DrawerDescription className={className} {...props} />;
+  }
+
+  return <DialogDescription className={className} {...props} />;
+}
+ResponsiveSheetDescription.displayName = "ResponsiveSheetDescription"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Footer
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ResponsiveSheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function ResponsiveSheetFooter({ className, ...props }: ResponsiveSheetFooterProps) {
+  const { isMobile } = React.useContext(ResponsiveSheetContext);
+
+  if (isMobile) {
+    return <DrawerFooter className={className} {...props} />;
+  }
+
+  return <DialogFooter className={className} {...props} />;
+}
+ResponsiveSheetFooter.displayName = "ResponsiveSheetFooter"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Exports
+// ─────────────────────────────────────────────────────────────────────────────
+
+export {
+  ResponsiveSheet,
+  ResponsiveSheetContent,
+  ResponsiveSheetHeader,
+  ResponsiveSheetTitle,
+  ResponsiveSheetDescription,
+  ResponsiveSheetFooter,
+};