@alexgorbatchev/shadcn 0.0.19 → 0.0.20

package/llms/components/feedback/Skeleton.md

@@ -0,0 +1,157 @@
+# Skeleton
+
+Story: @alexgorbatchev/shadcn/components/feedback/Skeleton
+Source: src/components/stories/feedback/Skeleton.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/feedback/Skeleton.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Button, Skeleton, Card, CardContent, CardHeader } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+```
+
+## Default component
+
+```tsx
+Skeleton
+```
+
+## Default render
+
+```tsx
+(args) => (<div role="status" aria-label="Loading content" className="flex flex-col gap-3">
+      <Skeleton {...args} className="h-5 w-48"/>
+      <Skeleton className="h-4 w-64"/>
+      <Skeleton className="h-4 w-40"/>
+    </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.
+
+### Text
+
+```tsx
+{}
+```
+
+### CardPlaceholder
+
+```tsx
+{
+    render: () => (<div role="status" aria-label="Loading card" className="flex flex-col gap-4">
+      <Skeleton data-testid="Skeleton" className="h-36 w-full"/>
+      <Skeleton className="h-5 w-48"/>
+      <Skeleton className="h-4 w-full"/>
+    </div>)
+}
+```
+
+### LoadingTransition
+
+```tsx
+{
+    render: (args) => {
+        const [isLoading, setIsLoading] = useState(true);
+        return (<div className="flex flex-col gap-4">
+        <section aria-label="Project summary" aria-busy={isLoading}>
+          {isLoading ? (<div role="status" aria-label="Loading project">
+              <Skeleton {...args} className="h-5 w-48" aria-hidden="true"/>
+            </div>) : (<p>Project ready</p>)}
+        </section>
+        <Button onClick={() => setIsLoading(false)} disabled={!isLoading}>
+          Finish loading
+        </Button>
+      </div>);
+    }
+}
+```
+
+### AvatarPlaceholder
+
+```tsx
+{
+    render: (args) => (<div role="status" aria-label="Loading profile" className="flex w-fit items-center gap-4">
+      <Skeleton {...args} data-testid="Skeleton" aria-hidden="true" className="size-10 shrink-0 rounded-full"/>
+      <div className="grid gap-2" aria-hidden="true">
+        <Skeleton aria-hidden="true" className="h-4 w-40"/>
+        <Skeleton aria-hidden="true" className="h-4 w-24"/>
+      </div>
+    </div>)
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: (args) => (<div role="status" aria-label="Loading profile" className="flex w-fit items-center gap-4">
+      <Skeleton {...args} data-testid="Skeleton" aria-hidden="true" className="size-10 shrink-0 rounded-full"/>
+      <div className="grid gap-2" aria-hidden="true">
+        <Skeleton aria-hidden="true" className="h-4 w-40"/>
+        <Skeleton aria-hidden="true" className="h-4 w-24"/>
+      </div>
+    </div>),
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### InCard
+
+```tsx
+{
+    render: () => (<Card role="status" aria-label="Loading card sections" className="w-80">
+      <CardHeader>
+        <Skeleton aria-hidden="true" className="h-4 w-2/3"/>
+        <Skeleton aria-hidden="true" className="h-4 w-1/2"/>
+      </CardHeader>
+      <CardContent>
+        <Skeleton aria-hidden="true" data-testid="Skeleton" className="aspect-video w-full"/>
+      </CardContent>
+    </Card>)
+}
+```
+
+### FormPlaceholder
+
+```tsx
+{
+    render: () => (<div role="status" aria-label="Loading form" className="flex w-80 flex-col gap-7">
+      <div className="flex flex-col gap-3">
+        <Skeleton aria-hidden="true" className="h-4 w-20"/>
+        <Skeleton aria-hidden="true" className="h-8 w-full"/>
+      </div>
+      <div className="flex flex-col gap-3">
+        <Skeleton aria-hidden="true" className="h-4 w-24"/>
+        <Skeleton aria-hidden="true" className="h-8 w-full"/>
+      </div>
+      <Skeleton aria-hidden="true" className="h-8 w-24"/>
+    </div>)
+}
+```
+
+### TablePlaceholder
+
+```tsx
+{
+    render: () => (<div role="status" aria-label="Loading table" className="flex w-80 flex-col gap-2">
+      {Array.from({ length: 5 }, (_, index) => (<div key={index} className="flex gap-4">
+          <Skeleton aria-hidden="true" className="h-4 flex-1"/>
+          <Skeleton aria-hidden="true" className="h-4 w-24"/>
+          <Skeleton aria-hidden="true" className="h-4 w-20"/>
+        </div>))}
+    </div>)
+}
+```

package/llms/components/feedback/Sonner.md

@@ -0,0 +1,325 @@
+# Sonner
+
+Story: @alexgorbatchev/shadcn/components/feedback/Sonner
+Source: src/components/stories/feedback/Sonner.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/feedback/Sonner.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Button, DirectionProvider, Item, ItemContent, ItemTitle, ItemDescription, ItemActions } from "@alexgorbatchev/shadcn";
+import { Sonner, toast } from "@alexgorbatchev/shadcn/sonner";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+```
+
+## Default component
+
+```tsx
+Sonner
+```
+
+## Default args
+
+```tsx
+{ id: "sonner-story", closeButton: true, duration: Infinity }
+```
+
+## Default render
+
+```tsx
+function Render(args) {
+    const [isUndone, setUndone] = useState(false);
+    return (<>
+        <Sonner {...args}/>
+        <Button onClick={() => toast.success("Saved", {
+            toasterId: args.id,
+            description: "Your changes are saved.",
+            action: { label: "Undo", onClick: () => setUndone(true) },
+        })}>
+          Save changes
+        </Button>
+        <output aria-label="Result">{isUndone ? "Undone" : "Saved"}</output>
+      </>);
+}
+```
+
+## 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
+{}
+```
+
+### Compact
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### Variants
+
+```tsx
+{
+    render: (args) => (<>
+      <Sonner {...args}/>
+      <Button onClick={() => {
+            toast.info("Information", { toasterId: args.id });
+            toast.warning("Warning", { toasterId: args.id });
+            toast.error("Error", { toasterId: args.id });
+        }}>
+        Create notifications
+      </Button>
+      <Button onClick={() => toast.dismiss()}>Dismiss notifications</Button>
+    </>)
+}
+```
+
+### PromiseSuccess
+
+```tsx
+{
+    render: function Render(args) {
+        const [upload] = useState(() => Promise.withResolvers<string>());
+        return (<>
+        <Sonner {...args}/>
+        <Button onClick={() => toast.promise(upload.promise, {
+                toasterId: args.id,
+                loading: "Uploading",
+                success: (name) => `Uploaded ${name}`,
+                error: "Upload failed",
+            })}>
+          Start upload
+        </Button>
+        <Button onClick={() => upload.resolve("report.csv")}>Complete upload</Button>
+        <Button onClick={() => upload.reject(new Error("Upload failed"))}>Fail upload</Button>
+      </>);
+    }
+}
+```
+
+### PromiseError
+
+```tsx
+{
+    render: function Render(args) {
+        const [upload] = useState(() => Promise.withResolvers<string>());
+        return (<>
+        <Sonner {...args}/>
+        <Button onClick={() => toast.promise(upload.promise, {
+                toasterId: args.id,
+                loading: "Uploading",
+                success: (name) => `Uploaded ${name}`,
+                error: "Upload failed",
+            })}>
+          Start upload
+        </Button>
+        <Button onClick={() => upload.resolve("report.csv")}>Complete upload</Button>
+        <Button onClick={() => upload.reject(new Error("Upload failed"))}>Fail upload</Button>
+      </>);
+    }
+}
+```
+
+### Cancel
+
+```tsx
+{
+    render: function Render(args) {
+        const [isCancelled, setCancelled] = useState(false);
+        return (<>
+        <Sonner {...args}/>
+        <Button onClick={() => toast("Delete report?", {
+                toasterId: args.id,
+                cancel: { label: "Keep report", onClick: () => setCancelled(true) },
+            })}>
+          Request deletion
+        </Button>
+        <output aria-label="Deletion result">{isCancelled ? "Report kept" : "Awaiting decision"}</output>
+      </>);
+    }
+}
+```
+
+### UpdateInPlace
+
+```tsx
+{
+    render: function Render(args) {
+        const [uploadId, setUploadId] = useState<string | number>();
+        return (<>
+        <Sonner {...args}/>
+        <Button onClick={() => setUploadId(toast.loading("Uploading report", { toasterId: args.id }))}>
+          Start upload
+        </Button>
+        <Button disabled={uploadId === undefined} onClick={() => toast.success("Uploaded report.csv", {
+                id: uploadId,
+                toasterId: args.id,
+            })}>
+          Complete upload
+        </Button>
+      </>);
+    }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    args: { dir: "rtl", toastOptions: { classNames: { title: "font-semibold" } } }
+}
+```
+
+### InheritedDirection
+
+```tsx
+{
+    args: { dir: undefined },
+    decorators: [
+        (StoryComponent) => (<DirectionProvider direction="rtl">
+        <StoryComponent />
+      </DirectionProvider>),
+    ]
+}
+```
+
+### CollapsedStack
+
+```tsx
+{
+    args: { expand: false },
+    render: (args) => (<>
+      <Sonner {...args}/>
+      <Button onClick={() => {
+            toast("First notification", { toasterId: args.id });
+            toast("Second notification", { toasterId: args.id });
+            toast("Latest notification", { toasterId: args.id });
+        }}>
+        Create stack
+      </Button>
+      <Button onClick={() => toast.dismiss()}>Dismiss stack</Button>
+    </>)
+}
+```
+
+### AutoDismiss
+
+```tsx
+{
+    args: { duration: 1000 },
+    render: function Render(args) {
+        const [autoClosedId, setAutoClosedId] = useState<string | number>();
+        const [dismissedId, setDismissedId] = useState<string | number>();
+        return (<>
+        <Sonner {...args}/>
+        <Button onClick={() => toast("Callback notification", {
+                id: "callback-notification",
+                toasterId: args.id,
+                onAutoClose: (notification) => setAutoClosedId(notification.id),
+                onDismiss: (notification) => setDismissedId(notification.id),
+            })}>
+          Create notification
+        </Button>
+        <output aria-label="Automatic close result">{autoClosedId ?? "Not closed automatically"}</output>
+        <output aria-label="Dismiss result">{dismissedId ?? "Not dismissed"}</output>
+      </>);
+    }
+}
+```
+
+### ManualDismiss
+
+```tsx
+{
+    args: { duration: Infinity },
+    render: function Render(args) {
+        const [autoClosedId, setAutoClosedId] = useState<string | number>();
+        const [dismissedId, setDismissedId] = useState<string | number>();
+        return (<>
+        <Sonner {...args}/>
+        <Button onClick={() => toast("Callback notification", {
+                id: "callback-notification",
+                toasterId: args.id,
+                onAutoClose: (notification) => setAutoClosedId(notification.id),
+                onDismiss: (notification) => setDismissedId(notification.id),
+            })}>
+          Create notification
+        </Button>
+        <output aria-label="Automatic close result">{autoClosedId ?? "Not closed automatically"}</output>
+        <output aria-label="Dismiss result">{dismissedId ?? "Not dismissed"}</output>
+      </>);
+    }
+}
+```
+
+### CustomContent
+
+```tsx
+{
+    render: function Render(args) {
+        const [isReportOpen, setReportOpen] = useState(false);
+        return (<>
+        <Sonner {...args}/>
+        <Button onClick={() => toast.custom((id) => (<Item size="xs">
+                  <ItemContent>
+                    <ItemTitle>Export ready</ItemTitle>
+                    <ItemDescription>report.csv</ItemDescription>
+                  </ItemContent>
+                  <ItemActions>
+                    <Button variant="outline" size="sm" onClick={() => {
+                    setReportOpen(true);
+                    toast.dismiss(id);
+                }}>
+                      Open report
+                    </Button>
+                  </ItemActions>
+                </Item>), { toasterId: args.id })}>
+          Export report
+        </Button>
+        <output aria-label="Report result">{isReportOpen ? "Report opened" : "Report closed"}</output>
+      </>);
+    }
+}
+```
+
+### PauseOnHover
+
+```tsx
+{
+    render: function Render(args) {
+        const [isUploadClosed, setUploadClosed] = useState(false);
+        const [isBackgroundClosed, setBackgroundClosed] = useState(false);
+        const uploadHost = `${args.id}-uploads`;
+        const backgroundHost = `${args.id}-background`;
+        return (<>
+        <Sonner {...args} id={uploadHost} position="bottom-right" containerAriaLabel="Upload notifications"/>
+        <Sonner {...args} id={backgroundHost} position="top-left" containerAriaLabel="Background notifications"/>
+        <Button onClick={() => {
+                toast("Upload saved", { toasterId: uploadHost, duration: 500, onAutoClose: () => setUploadClosed(true) });
+                toast("Background job complete", {
+                    toasterId: backgroundHost,
+                    duration: 1000,
+                    onAutoClose: () => setBackgroundClosed(true),
+                });
+            }}>
+          Create notifications
+        </Button>
+        <output aria-label="Upload close result">{isUploadClosed ? "Upload closed" : "Upload open"}</output>
+        <output aria-label="Background close result">
+          {isBackgroundClosed ? "Background closed" : "Background open"}
+        </output>
+      </>);
+    }
+}
+```

package/llms/components/feedback/Spinner.md

@@ -0,0 +1,119 @@
+# Spinner
+
+Story: @alexgorbatchev/shadcn/components/feedback/Spinner
+Source: src/components/stories/feedback/Spinner.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/feedback/Spinner.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Spinner, Button, Badge, InputGroup, InputGroupAddon, InputGroupInput, Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+Spinner
+```
+
+## 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
+{}
+```
+
+### Small
+
+```tsx
+{
+    args: { className: "size-3" }
+}
+```
+
+### Large
+
+```tsx
+{
+    args: { className: "size-8" }
+}
+```
+
+### CustomLabel
+
+```tsx
+{
+    args: { "aria-label": "Uploading", ref: fn() }
+}
+```
+
+### InBadge
+
+```tsx
+{
+    render: () => (<Badge variant="secondary">
+      <Spinner aria-label="Syncing" data-icon="inline-start"/>
+      Syncing
+    </Badge>)
+}
+```
+
+### InInputGroup
+
+```tsx
+{
+    render: () => (<InputGroup>
+      <InputGroupInput aria-label="Pending message" disabled/>
+      <InputGroupAddon align="inline-end">
+        <Spinner aria-label="Validating"/>
+      </InputGroupAddon>
+    </InputGroup>)
+}
+```
+
+### InEmpty
+
+```tsx
+{
+    render: () => (<Empty>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <Spinner />
+        </EmptyMedia>
+        <EmptyTitle>Processing request</EmptyTitle>
+        <EmptyDescription>Wait for processing to finish.</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button variant="outline" onClick={onCancel}>
+          Cancel
+        </Button>
+      </EmptyContent>
+    </Empty>)
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: () => (<Button dir="rtl" disabled>
+      <Spinner data-icon="inline-start"/>
+      Saving
+    </Button>)
+}
+```
+
+### InButton
+
+```tsx
+{
+    render: () => (<Button disabled>
+      <Spinner data-icon="inline-start"/>
+      Saving
+    </Button>)
+}
+```