@k3-universe/react-kit 0.0.1

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandShortcut,
+} from '../../../shadcn/ui/command';
+
+const meta: Meta<typeof Command> = {
+  title: 'Shadcn/UI/Command',
+  component: Command,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Command>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Command>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
+              Calendar
+              <CommandShortcut>⌘C</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              Search Emoji
+              <CommandShortcut>⌘E</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              Calculator
+              <CommandShortcut>⌘K</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem>Profile</CommandItem>
+            <CommandItem>Billing</CommandItem>
+            <CommandItem>Settings</CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </div>
+  ),
+};

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+} from '../../../shadcn/ui/context-menu';
+
+const meta: Meta<typeof ContextMenu> = {
+  title: 'Shadcn/UI/ContextMenu',
+  component: ContextMenu,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ContextMenu>;
+
+export const Basic: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="flex h-40 w-full max-w-md items-center justify-center rounded-md border text-muted-foreground">
+          Right-click here
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem>Back <ContextMenuShortcut>⌘[</ContextMenuShortcut></ContextMenuItem>
+        <ContextMenuItem disabled>Forward <ContextMenuShortcut>⌘]</ContextMenuShortcut></ContextMenuItem>
+        <ContextMenuItem>Reload <ContextMenuShortcut>⌘R</ContextMenuShortcut></ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent>
+            <ContextMenuItem>Save Page As…</ContextMenuItem>
+            <ContextMenuItem>Create Shortcut…</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuLabel>Appearance</ContextMenuLabel>
+        <ContextMenuCheckboxItem checked>Always Show Bookmarks Bar</ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuLabel>Search Engine</ContextMenuLabel>
+        <ContextMenuRadioGroup value="google">
+          <ContextMenuRadioItem value="google">Google</ContextMenuRadioItem>
+          <ContextMenuRadioItem value="bing">Bing</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../../../shadcn/ui/dialog';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Shadcn/UI/Dialog',
+  component: Dialog,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+export const Basic: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="default">Open dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
+        </DialogHeader>
+        <div className="py-2 text-sm text-muted-foreground">Dialog body content...</div>
+        <DialogFooter>
+          <Button variant="outline">Cancel</Button>
+          <Button>Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from '../../../shadcn/ui/drawer';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Shadcn/UI/Drawer',
+  component: Drawer,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+export const Basic: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Edit profile</DrawerTitle>
+          <DrawerDescription>Make changes to your profile here. Click save when you're done.</DrawerDescription>
+        </DrawerHeader>
+        <div className="px-4 pb-4 text-sm text-muted-foreground">
+          This is a bottom sheet drawer powered by <code>vaul</code> with shadcn styles.
+        </div>
+        <DrawerFooter>
+          <Button type="button">Save changes</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from '../../../shadcn/ui/dropdown-menu';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'Shadcn/UI/DropdownMenu',
+  component: DropdownMenu,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Basic: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut></DropdownMenuItem>
+          <DropdownMenuItem>Billing <DropdownMenuShortcut>⌘B</DropdownMenuShortcut></DropdownMenuItem>
+          <DropdownMenuItem>Settings <DropdownMenuShortcut>⌘S</DropdownMenuShortcut></DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem checked>Email notifications</DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem>SMS notifications</DropdownMenuCheckboxItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Team</DropdownMenuLabel>
+        <DropdownMenuRadioGroup value="a">
+          <DropdownMenuRadioItem value="a">Team A</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="b">Team B</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>Invite user</DropdownMenuItem>
+            <DropdownMenuItem>New project</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Log out <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut></DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Form } from '../../../shadcn/ui/form';
+
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from '../../../shadcn/ui/form';
+import { Input } from '../../../shadcn/ui/input';
+import { Button } from '../../../shadcn/ui/button';
+import { toast } from 'sonner';
+
+const meta: Meta<typeof Form> = {
+  title: 'Shadcn/UI/Form',
+  component: Form,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Form>;
+
+function ValidatedFormDemo() {
+  const schema = z.object({
+    email: z.string().email('Please enter a valid email'),
+    password: z.string().min(6, 'Password must be at least 6 characters'),
+  });
+
+  type FormValues = z.infer<typeof schema>;
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { email: '', password: '' },
+    mode: 'onTouched',
+  });
+
+  function onSubmit(values: FormValues) {
+    // For demo purposes in Storybook
+    toast.success(`Submitted: ${JSON.stringify(values, null, 2)}`);
+  }
+
+  return (
+    <div className="max-w-md space-y-6">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input type="email" placeholder="you@example.com" {...field} />
+                </FormControl>
+                <FormDescription>We’ll never share your email.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input type="password" placeholder="••••••••" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit" className="w-full">
+            Sign in
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+export const WithValidation: Story = {
+  render: () => <ValidatedFormDemo />,
+};
+

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '../../../shadcn/ui/hover-card';
+import { Avatar, AvatarFallback, AvatarImage } from '../../../shadcn/ui/avatar';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof HoverCard> = {
+  title: 'Shadcn/UI/HoverCard',
+  component: HoverCard,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HoverCard>;
+
+export const Basic: Story = {
+  render: () => (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="link" className="px-0">@shadcn</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex space-x-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>SC</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">shadcn</h4>
+            <p className="text-sm text-muted-foreground">
+              Creator of shadcn/ui. Building beautiful, accessible components.
+            </p>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+};

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from '../../../shadcn/ui/input';
+import { Label } from '../../../shadcn/ui/label';
+
+const meta: Meta<typeof Input> = {
+  title: 'Shadcn/UI/Input',
+  component: Input,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-2">
+      <Label htmlFor="email">Email</Label>
+      <Input id="email" type="email" placeholder="m@example.com" />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-2">
+      <Label htmlFor="disabled">Disabled</Label>
+      <Input id="disabled" placeholder="Can't type here" disabled />
+    </div>
+  ),
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <div className="relative w-[280px]">
+      <span className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground">@</span>
+      <Input className="pl-8" placeholder="username" />
+    </div>
+  ),
+};

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '../../../shadcn/ui/input-otp';
+
+const meta: Meta<typeof InputOTP> = {
+  title: 'Shadcn/UI/InputOTP',
+  component: InputOTP,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputOTP>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground">Enter the 6-digit code we emailed you.</p>
+      <InputOTP maxLength={6} aria-label="One-time password input">
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  ),
+};

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from '../../../shadcn/ui/label';
+import { Input } from '../../../shadcn/ui/input';
+
+const meta: Meta<typeof Label> = {
+  title: 'Shadcn/UI/Label',
+  component: Label,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="grid gap-3 w-[320px]">
+      <div className="grid gap-1.5">
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" placeholder="you@example.com" />
+      </div>
+      <div className="grid gap-1.5">
+        <Label htmlFor="disabled" className="group" data-disabled>
+          Disabled input
+        </Label>
+        <Input id="disabled" placeholder="Disabled" disabled />
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarLabel,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+} from '../../../shadcn/ui/menubar';
+
+const meta: Meta<typeof Menubar> = {
+  title: 'Shadcn/UI/Menubar',
+  component: Menubar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Menubar>;
+
+export const Basic: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
+          <MenubarItem>New Window <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Close Window <MenubarShortcut>⌘W</MenubarShortcut></MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
+          <MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
+          <MenubarSeparator />
+          <MenubarCheckboxItem checked>Show Ruler</MenubarCheckboxItem>
+          <MenubarCheckboxItem>Show Toolbar</MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarLabel>Zoom</MenubarLabel>
+          <MenubarRadioGroup value="fit">
+            <MenubarRadioItem value="fit">Fit</MenubarRadioItem>
+            <MenubarRadioItem value="fill">Fill</MenubarRadioItem>
+          </MenubarRadioGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Reload <MenubarShortcut>⌘R</MenubarShortcut></MenubarItem>
+          <MenubarItem>Toggle Full Screen <MenubarShortcut>⌃⌘F</MenubarShortcut></MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+};

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+} from '../../../shadcn/ui/navigation-menu';
+
+const meta: Meta<typeof NavigationMenu> = {
+  title: 'Shadcn/UI/NavigationMenu',
+  component: NavigationMenu,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NavigationMenu>;
+
+export const Basic: Story = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="grid w-[400px] gap-3 p-3 md:w-[500px] md:grid-cols-2">
+              <NavigationMenuLink asChild>
+                <a className="rounded-md border p-3" href="https://example.com/analytics">Analytics</a>
+              </NavigationMenuLink>
+              <NavigationMenuLink asChild>
+                <a className="rounded-md border p-3" href="https://example.com/engagement">Engagement</a>
+              </NavigationMenuLink>
+              <NavigationMenuLink asChild>
+                <a className="rounded-md border p-3" href="https://example.com/security">Security</a>
+              </NavigationMenuLink>
+              <NavigationMenuLink asChild>
+                <a className="rounded-md border p-3" href="https://example.com/integrations">Integrations</a>
+              </NavigationMenuLink>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="https://example.com/pricing" className="rounded-md px-4 py-2">Pricing</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+      <NavigationMenuIndicator />
+      <NavigationMenuViewport />
+    </NavigationMenu>
+  ),
+};

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from '../../../shadcn/ui/pagination';
+
+const meta: Meta<typeof Pagination> = {
+  title: 'Shadcn/UI/Pagination',
+  component: Pagination,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Pagination>;
+
+export const Basic: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">10</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};