@djangocfg/ui-core 2.1.381 → 2.1.383

package/src/components/overlay/hover-card/hover-card.story.tsx

@@ -1,102 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '.';
-import { Avatar, AvatarFallback, AvatarImage } from '../../data/avatar';
-import { Button } from '../../forms/button';
-import { CalendarDays } from 'lucide-react';
-
-export default defineStory({
-  title: 'Core/Hover Card',
-  component: HoverCard,
-  description: 'Card that appears on hover, showing additional information.',
-});
-
-export const Default = () => (
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <Button variant="link">@nextjs</Button>
-    </HoverCardTrigger>
-    <HoverCardContent className="w-80">
-      <div className="flex justify-between space-x-4">
-        <Avatar>
-          <AvatarImage src="https://github.com/vercel.png" />
-          <AvatarFallback>VC</AvatarFallback>
-        </Avatar>
-        <div className="space-y-1">
-          <h4 className="text-sm font-semibold">@nextjs</h4>
-          <p className="text-sm">
-            The React Framework – created and maintained by @vercel.
-          </p>
-          <div className="flex items-center pt-2">
-            <CalendarDays className="mr-2 h-4 w-4 opacity-70" />
-            <span className="text-xs text-muted-foreground">
-              Joined December 2021
-            </span>
-          </div>
-        </div>
-      </div>
-    </HoverCardContent>
-  </HoverCard>
-);
-
-export const UserProfile = () => (
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <Button variant="link" className="p-0">John Doe</Button>
-    </HoverCardTrigger>
-    <HoverCardContent className="w-80">
-      <div className="flex space-x-4">
-        <Avatar className="h-12 w-12">
-          <AvatarImage src="https://github.com/shadcn.png" />
-          <AvatarFallback>JD</AvatarFallback>
-        </Avatar>
-        <div className="space-y-1">
-          <h4 className="text-sm font-semibold">John Doe</h4>
-          <p className="text-sm text-muted-foreground">
-            Software Engineer at Acme Inc.
-          </p>
-          <div className="flex gap-4 pt-2 text-xs text-muted-foreground">
-            <span><strong>128</strong> Following</span>
-            <span><strong>512</strong> Followers</span>
-          </div>
-        </div>
-      </div>
-    </HoverCardContent>
-  </HoverCard>
-);
-
-export const Simple = () => (
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <span className="text-sm underline cursor-pointer">What is this?</span>
-    </HoverCardTrigger>
-    <HoverCardContent>
-      <p className="text-sm">
-        This is a hover card that appears when you hover over the trigger.
-      </p>
-    </HoverCardContent>
-  </HoverCard>
-);
-
-export const WithStats = () => (
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <Button variant="outline" size="sm">View Project</Button>
-    </HoverCardTrigger>
-    <HoverCardContent className="w-64">
-      <div className="space-y-2">
-        <h4 className="text-sm font-semibold">My Awesome Project</h4>
-        <p className="text-sm text-muted-foreground">
-          A React component library.
-        </p>
-        <div className="flex gap-4 pt-2 text-xs">
-          <span className="flex items-center gap-1">
-            <span className="h-2 w-2 rounded-full bg-yellow-500" />
-            TypeScript
-          </span>
-          <span>⭐ 1.2k</span>
-          <span>🍴 234</span>
-        </div>
-      </div>
-    </HoverCardContent>
-  </HoverCard>
-);

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

@@ -1,127 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { Popover, PopoverContent, PopoverTrigger } from '.';
-import { Button } from '../../forms/button';
-import { Input } from '../../forms/input';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/Popover',
-  component: Popover,
-  description: 'Floating content panel triggered by a button.',
-});
-
-export const Interactive = () => {
-  const [side] = useSelect('side', {
-    options: ['top', 'right', 'bottom', 'left'] as const,
-    defaultValue: 'bottom',
-    label: 'Side',
-    description: 'Popover position',
-  });
-
-  const [align] = useSelect('align', {
-    options: ['start', 'center', 'end'] as const,
-    defaultValue: 'center',
-    label: 'Align',
-    description: 'Popover alignment',
-  });
-
-  return (
-    <div className="flex justify-center p-20">
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline">Open popover</Button>
-        </PopoverTrigger>
-        <PopoverContent side={side} align={align} className="w-80">
-          <div className="grid gap-4">
-            <div className="space-y-2">
-              <h4 className="font-medium leading-none">Dimensions</h4>
-              <p className="text-sm text-muted-foreground">
-                Set the dimensions for the layer.
-              </p>
-            </div>
-            <div className="grid gap-2">
-              <div className="grid grid-cols-3 items-center gap-4">
-                <Label htmlFor="width">Width</Label>
-                <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
-              </div>
-              <div className="grid grid-cols-3 items-center gap-4">
-                <Label htmlFor="height">Height</Label>
-                <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
-              </div>
-            </div>
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-};
-
-export const Default = () => (
-  <Popover>
-    <PopoverTrigger asChild>
-      <Button variant="outline">Open popover</Button>
-    </PopoverTrigger>
-    <PopoverContent className="w-80">
-      <div className="grid gap-4">
-        <div className="space-y-2">
-          <h4 className="font-medium leading-none">Dimensions</h4>
-          <p className="text-sm text-muted-foreground">
-            Set the dimensions for the layer.
-          </p>
-        </div>
-        <div className="grid gap-2">
-          <div className="grid grid-cols-3 items-center gap-4">
-            <Label htmlFor="width">Width</Label>
-            <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
-          </div>
-          <div className="grid grid-cols-3 items-center gap-4">
-            <Label htmlFor="maxWidth">Max. width</Label>
-            <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
-          </div>
-        </div>
-      </div>
-    </PopoverContent>
-  </Popover>
-);
-
-export const WithForm = () => (
-  <Popover>
-    <PopoverTrigger asChild>
-      <Button>Update settings</Button>
-    </PopoverTrigger>
-    <PopoverContent className="w-80">
-      <div className="grid gap-4">
-        <div className="space-y-2">
-          <h4 className="font-medium leading-none">Settings</h4>
-          <p className="text-sm text-muted-foreground">
-            Configure your preferences.
-          </p>
-        </div>
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="name">Display Name</Label>
-            <Input id="name" placeholder="Enter name" />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="email">Email</Label>
-            <Input id="email" type="email" placeholder="Enter email" />
-          </div>
-          <Button className="w-full">Save</Button>
-        </div>
-      </div>
-    </PopoverContent>
-  </Popover>
-);
-
-export const Simple = () => (
-  <Popover>
-    <PopoverTrigger asChild>
-      <Button variant="outline" size="sm">Info</Button>
-    </PopoverTrigger>
-    <PopoverContent className="w-64">
-      <p className="text-sm">
-        This is a simple popover with just some text content.
-      </p>
-    </PopoverContent>
-  </Popover>
-);

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

@@ -1,117 +0,0 @@
-import { useState } from 'react';
-import { defineStory } from '@djangocfg/playground';
-import {
-  ResponsiveSheet,
-  ResponsiveSheetContent,
-  ResponsiveSheetHeader,
-  ResponsiveSheetTitle,
-  ResponsiveSheetDescription,
-  ResponsiveSheetFooter,
-} from '.';
-import { Button } from '../../forms/button';
-import { Input } from '../../forms/input';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/ResponsiveSheet',
-  component: ResponsiveSheet,
-  description: 'Dialog on desktop, Drawer on mobile.',
-});
-
-export const Default = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open Sheet</Button>
-      <ResponsiveSheet open={open} onOpenChange={setOpen}>
-        <ResponsiveSheetContent>
-          <ResponsiveSheetHeader>
-            <ResponsiveSheetTitle>Responsive Sheet</ResponsiveSheetTitle>
-            <ResponsiveSheetDescription>
-              This component shows as a Dialog on desktop and a Drawer on mobile.
-            </ResponsiveSheetDescription>
-          </ResponsiveSheetHeader>
-          <div className="p-4">
-            <p className="text-sm text-muted-foreground">
-              Resize your browser window to see the responsive behavior.
-            </p>
-          </div>
-          <ResponsiveSheetFooter>
-            <Button variant="outline" onClick={() => setOpen(false)}>
-              Cancel
-            </Button>
-            <Button onClick={() => setOpen(false)}>Continue</Button>
-          </ResponsiveSheetFooter>
-        </ResponsiveSheetContent>
-      </ResponsiveSheet>
-    </>
-  );
-};
-
-export const WithForm = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Edit Profile</Button>
-      <ResponsiveSheet open={open} onOpenChange={setOpen}>
-        <ResponsiveSheetContent className="sm:max-w-md">
-          <ResponsiveSheetHeader>
-            <ResponsiveSheetTitle>Edit Profile</ResponsiveSheetTitle>
-            <ResponsiveSheetDescription>
-              Make changes to your profile here. Click save when you're done.
-            </ResponsiveSheetDescription>
-          </ResponsiveSheetHeader>
-          <div className="space-y-4 p-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>
-          <ResponsiveSheetFooter>
-            <Button variant="outline" onClick={() => setOpen(false)}>
-              Cancel
-            </Button>
-            <Button onClick={() => setOpen(false)}>Save changes</Button>
-          </ResponsiveSheetFooter>
-        </ResponsiveSheetContent>
-      </ResponsiveSheet>
-    </>
-  );
-};
-
-export const Confirmation = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button variant="destructive" onClick={() => setOpen(true)}>
-        Delete Account
-      </Button>
-      <ResponsiveSheet open={open} onOpenChange={setOpen}>
-        <ResponsiveSheetContent>
-          <ResponsiveSheetHeader>
-            <ResponsiveSheetTitle>Are you sure?</ResponsiveSheetTitle>
-            <ResponsiveSheetDescription>
-              This action cannot be undone. This will permanently delete your
-              account and remove your data from our servers.
-            </ResponsiveSheetDescription>
-          </ResponsiveSheetHeader>
-          <ResponsiveSheetFooter>
-            <Button variant="outline" onClick={() => setOpen(false)}>
-              Cancel
-            </Button>
-            <Button variant="destructive" onClick={() => setOpen(false)}>
-              Delete Account
-            </Button>
-          </ResponsiveSheetFooter>
-        </ResponsiveSheetContent>
-      </ResponsiveSheet>
-    </>
-  );
-};

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

@@ -1,148 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-  SheetClose,
-} from '.';
-import { Button } from '../../forms/button';
-import { Input } from '../../forms/input';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/Sheet',
-  component: Sheet,
-  description: 'Slide-out panel from the edge of the screen.',
-});
-
-export const Interactive = () => {
-  const [side] = useSelect('side', {
-    options: ['top', 'right', 'bottom', 'left'] as const,
-    defaultValue: 'right',
-    label: 'Side',
-    description: 'Sheet position',
-  });
-
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline">Open Sheet</Button>
-      </SheetTrigger>
-      <SheetContent side={side}>
-        <SheetHeader>
-          <SheetTitle>Sheet Title</SheetTitle>
-          <SheetDescription>
-            This is a sheet that slides in from the {side}.
-          </SheetDescription>
-        </SheetHeader>
-        <div className="py-4">
-          <p>Sheet content goes here.</p>
-        </div>
-        <SheetFooter>
-          <SheetClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </SheetClose>
-          <Button>Save</Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-};
-
-export const Right = () => (
-  <Sheet>
-    <SheetTrigger asChild>
-      <Button variant="outline">Open Right</Button>
-    </SheetTrigger>
-    <SheetContent side="right">
-      <SheetHeader>
-        <SheetTitle>Edit Profile</SheetTitle>
-        <SheetDescription>
-          Make changes to your profile here.
-        </SheetDescription>
-      </SheetHeader>
-      <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" defaultValue="john@example.com" />
-        </div>
-      </div>
-      <SheetFooter>
-        <SheetClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </SheetClose>
-        <Button>Save changes</Button>
-      </SheetFooter>
-    </SheetContent>
-  </Sheet>
-);
-
-export const Left = () => (
-  <Sheet>
-    <SheetTrigger asChild>
-      <Button variant="outline">Open Left</Button>
-    </SheetTrigger>
-    <SheetContent side="left">
-      <SheetHeader>
-        <SheetTitle>Navigation</SheetTitle>
-      </SheetHeader>
-      <nav className="flex flex-col gap-2 py-4">
-        <Button variant="ghost" className="justify-start">Dashboard</Button>
-        <Button variant="ghost" className="justify-start">Projects</Button>
-        <Button variant="ghost" className="justify-start">Settings</Button>
-        <Button variant="ghost" className="justify-start">Help</Button>
-      </nav>
-    </SheetContent>
-  </Sheet>
-);
-
-export const Bottom = () => (
-  <Sheet>
-    <SheetTrigger asChild>
-      <Button variant="outline">Open Bottom</Button>
-    </SheetTrigger>
-    <SheetContent side="bottom">
-      <SheetHeader>
-        <SheetTitle>Quick Actions</SheetTitle>
-        <SheetDescription>
-          Choose an action to perform.
-        </SheetDescription>
-      </SheetHeader>
-      <div className="flex gap-2 py-4">
-        <Button className="flex-1">Share</Button>
-        <Button className="flex-1" variant="outline">Copy Link</Button>
-        <Button className="flex-1" variant="destructive">Delete</Button>
-      </div>
-    </SheetContent>
-  </Sheet>
-);
-
-export const Top = () => (
-  <Sheet>
-    <SheetTrigger asChild>
-      <Button variant="outline">Open Top</Button>
-    </SheetTrigger>
-    <SheetContent side="top">
-      <SheetHeader>
-        <SheetTitle>Notification</SheetTitle>
-        <SheetDescription>
-          You have new updates available.
-        </SheetDescription>
-      </SheetHeader>
-      <div className="flex gap-2 py-4">
-        <Button>Update Now</Button>
-        <SheetClose asChild>
-          <Button variant="outline">Later</Button>
-        </SheetClose>
-      </div>
-    </SheetContent>
-  </Sheet>
-);

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

@@ -1,139 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '.';
-import { Button } from '../../forms/button';
-import { Plus, Settings, HelpCircle } from 'lucide-react';
-
-export default defineStory({
-  title: 'Core/Tooltip',
-  component: Tooltip,
-  description: 'Tooltip for showing additional information on hover.',
-});
-
-export const Interactive = () => {
-  const [side] = useSelect('side', {
-    options: ['top', 'right', 'bottom', 'left'] as const,
-    defaultValue: 'top',
-    label: 'Side',
-    description: 'Tooltip position',
-  });
-
-  return (
-    <div className="flex justify-center p-20">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="outline">Hover me</Button>
-          </TooltipTrigger>
-          <TooltipContent side={side}>
-            <p>This is a tooltip</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export const Default = () => (
-  <TooltipProvider>
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Hover me</Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Add to library</p>
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
-);
-
-export const Positions = () => (
-  <TooltipProvider>
-    <div className="flex gap-4 p-10">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="outline">Top</Button>
-        </TooltipTrigger>
-        <TooltipContent side="top">
-          <p>Top tooltip</p>
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="outline">Right</Button>
-        </TooltipTrigger>
-        <TooltipContent side="right">
-          <p>Right tooltip</p>
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="outline">Bottom</Button>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">
-          <p>Bottom tooltip</p>
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="outline">Left</Button>
-        </TooltipTrigger>
-        <TooltipContent side="left">
-          <p>Left tooltip</p>
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  </TooltipProvider>
-);
-
-export const WithIcons = () => (
-  <TooltipProvider>
-    <div className="flex gap-2">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button size="icon" variant="outline">
-            <Plus className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Add new item</p>
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button size="icon" variant="outline">
-            <Settings className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Settings</p>
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button size="icon" variant="outline">
-            <HelpCircle className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Help & Support</p>
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  </TooltipProvider>
-);
-
-export const WithShortcut = () => (
-  <TooltipProvider>
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Save</Button>
-      </TooltipTrigger>
-      <TooltipContent className="flex items-center gap-2">
-        <span>Save document</span>
-        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
-          <span className="text-xs">⌘</span>S
-        </kbd>
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
-);