@alexgorbatchev/shadcn 0.0.18 → 0.0.20

package/llms/components/messaging/Bubble.md

@@ -0,0 +1,411 @@
+# Bubble
+
+Story: @alexgorbatchev/shadcn/components/messaging/Bubble
+Source: src/components/stories/messaging/Bubble.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/messaging/Bubble.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Tooltip, TooltipContent, TooltipTrigger, Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { ReactElement } from "react";
+import { useState } from "react";
+```
+
+## Default component
+
+```tsx
+Bubble
+```
+
+## Story controls
+
+```tsx
+{
+    variant: {
+        control: "select",
+        options: ["default", "secondary", "muted", "tinted", "outline", "ghost", "destructive"],
+    },
+    align: { control: "select", options: ["start", "end"] },
+}
+```
+
+## Default args
+
+```tsx
+{ role: "article", "aria-label": "Conversation reply" }
+```
+
+## Default render
+
+```tsx
+(args) => (<div className="flex w-80 flex-col">
+      <Bubble {...args}>
+        <BubbleContent>
+          The request could not be completed. Review the logs and retry after resolving the reported error.
+        </BubbleContent>
+      </Bubble>
+    </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.
+
+### ReadReceipt
+
+```tsx
+{
+    args: { onClick: fn() },
+    render: (args) => (<div className="w-80 p-4">
+      <Tooltip>
+        <Bubble {...args} variant="muted">
+          <BubbleContent aria-label="Review sent. Read by Alex at 10:42" render={<TooltipTrigger render={<button type="button"/>}/>}>
+            Review sent
+          </BubbleContent>
+        </Bubble>
+        <TooltipContent>Read by Alex at 10:42</TooltipContent>
+      </Tooltip>
+    </div>)
+}
+```
+
+### ErrorDetails
+
+```tsx
+{
+    render: () => (<div className="w-80 p-4">
+      <Popover>
+        <Bubble variant="destructive">
+          <BubbleContent render={<PopoverTrigger render={<button type="button"/>}/>}>
+            Message delivery failed
+          </BubbleContent>
+        </Bubble>
+        <PopoverContent>
+          <PopoverTitle>Delivery details</PopoverTitle>
+          <PopoverDescription>The recipient is offline. Retry when the connection returns.</PopoverDescription>
+        </PopoverContent>
+      </Popover>
+    </div>)
+}
+```
+
+### Default
+
+```tsx
+{}
+```
+
+### Secondary
+
+```tsx
+{
+    args: { variant: "secondary" }
+}
+```
+
+### Muted
+
+```tsx
+{
+    args: { variant: "muted" }
+}
+```
+
+### Tinted
+
+```tsx
+{
+    args: { variant: "tinted" }
+}
+```
+
+### Outline
+
+```tsx
+{
+    args: { variant: "outline" }
+}
+```
+
+### Destructive
+
+```tsx
+{
+    args: { variant: "destructive" }
+}
+```
+
+### Ghost
+
+```tsx
+{
+    args: { variant: "ghost" }
+}
+```
+
+### Group
+
+```tsx
+{
+    render: () => (<div className="w-80">
+      <BubbleGroup role="region" aria-label="Sender replies">
+        <Bubble>
+          <BubbleContent>First reply</BubbleContent>
+        </Bubble>
+        <Bubble align="end">
+          <BubbleContent>Second reply</BubbleContent>
+        </Bubble>
+      </BubbleGroup>
+    </div>)
+}
+```
+
+### RTL
+
+```tsx
+{
+    render: () => (<div dir="rtl" className="flex w-80 flex-col">
+      <Bubble align="end" role="article" aria-label="RTL reply">
+        <BubbleContent>رسالة قصيرة</BubbleContent>
+      </Bubble>
+    </div>)
+}
+```
+
+### Link
+
+```tsx
+{
+    args: { variant: "outline" },
+    render: (args) => (<Bubble {...args}>
+      <BubbleContent render={<a href="#bubble-details"/>}>Read the report</BubbleContent>
+    </Bubble>)
+}
+```
+
+### Action
+
+```tsx
+{
+    render: () => (<Bubble variant="tinted">
+      <BubbleContent onClick={bubbleAction} ref={contentRef} render={<button type="button" onClick={renderedAction}/>}>
+        Retry request
+      </BubbleContent>
+    </Bubble>)
+}
+```
+
+### Reactions
+
+```tsx
+{
+    render: () => (<div className="py-8">
+      <ReactionExample />
+    </div>)
+}
+```
+
+### DecorativeReactions
+
+```tsx
+{
+    render: () => (<div className="py-8">
+      <Bubble>
+        <BubbleContent>Thanks for reviewing.</BubbleContent>
+        <BubbleReactions role="img" aria-label="Reactions: thumbs up and rocket">
+          <span>👍</span>
+          <span>🚀</span>
+        </BubbleReactions>
+      </Bubble>
+    </div>)
+}
+```
+
+### RTLReactions
+
+```tsx
+{
+    render: () => (<div dir="rtl" className="flex w-80 flex-col py-8">
+      <Bubble role="article" aria-label="RTL conversation">
+        <BubbleContent>هذه رسالة للمراجعة</BubbleContent>
+        <BubbleReactions align="start" role="img" aria-label="Reaction: thumbs up">
+          👍
+        </BubbleReactions>
+      </Bubble>
+    </div>)
+}
+```
+
+### RenderCallback
+
+```tsx
+{
+    render: () => (<Bubble variant="outline">
+      <BubbleContent render={(props, state) => <a {...props} href="#callback-details" aria-label={`Open ${state.slot}`}/>}>
+        Read details
+      </BubbleContent>
+    </Bubble>)
+}
+```
+
+### CollapsibleReply
+
+```tsx
+{
+    render: () => (<Bubble variant="muted">
+      <BubbleContent>
+        <Collapsible>
+          <p>The review found two focus states to update.</p>
+          <CollapsibleTrigger render={<Button variant="link"/>}>Read details</CollapsibleTrigger>
+          <CollapsibleContent>The menu needs separate hover and keyboard focus styling.</CollapsibleContent>
+        </Collapsible>
+      </BubbleContent>
+    </Bubble>)
+}
+```
+
+### SpacedReactions
+
+```tsx
+{
+    render: () => (<BubbleGroup className="gap-8">
+      <Bubble>
+        <BubbleContent>The review is ready.</BubbleContent>
+        <BubbleReactions>
+          <Button size="xs" variant="secondary">
+            Like review
+          </Button>
+        </BubbleReactions>
+      </Bubble>
+      <Bubble variant="ghost">
+        <BubbleContent>Next reply</BubbleContent>
+      </Bubble>
+    </BubbleGroup>)
+}
+```
+
+### Typeset
+
+```tsx
+{
+    args: { variant: "ghost" },
+    render: (args) => (<div className="w-full max-w-2xl">
+      <Bubble {...args} className="w-full">
+        <BubbleContent className="w-full">
+          <TypesetDocumentExample />
+        </BubbleContent>
+      </Bubble>
+    </div>)
+}
+```
+
+### TypesetRtl
+
+```tsx
+{
+    args: { variant: "ghost" },
+    render: (args) => (<div dir="rtl" className="w-full max-w-2xl">
+      <Bubble {...args} className="w-full">
+        <BubbleContent className="w-full">
+          <TypesetDocumentExample />
+        </BubbleContent>
+      </Bubble>
+    </div>)
+}
+```
+
+### TypesetRhythm
+
+```tsx
+{
+    render: () => <TypesetRhythmExample />
+}
+```
+
+### TypesetOptOut
+
+```tsx
+{
+    render: () => (<div>
+      <section aria-label="Unstyled reference">
+        <h2>Reference heading</h2>
+        <p>Reference paragraph</p>
+      </section>
+      <article className="typeset" aria-label="Opt-out document">
+        <h2>Styled heading</h2>
+        <div className="not-typeset">
+          <h2>Class opt-out heading</h2>
+          <div className="typeset [--typeset-size:2em] [--typeset-leading:2]">
+            <h2>Nested class heading</h2>
+            <p>Nested class paragraph</p>
+          </div>
+        </div>
+        <div data-not-typeset>
+          <h2>Attribute opt-out heading</h2>
+          <div className="typeset [--typeset-size:2em] [--typeset-leading:2]">
+            <h2>Nested attribute heading</h2>
+            <p>Nested attribute paragraph</p>
+          </div>
+        </div>
+      </article>
+    </div>)
+}
+```
+
+### TypesetTables
+
+```tsx
+{
+    render: () => (<article className="typeset w-72" aria-label="Responsive findings">
+      <table aria-label="Wrapped findings">
+        <caption>Readable findings</caption>
+        <thead>
+          <tr>
+            <th scope="col">Description</th>
+            <th scope="col">Result</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>A normal sentence wraps within the document width.</td>
+            <td>Verified</td>
+          </tr>
+        </tbody>
+      </table>
+      <div className="typeset-scroll" role="region" aria-label="Wide findings" tabIndex={0}>
+        <table aria-label="Scrollable findings">
+          <thead>
+            <tr>
+              <th scope="col">Detailed description of the observed behavior</th>
+              <th scope="col">Additional verification and supporting notes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>The earlier columns remain available when scrolling horizontally.</td>
+              <td>
+                <a href="#final-findings">Open final findings</a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p id="final-findings">Final findings are available.</p>
+    </article>)
+}
+```
+
+### TypesetStreaming
+
+```tsx
+{
+    render: () => <TypesetStreamingExample />
+}
+```

package/llms/components/messaging/Marker.md

@@ -0,0 +1,203 @@
+# Marker
+
+Story: @alexgorbatchev/shadcn/components/messaging/Marker
+Source: src/components/stories/messaging/Marker.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/messaging/Marker.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Marker, MarkerContent, MarkerIcon, Button, Spinner } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { MouseEvent } from "react";
+import { useState } from "react";
+import { GitBranchIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+Marker
+```
+
+## Story controls
+
+```tsx
+{ variant: { control: "select", options: ["default", "border", "separator"] } }
+```
+
+## Default render
+
+```tsx
+(args) => (<Marker {...args}>
+      <MarkerIcon>
+        <GitBranchIcon />
+      </MarkerIcon>
+      <MarkerContent>Switched to a new branch</MarkerContent>
+    </Marker>)
+```
+
+## 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.
+
+### Shimmer
+
+```tsx
+{
+    render: function Render() {
+        const [isRunning, setRunning] = useState(true);
+        return (<div className="flex flex-col gap-4">
+        <Marker role="status">
+          <MarkerContent className={isRunning ? "shimmer" : undefined}>
+            {isRunning ? "Preparing response…" : "Response ready"}
+          </MarkerContent>
+        </Marker>
+        <Button onClick={() => setRunning(false)}>Finish response</Button>
+      </div>);
+    }
+}
+```
+
+### Default
+
+```tsx
+{}
+```
+
+### Border
+
+```tsx
+{
+    args: { variant: "border", "aria-label": "Branch activity" }
+}
+```
+
+### Separator
+
+```tsx
+{
+    args: { variant: "separator", "aria-label": "Conversation date" },
+    render: (args) => (<Marker {...args}>
+      <MarkerContent>Today</MarkerContent>
+    </Marker>)
+}
+```
+
+### SeparatorWithIcon
+
+```tsx
+{
+    args: { variant: "separator", "aria-label": "File activity", className: "w-80" },
+    render: (args) => (<Marker {...args}>
+      <MarkerIcon>
+        <GitBranchIcon />
+      </MarkerIcon>
+      <MarkerContent>Explored 4 files</MarkerContent>
+    </Marker>)
+}
+```
+
+### StackedIcon
+
+```tsx
+{
+    args: { "aria-label": "Completed activity", className: "w-80 flex-col" }
+}
+```
+
+### LongSeparator
+
+```tsx
+{
+    args: { variant: "separator", "aria-label": "Synchronization report", className: "w-48" },
+    render: (args) => (<Marker {...args}>
+      <MarkerIcon>
+        <GitBranchIcon />
+      </MarkerIcon>
+      <MarkerContent>workspaceSynchronizationResultsAndDeploymentValidation.json</MarkerContent>
+    </Marker>)
+}
+```
+
+### RightToLeftSeparatorWithIcon
+
+```tsx
+{
+    args: { ...SeparatorWithIcon.args, dir: "rtl" },
+    render: (args) => (<Marker {...args}>
+      <MarkerIcon>
+        <GitBranchIcon />
+      </MarkerIcon>
+      <MarkerContent>Explored 4 files</MarkerContent>
+    </Marker>)
+}
+```
+
+### RightToLeftStackedIcon
+
+```tsx
+{
+    args: { ...StackedIcon.args, dir: "rtl" }
+}
+```
+
+### RightToLeftLongSeparator
+
+```tsx
+{
+    args: { ...LongSeparator.args, dir: "rtl" },
+    render: (args) => (<Marker {...args}>
+      <MarkerIcon>
+        <GitBranchIcon />
+      </MarkerIcon>
+      <MarkerContent>workspaceSynchronizationResultsAndDeploymentValidation.json</MarkerContent>
+    </Marker>)
+}
+```
+
+### Status
+
+```tsx
+{
+    render: () => <StatusExample />
+}
+```
+
+### Link
+
+```tsx
+{
+    args: { onClick: fn((event: MouseEvent<HTMLDivElement>) => event.preventDefault()), ref: fn() },
+    render: (args) => (<Marker {...args} render={<a href="#marker-details"/>}>
+      <MarkerContent>View the pull request</MarkerContent>
+    </Marker>)
+}
+```
+
+### Action
+
+```tsx
+{
+    args: { onClick: fn() },
+    render: (args) => (<Marker {...args} render={<button type="button" onClick={renderedAction}/>}>
+      <MarkerContent>Revert change</MarkerContent>
+    </Marker>)
+}
+```
+
+### RenderCallback
+
+```tsx
+{
+    args: { variant: "border", onClick: fn() },
+    render: (args) => (<Marker {...args} render={(props, state) => <button {...props} type="button" aria-label={`Review ${state.variant} marker`}/>}>
+      <MarkerContent>Review change</MarkerContent>
+    </Marker>)
+}
+```