@alexgorbatchev/shadcn 0.0.18 → 0.0.20

package/llms/components/providers/PortalProvider.md

@@ -0,0 +1,264 @@
+# PortalProvider
+
+Story: @alexgorbatchev/shadcn/components/providers/PortalProvider
+Source: src/components/stories/providers/PortalProvider.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/providers/PortalProvider.stories.tsx)
+
+## Public imports
+
+```tsx
+import { PortalProvider, Popover, PopoverTrigger, PopoverContent, PopoverTitle, Button, Dialog, DialogTrigger, DialogContent, DialogTitle, Sheet, SheetTrigger, SheetContent, SheetTitle, Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, HoverCard, HoverCardTrigger, HoverCardContent, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogCancel, Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerClose, Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, ToastToaster, createToastManager } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { ReactElement, ReactNode } from "react";
+import { useState } from "react";
+```
+
+## Default component
+
+```tsx
+PortalProvider
+```
+
+## Default render
+
+```tsx
+() => <ScopedPopover />
+```
+
+## 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.
+
+### PopoverContainer
+
+```tsx
+{}
+```
+
+### DialogContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <Dialog>
+        <DialogTrigger render={<Button />}>Open dialog</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Scoped dialog</DialogTitle>
+        </DialogContent>
+      </Dialog>
+    </ScopedOverlay>)
+}
+```
+
+### SheetContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <Sheet>
+        <SheetTrigger render={<Button />}>Open sheet</SheetTrigger>
+        <SheetContent>
+          <SheetTitle>Scoped sheet</SheetTitle>
+        </SheetContent>
+      </Sheet>
+    </ScopedOverlay>)
+}
+```
+
+### TooltipContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <TooltipProvider delay={0}>
+        <Tooltip>
+          <TooltipTrigger render={<Button />}>Hover tooltip</TooltipTrigger>
+          <TooltipContent>Scoped tooltip</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </ScopedOverlay>)
+}
+```
+
+### HoverCardContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <HoverCard>
+        <HoverCardTrigger render={<Button />} delay={0}>
+          Hover preview
+        </HoverCardTrigger>
+        <HoverCardContent>Scoped preview</HoverCardContent>
+      </HoverCard>
+    </ScopedOverlay>)
+}
+```
+
+### SelectContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <Select items={[
+            { value: "codex", label: "Codex" },
+            { value: "claude", label: "Claude" },
+        ]} defaultValue="codex">
+        <SelectTrigger aria-label="Harness">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="codex">Codex</SelectItem>
+          <SelectItem value="claude">Claude</SelectItem>
+        </SelectContent>
+      </Select>
+    </ScopedOverlay>)
+}
+```
+
+### MenuContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <DropdownMenu>
+        <DropdownMenuTrigger render={<Button />}>Open menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Inspect context</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ScopedOverlay>)
+}
+```
+
+### AlertDialogContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <AlertDialog>
+        <AlertDialogTrigger render={<Button />}>Review removal</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Remove workspace?</AlertDialogTitle>
+          <AlertDialogCancel>Keep workspace</AlertDialogCancel>
+        </AlertDialogContent>
+      </AlertDialog>
+    </ScopedOverlay>)
+}
+```
+
+### DrawerContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <Drawer>
+        <DrawerTrigger render={<Button />}>Open workspace drawer</DrawerTrigger>
+        <DrawerContent>
+          <DrawerTitle>Workspace drawer</DrawerTitle>
+          <DrawerClose render={<Button />}>Close drawer</DrawerClose>
+        </DrawerContent>
+      </Drawer>
+    </ScopedOverlay>)
+}
+```
+
+### ComboboxContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <Combobox items={["Alpha", "Beta"]}>
+        <ComboboxInput aria-label="Workspace model"/>
+        <ComboboxContent>
+          <ComboboxList>
+            {(item: string) => (<ComboboxItem key={item} value={item}>
+                {item}
+              </ComboboxItem>)}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </ScopedOverlay>)
+}
+```
+
+### ContextMenuContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <ContextMenu>
+        <ContextMenuTrigger>Workspace context</ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem>Inspect workspace</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+    </ScopedOverlay>)
+}
+```
+
+### NavigationContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <NavigationMenu defaultValue="workspace">
+        <NavigationMenuList>
+          <NavigationMenuItem value="workspace">
+            <NavigationMenuTrigger>Workspace navigation</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <NavigationMenuLink href="#workspace">Workspace overview</NavigationMenuLink>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </ScopedOverlay>)
+}
+```
+
+### ToastContainer
+
+```tsx
+{
+    render: function Render() {
+        const [manager] = useState(() => createToastManager());
+        return (<ScopedOverlay>
+        <ToastToaster toastManager={manager} timeout={0}>
+          <Button onClick={() => manager.add({ title: "Workspace saved" })}>Save workspace</Button>
+        </ToastToaster>
+      </ScopedOverlay>);
+    }
+}
+```
+
+### NestedSelectInDialogContainer
+
+```tsx
+{
+    render: () => (<ScopedOverlay>
+      <Dialog>
+        <DialogTrigger render={<Button />}>Open settings</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Workspace settings</DialogTitle>
+          <Select items={[
+            { value: "codex", label: "Codex" },
+            { value: "claude", label: "Claude" },
+        ]} defaultValue="codex">
+            <SelectTrigger aria-label="Harness">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="codex">Codex</SelectItem>
+              <SelectItem value="claude">Claude</SelectItem>
+            </SelectContent>
+          </Select>
+        </DialogContent>
+      </Dialog>
+    </ScopedOverlay>)
+}
+```

package/llms/components/providers/ScrollGuard.md

@@ -0,0 +1,24 @@
+# ScrollGuard
+
+ThemeProvider mounts ScrollGuard automatically in development. Mark any HTML element with data-scroll="none" to reject accidental scrolling on that element. Place intentional scrolling in a nested ScrollArea or native scroll viewport. Errors identify the offending element and axis. Production builds install no observers.
+
+Story: @alexgorbatchev/shadcn/components/providers/ScrollGuard
+Source: src/components/stories/providers/ScrollGuard.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/providers/ScrollGuard.stories.tsx)
+
+## Public imports
+
+```tsx
+import { ScrollGuard, ScrollArea } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+ScrollGuard
+```
+
+## 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.

package/llms/components/providers/ThemeProvider.md

@@ -0,0 +1,71 @@
+# ThemeProvider
+
+The preview decorator owns one document-wide ThemeProvider. These controls change its persisted preference. The theme toolbar can force a palette on any other story.
+
+Story: @alexgorbatchev/shadcn/components/providers/ThemeProvider
+Source: src/components/stories/providers/ThemeProvider.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/providers/ThemeProvider.stories.tsx)
+
+## Public imports
+
+```tsx
+import { ThemeProvider, type ThemeMode } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+```
+
+## Default component
+
+```tsx
+ThemeProvider
+```
+
+## Default render
+
+```tsx
+() => <ThemeControlsExample />
+```
+
+## 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.
+
+### Interactive
+
+```tsx
+{}
+```
+
+### ForcedDark
+
+```tsx
+{
+    globals: { theme: "dark" }
+}
+```
+
+### ForcedLight
+
+```tsx
+{
+    globals: { theme: "light" }
+}
+```
+
+### Controlled
+
+```tsx
+{
+    render: function Example() {
+        const [theme, setTheme] = useState<ThemeMode>("dark");
+        return (<ThemeProvider controlledTheme={{ theme, setTheme }} storageKey="controlled-theme">
+        <ThemeControlsExample />
+      </ThemeProvider>);
+    }
+}
+```