@djangocfg/ui-core 2.1.120 → 2.1.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.120",
+  "version": "2.1.123",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -62,10 +62,11 @@
   ],
   "scripts": {
     "lint": "eslint .",
-    "check": "tsc --noEmit"
+    "check": "tsc --noEmit",
+    "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.120",
+    "@djangocfg/i18n": "^2.1.123",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
     "react": "^19.0.0",
@@ -123,11 +124,13 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.120",
-    "@djangocfg/typescript-config": "^2.1.120",
+    "@djangocfg/i18n": "^2.1.123",
+    "@djangocfg/playground": "workspace:*",
+    "@djangocfg/typescript-config": "^2.1.123",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
+    "lucide-react": "^0.545.0",
     "typescript": "^5.9.3"
   },
   "publishConfig": {

package/src/components/accordion.story.tsx

@@ -0,0 +1,110 @@
+import { defineStory } from '@djangocfg/playground';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
+
+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/alert-dialog.story.tsx

@@ -0,0 +1,104 @@
+import { defineStory } from '@djangocfg/playground';
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from './alert-dialog';
+import { Button } from './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/alert.story.tsx

@@ -0,0 +1,77 @@
+import { defineStory, useSelect } from '@djangocfg/playground';
+import { Alert, AlertTitle, AlertDescription } from './alert';
+import { AlertCircle, CheckCircle2, Info, AlertTriangle } from 'lucide-react';
+
+export default defineStory({
+  title: 'Core/Alert',
+  component: Alert,
+  description: 'Alert messages for important information.',
+});
+
+export const Interactive = () => {
+  const [variant] = useSelect('variant', {
+    options: ['default', 'destructive'] as const,
+    defaultValue: 'default',
+    label: 'Variant',
+    description: 'Alert style variant',
+  });
+
+  return (
+    <Alert variant={variant} className="max-w-lg">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the CLI.
+      </AlertDescription>
+    </Alert>
+  );
+};
+
+export const Default = () => (
+  <Alert className="max-w-lg">
+    <Info className="h-4 w-4" />
+    <AlertTitle>Information</AlertTitle>
+    <AlertDescription>
+      This is an informational alert message.
+    </AlertDescription>
+  </Alert>
+);
+
+export const Destructive = () => (
+  <Alert variant="destructive" className="max-w-lg">
+    <AlertCircle className="h-4 w-4" />
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>
+      Your session has expired. Please log in again.
+    </AlertDescription>
+  </Alert>
+);
+
+export const Success = () => (
+  <Alert className="max-w-lg border-green-500/50 text-green-600 [&>svg]:text-green-600">
+    <CheckCircle2 className="h-4 w-4" />
+    <AlertTitle>Success</AlertTitle>
+    <AlertDescription>
+      Your changes have been saved successfully.
+    </AlertDescription>
+  </Alert>
+);
+
+export const Warning = () => (
+  <Alert className="max-w-lg border-yellow-500/50 text-yellow-600 [&>svg]:text-yellow-600">
+    <AlertTriangle className="h-4 w-4" />
+    <AlertTitle>Warning</AlertTitle>
+    <AlertDescription>
+      Your subscription will expire in 3 days.
+    </AlertDescription>
+  </Alert>
+);
+
+export const WithoutIcon = () => (
+  <Alert className="max-w-lg">
+    <AlertTitle>Note</AlertTitle>
+    <AlertDescription>
+      You can also use alerts without icons.
+    </AlertDescription>
+  </Alert>
+);

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

@@ -0,0 +1,94 @@
+import { defineStory, useSelect } from '@djangocfg/playground';
+import { AspectRatio } from './aspect-ratio';
+
+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/avatar.story.tsx

@@ -0,0 +1,115 @@
+import { defineStory, useSelect } from '@djangocfg/playground';
+import { Avatar, AvatarImage, AvatarFallback } from './avatar';
+
+export default defineStory({
+  title: 'Core/Avatar',
+  component: Avatar,
+  description: 'User avatar with image and fallback support.',
+});
+
+const AVATARS = [
+  { src: 'https://github.com/shadcn.png', fallback: 'CN' },
+  { src: 'https://github.com/vercel.png', fallback: 'VC' },
+  { src: 'https://github.com/radix-ui.png', fallback: 'RX' },
+];
+
+export const Interactive = () => {
+  const [size] = useSelect('size', {
+    options: ['sm', 'md', 'lg'] as const,
+    defaultValue: 'md',
+    label: 'Size',
+    description: 'Avatar size',
+  });
+
+  const sizeClasses = {
+    sm: 'h-8 w-8',
+    md: 'h-10 w-10',
+    lg: 'h-14 w-14',
+  };
+
+  return (
+    <Avatar className={sizeClasses[size]}>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  );
+};
+
+export const Default = () => (
+  <Avatar>
+    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+);
+
+export const Fallback = () => (
+  <Avatar>
+    <AvatarImage src="/broken-image.jpg" alt="User" />
+    <AvatarFallback>JD</AvatarFallback>
+  </Avatar>
+);
+
+export const Sizes = () => (
+  <div className="flex items-center gap-4">
+    <Avatar className="h-6 w-6">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback className="text-xs">CN</AvatarFallback>
+    </Avatar>
+    <Avatar className="h-8 w-8">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+    <Avatar className="h-10 w-10">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+    <Avatar className="h-14 w-14">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+    <Avatar className="h-20 w-20">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback className="text-xl">CN</AvatarFallback>
+    </Avatar>
+  </div>
+);
+
+export const Group = () => (
+  <div className="flex -space-x-4">
+    {AVATARS.map((avatar, i) => (
+      <Avatar key={i} className="border-2 border-background">
+        <AvatarImage src={avatar.src} />
+        <AvatarFallback>{avatar.fallback}</AvatarFallback>
+      </Avatar>
+    ))}
+    <Avatar className="border-2 border-background">
+      <AvatarFallback>+5</AvatarFallback>
+    </Avatar>
+  </div>
+);
+
+export const WithStatus = () => (
+  <div className="flex gap-4">
+    <div className="relative">
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>
+      <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 border-2 border-background" />
+    </div>
+    <div className="relative">
+      <Avatar>
+        <AvatarImage src="https://github.com/vercel.png" />
+        <AvatarFallback>VC</AvatarFallback>
+      </Avatar>
+      <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-yellow-500 border-2 border-background" />
+    </div>
+    <div className="relative">
+      <Avatar>
+        <AvatarImage src="https://github.com/radix-ui.png" />
+        <AvatarFallback>RX</AvatarFallback>
+      </Avatar>
+      <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-gray-400 border-2 border-background" />
+    </div>
+  </div>
+);

package/src/components/badge.story.tsx

@@ -0,0 +1,56 @@
+import { defineStory, useSelect } from '@djangocfg/playground';
+import { Badge } from './badge';
+
+export default defineStory({
+  title: 'Core/Badge',
+  component: Badge,
+  description: 'Small status indicators and labels.',
+});
+
+export const Interactive = () => {
+  const [variant] = useSelect('variant', {
+    options: ['default', 'secondary', 'destructive', 'outline'] as const,
+    defaultValue: 'default',
+    label: 'Variant',
+    description: 'Badge style variant',
+  });
+
+  return (
+    <div className="flex gap-4">
+      <Badge variant={variant}>Badge</Badge>
+    </div>
+  );
+};
+
+export const Variants = () => (
+  <div className="flex flex-wrap gap-4">
+    <Badge variant="default">Default</Badge>
+    <Badge variant="secondary">Secondary</Badge>
+    <Badge variant="destructive">Destructive</Badge>
+    <Badge variant="outline">Outline</Badge>
+  </div>
+);
+
+export const StatusBadges = () => (
+  <div className="flex flex-wrap gap-4">
+    <Badge variant="default">Active</Badge>
+    <Badge variant="secondary">Pending</Badge>
+    <Badge variant="destructive">Expired</Badge>
+    <Badge variant="outline">Draft</Badge>
+  </div>
+);
+
+export const InContext = () => (
+  <div className="space-y-4">
+    <div className="flex items-center gap-2">
+      <span className="font-medium">Status:</span>
+      <Badge variant="default">Published</Badge>
+    </div>
+    <div className="flex items-center gap-2">
+      <span className="font-medium">Tags:</span>
+      <Badge variant="secondary">React</Badge>
+      <Badge variant="secondary">TypeScript</Badge>
+      <Badge variant="secondary">UI</Badge>
+    </div>
+  </div>
+);