@skdx/react-blocks 0.34.0 → 0.36.0

package/dist/comment-thread/CommentThread.d.ts

@@ -0,0 +1,21 @@
+import type * as React from 'react';
+import type { CommentThreadProps } from './types.js';
+/**
+ * A root comment with its replies, indented one level, collapsible with the
+ * consumer's own labels, plus slots for a load-more control and a composer.
+ *
+ * @example
+ * ```tsx
+ * <CommentThread
+ *   replies={<Comment author="Alex">Agreed.</Comment>}
+ *   showRepliesLabel="Show 1 reply"
+ *   hideRepliesLabel="Hide replies"
+ * >
+ *   <Comment author="Priya Shah">Looks good to me.</Comment>
+ * </CommentThread>
+ * ```
+ */
+export declare const CommentThread: {
+    ({ children, replies, expanded: expandedProp, defaultExpanded, onExpandedChange, showRepliesLabel, hideRepliesLabel, loadMore, composer, ...props }: CommentThreadProps): React.ReactNode;
+    displayName: string;
+};

package/dist/comment-thread/CommentThread.js

@@ -0,0 +1,2 @@
+'use client';
+import{CollapsibleContent as h,CollapsibleRoot as b,CollapsibleTrigger as k}from"@skdx/react/primitives/collapsible";function T(...e){let t="";for(let o of e)o&&(t=t?`${t} ${o}`:o);return t}function r(e,t,o){let a=t==="root",s=a?`skdx-${e}`:`skdx-${e}__${t}`,n={className:T(s,o),"data-part":t};return a&&(n["data-skdx-component"]=e),n}import*as p from"react";function f(e,t,o){let[a,s]=p.useState(t),n=e!==void 0;return[n?e:a,i=>{n||s(i),o?.(i)}]}import{jsx as d,jsxs as x}from"react/jsx-runtime";var v=({children:e,replies:t,expanded:o,defaultExpanded:a=!0,onExpandedChange:s,showRepliesLabel:n,hideRepliesLabel:c,loadMore:l,composer:i,...u})=>{let[m,C]=f(o,a,s),g=n?x(b,{open:m,onOpenChange:C,children:[d(k,{...r("comment-thread","toggle"),children:m?c??n:n}),d(h,{...r("comment-thread","replies"),children:t})]}):d("div",{...r("comment-thread","replies"),children:t});return x("div",{"data-state":m?"expanded":"collapsed",...u,...r("comment-thread","root",u.className),children:[d("div",{...r("comment-thread","comment"),children:e}),t?g:null,l?d("div",{...r("comment-thread","load-more"),children:l}):null,i?d("div",{...r("comment-thread","composer"),children:i}):null]})};v.displayName="CommentThread";export{v as CommentThread};

package/dist/comment-thread/index.d.cts

@@ -0,0 +1,2 @@
+export { CommentThread } from './CommentThread.cjs';
+export type { CommentThreadProps } from './types.cjs';

package/dist/comment-thread/index.d.ts

@@ -0,0 +1,2 @@
+export { CommentThread } from './CommentThread.js';
+export type { CommentThreadProps } from './types.js';

package/dist/comment-thread/types.d.cts

@@ -0,0 +1,46 @@
+import type * as React from 'react';
+/** Props for the {@link CommentThread} block. */
+export interface CommentThreadProps extends React.ComponentPropsWithRef<'div'> {
+    /** The root Comment this thread replies to. */
+    children: React.ReactNode;
+    /**
+     * The reply Comments, rendered indented one level below the root comment.
+     * @default undefined — no replies region renders.
+     */
+    replies?: React.ReactNode | undefined;
+    /**
+     * Whether the replies are shown, for controlled usage paired with `onExpandedChange`.
+     * @default undefined — uncontrolled, seeded from `defaultExpanded`.
+     */
+    expanded?: boolean | undefined;
+    /**
+     * Whether the replies start shown, used only while uncontrolled.
+     * @default true
+     */
+    defaultExpanded?: boolean | undefined;
+    /**
+     * Fires with the new expanded state whenever the replies toggle is activated.
+     * @default undefined — no-op if omitted.
+     */
+    onExpandedChange?: ((expanded: boolean) => void) | undefined;
+    /**
+     * Text of the toggle button while the replies are hidden. A toggle only renders when this is given.
+     * @default undefined — no toggle renders and the replies are always shown.
+     */
+    showRepliesLabel?: string | undefined;
+    /**
+     * Text of the toggle button while the replies are shown.
+     * @default showRepliesLabel's value
+     */
+    hideRepliesLabel?: string | undefined;
+    /**
+     * Control that requests more replies, rendered below the replies region.
+     * @default undefined — no load-more region renders.
+     */
+    loadMore?: React.ReactNode | undefined;
+    /**
+     * Reply composer rendered at the end of the thread.
+     * @default undefined — no composer region renders.
+     */
+    composer?: React.ReactNode | undefined;
+}

package/dist/comment-thread/types.d.ts

@@ -0,0 +1,46 @@
+import type * as React from 'react';
+/** Props for the {@link CommentThread} block. */
+export interface CommentThreadProps extends React.ComponentPropsWithRef<'div'> {
+    /** The root Comment this thread replies to. */
+    children: React.ReactNode;
+    /**
+     * The reply Comments, rendered indented one level below the root comment.
+     * @default undefined — no replies region renders.
+     */
+    replies?: React.ReactNode | undefined;
+    /**
+     * Whether the replies are shown, for controlled usage paired with `onExpandedChange`.
+     * @default undefined — uncontrolled, seeded from `defaultExpanded`.
+     */
+    expanded?: boolean | undefined;
+    /**
+     * Whether the replies start shown, used only while uncontrolled.
+     * @default true
+     */
+    defaultExpanded?: boolean | undefined;
+    /**
+     * Fires with the new expanded state whenever the replies toggle is activated.
+     * @default undefined — no-op if omitted.
+     */
+    onExpandedChange?: ((expanded: boolean) => void) | undefined;
+    /**
+     * Text of the toggle button while the replies are hidden. A toggle only renders when this is given.
+     * @default undefined — no toggle renders and the replies are always shown.
+     */
+    showRepliesLabel?: string | undefined;
+    /**
+     * Text of the toggle button while the replies are shown.
+     * @default showRepliesLabel's value
+     */
+    hideRepliesLabel?: string | undefined;
+    /**
+     * Control that requests more replies, rendered below the replies region.
+     * @default undefined — no load-more region renders.
+     */
+    loadMore?: React.ReactNode | undefined;
+    /**
+     * Reply composer rendered at the end of the thread.
+     * @default undefined — no composer region renders.
+     */
+    composer?: React.ReactNode | undefined;
+}

package/dist/confirm-dialog/ConfirmDialog.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var g=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var F=(t,o)=>{for(var n in o)g(t,n,{get:o[n],enumerable:!0})},S=(t,o,n,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of T(o))!B.call(t,r)&&r!==n&&g(t,r,{get:()=>o[r],enumerable:!(l=$(o,r))||l.enumerable});return t};var w=t=>S(g({},"__esModule",{value:!0}),t);var z={};F(z,{ConfirmDialog:()=>f});module.exports=w(z);var c=require("@skdx/react"),i=require("@skdx/react/primitives/dialog");function _(...t){let o="";for(let n of t)n&&(o=o?`${o} ${n}`:n);return o}function e(t,o,n){let l=o==="root",r=l?`skdx-${t}`:`skdx-${t}__${o}`,s={className:_(r,n),"data-part":o};return l&&(s["data-skdx-component"]=t),s}var a=require("react/jsx-runtime"),f=({open:t,defaultOpen:o=!1,onOpenChange:n,onOpenChangeComplete:l,onEscapeKeyDown:r,onPointerDownOutside:s,onFocusOutside:x,onInteractOutside:k,onOpenAutoFocus:y,onCloseAutoFocus:P,trigger:m,title:b,description:u,confirmLabel:A="Confirm",cancelLabel:O="Cancel",destructive:D=!1,pending:d=!1,disabled:v=!1,size:R,onConfirm:h,onCancel:N,children:p,...C})=>(0,a.jsxs)(i.DialogRoot,{open:t,defaultOpen:o,onOpenChange:n,onOpenChangeComplete:l,role:"alertdialog",modal:!0,dismiss:d?"none":"escape",status:D?"danger":void 0,children:[m?(0,a.jsx)(i.DialogTrigger,{asChild:!0,children:m}):null,(0,a.jsxs)(i.DialogPortal,{children:[(0,a.jsx)(i.DialogOverlay,{}),(0,a.jsxs)(i.DialogContent,{onEscapeKeyDown:r,onPointerDownOutside:s,onFocusOutside:x,onInteractOutside:k,onOpenAutoFocus:y,onCloseAutoFocus:P,...C,size:R,...e("confirm-dialog","root",C.className),children:[(0,a.jsx)(i.DialogTitle,{...e("confirm-dialog","title"),children:b}),u?(0,a.jsx)(i.DialogDescription,{...e("confirm-dialog","description"),children:u}):null,p?(0,a.jsx)("div",{...e("confirm-dialog","body"),children:p}):null,(0,a.jsxs)("div",{...e("confirm-dialog","footer"),children:[(0,a.jsx)(i.DialogCancel,{asChild:!0,children:(0,a.jsx)(c.Button,{variant:"ghost",disabled:d,onClick:N,...e("confirm-dialog","cancel"),children:O})}),(0,a.jsx)(i.DialogAction,{asChild:!0,children:(0,a.jsx)(c.Button,{variant:D?"danger":"primary",loading:d,disabled:d||v,onClick:h,...e("confirm-dialog","confirm"),children:A})})]})]})]})]});f.displayName="ConfirmDialog";0&&(module.exports={ConfirmDialog});

package/dist/confirm-dialog/ConfirmDialog.d.cts

@@ -0,0 +1,31 @@
+import type * as React from 'react';
+import type { ConfirmDialogProps } from './types.cjs';
+/**
+ * Confirmation dialog block for a destructive, irreversible or sensitive
+ * action, composing the core alert dialog primitives with a `Button` footer
+ * and an externally controlled pending state that disables both buttons and
+ * blocks dismissal while the confirmed request is in flight.
+ *
+ * A synchronous confirmation with no pending state is served by the core
+ * `<Dialog role="alertdialog">` recipe alone.
+ *
+ * @example
+ * ```tsx
+ * <ConfirmDialog
+ *   trigger={<Button variant="danger">Delete project</Button>}
+ *   title="Delete this project?"
+ *   description="This cannot be undone."
+ *   destructive
+ *   pending={isDeleting}
+ *   onConfirm={(event) => {
+ *     event.preventDefault();
+ *     setDeleting(true);
+ *     void deleteProject().finally(() => setDeleting(false));
+ *   }}
+ * />
+ * ```
+ */
+export declare const ConfirmDialog: {
+    ({ open, defaultOpen, onOpenChange, onOpenChangeComplete, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onOpenAutoFocus, onCloseAutoFocus, trigger, title, description, confirmLabel, cancelLabel, destructive, pending, disabled, size, onConfirm, onCancel, children, ...props }: ConfirmDialogProps): React.ReactNode;
+    displayName: string;
+};

package/dist/confirm-dialog/ConfirmDialog.d.ts

@@ -0,0 +1,31 @@
+import type * as React from 'react';
+import type { ConfirmDialogProps } from './types.js';
+/**
+ * Confirmation dialog block for a destructive, irreversible or sensitive
+ * action, composing the core alert dialog primitives with a `Button` footer
+ * and an externally controlled pending state that disables both buttons and
+ * blocks dismissal while the confirmed request is in flight.
+ *
+ * A synchronous confirmation with no pending state is served by the core
+ * `<Dialog role="alertdialog">` recipe alone.
+ *
+ * @example
+ * ```tsx
+ * <ConfirmDialog
+ *   trigger={<Button variant="danger">Delete project</Button>}
+ *   title="Delete this project?"
+ *   description="This cannot be undone."
+ *   destructive
+ *   pending={isDeleting}
+ *   onConfirm={(event) => {
+ *     event.preventDefault();
+ *     setDeleting(true);
+ *     void deleteProject().finally(() => setDeleting(false));
+ *   }}
+ * />
+ * ```
+ */
+export declare const ConfirmDialog: {
+    ({ open, defaultOpen, onOpenChange, onOpenChangeComplete, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onOpenAutoFocus, onCloseAutoFocus, trigger, title, description, confirmLabel, cancelLabel, destructive, pending, disabled, size, onConfirm, onCancel, children, ...props }: ConfirmDialogProps): React.ReactNode;
+    displayName: string;
+};

package/dist/confirm-dialog/ConfirmDialog.js

@@ -0,0 +1,2 @@
+'use client';
+import{Button as D}from"@skdx/react";import{DialogAction as $,DialogCancel as T,DialogContent as B,DialogDescription as F,DialogOverlay as S,DialogPortal as w,DialogRoot as _,DialogTitle as z,DialogTrigger as E}from"@skdx/react/primitives/dialog";function N(...a){let o="";for(let n of a)n&&(o=o?`${o} ${n}`:n);return o}function t(a,o,n){let r=o==="root",d=r?`skdx-${a}`:`skdx-${a}__${o}`,e={className:N(d,n),"data-part":o};return r&&(e["data-skdx-component"]=a),e}import{jsx as i,jsxs as s}from"react/jsx-runtime";var p=({open:a,defaultOpen:o=!1,onOpenChange:n,onOpenChangeComplete:r,onEscapeKeyDown:d,onPointerDownOutside:e,onFocusOutside:C,onInteractOutside:x,onOpenAutoFocus:k,onCloseAutoFocus:y,trigger:g,title:P,description:c,confirmLabel:b="Confirm",cancelLabel:A="Cancel",destructive:f=!1,pending:l=!1,disabled:O=!1,size:v,onConfirm:R,onCancel:h,children:m,...u})=>s(_,{open:a,defaultOpen:o,onOpenChange:n,onOpenChangeComplete:r,role:"alertdialog",modal:!0,dismiss:l?"none":"escape",status:f?"danger":void 0,children:[g?i(E,{asChild:!0,children:g}):null,s(w,{children:[i(S,{}),s(B,{onEscapeKeyDown:d,onPointerDownOutside:e,onFocusOutside:C,onInteractOutside:x,onOpenAutoFocus:k,onCloseAutoFocus:y,...u,size:v,...t("confirm-dialog","root",u.className),children:[i(z,{...t("confirm-dialog","title"),children:P}),c?i(F,{...t("confirm-dialog","description"),children:c}):null,m?i("div",{...t("confirm-dialog","body"),children:m}):null,s("div",{...t("confirm-dialog","footer"),children:[i(T,{asChild:!0,children:i(D,{variant:"ghost",disabled:l,onClick:h,...t("confirm-dialog","cancel"),children:A})}),i($,{asChild:!0,children:i(D,{variant:f?"danger":"primary",loading:l,disabled:l||O,onClick:R,...t("confirm-dialog","confirm"),children:b})})]})]})]})]});p.displayName="ConfirmDialog";export{p as ConfirmDialog};

package/dist/confirm-dialog/index.d.cts

@@ -0,0 +1,2 @@
+export { ConfirmDialog } from './ConfirmDialog.cjs';
+export type { ConfirmDialogProps } from './types.cjs';

package/dist/confirm-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmDialog } from './ConfirmDialog.js';
+export type { ConfirmDialogProps } from './types.js';

package/dist/confirm-dialog/types.d.cts

@@ -0,0 +1,114 @@
+import type * as React from 'react';
+import type { DialogContent } from '@skdx/react/primitives/dialog';
+type ContentProps = React.ComponentProps<typeof DialogContent>;
+/** Props for the {@link ConfirmDialog} block. */
+export interface ConfirmDialogProps extends Omit<React.ComponentPropsWithRef<'dialog'>, 'title' | 'open' | 'onCancel'> {
+    /**
+     * Whether the dialog is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean | undefined;
+    /**
+     * Whether the dialog starts open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Fires with the new open state whenever the dialog opens or closes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires with the new open state once the enter or exit animation has settled.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires when Escape is pressed while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: ContentProps['onEscapeKeyDown'];
+    /**
+     * Fires on a pointer-down outside the content while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: ContentProps['onPointerDownOutside'];
+    /**
+     * Fires when focus moves outside the content while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: ContentProps['onFocusOutside'];
+    /**
+     * Fires for either kind of outside interaction, just before the specific event.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: ContentProps['onInteractOutside'];
+    /**
+     * Fires before focus moves into the content on open; `preventDefault()` leaves focus where it is.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenAutoFocus?: ContentProps['onOpenAutoFocus'];
+    /**
+     * Fires before focus returns to the trigger on close; `preventDefault()` suppresses that return.
+     * @default undefined — no-op if omitted.
+     */
+    onCloseAutoFocus?: ContentProps['onCloseAutoFocus'];
+    /**
+     * Element that opens the dialog, decorated with the trigger's open behavior via `asChild`.
+     * @default undefined — no trigger renders; open the dialog through `open`/`onOpenChange` instead.
+     */
+    trigger?: React.ReactElement | undefined;
+    /** Heading text rendered into the panel's title, naming and labelling the dialog. */
+    title: string;
+    /**
+     * Supporting sentence rendered into the panel's description, read alongside the title.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Text of the button that carries out the confirmed action.
+     * @default 'Confirm'
+     */
+    confirmLabel?: string | undefined;
+    /**
+     * Text of the button that abandons the action.
+     * @default 'Cancel'
+     */
+    cancelLabel?: string | undefined;
+    /**
+     * Renders the confirm button in the skin's danger weight and marks the panel `data-status="danger"`, for an irreversible or destructive action.
+     * @default false
+     */
+    destructive?: boolean | undefined;
+    /**
+     * Marks the confirmed request as in flight: disables both buttons, renders the confirm button's loading state, and blocks Escape dismissal until it clears.
+     * @default false
+     */
+    pending?: boolean | undefined;
+    /**
+     * Disables the confirm button on its own, independent of `pending` — for example until a typed confirmation matches.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Panel width rung the skin reads, fed to the underlying dialog panel.
+     * @default undefined — the skin's own default width.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Fires when the confirm button is activated, before the dialog closes. Call `event.preventDefault()` to hold the panel open while an async request runs, typically alongside `pending`.
+     * @default undefined — no-op if omitted.
+     */
+    onConfirm?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Fires when the cancel button is activated, before the dialog closes. Call `event.preventDefault()` to keep the panel open.
+     * @default undefined — no-op if omitted.
+     */
+    onCancel?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Extra content rendered between the description and the footer buttons.
+     * @default undefined — no body region renders.
+     */
+    children?: React.ReactNode | undefined;
+}
+export {};

package/dist/confirm-dialog/types.d.ts

@@ -0,0 +1,114 @@
+import type * as React from 'react';
+import type { DialogContent } from '@skdx/react/primitives/dialog';
+type ContentProps = React.ComponentProps<typeof DialogContent>;
+/** Props for the {@link ConfirmDialog} block. */
+export interface ConfirmDialogProps extends Omit<React.ComponentPropsWithRef<'dialog'>, 'title' | 'open' | 'onCancel'> {
+    /**
+     * Whether the dialog is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean | undefined;
+    /**
+     * Whether the dialog starts open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Fires with the new open state whenever the dialog opens or closes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires with the new open state once the enter or exit animation has settled.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires when Escape is pressed while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: ContentProps['onEscapeKeyDown'];
+    /**
+     * Fires on a pointer-down outside the content while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: ContentProps['onPointerDownOutside'];
+    /**
+     * Fires when focus moves outside the content while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: ContentProps['onFocusOutside'];
+    /**
+     * Fires for either kind of outside interaction, just before the specific event.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: ContentProps['onInteractOutside'];
+    /**
+     * Fires before focus moves into the content on open; `preventDefault()` leaves focus where it is.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenAutoFocus?: ContentProps['onOpenAutoFocus'];
+    /**
+     * Fires before focus returns to the trigger on close; `preventDefault()` suppresses that return.
+     * @default undefined — no-op if omitted.
+     */
+    onCloseAutoFocus?: ContentProps['onCloseAutoFocus'];
+    /**
+     * Element that opens the dialog, decorated with the trigger's open behavior via `asChild`.
+     * @default undefined — no trigger renders; open the dialog through `open`/`onOpenChange` instead.
+     */
+    trigger?: React.ReactElement | undefined;
+    /** Heading text rendered into the panel's title, naming and labelling the dialog. */
+    title: string;
+    /**
+     * Supporting sentence rendered into the panel's description, read alongside the title.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Text of the button that carries out the confirmed action.
+     * @default 'Confirm'
+     */
+    confirmLabel?: string | undefined;
+    /**
+     * Text of the button that abandons the action.
+     * @default 'Cancel'
+     */
+    cancelLabel?: string | undefined;
+    /**
+     * Renders the confirm button in the skin's danger weight and marks the panel `data-status="danger"`, for an irreversible or destructive action.
+     * @default false
+     */
+    destructive?: boolean | undefined;
+    /**
+     * Marks the confirmed request as in flight: disables both buttons, renders the confirm button's loading state, and blocks Escape dismissal until it clears.
+     * @default false
+     */
+    pending?: boolean | undefined;
+    /**
+     * Disables the confirm button on its own, independent of `pending` — for example until a typed confirmation matches.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Panel width rung the skin reads, fed to the underlying dialog panel.
+     * @default undefined — the skin's own default width.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Fires when the confirm button is activated, before the dialog closes. Call `event.preventDefault()` to hold the panel open while an async request runs, typically alongside `pending`.
+     * @default undefined — no-op if omitted.
+     */
+    onConfirm?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Fires when the cancel button is activated, before the dialog closes. Call `event.preventDefault()` to keep the panel open.
+     * @default undefined — no-op if omitted.
+     */
+    onCancel?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Extra content rendered between the description and the footer buttons.
+     * @default undefined — no body region renders.
+     */
+    children?: React.ReactNode | undefined;
+}
+export {};

package/dist/conversation-list/ConversationList.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var V=Object.create;var v=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var z=(e,t)=>{for(var n in t)v(e,n,{get:t[n],enumerable:!0})},R=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of $(t))!_.call(e,i)&&i!==n&&v(e,i,{get:()=>t[i],enumerable:!(a=O(t,i))||a.enumerable});return e};var C=(e,t,n)=>(n=e!=null?V(G(e)):{},R(t||!e||!e.__esModule?v(n,"default",{value:e,enumerable:!0}):n,e)),B=e=>R(v({},"__esModule",{value:!0}),e);var H={};z(H,{ConversationList:()=>m});module.exports=B(H);var S=C(require("react"),1),r=require("@skdx/react"),d=require("@skdx/react/primitives/listbox"),N=require("../empty-state/EmptyState.cjs");function D(...e){let t="";for(let n of e)n&&(t=t?`${t} ${n}`:n);return t}function s(e,t,n){let a=t==="root",i=a?`skdx-${e}`:`skdx-${e}__${t}`,l={className:D(i,n),"data-part":t};return a&&(l["data-skdx-component"]=e),l}var k=C(require("react"),1);function w(e,t,n){let[a,i]=k.useState(t),l=e!==void 0;return[l?e:a,c=>{l||i(c),n?.(c)}]}var o=require("react/jsx-runtime"),E=[0,1,2];function F(e){let t=new Map([[void 0,[]]]);for(let n of e){let a=t.get(n.group);a?a.push(n):t.set(n.group,[n])}return[...t].filter(([,n])=>n.length>0)}function I(e,t){let n=e.timestamp!==void 0||e.badge!==void 0;return(0,o.jsxs)(d.ListboxItem,{value:e.id,disabled:e.disabled,textValue:e.title,"data-unread":e.unread?"":void 0,...s("conversation-list","item"),children:[t.renderLeading?(0,o.jsx)("span",{"aria-hidden":"true",...s("conversation-list","leading"),children:t.renderLeading(e)}):null,(0,o.jsxs)("span",{...s("conversation-list","body"),children:[(0,o.jsxs)("span",{...s("conversation-list","title"),children:[e.title,e.unread?(0,o.jsxs)(r.VisuallyHidden,{children:[" ",t.unreadLabel]}):null]}),e.preview?(0,o.jsx)("span",{...s("conversation-list","preview"),children:e.preview}):null]}),n?(0,o.jsxs)("span",{...s("conversation-list","meta"),children:[e.timestamp===void 0?null:(0,o.jsx)(r.Time,{value:e.timestamp,relative:!0,now:t.now,...s("conversation-list","time")}),e.badge===void 0?null:(0,o.jsx)(r.Badge,{size:"sm",...s("conversation-list","badge"),children:e.badge})]}):null]},e.id)}var m=({items:e,value:t,defaultValue:n,onValueChange:a,label:i="Conversations",unreadLabel:l="Unread",emptyTitle:g="No conversations",emptyDescription:b,loading:c=!1,now:P,renderLeading:T,...L})=>{let[h,A]=w(t,n??"",a),x={unreadLabel:l,now:P,renderLeading:T},p;return c?p=(0,o.jsx)("div",{"aria-hidden":"true",...s("conversation-list","loading"),children:E.map(u=>(0,o.jsx)(r.Skeleton,{},u))}):e.length===0?p=(0,o.jsx)(N.EmptyState,{size:"sm",title:g,description:b,...s("conversation-list","empty")}):p=(0,o.jsx)(d.Listbox,{"aria-label":i,value:h,onValueChange:u=>{A(u.selectedValue??"")},...s("conversation-list","list"),children:F(e).map(([u,y])=>u===void 0?(0,o.jsx)(S.Fragment,{children:y.map(f=>I(f,x))},"ungrouped"):(0,o.jsxs)(d.ListboxGroup,{...s("conversation-list","group"),children:[(0,o.jsx)(d.ListboxLabel,{...s("conversation-list","group-label"),children:u}),y.map(f=>I(f,x))]},u))}),(0,o.jsx)("div",{"aria-busy":c,...L,...s("conversation-list","root",L.className),children:p})};m.displayName="ConversationList";0&&(module.exports={ConversationList});

package/dist/conversation-list/ConversationList.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { ConversationListProps } from './types.cjs';
+/**
+ * Conversation navigation block: a single-select listbox of threads with a
+ * title, preview, relative timestamp, unread mark and badge, plus grouping and
+ * its own loading and empty states.
+ *
+ * @example
+ * ```tsx
+ * <ConversationList
+ *   items={[{ id: 'a', title: 'Ada Lovelace', preview: 'Sounds good', unread: true }]}
+ *   defaultValue="a"
+ *   onValueChange={(id) => open(id)}
+ * />
+ * ```
+ */
+export declare const ConversationList: {
+    ({ items, value: valueProp, defaultValue, onValueChange, label, unreadLabel, emptyTitle, emptyDescription, loading, now, renderLeading, ...props }: ConversationListProps): React.ReactNode;
+    displayName: string;
+};

package/dist/conversation-list/ConversationList.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { ConversationListProps } from './types.js';
+/**
+ * Conversation navigation block: a single-select listbox of threads with a
+ * title, preview, relative timestamp, unread mark and badge, plus grouping and
+ * its own loading and empty states.
+ *
+ * @example
+ * ```tsx
+ * <ConversationList
+ *   items={[{ id: 'a', title: 'Ada Lovelace', preview: 'Sounds good', unread: true }]}
+ *   defaultValue="a"
+ *   onValueChange={(id) => open(id)}
+ * />
+ * ```
+ */
+export declare const ConversationList: {
+    ({ items, value: valueProp, defaultValue, onValueChange, label, unreadLabel, emptyTitle, emptyDescription, loading, now, renderLeading, ...props }: ConversationListProps): React.ReactNode;
+    displayName: string;
+};

package/dist/conversation-list/ConversationList.js

@@ -0,0 +1,2 @@
+'use client';
+import*as R from"react";import{Badge as P,Skeleton as T,Time as h,VisuallyHidden as A}from"@skdx/react";import{Listbox as V,ListboxGroup as O,ListboxItem as $,ListboxLabel as G}from"@skdx/react/primitives/listbox";import{EmptyState as _}from"../empty-state/EmptyState.js";function N(...e){let t="";for(let n of e)n&&(t=t?`${t} ${n}`:n);return t}function o(e,t,n){let a=t==="root",l=a?`skdx-${e}`:`skdx-${e}__${t}`,i={className:N(l,n),"data-part":t};return a&&(i["data-skdx-component"]=e),i}import*as L from"react";function x(e,t,n){let[a,l]=L.useState(t),i=e!==void 0;return[i?e:a,u=>{i||l(u),n?.(u)}]}import{jsx as s,jsxs as d}from"react/jsx-runtime";var z=[0,1,2];function B(e){let t=new Map([[void 0,[]]]);for(let n of e){let a=t.get(n.group);a?a.push(n):t.set(n.group,[n])}return[...t].filter(([,n])=>n.length>0)}function y(e,t){let n=e.timestamp!==void 0||e.badge!==void 0;return d($,{value:e.id,disabled:e.disabled,textValue:e.title,"data-unread":e.unread?"":void 0,...o("conversation-list","item"),children:[t.renderLeading?s("span",{"aria-hidden":"true",...o("conversation-list","leading"),children:t.renderLeading(e)}):null,d("span",{...o("conversation-list","body"),children:[d("span",{...o("conversation-list","title"),children:[e.title,e.unread?d(A,{children:[" ",t.unreadLabel]}):null]}),e.preview?s("span",{...o("conversation-list","preview"),children:e.preview}):null]}),n?d("span",{...o("conversation-list","meta"),children:[e.timestamp===void 0?null:s(h,{value:e.timestamp,relative:!0,now:t.now,...o("conversation-list","time")}),e.badge===void 0?null:s(P,{size:"sm",...o("conversation-list","badge"),children:e.badge})]}):null]},e.id)}var C=({items:e,value:t,defaultValue:n,onValueChange:a,label:l="Conversations",unreadLabel:i="Unread",emptyTitle:v="No conversations",emptyDescription:f,loading:u=!1,now:k,renderLeading:w,...m})=>{let[I,S]=x(t,n??"",a),g={unreadLabel:i,now:k,renderLeading:w},c;return u?c=s("div",{"aria-hidden":"true",...o("conversation-list","loading"),children:z.map(r=>s(T,{},r))}):e.length===0?c=s(_,{size:"sm",title:v,description:f,...o("conversation-list","empty")}):c=s(V,{"aria-label":l,value:I,onValueChange:r=>{S(r.selectedValue??"")},...o("conversation-list","list"),children:B(e).map(([r,b])=>r===void 0?s(R.Fragment,{children:b.map(p=>y(p,g))},"ungrouped"):d(O,{...o("conversation-list","group"),children:[s(G,{...o("conversation-list","group-label"),children:r}),b.map(p=>y(p,g))]},r))}),s("div",{"aria-busy":u,...m,...o("conversation-list","root",m.className),children:c})};C.displayName="ConversationList";export{C as ConversationList};

package/dist/conversation-list/index.d.cts

@@ -0,0 +1,2 @@
+export { ConversationList } from './ConversationList.cjs';
+export type { ConversationListItem, ConversationListProps } from './types.cjs';

package/dist/conversation-list/index.d.ts

@@ -0,0 +1,2 @@
+export { ConversationList } from './ConversationList.js';
+export type { ConversationListItem, ConversationListProps } from './types.js';

package/dist/conversation-list/types.d.cts

@@ -0,0 +1,94 @@
+import type * as React from 'react';
+import type { DateInput } from '@skdx/react';
+/** One conversation or thread row rendered by the {@link ConversationList} block. */
+export interface ConversationListItem {
+    /** Identifier committed as the list's selected value when this row is chosen. */
+    id: string;
+    /** Primary line of the row, and the text the list's typeahead matches on. */
+    title: string;
+    /**
+     * Secondary line under the title, clamped by the skin to two lines.
+     * @default undefined — no preview line renders in the row.
+     */
+    preview?: string | undefined;
+    /**
+     * Instant rendered as a relative timestamp in the row's meta column.
+     * @default undefined — no timestamp renders in the row.
+     */
+    timestamp?: DateInput | undefined;
+    /**
+     * Marks the row as not yet read, mirrored to `data-unread` on the option.
+     * @default false
+     */
+    unread?: boolean | undefined;
+    /**
+     * Short count or status text rendered into a small badge beside the timestamp.
+     * @default undefined — no badge renders in the row.
+     */
+    badge?: string | undefined;
+    /**
+     * Heading this row belongs under; rows sharing it render inside one group.
+     * @default undefined — the row renders ungrouped, ahead of every group.
+     */
+    group?: string | undefined;
+    /**
+     * Excludes this row from selection and from keyboard and typeahead navigation.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
+/** Props for the {@link ConversationList} block. */
+export interface ConversationListProps extends React.ComponentPropsWithRef<'div'> {
+    /** The conversations to render, in order, each one a selectable listbox option. */
+    items: ReadonlyArray<ConversationListItem>;
+    /**
+     * Selected conversation's id for controlled usage, paired with `onValueChange`.
+     * @default undefined — uncontrolled, tracking the selected id internally.
+     */
+    value?: string | undefined;
+    /**
+     * Conversation selected on first render, for uncontrolled usage of the list.
+     * @default undefined — no conversation is selected until one is chosen.
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Fires with the newly selected conversation's id whenever the selection moves.
+     * @default undefined — the selection change is not reported anywhere.
+     */
+    onValueChange?: ((value: string) => void) | undefined;
+    /**
+     * Accessible name of the listbox holding the conversation rows.
+     * @default 'Conversations'
+     */
+    label?: string | undefined;
+    /**
+     * Visually hidden text appended to an unread row's title, so the mark is spoken.
+     * @default 'Unread'
+     */
+    unreadLabel?: string | undefined;
+    /**
+     * Heading of the empty state shown when `items` is empty and nothing is loading.
+     * @default 'No conversations'
+     */
+    emptyTitle?: string | undefined;
+    /**
+     * Supporting copy rendered under the empty state's heading, explaining the gap.
+     * @default undefined — the empty state renders its heading alone.
+     */
+    emptyDescription?: string | undefined;
+    /**
+     * Replaces the rows with decorative placeholder lines and marks the root `aria-busy`.
+     * @default false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Reference instant the relative timestamps are measured from, to control re-renders.
+     * @default undefined — each timestamp reads the clock as it renders.
+     */
+    now?: Date | number | undefined;
+    /**
+     * Renders a decorative leading region for a row, such as an avatar or a status dot.
+     * @default undefined — no leading region renders in any row.
+     */
+    renderLeading?: ((item: ConversationListItem) => React.ReactNode) | undefined;
+}