@skdx/react-blocks 0.1.0 → 0.35.0

package/README.md

@@ -6,4 +6,4 @@ React blocks for the SkandaDX design system — page-level compositions of `@skd
 pnpm add @skdx/react-blocks @skdx/react
 ```
 
-Documentation: <https://github.com/SkandaDX/ui.skdx/tree/main/packages/react-blocks#readme>
+Documentation: <https://github.com/SkandaDX/ui.skdx/tree/main/packages/blocks/react#readme>

package/dist/chat-composer/ChatComposer.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var B=Object.create;var u=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var H=(t,e)=>{for(var o in e)u(t,o,{get:e[o],enumerable:!0})},S=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of M(e))!z.call(t,a)&&a!==o&&u(t,a,{get:()=>e[a],enumerable:!(s=V(e,a))||s.enumerable});return t};var L=(t,e,o)=>(o=t!=null?B(_(t)):{},S(e||!t||!t.__esModule?u(o,"default",{value:t,enumerable:!0}):o,t)),O=t=>S(u({},"__esModule",{value:!0}),t);var q={};H(q,{ChatComposer:()=>h});module.exports=O(q);var f=require("@skdx/react");function U(...t){let e="";for(let o of t)o&&(e=e?`${e} ${o}`:o);return e}function i(t,e,o){let s=e==="root",a=s?`skdx-${t}`:`skdx-${t}__${e}`,c={className:U(a,o),"data-part":e};return s&&(c["data-skdx-component"]=t),c}var k=require("react/jsx-runtime"),d=({part:t,children:e})=>e?(0,k.jsx)("div",{...t,children:e}):null;d.displayName="Region";var P=L(require("react"),1);function T(t,e,o){let[s,a]=P.useState(e),c=t!==void 0;return[c?t:s,p=>{c||a(p),o?.(p)}]}var n=require("react/jsx-runtime"),h=({value:t,defaultValue:e="",onValueChange:o,placeholder:s,label:a="Message",sendLabel:c="Send",sendIcon:l,submitKey:g="enter",maxRows:p=8,maxLength:N,disabled:x=!1,pending:m=!1,leading:A,trailing:K,attachments:D,footer:$,onSend:w,...y})=>{let[R,C]=T(t,e,o),v=R.trim().length>0,b=()=>{x||m||!v||(w?.({value:R}),t===void 0&&C(""))},E=r=>{g==="none"||r.key!=="Enter"||r.nativeEvent.isComposing||!(g==="enter"?!r.shiftKey:r.metaKey||r.ctrlKey)||(r.preventDefault(),b())};return(0,n.jsxs)("form",{"data-state":m?"pending":void 0,...y,...i("chat-composer","root",y.className),onSubmit:r=>{r.preventDefault(),b()},children:[(0,n.jsx)(d,{part:i("chat-composer","attachments"),children:D}),(0,n.jsxs)("div",{...i("chat-composer","field"),children:[(0,n.jsx)(d,{part:i("chat-composer","leading"),children:A}),(0,n.jsx)(f.Textarea,{"aria-label":a,placeholder:s,value:R,autoResize:!0,minRows:1,maxRows:p,maxLength:N,disabled:x,onChange:r=>{C(r.target.value)},onKeyDown:E,...i("chat-composer","textarea")}),(0,n.jsx)(d,{part:i("chat-composer","trailing"),children:K}),(0,n.jsx)(f.Button,{type:"submit",variant:"primary",iconOnly:!!l,"aria-label":l?c:void 0,loading:m,disabled:x||m||!v,...i("chat-composer","send"),children:l??c})]}),(0,n.jsx)(d,{part:i("chat-composer","footer"),children:$})]})};h.displayName="ChatComposer";0&&(module.exports={ChatComposer});

package/dist/chat-composer/ChatComposer.d.cts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { ChatComposerProps } from './types.cjs';
+/**
+ * Message composer block: an auto-growing Textarea and a submit Button inside a
+ * field, with consumer-supplied attachment, leading, trailing and footer
+ * regions and configurable Enter-to-send behaviour.
+ *
+ * @example
+ * ```tsx
+ * <ChatComposer
+ *   placeholder="Send a message…"
+ *   pending={isSending}
+ *   onSend={(detail) => void send(detail.value)}
+ * />
+ * ```
+ */
+export declare const ChatComposer: {
+    ({ value: valueProp, defaultValue, onValueChange, placeholder, label, sendLabel, sendIcon, submitKey, maxRows, maxLength, disabled, pending, leading, trailing, attachments, footer, onSend, ...props }: ChatComposerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/chat-composer/ChatComposer.d.ts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { ChatComposerProps } from './types.js';
+/**
+ * Message composer block: an auto-growing Textarea and a submit Button inside a
+ * field, with consumer-supplied attachment, leading, trailing and footer
+ * regions and configurable Enter-to-send behaviour.
+ *
+ * @example
+ * ```tsx
+ * <ChatComposer
+ *   placeholder="Send a message…"
+ *   pending={isSending}
+ *   onSend={(detail) => void send(detail.value)}
+ * />
+ * ```
+ */
+export declare const ChatComposer: {
+    ({ value: valueProp, defaultValue, onValueChange, placeholder, label, sendLabel, sendIcon, submitKey, maxRows, maxLength, disabled, pending, leading, trailing, attachments, footer, onSend, ...props }: ChatComposerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/chat-composer/ChatComposer.js

@@ -0,0 +1,2 @@
+'use client';
+import{Button as E,Textarea as B}from"@skdx/react";function $(...e){let t="";for(let a of e)a&&(t=t?`${t} ${a}`:a);return t}function r(e,t,a){let s=t==="root",d=s?`skdx-${e}`:`skdx-${e}__${t}`,n={className:$(d,a),"data-part":t};return s&&(n["data-skdx-component"]=e),n}import{jsx as w}from"react/jsx-runtime";var i=({part:e,children:t})=>t?w("div",{...e,children:t}):null;i.displayName="Region";import*as C from"react";function v(e,t,a){let[s,d]=C.useState(t),n=e!==void 0;return[n?e:s,p=>{n||d(p),a?.(p)}]}import{jsx as c,jsxs as b}from"react/jsx-runtime";var S=({value:e,defaultValue:t="",onValueChange:a,placeholder:s,label:d="Message",sendLabel:n="Send",sendIcon:l,submitKey:u="enter",maxRows:p=8,maxLength:k,disabled:f=!1,pending:m=!1,leading:P,trailing:T,attachments:N,footer:A,onSend:K,...x})=>{let[g,R]=v(e,t,a),h=g.trim().length>0,y=()=>{f||m||!h||(K?.({value:g}),e===void 0&&R(""))},D=o=>{u==="none"||o.key!=="Enter"||o.nativeEvent.isComposing||!(u==="enter"?!o.shiftKey:o.metaKey||o.ctrlKey)||(o.preventDefault(),y())};return b("form",{"data-state":m?"pending":void 0,...x,...r("chat-composer","root",x.className),onSubmit:o=>{o.preventDefault(),y()},children:[c(i,{part:r("chat-composer","attachments"),children:N}),b("div",{...r("chat-composer","field"),children:[c(i,{part:r("chat-composer","leading"),children:P}),c(B,{"aria-label":d,placeholder:s,value:g,autoResize:!0,minRows:1,maxRows:p,maxLength:k,disabled:f,onChange:o=>{R(o.target.value)},onKeyDown:D,...r("chat-composer","textarea")}),c(i,{part:r("chat-composer","trailing"),children:T}),c(E,{type:"submit",variant:"primary",iconOnly:!!l,"aria-label":l?n:void 0,loading:m,disabled:f||m||!h,...r("chat-composer","send"),children:l??n})]}),c(i,{part:r("chat-composer","footer"),children:A})]})};S.displayName="ChatComposer";export{S as ChatComposer};

package/dist/chat-composer/index.d.cts

@@ -0,0 +1,2 @@
+export { ChatComposer } from './ChatComposer.cjs';
+export type { ChatComposerProps, ChatComposerSendDetail, ChatComposerSubmitKey } from './types.cjs';

package/dist/chat-composer/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatComposer } from './ChatComposer.js';
+export type { ChatComposerProps, ChatComposerSendDetail, ChatComposerSubmitKey } from './types.js';

package/dist/chat-composer/types.d.cts

@@ -0,0 +1,96 @@
+import type * as React from 'react';
+/** Which key combination sends the message from inside the textarea. */
+export type ChatComposerSubmitKey = 'enter' | 'mod-enter' | 'none';
+/** What {@link ChatComposerProps.onSend} is called with when a message is sent. */
+export interface ChatComposerSendDetail {
+    /** The composed message text as it stood when the send was triggered. */
+    value: string;
+}
+/** Props for the {@link ChatComposer} block. */
+export interface ChatComposerProps extends Omit<React.ComponentPropsWithRef<'form'>, 'onSubmit' | 'children'> {
+    /**
+     * Current message text, for controlled usage; pair it with `onValueChange`.
+     * @default undefined — uncontrolled, seeded from `defaultValue`.
+     */
+    value?: string | undefined;
+    /**
+     * Initial message text for uncontrolled usage, read only on mount.
+     * @default ''
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Fires with the new text on every edit, including the clear that follows a send.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: ((value: string) => void) | undefined;
+    /**
+     * Hint text shown in the empty textarea, rendered as the native placeholder.
+     * @default undefined — no placeholder text renders.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Accessible name of the message textarea, read by assistive technology.
+     * @default 'Message'
+     */
+    label?: string | undefined;
+    /**
+     * Text of the send button, and its accessible name when `sendIcon` is given.
+     * @default 'Send'
+     */
+    sendLabel?: string | undefined;
+    /**
+     * Glyph rendered inside the send button in place of its text, making it icon-only.
+     * @default undefined — the button renders `sendLabel` as its text.
+     */
+    sendIcon?: React.ReactNode | undefined;
+    /**
+     * Which key sends from the textarea; the other Enter presses insert a newline.
+     * @default 'enter'
+     */
+    submitKey?: ChatComposerSubmitKey | undefined;
+    /**
+     * Caps how far the auto-growing textarea grows, in rows, before it scrolls.
+     * @default 8
+     */
+    maxRows?: number | undefined;
+    /**
+     * Native `maxlength` of the textarea — the longest message it accepts.
+     * @default undefined — no upper bound on the message length.
+     */
+    maxLength?: number | undefined;
+    /**
+     * Disables the textarea and the send button, blocking every send path.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Marks a send in flight: the button is busy and inert, the textarea stays editable.
+     * @default false
+     */
+    pending?: boolean | undefined;
+    /**
+     * Controls rendered inside the field before the textarea, such as an attach button.
+     * @default undefined — no leading region renders.
+     */
+    leading?: React.ReactNode | undefined;
+    /**
+     * Controls rendered inside the field after the textarea, such as a model picker.
+     * @default undefined — no trailing region renders.
+     */
+    trailing?: React.ReactNode | undefined;
+    /**
+     * Attached files or chips rendered in a row above the field.
+     * @default undefined — no attachments region renders.
+     */
+    attachments?: React.ReactNode | undefined;
+    /**
+     * Usage counters or hints rendered in a row below the field.
+     * @default undefined — no footer region renders.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Fires with the message text when a send is triggered by the button or the keyboard.
+     * @default undefined — no-op if omitted.
+     */
+    onSend?: ((detail: ChatComposerSendDetail) => void) | undefined;
+}

package/dist/chat-composer/types.d.ts

@@ -0,0 +1,96 @@
+import type * as React from 'react';
+/** Which key combination sends the message from inside the textarea. */
+export type ChatComposerSubmitKey = 'enter' | 'mod-enter' | 'none';
+/** What {@link ChatComposerProps.onSend} is called with when a message is sent. */
+export interface ChatComposerSendDetail {
+    /** The composed message text as it stood when the send was triggered. */
+    value: string;
+}
+/** Props for the {@link ChatComposer} block. */
+export interface ChatComposerProps extends Omit<React.ComponentPropsWithRef<'form'>, 'onSubmit' | 'children'> {
+    /**
+     * Current message text, for controlled usage; pair it with `onValueChange`.
+     * @default undefined — uncontrolled, seeded from `defaultValue`.
+     */
+    value?: string | undefined;
+    /**
+     * Initial message text for uncontrolled usage, read only on mount.
+     * @default ''
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Fires with the new text on every edit, including the clear that follows a send.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: ((value: string) => void) | undefined;
+    /**
+     * Hint text shown in the empty textarea, rendered as the native placeholder.
+     * @default undefined — no placeholder text renders.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Accessible name of the message textarea, read by assistive technology.
+     * @default 'Message'
+     */
+    label?: string | undefined;
+    /**
+     * Text of the send button, and its accessible name when `sendIcon` is given.
+     * @default 'Send'
+     */
+    sendLabel?: string | undefined;
+    /**
+     * Glyph rendered inside the send button in place of its text, making it icon-only.
+     * @default undefined — the button renders `sendLabel` as its text.
+     */
+    sendIcon?: React.ReactNode | undefined;
+    /**
+     * Which key sends from the textarea; the other Enter presses insert a newline.
+     * @default 'enter'
+     */
+    submitKey?: ChatComposerSubmitKey | undefined;
+    /**
+     * Caps how far the auto-growing textarea grows, in rows, before it scrolls.
+     * @default 8
+     */
+    maxRows?: number | undefined;
+    /**
+     * Native `maxlength` of the textarea — the longest message it accepts.
+     * @default undefined — no upper bound on the message length.
+     */
+    maxLength?: number | undefined;
+    /**
+     * Disables the textarea and the send button, blocking every send path.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Marks a send in flight: the button is busy and inert, the textarea stays editable.
+     * @default false
+     */
+    pending?: boolean | undefined;
+    /**
+     * Controls rendered inside the field before the textarea, such as an attach button.
+     * @default undefined — no leading region renders.
+     */
+    leading?: React.ReactNode | undefined;
+    /**
+     * Controls rendered inside the field after the textarea, such as a model picker.
+     * @default undefined — no trailing region renders.
+     */
+    trailing?: React.ReactNode | undefined;
+    /**
+     * Attached files or chips rendered in a row above the field.
+     * @default undefined — no attachments region renders.
+     */
+    attachments?: React.ReactNode | undefined;
+    /**
+     * Usage counters or hints rendered in a row below the field.
+     * @default undefined — no footer region renders.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Fires with the message text when a send is triggered by the button or the keyboard.
+     * @default undefined — no-op if omitted.
+     */
+    onSend?: ((detail: ChatComposerSendDetail) => void) | undefined;
+}

package/dist/chat-message/ChatMessage.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var c=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var P=(t,e)=>{for(var a in e)c(t,a,{get:e[a],enumerable:!0})},C=(t,e,a,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!y.call(t,r)&&r!==a&&c(t,r,{get:()=>e[r],enumerable:!(d=x(e,r))||d.enumerable});return t};var M=t=>C(c({},"__esModule",{value:!0}),t);var $={};P($,{ChatMessage:()=>u});module.exports=M($);var p=require("@skdx/react");function N(...t){let e="";for(let a of t)a&&(e=e?`${e} ${a}`:a);return e}function n(t,e,a){let d=e==="root",r=d?`skdx-${t}`:`skdx-${t}__${e}`,i={className:N(r,a),"data-part":e};return d&&(i["data-skdx-component"]=t),i}var s=require("react/jsx-runtime"),u=({sender:t,author:e,avatar:a,timestamp:d,now:r,status:i,statusLabel:o,attachments:l,actions:g,footer:f,children:h,...m})=>{let v=e!==void 0||d!==void 0||o!==void 0;return(0,s.jsxs)("article",{"data-sender":t,"data-status":i,"aria-busy":i==="pending"?!0:void 0,...m,...n("chat-message","root",m.className),children:[a?(0,s.jsx)("div",{"aria-hidden":"true",...n("chat-message","avatar"),children:a}):null,(0,s.jsxs)("div",{...n("chat-message","main"),children:[v?(0,s.jsxs)("div",{...n("chat-message","header"),children:[e!==void 0?(0,s.jsx)("span",{...n("chat-message","author"),children:e}):null,d!==void 0?(0,s.jsx)(p.Time,{value:d,relative:!0,now:r,...n("chat-message","time")}):null,o!==void 0?(0,s.jsx)("span",{...n("chat-message","status"),children:o}):null]}):null,(0,s.jsx)("div",{...n("chat-message","content"),children:h}),l?(0,s.jsx)("div",{...n("chat-message","attachments"),children:l}):null,f?(0,s.jsx)("div",{...n("chat-message","footer"),children:f}):null,g?(0,s.jsx)("div",{...n("chat-message","actions"),children:g}):null]})]})};u.displayName="ChatMessage";0&&(module.exports={ChatMessage});

package/dist/chat-message/ChatMessage.d.cts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { ChatMessageProps } from './types.cjs';
+/**
+ * One message in a conversation: author, avatar, timestamp, delivery status,
+ * arbitrary content, attachments, actions and a footer, composing Time; the
+ * sender decides the alignment and the skin, never the wording.
+ *
+ * @example
+ * ```tsx
+ * <ChatMessage
+ *   sender="assistant"
+ *   author="Assistant"
+ *   timestamp={message.sentAt}
+ *   status={message.status}
+ * >
+ *   {message.text}
+ * </ChatMessage>
+ * ```
+ */
+export declare const ChatMessage: {
+    ({ sender, author, avatar, timestamp, now, status, statusLabel, attachments, actions, footer, children, ...props }: ChatMessageProps): React.ReactNode;
+    displayName: string;
+};

package/dist/chat-message/ChatMessage.d.ts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { ChatMessageProps } from './types.js';
+/**
+ * One message in a conversation: author, avatar, timestamp, delivery status,
+ * arbitrary content, attachments, actions and a footer, composing Time; the
+ * sender decides the alignment and the skin, never the wording.
+ *
+ * @example
+ * ```tsx
+ * <ChatMessage
+ *   sender="assistant"
+ *   author="Assistant"
+ *   timestamp={message.sentAt}
+ *   status={message.status}
+ * >
+ *   {message.text}
+ * </ChatMessage>
+ * ```
+ */
+export declare const ChatMessage: {
+    ({ sender, author, avatar, timestamp, now, status, statusLabel, attachments, actions, footer, children, ...props }: ChatMessageProps): React.ReactNode;
+    displayName: string;
+};

package/dist/chat-message/ChatMessage.js

@@ -0,0 +1,2 @@
+'use client';
+import{Time as x}from"@skdx/react";function v(...n){let e="";for(let a of n)a&&(e=e?`${e} ${a}`:a);return e}function t(n,e,a){let d=e==="root",i=d?`skdx-${n}`:`skdx-${n}__${e}`,r={className:v(i,a),"data-part":e};return d&&(r["data-skdx-component"]=n),r}import{jsx as s,jsxs as c}from"react/jsx-runtime";var m=({sender:n,author:e,avatar:a,timestamp:d,now:i,status:r,statusLabel:o,attachments:u,actions:l,footer:g,children:p,...f})=>{let h=e!==void 0||d!==void 0||o!==void 0;return c("article",{"data-sender":n,"data-status":r,"aria-busy":r==="pending"?!0:void 0,...f,...t("chat-message","root",f.className),children:[a?s("div",{"aria-hidden":"true",...t("chat-message","avatar"),children:a}):null,c("div",{...t("chat-message","main"),children:[h?c("div",{...t("chat-message","header"),children:[e!==void 0?s("span",{...t("chat-message","author"),children:e}):null,d!==void 0?s(x,{value:d,relative:!0,now:i,...t("chat-message","time")}):null,o!==void 0?s("span",{...t("chat-message","status"),children:o}):null]}):null,s("div",{...t("chat-message","content"),children:p}),u?s("div",{...t("chat-message","attachments"),children:u}):null,g?s("div",{...t("chat-message","footer"),children:g}):null,l?s("div",{...t("chat-message","actions"),children:l}):null]})]})};m.displayName="ChatMessage";export{m as ChatMessage};

package/dist/chat-message/index.d.cts

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

package/dist/chat-message/index.d.ts

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

package/dist/chat-message/types.d.cts

@@ -0,0 +1,57 @@
+import type * as React from 'react';
+import type { DateInput } from '@skdx/react';
+/** Props for the {@link ChatMessage} block. */
+export interface ChatMessageProps extends React.ComponentPropsWithRef<'article'> {
+    /**
+     * Who sent the message, written to data-sender; the skin aligns user messages to
+     * the end and styles system messages as a centred note.
+     */
+    sender: 'user' | 'assistant' | 'system' | (string & {});
+    /**
+     * Name of the person, model or system that sent the message, rendered as visible text.
+     * @default undefined — no author region renders.
+     */
+    author?: string | undefined;
+    /**
+     * Decorative avatar rendered beside the message, always `aria-hidden`.
+     * @default undefined — no avatar region renders.
+     */
+    avatar?: React.ReactNode | undefined;
+    /**
+     * Instant the message was sent, rendered through a composed Time.
+     * @default undefined — no time region renders.
+     */
+    timestamp?: DateInput | undefined;
+    /**
+     * Reference instant the timestamp's relative label renders against.
+     * @default undefined — read once at render
+     */
+    now?: Date | number | undefined;
+    /**
+     * Delivery state, written to data-status; `'pending'` also sets aria-busy on the root.
+     * @default undefined — no delivery state is written.
+     */
+    status?: 'pending' | 'sent' | 'error' | (string & {}) | undefined;
+    /**
+     * Visible text for the delivery state, in the app's own wording (e.g. "Sending…").
+     * @default undefined — no status region renders.
+     */
+    statusLabel?: string | undefined;
+    /**
+     * Files, links or previews attached to the message, rendered below the content.
+     * @default undefined — no attachments region renders.
+     */
+    attachments?: React.ReactNode | undefined;
+    /**
+     * Controls such as copy, regenerate or react, rendered below the footer.
+     * @default undefined — no actions region renders.
+     */
+    actions?: React.ReactNode | undefined;
+    /**
+     * Citations, token counts or other metadata, rendered below the content.
+     * @default undefined — no footer region renders.
+     */
+    footer?: React.ReactNode | undefined;
+    /** The message content: markdown output, code, citations or tool results. */
+    children: React.ReactNode;
+}

package/dist/chat-message/types.d.ts

@@ -0,0 +1,57 @@
+import type * as React from 'react';
+import type { DateInput } from '@skdx/react';
+/** Props for the {@link ChatMessage} block. */
+export interface ChatMessageProps extends React.ComponentPropsWithRef<'article'> {
+    /**
+     * Who sent the message, written to data-sender; the skin aligns user messages to
+     * the end and styles system messages as a centred note.
+     */
+    sender: 'user' | 'assistant' | 'system' | (string & {});
+    /**
+     * Name of the person, model or system that sent the message, rendered as visible text.
+     * @default undefined — no author region renders.
+     */
+    author?: string | undefined;
+    /**
+     * Decorative avatar rendered beside the message, always `aria-hidden`.
+     * @default undefined — no avatar region renders.
+     */
+    avatar?: React.ReactNode | undefined;
+    /**
+     * Instant the message was sent, rendered through a composed Time.
+     * @default undefined — no time region renders.
+     */
+    timestamp?: DateInput | undefined;
+    /**
+     * Reference instant the timestamp's relative label renders against.
+     * @default undefined — read once at render
+     */
+    now?: Date | number | undefined;
+    /**
+     * Delivery state, written to data-status; `'pending'` also sets aria-busy on the root.
+     * @default undefined — no delivery state is written.
+     */
+    status?: 'pending' | 'sent' | 'error' | (string & {}) | undefined;
+    /**
+     * Visible text for the delivery state, in the app's own wording (e.g. "Sending…").
+     * @default undefined — no status region renders.
+     */
+    statusLabel?: string | undefined;
+    /**
+     * Files, links or previews attached to the message, rendered below the content.
+     * @default undefined — no attachments region renders.
+     */
+    attachments?: React.ReactNode | undefined;
+    /**
+     * Controls such as copy, regenerate or react, rendered below the footer.
+     * @default undefined — no actions region renders.
+     */
+    actions?: React.ReactNode | undefined;
+    /**
+     * Citations, token counts or other metadata, rendered below the content.
+     * @default undefined — no footer region renders.
+     */
+    footer?: React.ReactNode | undefined;
+    /** The message content: markdown output, code, citations or tool results. */
+    children: React.ReactNode;
+}

package/dist/comment/Comment.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var s=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var P=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},y=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let m of k(t))!g.call(e,m)&&m!==n&&s(e,m,{get:()=>t[m],enumerable:!(i=x(t,m))||i.enumerable});return e};var C=e=>y(s({},"__esModule",{value:!0}),e);var N={};P(N,{Comment:()=>d});module.exports=C(N);var f=require("@skdx/react");function b(...e){let t="";for(let n of e)n&&(t=t?`${t} ${n}`:n);return t}function r(e,t,n){let i=t==="root",m=i?`skdx-${e}`:`skdx-${e}__${t}`,a={className:b(m,n),"data-part":t};return i&&(a["data-skdx-component"]=e),a}var o=require("react/jsx-runtime"),d=({author:e,avatar:t,timestamp:n,now:i,edited:m=!1,editedLabel:a="Edited",metadata:c,attachments:l,actions:u,children:v,...p})=>(0,o.jsxs)("article",{...p,...r("comment","root",p.className),children:[t?(0,o.jsx)("div",{"aria-hidden":"true",...r("comment","avatar"),children:t}):null,(0,o.jsxs)("div",{...r("comment","main"),children:[(0,o.jsxs)("div",{...r("comment","header"),children:[(0,o.jsx)("span",{...r("comment","author"),children:e}),c?(0,o.jsx)("span",{...r("comment","metadata"),children:c}):null,n!==void 0?(0,o.jsx)(f.Time,{value:n,relative:!0,now:i,...r("comment","time")}):null,m?(0,o.jsx)("span",{...r("comment","edited"),children:a}):null]}),(0,o.jsx)("div",{...r("comment","content"),children:v}),l?(0,o.jsx)("div",{...r("comment","attachments"),children:l}):null,u?(0,o.jsx)("div",{...r("comment","actions"),children:u}):null]})]});d.displayName="Comment";0&&(module.exports={Comment});

package/dist/comment/Comment.d.cts

@@ -0,0 +1,22 @@
+import type * as React from 'react';
+import type { CommentProps } from './types.cjs';
+/**
+ * One collaboration comment: author, avatar, timestamp, edited indicator,
+ * arbitrary content, attachments and actions such as reply, edit and react.
+ *
+ * @example
+ * ```tsx
+ * <Comment
+ *   author="Priya Shah"
+ *   avatar={<Avatar name="Priya Shah" />}
+ *   timestamp={comment.postedAt}
+ *   actions={<Button size="sm">Reply</Button>}
+ * >
+ *   Looks good to me.
+ * </Comment>
+ * ```
+ */
+export declare const Comment: {
+    ({ author, avatar, timestamp, now, edited, editedLabel, metadata, attachments, actions, children, ...props }: CommentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/comment/Comment.d.ts

@@ -0,0 +1,22 @@
+import type * as React from 'react';
+import type { CommentProps } from './types.js';
+/**
+ * One collaboration comment: author, avatar, timestamp, edited indicator,
+ * arbitrary content, attachments and actions such as reply, edit and react.
+ *
+ * @example
+ * ```tsx
+ * <Comment
+ *   author="Priya Shah"
+ *   avatar={<Avatar name="Priya Shah" />}
+ *   timestamp={comment.postedAt}
+ *   actions={<Button size="sm">Reply</Button>}
+ * >
+ *   Looks good to me.
+ * </Comment>
+ * ```
+ */
+export declare const Comment: {
+    ({ author, avatar, timestamp, now, edited, editedLabel, metadata, attachments, actions, children, ...props }: CommentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/comment/Comment.js

@@ -0,0 +1,2 @@
+'use client';
+import{Time as x}from"@skdx/react";function v(...r){let e="";for(let n of r)n&&(e=e?`${e} ${n}`:n);return e}function t(r,e,n){let m=e==="root",a=m?`skdx-${r}`:`skdx-${r}__${e}`,i={className:v(a,n),"data-part":e};return m&&(i["data-skdx-component"]=r),i}import{jsx as o,jsxs as s}from"react/jsx-runtime";var p=({author:r,avatar:e,timestamp:n,now:m,edited:a=!1,editedLabel:i="Edited",metadata:d,attachments:c,actions:l,children:f,...u})=>s("article",{...u,...t("comment","root",u.className),children:[e?o("div",{"aria-hidden":"true",...t("comment","avatar"),children:e}):null,s("div",{...t("comment","main"),children:[s("div",{...t("comment","header"),children:[o("span",{...t("comment","author"),children:r}),d?o("span",{...t("comment","metadata"),children:d}):null,n!==void 0?o(x,{value:n,relative:!0,now:m,...t("comment","time")}):null,a?o("span",{...t("comment","edited"),children:i}):null]}),o("div",{...t("comment","content"),children:f}),c?o("div",{...t("comment","attachments"),children:c}):null,l?o("div",{...t("comment","actions"),children:l}):null]})]});p.displayName="Comment";export{p as Comment};

package/dist/comment/index.d.cts

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

package/dist/comment/index.d.ts

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

package/dist/comment/types.d.cts

@@ -0,0 +1,47 @@
+import type * as React from 'react';
+import type { DateInput } from '@skdx/react';
+/** Props for the {@link Comment} block. */
+export interface CommentProps extends React.ComponentPropsWithRef<'article'> {
+    /** Name of the person or system that wrote the comment, rendered as visible text. */
+    author: string;
+    /**
+     * Decorative avatar rendered beside the author, always `aria-hidden`.
+     * @default undefined — no avatar region renders.
+     */
+    avatar?: React.ReactNode | undefined;
+    /**
+     * Instant the comment was posted, rendered through a composed Time.
+     * @default undefined — no time region renders.
+     */
+    timestamp?: DateInput | undefined;
+    /**
+     * Reference instant `timestamp` renders relative to, forwarded to Time.
+     * @default undefined — read once at render
+     */
+    now?: Date | number | undefined;
+    /**
+     * Marks the comment as edited since it was first posted.
+     * @default false
+     */
+    edited?: boolean | undefined;
+    /**
+     * Text of the edited indicator, shown only when `edited` is set.
+     * @default 'Edited'
+     */
+    editedLabel?: string | undefined;
+    /**
+     * Badges or supplementary text rendered beside the author, such as an "Author" badge.
+     * @default undefined — no metadata region renders.
+     */
+    metadata?: React.ReactNode | undefined;
+    /**
+     * Files or links attached to the comment, rendered below the content.
+     * @default undefined — no attachments region renders.
+     */
+    attachments?: React.ReactNode | undefined;
+    /**
+     * Controls such as reply, edit and react, rendered below the attachments.
+     * @default undefined — no actions region renders.
+     */
+    actions?: React.ReactNode | undefined;
+}

package/dist/comment/types.d.ts

@@ -0,0 +1,47 @@
+import type * as React from 'react';
+import type { DateInput } from '@skdx/react';
+/** Props for the {@link Comment} block. */
+export interface CommentProps extends React.ComponentPropsWithRef<'article'> {
+    /** Name of the person or system that wrote the comment, rendered as visible text. */
+    author: string;
+    /**
+     * Decorative avatar rendered beside the author, always `aria-hidden`.
+     * @default undefined — no avatar region renders.
+     */
+    avatar?: React.ReactNode | undefined;
+    /**
+     * Instant the comment was posted, rendered through a composed Time.
+     * @default undefined — no time region renders.
+     */
+    timestamp?: DateInput | undefined;
+    /**
+     * Reference instant `timestamp` renders relative to, forwarded to Time.
+     * @default undefined — read once at render
+     */
+    now?: Date | number | undefined;
+    /**
+     * Marks the comment as edited since it was first posted.
+     * @default false
+     */
+    edited?: boolean | undefined;
+    /**
+     * Text of the edited indicator, shown only when `edited` is set.
+     * @default 'Edited'
+     */
+    editedLabel?: string | undefined;
+    /**
+     * Badges or supplementary text rendered beside the author, such as an "Author" badge.
+     * @default undefined — no metadata region renders.
+     */
+    metadata?: React.ReactNode | undefined;
+    /**
+     * Files or links attached to the comment, rendered below the content.
+     * @default undefined — no attachments region renders.
+     */
+    attachments?: React.ReactNode | undefined;
+    /**
+     * Controls such as reply, edit and react, rendered below the attachments.
+     * @default undefined — no actions region renders.
+     */
+    actions?: React.ReactNode | undefined;
+}

package/dist/comment-thread/CommentThread.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var b=Object.create;var m=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},v=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of y(t))!R.call(e,n)&&n!==o&&m(e,n,{get:()=>t[n],enumerable:!(a=k(t,n))||a.enumerable});return e};var N=(e,t,o)=>(o=e!=null?b(P(e)):{},v(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e)),$=e=>v(m({},"__esModule",{value:!0}),e);var V={};S(V,{CommentThread:()=>p});module.exports=$(V);var i=require("@skdx/react/primitives/collapsible");function A(...e){let t="";for(let o of e)o&&(t=t?`${t} ${o}`:o);return t}function s(e,t,o){let a=t==="root",n=a?`skdx-${e}`:`skdx-${e}__${t}`,d={className:A(n,o),"data-part":t};return a&&(d["data-skdx-component"]=e),d}var C=N(require("react"),1);function g(e,t,o){let[a,n]=C.useState(t),d=e!==void 0;return[d?e:a,l=>{d||n(l),o?.(l)}]}var r=require("react/jsx-runtime"),p=({children:e,replies:t,expanded:o,defaultExpanded:a=!0,onExpandedChange:n,showRepliesLabel:d,hideRepliesLabel:f,loadMore:c,composer:l,...x})=>{let[u,T]=g(o,a,n),h=d?(0,r.jsxs)(i.CollapsibleRoot,{open:u,onOpenChange:T,children:[(0,r.jsx)(i.CollapsibleTrigger,{...s("comment-thread","toggle"),children:u?f??d:d}),(0,r.jsx)(i.CollapsibleContent,{...s("comment-thread","replies"),children:t})]}):(0,r.jsx)("div",{...s("comment-thread","replies"),children:t});return(0,r.jsxs)("div",{"data-state":u?"expanded":"collapsed",...x,...s("comment-thread","root",x.className),children:[(0,r.jsx)("div",{...s("comment-thread","comment"),children:e}),t?h:null,c?(0,r.jsx)("div",{...s("comment-thread","load-more"),children:c}):null,l?(0,r.jsx)("div",{...s("comment-thread","composer"),children:l}):null]})};p.displayName="CommentThread";0&&(module.exports={CommentThread});

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

@@ -0,0 +1,21 @@
+import type * as React from 'react';
+import type { CommentThreadProps } from './types.cjs';
+/**
+ * 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;
+};