@k3-universe/react-kit 0.0.1

package/src/stories/shadcn/ui/Accordion.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../../shadcn/ui/accordion';
+import { useState } from 'react';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Shadcn/UI/Accordion',
+  component: Accordion,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+export const Basic: Story = {
+  args: {
+    type: 'single',
+    collapsible: true,
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to WAI-ARIA design patterns.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>Yes. It comes with default styles that can be overridden.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>Yes. It uses utility classes for smooth animations.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  args: {
+    type: 'multiple',
+    defaultValue: ['item-1'],
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Open multiple items?</AccordionTrigger>
+        <AccordionContent>Yes. In multiple mode you can keep several sections open.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Keeps state independent?</AccordionTrigger>
+        <AccordionContent>Each item can be toggled independently in multiple mode.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Works with defaultValue?</AccordionTrigger>
+        <AccordionContent>Provide an array of values to open initially.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const DisabledItem: Story = {
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Interactable item</AccordionTrigger>
+        <AccordionContent>This item can be toggled as usual.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2" disabled>
+        <AccordionTrigger>Disabled item</AccordionTrigger>
+        <AccordionContent>This content cannot be toggled because the item is disabled.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+function ControlledAccordionDemo() {
+  const [value, setValue] = useState<string | undefined>('item-1');
+
+  return (
+    <Accordion type="single" collapsible value={value} onValueChange={setValue}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Controlled: Item 1</AccordionTrigger>
+        <AccordionContent>Clicking again will collapse because collapsible is true.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Controlled: Item 2</AccordionTrigger>
+        <AccordionContent>State is managed via value/onValueChange.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledAccordionDemo />,
+};

package/src/stories/shadcn/ui/Alert.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Alert, AlertTitle, AlertDescription } from '../../../shadcn/ui/alert';
+import { Terminal, AlertTriangle } from 'lucide-react';
+
+const meta: Meta<typeof Alert> = {
+  title: 'Shadcn/UI/Alert',
+  component: Alert,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Alert {...args}>
+      <Terminal className="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components using the shadcn UI CLI.
+      </AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Destructive: Story = {
+  render: (args) => (
+    <Alert variant="destructive" {...args}>
+      <AlertTriangle className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
+  ),
+};

package/src/stories/shadcn/ui/AlertDialog.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '../../../shadcn/ui/alert-dialog';
+import { Button } from '../../../shadcn/ui/button';
+import { buttonVariants } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof AlertDialog> = {
+  title: 'Shadcn/UI/AlertDialog',
+  component: AlertDialog,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AlertDialog>;
+
+export const Default: Story = {
+  render: (args) => (
+    <AlertDialog {...args}>
+      <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: Story = {
+  render: (args) => (
+    <AlertDialog {...args}>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Delete account</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 className={buttonVariants({ variant: 'destructive' })}>
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};

package/src/stories/shadcn/ui/AspectRatio.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AspectRatio } from '../../../shadcn/ui/aspect-ratio';
+
+const meta: Meta<typeof AspectRatio> = {
+  title: 'Shadcn/UI/AspectRatio',
+  component: AspectRatio,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AspectRatio>;
+
+export const Image16x9: Story = {
+  name: 'Image (16:9)',
+  render: (args) => (
+    <div className="w-[450px]">
+      <AspectRatio ratio={16 / 9} {...args}>
+        <img
+          src="https://images.unsplash.com/photo-1522771930-78848d9293e8?q=80&w=1600&auto=format&fit=crop"
+          alt="Landscape"
+          className="h-full w-full rounded-md object-cover"
+        />
+      </AspectRatio>
+    </div>
+  ),
+};
+
+export const Square1x1: Story = {
+  name: 'Image (1:1 square)',
+  render: (args) => (
+    <div className="w-[300px]">
+      <AspectRatio ratio={1 / 1} {...args}>
+        <img
+          src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=1200&auto=format&fit=crop"
+          alt="Square"
+          className="h-full w-full rounded-md object-cover"
+        />
+      </AspectRatio>
+    </div>
+  ),
+};
+
+export const YouTube16x9: Story = {
+  name: 'YouTube Embed (16:9)',
+  render: (args) => (
+    <div className="w-[450px]">
+      <AspectRatio ratio={16 / 9} {...args}>
+        <iframe
+          className="h-full w-full rounded-md"
+          src="https://www.youtube.com/embed/yMqDgbZmBdk"
+          title="YouTube video"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+        />
+      </AspectRatio>
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/Avatar.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar, AvatarImage, AvatarFallback } from '../../../shadcn/ui/avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Shadcn/UI/Avatar',
+  component: Avatar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>SC</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarImage src="" alt="fallback" />
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/Badge.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from '../../../shadcn/ui/badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Shadcn/UI/Badge',
+  component: Badge,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Basic: Story = {
+  args: {
+    children: 'Badge',
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge>Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/Breadcrumb.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+  BreadcrumbPage,
+} from '../../../shadcn/ui/breadcrumb';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'Shadcn/UI/Breadcrumb',
+  component: Breadcrumb,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Basic: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">shadcn</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};

package/src/stories/shadcn/ui/Button.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Shadcn/UI/Button',
+  component: Button,
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Button>Default</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="link">Link</Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Button size="sm">Small</Button>
+      <Button size="default">Default</Button>
+      <Button size="lg">Large</Button>
+      <Button size="icon" aria-label="icon" className="rounded-full">
+        <span role="img" aria-label="waving hand">👋</span>
+      </Button>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <Button disabled>Disabled</Button>
+      <Button variant="outline" disabled>
+        Disabled outline
+      </Button>
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/Calendar.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Calendar } from '../../../shadcn/ui/calendar';
+
+const meta: Meta<typeof Calendar> = {
+  title: 'Shadcn/UI/Calendar',
+  component: Calendar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Calendar>;
+
+function CalendarSingleStory() {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  return (
+    <div className="p-2">
+      <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
+      <div className="text-sm text-muted-foreground mt-2">
+        Selected: {date ? date.toDateString() : '—'}
+      </div>
+    </div>
+  );
+}
+
+export const Single: Story = {
+  render: () => <CalendarSingleStory />,
+};

package/src/stories/shadcn/ui/Card.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../../../shadcn/ui/card';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Card> = {
+  title: 'Shadcn/UI/Card',
+  component: Card,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Basic: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Deploy your new project in one-click.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card content goes here. You can place forms, text, or other elements.</p>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </CardFooter>
+    </Card>
+  ),
+};

package/src/stories/shadcn/ui/Carousel.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '../../../shadcn/ui/carousel';
+
+const meta: Meta<typeof Carousel> = {
+  title: 'Shadcn/UI/Carousel',
+  component: Carousel,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Carousel>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="w-full max-w-md">
+      <Carousel className="rounded-md border p-4">
+        <CarouselContent>
+          {[1, 2, 3, 4, 5].map((n) => (
+            <CarouselItem key={n} className="basis-full">
+              <div className="flex h-40 items-center justify-center rounded-md bg-muted/50 text-2xl font-bold">
+                Slide {n}
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/Chart.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ChartConfig } from '../../../shadcn/ui/chart';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+} from '../../../shadcn/ui/chart';
+import { LineChart, Line, CartesianGrid, XAxis, YAxis } from 'recharts';
+
+const meta: Meta<typeof ChartContainer> = {
+  title: 'Shadcn/UI/Chart',
+  component: ChartContainer,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChartContainer>;
+
+const chartData = [
+  { month: 'Jan', desktop: 186, mobile: 80 },
+  { month: 'Feb', desktop: 305, mobile: 200 },
+  { month: 'Mar', desktop: 237, mobile: 120 },
+  { month: 'Apr', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'Jun', desktop: 214, mobile: 140 },
+];
+
+const chartConfig: ChartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: '#2563eb', // blue-600
+  },
+  mobile: {
+    label: 'Mobile',
+    color: '#16a34a', // green-600
+  },
+};
+
+export const LineExample: Story = {
+  render: () => (
+    <ChartContainer config={chartConfig} className="h-[320px] w-full">
+      <LineChart data={chartData} margin={{ left: 12, right: 12 }}>
+        <CartesianGrid vertical={false} strokeDasharray="3 3" />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+        />
+        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={32} />
+        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+        <Line
+          type="monotone"
+          dataKey="desktop"
+          stroke="var(--color-desktop)"
+          strokeWidth={2}
+          dot={false}
+        />
+        <Line
+          type="monotone"
+          dataKey="mobile"
+          stroke="var(--color-mobile)"
+          strokeWidth={2}
+          dot={false}
+        />
+        <ChartLegend content={<ChartLegendContent />} />
+      </LineChart>
+    </ChartContainer>
+  ),
+};

package/src/stories/shadcn/ui/Checkbox.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Checkbox } from '../../../shadcn/ui/checkbox';
+import { Label } from '../../../shadcn/ui/label';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Shadcn/UI/Checkbox',
+  component: Checkbox,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms" className="cursor-pointer">
+        Accept terms and conditions
+      </Label>
+    </div>
+  ),
+};
+
+function ControlledDemo() {
+  const [checked, setChecked] = useState<boolean>(false);
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="controlled" checked={checked} onCheckedChange={(v) => setChecked(Boolean(v))} />
+      <Label htmlFor="controlled">Controlled: {checked ? 'checked' : 'unchecked'}</Label>
+    </div>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledDemo />,
+};
+
+function IndeterminateDemo() {
+  const [state, setState] = useState<true | false | 'indeterminate'>('indeterminate');
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox
+        id="indeterminate"
+        checked={state}
+        onCheckedChange={(v) => setState(v as true | false | 'indeterminate')}
+      />
+      <Label htmlFor="indeterminate">Indeterminate</Label>
+    </div>
+  );
+}
+
+export const Indeterminate: Story = {
+  render: () => <IndeterminateDemo />,
+};

package/src/stories/shadcn/ui/Collapsible.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../../shadcn/ui/collapsible';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Collapsible> = {
+  title: 'Shadcn/UI/Collapsible',
+  component: Collapsible,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Collapsible>;
+
+export const Basic: Story = {
+  render: () => (
+    <Collapsible className="w-[320px]">
+      <CollapsibleTrigger asChild>
+        <Button variant="outline" className="w-full">Toggle Details</Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="text-sm text-muted-foreground mt-2 space-y-2">
+          <p>
+            Collapsible content can contain any elements. This example shows a simple
+            paragraph that expands and collapses.
+          </p>
+          <p>
+            It uses uncontrolled state managed by Radix. No React hooks are needed in the story.
+          </p>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+};