@djangocfg/ui-core 2.1.381 → 2.1.383

package/src/components/layout/separator/separator.story.tsx

@@ -1,69 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import { Separator } from '.';
-
-export default defineStory({
-  title: 'Core/Separator',
-  component: Separator,
-  description: 'Visual divider between content sections.',
-});
-
-export const Default = () => (
-  <div>
-    <div className="space-y-1">
-      <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-      <p className="text-sm text-muted-foreground">
-        An open-source UI component library.
-      </p>
-    </div>
-    <Separator className="my-4" />
-    <div className="flex h-5 items-center space-x-4 text-sm">
-      <div>Blog</div>
-      <Separator orientation="vertical" />
-      <div>Docs</div>
-      <Separator orientation="vertical" />
-      <div>Source</div>
-    </div>
-  </div>
-);
-
-export const Horizontal = () => (
-  <div className="max-w-md">
-    <p className="text-sm text-muted-foreground">First section</p>
-    <Separator className="my-4" />
-    <p className="text-sm text-muted-foreground">Second section</p>
-    <Separator className="my-4" />
-    <p className="text-sm text-muted-foreground">Third section</p>
-  </div>
-);
-
-export const Vertical = () => (
-  <div className="flex h-5 items-center space-x-4 text-sm">
-    <div>Home</div>
-    <Separator orientation="vertical" />
-    <div>About</div>
-    <Separator orientation="vertical" />
-    <div>Products</div>
-    <Separator orientation="vertical" />
-    <div>Contact</div>
-  </div>
-);
-
-export const InCard = () => (
-  <div className="rounded-lg border p-4 max-w-sm">
-    <h4 className="font-medium">Card Title</h4>
-    <Separator className="my-3" />
-    <p className="text-sm text-muted-foreground">
-      This is some card content below the separator.
-    </p>
-  </div>
-);
-
-export const WithLabels = () => (
-  <div className="max-w-md">
-    <div className="flex items-center gap-4">
-      <Separator className="flex-1" />
-      <span className="text-sm text-muted-foreground">OR</span>
-      <Separator className="flex-1" />
-    </div>
-  </div>
-);

package/src/components/layout/skeleton/skeleton.story.tsx

@@ -1,101 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import { Skeleton } from '.';
-
-export default defineStory({
-  title: 'Core/Skeleton',
-  component: Skeleton,
-  description: 'Loading placeholder for content.',
-});
-
-export const Default = () => (
-  <div className="flex items-center space-x-4">
-    <Skeleton className="h-12 w-12 rounded-full" />
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-[250px]" />
-      <Skeleton className="h-4 w-[200px]" />
-    </div>
-  </div>
-);
-
-export const Card = () => (
-  <div className="flex flex-col space-y-3">
-    <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-[250px]" />
-      <Skeleton className="h-4 w-[200px]" />
-    </div>
-  </div>
-);
-
-export const Table = () => (
-  <div className="space-y-2">
-    <div className="flex gap-4">
-      <Skeleton className="h-8 w-[100px]" />
-      <Skeleton className="h-8 w-[150px]" />
-      <Skeleton className="h-8 w-[100px]" />
-      <Skeleton className="h-8 w-[80px]" />
-    </div>
-    {[...Array(5)].map((_, i) => (
-      <div key={i} className="flex gap-4">
-        <Skeleton className="h-6 w-[100px]" />
-        <Skeleton className="h-6 w-[150px]" />
-        <Skeleton className="h-6 w-[100px]" />
-        <Skeleton className="h-6 w-[80px]" />
-      </div>
-    ))}
-  </div>
-);
-
-export const Profile = () => (
-  <div className="flex items-start space-x-4">
-    <Skeleton className="h-16 w-16 rounded-full" />
-    <div className="space-y-2">
-      <Skeleton className="h-5 w-[180px]" />
-      <Skeleton className="h-4 w-[120px]" />
-      <Skeleton className="h-4 w-[220px]" />
-    </div>
-  </div>
-);
-
-export const Article = () => (
-  <div className="space-y-4 max-w-lg">
-    <Skeleton className="h-8 w-3/4" />
-    <Skeleton className="h-4 w-1/4" />
-    <Skeleton className="h-[200px] w-full rounded-lg" />
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-full" />
-      <Skeleton className="h-4 w-full" />
-      <Skeleton className="h-4 w-3/4" />
-    </div>
-  </div>
-);
-
-export const Grid = () => (
-  <div className="grid grid-cols-3 gap-4">
-    {[...Array(6)].map((_, i) => (
-      <div key={i} className="space-y-2">
-        <Skeleton className="h-[120px] w-full rounded-lg" />
-        <Skeleton className="h-4 w-3/4" />
-        <Skeleton className="h-4 w-1/2" />
-      </div>
-    ))}
-  </div>
-);
-
-export const Form = () => (
-  <div className="space-y-4 max-w-sm">
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-20" />
-      <Skeleton className="h-10 w-full" />
-    </div>
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-20" />
-      <Skeleton className="h-10 w-full" />
-    </div>
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-20" />
-      <Skeleton className="h-24 w-full" />
-    </div>
-    <Skeleton className="h-10 w-24" />
-  </div>
-);

package/src/components/navigation/accordion/accordion.story.tsx

@@ -1,110 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '.';
-
-export default defineStory({
-  title: 'Core/Accordion',
-  component: Accordion,
-  description: 'Collapsible content sections.',
-});
-
-export const Default = () => (
-  <Accordion type="single" collapsible className="w-full max-w-md">
-    <AccordionItem value="item-1">
-      <AccordionTrigger>Is it accessible?</AccordionTrigger>
-      <AccordionContent>
-        Yes. It adheres to the WAI-ARIA design pattern.
-      </AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="item-2">
-      <AccordionTrigger>Is it styled?</AccordionTrigger>
-      <AccordionContent>
-        Yes. It comes with default styles that matches the other components.
-      </AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="item-3">
-      <AccordionTrigger>Is it animated?</AccordionTrigger>
-      <AccordionContent>
-        Yes. It's animated by default, but you can disable it if you prefer.
-      </AccordionContent>
-    </AccordionItem>
-  </Accordion>
-);
-
-export const Multiple = () => (
-  <Accordion type="multiple" className="w-full max-w-md">
-    <AccordionItem value="item-1">
-      <AccordionTrigger>Section 1</AccordionTrigger>
-      <AccordionContent>
-        Content for section 1. Multiple sections can be open at the same time.
-      </AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="item-2">
-      <AccordionTrigger>Section 2</AccordionTrigger>
-      <AccordionContent>
-        Content for section 2.
-      </AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="item-3">
-      <AccordionTrigger>Section 3</AccordionTrigger>
-      <AccordionContent>
-        Content for section 3.
-      </AccordionContent>
-    </AccordionItem>
-  </Accordion>
-);
-
-export const FAQ = () => (
-  <Accordion type="single" collapsible className="w-full max-w-lg">
-    <AccordionItem value="faq-1">
-      <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>
-      <AccordionContent>
-        We accept all major credit cards (Visa, MasterCard, American Express),
-        PayPal, and bank transfers. All payments are processed securely.
-      </AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="faq-2">
-      <AccordionTrigger>How long does shipping take?</AccordionTrigger>
-      <AccordionContent>
-        Standard shipping takes 5-7 business days. Express shipping is available
-        for 2-3 business day delivery. International shipping times vary by location.
-      </AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="faq-3">
-      <AccordionTrigger>What is your return policy?</AccordionTrigger>
-      <AccordionContent>
-        We offer a 30-day return policy for all unused items in original packaging.
-        Please contact our support team to initiate a return.
-      </AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="faq-4">
-      <AccordionTrigger>Do you offer international shipping?</AccordionTrigger>
-      <AccordionContent>
-        Yes, we ship to over 100 countries worldwide. Shipping costs and delivery
-        times vary by destination. You can see exact costs at checkout.
-      </AccordionContent>
-    </AccordionItem>
-  </Accordion>
-);
-
-export const WithDefaultOpen = () => (
-  <Accordion type="single" defaultValue="item-2" className="w-full max-w-md">
-    <AccordionItem value="item-1">
-      <AccordionTrigger>First Item</AccordionTrigger>
-      <AccordionContent>
-        This item is closed by default.
-      </AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="item-2">
-      <AccordionTrigger>Second Item (Default Open)</AccordionTrigger>
-      <AccordionContent>
-        This item is open by default.
-      </AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="item-3">
-      <AccordionTrigger>Third Item</AccordionTrigger>
-      <AccordionContent>
-        This item is also closed by default.
-      </AccordionContent>
-    </AccordionItem>
-  </Accordion>
-);

package/src/components/navigation/collapsible/collapsible.story.tsx

@@ -1,133 +0,0 @@
-import { useState } from 'react';
-import { defineStory } from '@djangocfg/playground';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '.';
-import { Button } from '../../forms/button';
-import { ChevronsUpDown } from 'lucide-react';
-
-export default defineStory({
-  title: 'Core/Collapsible',
-  component: Collapsible,
-  description: 'Expandable/collapsible content section.',
-});
-
-export const Default = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <Collapsible
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      className="w-[350px] space-y-2"
-    >
-      <div className="flex items-center justify-between space-x-4 px-4">
-        <h4 className="text-sm font-semibold">
-          @peduarte starred 3 repositories
-        </h4>
-        <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="sm" className="w-9 p-0">
-            <ChevronsUpDown className="h-4 w-4" />
-            <span className="sr-only">Toggle</span>
-          </Button>
-        </CollapsibleTrigger>
-      </div>
-      <div className="rounded-md border px-4 py-3 font-mono text-sm">
-        @radix-ui/primitives
-      </div>
-      <CollapsibleContent className="space-y-2">
-        <div className="rounded-md border px-4 py-3 font-mono text-sm">
-          @radix-ui/colors
-        </div>
-        <div className="rounded-md border px-4 py-3 font-mono text-sm">
-          @stitches/react
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};
-
-export const OpenByDefault = () => {
-  const [isOpen, setIsOpen] = useState(true);
-
-  return (
-    <Collapsible
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      className="w-[350px] space-y-2"
-    >
-      <div className="flex items-center justify-between space-x-4 px-4">
-        <h4 className="text-sm font-semibold">Notifications</h4>
-        <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="sm">
-            {isOpen ? 'Hide' : 'Show'}
-          </Button>
-        </CollapsibleTrigger>
-      </div>
-      <CollapsibleContent className="space-y-2">
-        <div className="rounded-md border px-4 py-3 text-sm">
-          You have 3 new notifications
-        </div>
-        <div className="rounded-md border px-4 py-3 text-sm">
-          Your order has been shipped
-        </div>
-        <div className="rounded-md border px-4 py-3 text-sm">
-          New comment on your post
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};
-
-export const Simple = () => (
-  <Collapsible className="w-[350px]">
-    <CollapsibleTrigger asChild>
-      <Button variant="outline" className="w-full justify-between">
-        Can I use this in my project?
-        <ChevronsUpDown className="h-4 w-4" />
-      </Button>
-    </CollapsibleTrigger>
-    <CollapsibleContent className="pt-2">
-      <p className="text-sm text-muted-foreground px-1">
-        Yes! This component is free to use in your personal and commercial projects.
-        No attribution required.
-      </p>
-    </CollapsibleContent>
-  </Collapsible>
-);
-
-export const Multiple = () => (
-  <div className="w-[350px] space-y-2">
-    <Collapsible>
-      <CollapsibleTrigger asChild>
-        <Button variant="ghost" className="w-full justify-between">
-          Section 1
-          <ChevronsUpDown className="h-4 w-4" />
-        </Button>
-      </CollapsibleTrigger>
-      <CollapsibleContent className="px-4 py-2">
-        Content for section 1
-      </CollapsibleContent>
-    </Collapsible>
-    <Collapsible>
-      <CollapsibleTrigger asChild>
-        <Button variant="ghost" className="w-full justify-between">
-          Section 2
-          <ChevronsUpDown className="h-4 w-4" />
-        </Button>
-      </CollapsibleTrigger>
-      <CollapsibleContent className="px-4 py-2">
-        Content for section 2
-      </CollapsibleContent>
-    </Collapsible>
-    <Collapsible>
-      <CollapsibleTrigger asChild>
-        <Button variant="ghost" className="w-full justify-between">
-          Section 3
-          <ChevronsUpDown className="h-4 w-4" />
-        </Button>
-      </CollapsibleTrigger>
-      <CollapsibleContent className="px-4 py-2">
-        Content for section 3
-      </CollapsibleContent>
-    </Collapsible>
-  </div>
-);

package/src/components/navigation/command/command.story.tsx

@@ -1,121 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from '.';
-import { useState } from 'react';
-import { Button } from '../../forms/button';
-import { Calendar, Smile, Calculator, User, CreditCard, Settings } from 'lucide-react';
-
-export default defineStory({
-  title: 'Core/Command',
-  component: Command,
-  description: 'Command palette for search and quick actions.',
-});
-
-export const Default = () => (
-  <Command className="rounded-lg border shadow-md max-w-md">
-    <CommandInput placeholder="Type a command or search..." />
-    <CommandList>
-      <CommandEmpty>No results found.</CommandEmpty>
-      <CommandGroup heading="Suggestions">
-        <CommandItem>
-          <Calendar className="mr-2 h-4 w-4" />
-          <span>Calendar</span>
-        </CommandItem>
-        <CommandItem>
-          <Smile className="mr-2 h-4 w-4" />
-          <span>Search Emoji</span>
-        </CommandItem>
-        <CommandItem>
-          <Calculator className="mr-2 h-4 w-4" />
-          <span>Calculator</span>
-        </CommandItem>
-      </CommandGroup>
-      <CommandSeparator />
-      <CommandGroup heading="Settings">
-        <CommandItem>
-          <User className="mr-2 h-4 w-4" />
-          <span>Profile</span>
-          <CommandShortcut>⌘P</CommandShortcut>
-        </CommandItem>
-        <CommandItem>
-          <CreditCard className="mr-2 h-4 w-4" />
-          <span>Billing</span>
-          <CommandShortcut>⌘B</CommandShortcut>
-        </CommandItem>
-        <CommandItem>
-          <Settings className="mr-2 h-4 w-4" />
-          <span>Settings</span>
-          <CommandShortcut>⌘S</CommandShortcut>
-        </CommandItem>
-      </CommandGroup>
-    </CommandList>
-  </Command>
-);
-
-export const Dialog = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>
-        Open Command Palette
-      </Button>
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem onSelect={() => setOpen(false)}>
-              <Calendar className="mr-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandItem>
-            <CommandItem onSelect={() => setOpen(false)}>
-              <Smile className="mr-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandItem>
-            <CommandItem onSelect={() => setOpen(false)}>
-              <Calculator className="mr-2 h-4 w-4" />
-              <span>Calculator</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading="Settings">
-            <CommandItem onSelect={() => setOpen(false)}>
-              <User className="mr-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandShortcut>⌘P</CommandShortcut>
-            </CommandItem>
-            <CommandItem onSelect={() => setOpen(false)}>
-              <Settings className="mr-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandShortcut>⌘S</CommandShortcut>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
-    </>
-  );
-};
-
-export const Simple = () => (
-  <Command className="rounded-lg border max-w-sm">
-    <CommandInput placeholder="Search..." />
-    <CommandList>
-      <CommandEmpty>No results.</CommandEmpty>
-      <CommandGroup>
-        <CommandItem>Item 1</CommandItem>
-        <CommandItem>Item 2</CommandItem>
-        <CommandItem>Item 3</CommandItem>
-      </CommandGroup>
-    </CommandList>
-  </Command>
-);

package/src/components/navigation/context-menu/context-menu.story.tsx

@@ -1,125 +0,0 @@
-import { useState } from 'react';
-import { defineStory } from '@djangocfg/playground';
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubTrigger,
-  ContextMenuSubContent,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-} from '.';
-
-export default defineStory({
-  title: 'Core/ContextMenu',
-  component: ContextMenu,
-  description: 'Right-click context menu.',
-});
-
-export const Default = () => (
-  <ContextMenu>
-    <ContextMenuTrigger className="flex h-40 w-80 items-center justify-center rounded-md border border-dashed text-sm">
-      Right click here
-    </ContextMenuTrigger>
-    <ContextMenuContent className="w-64">
-      <ContextMenuItem>
-        Back
-        <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-      </ContextMenuItem>
-      <ContextMenuItem disabled>
-        Forward
-        <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-      </ContextMenuItem>
-      <ContextMenuItem>
-        Reload
-        <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-      </ContextMenuItem>
-      <ContextMenuSeparator />
-      <ContextMenuItem>
-        Save Page As...
-        <ContextMenuShortcut>⌘S</ContextMenuShortcut>
-      </ContextMenuItem>
-      <ContextMenuItem>Print...</ContextMenuItem>
-    </ContextMenuContent>
-  </ContextMenu>
-);
-
-export const WithSubMenu = () => (
-  <ContextMenu>
-    <ContextMenuTrigger className="flex h-40 w-80 items-center justify-center rounded-md border border-dashed text-sm">
-      Right click here
-    </ContextMenuTrigger>
-    <ContextMenuContent className="w-64">
-      <ContextMenuItem>New Tab</ContextMenuItem>
-      <ContextMenuItem>New Window</ContextMenuItem>
-      <ContextMenuSeparator />
-      <ContextMenuSub>
-        <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
-        <ContextMenuSubContent className="w-48">
-          <ContextMenuItem>Save Page As...</ContextMenuItem>
-          <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-          <ContextMenuItem>Name Window...</ContextMenuItem>
-          <ContextMenuSeparator />
-          <ContextMenuItem>Developer Tools</ContextMenuItem>
-        </ContextMenuSubContent>
-      </ContextMenuSub>
-      <ContextMenuSeparator />
-      <ContextMenuItem>Settings</ContextMenuItem>
-    </ContextMenuContent>
-  </ContextMenu>
-);
-
-export const WithCheckboxes = () => {
-  const [showBookmarks, setShowBookmarks] = useState(true);
-  const [showFullUrls, setShowFullUrls] = useState(false);
-
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger className="flex h-40 w-80 items-center justify-center rounded-md border border-dashed text-sm">
-        Right click here
-      </ContextMenuTrigger>
-      <ContextMenuContent className="w-64">
-        <ContextMenuCheckboxItem
-          checked={showBookmarks}
-          onCheckedChange={setShowBookmarks}
-        >
-          Show Bookmarks Bar
-          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-        </ContextMenuCheckboxItem>
-        <ContextMenuCheckboxItem
-          checked={showFullUrls}
-          onCheckedChange={setShowFullUrls}
-        >
-          Show Full URLs
-        </ContextMenuCheckboxItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-};
-
-export const WithRadioGroup = () => {
-  const [person, setPerson] = useState('pedro');
-
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger className="flex h-40 w-80 items-center justify-center rounded-md border border-dashed text-sm">
-        Right click here
-      </ContextMenuTrigger>
-      <ContextMenuContent className="w-64">
-        <ContextMenuLabel>People</ContextMenuLabel>
-        <ContextMenuSeparator />
-        <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
-          <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
-          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-          <ContextMenuRadioItem value="jamie">Jamie Kyle</ContextMenuRadioItem>
-        </ContextMenuRadioGroup>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-};