@opencxh/ui-kit 3.175.2 → 3.176.0

package/dist/src/content/activity/ActivityRow.d.ts

@@ -0,0 +1,82 @@
+import { ComponentType, ReactNode } from 'react';
+import { AvatarTone } from '../Avatar';
+/**
+ * What a feed card is, said in colour.
+ *
+ * Two axes fold into one list. Direction: `neutral` (received, and anything that
+ * has no side — a transcript, an upload) versus `out` (sent by us, pale blue).
+ * Kind: `note` is amber and not customer-visible, `assistant` is violet. A
+ * thread is scanned for "did we answer this yet", so the sides have to differ by
+ * hue and not by a percent of grey.
+ */
+export type ActivityTone = "neutral" | "out" | "note" | "assistant";
+export interface ActivityRowProps {
+    /** Who or what this row is from — {@link ActivityAvatar} or {@link ActivityGlyph}. */
+    avatar: ReactNode;
+    /** Bold: a sender's name, or what happened ("Transcript", "2 files"). */
+    title: ReactNode;
+    /** Muted, beside the title: "to jeroen@…", "3 min 48 s · 2 speakers". */
+    context?: ReactNode;
+    /** Right of the header, before the time — a badge, a pending spinner. */
+    meta?: ReactNode;
+    /** Right-most in the header. */
+    time?: string;
+    tone?: ActivityTone;
+    /** Button row along the bottom edge of the card. */
+    actions?: ReactNode;
+    /** Rendered outside the card, under it — an inline composer, read receipts. */
+    below?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * One card in an activity feed: avatar, then a full-width card with a header
+ * line and a body.
+ *
+ * Every kind of activity uses this — mail, note, transcript, files, an
+ * assistant's proposal, a comment under a work item, and whatever an app
+ * declares. They used to be six hand-built variations on the same idea, each
+ * with its own avatar tile, its own header spacing and its own idea of how wide
+ * a card is; you could see the difference scrolling a single conversation.
+ *
+ * The one exception is chat (comms' `ChatMessage`), which keeps left/right
+ * bubbles that size to their content — a one-line "ok" in a full-width card
+ * reads as a document, and a chat thread is the one place where direction *is*
+ * the point.
+ */
+export declare function ActivityRow({ avatar, title, context, meta, time, tone, actions, below, children, }: ActivityRowProps): import("react").JSX.Element;
+/**
+ * A `ghost` button in a card's action row needs a hover a step *darker* than the
+ * card — its own `surface-hover` is the same colour as the fill it sits on.
+ * Applied per button rather than to the row, because a filled button in the same
+ * row (an assistant's "Approve") must keep its own hover.
+ */
+export declare const cardActionClass = "hover:bg-surface-track";
+/**
+ * A person: initials, or their photo. The plate says which side they are on —
+ * the other party in the channel hue, our own side in ink, a note in amber.
+ */
+export declare function ActivityAvatar({ name, src, tone, }: {
+    name?: string;
+    src?: string;
+    tone?: AvatarTone;
+}): import("react").JSX.Element;
+/**
+ * A kind rather than a person — a transcript, an upload, the assistant. One step
+ * darker than the card it introduces, so the glyph reads as a marker and not as
+ * a second surface.
+ */
+export declare function ActivityGlyph({ icon, tone, title, }: {
+    icon: ComponentType<any>;
+    tone?: ActivityTone;
+    title?: string;
+}): import("react").JSX.Element;
+/**
+ * An item *inside* a card — a file, a proposed step, an attachment.
+ *
+ * White on the card's sunk fill: inside a recess the way to separate something
+ * is to lift it, not to sink it further.
+ */
+export declare function RowCard({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/src/content/activity/TimelineEvent.d.ts

@@ -0,0 +1,22 @@
+export interface TimelineEventProps {
+    /** Kebab-case lucide name, e.g. from the activity catalogue. */
+    icon?: string;
+    /** The whole sentence, already resolved and translated by the caller. */
+    text: string;
+    time: string;
+    joinUrl?: string;
+    joinLabel?: string;
+}
+/**
+ * Single-line timeline row: everything that is not a card — assigned, closed,
+ * moved. Deliberately *not* folded into card form: an empty event in a card with
+ * header and avatar wraps three lines of chrome around one sentence.
+ *
+ * Still aligned with the cards: indented to where the card edge starts (avatar +
+ * gap), so the timeline shares one left margin instead of floating each event
+ * in the middle.
+ *
+ * Purely presentational — the caller owns which sentence this is, so per-type
+ * copy stays in the activity catalogue and out of the kit.
+ */
+export declare function TimelineEvent({ icon, text, time, joinUrl, joinLabel }: TimelineEventProps): import("react").JSX.Element;

package/dist/src/index.d.ts

@@ -9,6 +9,8 @@ export { ArtifactView, type ArtifactViewProps } from './content/ArtifactView';
 export { AssistantCard, type AssistantCardProps } from './content/AssistantCard';
 export { Avatar, type AvatarProps, type AvatarTone } from './content/Avatar';
 export { AvatarStack, type AvatarStackPerson, type AvatarStackProps } from './content/AvatarStack';
+export { ActivityAvatar, ActivityGlyph, ActivityRow, type ActivityRowProps, type ActivityTone, cardActionClass, RowCard, } from './content/activity/ActivityRow';
+export { TimelineEvent, type TimelineEventProps } from './content/activity/TimelineEvent';
 export { ChannelBadge, type ChannelBadgeProps, type ChannelKey } from './content/ChannelBadge';
 export { Icon, type IconProps, resolveLucideIcon } from './content/Icon';
 export { Image, type ImageProps } from './content/Image';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencxh/ui-kit",
-  "version": "3.175.2",
+  "version": "3.176.0",
   "description": "Theme-aware UI component library for OpenCXH platform",
   "type": "module",
   "exports": {