@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/ui/components/ui/adjustable-pane.d.cts

@@ -1,46 +1,64 @@
 /**
- * AdjustablePane のプロパティ
- * Properties for the AdjustablePane component
+ * Controlled pane visibility, percentage size bounds and content for AdjustablePane.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see AdjustablePane
  */
 export type AdjustablePaneProps = {
-    /** ペインの表示位置 / Side to display the pane */
+    /**
+     * Pane placement; defaults to right. bottom selects vertical resizing.
+     */
     side?: 'right' | 'bottom';
-    /** ペインの開閉状態 / Whether the pane is open */
+    /**
+     * Controlled visibility; the host updates this value in response to close/open requests.
+     */
     open: boolean;
-    /** ペインを閉じる時のコールバック / Callback when closing the pane */
+    /**
+     * Called by the close button; the host must set open=false. Omitted hides the close button.
+     * @returns No value; complete the host callback action.
+     */
     onClose?: () => void;
-    /** 初期サイズ（パーセンテージ） / Initial size in percentage */
+    /**
+     * Initial pane share in percent (default 30); later changes reset local size before clamping.
+     */
     initialSize?: number;
-    /** 最小サイズ（パーセンテージ） / Minimum size in percentage */
+    /**
+     * Minimum pane share in percent (default 20). Supply bounds in a consistent 0–100 range; the wrapper does not validate them.
+     */
     minSize?: number;
-    /** 最大サイズ（パーセンテージ） / Maximum size in percentage */
+    /**
+     * Maximum pane share in percent (default 60). Supply a value at least minSize.
+     */
     maxSize?: number;
-    /** コンテナのクラス名 / Container className */
+    /**
+     * Additional classes merged with wrapper styling; see the component for the targeted element.
+     */
     className?: string;
-    /** ペイン内部のクラス名 / Pane content className */
+    /**
+     * Additional classes on the scrollable pane content container.
+     */
     paneClassName?: string;
-    /** ペイン内のコンテンツ / Content rendered inside the pane */
+    /**
+     * Content rendered in the wrapper's child region.
+     */
     children?: React.ReactNode;
-    /** メインエリアのコンテンツ / Content rendered in the main area */
+    /**
+     * Content rendered in the remaining main panel.
+     */
     main?: React.ReactNode;
 };
 /**
- * リサイズ可能なサイドペイン / ボトムペインコンポーネント。
- * マウスドラッグでサイズを調整でき、右側または下側に配置可能。
- *
- * A resizable side/bottom pane component with drag-to-resize,
- * close button, and configurable min/max sizes.
- *
+ * Divides a container between main content and a mouse-resizable right or bottom pane.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: side='right', initialSize=30, minSize=20, maxSize=60.
+ * @returns The rendered AdjustablePane composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Give the host a nonzero width and height. open is controlled; onClose requests closure without changing it. Sizes are percentages clamped between minSize/maxSize. Changing initialSize resets local size. Drag listeners attach to window and are removed on mouseup; unmount during a drag does not install separate cleanup. This wrapper implements mouse resizing; it does not add keyboard resizing.
  * @example
  * ```tsx
- * <AdjustablePane
- *   open={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   initialSize={35}
- *   main={<MainContent />}
- * >
- *   <PaneContent />
- * </AdjustablePane>
+ * import { AdjustablePane } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AdjustablePane open side="right" main={<p>Main content</p>}>Details</AdjustablePane>);
+ * }
  * ```
  */
 export declare function AdjustablePane({ side, open, onClose, initialSize, minSize, maxSize, className, paneClassName, children, main, }: AdjustablePaneProps): import('react').JSX.Element;

package/dist/ui/components/ui/adjustable-pane.d.ts

@@ -1,46 +1,64 @@
 /**
- * AdjustablePane のプロパティ
- * Properties for the AdjustablePane component
+ * Controlled pane visibility, percentage size bounds and content for AdjustablePane.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see AdjustablePane
  */
 export type AdjustablePaneProps = {
-    /** ペインの表示位置 / Side to display the pane */
+    /**
+     * Pane placement; defaults to right. bottom selects vertical resizing.
+     */
     side?: 'right' | 'bottom';
-    /** ペインの開閉状態 / Whether the pane is open */
+    /**
+     * Controlled visibility; the host updates this value in response to close/open requests.
+     */
     open: boolean;
-    /** ペインを閉じる時のコールバック / Callback when closing the pane */
+    /**
+     * Called by the close button; the host must set open=false. Omitted hides the close button.
+     * @returns No value; complete the host callback action.
+     */
     onClose?: () => void;
-    /** 初期サイズ（パーセンテージ） / Initial size in percentage */
+    /**
+     * Initial pane share in percent (default 30); later changes reset local size before clamping.
+     */
     initialSize?: number;
-    /** 最小サイズ（パーセンテージ） / Minimum size in percentage */
+    /**
+     * Minimum pane share in percent (default 20). Supply bounds in a consistent 0–100 range; the wrapper does not validate them.
+     */
     minSize?: number;
-    /** 最大サイズ（パーセンテージ） / Maximum size in percentage */
+    /**
+     * Maximum pane share in percent (default 60). Supply a value at least minSize.
+     */
     maxSize?: number;
-    /** コンテナのクラス名 / Container className */
+    /**
+     * Additional classes merged with wrapper styling; see the component for the targeted element.
+     */
     className?: string;
-    /** ペイン内部のクラス名 / Pane content className */
+    /**
+     * Additional classes on the scrollable pane content container.
+     */
     paneClassName?: string;
-    /** ペイン内のコンテンツ / Content rendered inside the pane */
+    /**
+     * Content rendered in the wrapper's child region.
+     */
     children?: React.ReactNode;
-    /** メインエリアのコンテンツ / Content rendered in the main area */
+    /**
+     * Content rendered in the remaining main panel.
+     */
     main?: React.ReactNode;
 };
 /**
- * リサイズ可能なサイドペイン / ボトムペインコンポーネント。
- * マウスドラッグでサイズを調整でき、右側または下側に配置可能。
- *
- * A resizable side/bottom pane component with drag-to-resize,
- * close button, and configurable min/max sizes.
- *
+ * Divides a container between main content and a mouse-resizable right or bottom pane.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: side='right', initialSize=30, minSize=20, maxSize=60.
+ * @returns The rendered AdjustablePane composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Give the host a nonzero width and height. open is controlled; onClose requests closure without changing it. Sizes are percentages clamped between minSize/maxSize. Changing initialSize resets local size. Drag listeners attach to window and are removed on mouseup; unmount during a drag does not install separate cleanup. This wrapper implements mouse resizing; it does not add keyboard resizing.
  * @example
  * ```tsx
- * <AdjustablePane
- *   open={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   initialSize={35}
- *   main={<MainContent />}
- * >
- *   <PaneContent />
- * </AdjustablePane>
+ * import { AdjustablePane } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AdjustablePane open side="right" main={<p>Main content</p>}>Details</AdjustablePane>);
+ * }
  * ```
  */
 export declare function AdjustablePane({ side, open, onClose, initialSize, minSize, maxSize, className, paneClassName, children, main, }: AdjustablePaneProps): import('react').JSX.Element;

package/dist/ui/components/ui/adjustable-pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"adjustable-pane.js","names":["_Fragment","AdjustablePane","vertical","side","containerRef","useRef","size","setSize","useState","initialSize","prevInitialSize","setPrevInitialSize","clampedSize","minSize","maxSize","startDrag","useCallback","container","rect","onMove","percent","ev","onUp","mainFlexPercent","computedMainFlex","open","computedPaneFlex","cn","className","ResizablePanelGroup","Fragment","ResizablePanel","main","ResizableHandle","paneClassName","onClose","X"],"sources":["../../../../src/ui/components/ui/adjustable-pane.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { X } from 'lucide-react';\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable';\nimport { cn } from '../../lib/utils';\n\n/**\n * AdjustablePane のプロパティ\n * Properties for the AdjustablePane component\n */\nexport type AdjustablePaneProps = {\n  /** ペインの表示位置 / Side to display the pane */\n  side?: 'right' | 'bottom';\n  /** ペインの開閉状態 / Whether the pane is open */\n  open: boolean;\n  /** ペインを閉じる時のコールバック / Callback when closing the pane */\n  onClose?: () => void;\n  /** 初期サイズ（パーセンテージ） / Initial size in percentage */\n  initialSize?: number;\n  /** 最小サイズ（パーセンテージ） / Minimum size in percentage */\n  minSize?: number;\n  /** 最大サイズ（パーセンテージ） / Maximum size in percentage */\n  maxSize?: number;\n  /** コンテナのクラス名 / Container className */\n  className?: string;\n  /** ペイン内部のクラス名 / Pane content className */\n  paneClassName?: string;\n  /** ペイン内のコンテンツ / Content rendered inside the pane */\n  children?: React.ReactNode;\n  /** メインエリアのコンテンツ / Content rendered in the main area */\n  main?: React.ReactNode;\n};\n\n/**\n * リサイズ可能なサイドペイン / ボトムペインコンポーネント。\n * マウスドラッグでサイズを調整でき、右側または下側に配置可能。\n *\n * A resizable side/bottom pane component with drag-to-resize,\n * close button, and configurable min/max sizes.\n *\n * @example\n * ```tsx\n * <AdjustablePane\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   initialSize={35}\n *   main={<MainContent />}\n * >\n *   <PaneContent />\n * </AdjustablePane>\n * ```\n */\nexport function AdjustablePane({\n  side = 'right',\n  open,\n  onClose,\n  initialSize = 30,\n  minSize = 20,\n  maxSize = 60,\n  className,\n  paneClassName,\n  children,\n  main,\n}: AdjustablePaneProps) {\n  const vertical = side === 'bottom';\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const [size, setSize] = useState<number>(initialSize);\n  const [prevInitialSize, setPrevInitialSize] = useState(initialSize);\n\n  if (initialSize !== prevInitialSize) {\n    setSize(initialSize);\n    setPrevInitialSize(initialSize);\n  }\n\n  const clampedSize = Math.min(Math.max(size, minSize), maxSize);\n\n  const startDrag = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      const container = containerRef.current;\n      if (!container) return;\n\n      const rect = container.getBoundingClientRect();\n\n      const onMove = (ev: MouseEvent) => {\n        if (vertical) {\n          const offset = rect.bottom - ev.clientY;\n          const percent = (offset / rect.height) * 100;\n          setSize(percent);\n        } else {\n          const offset = rect.right - ev.clientX;\n          const percent = (offset / rect.width) * 100;\n          setSize(percent);\n        }\n      };\n\n      const onUp = () => {\n        window.removeEventListener('mousemove', onMove);\n        window.removeEventListener('mouseup', onUp);\n      };\n\n      window.addEventListener('mousemove', onMove);\n      window.addEventListener('mouseup', onUp);\n    },\n    [vertical],\n  );\n\n  const mainFlexPercent = 100 - clampedSize;\n  const computedMainFlex = open ? `${mainFlexPercent}%` : '100%';\n  const computedPaneFlex = open ? `${clampedSize}%` : '0%';\n\n  return (\n    <div ref={containerRef} className={cn('h-full w-full', className)}>\n      <ResizablePanelGroup\n        data-panel-group-direction={vertical ? 'vertical' : 'horizontal'}\n        style={{ userSelect: 'none' }}\n      >\n        {side === 'right' ? (\n          <>\n            <ResizablePanel className='min-w-0' style={{ flex: `0 0 ${computedMainFlex}` }}>\n              <div className='h-full w-full overflow-auto'>{main}</div>\n            </ResizablePanel>\n            {open && (\n              <>\n                <ResizableHandle className='cursor-col-resize' onMouseDown={startDrag} />\n                <ResizablePanel\n                  className='min-w-[200px]'\n                  style={{ flex: `0 0 ${computedPaneFlex}` }}\n                >\n                  <div\n                    className={cn('h-full w-full overflow-auto border-l bg-card', paneClassName)}\n                  >\n                    <div className='sticky top-0 z-10 flex items-center justify-end gap-2 border-b bg-card px-2 py-1'>\n                      {onClose && (\n                        <button\n                          type='button'\n                          aria-label='Close pane'\n                          className='inline-flex h-7 w-7 items-center justify-center rounded hover:bg-muted'\n                          onClick={onClose}\n                        >\n                          <X className='h-4 w-4' />\n                        </button>\n                      )}\n                    </div>\n                    <div className='p-2'>{children}</div>\n                  </div>\n                </ResizablePanel>\n              </>\n            )}\n          </>\n        ) : (\n          <>\n            <ResizablePanel\n              className='min-h-0'\n              style={{ flex: `0 0 ${open ? `${100 - clampedSize}%` : '100%'}` }}\n            >\n              <div className='h-full w-full overflow-auto'>{main}</div>\n            </ResizablePanel>\n            {open && (\n              <>\n                <ResizableHandle className='cursor-row-resize' onMouseDown={startDrag} />\n                <ResizablePanel\n                  className='min-h-[160px]'\n                  style={{ flex: `0 0 ${open ? `${clampedSize}%` : '0%'}` }}\n                >\n                  <div\n                    className={cn('h-full w-full overflow-auto border-t bg-card', paneClassName)}\n                  >\n                    <div className='sticky top-0 z-10 flex items-center justify-end gap-2 border-b bg-card px-2 py-1'>\n                      {onClose && (\n                        <button\n                          type='button'\n                          aria-label='Close pane'\n                          className='inline-flex h-7 w-7 items-center justify-center rounded hover:bg-muted'\n                          onClick={onClose}\n                        >\n                          <X className='h-4 w-4' />\n                        </button>\n                      )}\n                    </div>\n                    <div className='p-2'>{children}</div>\n                  </div>\n                </ResizablePanel>\n              </>\n            )}\n          </>\n        )}\n      </ResizablePanelGroup>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"adjustable-pane.js","names":["_Fragment","AdjustablePane","vertical","side","containerRef","useRef","size","setSize","useState","initialSize","prevInitialSize","setPrevInitialSize","clampedSize","minSize","maxSize","startDrag","useCallback","container","rect","onMove","percent","ev","onUp","mainFlexPercent","computedMainFlex","open","computedPaneFlex","cn","className","ResizablePanelGroup","Fragment","ResizablePanel","main","ResizableHandle","paneClassName","onClose","X"],"sources":["../../../../src/ui/components/ui/adjustable-pane.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { X } from 'lucide-react';\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable';\nimport { cn } from '../../lib/utils';\n\n/**\n * Controlled pane visibility, percentage size bounds and content for AdjustablePane.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see AdjustablePane\n */\nexport type AdjustablePaneProps = {\n  /**\n   * Pane placement; defaults to right. bottom selects vertical resizing.\n   */\n  side?: 'right' | 'bottom';\n  /**\n   * Controlled visibility; the host updates this value in response to close/open requests.\n   */\n  open: boolean;\n  /**\n   * Called by the close button; the host must set open=false. Omitted hides the close button.\n   * @returns No value; complete the host callback action.\n   */\n  onClose?: () => void;\n  /**\n   * Initial pane share in percent (default 30); later changes reset local size before clamping.\n   */\n  initialSize?: number;\n  /**\n   * Minimum pane share in percent (default 20). Supply bounds in a consistent 0–100 range; the wrapper does not validate them.\n   */\n  minSize?: number;\n  /**\n   * Maximum pane share in percent (default 60). Supply a value at least minSize.\n   */\n  maxSize?: number;\n  /**\n   * Additional classes merged with wrapper styling; see the component for the targeted element.\n   */\n  className?: string;\n  /**\n   * Additional classes on the scrollable pane content container.\n   */\n  paneClassName?: string;\n  /**\n   * Content rendered in the wrapper's child region.\n   */\n  children?: React.ReactNode;\n  /**\n   * Content rendered in the remaining main panel.\n   */\n  main?: React.ReactNode;\n};\n\n/**\n * Divides a container between main content and a mouse-resizable right or bottom pane.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: side='right', initialSize=30, minSize=20, maxSize=60.\n * @returns The rendered AdjustablePane composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Give the host a nonzero width and height. open is controlled; onClose requests closure without changing it. Sizes are percentages clamped between minSize/maxSize. Changing initialSize resets local size. Drag listeners attach to window and are removed on mouseup; unmount during a drag does not install separate cleanup. This wrapper implements mouse resizing; it does not add keyboard resizing.\n * @example\n * ```tsx\n * import { AdjustablePane } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AdjustablePane open side=\"right\" main={<p>Main content</p>}>Details</AdjustablePane>);\n * }\n * ```\n */\nexport function AdjustablePane({\n  side = 'right',\n  open,\n  onClose,\n  initialSize = 30,\n  minSize = 20,\n  maxSize = 60,\n  className,\n  paneClassName,\n  children,\n  main,\n}: AdjustablePaneProps) {\n  const vertical = side === 'bottom';\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const [size, setSize] = useState<number>(initialSize);\n  const [prevInitialSize, setPrevInitialSize] = useState(initialSize);\n\n  if (initialSize !== prevInitialSize) {\n    setSize(initialSize);\n    setPrevInitialSize(initialSize);\n  }\n\n  const clampedSize = Math.min(Math.max(size, minSize), maxSize);\n\n  const startDrag = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      const container = containerRef.current;\n      if (!container) return;\n\n      const rect = container.getBoundingClientRect();\n\n      const onMove = (ev: MouseEvent) => {\n        if (vertical) {\n          const offset = rect.bottom - ev.clientY;\n          const percent = (offset / rect.height) * 100;\n          setSize(percent);\n        } else {\n          const offset = rect.right - ev.clientX;\n          const percent = (offset / rect.width) * 100;\n          setSize(percent);\n        }\n      };\n\n      const onUp = () => {\n        window.removeEventListener('mousemove', onMove);\n        window.removeEventListener('mouseup', onUp);\n      };\n\n      window.addEventListener('mousemove', onMove);\n      window.addEventListener('mouseup', onUp);\n    },\n    [vertical],\n  );\n\n  const mainFlexPercent = 100 - clampedSize;\n  const computedMainFlex = open ? `${mainFlexPercent}%` : '100%';\n  const computedPaneFlex = open ? `${clampedSize}%` : '0%';\n\n  return (\n    <div ref={containerRef} className={cn('h-full w-full', className)}>\n      <ResizablePanelGroup\n        data-panel-group-direction={vertical ? 'vertical' : 'horizontal'}\n        style={{ userSelect: 'none' }}\n      >\n        {side === 'right' ? (\n          <>\n            <ResizablePanel className='min-w-0' style={{ flex: `0 0 ${computedMainFlex}` }}>\n              <div className='h-full w-full overflow-auto'>{main}</div>\n            </ResizablePanel>\n            {open && (\n              <>\n                <ResizableHandle className='cursor-col-resize' onMouseDown={startDrag} />\n                <ResizablePanel\n                  className='min-w-[200px]'\n                  style={{ flex: `0 0 ${computedPaneFlex}` }}\n                >\n                  <div\n                    className={cn('h-full w-full overflow-auto border-l bg-card', paneClassName)}\n                  >\n                    <div className='sticky top-0 z-10 flex items-center justify-end gap-2 border-b bg-card px-2 py-1'>\n                      {onClose && (\n                        <button\n                          type='button'\n                          aria-label='Close pane'\n                          className='inline-flex h-7 w-7 items-center justify-center rounded hover:bg-muted'\n                          onClick={onClose}\n                        >\n                          <X className='h-4 w-4' />\n                        </button>\n                      )}\n                    </div>\n                    <div className='p-2'>{children}</div>\n                  </div>\n                </ResizablePanel>\n              </>\n            )}\n          </>\n        ) : (\n          <>\n            <ResizablePanel\n              className='min-h-0'\n              style={{ flex: `0 0 ${open ? `${100 - clampedSize}%` : '100%'}` }}\n            >\n              <div className='h-full w-full overflow-auto'>{main}</div>\n            </ResizablePanel>\n            {open && (\n              <>\n                <ResizableHandle className='cursor-row-resize' onMouseDown={startDrag} />\n                <ResizablePanel\n                  className='min-h-[160px]'\n                  style={{ flex: `0 0 ${open ? `${clampedSize}%` : '0%'}` }}\n                >\n                  <div\n                    className={cn('h-full w-full overflow-auto border-t bg-card', paneClassName)}\n                  >\n                    <div className='sticky top-0 z-10 flex items-center justify-end gap-2 border-b bg-card px-2 py-1'>\n                      {onClose && (\n                        <button\n                          type='button'\n                          aria-label='Close pane'\n                          className='inline-flex h-7 w-7 items-center justify-center rounded hover:bg-muted'\n                          onClick={onClose}\n                        >\n                          <X className='h-4 w-4' />\n                        </button>\n                      )}\n                    </div>\n                    <div className='p-2'>{children}</div>\n                  </div>\n                </ResizablePanel>\n              </>\n            )}\n          </>\n        )}\n      </ResizablePanelGroup>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/components/ui/alert-dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.cjs","names":["AlertDialogPrimitive","React","cn","Button","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_components","react_jsx_runtime","react","_base_ui_react_alert_dialog","AlertDialog","props","AlertDialogTrigger","AlertDialogPortal","AlertDialogOverlay","className","AlertDialogContent","size","AlertDialogHeader","AlertDialogFooter","AlertDialogMedia","AlertDialogTitle","AlertDialogDescription","AlertDialogAction","AlertDialogCancel"],"sources":["../../../../src/ui/components/ui/alert-dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nimport { cn } from '../../lib/utils';\nimport { Button } from '../../components/ui/button';\n\n/**\n * ユーザーの重要な確認や操作を必要とする警告ダイアログのルートコンポーネント。\n */\nconst AlertDialog = (props: AlertDialogPrimitive.Root.Props) => (\n  <AlertDialogPrimitive.Root data-slot='alert-dialog' {...props} />\n);\nAlertDialog.displayName = 'AlertDialog';\n\n/**\n * 警告ダイアログを開くためのトリガーボタン。\n */\nfunction AlertDialogTrigger({\n  children,\n  ...props\n}: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger\n      data-slot='alert-dialog-trigger'\n      {...props}\n    >\n      {children}\n    </AlertDialogPrimitive.Trigger>\n  );\n}\nAlertDialogTrigger.displayName = 'AlertDialogTrigger';\n\nconst AlertDialogPortal = React.forwardRef<HTMLDivElement, AlertDialogPrimitive.Portal.Props>(\n  ({ ...props }, ref) => (\n    <AlertDialogPrimitive.Portal ref={ref} data-slot='alert-dialog-portal' {...props} />\n  ),\n);\nAlertDialogPortal.displayName = 'AlertDialogPortal';\n\nconst AlertDialogOverlay = React.forwardRef<HTMLDivElement, AlertDialogPrimitive.Backdrop.Props>(\n  ({ className, ...props }, ref) => (\n    <AlertDialogPrimitive.Backdrop\n      ref={ref}\n      data-slot='alert-dialog-overlay'\n      className={cn(\n        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nAlertDialogOverlay.displayName = 'AlertDialogOverlay';\n\nconst AlertDialogContent = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogPrimitive.Popup.Props & { size?: 'default' | 'sm' }\n>(({ className, size = 'default', children, ...props }, ref) => (\n  <AlertDialogPortal>\n    <AlertDialogOverlay />\n    <AlertDialogPrimitive.Popup\n      ref={ref}\n      data-slot='alert-dialog-content'\n      data-size={size}\n      className={cn(\n        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </AlertDialogPrimitive.Popup>\n  </AlertDialogPortal>\n));\nAlertDialogContent.displayName = 'AlertDialogContent';\n\nconst AlertDialogHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='alert-dialog-header'\n      className={cn(\n        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nAlertDialogHeader.displayName = 'AlertDialogHeader';\n\nconst AlertDialogFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='alert-dialog-footer'\n      className={cn(\n        'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nAlertDialogFooter.displayName = 'AlertDialogFooter';\n\nconst AlertDialogMedia = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='alert-dialog-media'\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nAlertDialogMedia.displayName = 'AlertDialogMedia';\n\nconst AlertDialogTitle = React.forwardRef<HTMLHeadingElement, AlertDialogPrimitive.Title.Props>(\n  ({ className, ...props }, ref) => (\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot='alert-dialog-title'\n      className={cn(\n        'text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nAlertDialogTitle.displayName = 'AlertDialogTitle';\n\nconst AlertDialogDescription = React.forwardRef<\n  HTMLParagraphElement,\n  AlertDialogPrimitive.Description.Props\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    data-slot='alert-dialog-description'\n    className={cn(\n      'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',\n      className,\n    )}\n    {...props}\n  />\n));\nAlertDialogDescription.displayName = 'AlertDialogDescription';\n\nconst AlertDialogAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n  ({ className, ...props }, ref) => (\n    <Button ref={ref} data-slot='alert-dialog-action' className={cn(className)} {...props} />\n  ),\n);\nAlertDialogAction.displayName = 'AlertDialogAction';\n\nconst AlertDialogCancel = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>\n>(({ className, variant = 'outline', size = 'default', ...props }, ref) => (\n  <AlertDialogPrimitive.Close\n    ref={ref}\n    data-slot='alert-dialog-cancel'\n    className={cn(className)}\n    render={<Button variant={variant} size={size} />}\n    {...props}\n  />\n));\nAlertDialogCancel.displayName = 'AlertDialogCancel';\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n"],"mappings":"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"}
+{"version":3,"file":"alert-dialog.cjs","names":["AlertDialogPrimitive","React","cn","Button","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_components","react_jsx_runtime","react","_base_ui_react_alert_dialog","AlertDialog","props","AlertDialogTrigger","AlertDialogPortal","AlertDialogOverlay","className","AlertDialogContent","size","AlertDialogHeader","AlertDialogFooter","AlertDialogMedia","AlertDialogTitle","AlertDialogDescription","AlertDialogAction","AlertDialogCancel"],"sources":["../../../../src/ui/components/ui/alert-dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\n\nimport { cn } from '../../lib/utils';\nimport { Button } from '../../components/ui/button';\n\n/**\n * Coordinates an alert dialog that requests an explicit user decision.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AlertDialog composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nconst AlertDialog = (props: AlertDialogPrimitive.Root.Props) => (\n  <AlertDialogPrimitive.Root data-slot='alert-dialog' {...props} />\n);\nAlertDialog.displayName = 'AlertDialog';\n\n/**\n * Renders the control that requests opening its alert dialog.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AlertDialogTrigger composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nfunction AlertDialogTrigger({\n  children,\n  ...props\n}: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger\n      data-slot='alert-dialog-trigger'\n      {...props}\n    >\n      {children}\n    </AlertDialogPrimitive.Trigger>\n  );\n}\nAlertDialogTrigger.displayName = 'AlertDialogTrigger';\n\n/**\n * Mounts alert-dialog descendants into the Base UI portal target.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AlertDialogPortal composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nconst AlertDialogPortal = React.forwardRef<HTMLDivElement, AlertDialogPrimitive.Portal.Props>(\n  ({ ...props }, ref) => (\n    <AlertDialogPrimitive.Portal ref={ref} data-slot='alert-dialog-portal' {...props} />\n  ),\n);\nAlertDialogPortal.displayName = 'AlertDialogPortal';\n\n/**\n * Renders the fixed backdrop for an alert dialog.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AlertDialogOverlay composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nconst AlertDialogOverlay = React.forwardRef<HTMLDivElement, AlertDialogPrimitive.Backdrop.Props>(\n  ({ className, ...props }, ref) => (\n    <AlertDialogPrimitive.Backdrop\n      ref={ref}\n      data-slot='alert-dialog-overlay'\n      className={cn(\n        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nAlertDialogOverlay.displayName = 'AlertDialogOverlay';\n\n/**\n * Portals an alert popup with its backdrop and default or small sizing.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: size='default'.\n * @returns The rendered AlertDialogContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nconst AlertDialogContent = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogPrimitive.Popup.Props & { /**\n * Visual size preset; defaults to default unless the owning component states otherwise.\n */\n  /**\n   * Visual size preset; defaults to default unless the owning component states otherwise.\n   */\n  size?: 'default' | 'sm' }\n>(({ className, size = 'default', children, ...props }, ref) => (\n  <AlertDialogPortal>\n    <AlertDialogOverlay />\n    <AlertDialogPrimitive.Popup\n      ref={ref}\n      data-slot='alert-dialog-content'\n      data-size={size}\n      className={cn(\n        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </AlertDialogPrimitive.Popup>\n  </AlertDialogPortal>\n));\nAlertDialogContent.displayName = 'AlertDialogContent';\n\n/**\n * Groups alert-dialog heading, description and optional media.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AlertDialogHeader composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nconst AlertDialogHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='alert-dialog-header'\n      className={cn(\n        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nAlertDialogHeader.displayName = 'AlertDialogHeader';\n\n/**\n * Lays out alert-dialog decision controls at the popup footer.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AlertDialogFooter composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nconst AlertDialogFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='alert-dialog-footer'\n      className={cn(\n        'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nAlertDialogFooter.displayName = 'AlertDialogFooter';\n\n/**\n * Styles an icon or illustration placed in the alert-dialog header.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AlertDialogMedia composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nconst AlertDialogMedia = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='alert-dialog-media'\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nAlertDialogMedia.displayName = 'AlertDialogMedia';\n\n/**\n * Provides the accessible heading for its alert popup.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AlertDialogTitle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nconst AlertDialogTitle = React.forwardRef<HTMLHeadingElement, AlertDialogPrimitive.Title.Props>(\n  ({ className, ...props }, ref) => (\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot='alert-dialog-title'\n      className={cn(\n        'text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nAlertDialogTitle.displayName = 'AlertDialogTitle';\n\n/**\n * Provides the accessible explanatory text for its alert popup.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AlertDialogDescription composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nconst AlertDialogDescription = React.forwardRef<\n  HTMLParagraphElement,\n  AlertDialogPrimitive.Description.Props\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    data-slot='alert-dialog-description'\n    className={cn(\n      'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',\n      className,\n    )}\n    {...props}\n  />\n));\nAlertDialogDescription.displayName = 'AlertDialogDescription';\n\n/**\n * Renders an Appkit button for a host-owned alert-dialog action.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered AlertDialogAction composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type. This is a Button wrapper, not a Base UI close primitive; clicking it does not automatically close the dialog.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nconst AlertDialogAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n  ({ className, ...props }, ref) => (\n    <Button ref={ref} data-slot='alert-dialog-action' className={cn(className)} {...props} />\n  ),\n);\nAlertDialogAction.displayName = 'AlertDialogAction';\n\n/**\n * Renders a close control styled as an outline button.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='outline', size='default'.\n * @returns The rendered AlertDialogCancel composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type. variant defaults to outline and size to default; the Base UI Close primitive is rendered through Button.\n * @example\n * ```tsx\n * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log(\"Apply requested\")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);\n * }\n * ```\n */\nconst AlertDialogCancel = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>\n>(({ className, variant = 'outline', size = 'default', ...props }, ref) => (\n  <AlertDialogPrimitive.Close\n    ref={ref}\n    data-slot='alert-dialog-cancel'\n    className={cn(className)}\n    render={<Button variant={variant} size={size} />}\n    {...props}\n  />\n));\nAlertDialogCancel.displayName = 'AlertDialogCancel';\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n"],"mappings":"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"}

package/dist/ui/components/ui/alert-dialog.d.cts

@@ -1,29 +1,206 @@
 import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
 import * as React from 'react';
 /**
- * ユーザーの重要な確認や操作を必要とする警告ダイアログのルートコンポーネント。
+ * Coordinates an alert dialog that requests an explicit user decision.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AlertDialog composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
  */
 declare const AlertDialog: {
     (props: AlertDialogPrimitive.Root.Props): React.JSX.Element;
     displayName: string;
 };
 /**
- * 警告ダイアログを開くためのトリガーボタン。
+ * Renders the control that requests opening its alert dialog.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AlertDialogTrigger composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
  */
 declare function AlertDialogTrigger({ children, ...props }: AlertDialogPrimitive.Trigger.Props): React.JSX.Element;
 declare namespace AlertDialogTrigger {
     var displayName: string;
 }
+/**
+ * Mounts alert-dialog descendants into the Base UI portal target.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AlertDialogPortal composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
+ */
 declare const AlertDialogPortal: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Renders the fixed backdrop for an alert dialog.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AlertDialogOverlay composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
+ */
 declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Portals an alert popup with its backdrop and default or small sizing.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: size='default'.
+ * @returns The rendered AlertDialogContent composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
+ */
 declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPopupProps & {
+    /**
+     * Visual size preset; defaults to default unless the owning component states otherwise.
+     */
     size?: "default" | "sm";
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Groups alert-dialog heading, description and optional media.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AlertDialogHeader composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
+ */
 declare const AlertDialogHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Lays out alert-dialog decision controls at the popup footer.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AlertDialogFooter composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
+ */
 declare const AlertDialogFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Styles an icon or illustration placed in the alert-dialog header.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AlertDialogMedia composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
+ */
 declare const AlertDialogMedia: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Provides the accessible heading for its alert popup.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AlertDialogTitle composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
+ */
 declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * Provides the accessible explanatory text for its alert popup.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AlertDialogDescription composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
+ */
 declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Renders an Appkit button for a host-owned alert-dialog action.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered AlertDialogAction composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type. This is a Button wrapper, not a Base UI close primitive; clicking it does not automatically close the dialog.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
+ */
 declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<Omit<import('./button-components.cjs').ButtonProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Renders a close control styled as an outline button.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='outline', size='default'.
+ * @returns The rendered AlertDialogCancel composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Keep popup, trigger and close controls under AlertDialog. Content supplies its own portal/backdrop; separate Portal/Overlay exports are for custom compositions. Base UI owns dialog state and focus. The host owns action effects. The ref prop forwards to the rendered control or container declared by the component ref type. variant defaults to outline and size to default; the Base UI Close primitive is rendered through Button.
+ * @example
+ * ```tsx
+ * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<AlertDialog><AlertDialogTrigger>Review</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Apply changes?</AlertDialogTitle><AlertDialogDescription>Review your changes before applying them.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => console.log("Apply requested")}>Apply</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog>);
+ * }
+ * ```
+ */
 declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogCloseProps & Pick<Omit<import('./button-components.cjs').ButtonProps, "ref"> & React.RefAttributes<HTMLElement>, "size" | "variant">, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };