@djangocfg/ui-core 2.1.299 → 2.1.301

package/README.md

@@ -71,6 +71,34 @@ Default **`TooltipContent`** styling uses semantic **popover** tokens (`bg-popov
 </SidePanel>
 ```
 
+**`Drawer`** — modal vaul-based panel that slides in from any edge (`top` / `right` / `bottom` / `left`). Picks a size from a preset table or takes an explicit CSS length; both are applied via inline `style` so vaul's first-paint measurement matches the final layout (no inset miscalc).
+
+```tsx
+<Drawer direction="right">
+  <DrawerTrigger asChild><Button>Open</Button></DrawerTrigger>
+  <DrawerContent direction="right" size="lg">
+    <DrawerHeader>
+      <DrawerTitle>Details</DrawerTitle>
+    </DrawerHeader>
+    …
+  </DrawerContent>
+</Drawer>
+```
+
+Size presets — `sm` `md` `lg` `xl` `full`. Maps to width for `left`/`right`, height for `top`/`bottom`:
+
+| Size | Horizontal width | Vertical height |
+|------|-------------------|------------------|
+| sm   | `min(100vw, 360px)` | `min(100vh, 240px)` |
+| md   | `min(100vw, 480px)` | `min(100vh, 360px)` |
+| lg   | `min(100vw, 640px)` | `min(100vh, 480px)` |
+| xl   | `min(100vw, 800px)` | `min(100vh, 640px)` |
+| full | `100vw`           | `100vh`          |
+
+If you need an exact size, pass `width` / `height` (a CSS length string or number → px). Inline-applied so the vaul measurement is correct on first paint.
+
+**Migration note** — the default size changed (was hardcoded `280px` for left/right, `auto` for top/bottom). New default is `size="md"`. Pass `size="sm"` (~360px) for the closest old left/right behavior, or set an explicit `width` / `height`.
+
 ### Navigation (8)
 `Tabs` `Accordion` `Collapsible` `Command` `ContextMenu` `DropdownMenu` `Menubar` `NavigationMenu`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.299",
+  "version": "2.1.301",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -91,7 +91,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.299",
+    "@djangocfg/i18n": "^2.1.301",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -159,9 +159,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.299",
+    "@djangocfg/i18n": "^2.1.301",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.299",
+    "@djangocfg/typescript-config": "^2.1.301",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/overlay/drawer/drawer.story.tsx

@@ -1,4 +1,5 @@
-import { defineStory } from '@djangocfg/playground';
+import * as React from 'react';
+import { defineStory, useSelect } from '@djangocfg/playground';
 import {
   Drawer,
   DrawerTrigger,
@@ -8,6 +9,7 @@ import {
   DrawerTitle,
   DrawerDescription,
   DrawerClose,
+  type DrawerSize,
 } from '.';
 import { Button } from '../../forms/button';
 import { Input } from '../../forms/input';
@@ -129,3 +131,145 @@ export const ActionSheet = () => (
     </DrawerContent>
   </Drawer>
 );
+
+const SIZES: readonly DrawerSize[] = ['sm', 'md', 'lg', 'xl', 'full'] as const;
+
+export const Sizes = () => {
+  const [size, setSize] = React.useState<DrawerSize>('md');
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        {SIZES.map((s) => (
+          <Button
+            key={s}
+            variant={size === s ? 'default' : 'outline'}
+            onClick={() => {
+              setSize(s);
+              setOpen(true);
+            }}
+          >
+            {s}
+          </Button>
+        ))}
+      </div>
+      <p className="text-sm text-muted-foreground">
+        Current size: <code>{size}</code>. Direction: right.
+      </p>
+      <Drawer open={open} onOpenChange={setOpen} direction="right">
+        <DrawerContent direction="right" size={size}>
+          <DrawerHeader>
+            <DrawerTitle>Size: {size}</DrawerTitle>
+            <DrawerDescription>
+              Width preset is applied via inline style — vaul measures it
+              correctly on first paint.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 text-sm">Content adapts to the chosen size.</div>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button variant="outline">Close</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+};
+
+export const Directions = () => {
+  const [direction] = useSelect('direction', {
+    options: ['top', 'right', 'bottom', 'left'] as const,
+    defaultValue: 'right',
+    label: 'Direction',
+    description: 'Edge from which the drawer slides.',
+  });
+  const [size] = useSelect('size', {
+    options: ['sm', 'md', 'lg', 'xl', 'full'] as const,
+    defaultValue: 'md',
+    label: 'Size',
+    description: 'Width (left/right) or height (top/bottom).',
+  });
+
+  return (
+    <Drawer direction={direction}>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open from {direction}</Button>
+      </DrawerTrigger>
+      <DrawerContent direction={direction} size={size}>
+        <DrawerHeader>
+          <DrawerTitle>Direction: {direction}</DrawerTitle>
+          <DrawerDescription>
+            Size presets adapt: horizontal directions size width, vertical
+            ones size height.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="p-4 text-sm">size = {size}</div>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button variant="outline">Close</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export const CustomWidth = () => (
+  <Drawer direction="right">
+    <DrawerTrigger asChild>
+      <Button variant="outline">Open with width=720px</Button>
+    </DrawerTrigger>
+    <DrawerContent direction="right" width="720px">
+      <DrawerHeader>
+        <DrawerTitle>Custom width</DrawerTitle>
+        <DrawerDescription>
+          Explicit <code>width</code> overrides the <code>size</code> preset.
+        </DrawerDescription>
+      </DrawerHeader>
+      <div className="p-4 text-sm">Width is exactly 720px.</div>
+      <DrawerFooter>
+        <DrawerClose asChild>
+          <Button variant="outline">Close</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
+
+export const NarrowViewport = () => (
+  <div className="space-y-3">
+    <p className="text-sm text-muted-foreground">
+      Resize the browser narrower than the size preset (e.g. &lt; 480px for
+      <code> md</code>) to see <code>min(100vw, …)</code> clamp the drawer
+      to the viewport. This is the regression we now guard against.
+    </p>
+    <div
+      style={{ width: 360 }}
+      className="rounded border border-dashed p-4"
+    >
+      <Drawer direction="right">
+        <DrawerTrigger asChild>
+          <Button variant="outline">Open in 360px container</Button>
+        </DrawerTrigger>
+        <DrawerContent direction="right" size="md">
+          <DrawerHeader>
+            <DrawerTitle>Narrow viewport</DrawerTitle>
+            <DrawerDescription>
+              Drawer is portaled to the body — viewport width still applies.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 text-sm">
+            min(100vw, 480px) keeps the drawer within bounds on tiny screens.
+          </div>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button variant="outline">Close</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  </div>
+);

package/src/components/overlay/drawer/index.tsx

@@ -37,19 +37,66 @@ const DrawerOverlay = React.forwardRef<
 ))
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 
+/** Drawer size preset. Maps to width for left/right, height for top/bottom. */
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'
+
+const horizontalSizePresets: Record<DrawerSize, string> = {
+  sm: 'min(100vw, 360px)',
+  md: 'min(100vw, 480px)',
+  lg: 'min(100vw, 640px)',
+  xl: 'min(100vw, 800px)',
+  full: '100vw',
+};
+
+const verticalSizePresets: Record<DrawerSize, string> = {
+  sm: 'min(100vh, 240px)',
+  md: 'min(100vh, 360px)',
+  lg: 'min(100vh, 480px)',
+  xl: 'min(100vh, 640px)',
+  full: '100vh',
+};
+
+// Anchor + border + radius only — no width/height bake-in. Length is
+// applied via inline `style` from props so vaul's first
+// `getBoundingClientRect()` measurement matches the final layout
+// (avoids the inset.left=mismatch bug when className-based defaults
+// leak into the first paint).
 const directionStyles = {
-  bottom: "inset-x-0 bottom-0 mt-24 h-auto rounded-t-lg border-t",
-  top: "inset-x-0 top-0 mb-24 h-auto rounded-b-lg border-b",
-  right: "inset-y-0 right-0 h-full w-[280px] border-l",
-  left: "inset-y-0 left-0 h-full w-[280px] border-r",
+  bottom: "inset-x-0 bottom-0 mt-24 rounded-t-lg border-t",
+  top: "inset-x-0 top-0 mb-24 rounded-b-lg border-b",
+  right: "inset-y-0 right-0 h-full border-l",
+  left: "inset-y-0 left-0 h-full border-r",
 } as const;
 
+const toCssLength = (value: string | number | undefined): string | undefined => {
+  if (value == null) return undefined;
+  return typeof value === 'number' ? `${value}px` : value;
+};
+
+export interface DrawerContentProps
+  extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> {
+  direction?: 'bottom' | 'right' | 'left' | 'top';
+  /** Preset size (default `'md'`). Width for horizontal, height for vertical. */
+  size?: DrawerSize;
+  /** CSS length for width — applies to left/right drawers. Overrides `size`. */
+  width?: string | number;
+  /** CSS length for height — applies to top/bottom drawers. Overrides `size`. */
+  height?: string | number;
+}
+
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & { direction?: 'bottom' | 'right' | 'left' | 'top' }
->(({ className, children, direction = 'bottom', style, ...props }, ref) => {
+  DrawerContentProps
+>(({ className, children, direction = 'bottom', size = 'md', width, height, style, ...props }, ref) => {
   const isVertical = direction === 'bottom' || direction === 'top';
 
+  const resolvedWidth = !isVertical
+    ? (toCssLength(width) ?? horizontalSizePresets[size])
+    : undefined;
+  const resolvedHeight = isVertical
+    ? (toCssLength(height) ?? verticalSizePresets[size])
+    : undefined;
+
   return (
     <DrawerPortal>
       <DrawerOverlay />
@@ -62,6 +109,8 @@ const DrawerContent = React.forwardRef<
         )}
         style={{
           transition: 'transform 300ms cubic-bezier(0.32, 0.72, 0, 1)',
+          ...(resolvedWidth ? { width: resolvedWidth } : {}),
+          ...(resolvedHeight ? { height: resolvedHeight } : {}),
           ...style,
         }}
         {...props}

package/src/components/overlay/responsive-sheet/index.tsx

@@ -83,7 +83,8 @@ function ResponsiveSheetContent({ children, className }: ResponsiveSheetContentP
   const { isMobile } = React.useContext(ResponsiveSheetContext);
 
   if (isMobile) {
-    return <DrawerContent className={className}>{children}</DrawerContent>;
+    // Preserve legacy content-hugging behavior; new Drawer default is `md`.
+    return <DrawerContent className={className} height="auto">{children}</DrawerContent>;
   }
 
   return <DialogContent className={className}>{children}</DialogContent>;