@alexgorbatchev/shadcn 0.0.18 → 0.0.20

package/llms/components/navigation/NavigationMenu.md

@@ -0,0 +1,379 @@
+# NavigationMenu
+
+Story: @alexgorbatchev/shadcn/components/navigation/NavigationMenu
+Source: src/components/stories/navigation/NavigationMenu.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/navigation/NavigationMenu.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DirectionProvider, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+import { FileIcon, SettingsIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+NavigationMenu
+```
+
+## Default args
+
+```tsx
+{ delay: 0, closeDelay: 0, className: fn(() => "font-normal") }
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Default
+
+```tsx
+{
+    render: (args) => (<NavigationMenu {...args} aria-label="Main navigation">
+      <NavigationMenuList>
+        <NavigationMenuItem value="products">
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#components" active>
+              Components
+            </NavigationMenuLink>
+            <NavigationMenuLink href="#themes">Themes</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem value="learn">
+          <NavigationMenuTrigger>Learn</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#guides">Guides</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#about">About</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>)
+}
+```
+
+### Compact
+
+```tsx
+{
+    render: (args) => (<NavigationMenu {...args} aria-label="Main navigation">
+      <NavigationMenuList>
+        <NavigationMenuItem value="products">
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#components" active>
+              Components
+            </NavigationMenuLink>
+            <NavigationMenuLink href="#themes">Themes</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem value="learn">
+          <NavigationMenuTrigger>Learn</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#guides">Guides</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#about">About</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>),
+    globals: { density: "compact" }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: (args) => (<NavigationMenu {...args} aria-label="Main navigation">
+      <NavigationMenuList>
+        <NavigationMenuItem value="products">
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#components" active>
+              Components
+            </NavigationMenuLink>
+            <NavigationMenuLink href="#themes">Themes</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem value="learn">
+          <NavigationMenuTrigger>Learn</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#guides">Guides</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#about">About</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>),
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ]
+}
+```
+
+### ControlledValue
+
+```tsx
+{
+    render: function Render() {
+        const [value, setValue] = useState<number | null>(null);
+        return (<>
+        <NavigationMenu<number> value={value} onValueChange={(nextValue) => setValue(nextValue)} delay={0} closeDelay={0} aria-label="Controlled navigation">
+          <NavigationMenuList>
+            <NavigationMenuItem value={1}>
+              <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <NavigationMenuLink href="#components">Components</NavigationMenuLink>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+        <output aria-label="Open navigation item">{value?.toFixed(0) ?? "Closed"}</output>
+      </>);
+    }
+}
+```
+
+### LinkComponent
+
+```tsx
+{
+    render: (args) => (<NavigationMenu {...args} aria-label="Custom link navigation">
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#navigation-documentation" active ref={linkRef} onClick={linkClick} render={<a target="_self" onClick={renderClick}/>} className={navigationMenuTriggerStyle()}>
+            Documentation
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>)
+}
+```
+
+### RightToLeftLinkComponent
+
+```tsx
+{
+    render: (args) => (<NavigationMenu {...args} aria-label="Custom link navigation">
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#navigation-documentation" active ref={linkRef} onClick={linkClick} render={<a target="_self" onClick={renderClick}/>} className={navigationMenuTriggerStyle()}>
+            Documentation
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>),
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftCompact
+
+```tsx
+{
+    render: (args) => (<NavigationMenu {...args} aria-label="Main navigation">
+      <NavigationMenuList>
+        <NavigationMenuItem value="products">
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#components" active>
+              Components
+            </NavigationMenuLink>
+            <NavigationMenuLink href="#themes">Themes</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem value="learn">
+          <NavigationMenuTrigger>Learn</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#guides">Guides</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#about">About</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>),
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ],
+    globals: { density: "compact" }
+}
+```
+
+### WithIcons
+
+```tsx
+{
+    render: function Render(args) {
+        const [destination, setDestination] = useState("No destination");
+        return (<>
+        <NavigationMenu {...args} aria-label="Workspace navigation">
+          <NavigationMenuList>
+            <NavigationMenuItem value="workspace">
+              <NavigationMenuTrigger>Workspace</NavigationMenuTrigger>
+              <NavigationMenuContent className="w-64">
+                <NavigationMenuLink href="#navigation-files" target="_self" closeOnClick onClick={() => setDestination("Files")}>
+                  <FileIcon aria-hidden="true"/>
+                  Files
+                </NavigationMenuLink>
+                <NavigationMenuLink href="#navigation-settings" target="_self" closeOnClick onClick={() => setDestination("Settings")}>
+                  <SettingsIcon aria-hidden="true"/>
+                  Settings
+                </NavigationMenuLink>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+        <output aria-label="Navigation destination">{destination}</output>
+      </>);
+    }
+}
+```
+
+### RightToLeftWithIcons
+
+```tsx
+{
+    render: function Render(args) {
+        const [destination, setDestination] = useState("No destination");
+        return (<>
+        <NavigationMenu {...args} aria-label="Workspace navigation">
+          <NavigationMenuList>
+            <NavigationMenuItem value="workspace">
+              <NavigationMenuTrigger>Workspace</NavigationMenuTrigger>
+              <NavigationMenuContent className="w-64">
+                <NavigationMenuLink href="#navigation-files" target="_self" closeOnClick onClick={() => setDestination("Files")}>
+                  <FileIcon aria-hidden="true"/>
+                  Files
+                </NavigationMenuLink>
+                <NavigationMenuLink href="#navigation-settings" target="_self" closeOnClick onClick={() => setDestination("Settings")}>
+                  <SettingsIcon aria-hidden="true"/>
+                  Settings
+                </NavigationMenuLink>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+        <output aria-label="Navigation destination">{destination}</output>
+      </>);
+    },
+    decorators: RightToLeft.decorators
+}
+```
+
+### CancelOpening
+
+```tsx
+{
+    render: (args) => (<NavigationMenu {...args} aria-label="Main navigation">
+      <NavigationMenuList>
+        <NavigationMenuItem value="products">
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#components" active>
+              Components
+            </NavigationMenuLink>
+            <NavigationMenuLink href="#themes">Themes</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem value="learn">
+          <NavigationMenuTrigger>Learn</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#guides">Guides</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#about">About</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>),
+    args: { onValueChange: (_value, details) => details.cancel() }
+}
+```
+
+### CancelClosing
+
+```tsx
+{
+    render: (args) => (<NavigationMenu {...args} aria-label="Main navigation">
+      <NavigationMenuList>
+        <NavigationMenuItem value="products">
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#components" active>
+              Components
+            </NavigationMenuLink>
+            <NavigationMenuLink href="#themes">Themes</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem value="learn">
+          <NavigationMenuTrigger>Learn</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#guides">Guides</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#about">About</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>),
+    args: {
+        onValueChange: (value, details) => {
+            if (value === null)
+                details.cancel();
+        },
+    }
+}
+```
+
+### DefaultOpen
+
+```tsx
+{
+    render: (args) => (<NavigationMenu {...args} aria-label="Main navigation">
+      <NavigationMenuList>
+        <NavigationMenuItem value="products">
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#components" active>
+              Components
+            </NavigationMenuLink>
+            <NavigationMenuLink href="#themes">Themes</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem value="learn">
+          <NavigationMenuTrigger>Learn</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#guides">Guides</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#about">About</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>),
+    args: { defaultValue: "products" }
+}
+```

package/llms/components/navigation/Pagination.md

@@ -0,0 +1,222 @@
+# Pagination
+
+Story: @alexgorbatchev/shadcn/components/navigation/Pagination
+Source: src/components/stories/navigation/Pagination.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/navigation/Pagination.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Field, FieldLabel, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState, type MouseEvent } from "react";
+```
+
+## Default component
+
+```tsx
+Pagination
+```
+
+## Story controls
+
+```tsx
+{ density: { control: "select", options: ["compact", "comfortable"] } }
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Default
+
+```tsx
+{
+    render: function Render(args) {
+        const [page, setPage] = useState(1);
+        return (<div>
+        <Pagination {...args}>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#page-1" onClick={(event) => {
+                event.preventDefault();
+                setPage(1);
+            }}/>
+            </PaginationItem>
+            {[1, 2, 3].map((number) => (<PaginationItem key={number}>
+                <PaginationLink href={`#page-${number}`} isActive={page === number} onClick={(event) => {
+                    event.preventDefault();
+                    setPage(number);
+                }}>
+                  {number}
+                </PaginationLink>
+              </PaginationItem>))}
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#page-3" onClick={(event) => {
+                event.preventDefault();
+                setPage(3);
+            }}/>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+        <output aria-label="Current page">{page}</output>
+      </div>);
+    }
+}
+```
+
+### Compact
+
+```tsx
+{
+    render: function Render(args) {
+        const [page, setPage] = useState(1);
+        return (<div>
+        <Pagination {...args}>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#page-1" onClick={(event) => {
+                event.preventDefault();
+                setPage(1);
+            }}/>
+            </PaginationItem>
+            {[1, 2, 3].map((number) => (<PaginationItem key={number}>
+                <PaginationLink href={`#page-${number}`} isActive={page === number} onClick={(event) => {
+                    event.preventDefault();
+                    setPage(number);
+                }}>
+                  {number}
+                </PaginationLink>
+              </PaginationItem>))}
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#page-3" onClick={(event) => {
+                event.preventDefault();
+                setPage(3);
+            }}/>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+        <output aria-label="Current page">{page}</output>
+      </div>);
+    },
+    args: { density: "compact" }
+}
+```
+
+### Simple
+
+```tsx
+{
+    render: () => (<Pagination>
+      <PaginationContent>
+        {[1, 2, 3].map((page) => (<PaginationItem key={page}>
+            <PaginationLink href={`#page-${page}`} isActive={page === 2} onClick={(event) => event.preventDefault()}>
+              {page}
+            </PaginationLink>
+          </PaginationItem>))}
+      </PaginationContent>
+    </Pagination>)
+}
+```
+
+### WithRowsPerPage
+
+```tsx
+{
+    render: () => (<div className="flex items-center gap-4">
+      <Field orientation="horizontal" className="w-fit">
+        <FieldLabel htmlFor="rows-per-page">Rows per page</FieldLabel>
+        <Select defaultValue="25">
+          <SelectTrigger id="rows-per-page" className="w-20">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="10">10</SelectItem>
+              <SelectItem value="25">25</SelectItem>
+              <SelectItem value="50">50</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </Field>
+      <Pagination className="mx-0 w-auto">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#previous" onClick={onPageLink}/>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#next" onClick={onPageLink}/>
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>)
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: function Render(args) {
+        const [page, setPage] = useState(1);
+        return (<div>
+        <Pagination {...args}>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#page-1" onClick={(event) => {
+                event.preventDefault();
+                setPage(1);
+            }}/>
+            </PaginationItem>
+            {[1, 2, 3].map((number) => (<PaginationItem key={number}>
+                <PaginationLink href={`#page-${number}`} isActive={page === number} onClick={(event) => {
+                    event.preventDefault();
+                    setPage(number);
+                }}>
+                  {number}
+                </PaginationLink>
+              </PaginationItem>))}
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#page-3" onClick={(event) => {
+                event.preventDefault();
+                setPage(3);
+            }}/>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+        <output aria-label="Current page">{page}</output>
+      </div>);
+    },
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+        <div dir="ltr">
+          <Pagination aria-label="LTR reference">
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious href="#previous" aria-label="Previous LTR" onClick={(event) => event.preventDefault()}/>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationNext href="#next" aria-label="Next LTR" onClick={(event) => event.preventDefault()}/>
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+      </div>),
+    ]
+}
+```