@alexgorbatchev/shadcn 0.0.19 → 0.0.20

package/llms/components/overlays/AlertDialog.md

@@ -0,0 +1,365 @@
+# AlertDialog
+
+Story: @alexgorbatchev/shadcn/components/overlays/AlertDialog
+Source: src/components/stories/overlays/AlertDialog.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/overlays/AlertDialog.stories.tsx)
+
+## Public imports
+
+```tsx
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, AlertDialogMedia, AlertDialogPortal, AlertDialogOverlay, Button, DensityProvider, DirectionProvider } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useRef, useState } from "react";
+import type { ComponentProps, ReactElement } from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type { AlertDialogRootChangeEventDetails } from "@base-ui/react/alert-dialog";
+import { BellIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+AlertDialog
+```
+
+## Default args
+
+```tsx
+{ onOpenChange: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => <DeleteConfirmationExample {...args}/>
+```
+
+## 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
+{}
+```
+
+### Open
+
+```tsx
+{
+    args: { defaultOpen: true }
+}
+```
+
+### Confirm
+
+```tsx
+{}
+```
+
+### Small
+
+```tsx
+{
+    render: (args) => <PermissionConfirmationExample {...args}/>
+}
+```
+
+### Basic
+
+```tsx
+{
+    render: (args) => <PermissionConfirmationExample {...args} size="default"/>
+}
+```
+
+### SmallWithMedia
+
+```tsx
+{
+    render: (args) => <PermissionConfirmationExample {...args} hasMedia/>
+}
+```
+
+### RTLSmall
+
+```tsx
+{
+    render: (args) => <PermissionConfirmationExample {...args} direction="rtl"/>
+}
+```
+
+### RTLSmallWithMedia
+
+```tsx
+{
+    render: (args) => <PermissionConfirmationExample {...args} hasMedia direction="rtl"/>
+}
+```
+
+### RTLMedia
+
+```tsx
+{
+    render: (args) => <PermissionConfirmationExample {...args} size="default" hasMedia direction="rtl"/>
+}
+```
+
+### OutsidePressBlocked
+
+```tsx
+{}
+```
+
+### Keyboard
+
+```tsx
+{}
+```
+
+### DisabledTrigger
+
+```tsx
+{
+    render: (args) => (<AlertDialog {...args}>
+      <AlertDialogTrigger disabled render={<Button />}>
+        Unavailable confirmation
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogTitle>Unavailable confirmation</AlertDialogTitle>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+      </AlertDialogContent>
+    </AlertDialog>)
+}
+```
+
+### CancelledOpening
+
+```tsx
+{
+    args: { onOpenChange: fn((_open: boolean, details: AlertDialogRootChangeEventDetails) => details.cancel()) }
+}
+```
+
+### CancelledClosing
+
+```tsx
+{
+    args: {
+        onOpenChange: fn((open: boolean, details: AlertDialogRootChangeEventDetails) => {
+            if (!open)
+                details.cancel();
+        }),
+    }
+}
+```
+
+### NativeCallbacks
+
+```tsx
+{
+    render: (args) => (<AlertDialog {...args}>
+      <AlertDialogTrigger className={(state) => (state.open ? "w-64" : "w-48")}>
+        Callback confirmation
+      </AlertDialogTrigger>
+      <AlertDialogContent className={(state) => (state.open ? "w-64" : "w-48")}>
+        <AlertDialogTitle className={() => "h-12"}>Callback confirmation title</AlertDialogTitle>
+        <AlertDialogDescription className={() => "h-10"}>Callback description</AlertDialogDescription>
+        <AlertDialogFooter>
+          <AlertDialogCancel className={(state) => (state.disabled ? "h-12" : "h-8")}>Cancel</AlertDialogCancel>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>)
+}
+```
+
+### ActionCallback
+
+```tsx
+{
+    render: function Render(args) {
+        const [isDisabled, setIsDisabled] = useState(false);
+        const [count, setCount] = useState(0);
+        return (<AlertDialog {...args}>
+        <AlertDialogTrigger render={<Button />}>Action example</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Action stays open</AlertDialogTitle>
+          <AlertDialogAction disabled={isDisabled} className={(state) => (state.disabled ? "h-12" : "h-8")} onClick={() => setCount(count + 1)}>
+            Run action
+          </AlertDialogAction>
+          <Button onClick={() => setIsDisabled(true)}>Disable action</Button>
+          <output aria-label="Action count">{count}</output>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+        </AlertDialogContent>
+      </AlertDialog>);
+    }
+}
+```
+
+### OverlayCallback
+
+```tsx
+{
+    render: (args) => (<AlertDialog {...args}>
+      <AlertDialogTrigger render={<Button />}>Open backdrop example</AlertDialogTrigger>
+      <AlertDialogPortal>
+        <AlertDialogOverlay data-testid="AlertDialog--overlay" className={(state) => (state.open ? "opacity-50" : "opacity-0")}/>
+        <AlertDialogPrimitive.Popup className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-popover p-panel">
+          <AlertDialogTitle>Backdrop example</AlertDialogTitle>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+        </AlertDialogPrimitive.Popup>
+      </AlertDialogPortal>
+    </AlertDialog>)
+}
+```
+
+### CompactPortal
+
+```tsx
+{
+    render: (args) => (<DensityProvider density="compact">
+      <AlertDialog {...args}>
+        <AlertDialogTrigger render={<Button />}>Compact confirmation</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Compact alert</AlertDialogTitle>
+          <AlertDialogDescription>Compact portal content.</AlertDialogDescription>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+        </AlertDialogContent>
+      </AlertDialog>
+    </DensityProvider>)
+}
+```
+
+### RTL
+
+```tsx
+{
+    render: (args) => (<DirectionProvider direction="rtl">
+      <section dir="rtl">
+        <AlertDialog {...args}>
+          <AlertDialogTrigger render={<Button />}>RTL confirmation</AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>RTL alert</AlertDialogTitle>
+              <AlertDialogDescription>Direction follows the portal.</AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </section>
+    </DirectionProvider>)
+}
+```
+
+### CustomFocusAndNativeRender
+
+```tsx
+{
+    render: function Render(args) {
+        const cancelRef = useRef<HTMLButtonElement>(null), finalRef = useRef<HTMLButtonElement>(null), popupRef = useRef<HTMLDivElement>(null);
+        return (<>
+        <Button ref={finalRef}>Return target</Button>
+        <AlertDialog {...args}>
+          <AlertDialogTrigger render={<button type="button"/>}>Custom confirmation</AlertDialogTrigger>
+          <AlertDialogContent render={<section />} ref={popupRef} initialFocus={cancelRef} finalFocus={finalRef}>
+            <AlertDialogTitle>Custom confirmation title</AlertDialogTitle>
+            <AlertDialogAction>Action</AlertDialogAction>
+            <AlertDialogCancel ref={cancelRef}>Cancel</AlertDialogCancel>
+            <Button onClick={() => popupRef.current?.focus()}>Focus surface</Button>
+          </AlertDialogContent>
+        </AlertDialog>
+      </>);
+    }
+}
+```
+
+### Payload
+
+```tsx
+{
+    render: () => (<AlertDialog<string>>
+      {({ payload }) => (<>
+          <AlertDialogTrigger<string> payload="Alex">Remove Alex</AlertDialogTrigger>
+          <AlertDialogTrigger<string> payload="Blair">Remove Blair</AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogTitle>Remove {payload}?</AlertDialogTitle>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </>)}
+    </AlertDialog>)
+}
+```
+
+### Controlled
+
+```tsx
+{
+    render: function Render() {
+        const [isOpen, setIsOpen] = useState(false);
+        return (<>
+        <Button onClick={() => setIsOpen(true)}>Open controlled confirmation</Button>
+        <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+          <AlertDialogContent>
+            <AlertDialogTitle>Controlled confirmation</AlertDialogTitle>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+          </AlertDialogContent>
+        </AlertDialog>
+        <output aria-label="Confirmation state">{String(isOpen)}</output>
+      </>);
+    }
+}
+```
+
+### Media
+
+```tsx
+{
+    render: (args) => (<AlertDialog {...args}>
+      <AlertDialogTrigger render={<Button />}>Review media confirmation</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogMedia data-testid="AlertDialog--media">
+            <BellIcon />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Notification settings</AlertDialogTitle>
+          <AlertDialogDescription>Confirm workspace notification settings.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>)
+}
+```
+
+### DetachedTriggers
+
+```tsx
+{
+    render: function Render() {
+        const [handle] = useState(() => AlertDialogPrimitive.createHandle<string>());
+        return (<>
+        <AlertDialogTrigger handle={handle} payload="Alex" render={<Button />}>
+          Detached Alex
+        </AlertDialogTrigger>
+        <AlertDialogTrigger handle={handle} payload="Blair" render={<Button />}>
+          Detached Blair
+        </AlertDialogTrigger>
+        <AlertDialog handle={handle}>
+          {({ payload }) => (<AlertDialogContent>
+              <AlertDialogTitle>Remove detached {payload}?</AlertDialogTitle>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+            </AlertDialogContent>)}
+        </AlertDialog>
+      </>);
+    }
+}
+```

package/llms/components/overlays/ConfirmationDialog.md

@@ -0,0 +1,77 @@
+# ConfirmationDialog
+
+Story: @alexgorbatchev/shadcn/components/overlays/ConfirmationDialog
+Source: src/components/stories/overlays/ConfirmationDialog.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/overlays/ConfirmationDialog.stories.tsx)
+
+## Public imports
+
+```tsx
+import { ConfirmationDialog, Button } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState, type ReactElement } from "react";
+```
+
+## Default component
+
+```tsx
+ConfirmationDialog
+```
+
+## Default args
+
+```tsx
+{
+    title: "Remove image?",
+    description: "The current image will be removed.",
+    confirmLabel: "Remove image",
+    onConfirm: fn(),
+    open: false,
+    onOpenChange: fn(),
+}
+```
+
+## Default render
+
+```tsx
+function Example(args): ReactElement {
+    const [open, setOpen] = useState(false);
+    return (<>
+        <Button onClick={() => setOpen(true)}>Remove</Button>
+        <ConfirmationDialog {...args} open={open} onOpenChange={setOpen}/>
+      </>);
+}
+```
+
+## 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.
+
+### Confirm
+
+```tsx
+{}
+```
+
+### Cancel
+
+```tsx
+{}
+```
+
+### Failed
+
+```tsx
+{
+    args: {
+        onConfirm: async () => {
+            throw new Error("Could not remove image");
+        },
+    }
+}
+```