@alexgorbatchev/shadcn 0.0.18 → 0.0.20

package/llms/components/messaging/Message.md

@@ -0,0 +1,268 @@
+# Message
+
+Story: @alexgorbatchev/shadcn/components/messaging/Message
+Source: src/components/stories/messaging/Message.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/messaging/Message.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, Avatar, AvatarFallback, Bubble, BubbleContent, Button, Attachment, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, AttachmentTrigger } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { ComponentProps, ReactElement } from "react";
+import { useState } from "react";
+import { FileTextIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+Message
+```
+
+## Story controls
+
+```tsx
+{ align: { control: "select", options: ["start", "end"] } }
+```
+
+## Default args
+
+```tsx
+{ role: "article", "aria-label": "Review reply" }
+```
+
+## Default render
+
+```tsx
+(args) => (<div className="w-96">
+      <Reply {...args}/>
+    </div>)
+```
+
+## 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.
+
+### FileReply
+
+```tsx
+{
+    render: function Render(args) {
+        const [isOpen, setOpen] = useState(false);
+        return (<div className="flex w-80 flex-col gap-4">
+        <Message {...args}>
+          <MessageAvatar>
+            <Avatar>
+              <AvatarFallback>AG</AvatarFallback>
+            </Avatar>
+          </MessageAvatar>
+          <MessageContent>
+            <MessageHeader>Alex</MessageHeader>
+            <Attachment state="done" size="sm">
+              <AttachmentTrigger aria-label="Open review.pdf" onClick={() => setOpen(true)}/>
+              <AttachmentMedia>
+                <FileTextIcon />
+              </AttachmentMedia>
+              <AttachmentContent>
+                <AttachmentTitle>review.pdf</AttachmentTitle>
+                <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
+              </AttachmentContent>
+            </Attachment>
+            <MessageFooter>Delivered</MessageFooter>
+          </MessageContent>
+        </Message>
+        <output aria-label="Attachment result">{isOpen ? "Review opened" : "Review closed"}</output>
+      </div>);
+    }
+}
+```
+
+### Start
+
+```tsx
+{}
+```
+
+### End
+
+```tsx
+{
+    args: { align: "end" }
+}
+```
+
+### RTL
+
+```tsx
+{
+    args: { align: "end" },
+    render: (args) => (<div dir="rtl" lang="ar" className="w-96">
+      <Reply {...args}/>
+    </div>)
+}
+```
+
+### WithoutFooter
+
+```tsx
+{
+    render: (args) => (<div className="w-96">
+      <Message {...args}>
+        <MessageAvatar role="img" aria-label="Sender avatar">
+          <Avatar>
+            <AvatarFallback>AG</AvatarFallback>
+          </Avatar>
+        </MessageAvatar>
+        <MessageContent>
+          <Bubble>
+            <BubbleContent>The component review is ready.</BubbleContent>
+          </Bubble>
+        </MessageContent>
+      </Message>
+    </div>)
+}
+```
+
+### TallFooter
+
+```tsx
+{
+    render: (args) => (<div className="w-96">
+      <Message {...args}>
+        <MessageAvatar role="img" aria-label="Sender avatar">
+          <Avatar>
+            <AvatarFallback>AG</AvatarFallback>
+          </Avatar>
+        </MessageAvatar>
+        <MessageContent>
+          <Bubble>
+            <BubbleContent>The component review is ready.</BubbleContent>
+          </Bubble>
+          <MessageFooter className="flex-col items-start gap-2">
+            <p>Delivered to the review queue.</p>
+            <Button size="lg">Open review</Button>
+          </MessageFooter>
+        </MessageContent>
+      </Message>
+    </div>)
+}
+```
+
+### ChangingFooter
+
+```tsx
+{
+    render: () => <DynamicFooter />
+}
+```
+
+### Group
+
+```tsx
+{
+    render: () => (<div className="w-96">
+      <MessageGroup role="region" aria-label="Replies">
+        <Message>
+          <MessageAvatar />
+          <MessageContent>
+            <Bubble>
+              <BubbleContent>First reply</BubbleContent>
+            </Bubble>
+          </MessageContent>
+        </Message>
+        <Message>
+          <MessageAvatar>
+            <Avatar>
+              <AvatarFallback>AG</AvatarFallback>
+            </Avatar>
+          </MessageAvatar>
+          <MessageContent>
+            <Bubble>
+              <BubbleContent>Second reply</BubbleContent>
+            </Bubble>
+          </MessageContent>
+        </Message>
+      </MessageGroup>
+    </div>)
+}
+```
+
+### Actions
+
+```tsx
+{
+    render: () => <ActionFooter />
+}
+```
+
+### GrowingFooterContent
+
+```tsx
+{
+    render: () => <GrowingFooter />
+}
+```
+
+### CustomFooterSpacing
+
+```tsx
+{
+    render: () => (<div className="w-96">
+      <Message density="compact">
+        <MessageAvatar role="img" aria-label="Sender avatar">
+          <Avatar>
+            <AvatarFallback>AG</AvatarFallback>
+          </Avatar>
+        </MessageAvatar>
+        <MessageContent className="gap-8">
+          <Bubble>
+            <BubbleContent>The component review is ready.</BubbleContent>
+          </Bubble>
+          <MessageFooter density="comfortable">
+            <Button size="lg">Review details</Button>
+          </MessageFooter>
+        </MessageContent>
+      </Message>
+    </div>)
+}
+```
+
+### StandaloneFooter
+
+```tsx
+{
+    render: () => (<MessageFooter role="group" aria-label="Reply actions">
+      <Button onClick={standaloneClick}>Review details</Button>
+    </MessageFooter>)
+}
+```
+
+### PaddedContent
+
+```tsx
+{
+    render: () => (<div className="w-96">
+      <Message density="compact">
+        <MessageAvatar role="img" aria-label="Sender avatar">
+          <Avatar>
+            <AvatarFallback>AG</AvatarFallback>
+          </Avatar>
+        </MessageAvatar>
+        <MessageContent className="gap-8 p-4">
+          <Bubble>
+            <BubbleContent>The component review is ready.</BubbleContent>
+          </Bubble>
+          <MessageFooter className="mt-4">
+            <Button>Review details</Button>
+          </MessageFooter>
+        </MessageContent>
+      </Message>
+    </div>)
+}
+```

package/llms/components/messaging/MessageScroller.md

@@ -0,0 +1,227 @@
+# MessageScroller
+
+Story: @alexgorbatchev/shadcn/components/messaging/MessageScroller
+Source: src/components/stories/messaging/MessageScroller.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/messaging/MessageScroller.stories.tsx)
+
+## Public imports
+
+```tsx
+import { type Density, Button, Bubble, BubbleContent, Marker, MarkerContent } from "@alexgorbatchev/shadcn";
+import { MessageScroller, MessageScrollerProvider, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@alexgorbatchev/shadcn/message-scroller";
+```
+
+## Supporting imports
+
+```tsx
+import type { ComponentProps, ReactElement } from "react";
+import { useState } from "react";
+```
+
+## Default component
+
+```tsx
+MessageScroller
+```
+
+## Default render
+
+```tsx
+(args) => <Transcript density={args.density}/>
+```
+
+## 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.
+
+### AnimatedNewTurn
+
+```tsx
+{
+    render: () => (<AnimatedTranscript onUpdate={(values) => animationUpdate({ ...values })} ref={(element) => {
+            animationRef(element);
+        }}/>)
+}
+```
+
+### VirtualizedHistory
+
+```tsx
+{
+    render: () => <VirtualizedTranscript />
+}
+```
+
+### InterruptedResponse
+
+```tsx
+{
+    render: () => <StreamingTranscript />
+}
+```
+
+### End
+
+```tsx
+{}
+```
+
+### Start
+
+```tsx
+{
+    render: () => <Transcript defaultScrollPosition="start"/>
+}
+```
+
+### LastAnchor
+
+```tsx
+{
+    render: () => (<Transcript defaultScrollPosition="last-anchor" rowCount={10} initialStreamCount={2} scrollPreviousItemPeek={20}/>)
+}
+```
+
+### Fits
+
+```tsx
+{
+    render: () => <Transcript rowCount={1}/>
+}
+```
+
+### Empty
+
+```tsx
+{
+    render: () => <Transcript rowCount={0}/>
+}
+```
+
+### CommandsAndVisibility
+
+```tsx
+{
+    render: () => <Transcript defaultScrollPosition="start" scrollPreviousItemPeek={16}/>
+}
+```
+
+### PrependHistory
+
+```tsx
+{
+    render: () => <Transcript defaultScrollPosition="start"/>
+}
+```
+
+### StreamAtLiveEdge
+
+```tsx
+{
+    render: () => <Transcript autoScroll/>
+}
+```
+
+### ReaderStaysPut
+
+```tsx
+{
+    render: () => <Transcript defaultScrollPosition="start"/>
+}
+```
+
+### Compact
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### NewTurn
+
+```tsx
+{
+    render: () => <Transcript defaultScrollPosition="start" scrollPreviousItemPeek={24}/>
+}
+```
+
+### CustomControl
+
+```tsx
+{
+    render: () => (<MessageScrollerProvider defaultScrollPosition="start">
+      <div className="h-64 w-96">
+        <MessageScroller>
+          <MessageScrollerViewport>
+            <MessageScrollerContent>
+              {[0, 1, 2, 3].map((row) => (<MessageScrollerItem key={row} messageId={`custom-${row}`}>
+                  <p className="h-32">Custom reply {row}</p>
+                </MessageScrollerItem>))}
+            </MessageScrollerContent>
+          </MessageScrollerViewport>
+          <MessageScrollerButton behavior="instant" onClick={customButtonClick} ref={customButtonRef} render={<Button variant="outline" size="sm"/>}>
+            Jump to latest
+          </MessageScrollerButton>
+        </MessageScroller>
+      </div>
+    </MessageScrollerProvider>)
+}
+```
+
+### NativeRootRef
+
+```tsx
+{
+    render: () => <Transcript rootRef={rootRef} defaultScrollPosition="start"/>
+}
+```
+
+### QueuedPermalink
+
+```tsx
+{
+    render: () => (<MessageScrollerProvider defaultScrollPosition="start">
+      <SavedThread />
+    </MessageScrollerProvider>)
+}
+```
+
+### SystemMarkerAnchor
+
+```tsx
+{
+    render: () => (<MessageScrollerProvider defaultScrollPosition="last-anchor" scrollPreviousItemPeek={24}>
+      <div className="h-64 w-96">
+        <MessageScroller>
+          <MessageScrollerViewport>
+            <MessageScrollerContent className="gap-4 p-4">
+              {[0, 1, 2].map((index) => (<MessageScrollerItem key={index} messageId={`earlier-${index}`}>
+                  <Bubble variant="muted">
+                    <BubbleContent>
+                      <p className="h-20">Earlier reply {index}</p>
+                    </BubbleContent>
+                  </Bubble>
+                </MessageScrollerItem>))}
+              <MessageScrollerItem messageId="handoff" scrollAnchor role="article" aria-label="Team handoff">
+                <Marker variant="separator">
+                  <MarkerContent>Alex joined the review</MarkerContent>
+                </Marker>
+              </MessageScrollerItem>
+              <MessageScrollerItem messageId="handoff-reply">
+                <Bubble>
+                  <BubbleContent>
+                    <p className="h-80">The review continues with Alex.</p>
+                  </BubbleContent>
+                </Bubble>
+              </MessageScrollerItem>
+            </MessageScrollerContent>
+          </MessageScrollerViewport>
+          <MessageScrollerButton behavior="instant"/>
+        </MessageScroller>
+      </div>
+      <Controls />
+    </MessageScrollerProvider>)
+}
+```

package/llms/components/navigation/Breadcrumb.md

@@ -0,0 +1,159 @@
+# Breadcrumb
+
+Story: @alexgorbatchev/shadcn/components/navigation/Breadcrumb
+Source: src/components/stories/navigation/Breadcrumb.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/navigation/Breadcrumb.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { DotIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+Breadcrumb
+```
+
+## Default render
+
+```tsx
+(args) => (<Breadcrumb {...args}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#home">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Components</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>)
+```
+
+## 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
+{}
+```
+
+### Collapsed
+
+```tsx
+{
+    render: (args) => (<Breadcrumb {...args}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink render={<a href="#home"/>}>Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>/</BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Components</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>)
+}
+```
+
+### CustomSeparator
+
+```tsx
+{
+    render: (args) => (<Breadcrumb {...args}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#home">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <DotIcon />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>Components</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>)
+}
+```
+
+### CustomLink
+
+```tsx
+{
+    render: (args) => (<Breadcrumb {...args}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink ref={linkRef} onClick={onLinkClick} render={<a href="#custom-home" ref={renderedRef} onClick={(event) => {
+                event.preventDefault();
+                onRenderedClick();
+            }}/>}>
+            Home
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Components</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>)
+}
+```
+
+### Dropdown
+
+```tsx
+{
+    render: (args) => (<Breadcrumb {...args}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#home">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger render={<Button variant="ghost" size="xs" aria-label="Show ancestors"/>}>
+              <BreadcrumbEllipsis />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuGroup>
+                <DropdownMenuItem render={<a href="#projects"/>} onClick={(event) => {
+            event.preventDefault();
+            onSelect();
+        }}>
+                  Projects
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Components</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>)
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    args: { dir: "rtl" }
+}
+```