@djangocfg/ui-core 2.1.382 → 2.1.384

package/src/components/overlay/alert-dialog/alert-dialog.story.tsx

@@ -1,104 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from '.';
-import { Button } from '../../forms/button';
-
-export default defineStory({
-  title: 'Core/Alert Dialog',
-  component: AlertDialog,
-  description: 'Modal dialog for important confirmations.',
-});
-
-export const Default = () => (
-  <AlertDialog>
-    <AlertDialogTrigger asChild>
-      <Button variant="outline">Show Dialog</Button>
-    </AlertDialogTrigger>
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-        <AlertDialogDescription>
-          This action cannot be undone. This will permanently delete your
-          account and remove your data from our servers.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction>Continue</AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-);
-
-export const Destructive = () => (
-  <AlertDialog>
-    <AlertDialogTrigger asChild>
-      <Button variant="destructive">Delete Account</Button>
-    </AlertDialogTrigger>
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Delete Account</AlertDialogTitle>
-        <AlertDialogDescription>
-          Are you sure you want to delete your account? All of your data will be
-          permanently removed. This action cannot be undone.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-          Delete
-        </AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-);
-
-export const SaveChanges = () => (
-  <AlertDialog>
-    <AlertDialogTrigger asChild>
-      <Button>Leave Page</Button>
-    </AlertDialogTrigger>
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Unsaved Changes</AlertDialogTitle>
-        <AlertDialogDescription>
-          You have unsaved changes. Are you sure you want to leave? Your changes
-          will be lost.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel>Stay</AlertDialogCancel>
-        <AlertDialogAction>Leave</AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-);
-
-export const Logout = () => (
-  <AlertDialog>
-    <AlertDialogTrigger asChild>
-      <Button variant="ghost">Log Out</Button>
-    </AlertDialogTrigger>
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Log out</AlertDialogTitle>
-        <AlertDialogDescription>
-          Are you sure you want to log out of your account?
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction>Log Out</AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-);

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

@@ -1,212 +0,0 @@
-import { ArrowLeft, X } from 'lucide-react';
-import { defineStory } from '@djangocfg/playground';
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  DialogClose,
-} from '.';
-import { Button } from '../../forms/button';
-import { Input } from '../../forms/input';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/Dialog',
-  component: Dialog,
-  description: 'Modal dialog for focused interactions.',
-});
-
-export const Default = () => (
-  <Dialog>
-    <DialogTrigger asChild>
-      <Button variant="outline">Open Dialog</Button>
-    </DialogTrigger>
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>Dialog Title</DialogTitle>
-        <DialogDescription>
-          This is a dialog description. It explains what this dialog is about.
-        </DialogDescription>
-      </DialogHeader>
-      <div className="py-4">
-        <p>Dialog content goes here.</p>
-      </div>
-      <DialogFooter>
-        <DialogClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DialogClose>
-        <Button>Confirm</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-);
-
-export const EditProfile = () => (
-  <Dialog>
-    <DialogTrigger asChild>
-      <Button>Edit Profile</Button>
-    </DialogTrigger>
-    <DialogContent className="sm:max-w-md">
-      <DialogHeader>
-        <DialogTitle>Edit Profile</DialogTitle>
-        <DialogDescription>
-          Make changes to your profile here. Click save when you're done.
-        </DialogDescription>
-      </DialogHeader>
-      <div className="space-y-4 py-4">
-        <div className="space-y-2">
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="John Doe" />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" defaultValue="john@example.com" />
-        </div>
-      </div>
-      <DialogFooter>
-        <DialogClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DialogClose>
-        <Button>Save Changes</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-);
-
-export const Confirmation = () => (
-  <Dialog>
-    <DialogTrigger asChild>
-      <Button variant="destructive">Delete Account</Button>
-    </DialogTrigger>
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>Are you sure?</DialogTitle>
-        <DialogDescription>
-          This action cannot be undone. This will permanently delete your account
-          and remove all your data from our servers.
-        </DialogDescription>
-      </DialogHeader>
-      <DialogFooter>
-        <DialogClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DialogClose>
-        <Button variant="destructive">Delete Account</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-);
-
-export const Fullscreen = () => (
-  <Dialog>
-    <DialogTrigger asChild>
-      <Button variant="outline">Open fullscreen dialog</Button>
-    </DialogTrigger>
-    <DialogContent fullscreen>
-      <div className="mx-auto flex h-full w-full max-w-3xl flex-col px-4 py-10 sm:px-6 lg:px-8">
-        <DialogTitle className="text-2xl font-semibold tracking-tight">
-          Fullscreen layout
-        </DialogTitle>
-        <DialogDescription className="mt-1 text-muted-foreground">
-          `fullscreen` removes the centred-card chrome and stretches the content to
-          the viewport. Build your own header / footer inside.
-        </DialogDescription>
-        <div className="mt-6 flex-1 rounded-xl border border-dashed border-border/60 bg-muted/30 p-6 text-sm text-muted-foreground">
-          Slot for a custom layout — gallery, onboarding, command palette, etc.
-        </div>
-      </div>
-    </DialogContent>
-  </Dialog>
-);
-
-export const CustomCloseButton = () => (
-  <Dialog>
-    <DialogTrigger asChild>
-      <Button variant="outline">Open with pill close</Button>
-    </DialogTrigger>
-    <DialogContent
-      fullscreen
-      closeButton={
-        <DialogClose
-          aria-label="Close"
-          className="absolute right-4 top-4 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-border/60 bg-background/90 text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground"
-        >
-          <X className="h-4 w-4" />
-        </DialogClose>
-      }
-    >
-      <div className="mx-auto flex h-full w-full max-w-2xl flex-col px-4 py-10">
-        <DialogTitle>Custom close affordance</DialogTitle>
-        <DialogDescription className="mt-1 text-muted-foreground">
-          Pass `closeButton` to override the default Radix `X`. Pass `false` to
-          drop the affordance entirely.
-        </DialogDescription>
-      </div>
-    </DialogContent>
-  </Dialog>
-);
-
-export const NoCloseButton = () => (
-  <Dialog>
-    <DialogTrigger asChild>
-      <Button variant="outline">Modal step (no close)</Button>
-    </DialogTrigger>
-    <DialogContent closeButton={false}>
-      <DialogHeader>
-        <DialogTitle>Saving…</DialogTitle>
-        <DialogDescription>
-          The dialog has no close affordance — dismissal is driven by the action
-          buttons below or programmatically.
-        </DialogDescription>
-      </DialogHeader>
-      <DialogFooter>
-        <DialogClose asChild>
-          <Button variant="outline">
-            <ArrowLeft className="mr-1.5 h-3.5 w-3.5" />
-            Back
-          </Button>
-        </DialogClose>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-);
-
-export const LongContent = () => (
-  <Dialog>
-    <DialogTrigger asChild>
-      <Button variant="outline">Terms of Service</Button>
-    </DialogTrigger>
-    <DialogContent className="max-h-[80vh] overflow-y-auto">
-      <DialogHeader>
-        <DialogTitle>Terms of Service</DialogTitle>
-      </DialogHeader>
-      <div className="space-y-4 py-4 text-sm text-muted-foreground">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <p>
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
-          ut aliquip ex ea commodo consequat.
-        </p>
-        <p>
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur.
-        </p>
-        <p>
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-          deserunt mollit anim id est laborum.
-        </p>
-      </div>
-      <DialogFooter>
-        <DialogClose asChild>
-          <Button variant="outline">Decline</Button>
-        </DialogClose>
-        <Button>Accept</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-);

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

@@ -1,359 +0,0 @@
-import * as React from 'react';
-import { defineStory, useSelect } from '@djangocfg/playground';
-import {
-  Drawer,
-  DrawerTrigger,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerClose,
-  useDrawerSize,
-  type DrawerSize,
-} from '.';
-import { Button } from '../../forms/button';
-import { Input } from '../../forms/input';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/Drawer',
-  component: Drawer,
-  description: 'Mobile-friendly drawer that slides up from the bottom.',
-});
-
-export const Default = () => (
-  <Drawer>
-    <DrawerTrigger asChild>
-      <Button variant="outline">Open Drawer</Button>
-    </DrawerTrigger>
-    <DrawerContent>
-      <DrawerHeader>
-        <DrawerTitle>Drawer Title</DrawerTitle>
-        <DrawerDescription>
-          This is a description of the drawer content.
-        </DrawerDescription>
-      </DrawerHeader>
-      <div className="p-4">
-        <p>Drawer content goes here.</p>
-      </div>
-      <DrawerFooter>
-        <Button>Submit</Button>
-        <DrawerClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </DrawerContent>
-  </Drawer>
-);
-
-export const WithForm = () => (
-  <Drawer>
-    <DrawerTrigger asChild>
-      <Button>Edit Profile</Button>
-    </DrawerTrigger>
-    <DrawerContent>
-      <DrawerHeader>
-        <DrawerTitle>Edit Profile</DrawerTitle>
-        <DrawerDescription>
-          Make changes to your profile information.
-        </DrawerDescription>
-      </DrawerHeader>
-      <div className="p-4 space-y-4">
-        <div className="space-y-2">
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="John Doe" />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" defaultValue="john@example.com" />
-        </div>
-      </div>
-      <DrawerFooter>
-        <Button>Save Changes</Button>
-        <DrawerClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </DrawerContent>
-  </Drawer>
-);
-
-export const Confirmation = () => (
-  <Drawer>
-    <DrawerTrigger asChild>
-      <Button variant="destructive">Delete Account</Button>
-    </DrawerTrigger>
-    <DrawerContent>
-      <DrawerHeader>
-        <DrawerTitle>Are you sure?</DrawerTitle>
-        <DrawerDescription>
-          This action cannot be undone. Your account and all associated data will be permanently deleted.
-        </DrawerDescription>
-      </DrawerHeader>
-      <DrawerFooter>
-        <Button variant="destructive">Yes, Delete My Account</Button>
-        <DrawerClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </DrawerContent>
-  </Drawer>
-);
-
-export const ActionSheet = () => (
-  <Drawer>
-    <DrawerTrigger asChild>
-      <Button variant="outline">Share</Button>
-    </DrawerTrigger>
-    <DrawerContent>
-      <DrawerHeader>
-        <DrawerTitle>Share this item</DrawerTitle>
-      </DrawerHeader>
-      <div className="p-4 space-y-2">
-        <Button variant="ghost" className="w-full justify-start">
-          Copy Link
-        </Button>
-        <Button variant="ghost" className="w-full justify-start">
-          Share to Twitter
-        </Button>
-        <Button variant="ghost" className="w-full justify-start">
-          Share to Facebook
-        </Button>
-        <Button variant="ghost" className="w-full justify-start">
-          Send via Email
-        </Button>
-      </div>
-      <DrawerFooter>
-        <DrawerClose asChild>
-          <Button variant="outline" className="w-full">Cancel</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </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 Resizable = () => {
-  const [size, setSize] = React.useState<number | null>(null);
-  return (
-    <div className="space-y-3">
-      <p className="text-sm text-muted-foreground">
-        Drag the inner edge to resize. Disabled on mobile (&lt; 768px) by
-        default — pass <code>resizableOnDesktopOnly={'{false}'}</code> to allow
-        on touch.
-      </p>
-      <Drawer direction="right">
-        <DrawerTrigger asChild>
-          <Button variant="outline">Open resizable drawer</Button>
-        </DrawerTrigger>
-        <DrawerContent
-          direction="right"
-          size="md"
-          resizable
-          minSize={320}
-          maxSize={900}
-          onSizeChange={setSize}
-        >
-          <DrawerHeader>
-            <DrawerTitle>Resizable</DrawerTitle>
-            <DrawerDescription>
-              Current width: {size != null ? `${Math.round(size)}px` : 'preset (480px)'}
-            </DrawerDescription>
-          </DrawerHeader>
-          <div className="p-4 text-sm">Drag the left edge to resize.</div>
-          <DrawerFooter>
-            <DrawerClose asChild>
-              <Button variant="outline">Close</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    </div>
-  );
-};
-
-export const ResizablePersisted = () => {
-  const drawer = useDrawerSize('story-demo', { axis: 'width', min: 320, max: 900 });
-  return (
-    <div className="space-y-3">
-      <p className="text-sm text-muted-foreground">
-        Persistence is wired via the <code>useDrawerSize(key)</code> hook —
-        the drawer itself is just a controlled component. Reload the page and
-        reopen, the last width is restored from <code>localStorage</code>.
-      </p>
-      <div className="flex gap-2">
-        <Drawer direction="right">
-          <DrawerTrigger asChild>
-            <Button variant="outline">Open persisted drawer</Button>
-          </DrawerTrigger>
-          <DrawerContent
-            direction="right"
-            size="md"
-            resizable
-            minSize={320}
-            maxSize={900}
-            resizedSize={drawer.size}
-            onSizeChange={drawer.setSize}
-          >
-            <DrawerHeader>
-              <DrawerTitle>Resizable + persisted</DrawerTitle>
-              <DrawerDescription>
-                Stored in <code>djangocfg.ui.state</code>. Current:{' '}
-                {drawer.size != null ? `${Math.round(drawer.size)}px` : 'preset (480px)'}
-              </DrawerDescription>
-            </DrawerHeader>
-            <div className="p-4 text-sm">Drag the left edge to resize.</div>
-            <DrawerFooter>
-              <DrawerClose asChild>
-                <Button variant="outline">Close</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </DrawerContent>
-        </Drawer>
-        <Button variant="ghost" onClick={drawer.reset}>Reset stored size</Button>
-      </div>
-    </div>
-  );
-};
-
-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>
-);