@djangocfg/ui-core 2.1.120 → 2.1.123

package/src/components/table.story.tsx

@@ -0,0 +1,148 @@
+import { defineStory } from '@djangocfg/playground';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table';
+import { Badge } from './badge';
+
+export default defineStory({
+  title: 'Core/Table',
+  component: Table,
+  description: 'Table for displaying tabular data.',
+});
+
+const invoices = [
+  { id: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
+  { id: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
+  { id: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
+  { id: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },
+  { id: 'INV005', status: 'Paid', method: 'PayPal', amount: '$550.00' },
+];
+
+const users = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive' },
+  { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'Editor', status: 'Active' },
+];
+
+export const Default = () => (
+  <Table>
+    <TableCaption>A list of your recent invoices.</TableCaption>
+    <TableHeader>
+      <TableRow>
+        <TableHead className="w-[100px]">Invoice</TableHead>
+        <TableHead>Status</TableHead>
+        <TableHead>Method</TableHead>
+        <TableHead className="text-right">Amount</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {invoices.map((invoice) => (
+        <TableRow key={invoice.id}>
+          <TableCell className="font-medium">{invoice.id}</TableCell>
+          <TableCell>{invoice.status}</TableCell>
+          <TableCell>{invoice.method}</TableCell>
+          <TableCell className="text-right">{invoice.amount}</TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+);
+
+export const WithBadges = () => (
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Name</TableHead>
+        <TableHead>Email</TableHead>
+        <TableHead>Role</TableHead>
+        <TableHead>Status</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {users.map((user) => (
+        <TableRow key={user.id}>
+          <TableCell className="font-medium">{user.name}</TableCell>
+          <TableCell>{user.email}</TableCell>
+          <TableCell>
+            <Badge variant="secondary">{user.role}</Badge>
+          </TableCell>
+          <TableCell>
+            <Badge variant={user.status === 'Active' ? 'default' : 'outline'}>
+              {user.status}
+            </Badge>
+          </TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+);
+
+export const Striped = () => (
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Invoice</TableHead>
+        <TableHead>Status</TableHead>
+        <TableHead>Method</TableHead>
+        <TableHead className="text-right">Amount</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {invoices.map((invoice, i) => (
+        <TableRow key={invoice.id} className={i % 2 === 0 ? 'bg-muted/50' : ''}>
+          <TableCell className="font-medium">{invoice.id}</TableCell>
+          <TableCell>{invoice.status}</TableCell>
+          <TableCell>{invoice.method}</TableCell>
+          <TableCell className="text-right">{invoice.amount}</TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+);
+
+export const Compact = () => (
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead className="h-8">Invoice</TableHead>
+        <TableHead className="h-8">Status</TableHead>
+        <TableHead className="h-8">Amount</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {invoices.slice(0, 3).map((invoice) => (
+        <TableRow key={invoice.id}>
+          <TableCell className="py-2">{invoice.id}</TableCell>
+          <TableCell className="py-2">{invoice.status}</TableCell>
+          <TableCell className="py-2">{invoice.amount}</TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+);
+
+export const Empty = () => (
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Invoice</TableHead>
+        <TableHead>Status</TableHead>
+        <TableHead>Amount</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell colSpan={3} className="h-24 text-center text-muted-foreground">
+          No results.
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);

package/src/components/tabs.story.tsx

@@ -0,0 +1,98 @@
+import { defineStory } from '@djangocfg/playground';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Input } from './input';
+import { Label } from './label';
+import { Button } from './button';
+
+export default defineStory({
+  title: 'Core/Tabs',
+  component: Tabs,
+  description: 'Tabbed interface for organizing content.',
+});
+
+export const Default = () => (
+  <Tabs defaultValue="account" className="w-full max-w-md">
+    <TabsList className="grid w-full grid-cols-2">
+      <TabsTrigger value="account">Account</TabsTrigger>
+      <TabsTrigger value="password">Password</TabsTrigger>
+    </TabsList>
+    <TabsContent value="account">
+      <Card>
+        <CardHeader>
+          <CardTitle>Account</CardTitle>
+          <CardDescription>
+            Make changes to your account here.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="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="username">Username</Label>
+            <Input id="username" defaultValue="@johndoe" />
+          </div>
+          <Button>Save changes</Button>
+        </CardContent>
+      </Card>
+    </TabsContent>
+    <TabsContent value="password">
+      <Card>
+        <CardHeader>
+          <CardTitle>Password</CardTitle>
+          <CardDescription>
+            Change your password here.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="current">Current password</Label>
+            <Input id="current" type="password" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="new">New password</Label>
+            <Input id="new" type="password" />
+          </div>
+          <Button>Save password</Button>
+        </CardContent>
+      </Card>
+    </TabsContent>
+  </Tabs>
+);
+
+export const SimpleTabs = () => (
+  <Tabs defaultValue="tab1" className="w-full max-w-lg">
+    <TabsList>
+      <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+      <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+      <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+    </TabsList>
+    <TabsContent value="tab1" className="p-4">
+      Content for Tab 1
+    </TabsContent>
+    <TabsContent value="tab2" className="p-4">
+      Content for Tab 2
+    </TabsContent>
+    <TabsContent value="tab3" className="p-4">
+      Content for Tab 3
+    </TabsContent>
+  </Tabs>
+);
+
+export const DisabledTab = () => (
+  <Tabs defaultValue="active" className="w-full max-w-lg">
+    <TabsList>
+      <TabsTrigger value="active">Active</TabsTrigger>
+      <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
+      <TabsTrigger value="another">Another</TabsTrigger>
+    </TabsList>
+    <TabsContent value="active" className="p-4">
+      This tab is active.
+    </TabsContent>
+    <TabsContent value="another" className="p-4">
+      Another active tab.
+    </TabsContent>
+  </Tabs>
+);

package/src/components/tabs.tsx

@@ -16,7 +16,7 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from './sh
 // Tabs Root with Mobile Sheet Support
 // ─────────────────────────────────────────────────────────────────────────
 
-interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+export interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
   /**
    * Enable mobile sheet mode (automatically shows Sheet on mobile devices)
    * @default false

package/src/components/textarea.story.tsx

@@ -0,0 +1,94 @@
+import { defineStory, useBoolean, useNumber } from '@djangocfg/playground';
+import { Textarea } from './textarea';
+import { Label } from './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/toggle-group.story.tsx

@@ -0,0 +1,118 @@
+import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
+import { ToggleGroup, ToggleGroupItem } from './toggle-group';
+import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, AlignJustify } from 'lucide-react';
+
+export default defineStory({
+  title: 'Core/Toggle Group',
+  component: ToggleGroup,
+  description: 'Group of toggle buttons for multiple or single selection.',
+});
+
+export const Interactive = () => {
+  const [type] = useSelect('type', {
+    options: ['single', 'multiple'] as const,
+    defaultValue: 'single',
+    label: 'Type',
+    description: 'Selection type',
+  });
+
+  const [variant] = useSelect('variant', {
+    options: ['default', 'outline'] as const,
+    defaultValue: 'default',
+    label: 'Variant',
+    description: 'Toggle style',
+  });
+
+  const [disabled] = useBoolean('disabled', {
+    defaultValue: false,
+    label: 'Disabled',
+    description: 'Disable group',
+  });
+
+  return (
+    <ToggleGroup type={type} variant={variant} disabled={disabled}>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+};
+
+export const Single = () => (
+  <ToggleGroup type="single" defaultValue="center">
+    <ToggleGroupItem value="left" aria-label="Align left">
+      <AlignLeft className="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="center" aria-label="Align center">
+      <AlignCenter className="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="right" aria-label="Align right">
+      <AlignRight className="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="justify" aria-label="Justify">
+      <AlignJustify className="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+);
+
+export const Multiple = () => (
+  <ToggleGroup type="multiple" defaultValue={['bold']}>
+    <ToggleGroupItem value="bold" aria-label="Toggle bold">
+      <Bold className="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Toggle italic">
+      <Italic className="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Toggle underline">
+      <Underline className="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+);
+
+export const Outline = () => (
+  <ToggleGroup type="single" variant="outline" defaultValue="left">
+    <ToggleGroupItem value="left" aria-label="Align left">
+      <AlignLeft className="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="center" aria-label="Align center">
+      <AlignCenter className="h-4 w-4" />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="right" aria-label="Align right">
+      <AlignRight className="h-4 w-4" />
+    </ToggleGroupItem>
+  </ToggleGroup>
+);
+
+export const Sizes = () => (
+  <div className="flex flex-col gap-4">
+    <ToggleGroup type="single" size="sm">
+      <ToggleGroupItem value="left"><AlignLeft className="h-3 w-3" /></ToggleGroupItem>
+      <ToggleGroupItem value="center"><AlignCenter className="h-3 w-3" /></ToggleGroupItem>
+      <ToggleGroupItem value="right"><AlignRight className="h-3 w-3" /></ToggleGroupItem>
+    </ToggleGroup>
+    <ToggleGroup type="single" size="default">
+      <ToggleGroupItem value="left"><AlignLeft className="h-4 w-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="center"><AlignCenter className="h-4 w-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="right"><AlignRight className="h-4 w-4" /></ToggleGroupItem>
+    </ToggleGroup>
+    <ToggleGroup type="single" size="lg">
+      <ToggleGroupItem value="left"><AlignLeft className="h-5 w-5" /></ToggleGroupItem>
+      <ToggleGroupItem value="center"><AlignCenter className="h-5 w-5" /></ToggleGroupItem>
+      <ToggleGroupItem value="right"><AlignRight className="h-5 w-5" /></ToggleGroupItem>
+    </ToggleGroup>
+  </div>
+);
+
+export const Disabled = () => (
+  <ToggleGroup type="single" disabled>
+    <ToggleGroupItem value="left"><AlignLeft className="h-4 w-4" /></ToggleGroupItem>
+    <ToggleGroupItem value="center"><AlignCenter className="h-4 w-4" /></ToggleGroupItem>
+    <ToggleGroupItem value="right"><AlignRight className="h-4 w-4" /></ToggleGroupItem>
+  </ToggleGroup>
+);

package/src/components/toggle.story.tsx

@@ -0,0 +1,104 @@
+import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
+import { Toggle } from './toggle';
+import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
+
+export default defineStory({
+  title: 'Core/Toggle',
+  component: Toggle,
+  description: 'Toggle button for binary states.',
+});
+
+export const Interactive = () => {
+  const [variant] = useSelect('variant', {
+    options: ['default', 'outline'] as const,
+    defaultValue: 'default',
+    label: 'Variant',
+    description: 'Toggle style',
+  });
+
+  const [size] = useSelect('size', {
+    options: ['default', 'sm', 'lg'] as const,
+    defaultValue: 'default',
+    label: 'Size',
+    description: 'Toggle size',
+  });
+
+  const [disabled] = useBoolean('disabled', {
+    defaultValue: false,
+    label: 'Disabled',
+    description: 'Disable toggle',
+  });
+
+  return (
+    <Toggle variant={variant} size={size} disabled={disabled}>
+      <Bold className="h-4 w-4" />
+    </Toggle>
+  );
+};
+
+export const Default = () => (
+  <Toggle aria-label="Toggle bold">
+    <Bold className="h-4 w-4" />
+  </Toggle>
+);
+
+export const Outline = () => (
+  <Toggle variant="outline" aria-label="Toggle italic">
+    <Italic className="h-4 w-4" />
+  </Toggle>
+);
+
+export const WithText = () => (
+  <Toggle aria-label="Toggle bold">
+    <Bold className="h-4 w-4" />
+    Bold
+  </Toggle>
+);
+
+export const Sizes = () => (
+  <div className="flex items-center gap-2">
+    <Toggle size="sm" aria-label="Toggle bold">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+    <Toggle size="default" aria-label="Toggle bold">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+    <Toggle size="lg" aria-label="Toggle bold">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+  </div>
+);
+
+export const Disabled = () => (
+  <Toggle disabled aria-label="Toggle bold">
+    <Bold className="h-4 w-4" />
+  </Toggle>
+);
+
+export const Formatting = () => (
+  <div className="flex gap-1">
+    <Toggle aria-label="Toggle bold">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+    <Toggle aria-label="Toggle italic">
+      <Italic className="h-4 w-4" />
+    </Toggle>
+    <Toggle aria-label="Toggle underline">
+      <Underline className="h-4 w-4" />
+    </Toggle>
+  </div>
+);
+
+export const Alignment = () => (
+  <div className="flex gap-1">
+    <Toggle aria-label="Align left" defaultPressed>
+      <AlignLeft className="h-4 w-4" />
+    </Toggle>
+    <Toggle aria-label="Align center">
+      <AlignCenter className="h-4 w-4" />
+    </Toggle>
+    <Toggle aria-label="Align right">
+      <AlignRight className="h-4 w-4" />
+    </Toggle>
+  </div>
+);