@djangocfg/ui-core 2.1.382 → 2.1.384

package/src/components/forms/textarea/textarea.story.tsx

@@ -1,94 +0,0 @@
-import { defineStory, useBoolean, useNumber } from '@djangocfg/playground';
-import { Textarea } from '.';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/Textarea',
-  component: Textarea,
-  description: 'Multi-line text input.',
-});
-
-export const Interactive = () => {
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable textarea',
-  });
-
-  const [rows] = useNumber('rows', {
-    defaultValue: 4,
-    min: 2,
-    max: 10,
-    label: 'Rows',
-    description: 'Number of visible rows',
-  });
-
-  return (
-    <div className="max-w-md space-y-2">
-      <Label htmlFor="message">Message</Label>
-      <Textarea
-        id="message"
-        placeholder="Type your message here..."
-        disabled={disabled}
-        rows={rows}
-      />
-    </div>
-  );
-};
-
-export const Default = () => (
-  <div className="max-w-md">
-    <Textarea placeholder="Type your message here..." />
-  </div>
-);
-
-export const WithLabel = () => (
-  <div className="max-w-md space-y-2">
-    <Label htmlFor="bio">Bio</Label>
-    <Textarea id="bio" placeholder="Tell us about yourself..." />
-    <p className="text-sm text-muted-foreground">
-      Write a short introduction about yourself.
-    </p>
-  </div>
-);
-
-export const Disabled = () => (
-  <div className="max-w-md">
-    <Textarea placeholder="Disabled textarea" disabled />
-  </div>
-);
-
-export const WithDefaultValue = () => (
-  <div className="max-w-md space-y-2">
-    <Label htmlFor="notes">Notes</Label>
-    <Textarea
-      id="notes"
-      defaultValue="This is some default text that was pre-filled in the textarea."
-    />
-  </div>
-);
-
-export const Sizes = () => (
-  <div className="max-w-md space-y-4">
-    <div className="space-y-2">
-      <Label>Small (2 rows)</Label>
-      <Textarea placeholder="Small textarea" rows={2} />
-    </div>
-    <div className="space-y-2">
-      <Label>Medium (4 rows)</Label>
-      <Textarea placeholder="Medium textarea" rows={4} />
-    </div>
-    <div className="space-y-2">
-      <Label>Large (8 rows)</Label>
-      <Textarea placeholder="Large textarea" rows={8} />
-    </div>
-  </div>
-);
-
-export const WithCharacterCount = () => (
-  <div className="max-w-md space-y-2">
-    <Label htmlFor="limited">Description</Label>
-    <Textarea id="limited" placeholder="Enter description..." maxLength={200} />
-    <p className="text-sm text-muted-foreground text-right">0/200</p>
-  </div>
-);

package/src/components/layout/aspect-ratio/aspect-ratio.story.tsx

@@ -1,94 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { AspectRatio } from '.';
-
-export default defineStory({
-  title: 'Core/Aspect Ratio',
-  component: AspectRatio,
-  description: 'Container that maintains a specific aspect ratio.',
-});
-
-export const Interactive = () => {
-  const [ratio] = useSelect('ratio', {
-    options: ['16/9', '4/3', '1/1', '21/9'] as const,
-    defaultValue: '16/9',
-    label: 'Ratio',
-    description: 'Aspect ratio',
-  });
-
-  const ratioMap = {
-    '16/9': 16 / 9,
-    '4/3': 4 / 3,
-    '1/1': 1,
-    '21/9': 21 / 9,
-  };
-
-  return (
-    <div className="w-[450px]">
-      <AspectRatio ratio={ratioMap[ratio]} className="bg-muted rounded-lg overflow-hidden">
-        <img
-          src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=800"
-          alt="Car"
-          className="h-full w-full object-cover"
-        />
-      </AspectRatio>
-    </div>
-  );
-};
-
-export const Ratio16By9 = () => (
-  <div className="w-[450px]">
-    <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg overflow-hidden">
-      <img
-        src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=800"
-        alt="Car"
-        className="h-full w-full object-cover"
-      />
-    </AspectRatio>
-  </div>
-);
-
-export const Ratio4By3 = () => (
-  <div className="w-[300px]">
-    <AspectRatio ratio={4 / 3} className="bg-muted rounded-lg overflow-hidden">
-      <img
-        src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=600"
-        alt="Porsche"
-        className="h-full w-full object-cover"
-      />
-    </AspectRatio>
-  </div>
-);
-
-export const Square = () => (
-  <div className="w-[200px]">
-    <AspectRatio ratio={1} className="bg-muted rounded-lg overflow-hidden">
-      <img
-        src="https://images.unsplash.com/photo-1542362567-b07e54358753?w=400"
-        alt="BMW"
-        className="h-full w-full object-cover"
-      />
-    </AspectRatio>
-  </div>
-);
-
-export const WithPlaceholder = () => (
-  <div className="w-[400px]">
-    <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg flex items-center justify-center">
-      <span className="text-muted-foreground">No image available</span>
-    </AspectRatio>
-  </div>
-);
-
-export const Video = () => (
-  <div className="w-[560px]">
-    <AspectRatio ratio={16 / 9} className="bg-black rounded-lg overflow-hidden">
-      <iframe
-        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
-        title="Video"
-        className="h-full w-full"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen
-      />
-    </AspectRatio>
-  </div>
-);

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

@@ -1,105 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '.';
-import { Button } from '../../forms/button';
-import { Input } from '../../forms/input';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/Card',
-  component: Card,
-  description: 'Card container for grouping related content.',
-});
-
-export const Default = () => (
-  <Card className="max-w-sm">
-    <CardHeader>
-      <CardTitle>Card Title</CardTitle>
-      <CardDescription>Card description goes here.</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p>This is the card content. You can put any content here.</p>
-    </CardContent>
-    <CardFooter>
-      <Button>Action</Button>
-    </CardFooter>
-  </Card>
-);
-
-export const LoginCard = () => (
-  <Card className="max-w-sm">
-    <CardHeader>
-      <CardTitle>Login</CardTitle>
-      <CardDescription>Enter your credentials to access your account.</CardDescription>
-    </CardHeader>
-    <CardContent className="space-y-4">
-      <div className="space-y-2">
-        <Label htmlFor="email">Email</Label>
-        <Input id="email" type="email" placeholder="Enter your email" />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="password">Password</Label>
-        <Input id="password" type="password" placeholder="Enter password" />
-      </div>
-    </CardContent>
-    <CardFooter className="flex justify-between">
-      <Button variant="outline">Cancel</Button>
-      <Button>Login</Button>
-    </CardFooter>
-  </Card>
-);
-
-export const ProductCard = () => (
-  <Card className="max-w-xs overflow-hidden">
-    <div className="aspect-video bg-muted" />
-    <CardHeader>
-      <CardTitle>Product Name</CardTitle>
-      <CardDescription>$99.99</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm text-muted-foreground">
-        This is a brief description of the product with key features.
-      </p>
-    </CardContent>
-    <CardFooter>
-      <Button className="w-full">Add to Cart</Button>
-    </CardFooter>
-  </Card>
-);
-
-export const StatsCards = () => (
-  <div className="grid grid-cols-3 gap-4">
-    <Card>
-      <CardHeader className="pb-2">
-        <CardDescription>Total Revenue</CardDescription>
-        <CardTitle className="text-2xl">$45,231.89</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <p className="text-xs text-muted-foreground">+20.1% from last month</p>
-      </CardContent>
-    </Card>
-    <Card>
-      <CardHeader className="pb-2">
-        <CardDescription>Subscriptions</CardDescription>
-        <CardTitle className="text-2xl">+2,350</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <p className="text-xs text-muted-foreground">+180.1% from last month</p>
-      </CardContent>
-    </Card>
-    <Card>
-      <CardHeader className="pb-2">
-        <CardDescription>Active Now</CardDescription>
-        <CardTitle className="text-2xl">+573</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <p className="text-xs text-muted-foreground">+201 since last hour</p>
-      </CardContent>
-    </Card>
-  </div>
-);
-
-export const SimpleCard = () => (
-  <Card className="max-w-md p-6">
-    <p>A simple card with just content and padding.</p>
-  </Card>
-);

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

@@ -1,119 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '.';
-
-export default defineStory({
-  title: 'Core/Resizable',
-  component: ResizablePanelGroup,
-  description: 'Resizable panels with drag handles.',
-});
-
-export const Horizontal = () => (
-  <ResizablePanelGroup
-    direction="horizontal"
-    className="max-w-md rounded-lg border"
-  >
-    <ResizablePanel defaultSize={50}>
-      <div className="flex h-[200px] items-center justify-center p-6">
-        <span className="font-semibold">One</span>
-      </div>
-    </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel defaultSize={50}>
-      <div className="flex h-[200px] items-center justify-center p-6">
-        <span className="font-semibold">Two</span>
-      </div>
-    </ResizablePanel>
-  </ResizablePanelGroup>
-);
-
-export const Vertical = () => (
-  <ResizablePanelGroup
-    direction="vertical"
-    className="max-w-md rounded-lg border"
-  >
-    <ResizablePanel defaultSize={25}>
-      <div className="flex h-full items-center justify-center p-6">
-        <span className="font-semibold">Header</span>
-      </div>
-    </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel defaultSize={75}>
-      <div className="flex h-full items-center justify-center p-6">
-        <span className="font-semibold">Content</span>
-      </div>
-    </ResizablePanel>
-  </ResizablePanelGroup>
-);
-
-export const ThreePanels = () => (
-  <ResizablePanelGroup
-    direction="horizontal"
-    className="max-w-lg rounded-lg border"
-  >
-    <ResizablePanel defaultSize={25} minSize={15}>
-      <div className="flex h-[200px] items-center justify-center p-6">
-        <span className="font-semibold">Sidebar</span>
-      </div>
-    </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel defaultSize={50}>
-      <div className="flex h-[200px] items-center justify-center p-6">
-        <span className="font-semibold">Content</span>
-      </div>
-    </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel defaultSize={25} minSize={15}>
-      <div className="flex h-[200px] items-center justify-center p-6">
-        <span className="font-semibold">Details</span>
-      </div>
-    </ResizablePanel>
-  </ResizablePanelGroup>
-);
-
-export const Nested = () => (
-  <ResizablePanelGroup
-    direction="horizontal"
-    className="max-w-lg rounded-lg border"
-  >
-    <ResizablePanel defaultSize={25}>
-      <div className="flex h-[300px] items-center justify-center p-6">
-        <span className="font-semibold">Sidebar</span>
-      </div>
-    </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel defaultSize={75}>
-      <ResizablePanelGroup direction="vertical">
-        <ResizablePanel defaultSize={50}>
-          <div className="flex h-full items-center justify-center p-6">
-            <span className="font-semibold">Top</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel defaultSize={50}>
-          <div className="flex h-full items-center justify-center p-6">
-            <span className="font-semibold">Bottom</span>
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </ResizablePanel>
-  </ResizablePanelGroup>
-);
-
-export const WithHandle = () => (
-  <ResizablePanelGroup
-    direction="horizontal"
-    className="max-w-md rounded-lg border"
-  >
-    <ResizablePanel defaultSize={50}>
-      <div className="flex h-[200px] items-center justify-center p-6">
-        <span className="font-semibold">Left</span>
-      </div>
-    </ResizablePanel>
-    <ResizableHandle withHandle />
-    <ResizablePanel defaultSize={50}>
-      <div className="flex h-[200px] items-center justify-center p-6">
-        <span className="font-semibold">Right</span>
-      </div>
-    </ResizablePanel>
-  </ResizablePanelGroup>
-);

package/src/components/layout/scroll-area/scroll-area.story.tsx

@@ -1,172 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import { ScrollArea, ScrollBar } from '.';
-import { Separator } from '../../layout/separator';
-
-export default defineStory({
-  title: 'Core/Scroll Area',
-  component: ScrollArea,
-  description: 'Custom scrollable area with styled scrollbars.',
-});
-
-const tags = Array.from({ length: 50 }).map(
-  (_, i, a) => `v1.2.0-beta.${a.length - i}`
-);
-
-const works = [
-  { artist: 'Ornella Binni', art: 'Sunset Dreams' },
-  { artist: 'Tom Byrom', art: 'Mountain Peak' },
-  { artist: 'Vladimir Malyavko', art: 'City Lights' },
-  { artist: 'Fabio Fistarol', art: 'Ocean Blue' },
-  { artist: 'Anthony Intraversato', art: 'Forest Path' },
-  { artist: 'Ash Edmonds', art: 'Desert Storm' },
-];
-
-export const Vertical = () => (
-  <ScrollArea className="h-72 w-48 rounded-md border">
-    <div className="p-4">
-      <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
-      {tags.map((tag) => (
-        <div key={tag}>
-          <div className="text-sm">{tag}</div>
-          <Separator className="my-2" />
-        </div>
-      ))}
-    </div>
-  </ScrollArea>
-);
-
-export const Horizontal = () => (
-  <ScrollArea className="w-96 whitespace-nowrap rounded-md border" orientation="horizontal">
-    <div className="flex w-max space-x-4 p-4">
-      {works.map((work) => (
-        <figure key={work.artist} className="shrink-0">
-          <div className="overflow-hidden rounded-md">
-            <div className="h-[150px] w-[150px] bg-muted flex items-center justify-center">
-              <span className="text-muted-foreground text-sm">{work.art}</span>
-            </div>
-          </div>
-          <figcaption className="pt-2 text-xs text-muted-foreground">
-            Photo by{' '}
-            <span className="font-semibold text-foreground">{work.artist}</span>
-          </figcaption>
-        </figure>
-      ))}
-    </div>
-  </ScrollArea>
-);
-
-export const Both = () => (
-  <ScrollArea className="h-72 w-72 rounded-md border" orientation="both">
-    <div className="p-4">
-      {Array.from({ length: 20 }).map((_, i) => (
-        <div key={i} className="whitespace-nowrap py-2">
-          This is a very long line of text that will require horizontal scrolling. Item {i + 1}
-        </div>
-      ))}
-    </div>
-  </ScrollArea>
-);
-
-export const InCard = () => (
-  <div className="rounded-lg border p-4 max-w-sm">
-    <h4 className="font-medium mb-2">Notifications</h4>
-    <ScrollArea className="h-48">
-      <div className="space-y-2">
-        {Array.from({ length: 10 }).map((_, i) => (
-          <div key={i} className="rounded-md border p-3">
-            <p className="text-sm font-medium">Notification {i + 1}</p>
-            <p className="text-xs text-muted-foreground">Just now</p>
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  </div>
-);
-
-export const Chat = () => (
-  <div className="rounded-lg border max-w-md">
-    <div className="p-4 border-b">
-      <h4 className="font-medium">Chat</h4>
-    </div>
-    <ScrollArea className="h-64 p-4">
-      <div className="space-y-4">
-        {Array.from({ length: 15 }).map((_, i) => (
-          <div
-            key={i}
-            className={`flex ${i % 2 === 0 ? 'justify-start' : 'justify-end'}`}
-          >
-            <div
-              className={`rounded-lg px-3 py-2 max-w-[80%] ${
-                i % 2 === 0 ? 'bg-muted' : 'bg-primary text-primary-foreground'
-              }`}
-            >
-              <p className="text-sm">Message {i + 1}</p>
-            </div>
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  </div>
-);
-
-const filters = [
-  'All', 'Electronics', 'Clothing', 'Home & Garden', 'Sports', 'Books',
-  'Toys', 'Beauty', 'Automotive', 'Health', 'Food', 'Music', 'Movies'
-];
-
-export const HorizontalFilterTabs = () => (
-  <div className="max-w-sm">
-    <ScrollArea className="w-full" orientation="horizontal">
-      <div className="flex gap-2 pb-2">
-        {filters.map((filter) => (
-          <button
-            key={filter}
-            className="px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap bg-muted text-muted-foreground hover:text-foreground transition-colors"
-          >
-            {filter}
-          </button>
-        ))}
-      </div>
-    </ScrollArea>
-    <p className="text-xs text-muted-foreground mt-2">
-      Scroll horizontally to see more filters
-    </p>
-  </div>
-);
-
-export const VerticalNoHorizontalScroll = () => (
-  <div className="max-w-xs border rounded-lg">
-    <p className="text-sm font-medium p-3 border-b">overflowX="hidden" — no horizontal bleed</p>
-    <ScrollArea className="h-48" overflowX="hidden">
-      <div className="p-3 space-y-2">
-        {Array.from({ length: 10 }).map((_, i) => (
-          <div key={i} className="flex items-center gap-2 p-2 rounded-md bg-muted/40">
-            <div className="w-2 h-8 rounded-full bg-primary/50 flex-shrink-0" />
-            <span className="text-sm truncate flex-1 min-w-0">
-              Track name that is very long and should truncate gracefully {i + 1}
-            </span>
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  </div>
-);
-
-export const HorizontalChips = () => (
-  <div className="max-w-xs">
-    <p className="text-sm font-medium mb-2">Selected tags:</p>
-    <ScrollArea className="w-full" orientation="horizontal">
-      <div className="flex gap-1 pb-2">
-        {['React', 'TypeScript', 'Tailwind', 'Next.js', 'Radix UI', 'Zustand', 'TanStack Query'].map((tag) => (
-          <span
-            key={tag}
-            className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs bg-primary/10 text-primary whitespace-nowrap"
-          >
-            {tag}
-            <button className="hover:bg-primary/20 rounded-full p-0.5">×</button>
-          </span>
-        ))}
-      </div>
-    </ScrollArea>
-  </div>
-);

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>
-);